Interaction Flow Modeling Language

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

Marco Brambilla, Piero Fraternali

• Publisher: Morgan Kaufmann
• Year: 2014
• Print ISBN: 9780128001080
• eBook ISBN: 9780128005323
• Topic: Computer Science
• Subtopic: Programming Languages
• Index: Computer Science

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

Chapter 1

Introduction

Abstract

The chapter introduces the motivations for using models in the development of software applications and explains the objectives and focus of the Interaction Flow Modeling Language (IFML), the standard of the Object Management Group (OMG) for user interface modeling. The chapter also identifies the audience of the book and illustrates its structure.

Keywords

IFML; Interaction Flow Modeling Language; MDE; Model driven engineering; OMG MDA

In the last twenty years, capabilities such as information browsing, hypertext-style navigation, multimedia content fruition, form-based interaction, and interface personalization have become widespread. They are found in consumer applications, business information systems, and even human–machine interfaces for industrial control. More and more embedded systems are equipped with sophisticated GUIs. Powerful interaction functionalities are implemented on top of a variety of technologies and platforms whose boundaries are becoming less distinguishable: window-based interfaces for desktop and client–server architectures, pure-HTML web pages, rich Internet applications, and mobile apps. This convergence in technologies is well portrayed by the HTML 5 initiative, which seeks to establish a coherent set of concepts and common technological grounds for the development of a broad variety of interaction front-ends.

However, the emergence of such an unprecedented mix of devices, technological platforms, and communication channels is not accompanied by the maturation of approaches for creating a platform independent model (PIM) that can be used to express interaction design decisions independently of the implementation platform. In addition, front-end design is a complex task where many requirements, perspectives, and disciplines intersect: graphic design and aesthetics, enterprise visual identity, interaction design, usability, multi-screen support, offline-online usage, integration with backend business logic and data, and coherence with the enterprise organization models (e.g., business process compliance).

Front-end development, therefore, continues to be a costly and inefficient process, where the collision of many complex factors imposes continuous reworking and refinement of the implementation. The situation is made worse by the scarcity of automation in mainstream software production methods, which causes low reuse of design artifacts across the interfaces of different projects and high overhead for ensuring cross-platform portability of applications. In this context, the role of a PIM-level interaction modeling language is to provide a stable set of concepts that can be used to characterize the essential aspect of the user’s interaction with a software application interface: the provision of stimuli, the capturing and processing of such stimuli by the application logic, and the update of the interface based on such processing. The PIM should be designed for change. The stable core of concepts should be accompanied by a native extension mechanism capable of accommodating new forms of interactions and interface renditions (e.g., gestural stimuli and renditions in 3D or augmented reality devices).

A PIM-level interaction modeling language—seamlessly integrated with other modeling perspectives for the design of complete software solutions—brings several benefits:

• It permits the explicit representation of the different perspectives of the front end (content, interface organization, interaction and navigation options, and connection with the business logic and the presentation style).

• It raises the abstraction level of the front-end specification, isolating it from implementation-specific issues.

• It improves the coordination of work in the development process by allowing the allocation of interaction requirement specifications and their implementation to different roles in the team.

• It enables the communication of interface and interaction design to nontechnical stakeholders, enabling the early validation of requirements.

• With the proper tool support, it allows automatic checks on the interface models, not only for the correct use of the modeling constructs but also for desirable properties of the portrayed interface such as uniformity of the interaction style and usability of the interface.

To address these needs, the OMG (Object Management Group) adopted the Interaction Flow Modeling Language (IFML) as a standard in July 2014. This book offers a structured introduction to this new modeling language. The spirit is not that of a reference manual for the illustration of the formal concepts that constitute the language, but rather that of a practical guide book showing the language at work through a progression of examples, design patterns, and best practices. After reading the book, the should have a clear understanding of how to exploit IFML in practice and integrate it into mainstream enterprise software development standards.

As IFML gets implemented by tool vendors, the reader will be able to try out the examples provided in the book and even generate partial or full applications from the models.

1.1. What IFML is About

IFML supports the specification of the front end of applications independently of the technological details of their realization. It addresses the following questions of front-end modeling:

• The composition of the view: What are the visualization units that compose the interface, how are they organized, and which ones are displayed simultaneously and which in mutual exclusion?

• The content of the view: What content elements are displayed from the application to the user, and what input is acquired from the user and supplied to the application?

• The commands: What interaction events are supported?

• The actions: What business components are triggered by the events?

• The effects of interaction: What is the effect of events and action execution on the state of the interface?

• The parameter binding: What data items are communicated between the elements of the user interface and the triggered actions?

IFML expresses the abovementioned aspects using a visual modeling language based on the OMG standards. Its technical foundations lie on the OMG Model Driven Architecture (MDA) framework. This grants seamless integration with the specifications of the other layers of the software system. The specification consists of five main technical artifacts:

• The IFML metamodel specifies the structure and semantics of the IFML constructs using the OMG Meta Object Facility (MOF).

• The IFML Unified Modeling Language (UML) profile defines a UML-based syntax for expressing IFML models. In particular, the UML Profile for IFML is based on the use of UML components (both basic components and packaging components), classes, and other concepts, which may concur with hierarchical structures or dependencies.

• The IFML visual syntax offers a concrete representation based on a unique diagram. This compacts all aspects of the user interface that are otherwise expressed separately with UML class diagrams, state machine, and composite structure diagrams.

• The IFML textual syntax offers a textual alternative, equivalent to the visual syntax, for expressing IFML models.

• The IFML XMI provides a model exchange format for tool portability.

This book adopts the IFML visual syntax as a concrete vehicle for conveying the user interaction models because it is close to UML—and thus familiar to developers—and because it is very compact.

1.2. The IFML Design Principles

Designing a modeling language for the front end is a complex and multidisciplinary task where many perspectives intersect. A good modeling language should pay attention to coverage (i.e., the ability to represent complex application front ends but also to model usability and understandability). The latter goals require addressing all the factors that contribute to make a modeling language quick to learn, simple to use, easy to implement by tool vendors, and open to extensibility. The design of IFML adheres as much as possible to the following “golden” rules:

• Conciseness: the number of diagram types and concepts needed to express the salient interface and interaction design decisions is kept to the minimum. In particular, the IFML visual syntax conveys the front-end model using a single diagram. This design simplifies the model editing and maintenance processes, because references between different types of diagrams need not be maintained and only the internal coherence among the various elements of a single type of diagram must be preserved.

• Inference from the context: whenever something can be deduced from existing parts of the model, inference rules at the modeling level automatically apply default modeling patterns and details, avoiding the need for modelers to specify redundant information. For example, parameter passing rules between different model elements, which are ubiquitous and cumbersome to specify, are inferred from the context as often as possible.

• Extensibility: adaptation to novel requirements, interaction modalities, and technologies must be planned in the language design. IFML builds upon a small set of core concepts that capture the essence of interaction: the interface (containers), stimuli (events), content (components and data binding), and dynamics (flows and actions). By design, these concepts are meant to be extended to mirror the evolution of technologies and devices. Thus, IFML incorporates standard means for defining new concepts, such as novel interface components or event types. The OMG standard already comprises examples of extensions, and this book illustrates many more cases that ease the specification of web, desktop, and mobile applications. Time and practice will show if the core of IFML is sufficiently technology neutral to enable extension to novel interaction paradigms that are possibly very different from the ones for which the language was initially conceived.

• Implementability: models that lack adequate tool support and cannot be used to produce the code are quickly abandoned. IFML is a platform-independent language but has been designed with executability in mind. This is obtained through model transformations and code generators to ensure that models can be mapped easily into executable applications for various platforms and devices. Chapters 10 and 11 present some techniques for implementing IFML specifications in several platforms, discuss the tool support requested in general for making the language usable, and illustrate one specific tool that enables automation of the design process and code generation.

• Not everything in the model: sometimes the hardest choice in language design is what to leave out. IFML purposely ignores presentation aspects, because presentation is adversarial to abstraction (in graphic design, every pixel is important). It also delegates to external models the specification of aspects that, although relevant to the user interface, are not properly part of it. For example, the internal functioning of the actions triggered by the GUI can be described using an action model. If the action is the invocation of an object’s method, this can be described by referencing a method in a UML class; if the action is the invocation of an orchestration of web services, this can be described using a SoaML¹ diagram; if the action is described by a complex behavior, this can be obtained by referencing a whole UML dynamic diagram (e.g., a sequence diagram or activity diagram). The content model underlying the application can be described with an...

Table of contents

• Cover image
• Title page
• Table of Contents
• Copyright
• Foreword
• Chapter 1. Introduction
• Chapter 2. IFML in a Nutshell
• Chapter 3. Domain modeling
• Chapter 4. Modeling the composition of the user interface
• Chapter 5. Modeling interface content and navigation
• Chapter 6. Modeling business actions
• Chapter 7. IFML extensions
• Chapter 8. Modeling patterns
• Chapter 9. IFML by examples
• Chapter 10. Implementation of applications specified with IFML
• Chapter 11. Tools for model-driven development of interactive applications
• Chapter 12. IFML language design, execution, and integration
• Appendix A. IFML notation summary
• Appendix B. List of IFML design patterns
• References
• Index