webinar ifml en español
DESCRIPTION
Presentación de resumén del primer Webinar acerca IFML, un nuevo estandar de OMG.TRANSCRIPT
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
Si quieres conocer mas acerca de MDE lee el libro:
“Model Driven Software Engineering in Practice”.
Brambilla, Cabot, Wimmer.
Morgan&Claypool, USA.