Interaction Flow Modeling Language

Matteo Silva matteosilva

Politecnico di Milano and WebRatio

Webinar Mayo 31, 2013

2

¿Cuándo fue la ultima vez que desarrollaste el front-end de una aplicación?

¿Cuándo fue la ultima vez que te enojaste haciéndolo?

El desarrollo de la UI (User Interface) de una aplicación y la implementación de la interacción de usuario es una de las fases mas “dolorosas” del proceso de desarrollo….

… para todos!

¿Es esté tu problema?

3

Las razones de tu frustración:

La complexidad de las UIs incrementa el tiempo de desarrollo

• Nuevo eventos, dispositivos, casos de uso, interacciones…

Herramientas primitivas en la programación de UI

• Widgets drag&drop

• Hooks to execution

Especialmente para las modernas UIs, gran parte del trabajo resulta todavía manual mediante programación tediosa (por ejemplo programación Javascript )

No existe ninguna metodología MDE (Model Driven Engineering ) que abarque esta problemática, excepto WebML+WebRatio en el dominio de las aplicaciones Web.

El problema del modelado de la UI

4

La comunidad de desarrolladores percibe una falta de estandarización

La interacciónón de usuarios ha sido subestimada en la ingeniería del software

• Más se focaliza en temas relativos al backend y arquitecturales

Los pocos intentos de estandarización de la UI fracasaron porque:

• Intentaron utilizar lenguajes de dominio generico (ej. UML)

• La notación era poco usable y poco efectiva

• Falta de implementaciones solidas por parte de software vendors

La falta de estandarización

5

Todo esto fue lo que nos motivó a proponer

Fuertemente inspirado por WebML, actualmente representa su generalización desde el dominio Web a un dominio genérico para la representación del Front-end de cualquier tipo de aplicación (Web,

Escritorio, Mobile, etc.)

Interaction Flow Modeling Language

El Lenguaje de Modelado para los Flujos de Interacción

6

Les haremos una oferta que no

podrán rechazar.

En menos de 2 años (¡un record en OMG!), hemos obtenido una

aprobación de IFML como estándar

Object Management Group

7

Objetivos

Un lenguaje de modelado para representar

La visualización de los contenidos en las interfaces de usuario

Patrones de navegación

Eventos de usuario y su interacción

Binding a la lógica de negocio

Binding a las capas de persistencia

del front-end de las aplicaciones pertinentes a diversos dominios funcionales

Interaction Flow Modeling Language

8

Especificación formal de las diferentes perspectivas del fron-end

Aislamiento de las problemáticas de la UI

Separación de los conceptos (interacción de usuario vs. backend)

Simplificación de la comunicación entre los expertos de UI y stakeholdersno tecnicos

Generación automática del código para el front-end de las aplicaciones

Ventajas

9

Enfoque la interacción de usuario:

UI mezcla temas de visualización y diseño gráfico

Distinguir la Interacción de la Interfaz

La VIEW part (=front-end) de una aplicación software

Componentes de view

Eventos

Interacción entre componentes

Interacción entre usuario y componentes (eventos)

Distribución de los componentes y referencia a los componentes de la capa de datos y de la capa lógica de una arquitectura multicapa

Enfoque

10

Vistas multiples de la misma aplicación

Aplicaciones Mobiles y múltiple-dispositivo

Visualización e ingreso de data, y producción de eventos

Componentes independientes a widgets y presentación

Interaction flow (flujo de interacción), activados por usuarios o eventos

Contexto de usuario: el estado del usuario en el instante corriente de la interacción (posición, historial, maquina, plataforma..)

Modularidad del modelo (reutilizo de los componentes o fragmentos del modelo)

Validación del “input” del usuario, de acuerdo a OCL (Object ConstraintLanguage) o a otros lenguaces similares

Aspectos cubiertos

11

IFML conceptos principales (core IFML) 1/2

Container(contenidor)

ViewComponent

(componente de vista)

Event

(evento)

Action

(acción)

Navigation flow

(flujo de navegación)

Data flow

(flujo de datos)

Parameter binding

(vinculación de parametros)

12

IFML conceptos principales (core IFML) 2/2

Lo que ganas y lo que pierdes

Nuevos aspectos

• Modelado de eventos genéricos

• De usuario y de sistema

• Flujo entre componentes y contenidores

Nuevo

• ViewComponent

• Details, List, Form

• Flow, Data Flow

• Action

• Port

Aspectos faltantes

• Modelación de orquestación (cadenas de operaciones)

Viejo

• Unit

• Data, Index, Entry Units

• Link, Transport Link

• Operation Module

• Input/Output Collector13

Cambios de terminología desde WebML

14

IFML Ejemplo de sintaxis 1/2

Flujo básico de navegación entre ViewComponents

15

IFML Ejemplo de sintaxis 2/2

ViewContainers inhestados

Tagged ViewContainers (XOR, L, D, Modal, Modeles)

16

IFML concrete syntax by example

Actions

ViewComponentParts:

• Data binding

• Parameters

Types of ViewComponents (<<List>>)

17

IFML – Agregar detalles a ViewComponents

Selection event

Submit event

.. Y todos los que necesitas para tu comodidad!18

IFML – subtipos de componentes y eventos

IFML está definido por un metamodelo

IFML metamodel (1)

…

19

Tiene 2 paquetes principales:

IFML metamodel (2)

…

• IFML Core

• IFML Extensions

… y desde luego tu puedes extender lo que quieras, para diferentes campos y plataformas (Web, Mobile, …)

20

Un ejemplo real.. La UI completa de GMAIL

21

Messages [L D]

GMAIL top [X]

Mbox List

<<XOR>> Message Management

MailBox

Message notification

<<XOR>> Message Reader

<<D>>

Message Index

Message details

<<L>> Settings

<<P>> Tag chooser

Report

Archive

Delete

Tag/Folder Index

Associate to tag / Move to folder

<<M>> Tag creator

New Tag/Folder

Create Tag/

Folder

Message toolbar

OUT: NewTagIN: ATag

OUT: NewTagNameIN: TagName

OUT: SelectedTagIN: ATag

OUT: SelectedMessagesIN: MessageSet

Delete

Archive

Report

MoveTo

Create New

Select Tag

Create

MarkAll

MarkAllAsRead

OUT: AllMessagesIN: MessageSet

<<parameter>>MessageSet

<<XOR>> Message search

<<D>> Search

Message keyword search

<<P>> FullSearch

Message full search

Show search options

Search mail

OUT: KeywordIN: SearchKey

<<L>> Message writer

<<form>> Message Writer

Send Action

{Self.MessageRecipients >1}

OUT: MessageIDIN: MessageID

<<field>> To

<<field>> Cc

<<field>> Bcc

<<field>> Subject

<<field>> Body

<<field>> Attachment

OUT: Subject, From, Cc, Body, “ReplyAll”IN: “Re:”+ Subject, To, Cc, Body, State

OUT: Subject, From, “”, Body, “Reply”IN: “Re:”+ Subject, To, Cc, Body, State

OUT: Subject, “”, “”, Body, “Forward”IN: “Fw:”+ Subject, To, Cc, Body, State

State =”Reply” OR ”Forward”

SaveAction

State =”Forward” OR ”ReplyToAll”

<<parameter>> State

State = ”NewMessage” OR“Forward”

Forward

Reply

ReplyToAll

Add Bcc

Add Cc

Edit subject

Add attachment

Send Save

DiscardReplyToAll

Reply

Forward

State =”Reply” OR ”ReplyToAll”

State =”Reply” OR ”ReplyToAll”

OUT: Keyword, From, To., ...IN: SearchKey, FromKey, ToKey, ..

*

22

IFML ejemplos concretos de sintaxis

ActivationExpression, SubmitEvent, Event generation

23

IFML ejemplos concretos de sintaxis

intra-component events and flows

24

Un meta modelo oficial del lenguaje que describe la semántica y las relaciones entre los constructos del modelado

Una sintaxis grafica y concreta para la notación de interacción de flujos que provee una representación intuitiva de la composición de la interfaz de usuario, la interacción y la lógica de control para el diseñador de front-end.

Un Perfil UML consistente del metamodelo

Un formato de intercambio entre tools basado en XMI

Todo esto, especificado mediante una notación estándar

Resultados practicos a tener el estandar

25

Aspectos estáticos

El perfil UML de IFML�

«page»AlbumSearch

�

«page»Albums

�

«page»Album

Album Search Album Index Album Detail

�

«index»Message

Index

�

«index»MBox List «link»

26

Static aspects

Señales con valores “tagged”

Aspectos dinámicos

El perfil UML de IFML�

«signal»SelectMailMessages

mBox :string

Tagged values.

Parameter mBoxout name: selectedMBoxin name: mBox�

«index»MBox List

�

«index»Message

Index

SelectMailMessages(mBox)

Una estrecha integración entre diferentes herramientas de modelado

Gracias a XMI (formato de intercambio), Perfiles UML, especificaciones propietarias de software vendors

Modelado IFML e generación de UI

en contextos industriales avanzados

27

Integración e intercambio de Modelos

Tool UML que implementan el

perfil IFML

28

Fuerte integración con otras perspectivas de modelado y capas de modelado de una arquitectura de una app enterprise

Utilizo conjunto de IFML y otros lenguajes MDA, por ejemplo:

• UML

• BPMN

• SysML

• SoaML

• …

En particular abarca:

• DataBinding a clases y atributos de un Class Diagram UML

• Conexión a la lógica de business de bac-kend como metodos UML o diagramas dinámicos UML (activity diagram, sequence diagram, state chart diagram, …)

Broader, enterprise-wide modeling

Matteo Silva

matteosilva

matteo.silva@webratio.com

Si quieres conocer mas acerca de MDE lee el libro:

“Model Driven Software Engineering in Practice”.

Brambilla, Cabot, Wimmer.

Morgan&Claypool, USA.

Matteo Silva

matteosilva

matteo.silva@webratio.com

¡Gracias por asistir!