Brambilla / Fraternali Interaction Flow Modeling Language

Model-Driven UI Engineering of Web and Mobile Apps with IFML
1. Auflage 2014
ISBN: 978-0-12-800532-3
Verlag: Elsevier Science & Techn.
Format: EPUB
Kopierschutz: 6 - ePub Watermark

E-Book, Englisch, 422 Seiten

Reihe: The MK/OMG Press

Interaction Flow Modeling Language describes how to apply model-driven techniques to the problem of designing the front end of software applications, i.e., the user interaction. The book introduces the reader to the novel OMG standard Interaction Flow Modeling Language (IFML). Authors Marco Brambilla and Piero Fraternali are authors of the IFML standard and wrote this book to explain the main concepts of the language. They effectively illustrate how IFML can be applied in practice to the specification and implementation of complex web and mobile applications, featuring rich interactive interfaces, both browser based and native, client side components and widgets, and connections to data sources, business logic components and services. Interaction Flow Modeling Language provides you with unique insight into the benefits of engineering web and mobile applications with an agile model driven approach. Concepts are explained through intuitive examples, drawn from real-world applications. The authors accompany you in the voyage from visual specifications of requirements to design and code production. The book distills more than twenty years of practice and provides a mix of methodological principles and concrete and immediately applicable techniques. - Learn OMG's new IFML standard from the authors of the standard with this approachable reference - Introduces IFML concepts step-by-step, with many practical examples and an end-to-end case example - Shows how to integrate IFML with other OMG standards including UML, BPMN, CWM, SoaML and SysML - Discusses how to map models into code for a variety of web and mobile platforms and includes many useful interface modeling patterns and best practices

Marco Brambilla is full professor at Politecnico di Milano. He is active in research and innovation, both at industrial and academic level. His research interests include data science, software modeling languages and design patterns, crowdsourcing, social media monitoring, and big data analysis. He has been visiting researcher at CISCO, San JosŠ, and University of California, San Diego. He has been visiting professor at Dauphine University, Paris. He is founder of various startups and spinoffs, including WebRatio, Fluxedo, and Quantia, focusing on social media analysis, software modeling, Mobile and Business Process based software applications, and data science projects. He is author of various international books including Model Driven Software Development in Practice (II edizione, Morgan-Claypool, 2017, adopted in 100+ universities worldwide), Web Information Retrieval (Springer, 2013), Interaction Flow Modeling Language (Morgan-Kauffman, 2014), Designing Data-Intensive Web Applications (Morgan-Kauffman, 2002). He also authored more than 250 research articles in top research journals and conferences. He was awarded various best paper awards and gave keynotes and speeches at many conferences and organisations. He is the main author of the OMG (Object Management Group) standard IFML (Interaction Flow Modeling Language). He participated in several European and international research projects. He has been reviewer of FP7 projects and evaluator of EU FP7 proposals, as well as of national and local government funding programmes throughout Europe. He has been PC chair of ICWE 2008 and ICWE 2021, as well as co-chair of various tracks, conferences and workshops. He is associate editor of various journals and PC member of several conferences and workshops.

Autoren/Hrsg.

Brambilla, Marco

Fraternali, Piero

Inhaltsverzeichnis

1;Front
Cover;1
2;Interaction Flow
Modeling Language;4
3;Copyright;5
4;Contents;6
5;Foreword;14
6;Chapter
1 - Introduction;16
6.1;1.1 WHAT IFML IS ABOUT;17
6.2;1.2 THE IFML DESIGN PRINCIPLES;18
6.3;1.3 HOW TO READ THIS BOOK;20
6.4;1.4 ON-LINE RESOURCES;21
6.5;1.5 BACKGROUND;22
6.6;1.6 ACKNOWLEDGMENT;23
6.7;END NOTES;23
7;Chapter
2 - IFML in a Nutshell;24
7.1;2.1 SCOPE AND PERSPECTIVES;24
7.2;2.2 OVERVIEW OF IFML MAIN CONCEPTS;26
7.3;2.3 ROLE OF IFML IN THE DEVELOPMENT PROCESS;30
7.4;2.4 A COMPLETE EXAMPLE;34
7.5;2.5 SUMMARY OF THE CHAPTER;38
7.6;2.6 BIBLIOGRAPHIC NOTES;39
7.7;END NOTES;39
8;Chapter
3 - Domain modeling;40
8.1;3.1 CLASSES;41
8.2;3.2 ATTRIBUTES;41
8.3;3.3 IDENTIFICATION AND PRIMARY KEY;42
8.4;3.4 ATTRIBUTE TYPE AND VISIBILITY;44
8.5;3.5 OPERATIONS;45
8.6;3.6 GENERALIZATION HIERARCHIES;46
8.7;3.7 ASSOCIATIONS;47
8.8;3.8 N-ARY ASSOCIATIONS AND ASSOCIATIONS WITH ATTRIBUTES;49
8.9;3.9 DERIVED INFORMATION AND THE OBJECT CONSTRAINT LANGUAGE (OCL);51
8.10;3.10 DOMAIN MODELING PATTERNS AND PRACTICES;53
8.11;3.11 THE PROCESS OF DOMAIN MODELING;54
8.12;3.12 RUNNING EXAMPLE;62
8.13;3.13 SUMMARY OF THE CHAPTER;64
8.14;3.14 BIBLIOGRAPHIC NOTES;64
8.15;END NOTES;65
9;Chapter 4 - Modeling the composition of the user interface;66
9.1;4.1 INTERFACE ORGANIZATION;66
9.2;4.2 VIEW CONTAINER NESTING;68
9.3;4.3 VIEW CONTAINER NAVIGATION;70
9.4;4.4 VIEW CONTAINER RELEVANCE AND VISIBILITY;70
9.5;4.5 WINDOWS;72
9.6;4.6 CONTEXT AND VIEWPOINT;74
9.7;4.7 USER INTERACTION PATTERNS;77
9.8;4.8 INTERFACE ORGANIZATION PATTERNS AND PRACTICES;77
9.9;4.9 RUNNING EXAMPLE;86
9.10;4.10 SUMMARY OF THE CHAPTER;91
9.11;4.11 BIBLIOGRAPHIC NOTES;91
10;Chapter
5 - Modeling interface content and navigation;92
10.1;5.1 WHAT VIEWCONTAINERS CONTAIN: VIEWCOMPONENTS;93
10.2;5.2 EVENTS AND NAVIGATION FLOWS WITH VIEWCOMPONENTS;94
10.3;5.3 CONTENT DEPENDENCIES: DATA BINDING;96
10.4;5.4 INPUT-OUTPUT DEPENDENCIES: PARAMETER BINDING;98
10.5;5.5 EXTENDING IFML WITH SPECIALIZED VIEWCOMPONENTS AND EVENTS;100
10.6;5.6 CONTENT AND NAVIGATION PATTERNS AND PRACTICES;106
10.7;5.7 DATA ENTRY PATTERNS;108
10.8;5.8 SEARCH PATTERNS;114
10.9;5.9 RUNNING EXAMPLE;118
10.10;5.10 SUMMARY OF THE CHAPTER;128
10.11;5.11 BIBLIOGRAPHIC NOTES;128
10.12;END NOTES;129
11;Chapter 6 - Modeling business actions;130
11.1;6.1 ACTIONS;131
11.2;6.2 NOTIFICATION;134
11.3;6.3 BUSINESS ACTION PATTERNS;134
11.4;6.4 RUNNING EXAMPLE;146
11.5;6.5 SUMMARY OF THE CHAPTER;151
11.6;6.6 BIBLIOGRAPHIC NOTES;151
12;Chapter 7 - IFML extensions;152
12.1;7.1 DESKTOP EXTENSIONS;153
12.2;7.2 WEB EXTENSIONS;160
12.3;7.3 MOBILE EXTENSIONS;167
12.4;7.4 MULTISCREEN EXTENSIONS;176
12.5;7.5 SUMMARY OF THE CHAPTER;179
12.6;7.6 BIBLIOGRAPHIC NOTES;179
13;Chapter 8 - Modeling patterns;182
13.1;8.1 INTERFACE ORGANIZATION;182
13.2;8.2 NAVIGATION AND ORIENTATION;188
13.3;8.3 CONTENT PUBLISHING, SCROLLING, AND PREVIEWING;205
13.4;8.4 DATA ENTRY;212
13.5;8.5 SEARCH;219
13.6;8.6 CONTENT MANAGEMENT;220
13.7;8.7 PERSONALIZATION, IDENTIFICATION, AND AUTHORIZATION;223
13.8;8.8 SESSION DATA;235
13.9;8.9 SOCIAL FUNCTIONS;240
13.10;8.10 GEO PATTERNS;243
13.11;8.11 SUMMARY OF THE CHAPTER;245
13.12;8.12 BIBLIOGRAPHIC NOTES;245
14;Chapter
9 - IFML by examples;248
14.1;9.1 MEDIA SHARING APP;248
14.2;9.2 ONLINE AUCTIONS;267
14.3;9.3 SUMMARY OF THE CHAPTER;291
14.4;END NOTES;292
15;Chapter
10 - Implementation of applications specified with IFML;294
15.1;10.1 IMPLEMENTATION OF THE FRONT END FOR URE-HTML PAGE TEMPLATES;297
15.2;10.2 IMPLEMENTATION OF THE FRONT END FOR PRESENTATION FRAMEWORKS;316
15.3;10.3 IMPLEMENTATION OF THE FRONT END FOR RICH INTERNET APPLICATIONS;331
15.4;10.4 IMPLEMENTATION OF THE FRONT END FOR MOBILE APPLICATIONS;336
15.5;10.5 SUMMARY OF THE CHAPTER;348
15.6;10.6 BIBLIOGRAPHIC NOTES;348
15.7;END NOTES;349
16;Chapter
11 - Tools for model-driven development of interactive applications;350
16.1;11.1 INTRODUCTION TO WEBRATIO;350
16.2;11.2 DOMAIN MODEL DESIGN;352
16.3;11.3 IFML FRONT-END DESIGN;353
16.4;11.4 DATA MAPPING AND ALIGNMENT;356
16.5;11.5 ACTION DESIGN;357
16.6;11.6 PRESENTATION DESIGN;359
16.7;11.7 CODE GENERATION;361
16.8;11.8 ADVANCED FEATURES;365
16.9;11.9 SUMMARY OF THE CHAPTER;370
16.10;11.10 BIBLIOGRAPHIC NOTES;372
16.11;END NOTES;373
17;Chapter 12 - IFML language design, execution, and integration;374
17.1;12.1 IFML LANGUAGE SPECIFICATION THROUGH METAMODELING;374
17.2;12.2 IFML MODEL EXECUTION;377
17.3;12.3 IFML MODELS INTEGRATION WITH OTHER SYSTEM MODELING PERSPECTIVES;390
17.4;12.4 SUMMARY OF THE CHAPTER;395
17.5;12.5 BIBLIOGRAPHIC NOTES;395
18;Appendix A - IFML notation summary;396
19;Appendix B: - List of IFML design patterns;404
20;References;410
21;Index;416

Leseproben

Chapter 2

IFML in a Nutshell

Abstract

This chapter provides a bird's eye view of IFML. The chapters presents the main language concepts: ViewContainers, ViewComponents, Events, InteractionFlows, Parameters, ParameterBindings and Actions. IFML concepts are referred to the elements of the Model-View-Controller design pattern. These concepts are illustrated in a small, yet complete, example. The chapter also highlights the role and benefits of IFML in the application development cycle.

Keywords

Action; Development Cycle; IFML; Interaction Flow Modeling Language; Model driven engineering; MVC; Model-View-Controller; Parameter; View Component; View Container; User Experience; User Interaction; Software modeling

IFML supports the platform-independent description of graphical user interfaces for applications deployed or accessed on systems such as desktop computers, laptops, PDAs, mobile phones, and tablets. The main focus is on the structure and behavior of the application as perceived by the end user. The modeling language also incorporates references to the data and business logic that influence the user’s experience. This is achieved respectively by referencing the domain model objects that provide the content displayed in the interface and the actions that can be triggered by interacting with the interface.

This chapter introduces the essential features of IFML: its scope, the design rules behind it, its main modeling elements, and its role in the development process. The chapter concludes with an initial example of the language.

2.1. Scope and Perspectives

To understand the aim and scope of IFML better, it may be useful to refer to the well-known Model–View–Controller (MVC) software architecture of an interactive application,1 shown in Figure 2.1. MVC distinguishes the application’s internal status and business logic (Model), their representation in the user interface (View), and the rules governing the response to the user’s interaction (Controller).

IFML mainly describes the view (i.e., the content of the front end and the user interaction mechanisms available in the interface). More precisely, IFML covers various aspects of the user interface:

• View structure: It expresses the general organization of the interface in terms of ViewContainers, along with their nesting relationships, visibility, and reachability.

• View content: It specifies what ViewContainers actually contain in terms of ViewComponents (i.e., elements for content display and data entry). ViewComponents that display content are further characterized by a ContentBinding, which expresses the source of the published content.

• Events: They are the occurrences that affect the state of the user interface. They can be produced by a user’s interaction, by the application itself, or by an external system.

Figure 2.1 The Model–View–Controller architecture of an interactive application.

• Event transitions: They specify the consequences of an event on the user interface, which can be a change of the ViewContainer, an update of the content on display, the triggering of an action, or a mixture of these effects.

• Parameter binding: It clarifies the input–output dependencies between ViewComponents, view containers, and actions.

For the sake of conciseness, IFML condenses all these perspectives within only one diagram type called an Interaction Flow Diagram. This is in contrast to other modeling languages such as UML, which rely on multiple diagrams for conveying the various facets of an application.

Besides describing the view part of the application, an IFML Interaction Flow Diagram also provides the hooks to connect it with the model and controller parts:

• With respect to the controller, IFML represents the effects of the user’s interactions. It defines the events produced in the view and the course of action taken by the controller in response to them, such as triggering a business component and updating the view.

• With respect to the model, IFML describes the data binding between the interface elements and the objects that embody the state of the application, as well the actions that are triggered by the user’s interactions.

Figure 2.2 shows as an initial example the IFML model of a simple interface: the view structure consists of three ViewContainers (“ProductCategories,” “ProductOfCategory,” and “ProductInformation”), which reflect the top-level organization of the GUI in three distinct pages. The model shows the content of each ViewContainer. For example, the “ProductCategories” ViewContainer comprises one ViewComponent called “CategoryList.” This notation represents the content of the respective page in the GUI (i.e., a list of product categories). Events are represented in IFML as circles. The “SelectCategory” event specifies that the “CategoryList” component is interactive. In the GUI, the user can select one of the categories to access a list of its products. The effect of the “SelectCategory” event is represented by the arrow emanating from it (called InteractionFlow in IFML), which specifies that the triggering of the event causes the display of the “ProductOfCategory” ViewContainer and the rendering of its “ProductList” ViewComponent (i.e., the list of products of the selected category). The input–output dependency between the “CategoryList” and the “ProductList” ViewComponents is represented as a parameter binding (the IFML ParameterBindingGroup element in Figure 2.2). The value of the “SelectedCategory” parameter, which denotes the object selected by the user in the “CategoryList” ViewComponent, is associated with the value of the input parameter “Category,” which is requested for the computation of the “ProductList” ViewComponent.

Figure 2.2 Example of an interface and its IFML specification.

2.2. Overview of IFML Main Concepts

An IFML diagram consists of one or more top-level ViewContainers (i.e., interface elements that comprise components for displaying content and supporting interactions).

Figure 2.3 contrasts two different organizations of the GUI: (a) an e-mail application (desktop or rich Internet application) consisting of a top-level container with embedded sub-containers at different levels, and (b) an e-commerce web site that organizes the user interface into different independent view containers corresponding to page templates.

Each view container can be internally structured in a hierarchy of subcontainers. For example, in a desktop or rich Internet application, the main window can contain multiple tabbed frames, which in turn may contain several nested panes. The child view containers nested within a parent view container can be displayed simultaneously (e.g., an object pane and a property pane) or in mutual exclusion (e.g., two alternative tabs). In the case of mutually exclusive (XOR) containers, one could be the default container, which is displayed by default when the parent container is accessed. The meaning of a container can be specified more precisely by adding a stereotype to the general-purpose construct. For instance, a ViewContainer can be tagged as «window», as in the case of the “Mail” ViewContainer in Figure 2.4, to hint at the nature of its expected implementation.

Figure 2.3 Example of different top-level interface structures.

Figure 2.4 Example of mutually exclusive subcontainers.

In Figure 2.4, the “Mail” top-level container comprises two subcontainers, displayed alternatively: one for messages and one for contacts. When the top level container is accessed, the interface displays the “Messages” ViewContainer by default.

A ViewContainer can contain ViewComponents, which denote the publication of content (e.g., a list of objects) or the input of data (e.g., entry forms).

Figure 2.5 shows the notation for embedding ViewComponents within ViewContainers. The “Search” ViewContainer comprises a “MessageKeywordSearch” ViewComponent that represents a form for searching; the “MailBox” ViewContainer comprises a “MessageList” ViewComponent that denotes a list of objects.

Figure 2.5 Example of ViewComponents within view containers.

A ViewComponent can have input and output parameters. For example, a ViewComponent that shows the details of an object has an input parameter corresponding to the identifier of the object to display. a data entry form exposes as output parameters the values submitted by the user. and a list of items exports as output parameter the item selected by the user.

A ViewContainer and a ViewComponent can be associated with events to express that they support user interaction. For example, a ViewComponent can represent a list associated with an event for selecting one or more items, a form associated with an event for input submission, or an image gallery associated with an event for scrolling though the gallery. IFML events are mapped to interactors2 in the implemented application. The way in which such...