simo:documentos:tecnicos:ui
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
simo:documentos:tecnicos:ui [2017/11/12 18:42] lgomez creado |
simo:documentos:tecnicos:ui [2017/11/12 19:21] (actual) lgomez |
||
|---|---|---|---|
| Línea 19: | Línea 19: | ||
| 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. | 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: | + | 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. | + | * 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 **[[:simo:documentos:tecnicos:jsonrestwithpageparam|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: | * 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-type: Clase Dijit a utilizar para crear el Widget en cuestión | ||
| Línea 33: | Línea 33: | ||
| * data-editable-roles; Atributo específico de SIMO que controla la editabilidad del widget a partir de roles del usuario autenticado | * 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 | * 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 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. | * 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. | ||
| + | |||
| + | ===== Controladores de vista ===== | ||
| + | |||
| + | 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 | ||
simo/documentos/tecnicos/ui.1510512163.txt.gz · Última modificación: 2017/11/12 18:42 por lgomez
Herramientas de la página
