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