Webinar IFML en Español
-
Upload
matteo-silva -
Category
Technology
-
view
2.222 -
download
1
description
Transcript of Webinar IFML en Español
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.