Table of Content (TOC)

• 0100 Introduction
• 0200 Components
• 0210 --VarGrid
• 0999 Conclusion

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.

1. VarGrid
2. VarTab
3. VarMenu
4. VarTree
5. VarTreeTable
6. VarList
7. VarChat ##VarAng Components

VarAng aims to develop the components below.

1. VarGrid
2. VarTab
3. VarMenu
4. VarTree
5. VarTreeTable
6. VarList
7. 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

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

Events

VarGrid supports events below.

1. onComplete
2. onRequest
3. onRowInserting
4. onRowSelect
5. onDoubleClick
6. onSorting
7. 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.

Next to do

VarGrid is still in development. The features below are intented to be developed. The next fetaure to be added is Changeable column orders

1. Changeable column orders
2. Column grouping
3. Search dialog
4. Search toolbar
5. Footer buttons
6. Pdf and excel export drivers.
7. Button cells
8. Subgrid
9. UI enhancement
10. Adaptable css templates
11. Editable row

0999 Conclusion

This is the end.