Presentación de resumén del primer Webinar acerca IFML, un nuevo estandar de OMG.

1. Interaction Flow Modeling Language
Matteo Silva matteosilva
Politecnico di Milano and WebRatio
Webinar Mayo 31, 2013

2. 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. 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. 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. 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. 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. 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. 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 stakeholders
no tecnicos
Generación automática del código para el front-end de las aplicaciones
Ventajas

9. 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. 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 Constraint
Language) o a otros lenguaces similares
Aspectos cubiertos

11. 11
IFML conceptos principales (core IFML) 1/2
Container
(contenidor)
ViewComponent
(componente de vista)
Event
(evento)
Action
(acción)

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

13. 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 Collector
13
Cambios de terminología desde WebML

14. 14
IFML Ejemplo de sintaxis 1/2
Flujo básico de navegación entre ViewComponents

15. 15
IFML Ejemplo de sintaxis 2/2
ViewContainers inhestados
Tagged ViewContainers (XOR, L, D, Modal, Modeles)

16. 16
IFML concrete syntax by example
Actions

17. ViewComponentParts:
• Data binding
• Parameters
Types of ViewComponents (<<List>>)
17
IFML – Agregar detalles a ViewComponents

18. Selection event
Submit event
.. Y todos los que necesitas para tu comodidad!
18
IFML – subtipos de componentes y eventos

19. IFML está definido por un metamodelo
IFML metamodel (1)
…
19

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

21. 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: NewTag
IN: ATag
OUT: NewTagName
IN: TagName
OUT: SelectedTag
IN: ATag
OUT: SelectedMessages
IN: MessageSet
Delete
Archive
Report
MoveTo
Create
New
Select
Tag
Create
MarkAll
MarkAll
AsRead
OUT: AllMessages
IN: MessageSet
<<parameter>>
MessageSet
<<XOR>> Message search
<<D>> Search
Message
keyword
search
<<P>> FullSearch
Message
full search
Show search
options
Search mail
OUT: Keyword
IN: SearchKey
<<L>> Message writer
<<form>> Message Writer
Send
Action
{Self.MessageRecipients >1}
OUT: MessageID
IN: 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”
Save
Action
State =”Forward”
OR ”ReplyToAll”
<<parameter>> State
State =
”NewMessage” OR
“Forward”
Forward
Reply
ReplyToAll
Add Bcc
Add Cc
Edit subject
Add attachment
Send Save
Discard
Reply
ToAll
Reply
Forward
State =”Reply” OR
”ReplyToAll”
State =”Reply”
OR ”ReplyToAll”
OUT: Keyword, From,
To., ...
IN: SearchKey,
FromKey, ToKey, ..
*

22. 22
IFML ejemplos concretos de sintaxis
ActivationExpression, SubmitEvent, Event generation

23. 23
IFML ejemplos concretos de sintaxis
intra-component events and flows

24. 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. 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. 26
Static aspects
Señales con valores “tagged”
Aspectos dinámicos
El perfil UML de IFML
«signal»
SelectMailMessages
mBox :string
Tagged values.
Parameter mBox
out name: selectedMBox
in name: mBox
«index»
MBox List
«index»
Message
Index
SelectMailMessages(mBox)

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

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

30. Matteo Silva
matteosilva
matteo.silva@webratio.com
¡Gracias por asistir!