En SIMO, toda la interfaz de usuario se ejecuta del lado del cliente, utilizando HTML y Javascript, es decir que el servidor JAVA no genera HTML a diferencia de otras tecnologías como JSP o JSF. esto permite una separación de responsabilidades entre las capas, aumenta la eficiencia del sistema y proporciona mayor flexibilidad.

La interfaz de usuario está implementada usando el framework javascript Dojo Toolkit, este framework está basado en el estándar AMD (Asynchronous Module Definition) y por tanto, está basado en módulos Javascript que interactuan unos con otros.

Dojo Toolkit está compuesto por los siguientes paquetes principales

• Dojo: Paquetes base del lenguaje, se destacan los siguientes módulos
  • dojo/request: Peticiones Ajax
  • dojo/store: Acceso a datos, ver más adelante
  • dojo/dom y asociados: Manipulación de DOM de HTML
  • dojo/promise, dojo/when, dojo/Deferred: Manejo asincrónico
  • dojo/lang: Primitivas del lenguaje
  • dojo/declare: Programación orientada a objetos
• Dijit: Componentes gráficos y Widgets, proporcionan versiones controladas por javascript de los principales controles HTML y otros más avanzados, los Widgets incorporan manejo de eventos, patrón observer, setters y getters, entre otras características.
• Dojox: Complementos al framework, incluye dojox/app

La interfaz de usuario se implementa usando el concepto de “Aplicación de una sola página”. Este concepto se basa en tener una sola página HTML cuyo contenido cambia constantemente según la interacción del usuario, a diferencia de los enfoques tradicionales que se basan en tener múltiples páginas HTML las cuales se presentan sucesivamente según la interacción del usuario.

Para implementar este concepto se usa el módulo Dojo dojox.app, el cual modela la aplicación Javascript de una sola página utilizando el conocido patrón arquitectónico MVC donde:

• El modelo está implementado mediante objetos de tipo dojo/store, estos objetos producen y consumen objetos JSON usando un API común conformado por las operaciones add, put, delete, query y id (operaciones CRUD). Los store pueden estar asociados a diferentes fuentes de datos, en SIMO se utilizan las store de tipo REST que naturalmente utilizan los servicios REST proporcionados por la capa de controladores. NOTA: Para SIMO se creó un nuevo tipo de store llamada JsonRestWithPageParam, la cual está diseñada para integrarse transparentemente con el sistema de paginación de Spring Boot.
• Las vistas o templates son construidas en HTML normal, los tags HTML pueden ser complementados con atributos Dojo y Dijit que permiten crear Widgets Dijit desde el template e inicializar sus datos y propiedades, los principales atributos son:
  • data-dojo-type: Clase Dijit a utilizar para crear el Widget en cuestión
  • data-dojo-props: Propiedades de inicialización del Widget
  • data-dojo-attach-point: Hace disponible el Widget o node DOM como una variable en el controlador de vista
  • data-visible: Atributo específico de SIMO que controla la visibilidad del widget a partir de los datos manejados por el Widget
  • data-visible-roles; Atributo específico de SIMO que controla la visibilidad del widget a partir de roles del usuario autenticado
  • data-enabled: Atributo específico de SIMO que controla si un widget permite interacción con el usuario a partir de los datos manejados por el Widget
  • data-enabled-roles; Atributo específico de SIMO que controla si un widget permite interacción con el usuario a partir de roles del usuario autenticado
  • data-editable: Atributo específico de SIMO que controla la editabilidad del widget a partir de los datos manejados por el Widget
  • data-editable-roles; Atributo específico de SIMO que controla la editabilidad del widget a partir de roles del usuario autenticado
• Los controladores son de dos tipos
  • Controladores generales (Back Controllers): Proporcionados por el framework, implementan dojox/app/Controller y controlan aspectos generales como la navegación, la carga de vistas, el ciclo de vida de las vistas y la seguridad
  • Controladores de Vista (Front Controllers): Proporcionados por el desarrollador, implementan la lógica Javascript asociada a las vistas, como tal, existe una asociación uno a uno entre el template y el controlador de la vista, los controladores pueden referenciar los Widgets declarados en el template y los nodos HTML del mismo usando data-dojo-attach-point.

Los controladores de vista heredan de dojox/app/View la cual define el ciclo de vida de una vista y proporciona cinco callbacks que pueden ser sobresescritos en los controladores, estos callbacks son:

• init: Invocado solo una vez justo después de cargar e instanciar el controlador de vista, útil para inicializar manejadores de eventos y otras cosas que no cambian frecuentemente
• beforeActivate: Invocado cada vez y justo antes de mostrar una vista, útil para inicializar los datos que se van a mostrar en la vista, dependiendo del contexto actual de ejecución, en SIMO se suele invocar un método initData que hace justo lo nombrado.
• afterActivate: Invocado cada vez y justo después de mostrar una vista
• beforeDeactivate: Invocado cada vez y justo antes de ocultar una vista
• afterDeactivate: Invocado cada vez y justo después de ocultar una vista