Fundación CTIC Taller sobre Web Móvil y HTML5 06 de Junio de 2012. Cornellà de Llobregat MYMOBILEWEB: CONFIGURACIÓN DE UN PROYECTO Cristina González Cachón cristina.cachon@fundacionctic.org Fundación CTIC
ÍNDICE CONSTRUIR APLICACIÓN MMW Material Instalación Configuración del entorno Configuración de la aplicación Definición de la aplicación Presentación Flujo Lógica de Negocio Generación y despliegue Resultado final EJEMPLO FINAL 2
MATERIAL Java Java SE 5.0+ JDK Entorno de desarrollo Eclipse Indigo, Ganymede, Servidor de aplicaciones/contenedor de servlets Apache Tomcat 5,5+ Device Description Repository (DDR Simple API) Librerías de MyMobileWeb Ejemplos MyMobileWeb 3
INSTALACIÓN Instalar el entorno de desarrollo: Eclipse Instalar servidor web de aplicaciones Instalar el Servicio REST DDR 1.3 Descargar librerías 4
INSTALACIÓN DDR SERVICE Descargar el software Desplegar la aplicación en el servidor Webapps Acceder http://ip:puerto/ddrservice Arrancar servidor Comprobar funcionamiento List Available Properties 5
CONFIGURACIÓN DEL ENTORNO File Import General Existing Projects into workspace Última Versión (4.1): http://forge.morfeoproject.org/wiki_en/index.php/download_version_4_1 6
CONFIGURACIÓN DEL ENTORNO Para añadir un servidor al entorno de desarrollo: File New Other Server Configurar las características del servidor Añadir el proyecto web deseado 7
CONFIGURACIÓN DEL ENTORNO Deploy Tools: MyMobileWeb.Codegen MyMobileWeb.LiteralExtractor 8
CONFIGURACIÓN DEL ENTORNO Generación de JSPs y Extracción de literales Run As Run Configurations Java Application Generator y Extractor 9
COMO CONSTRUIR UNA APLICACIÓN: CONCEPTOS CLAVE Presentación (View o Vista) Página web, pantalla o ventana que contiene componentes de la interfaz de usuario, OP (Operación de Presentación o Use Case o Caso de Uso): Agrupación de presentaciones con un objetivo común OA (Operación de Aplicación) Clase Java que implementa parte de la lógica de la aplicación. 10
CONFIGURACIÓN DE LA APLICACIÓN ESTRUCTURA DE DIRECTORIOS css: hojas de estilos DeviceBBDD: gestor de dispositivos flows: control de flujo de la applicación i18n: sms, literales e internacionalización resource: imágenes, vídeos, 11
CONFIGURACIÓN DE LA APLICACIÓN ESTRUCTURA DE DIRECTORIOS OPs: definición UI (IDEAL2) jsp: generadas automáticamente a partir de la definición de IDEAL2+CSS 12
CONFIGURACIÓN DE LA APLICACIÓN ESTRUCTURA DE DIRECTORIOS myscript: scripts que añaden funcionalidad a la aplicación. script: scripts internos de la plataforma WEB-INF: clases JAVA que gestionan el funcionamiento de la aplicación archivos de configuración Librerías Validación del flujo 13
CONFIGURACIÓN DE LA APLICACIÓN Archivos de configuración: WEB-INF/config MyMobileWeb.Global: configuración global de la aplicación 14
CONFIGURACIÓN DE LA APLICACIÓN MyMobileWeb.DevMng: características Gestor de dispositivos DDR Remoto o local URL de acceso 15
CONFIGURACIÓN DE LA APLICACIÓN CarAgency.xml: propiedades externas necesarias para la aplicación: RSS, fuentes de información, Global: propiedad appl_config OAConfig.xml: Definen las OAs que se utilizan. Identificador y clase implementadora. Traces.xml Definen las trazas para depurar el comportamiento del código 16
APLICACIÓN DE ALQUILER DE COCHES 17
APLICACIÓN DE ALQUILER DE COCHES 18
APLICACIÓN DE ALQUILER DE COCHES 19
APLICACIÓN DE ALQUILER DE COCHES 20
DEFINICIÓN DE PRESENTACIONES Se definen OPs y presentaciones IDEAL2 Language 21
DEFINICIÓN DE PRESENTACIONES Se definen OPs y presentaciones IDEAL2 Language 22
DEFINICIÓN DE PRESENTACIONES Se definen enlaces a recursos externos: Referencia a hojas de estilos, scripts 23
DEFINICIÓN DE PRESENTACIONES Define la Interfaz de Usuario Body: contiene todo el documento 24
DEFINICIÓN DE PRESENTACIONES Section: el cuerpo del documento se puede dividir en secciones para estructurar el contenido 25
DEFINICIÓN DE PRESENTACIONES footer: sección del documento acotada 26
DEFINICIÓN DE PRESENTACIONES Tabs: pestañas 27
DEFINICIÓN DE PRESENTACIONES Preferencias de aplicación 28
DEFINICIÓN DE PRESENTACIONES Preferencias de aplicación: menú de selección 29
DEFINICIÓN DE PRESENTACIONES Preferencias de aplicación: menú de selección 30
DEFINICIÓN DE PRESENTACIONES Preferencias de aplicación: menú de selección 31
DEFINICIÓN DE PRESENTACIONES <submit>: botón de acceso 32
DEFINICIÓN DE PRESENTACIONES <label>: texto mostrado sólo ocasionalmente 33
DEFINICIÓN DE LOOK-AND-FEEL REDEFINICIÓN POR FAMILIAS 34
DEFINICIÓN DE LOOK-AND-FEEL GENERIC: PESTAÑAS 35
DEFINICIÓN DE LOOK-AND-FEEL GENERIC: BOTÓN 36
DEFINICIÓN DE LOOK-AND-FEEL AGRUPACIONES: sólo en HTML3.2 37
DEFINICIÓN DE LOOK-AND-FEEL AGRUPACIONES: sólo en HTML3.2 38
DEFINICIÓN DE LOOK-AND-FEEL HTML5 HTML3.2 39
DEFINICIÓN DEL FLUJO ESQUELETO BÁSICO 40
DEFINICIÓN DEL FLUJO ESTADO DE APLICACIÓN 41
DEFINICIÓN DEL FLUJO ESTADO DE CASO DE USO 42
DEFINICIÓN DEL FLUJO ESTADO INICIAL 43
DEFINICIÓN DEL FLUJO TRANSICIONES GLOBALES 44
DEFINICIÓN DEL FLUJO TRANSICIONES DE PESTAÑAS 45
DEFINICIÓN DEL FLUJO ESTADO DE PREFERENCIAS 46
DEFINICIÓN DEL FLUJO ESTADO DE CASO DE USO 47
DEFINICIÓN DEL FLUJO Estado vista 48
DEFINICIÓN DEL FLUJO Transición 49
DEFINICIÓN DE LA OA Código JAVA OAConfig.xml 50
GENERACIÓN Y DESPLIEGUE Añadir: posible recursos: imágenes, vídeos, GENERACIÓN: Run Run JSP DESPLIEGUE: Contenedor de Servlets 51
COMO CONSTRUIR UNA APLICACIÓN: RESULTADO FINAL HTML5 HTML3.2 XHTML-MP 52
EJEMPLO FINAL Servicio de alquiler de coches 53
EJEMPLO FINAL Servicio de alquiler de coches 54
EJEMPLO FINAL Servicio de alquiler de coches 55
EJEMPLO FINAL Servicio de alquiler de coches 56
GRACIAS POR SU ATENCIÓN cristina.cachon@fundacionctic.org 57