Model Driven Development of Complex User Interface Xudong Lu Jiancheng Wan School of Computer Science and Technology, School of Computer Science and Technology, Shandong University Shandong University 73#, Jingshi road, Jinan Shandong Province, China 73#, Jingshi road, Jinan Shandong Province, China 86-531-88392498 86-531-88392498 dongxul@sdu.edu.cn Wanjch@sdu.edu.cn ABSTRACT presentation space that can overlapping many present units so can To promote the Model-Based software engineering development show different content in different context, and their operational of user interfaces, this paper proposes a model driven relations. development approach of complex user interface. The approach Second, the contemporary UI construction needs support of captures the process data in user interfaces by using an Extended different techniques and various types of component and their Object Model. User interfaces are directly, abstractly depicted as relationships, such as Java Applet, Java Beans, CORBA and objects, components and their cooperative relations in an COM/DCOM component, etc.. Interaction Model. Their external visual presentation is customized in the Presentation Model in the name of UI Template. The complex UI controls and components’ introduce enhancing The uniqueness of this research is a direct and leveled abstractive the UI functionality, but they do have alleviated the UI attack on complex user interface composition or description, development difficulties in great deal. In this case, lacks in this rather than the elicitation from task models. support of UI modeling will affect the ability in dealing with UI complexities, and will not be accepted in practical applications. Categories and Subject Descriptors D.2.1[Requirements/Specification]: Methodologies - Model 2. RELATED WORKS Based User Interface; Representation - User Interface; D.2.2 The literature contains many papers describing model-based user [Design Tools and Techniques]: Computer-Aided Software interface approaches. Reported researches includes Drive[3], Engineering (CASE) - Model Based User Interface Development MOBI-D[4], Wisdom[5], Teresa[6], Teallach[2], JUST-UI[7], Environment; SUPPLE[8], etc. These approaches have respective characteristic as their different applying backgrounds such as web applications, multi-devices applications. But, there still have some commons. General Terms For example, the approaches usually have several models Design, Experimentation, Theory describing different aspects of the UI. The kind of models used in different approaches varies, however a useful categorization is Keywords presented in [1]: Application Model (AM), Task/Dialog Model Software Engineering, User Interface Design, Code Generation (TDM), Abstract Presentation Model (APM), Concrete Presentation Model (CPM). The UI development process is normally an incremental process 1. INTRODUCTION [1]. In most approaches, UI development starts from domain The user interface of an application is often one of the core objects or concepts likes object, describing the structure and factors determining its success. The model-based user interface behavior of UI. Next, abstract user interface will build base on development technology aims to provide an environment where domain objects and adding some user interface compose elements, developers can design and implement user interfaces (UIs) in a such as presentation objects or query objects etc.. Last, code will professional and systematic way, more easily than when using generate in some approaches. But, the UIs generated are simple traditional UI development tools [1]. To achieve this aim, many and not be accepted in practical applications because of the UI approaches for UI design and model-based user interface models not cover the complex elements of user interface development environments (MB-UIDEs) have been proposed. But, mentioned above. in spite of more than 10 year’s researches, there are few models The task model is widely used and most researches adopt one of and tools being fully developed and powerful enough to be different forms of task model as the basis of UI modeling with recognized for commercial and industrial acceptance [2]. In the some differences, such as TERESA, Teallach, Trident and authors’ view, the most reason of this situation is that the Bisignano. But, the task-oriented UI design analysis and approaches had been proposed have not enough ability in deal composition could not fully reflect users’ synthetic and multiple with complexity of user interface. views toward UIs. Nowadays highly usable UIs usually contain The complexity of user interface mainly lies in two aspects as more than just the completion of user tasks. Extensive information following. navigation, cross-reference and context-sensitive help are all necessary facilities in UIs. A form-based UI has supplied an First, in user interface of the practical software, there always have environment for fulfilling tasks. more complex UI controls of grid, graph and tree, sharing In conclusion, the declarative models of model-based user 4. EXTENDED OBJECT MODEL interface development approaches have been proposed are still in Objects and their relationships are the main components that will lack of a sound mechanism for direct describing complex UI appear in UI. Generally, the basic data types of object data structure and composition. members include numeric, character, enumeration, date, navigation and multi-medias, etc. When appearing in an UI, they 3. ARCHITECTURE must take a certain visual forms and different data types pertain to Figure 1 shows the architecture of our approach, which reflects an different presentation forms. Further more, object relations also incremental development process. The process started from the have influence over UI presentation, such as UI widget layout and bottom abstract, layered combine the increasing requirements (see operations. Therefore, objects are UI presentation related, and the the dotted line box), by model transformation get more specific simple naked objects are not sufficient enough for complex UI model and as the foundation of next layer. The process modeling. To completely and formally depict the UI composition emphasized the importance of human in the development of the and behavior, new attributes and properties are needed to describe model, multi-layer transformation support the hierarchical model the object data members, such as range of value, data source, I/O and hierarchical development, which reflects the actual process of forms for Presentation or data Acquisitions, value derivation, practical software development. In this paper, we only focus on associations and grouping. This paper not detail described these how to direct describe the complex user interface use EIP model, new attributes and properties. However, Member Grouping, as an not touch user interface requirements acquisition and final illustration, is an exception. automatic generation as the limited length reason. Normally, a data member of an object is mapped to certain IO U I im p le m e n ta tio n objects in UIs. To make UI widget layout friendly and psychologically accepted by users, therefore enhancing UI P la tfo rm c h a ra c te ris tic usability, it is necessary to arrange and group IO objects in E IP particular form or order. This is the so-called Member Grouping. PM For example, data members with the same types or closer R e q . o f U I p re s e n ta tio n conceptual relations might be required to be placed together and IM in certain order. Data members, that are grouped together, are considered as a new UI unit as a whole. In this way, the whole R e q . o f U I in te ra c tio n object is regarded as an ordered composition of UI units, forming a sequential and hierarchical arrangement of data members. All EOM UI units are laid on an UI in certain order, for example, from right to left, from top to down or in columns. R e q . o f o b je c t p re s e n ta tio n D o m a in M o d e l 5. INTERACTION MODEL The IM is used to directly describe the UI composition and Figure 1. Architecture of Approach relationships. Its elements include Data Objects and Data Collections, Query Objects, Controlling Objects, External Entities The EIP model consists of three parts, EOM (Extended Object or Components, Actors or Roles, UI Functions and UI Model) as E, IM (Interaction Model) as I, and the Presentation Navigations, Data Files and Print Documents. Model as P. In our symbol system, Data Object is represented as a rectangle, EOM is the application model of UIs. It specifies the data object in which the name, class and class members are included. and their operational relationships. Considering their influence of Rounded rectangle and beveled rectangle are also symbols for objects’ very structures and their relations to UI presentation, and data objects, the former as the object for forming query the satisfaction of the requirements for describing complex UIs, information, therefore being called Query Object; and the later for we extend domain model through adding new attributes and forming controlling information to take part in the operation of relations for describing data members and their behavioral use-cases, therefore being called Control Object. relationships. Data Collection is represented with 2 overlapped rectangles. It is Based on EOM and user’s requirements of UI interaction, IM acts an important object that might appear in UIs, therefore needing as a mechanism for direct description of UI. It includes functions, special treatment because of its wide range of usages in UI abstract objects, components, external UIs, and their inter- construction. operational relationships, and interactive relations with users. Data Object and Data Collection have the attribute for their data P is the Presentation Model of UIs. It gives the UI layout source. If the data source comes from a Database table, special according to the IM and user’s requirements of UI presentation. code is needed for its implementation. UI layout is a complex design problem. For this purpose, we propose the concept of UI Template, which is indexed and Rectangle with two vertical bars is the symbol for other UIs. constrained with IMs, and is to be instantiated to become a Dotted arrow directed to it means the relations of UI Navigation. concrete UI once the running platform is specified. Users might Print Document is a special kind of UIs in modeling and take part in the designing process of UI Templates by selecting presentation with data output only in them. the UI styles or UI design patterns and layout strategies. Rectangle with one or more small circles connected to it presentation space, an UI Template could be constructed represents an External Entity or Component, where the circles are accordingly. its interfaces. To fully describe an UI in enough presentation details, more Use-cases directly connected to Actor are correspondent to menu properties are needed for UI objects to be presented properly and items or command buttons in UI. satisfactorily. Besides presentation properties such as foreground and background colors, fonts, margins, line widths, etc., the main Object relationships are the functional associations of UI objects, concerns come from the consideration of presentation constituents which include the use of objects or interfaces, method or function and their layout strategies. These properties are different for calling, UI navigation, message sending or event triggering, data different UI objects. transmission, and object’s taking-part-in relations. Actually, when certain category of UI objects and different UI objects in an IM can be grouped together. A Group can be presentation is concerned, the similarities and differences in viewed as an abstract entity for UI composition or an UI object. operation, presentation constituents and properties will help to Two kinds of group can be defined. Normal group (represented as form the concepts of UI Design Patterns. The detailed dotted-line rectangle) is the group of which each UI object will presentation constituents and their layout of each PU are exclusively possess its own presentation space; Overlapped group determined by designer’s preference and customization of UI (represented as bold-dotted-line rectangle) is the group that all of Design Patterns for an UI object. its UI objects will be presented overlapped and commonly in a presentation space. Events or functions can be attached to a group. They are represented as small circles. 7. AN EXAMPLE This example will show the grouping concept in modeling overlapped presentation and the ability in dealing with complex 6. PRSENATION MODEL UI construction. Figure 2 is a practical UI in a net-loss The presentation model deals with the specification of visual management system (now only in Chinese version) of electrical forms of UI objects and their layout as a whole. power network. It is generated from its IM present in Figure 3 for An UI is normally presented within a rectangle area of screen. practical application in Visual Basic. EOM of example is omitted Therefore, an UI is considered as a Presentation Object that is in this paper as the limited length. presented in a Presentation Space. Figure 2 shows that the UI is consisted of 5 parts: 1) the Tree on To establish a presentation model of a complex UI with multiple the left; 2) the Page at the bottom; 3) the Graph in the right- constituents, the space needs to be divided into smaller rectangle middle for displaying graphics; 4) 6 Command Buttons on the areas to accommodate certain presentation objects. In this way, a top-left; and 5) 2 Radio Buttons and 2 Colored Blocks on the top- presentation model of UI is superficially composed of multiple right. In Figure 3, they correspond respectively to the UI objects smaller presentation spaces and a set of presentation objects. of: 1) the collection Tree; 2) the overlapped Group with bold-line rectangle and its contents; 3) the Graph component that is There are many ways to divide a presentation space. For ease of implemented in DCOM; 4) the 6 visible use-cases; and 5) the visual manipulation and considering being still powerful enough Control object. There is also an un-visible object to indicate the to deal with UI presentation complexities, the presentation space WorkingStatus. is specifically divided in the way that the dividing of the main space is consisted of a series steps, each dividing step concerns only with one single rectangle area, and is performed either vertically or horizontally into two or more disjointed rectangle areas. Thus, starting as the root, the main space is divided and organized in a tree structure, of which the leaf nodes are the resultant possible presentation spaces for accommodating presentation objects. A Presentation Unit, or PU for short, is the combination of a leaf node or a resultant presentation space and the related presentation objects that will be presented in the space. An UI Template contains a main presentation space that is divided and a set of PUs, where the presentation properties or details are specified. Actually, an UI Template is a set of defined relations between presentation objects and leaf nodes of a divided main presentation space, with presentation properties set and Figure 2. A practical UI generated for a net-loss global layout specified. management system of electrical power network Since all visible UI objects in IM require some forms of visual presentation, they will act as the Presentation Objects in PUs. The overlapped Group represents a set of UI objects that are Therefore, once a main presentation space is defined and divided, going to be presented and overlay in a presentation space. It is and the UI objects of an IM are assigned to the resultant used to abstract the phenomena of overlapped presentation. In Figure 3, the Group represents an overlapped presentation of 5 sub-groups or normal groups with doted-line rectangles and their contents. The small circles attached to each group represent the Then, the presentation model of example will built, it not further group’s events or functions. In Figure 3, they designate the click description in this paper. events. The Control object contains 2 Radio Buttons. Their values are defined as mutual exclusive. 8. CONCLUSION The model-based user interface development approaches have been proposed have not enough ability in deal with complexity of user interface in practical software design. This paper proposes a model driven development approach of complex user interface. The uniqueness of this research is a direct and leveled abstractive attack on complex user interface composition or description, rather than the elicitation from task models. We have finished a UI model establishment tool that we call it AUI. Like Rose, AUI is an integrated model edit environment. Using AUI, designer can establish the abstract model of every level through the method above (Figure 3 is a hard copy of models that created in this tool.). And, now we have finished the transformation from abstract model to Visual Basic and ASP.NET. The building of the environment and research experiment has shown that approach proposed in this paper is appropriate, feasible, effective, powerful and easily acceptable in complex and highly usable UI modeling and construction. Figure 3. The IM of an UI for a net-loss 9. REFERENCES management system [1] Paulo Pinheiro da Silva, User interface declarative models and development environments: a survey, In Proceedings of The operational relationships in Figure 3 are as follows: 1) Once a DSVIS 2000, 2000,pp. 207–226. node of the Tree is clicked, the Update un-visible use-case is [2] Griffiths, Tonya, Barclay and Peter J, et al, Teallach: A invoked. It gets the data from the node and the WorkingStatus. model-based user interface development environment for The data is used to invoke the Group’s refresh function for object databases, Interacting with Computers,vol.1, TableData to update its display. Then, the related data is got and 2001,pp.31-68. sent to the Graph component for display; 2) Upon clicking on the [3] K. Mitchell, J. Kennedy, P. Barclay, A Framework for User Group, the specific page’s refresh function is invoked to update Interfaces to Databases (DRIVE), in Proceeding of AVI, the related display; 3) Upon clicking the 4 of the 6 visible use- ACM Press, 1996. cases, WorkingStatus will be modified and the Update un-visible use-case be invoked again accordingly; and 4) Upon clicking the [4] Angel Puerta and Jacob Eisenstein, Towards a General radio buttons of the Control object, their mutual exclusive relation Computational Framework for Model-Based Interface will cause them to change values accordingly, and then the Development Systems (MOBI-D), in Proceeding of ACM changed value be sent to the Graph component to alter the display IUI 1999, Redondo Beach CA USA types from histogram to curve, and vice versa. [5] Nunes, N.J. and J.F.e. Cunha, Wisdom – A UML based The above relationships are all implied in the AUI of Figure 2. architecture for interactive systems, in Proceeding of DSV-IS, But, the relationship details are contained in the internal logical Limerick, Ireland, 2000, pp.191-205. description of the related use-cases, which has not yet been [6] Giulio Mori, Fabio Paterno and Carmen Santoro, Design and implemented. During this experiment, the operational code is Development of Multidevice User Interfaces through manually supplied after generating the UI framework and the Multiple Logical Descriptions, IEEE Transactions on related code. Software Engineering, 30(8), 2004, pp.1-14. To generate the desired UI of Figure 2, use method introduces in [7] Pedro J. Molina, Santiago Meliá and Oscar Pastor, JUST-UI: section 6, the UI template will be first divided five smaller A User Interface Specification Mode, in Proceedings of presentation spaces according to user requirements. Next, the UI CADUI 2002, Valenciennes, France, 2002, pp.63-74. template is customized as the assignment of: 1) the UI design [8] Krzysztof Gajos and Daniel S. Weld, SUPPLE: pattern of Tree with collection to the collection Tree; 2) the UI Automatically Generating User Interfaces, in Proceedings of design pattern of Page to the Group; 3) the Graph component as it IUI'04, Funchal, Portugal,2004, pp.83-100. is designed; 4) Picture-Buttons to the use-cases; and 5) the UI design pattern of control object in free-form to the Control object.