Скачать презентацию Development Method for User Interfaces of Rich Internet Скачать презентацию Development Method for User Interfaces of Rich Internet

63659df40c7c0b715c2dc0e869b90d8e.ppt

  • Количество слайдов: 60

Development Method for User Interfaces of Rich Internet Applications By Francisco Javier Martínez Ruiz Development Method for User Interfaces of Rich Internet Applications By Francisco Javier Martínez Ruiz Promoteur Dr. Jean Vanderdonckt Université catholique de Louvain (UCL) Louvain School of Management (LSM) Information Systems Unit (ISYS) Belgian Laboratory of Computer-Human Interaction (BCHI) http: //www. isys. ucl. ac. be/bchi 1 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Agenda 1. 2. 3. 4. Main Goal of the Work Focus Introduction / Literature Agenda 1. 2. 3. 4. Main Goal of the Work Focus Introduction / Literature Review Method outline 1. 2. 3. 4. Step 1: 2: 3: 4: the the Task and Domain Models Abstract User Interface Concrete User Interface Final User Interface 5. Conclusions 6. Contributions 7. Future work 2 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Main Goal of the Work What is the goal? The creation of a Development Main Goal of the Work What is the goal? The creation of a Development Method for User Interfaces of Rich Internet Applications The introduction of a meta-model of user interfaces for Rich Internet Applications establishes a common ground to standardize their design and development through a modelbased and neutral representation which could be ported by a transformational schema to various web development environments. 3 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Focus What is the focus of this thesis? Web Applications Which Type of User Focus What is the focus of this thesis? Web Applications Which Type of User Interfaces is studied? Graphical User Interfaces To whom is directed this work? The CHI research community, academics interested in webapps 4 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Introduction| The Web Platform The World Wide Web (or simply web) is based upon Introduction| The Web Platform The World Wide Web (or simply web) is based upon three core components: The Uniform Resource identifier, the interaction protocols used by the agents to get the resources and a representation of the data contained by the resource 5 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Introduction| The Web Architecture The original function of the web was to deliver plain Introduction| The Web Architecture The original function of the web was to deliver plain hypertext documents over a client-server architecture but its success has caused a natural evolution from static and passive contents to dynamic and interactive ones. 6 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Introduction| Web App. Architecture The web browser remains as the immovable and universal client. Introduction| Web App. Architecture The web browser remains as the immovable and universal client. The application server is the most important element in the second-tier (the server one) because it supplies the environment to execute the components of the application. Finally, in the third-tier is included a repository of data that is available through a data access interface from the second-tier 7 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Introduction| Rich Internet Application The RIAs are webapps that take into account the power Introduction| Rich Internet Application The RIAs are webapps that take into account the power of the client to increase the responsiveness of the Web UI while the management of the application and data remains on the server. 8 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Literature Review | Dialogue models 9 Belgian Laboratory of Computer-Human Interaction (BCHI) : : Literature Review | Dialogue models 9 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Literature Review | Dialogue models 10 Belgian Laboratory of Computer-Human Interaction (BCHI) : : Literature Review | Dialogue models 10 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Literature Review| Design Approaches 11 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : Literature Review| Design Approaches 11 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Literature review | CAMELEON Framework Building a model based application requires a framework to Literature review | CAMELEON Framework Building a model based application requires a framework to define the design steps needed for describe our computer system, including the features: Multi-level abstraction, Modality independence, among others 12 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Literature review | Comparison RIA Frameworks # Quick dev Testability License Platform Side Tech Literature review | Comparison RIA Frameworks # Quick dev Testability License Platform Side Tech Deep linking back button support REST Arch SPA 1 GWT - + open AJAX/java C + ++ - + 2 ZK - + open java S - - - + 3 Open. Laszlo + - open flash/dhtml C + ++ - ++ 4 FLEX ++ - comm flash C - - - + 5 Echo 2 + + open java S + - - + 6 Wicket - + open java S + - - + 7 Rubyon. Rails - - open ruby S + - - + 8 Rialto - - open AJAX C ++ - - + 9 Thinwire - - open AJAX S ++ - - + 10 CURL - - comm CURL VM C - - - + 11 Nexaweb - + open AJAX/java C + - - + 12 Backbase - + open AJAX C ++ - - + 13 XUIMLcarrousel - + open java S + - - + 14 RIBAX - + open Applet/java C + - - + 15 TIBCO - - open AJAX C ++ - - + 16 ARP - - open Flash C - - - ++ 17 Zimbra - - open AJAX C - - - + 18 13 Description silverlight ++ + comm NET C + - - ++ Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Method outline 14 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August Method outline 14 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

The Role of XLST The reification process is the process to iterating from the The Role of XLST The reification process is the process to iterating from the abstract representation to more concrete levels and ultimately arrives to the Final User Interface. This overall procedure is called: forward engineering. The CAMALEON framework requires from each UI representation a process of transformation to deliver the next step. 15 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Task & Domain modeling 16 Belgian Laboratory of Computer-Human Interaction (BCHI) Step 1 | Task & Domain modeling 16 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Running Example 17 Belgian Laboratory of Computer-Human Interaction (BCHI) : : Step 1 | Running Example 17 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Task model – Panoramic view 18 Belgian Laboratory of Computer-Human Interaction Step 1 | Task model – Panoramic view 18 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Task model – Price Details 19 Belgian Laboratory of Computer-Human Interaction Step 1 | Task model – Price Details 19 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Task types in RIA 20 Belgian Laboratory of Computer-Human Interaction (BCHI) Step 1 | Task types in RIA 20 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Task types in RIA 21 Belgian Laboratory of Computer-Human Interaction (BCHI) Step 1 | Task types in RIA 21 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1| Domain modeling 22 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : Step 1| Domain modeling 22 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Categorization of RIAs The Data/Complexity continuum in Web Applications 23 Belgian Step 1 | Categorization of RIAs The Data/Complexity continuum in Web Applications 23 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Categorization of RIAs Interactivity Rich Internet Application Web Application HTML with Step 1 | Categorization of RIAs Interactivity Rich Internet Application Web Application HTML with Client Technologies (Java. Script) Traditional Web Application HTML and CGI 24 Data access Complexity Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Categorization of RIAs 25 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 1 | Categorization of RIAs 25 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Categorization of RIAs 26 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 1 | Categorization of RIAs 26 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 1 | Categorization of RIAs <=2 <=3 II >2 Amount Of Choice Operators Step 1 | Categorization of RIAs <=2 <=3 II >2 Amount Of Choice Operators I >=2 Amount Of Concurrent operators Size 0. . 1 >3 <3 Amount Of Methods <=8 Amount Of classes II >=3 27 >8 I Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007 III II

Step 2 | Abstract User Interface 28 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 2 | Abstract User Interface 28 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Container Structure 29 Belgian Laboratory of Computer-Human Interaction (BCHI) : : Step 2 | Container Structure 29 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Container Structure 30 Belgian Laboratory of Computer-Human Interaction (BCHI) : : Step 2 | Container Structure 30 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Container Structure Algorithm 31 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 2 | Container Structure Algorithm 31 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Container Structure Algorithm 32 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 2 | Container Structure Algorithm 32 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Container Structure Algorithm Let w = {sons tasks which father is Step 2 | Container Structure Algorithm Let w = {sons tasks which father is the root of v} op = operators interacting with the tasks P = {inner tasks} Q = {leave tasks} C = {|||, |[ ]|, |=| } all the concurrent operators F = {[ ]} the Selection operator S = {>>, []>>, |>, [>} is the set of sequential operators n = the amount of son tasks (Beginning with zero) 33 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Container Structure Algorithm 34 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 2 | Container Structure Algorithm 34 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Application to Example 35 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 2 | Application to Example 35 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Application to Example 36 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 2 | Application to Example 36 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Application to Example 37 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 2 | Application to Example 37 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Application to Example 38 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 2 | Application to Example 38 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Application to Example 39 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 2 | Application to Example 39 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Application to Example 40 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 2 | Application to Example 40 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Design of the Menu Definition The concept of menu is the Step 2 | Design of the Menu Definition The concept of menu is the activation of a group of actions. A menu is constituted by a name and a list of actions called menu items. Usually, a menu item is followed by an accelerator, i. e. a combination of keywords that allows selecting an item without mouse or keyboard selection. The advantage of menus is allowing the utilization of the options of the application without worrying about memorizing commands [Vand 98] 41 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Design of the Menu 42 Belgian Laboratory of Computer-Human Interaction (BCHI) Step 2 | Design of the Menu 42 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Design of the Menu 43 Belgian Laboratory of Computer-Human Interaction (BCHI) Step 2 | Design of the Menu 43 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Design of the Menu function Generate-Menu (CTT tree) returns menu-structure or Step 2 | Design of the Menu function Generate-Menu (CTT tree) returns menu-structure or failure initialize the search tree to root node loop do if there are no candidate nodes for expansion then return exit choose a node and expand its sons if the sons of candidate node include only choice operators then include it in Menu. List[ ] and its sons as menu items. if candidate node previously marked as menu item then change the label to submenu associate to upper menu element if candidate node is unconnected to hierarchy of Menu. List then mark it as flying menu and localized /*isolated*/ 44 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Application of Menu Algorithm 45 Belgian Laboratory of Computer-Human Interaction (BCHI) Step 2 | Application of Menu Algorithm 45 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 2 | Application of Menu Algorithm 46 Belgian Laboratory of Computer-Human Interaction (BCHI) Step 2 | Application of Menu Algorithm 46 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 3 |Concrete User Interface 47 Belgian Laboratory of Computer-Human Interaction (BCHI) : : Step 3 |Concrete User Interface 47 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 3| Selection of Target Platform Graphic Modality components 48 Belgian Laboratory of Computer-Human Step 3| Selection of Target Platform Graphic Modality components 48 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 3| Concrete Interaction Objects 49 Belgian Laboratory of Computer-Human Interaction (BCHI) : : Step 3| Concrete Interaction Objects 49 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 3| Concrete Interaction Objects 1 Javier Martinez Generated by Grafi. XML 1. 1. 999 build id : 200602081036 < image. Component id="image_component_2" name="image_component_2" tooltip="/ui. Model/resource. Model/cio. Ref[@cio. Id='image_component_2']/resource/@tooltip" default. Tooltip="Apples (£ 5)" content="/ ui. Model/resource. Model/cio. Ref[@cio. Id='image_component_2']/resource/@content" default. Content="/resources/00/" is. Visible="true" is. Enabled="true" text. Color="#000000"/> < image. Component id="image_component_3" name="image_component_3" tooltip="/ui. Model/resource. Model/cio. Ref[@cio. Id='image_component_3']/resource/@tooltip" default. Tooltip="Bananas (£ 7)" content="/ ui. Model/resource. Model/cio. Ref[@cio. Id='image_component_3']/resource/@content" default. Content="/resources/00/" is. Visible="true" is. Enabled="true" text. Color="#000000"/> < image. Component id="image_component_4" name="image_component_4" tooltip="/ui. Model/resource. Model/cio. Ref[@cio. Id='image_component_4']/resource/@tooltip" default. Tooltip="Grapes (£ 9)" content="/ ui. Model/resource. Model/cio. Ref[@cio. Id='image_component_4']/resource/@content" default. Content="/resources/00/" is. Visible="true" is. Enabled="true" text. Color="#000000"/> < image. Component id="image_component_5" name="image_component_5" tooltip="/ui. Model/resource. Model/cio. Ref[@cio. Id='image_component_5']/resource/@tooltip" default. Tooltip="Ready to buy? double click in basket" content="/ ui. Model/resource. Model/cio. Ref[@cio. Id='image_component_5']/resource/@content" default. Content="/resources/00/" is. Visible="true" is. Enabled="true" text. Color="#000000"/> 50 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 3|Behavior 51 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August Step 3|Behavior 51 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 4 | Final User Interface (FUI) 52 Belgian Laboratory of Computer-Human Interaction (BCHI) Step 4 | Final User Interface (FUI) 52 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 4 | Generating the FUI 53 Belgian Laboratory of Computer-Human Interaction (BCHI) : Step 4 | Generating the FUI 53 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 4 | XSLT Transformation Doc 54 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Step 4 |resultant file <wf: User. Control xmlns: wf= Step 4 |resultant file 55 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Conclusion The purpose of this work was to establish the master plan of our Conclusion The purpose of this work was to establish the master plan of our method to develop RUIs. All the steps have been presented in the current document. These steps are the beginning of a variation/expansion of the Usi. XML family of tools and models in order to target RIAs is an ongoing work. 56 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

A Development Method for User Interfaces of RIAs 57 Belgian Laboratory of Computer-Human Interaction A Development Method for User Interfaces of RIAs 57 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Summary of contributions • The contributions are expanded in a series of exploratory papers Summary of contributions • The contributions are expanded in a series of exploratory papers in which we began to understand more the model of the RIAs: – [Mart 06], where present the first attempt to tackle the problem – [Muño 06] where we propose a taxonomy of RIAs – [Mart 06 a] a study case based on XAML UIs. • We have integrated here a proposal of extensions to the task types and menu features relevant to RIAs (see chapter 3 and 4). • A proposal of a method for the generation of the container structure • And Finally, The generation of menus based on task trees 58 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Future work • The process of making grow our repository of the UI widgets Future work • The process of making grow our repository of the UI widgets used in RIAs (for complete the XSLT templates). • The integration of the RIA frameworks GWT into the Grafi. XML tool as target language (extension to Usi. XML). • The integration of some elements to make simpler the translation between models, specifically the collecting of patterns to reduce the process of conversion (simplify the XLST translation). • The web is a distributed environment, we have to profit of that and integrate to the solution the power of the cooperative systems i. e. , web agents. • A proposal of a RIA Behaviour model 59 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007

Development Method for User Interfaces of Rich Internet Applications By Francisco Javier Martínez Ruiz Development Method for User Interfaces of Rich Internet Applications By Francisco Javier Martínez Ruiz Promoteur Dr. Jean Vanderdonckt Université catholique de Louvain (UCL) Louvain School of Management (LSM) Information Systems Unit (ISYS) Belgian Laboratory of Computer-Human Interaction (BCHI) http: //www. isys. ucl. ac. be/bchi 60 Belgian Laboratory of Computer-Human Interaction (BCHI) : : : UCL August 2007