@uilite/ui v2.0.14

Getting Start

Installation

 npm install @uilite/ui

Create Project

  npx uilite create

Directory Structure

Controller

In this directory define the webserver structure of rest api
eg
   import { Controller, RequestBody, RequestMap, RequestParam, RequestQuery } from "@uilite/ui/web/WebAnotation";
   @Controller({url:""})
   export class TestController{
        @RequestMap("post","/stu/:id")
        getStudent(@RequestParam("id") id,@RequestQuery("id") id1,@RequestBody data):any{
            return {msg:"test",id:id,id1,data}
        }
    }

  Please check below code for refrence  

public

 In this directory store only static file like css, js, html, .env etc

Server

  In this directory use for create web server

.env

     TEMPLATE_PATH=views
     CORS=true

configration.ts

        let envirementFileName=".env"
        if(process.argv.length>=3){
            envirementFileName=process.argv[2]+".env";
        }
        require('dotenv').config({path:__dirname+"/"+envirementFileName})
        import * as bodyParser from "body-parser";
        import * as express from "express"
        let cors=require("cors")
        export function configServer(){
            let isCors=false;
            if(process.env.CORS){
                isCors=(process.env.CORS=="true")?true:false
            }
            var app=express();
            if(isCors){
            app.use(cors());
            console.log("cors is enable");
            }
            else{
                console.log("cors is disable")
            }
            app.use(bodyParser.json()); 
            app.use(bodyParser.urlencoded({ extended: true })); 
            app.set('views', __dirname+ '/views');
            app.set('view engine', 'ejs');
            app.use("/asset",express.static(__dirname+"/"+(process.env.TEMPLATE_PATH || "views")+"/asset"))
            return app;
        }

    In this file configration are there like enable cors,body and template engine

index.ts

    import { TestController } from "../Controller/Test.controller"  // this controller is define in above
    import { Server } from "@uilite/ui/web/WebAnotation"
    import {configServer} from "./configration"
    var app=configServer();
    app.get("/page",(req,res)=>{
        res.render("index",{title:"Testing page"})
    })
    Server.setApp(app);
    Server.addController(new TestController());
    app.listen(4600,()=>{
        console.log("server start");
    })

Src

Component

import  {UILite,ComponentUI}  from "@uilite/ui"
@ComponentUI({tagName:"app-demo",template:'<div>Hellow World</div>'})
class AppDemo extends UILite{

}

Component hooks

beforeInit()

  This hook will call when component is created not init

init()

  This hook will call when component is  init

afterInit()

        This hook will call when after  init of component

reInit()

        Re-init hook will call when component is removeed in view from parent component and agin add in view then re-init hook will call 

updateComponent()

       Use of this method you re-render the view of component

onChangeAttribute(attr:{oldValue:any,newValue:any})

      this hook will call when component will change with attribute

Component Directive

Module

import  {ModuleUI}  from "@uilite/ui"
import {AppDemo} from "/component/path"
@ModuleUI({component:[
  AppDemo
],
module:[]
})
export class AppModule{
}

Module Execution

        import { AppModule } from "module/path";
        import  {moduleExecutionUI}  from "@uilite/ui"
        moduleExecutionUI(new AppModule())

Html Predefine Attribute

__if

     it will use for condition if condition is true the element will appear other wise remove

    eg-1
     <div __if="true">display</div>
     <div __if="false">display</div>

     output
        display

__for

    it will use for itration for same type of elements
    eg
    <div  __for="item in this.itemList;i">{__fs.item.name+" "+__fs.item.price}</div>

    In for loop there are two part 

    1st part `item in this.itemList`
         here itemList is array of item and item will bind with __fs which is a globle veriable of component and share to child elemnts

    2nd part `i` after semiclone i is a veriable which contain index of for loop 

__routerpath

  it will show the elemnt if router path is match

  eg  
   <div __routerpath="/demo">demo is active</div>

   here when i hit url {base_url}/demo then this element will appear

__routerlink

it is a just like hyper link without refresh page

eg
<a __routerlink="'/demo'">demo</a>

__bind-ref

    bind-ref is bind the html element with component veriable

    eg
     component code
        import {ComponentUI,UILite} from "@uilite/ui"
        import EleRef from "@uilite/ui/FormUtil/EleRef"
        import "./SlideBar.scss"
        let html=require('./SlideBar.html');   
        @ComponentUI({tagName:"app-demo",'<div __bind-ref="this.slider" __e-click='this.changeColor()' > Slider element</div>':})
        export class Demo extends UILite{
            slider=new EleRef();
            changeColor(){
                 this.slider.getElement().style.color='red'
            }
        }   

update particular element in component

example
in html
<div pointer="key1">{this.name}</div>
<div pointer="key2">{__fs.name}</div>

in ts file
this.updateComponent({pointerList:[
    {
        key:"key1"
    },
    {
        key:"key2",
        __fs:{name:"ram"}   // local function state data which is define in html
    }
],
__fs:{} // // globel function state data which is define in html and comman for all pointerList.
})