Interaction Flow Modeling Language (eBook)

Model-Driven UI Engineering of Web and Mobile Apps with IFML

Marco Brambilla, Piero Fraternali (Autoren)

eBook Download: PDF | EPUB

2014 | 1. Auflage
422 Seiten
Elsevier Science (Verlag)
978-0-12-800532-3 (ISBN)

Infos

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 actively researching on methods and tools for model-driven software development, with special focus on web applications, search engines, social networks and crowdsourcing platforms. He is professor of software engineering and researcher at Politecnico di Milano and partner of the spinoff WebRatio, which produces MDD tools based on IFML, UML, and BPMN. He is the principal contributor of the Interaction Flow Modeling Language (IFML). He authored several books, including Developing Data-Intensive Web Applications (Morgan Kaufmann, 2002) and Model-driven Software Engineering in Practice (Morgan&Claypool, 2012).

Inhalt

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

Textauszug

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

Produkt-Details

• Erscheint lt. Verlag: 17.11.2014
• Sprache: englisch
• Themenwelt: Mathematik / Informatik ► Informatik ► Programmiersprachen / -werkzeuge
• Themenwelt: Informatik ► Software Entwicklung ► UML
• ISBN-10: 0-12-800532-7 / 0128005327
• ISBN-13: 978-0-12-800532-3 / 9780128005323