I nformation system u ser interfaces automatic creation

1. Information system user interfacesautomatic creation Alexander Korotkov Moscow Engineering Physics Institute Moscow, Russia email: aekorotkov@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. 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

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.FormPanelclass • 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. 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, { }); Generated classes for form

17. 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] }; } });

18. 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] }; } });

19. 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(); } });

20. 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' ] });

21. Examples: grid Let’s 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.BooksBase, { rankConfig:{ header: 'Rank', align: 'right' }, getRowClass: function(rec) { if (rec.data.rank>5000) return 'pink'; return null; } });

24. 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; } });

25. 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]; } } ] });

26. 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' } });

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