Download & Installation - Documentation | www.HtmlElements.com

Getting Started with Smart HTML Elements

Depending on your preferences and the requirements of your project, you can:

Hosting Smart HTML Elements in Your Project

To host Smart HTML Elements in your project, you need to:

  • Download Smart HTML Elements
  • Add the CSS and JavaScript references.

Download Smart HTML Elements

After you download any of the Smart HTML Elements bundles, the folders listed below are hosted in your local repository.

FOLDERS CONTENTS
/demos The folder contains quick-start demo files. It is recommended that you open them through a web server instead of folder from the file system, because that approach breaks the Ajax data requests.
/source Contains the minified JavaScript files.
/source/modules/ Contains the javascript modules.
/source/styles Consists of the minified CSS files and theme images.
/scripts Consists of javascript files used in the demos.
/images Consists of images files used in the demos.
readme.htm Provides the Smart HTML Elements release notes.

Add CSS and JavaScript References

To use Smart HTML Elements your project, include the required JavaScript and CSS files.

Step 1 Extract the /source and /styles folders from the bundle archive and copy them to your web application root folder.

Step 2 Include the Smart HTML Elements Javascript and CSS files in the head tag of your HTML document..

Example
	<!DOCTYPE html>  
	 <html lang="en">  
	   <head>  
		<link rel="stylesheet" href="source/styles/smart.default.css" type="text/css" />  
		<script type="text/javascript" src="source/smart.elements.js"></script>  
	   </head>  
	   <body>  
		<smart-button id="button">Click Me</smart-button>  
	   </body>  
	 </html>  
	


Import as Module

With this approach, we import a module and create the web component by using the Smart function. The #ganttChart is the id of a smart-gantt-chart tag.
	import {smartGanttChart} from "../../source/modules/smart.ganttchart.js";

	Smart("#ganttChart", class {
		get properties() 
		{
			return {
				durationUnit: 'hour',
				taskColumns: [
					{
						label: 'Tasks',
						value: 'label',
						size: '60%'
					},
					{
						label: 'Duration (hours)',
						value: 'duration',
						formatFunction: (date) =>  parseInt(date)
					}],
					dataSource:[
					{
						label: 'PRD & User-Stories',
						dateStart: '2019-01-10',
						dateEnd: '2019-02-10',
						class: 'product-team',
						type: 'task'
					},
					{
						label: 'Persona & Journey',
						dateStart: '2019-02-11',
						dateEnd: '2019-03-10',
						class: 'marketing-team',
						type: 'task'
					},
					{
						label: 'Architecture',
						dateStart: '2019-03-11',
						dateEnd: '2019-04-1',
						class: 'product-team',
						type: 'task'
					},
					{
						label: 'Prototyping',
						dateStart: '2019-04-02',
						dateEnd: '2019-05-01',
						class: 'dev-team',
						type: 'task'
					},
					{
						label: 'Design',
						dateStart: '2019-05-02',
						dateEnd: '2019-06-31',
						class: 'design-team',
						type: 'task'
					},
					{
						label: 'Development',
						dateStart: '2019-07-01',
						dateEnd: '2019-08-10',
						class: 'dev-team',
						type: 'task'
					},
					{
						label: 'Testing & QA',
						dateStart: '2019-08-11',
						dateEnd: '2019-09-10',
						class: 'qa-team',
						type: 'task'
					},
					{
						label: 'UAT Test',
						dateStart: '2019-09-12',
						dateEnd: '2019-10-01',
						class: 'product-team',
						type: 'task'
					},
					{
						label: 'Handover & Documentation',
						dateStart: '2019-10-02',
						dateEnd: '2019-11-01',
						class: 'marketing-team',
						type: 'task'
					},
					{
						label: 'Release',
						dateStart: '2019-11-01',
						dateEnd: '2019-12-31',
						class: 'release-team',
						type: 'task'
					}
				]	
			}
		}
	});

	document.readyState === 'complete' ? init() : window.onload = init;

	function init() { 

	}
	
Using the Smart function is optional. You can use const ganttChart = document.querySelector("#ganttChart"); and set the properties like that:
	const ganttChart = document.querySelector("#ganttChart");
	ganttChart.durationUnit = 'hour';
	

Import as Module, Init on Demand

The following imports the web component's module and creates it on demand, when the document is ready. The #ganttChart is a DIV tag.
	import {smartGanttChart} from "../../source/modules/smart.ganttchart.js";

	document.readyState === 'complete' ? init() : window.onload = init;

	function init() { 
	  const gantt = new smartGanttChart('#ganttChart', {
			durationUnit: 'hour',
			taskColumns: [
				{
					label: 'Tasks',
					value: 'label',
					size: '60%'
				},
				{
					label: 'Duration (hours)',
					value: 'duration',
					formatFunction: (date) =>  parseInt(date)
				}],
				dataSource:[
				{
					label: 'PRD & User-Stories',
					dateStart: '2019-01-10',
					dateEnd: '2019-02-10',
					class: 'product-team',
					type: 'task'
				},
				{
					label: 'Persona & Journey',
					dateStart: '2019-02-11',
					dateEnd: '2019-03-10',
					class: 'marketing-team',
					type: 'task'
				},
				{
					label: 'Architecture',
					dateStart: '2019-03-11',
					dateEnd: '2019-04-1',
					class: 'product-team',
					type: 'task'
				},
				{
					label: 'Prototyping',
					dateStart: '2019-04-02',
					dateEnd: '2019-05-01',
					class: 'dev-team',
					type: 'task'
				},
				{
					label: 'Design',
					dateStart: '2019-05-02',
					dateEnd: '2019-06-31',
					class: 'design-team',
					type: 'task'
				},
				{
					label: 'Development',
					dateStart: '2019-07-01',
					dateEnd: '2019-08-10',
					class: 'dev-team',
					type: 'task'
				},
				{
					label: 'Testing & QA',
					dateStart: '2019-08-11',
					dateEnd: '2019-09-10',
					class: 'qa-team',
					type: 'task'
				},
				{
					label: 'UAT Test',
					dateStart: '2019-09-12',
					dateEnd: '2019-10-01',
					class: 'product-team',
					type: 'task'
				},
				{
					label: 'Handover & Documentation',
					dateStart: '2019-10-02',
					dateEnd: '2019-11-01',
					class: 'marketing-team',
					type: 'task'
				},
				{
					label: 'Release',
					dateStart: '2019-11-01',
					dateEnd: '2019-12-31',
					class: 'release-team',
					type: 'task'
				}
			]	
		});
	}
	

Using with npm and import

  • Install smart-core and create a new index.htm file:
    	 <!DOCTYPE html>  
    	 <html>  
    	 <head>  
    	   <link rel="stylesheet" href="./node_modules/@smarthtmlelements/smart-core/source/styles/smart.default.css" type="text/css" />  
    		  <style>  
    			   smart-carousel {  
    					width: 100%;  
    					height: 600px;  
    			   }  
    		  </style>  
    	   <script type="module">  
    			   import './node_modules/@smarthtmlelements/smart-core/source/smart.core.js';  
    	   </script>  
    	   <script>  
    		window.onload = function () {  
    			   const carouselSquare = document.getElementById('carouselSquare');   
    			   carouselSquare.dataSource = [  
    					{image: 'https://free-images.com/md/86a4/aroma_aromatic_beverage_bio.jpg'},  
    					{image: 'https://free-images.com/md/4138/artistic_conception_green_689793.jpg'},  
    					{image: 'https://free-images.com/md/9947/splashing_splash_aqua_water.jpg'},  
    					{image: 'https://free-images.com/lg/521e/common_snowdrop_galanthus_nivalis.jpg'},  
    					{image: 'https://free-images.com/lg/7bf2/snowdrop_blossom_bloom_1025078.jpg'}  
    			   ];  
    		   }  
    	   </script>  
    	 </head>  
    	 <body>  
    		<smart-carousel id="carouselSquare" hide-arrows auto-play slide-show loop hide-indicators hide-buttons keyboard display-mode="3d" interval="10000"></smart-carousel>  
    	 </body>  
    	 </html>  
    	
  • Install http-server
  • Run the server with this command prompt command: http-server
  • Navigate to http://localhost:8080/index.htm.

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event

Create a new element:
	const ganttChart = document.createElement('smart-gantt-chart');
	

Append it to the DOM:
	document.body.appendChild(ganttChart);
	

Remove it from the DOM:
	ganttChart.parentNode.removeChild(ganttChart);
	

Set a property:
	ganttChart.propertyName = propertyValue;
	

Get a property value:
	const propertyValue = ganttChart.propertyName;
	

Invoke a method:
	ganttChart.methodName(argument1, argument2);
	

Add Event Listener:
	const eventHandler = (event) => {
	   // your code here.
	};

	ganttChart.addEventListener(eventName, eventHandler);
	

Remove Event Listener:
	ganttChart.removeEventListener(eventName, eventHandler, true);