Lazy Initialization of Web Components

This post shows how to create a Grid Web component and initialize it from a DIV tag

The next version ver3.1.0 of Smart HTML Elements will introduce an alternative way to create a Web Component on demand from an existing HTML Element.

Let's look at the sample below. In the 'index.htm' web page code, we see a HTMLDIVElement(DIV tag) with id="grid". We will use that HTML element to create a new Grid Web Component instance.

<!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <title>Grid Lazy Load Demo</title>  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />  
   <link rel="stylesheet" type="text/css" href="../../../source/styles/smart.default.css" />  
   <link rel="stylesheet" type="text/css" href="../../../styles/demos.css" />  
   <link rel="stylesheet" type="text/css" href="../../../styles/common.css" />  
   <link rel="stylesheet" type="text/css" href="styles.css" />  
   <script type="text/javascript" src="../../../scripts/common.js"></script>  
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>  
   <script type="module" src="index.js">  
   </script>  
 </head>  
 <body>  
   <div id="grid"></div>  
 </body>  
 </html>  


The 'index.js' file is defined as a Javascript Module. In that module our grid web component is created on window.onload, within a function called 'init()'. That is achieved by calling the Smart.Grid function and passing as a first argument the 'id' of the DIV tag and as a second argument the initialization object with the Grid web component's dataSource, columns and other configuration options. As a result, our DIV tag is replaced with a 'smart-grid' tag and a Grid is displayed.

That approach is useful, when we want to update an existing application with minimum changes or to create a Smart Web Component on demand with ES6 code.

import "../../../source/smart.elements.js";  
import "../../../scripts/data.js";  
 
document.readyState === 'complete' ? init() : window.onload = init;  
 function init() {  
   const grid = new Smart.Grid('#grid', {  
     dataSource: new Smart.DataAdapter(  
     {  
       dataSource: Data,  
       dataFields:  
       [  
         'id: number',  
         'firstName: string',  
         'lastName: string',  
         'productName: string',  
         'available: bool',  
         'quantity: number',  
         'price: number',  
         'total: number'  
       ]  
     }),      
     columns: [  
     {  
       label: 'First Name', dataField: 'firstName'  
     },  
     { label: 'Last Name', dataField: 'lastName' },  
     { label: 'Product', dataField: 'productName' },  
     { label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' },  
     { label: 'Quantity', dataField: 'quantity', editor: 'numberInput' },  
     { label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' }  
     ]  
   });  
 }  

This entry was posted in HTML Elements, Javascript, Web Components and tagged , , , . Bookmark the permalink.

Leave a Reply