Varang NPM | npm.io

Table of Content (TOC)

0100 Introduction

VarAng is a UI components library based on Angular 2. At the moment VarGrid (data table) is implemented. You can see the npm package from here and source code from here. There is a Spring Data Rest implementation in this address. Here is the syntax. Varang project aims to develop the components below.

VarGrid
VarTab
VarMenu
VarTree
VarTreeTable
VarList
VarChat ##VarAng Components

VarAng aims to develop the components below.

VarGrid
VarTab
VarMenu
VarTree
VarTreeTable
VarList
VarChat

0210 VarGrid

VarGrid is a datatable that supports the functionalities below at the moment (v0.2.6). There is a VarGrid show case that is integrated with Spring Data Rest in this address.

VarGrid has a syntax below.

<VarGrid>
    <VarGridDataSource methodType="POST" dataOrigin="remote" 
        loadOnInit="true"  url="url" serverType="rest">
        {
        "url":"http://localhost:8080/ebys/datarest/persons"
        }
    </VarGridDataSource>
    
    <VarGridRemoteDataProviderMapping>
        {
            "in":{
                "jsonXPath":
                    {
                        "list": "_embedded.persons",
                        "pageSize": "page.size",
                        "pageIndex": "page.number",
                        "total": "page.totalElements"
                    }
            },
            "out":{
                "pageStart": "page",
                "pageSize": "rows",
                "sortIndex":"sidx",
                "sortOrder": "sord"
            }
        }
    </VarGridRemoteDataProviderMapping>         

    <VarGridClientPagerParams>
        {
            "id":"id",
            "sortIndex": "id",
            "pageSize": 10,
            "pageSizes": [10,30,50],
            "sortOrder": "ASC",
            "pageStart": 0
        }
    </VarGridClientPagerParams> 

    <VarGridRow>
        <VarGridColumn label="checkbox"  styleClass="grid_checkbox" type="checkbox"></VarGridColumn>
        <VarGridColumn label="id" name="id" styleClass="grid_id" ></VarGridColumn>
        <VarGridColumn label="name" name="name" styleClass="grid_name" ></VarGridColumn>
        <VarGridColumn label="firstName" name="firstName" styleClass="grid_firstName" ></VarGridColumn>
    </VarGridRow>

</VarGrid>

There are four configuration sections: VarGridDataSource, VarGridRemoteDataProviderMapping, VarGridClientPagerParams, VarGridRow having the explanation below.

The configuration above results in a display below if the server side is properly configured. There is a server side paginated data implementation which is developed by Spring Boot in this address.

[Basic apperance of VarGrid-v025] (https://raw.githubusercontent.com/varang/varang/master/docs/githubpages/images/vargrid-v025-output.png “Var Grid v0.2.5 output screenshot”)

For the Spring Boot implementation that is provided in this address, the rest api provided by http://localhost:8080/ebys/datarest/persons produces json structure below.

{
  "_embedded" : {
    "persons" : [ {
      "id" : 1,
      "code" : null,
      "aciklama" : null,
      "active" : true,
      "version" : null,
      "md5" : null,
      "createTime" : "2016-06-05T13:24:36.827+0000",
      "updateTime" : "2016-06-05T13:24:36.827+0000",
      "firstName" : "person 0",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/ebys/datarest/persons/1"
        },
        "person" : {
          "href" : "http://localhost:8080/ebys/datarest/persons/1{?projection}",
          "templated" : true
        }
      }
    }, {
      "id" : 2,
      "code" : null,
      "aciklama" : null,
      "active" : true,
      "version" : null,
      "md5" : null,
      "createTime" : "2016-06-05T13:24:36.867+0000",
      "updateTime" : "2016-06-05T13:24:36.867+0000",
      "firstName" : "person 1",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/ebys/datarest/persons/2"
        },
        "person" : {
          "href" : "http://localhost:8080/ebys/datarest/persons/2{?projection}",
          "templated" : true
        }
      }
    },
    ]
  },
  "_links" : {
    "first" : {
      "href" : "http://localhost:8080/ebys/datarest/persons?page=0&rows=10"
    },
    "self" : {
      "href" : "http://localhost:8080/ebys/datarest/persons"
    },
    "next" : {
      "href" : "http://localhost:8080/ebys/datarest/persons?page=1&rows=10"
    },
    "last" : {
      "href" : "http://localhost:8080/ebys/datarest/persons?page=46&rows=10"
    },
    "profile" : {
      "href" : "http://localhost:8080/ebys/datarest/profile/persons"
    }
  },
  "page" : {
    "size" : 10,
    "totalElements" : 461,
    "totalPages" : 47,
    "number" : 0
  }
}

and VarGrid becomes aware of the json structure with the configuration below. VarGrid consumes the "_embedded.persons" JSON list provided above by having the configuration "list": "_embedded.persons".

    <VarGridRemoteDataProviderMapping>
        {
            "in":{
                "jsonXPath":
                    {
                        "list": "_embedded.persons",
                        "pageSize": "page.size",
                        "pageIndex": "page.number",
                        "total": "page.totalElements"
                    }
            },
            "out":{
                "pageStart": "page",
                "pageSize": "rows",
                "sortIndex":"sidx",
                "sortOrder": "sord"
            }
        }
    </VarGridRemoteDataProviderMapping>

Features

VarGrid-v0.2.5 supports

Bootstap css framework.
Configurable GET and POST methods
Local (static) and remote (REST) data sources.
Ajax based pagination
Different varying data structure. One can adapt the data structure mapping by configuration parameters.
Sorting
Spring Data Rest integration
Checkboxed rows
Event handlings: onComplete, onRequest, onRowInserting, onRowSelect, onDoubleClick, onSorting, onPaging

Events

VarGrid supports events below.

onComplete
onRequest
onRowInserting
onRowSelect
onDoubleClick
onSorting
onPaging

All events are subscribed in the tag and have two phases:before and after. You can see an example here.

The type of the events is VarGridEvent that has definition below.

export enum VarangInterceptor {Before=0, After=1}

export class VarangEvent {
    source:any;
    target:any;
    value:any;    
    intercept:VarangInterceptor=VarangInterceptor.Before; //before, after

    constructor(s:any,t:any,v:any,i:VarangInterceptor){
      this.source = s;
      this.target = t;
      this.value = v;
      this.intercept = i;
   }   

}

export class VarGridEvent extends VarangEvent {
  constructor(s:any,t:any,v:any,i:VarangInterceptor){
    super(s,t,v,i);
   } 
}

Here is an example that sets an event while paging.

Paging callback function should be registered in VarGrid tag as shown below.

<VarGrid (onPaging)="onGridPaging($event)">
...!configuration parameters!...
</VarGrid>

The call back function onGridPaging should have implementation below.

onGridPaging(event:VarGridEvent) {
    if (event.intercept = VarangInterceptor.Before){
        alert("before paging");
    } else if (event.intercept = VarangInterceptor.After) {
        alert("after paging");
    }
}

The input parameter of the ongGrdPaging function should be in the VarGridEvent type. To handle different phases of the event, for example before paging or after paging, event.interceptor value should be checked as in the example above.