Smart.App

View-Model Binding. An Element or Multiple Elements can be bound to the same Model object. By reading this tutorial, you will learn how to use Smart Framework features, which will speed up your web application development.

Declarative Rendering

At the core of our framework is a system that enables us to declaratively render data to the DOM using easy to use template syntax. The data and the DOM are linked, and everything is reactive.

See the Pen Declarative Rendering with Smart FRAMEWORK by Boyko Markov (@boyko-markov) on CodePen.

API

Smart.App API:
  • selector - 'ID' or 'Classname' of the Smart.App's root element.
  • components - the classes of UI Components that will be used in the rendering.
  • template - defines the app's template and bindings. Each template member is a JSON object where the key is 'ID' or 'Classname' of a template part like '#grid' in the code below. The value is a member with 'properties', 'listeners' and 'bind' objects.
    • properties - is the object which defines the web component's initialization properties.
    • bind - is the object which defines the binding between the 'properties' and 'data' object. If 'computed' is defined in the bind object, it can be used to transform a 'data' object to such appropriate for the data bound component.
    • listeners is the object which takes care for adding and removing event listeners.

      const app = new Smart.App(
      {
          template: {
              '#button': {
                listeners: {
                  click: 'submit'
                }
              }
            },
      	data: {
      			message: "Hello World",
      			buttonText: "Submit",
      			submit: function(event) {
      				alert("Submitting: " + this.message);
      			}
      		}
      	}
      )
      
  • render - renders the template into the DOM and automatically handles data bindings between components and other HTML Elements
  • data - defines the app's data. This is an Object. If you want to get the App's data, you can use:
    const data = app.data;

Example: https://www.htmlelements.com/demos/framework/init-from-app/.
 import {App} from "../../source/modules/smart.element.js";  
 import {smartGrid} from "../../source/modules/smart.grid.js";  
 import {smartDropDownList} from "../../source/modules/smart.dropdownlist.js";  
 const app = new App({  
   selector: "#app",  
   components: [smartGrid, smartDropDownList],  
   template: {  
     "#grid": {  
       properties: {  
         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' }  
         ]  
       },  
       bind: {  
         dataSource: 'data',  
         computed: function(propertyObject) {  
           const item = propertyObject.item;  
           const value = propertyObject.value;  
           if (propertyObject.name === 'data') {  
             propertyObject.value = new Smart.DataAdapter(  
                            {  
                              dataSource: propertyObject.value,  
                              dataFields:  
                                 [  
                                      'id: number',  
                                      'firstName: string',  
                                      'lastName: string',  
                                      'productName: string',  
                                      'available: bool',  
                                      'quantity: number',  
                                      'price: number',  
                                      'total: number'  
                                 ]  
                            })  
           }  
         }  
       }  
     },  
     "#dropDownList": {  
       properties: {  
         displayMember: 'firstName'  
       },  
       bind: {  
         dataSource: 'data',  
         selectedIndexes: 'index'  
       }  
     }  
   },  
   data: {  
     index: [1],  
     data: generateData(100),  
     message: "Hello Smart World"                           
   },  
   render: function() {  
     return `  
          <smartGrid id="grid"></smartGrid>  
             <br/><br/>  
          <span>  
                  {{message}}  
          </span>  
          <br/><br/>  
          <smartDropDownList id="dropDownList"></smartDropDownList>  
      `        
   }  
 });  

Loops and List Rendering

The smart-for directive can be used for displaying a list of items using the data from an Array:

See the Pen Loops Rendering with Smart Framework by Boyko Markov (@boyko-markov) on CodePen.


Model Event Binding

With the (event name)="functionName()" syntax in the HTML, we can bind to Events. Example: (click)="cellClick(). It is also possible to bind to events by using the Smart.App 'listeners' object as shown in the API section.
This example combines Event Binding with smart-for to render HTML Table

See the Pen Render Table with Smart Framework by Boyko Markov (@boyko-markov) on CodePen.

Two-Way sub-property Binding

You can use the Smart-model directive to create two-way data bindings between HTML Elements and the Data Model.

See the Pen Two-Way Binding with Smart FRAMEWORK by Boyko Markov (@boyko-markov) on CodePen.

Form Inputs Binding

The code samples show how to bind HTML Inputs.
Checkbox

See the Pen Checkbox Input by Boyko Markov (@boyko-markov) on CodePen.

INPUT

See the Pen Data Bindings with HTML Elements and Smart-MODEL by Boyko Markov (@boyko-markov) on CodePen.

Smart Inputs Binding

You can also bind our set of Custom Elements exactly the same way.

See the Pen App Data Bindings by Boyko Markov (@boyko-markov) on CodePen.

GRID layout system

Smart provides a powerful mobile-first 12-column Grid layout system, five default responsive tiers, row and column gaps, optional ordering. Our grid system uses a series of containers, rows, and columns to layout content. It is built with Grid Layout and is fully responsive. The columns are defined with "col-sm-4" class for small devices and when the size reaches the breakpoint, the columns are stacked.

See the Pen Grid Layout Simple Demo by Boyko Markov (@boyko-markov) on CodePen.



See the Pen Grid Layout Options Demo by Boyko Markov (@boyko-markov) on CodePen.



See the Pen Grid Layout Overview Demo by Boyko Markov (@boyko-markov) on CodePen.



See the Pen Grid Layout Overview Demo by Boyko Markov (@boyko-markov) on CodePen.

STACK layout system

StackLayout organizes views in a one-dimensional line ("stack"), either horizontally or vertically. Views in a StackLayout can be sized based on the space in the layout using layout options. Positioning is determined by the order views were added to the layout and the layout options of the views.

See the Pen Stacked Layout Options Demo by Boyko Markov (@boyko-markov) on CodePen.





See the Pen Stacked Layout Overview Demo by Boyko Markov (@boyko-markov) on CodePen.