Webinar IFML en Español

3,883 views

Published on

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

Published in: Technology

Webinar IFML en Español

  1. 1. Interaction Flow Modeling Language Matteo Silva matteosilva Politecnico di Milano and WebRatio Webinar Mayo 31, 2013
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11 IFML conceptos principales (core IFML) 1/2 Container (contenidor) ViewComponent (componente de vista) Event (evento) Action (acción)
  12. 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. 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. 14 IFML Ejemplo de sintaxis 1/2 Flujo básico de navegación entre ViewComponents
  15. 15. 15 IFML Ejemplo de sintaxis 2/2 ViewContainers inhestados Tagged ViewContainers (XOR, L, D, Modal, Modeles)
  16. 16. 16 IFML concrete syntax by example Actions
  17. 17. ViewComponentParts: • Data binding • Parameters Types of ViewComponents (<<List>>) 17 IFML – Agregar detalles a ViewComponents
  18. 18. Selection event Submit event .. Y todos los que necesitas para tu comodidad! 18 IFML – subtipos de componentes y eventos
  19. 19. IFML está definido por un metamodelo IFML metamodel (1) … 19
  20. 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. 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. 22 IFML ejemplos concretos de sintaxis ActivationExpression, SubmitEvent, Event generation
  23. 23. 23 IFML ejemplos concretos de sintaxis intra-component events and flows
  24. 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. 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. 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. 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. 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. 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. 30. Matteo Silva matteosilva matteo.silva@webratio.com ¡Gracias por asistir!

×