The Problem
Developing the front-end of a user application is a costly and inefficient process for a number of reasons. First of all, the Complexity of User Interfaces increases over time. New devices, technological platforms, communication channels and interactions emerge every day. This growth in complexity hasn’t been accompanied by adequate tools. Instead, we have had to use ineffective tools with no standard language to use when designing user interactions independently of the implementation platform. A lot is still delegated to manual development and coding, with the requirement of precise measurement and organization of the User Interface. Despite all of this, there has been no real Model-driven engineering attempt to address the problem (except for WebML and WebRatio in the Web domain).
The Solution
WebRatio Platform has solved the User Interface modeling challenge by developing an Interaction Flow Modeling Language, or IFML, which covers the existing gap in front-end application development. IFML supports the platform-independent description of graphical user interfaces for applications accessed or deployed on such systems as desktop computers, laptop computers, PDAs, mobile phones, and tablets. IFML describes user interaction, and control behavior of the application, as perceived by the end user. IFML doesn’t focus on the graphics and design of an application, but you can use it to deliver high quality interfaces nonetheless, by using tools for importing graphic resources or templates.
IFML Objectives
IFML is a modeling language for expressing:
- Content that is seen by users within the user interface.
- Navigation paths between elements of the user interface.
- User Events and Interactions.
- Binding to the business logic.
- Binding to Persistence layers.
Let's see the detail for each one:
Content. IFML specifies Content that is seen in the user interface; specifically, what the user will see on the screen of a software application. For example, the book detail page of an online bookstore application displays the essential information about a book.
Navigation Path. IFML describes the navigation paths between the user interface elements. For example, from the bookstore homepage the user can be redirected to the page "Books" by selecting the corresponding category. From the "Books" page the user can then go back to the Home page, or go to the Shopping Cart, or read further product details.
User Events & Interactions. Events are occurrences that happen in the UI and are triggered by user interactions; they allow navigation from one element of the UI to another, and permit the execution of business actions. For example, the user clicking "See more" in the Product List produces a navigation event and, as a result, the details of the selected product are displayed.
Binding to Business Logic. IFML expresses the connection to the business logic in that the operations are executed in response to user interaction. For example, entering a product quantity in the form and submitting the form triggers the operation for adding the specified products to the user's shopping cart.
Binding to Persistence Layer. IFML describes binding to persistence layers, which are databases that store information. Content binding is represented by expressions that specify what data to extract from the persistence layer. For example, the CategoryList view element is associated with a data binding expression that specifies that all the objects of type Category are extracted and published in the view element.
IFML and Extensions
IFLM was adopted by the Object Management Group (OMG) and is composed of a small set of main concepts building the ESSENTIAL unit. In order to model and to assign further details for the core concepts you can use the Extension. Finally, you can create your own extension for a particular application domain or device. For instance, WebRatio Platform developed the IFML Web Extension.
Essential IFML Modelling Concepts
Here are the IFML Essential Concepts.
ViewContainer. An element of the interface that comprises other containers and/or elements displaying content and supporting interaction.
Examples: Web Page, Window, Panel.
ViewComponent. An element of the interface that displays content or accepts input.
Examples: An HTML list, A JavaScript image gallery, An input form.
Event. Users interaction or system-generated occurrence that affects the state of the application.
Examples: Selecting an item from a list, Submitting a form, Clicking a menu item.
Action A piece of business logic triggered by an event.
Examples: A database update, The sending of an e-mail.
Navigation Flow. An input-output dependency. The source of the link has some output that is associated with the input of the target of the link.
Examples: Sending and receiving of parameters in the HTTP request.
Data Flow. An input-output dependency between the source and the target of the flow that is not directly associated with the user interaction.
Examples: Sending the book ID from a component displaying the book details to another component showing the book reviews.
Parameter Binding Group. Set of Parameter Bindings* associated with an Interaction Flow (being it navigation or data flow).
Examples: Connecting the book title in output from a component to the input parameter of another component.
*Specification that an output parameter of a source is associated with an input parameter of a target.
Extension IFML Modeling Concepts
Here are the Extension IFML core Concepts:
Modal Window. A View Container rendered in a new window that, when displayed, blocks interaction in all other previously active containers.
Examples: A modal pop-up in HTML
Modeless Window. A View Container rendered in a new window, that when displayed, is superimposed over all other previously active containers, which remain active.
Examples: A tooltip
List. View Component used to display a list of objects. The type of the objects is specified by the DataBinding clause.
Examples: Table with rows of elements of the same kind.
Form. View Component used to display a form that is composed of Fields.
Examples: HTML form.
Details. View Component used to display details of a specific object. The type of the object is expressed in the DataBinding clause.
Examples: The profile data of a user, The title and the cover of a book.
Select Event. Event that denotes the selection of a single item of the user interface.
Examples: A selection of a row in a table.
Submit Event. Event that triggers a parameter passing from the source element to the target element of an interaction flow.
Examples: A form submission in HTML