Presentation - SYRCoSE

handslustyInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 3 μήνες)

42 εμφανίσεις

I
nformation system
u
ser
interfaces

automatic creation

Alexander Korotkov

Moscow Engineering Physics Institute

Moscow, Russia

email:
aekorotkov@gmail.com


Task



Automatically user interface creating is
the very actual task for the information
system.


Solution of this task greatly decreases the
information system development time


UI very frequently needs some project
specific features


Many UI parts are evidently reasonable for
automatic creation


There are various approaches for
automatic creation of UI


Approach 1: Code generation

When we code
generation is used
the most part of
actions which
developers performs
when creating UI are
executed
automatically.


Approach 1: Code generation

Then there is question how to transfer meta
-
information
changes to already generated and corrected by a programmer
code.

Approach 2: Runtime UI generation


The manual code
correction is not used


All information needed to
configure UI is included
into meta
-
information


There is no problem of
transferring changes


Examles:


Databases administration
tools


The administration
generator of Symfony PHP
Framework

Approach 2: Runtime UI generation



Any specific UI
customizations
must be covered by
the meta
-
information and the
generator
possibilities

Proposed approach


Author proposes
the hybrid approach
when the generated
code and the
manual corrections
are logically
separated by the
mechanism of
inheritance.

Proposed approach

When the meta
-
information is changed then the base class will
be regenerated but changes in derived class will be minimal.

Decomposition


We need to decomposite generated
UI component information into class
properties and methods in order that
the minimum vulnerability with
respect to changes in base class will
be achieved


Such decomposition should be
developed for each generated UI
component

Decomposition of form


A UI form can be decomposed into
several things:



F
ield
s

layout


Fields configuration


Methods which saves and loads a
form data


Form fields event listeners

Decomposition of grid


A grid can be decomposed into several
things:



Column configuration


Column renderers


Row configuration


Filters



For the editable grid we need few things
additionally:


Editor configurations


Editor events handlers

Implementation



To implement this approach the
Web
-
interface which uses the
Javascript
-
framework ExtJS is
generated.

This approach was
implemented for the


Ext.FormPanel

class


Ext.Grid class.

Implementation for a form



Properties of field configurations (field name +
'Config')


Property of fields layout ('itemsLayoutConfig')


Methods which calculates the form field value
('set' + field name + 'FormField' and 'get' +
field name + 'FormField')


Method which calculates the data field ('set' +
field name + 'DataField' and 'get' + field name
+ 'DataField')


Properties of event listeners (field name +
'Listeners')


The form class contains following properties
and methods:

Implementation for a grid


Properties of column configurations (column
name + 'Config')


Column render methods (column name +
'Render')


Row visual configuration method
('getRowClass')


Filter form properties (column name + 'Filter')


Filter data for submission methods (column
name + 'FilterSubmit')


Column editor configurations properties
(column name + 'Editor')


Event listeners definitions properties (column
name + 'Listeners')


The grid class contains following properties and
methods

Examples: form



The data model contains the
person contact information.


First name


Last name


Email address


Telephone number


Post address

Generated classes for form

Ext.ux.forms.PersonBase = Ext.extend(Ext.ux.Form, {


firstConfig:


{


fieldLabel: 'First Name',


xtype: 'textfield'


},


lastConfig: {


fieldLabel: 'Last Name',


xtype: 'textfield'


},


emailConfig: {


fieldLabel: 'Email',


xtype: 'textfield'


},


phoneConfig: {


fieldLabel: 'Phone',


xtype: 'textfield'


},


addressConfig: {


fieldLabel: 'Address',


xtype: 'textfield'


},


itemsLayoutConfig: [


'first',


'last',


'email',


'phone',


'address'


]

});


Ext.ux.forms.Person =
Ext.extend(Ext.ux.forms.PersonBase, {

});

Fields
unification

Let’s assume that we would like to display the first name and the last
name in the single field.

Ext.ux.forms.Person = Ext.extend(Ext.ux.forms.PersonBase, {


firstConfig:


{


fieldLabel: 'Full name',


xtype: 'textfield'


},


lastConfig: null,


setFirstFormField: function(v)


{


this.fields.first.setValue(


v.first+' '+v.last);


},




getFirstFormField: function()


{


var the = this.fields.first


.getValue().split(' ');


return {


first: the[0],


last: the[1]


};


}

});


Field type alteration

Let’s assume that we would like to display the address in the text area.


Ext.ux.forms.Person = Ext.extend(Ext.ux.forms.PersonBase, {


firstConfig:


{


fieldLabel: 'Full name',


xtype: 'textfield'


},


lastConfig: null,


addressConfig:


{


fieldLabel: 'Address',


xtype: 'textarea'


},


setFirstFormField: function(v)


{


this.fields.first.setValue(


v.first+' '+v.last);


},




getFirstFormField: function()


{


var the = this.fields.first.


getValue().split(' ');


return {


first: the[0],


last: the[1]


};


}

});

Fields separation

Let’s assume that we would like to display the address parts in the
separated form fields.

Ext.ux.forms.Person = Ext.extend(Ext.ux.forms.PersonBase, {




addressConfig: [


{


fieldLabel: 'Country',


xtype: 'textfield',


name: 'country'


},


{


fieldLabel: 'City',


xtype: 'textfield',


name: 'city'


},


{


fieldLabel: 'Street and house',


xtype: 'textfield',


name: 'street'


},


{


fieldLabel: 'Postal code',


xtype: 'textfield',


name: 'postal'


}


],


setAddressDataField: function(v)


{


var the = v.split(', ');


var f = this.fields;


f.country.setValue(the[0]);


f.city.setValue(the[1]);


f.street.setValue(the[2]);


f.postal.setValue(the[3]);


},


getAddressDataField: function()


{


var f = this.fields;


return f.country.getValue() + ', ' +


f.city.getValue() + ', ' +


f.street.getValue() + ', ' +


f.postal.getValue();


}

});



Meta
-
information change

Let’s assume that the company name was added to the person meta
-
information.


Ext.ux.forms.PersonBase = Ext.extend(Ext.ux.Form, {


firstConfig:


{


fieldLabel: 'First Name',


xtype: 'textfield'


},


lastConfig: {


fieldLabel: 'Last Name',


xtype: 'textfield'


},


companyConfig: {


fieldLabel: 'Company',


xtype: 'textfield'


},


emailConfig: {


fieldLabel: 'Email',


xtype: 'textfield'


},


phoneConfig: {


fieldLabel: 'Phone',


xtype: 'textfield'


},


addressConfig: {


fieldLabel: 'Address',


xtype: 'textfield'


},


itemsLayoutConfig: [


'first',


'last',


'company',


'email',


'phone',


'address'


]

});

Examples: grid



Let’s assume that the book
information contains:


Title


Description


Author name


Book rank.

Generated classes for grid

Ext.ux.grids.BooksBase = Ext.extend(


Ext.ux.Grid, {


columnLayout:[


'title',


'description',


'author',


'rank'


],


titleConfig: {


header: 'Title'


},


descriptionConfig:{


header: 'Description'


},


authorConfig:{


header: 'Author'


},


rankConfig:{


header: 'Rank'


}

});


Ext.ux.grids.Books = Ext.extend(


Ext.ux.grids.BooksBase, {

});

Rows highlight

We want to display the rank of the book with right alignment and
highlight the books with high rank with the pink background color.


Ext.ux.grids.Books =
Ext.extend(Ext.ux.grids.BooksBase, {


rankConfig:{


header: 'Rank',


align: 'right'


},


getRowClass: function(rec)


{


if (rec.data.rank>5000)


return 'pink';


return null;


}

});

Columns unification

Let’s assume that we would like to display the title and the
description in the single column.

Ext.ux.grids.Books = Ext.extend(


Ext.ux.grids.BooksBase, {


titleConfig:


{


header: 'Title',


width: 300,


id: 'title'


},


descriptionConfig: null,


rankConfig:{


header: 'Rank',


align: 'right'


},


titleRenderer: function(v, m, rec)


{


return '<b>' + v + '</b><br>' +


rec.data.description;


},


getRowClass: function(rec)


{


if (rec.data.rank>5000)


return 'pink';


return null;


}

});

Columns separation

Let’s assume that we want to display an author first name and an
author last name in separated columns.


Ext.ux.grids.Books = Ext.extend(


Ext.ux.grids.BooksBase, {




authorConfig:


[


{


header: 'Author first',


dataIndex: 'author',


renderer: function (v)


{


var the = v.split(' ');


return the[0];


}


}, {


header: 'Author last',


dataIndex: 'author',


renderer: function (v)


{


var the = v.split(' ');


return the[1];


}


}


]

});

Meta
-
information change

Let’s assume that the book code was added to the book meta
-
information.


Ext.ux.grids.BooksBase = Ext.extend(


Ext.ux.Grid, {


columnLayout:[


'code',


'title',


'description',


'author',


'rank'


],


codeConfig: {


header: 'Code'


},


titleConfig: {


header: 'Title'


},


descriptionConfig:{


header: 'Description'


},


authorConfig:{


header: 'Author'


},


rankConfig:{


header: 'Rank'


}

});


Conclusion


Two appoaches of automatic UI
creation was considered


The mixed approach was suggested


This approach was demonstrated on
the examples

Thank you for attention