Information system user interfaces automatic creation

Alexander KorotkovMoscow Engineering Physics Institute

Moscow, Russiaemail: 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

Meta-information

Generated code

Customized code

Code generation

Manual code correction

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

Approach 1: Code generation

Meta-information

Generated code

Customized code

New meta-information

New customized

code

Code generation

Manual code correction

Changes in projectDesign

Manual codecorrection

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

Meta-information

Generated code

Customized code

New meta-information

New customized

code

New generated code

Code generation Code generation

Manual code correction Manual code correction

Changes in projectDesign

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

Meta-information

UI

Runtime UI generation

Approach 2: Runtime UI generation

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

Meta-information

UI

Runtime UI generation

Proposed approach

Meta-information

Base class

Customizedderived class

Emptyderived class

Code generationCode generation

Manual code correction

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

Proposed approach

Meta-information

Base class

Customizedderived class

Emptyderived class

New meta-information

New base class

New customizedderived class

Code generation

Code generation Code generation

Manual code correction

Manual code correction

Changes in projectDesign

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:

• Fields 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 formExt.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 alterationLet’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 separationLet’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 changeLet’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 gridExt.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 highlightWe 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 unificationLet’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 separationLet’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 changeLet’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