i nformation system u ser interfaces automatic creation
Post on 06-Jan-2016
30 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related