Information system user interfaces automatic creation

1
Information system user interfaces automatic
creation

• Alexander Korotkov
• Moscow Engineering Physics Institute
• Moscow, Russia
• email aekorotkov_at_gmail.com

2
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

3
Approach 1 Code generation
When we code generation is used the most part of
actions which developers performs when creating
UI are executed automatically.
4
Approach 1 Code generation
Then there is question how to transfer
meta-information changes to already generated and
corrected by a programmer code.
5
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

6
Approach 2 Runtime UI generation

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

7
Proposed approach
Author proposes the hybrid approach when the
generated code and the manual corrections are
logically separated by the mechanism of
inheritance.
8
Proposed approach
When the meta-information is changed then the
base class will be regenerated but changes in
derived class will be minimal.
9
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

10
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

11
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

12
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.

13
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')

14
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')

15
Examples form

• The data model contains the person contact
  information.
• First name
• Last name
• Email address
• Telephone number
• Post address

16
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

• Ext.ux.forms.Person Ext.extend(Ext.ux.forms.Pers
  onBase,
• )

17
Fields unification
Lets 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.Pers
onBase, 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 the0,
last the1 )
18
Field type alteration
Lets assume that we would like to display the
address in the text area.
Ext.ux.forms.Person Ext.extend(Ext.ux.forms.Pers
onBase, 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 the0,
last the1 )
19
Fields separation
Lets assume that we would like to display the
address parts in the separated form fields.
Ext.ux.forms.Person Ext.extend(Ext.ux.forms.Pers
onBase, 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(the0)
f.city.setValue(the1)
f.street.setValue(the2)
f.postal.setValue(the3) ,
getAddressDataField function()
var f this.fields return
f.country.getValue() ', '
f.city.getValue() ', '
f.street.getValue() ', '
f.postal.getValue() )
20
Meta-information change
Lets 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' )
21
Examples grid

• Lets assume that the book information
  contains
• Title
• Description
• Author name
• Book rank.

22
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, )
23
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.Books
Base, rankConfig header 'Rank',
align 'right' , getRowClass
function(rec) if (rec.data.rankgt5000
) return 'pink' return
null )
24
Columns unification
Lets 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 'ltbgt'
v 'lt/bgtltbrgt' rec.data.description
, getRowClass function(rec)
if (rec.data.rankgt5000) return
'pink' return null )
25
Columns separation
Lets 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
the0 ,
header 'Author last', dataIndex
'author', renderer function (v)
var the v.split(' ')
return the1
)
26
Meta-information change
Lets 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' )
27
Conclusion

• Two appoaches of automatic UI creation was
  considered
• The mixed approach was suggested
• This approach was demonstrated on the examples

28
Thank you for attention