Information system user
interfaces automatic creation
Alexander Korotkov
Moscow Engineering Physics Institute
Moscow, Russia
email: [email protected]
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.
Meta-information
Code generation
Generated code
Manual code correction
Customized code
Approach 1: Code generation
Then there is question how to transfer meta-information
changes to already generated and corrected by a programmer
code.
Changes in project
Design
New metainformation
Metainformation
Code generation
Generated code
Manual code correction
Customized
code
Manual code
correction
Changes in project
Design
Metainformation
New metainformation
Code generation
Code generation
Generated
code
New generated
code
Manual code correction
New
customized
code
Customized
code
Manual code correction
New
customized
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
Meta-information
Runtime UI generation
UI
Approach 2: Runtime UI generation
Any specific UI
customizations
must be covered by
the metainformation and the
generator
possibilities
Meta-information
Runtime UI generation
UI
Proposed approach
Author proposes
the hybrid approach
when the generated
code and the
manual corrections
are logically
separated by the
mechanism of
inheritance.
Meta-information
Code generation
Code generation
Base class
Empty
derived class
Manual code correction
Customized
derived class
Proposed approach
When the meta-information is changed then the base class will
be regenerated but changes in derived class will be minimal.
Changes in project
Design
New meta-information
Meta-information
Code generation
Code generation
Code generation
Base class
Empty
derived class
New base class
Manual code correction
Customized
derived class
Manual code
correction
New customized
derived class
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
The form class contains following properties
and methods:
•
•
•
•
•
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')
Implementation for a grid
The grid class contains following properties and
methods
• 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')
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 metainformation.
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 metainformation.
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