Manual de usuario del Plugin MyMobileWeb versión 1.1.1
De MorfeoWiki
Tabla de contenidos |
Instalación
Prerrequisitos
Antes de instalar el plugin MyMobileWeb se debe:
- Tener instalado:
- Plugin de Tomcat Plugin que integra el servidor web Tomcat con la plataforma de desarrollo eclipse.
- Apache Tomcat Servidor web con soporte de servlets y JSPs
- Plugin Colorer (Opcional). Nos permite encontrar errores sintácticos con facilidad en ficheros XML
- Descargar:
- Plugin MyMobileWeb Plugin que integra la plataforma MyMobileWeb con el entorno de desarrollo eclipse.
- SDK de MyMobileWeb
¿Cómo instalarlo?
- Como la mayoría de los plugins de eclipse para instalarlos, basta con copiar la carpeta del plugin de MyMobileWeb en el directorio "plugins" de Eclipse.
Configuración
Una vez que se tiene el plugin instalado, se puede pasar a configurarlo, para ello debemos de seguir los siguientes pasos:
- Descomprimir el fichero SDK de MyMobileWeb descargado.
- Arrancar Eclipse e ir a la barra de menú "Window", pinchar en "Preferencias" y una vez dentro desplegar "MyMobileWeb".
- A continuación indicar la ruta del SDK y apuntar a la carpeta "MyMobileWeb_SDK_xx" que se acaba de descomprimir.
Ademas podemos selecinar diferentes navegadores donde vamos a poder correr las aplicaciones que generemos, para ello debemos:
- Desplegar el menú "Window".
- Pinchar en "Preferences".
- Al abrirse la ventana, desplegar la pestaña "MyMobileWeb".
- Seleccionar "Emuladors".
- Una vez en "Emuladores" podemos añadir emuladores, Pulsando en el botón "Add".
- Se desplegara una ventana donde podremos elegir el navegador pulsando el botón "Add".
- Ejemplos:
NOTA: Ademas se pueden borrar navegadores que ya no se utilicen dando al botón "Remove".
Se pueden ordenar los navegadores por orden de precedencia de ejecución, de tal manera que posteriormente al dar a la ejecución rápida se cargará el primero de la lista. Esto se detallara en el apartado de [#Ejecución de emuladores|"Ejecución de emuladores"]
Crear un nuevo proyecto
Existen dos formas de acceder a la creación de un proyecto.
- Ir la barra de menú "Archivo", desplegar el submenú "Nuevo" y pinchar en "Proyecto".
- Pulsar el botón derecho en el espacio de generación de proyectos, desplegar el menú "Nuevo" y pulsar en "Proyecto".
Una vez que se ha accedido nos muestra un asistente con las siguientes pantallas:
- Seleccionar la carpeta "MyMobileWeb" o "MyMobileWeb Examples" dependiendo de si se quiera hacer un proyecto nuevo, o bien utilizar uno de los ejemplos como base.
- Poner el nombre del proyecto que se va a crear.
- En el primer cuadro de texto,"Context Name", determinar el nombre del contexto con el que el nuevo proyecto aparecerá en el arranque de Tomcat.
- Si no queremos que aparezca en este fichero solo tenemos que quitar el tick "Cant update context definition"
- En el segundo cuadro de texto, se puede especificar el directorio donde se va a almacenar el proyecto, no es necesario cambiarlo.
- Para especificar otros valores del proyecto pulsar en el botón "Next".
- Una vez aquí, el sistema nos muestra una pantalla donde podemos determinar:
- El nombre del paquete base de la aplicación.
- El nombre del paquete base del manejador de eventos.
- Y si se activa la casilla de verificación, para poder especificar la primera OP que cargará la aplicación asi como una presentación básica que contiene un pequeño menú de ejemplo.
- Una vez finalizado el proceso, se obtendrá un árbol de directorios con la estructura siguiente:
Creación de componentes
En este apartado se detallara cada uno de los componentes que se puede crear con la plataforma de desarrollo MyMobileWeb. Cada uno de estos componentes viene acompañado de un asistente de creación para facilitar su utilización. Es conveniente para evitar problemas, crear cada componente con el asistente que proporciona la plataforma, debido a que cada componente escribe en ficheros de configuración.
Crear un nuevo proyecto
Existen dos formas de acceder a la creación de un proyecto.
- Ir la barra de menú "Archivo", desplegar el submenú "Nuevo" y pinchar en "Proyecto".
- Pulsar el botón derecho en el espacio de generación de proyectos, desplegar el menú "Nuevo" y pulsar en "Proyecto".
Una vez que se ha accedido nos muestra un asistente con las siguientes pantallas:
- Seleccionar la carpeta "MyMobileWeb" o "MyMobileWeb Examples" dependiendo de si se quiera hacer un proyecto nuevo, o bien utilizar uno de los ejemplos como base.
- Poner el nombre del proyecto que se va a crear.
- En el primer cuadro de texto,"Context Name", determinar el nombre del contexto con el que el nuevo proyecto aparecerá en el arranque de Tomcat.
- Si no queremos que aparezca en este fichero solo tenemos que quitar el tick "Cant update context definition"
- En el segundo cuadro de texto, se puede especificar el directorio donde se va a almacenar el proyecto, no es necesario cambiarlo.
- Para especificar otros valores del proyecto pulsar en el botón "Next".
- Una vez aquí, el sistema nos muestra una pantalla donde podemos determinar:
- El nombre del paquete base de la aplicación.
- El nombre del paquete base del manejador de eventos.
- Y si se activa la casilla de verificación, para poder especificar la primera OP que cargará la aplicación asi como una presentación básica que contiene un pequeño menú de ejemplo.
- Una vez finalizado el proceso, se obtendrá un árbol de directorios con la estructura siguiente:
Crear hoja de estilo (CSS)
- Acceder a la ventana de creación de CSS:
- Pulsar el botón derecho sobre el proyecto que deseamos crear la hoja de estilo, se desplegará un menú.Seleccionar el menú "MyMobileWeb" y dentro de el submenú "New Css".
- O bien, Desplegar el menú rápido de MyMobileWeb y seleccionar "Nueva CSS"
- A continuación aparecerá una pantalla donde podremos modificar:
- Nombre de familia o tecnología, solo con modificar el nombre se creara una nueva.
- Nombre de la hoja de estilo.
Crear OP (caso de uso)
- Pulsar el botón derecho sobre el proyecto que deseamos crear una OP (caso de uso), se desplegará un menú. Seleccionar el menú "MyMobileWeb" y dentro de el submenú "New OP".
- O bien, Desplegar el menú rápido de MyMobileWeb y seleccionar "Nueva OP"
- A continuación aparecerá una pantalla donde podremos modificar:
- Nombre de OP que vamos a generar.
- Se ha incorporado una casilla de verificación, para preguntar al usuario si desea crear un manejador de eventos para una determinada OP.
- Si deseamos crear una OP pulsar en el botón "Finish"
- Si deseamos crear una presentación podemos pulsar en el botón "Next"
- Cambios internos generados:
- Incorporar un manejador de eventos en WEB-INF/src/NombrePaqueteBase.event.NombreOP/NombreOpHandlerEvent.java
- Incorporar una constante en el fichero de constantes: WEB-INF/src/NombrePaqueteBase/MyOps.java
Crear una presentación
Existen dos formas de acceso:
- Pulsar el botón derecho sobre el proyecto que deseamos crear una presentación, se desplegará un menú.
- Seleccionar el menú "MyMobileWeb" y dentro de el submenú "New Op".
- A continuación aparecerá una pantalla donde podremos modificar:
- Nombre de OP que vamos a generar.
- Pulsar en el botón "Next"
- A continuación aparecerá otra pantalla donde podremos modificar:
- Nombre de OP que vamos a generar, usar el selector si se desea elegir una ya creada.
- Nombre de familia o tecnología a la que pertenece, usar el selector si se desea elegir una ya creada.
- Nombre de la presentación a generar.
- Pulsar en el botón "Finish"
- Pulsar el botón derecho sobre el proyecto que deseamos crear una presentación, se desplegará un menú.
- Seleccionar el menú "MyMobileWeb" y dentro de el submenú "New Presentation".
- A continuación aparecerá otra pantalla donde podremos modificar:
- Nombre de OP que vamos a generar, usar el selector si se desea elegir una ya creada.
- Nombre de familia o tecnología a la que pertenece, usar el selector si se desea elegir una ya creada.
- Nombre de la presentación a generar.
- Se ha incorporado una casilla de verificación, para preguntar al usuario si desea crear un manejador de eventos para una determinada Presentación.
- Pulsar en el botón "Finish"
- Cambios internos generados:
- Incorporar un manejador de eventos en WEB-INF/src/NombrePaqueteBase.event.NombreOP/NombrePresentacionHandlerEvent.java
- Incorporar una constante en el fichero de constantes: WEB-INF/src/NombrePaqueteBase/MyPresentations.java
Crear una OA (Operación de aplicación)
NOTA: Se trata de partes de código ejecutables que el programador podrá definir y posteriormente llamar al producirse algún evento, como cargar una presentación. Este código puede realizar acciones como cargar datos de una base de datos externa, poner datos en contexto, ...
- Pulsar el botón derecho sobre el proyecto que deseamos crear una OA (operación de aplicación), se desplegará un menú. Seleccionar el menú "MyMobileWeb" y dentro de el submenú "New OA".
- O bien, Desplegar el menú rápido de MyMobileWeb y seleccionar "Nueva OA"
- A continuación aparecerá una pantalla donde podremos modificar:
- Nombre de OA que vamos a generar.
- Si deseamos crear una OA pulsar en el botón "Finish"
- Cambios internos generados:
- Se creara un fichero en el paquete referido a las OAs y dentro de el una clase donde se podrá definir el comportamiento de dicha OA.
- Un fichero de MyOAs donde se declararan todas las OAs que tengamos hasta el momento como constantes.
- Se incorporarán al fichero de config/OAConfig.xml.
Borrar una OA (Operación de aplicación)
- Pulsar el botón derecho sobre la OA que se desea eliminar y del menu que se desplega elegir la opción "Borrar OA".
- Cambios internos generados:
- Se borrara un fichero en el paquete referido a las OAs y la clase donde estaría definido el comportamiento de dicha OA.
- Se borrara la constante relativa a la OA definida en el fichero de MyOAs.
- Se eliminara la linea relativa a la OA en el fichero de config/OAConfig.xml.
Generación de código
La plataforma MyMobileWeb nos permite generar código JSP, interpretable por los navegadores web, a partir de ficheros XML definidos como presentaciones y clases java definidas como OAs donde se especifica la funcionalidad.
Para aumentar la eficiencia de la generación se han definido 3 niveles a los que se puede generar JSPs. Cada nivel genera las presentaciones correspondientes al nivel jerárquico en el que nos encontremos.
Estos niveles se detallan a continuación.
Generar toda la aplicación
Generará el código relativo a la aplicación donde nos encontremos, para realizarlo se deberán seguir los siguientes pasos:
- Pulsar el botón derecho sobre el proyecto que se desee generar el código.
- Se desplegará un menú donde habrá que seleccionar el menú "MyMobileWeb" y dentro de el submenú "Generate Application".
Generar una OP
Generará el código relativo a la OP donde nos encontremos, para realizarlo se deberán seguir los siguientes pasos:
- Pulsar el botón derecho sobre la OP del proyecto que deseamos generar las páginas JSP, se desplegará un menú.
- Seleccionar el menú "MyMobileWeb" y dentro de el submenú "Generate OP".
Generar una Presentación
Generará el código relativo a la presentación donde nos encontremos, para realizarlo se deberán seguir los siguientes pasos:
- Guardar una presentación que se estaba editando (Control + S) o bien
- Pulsar el botón derecho sobre la presentación del proyecto que deseamos generar el código.
- Se desplegará un menú donde habrá que seleccionar el menú "MyMobileWeb" y dentro de el submenú "Generate Presentation".
Generar presentaciones vinculadas a CSS
Las hojas de estilo, en la que se define el aspecto de las páginas que se generaran, pueden ser modificadas y guardarse (Control + S) se generan automáticamente todas las presentaciones que estén asociadas a la misma.
Generador automático
Para facilitar la labor del desarrollador al guardar una presentación, (Control + S) se genera automáticamente el código JSP vinculado a esa presentación.
Si no se desea dotar de esta funcionalidad, se puede desactivar, en el menú "Window" preferencias y dentro de "MyMobileWeb" quitar los ticks de: "Generate presentations automatically".
Extractor de literales
Existe únicamente un nivel de extracción de literales, a nivel de aplicación, es decir, sobre todas las presentaciones. Antes de generar JSPs para aplicación, es conveniente extraer literales porque estos son necesarios para la generación de código JavaScript
La forma en la que se extraen los literales es la siguiente:
- Pulsar el botón derecho sobre el proyecto que deseamos extraer los literales de las páginas JSP, se desplegará un menú.
- Seleccionar el menú "MyMobileWeb" y dentro de el submenú "Literals Extractor".
Gestión de errores
La plataforma dispone de una herramienta de gestión de errores, para ayudar al desarrollador a escribir las presentaciones sintácticamente correctas.
Además de ello se recomienda instalar un plugin http://colorer.sourceforge.net/ para ayudar en la escritura correcta de los XML.
Para determinar si una presentación es correcta basta con guardarla, con esto se consigue que la plataforma valide su contenido y si encuentra un error nos muestra un mensaje donde detalla: el número de línea y la causa por la que no se ha generado. Un ejemplo de vista de errores es el siguiente:
Si no aparece por defecto la vista de errores de MyMobileWeb puede activarse pulsando en el menú: "Windows" -> "Show Views" -> "Other" y dentro de ella se elige la vista de "MyMobileWeb".
Información de dispositivos
La plataforma dispone de una herramienta externa para determinar las características propias de cada dispositivo móvil. La forma de acceder a esta herramienta es:
- Desplegar el menú del botón
- Seleccionar "Device information".
- Desplegar el menú del botón
- Esperar a que carge la siguiente aplicación:
Ejecución de emuladores
La plataforma dispone de una herramienta la correr las aplicaciones que se estén desarrollando en diferentes emuladores, por ahora se ha verificado su funcionamiento en:
- Explorer
- Firefox
- Open Ware
- Opera
- Safari
Para poder utilizarlos es necesario determinar donde están instalados cada uno de estos emuladores, esto de define en las preferencias de MyMobileWeb como se detalla la sección de configuración
Existe varias formas de correr las aplicaciones estas son:
- Forma 1:
- Asegurarse de que este un proyecto seleccionado.
- Desplegar el menú del botón
.
- Seleccionar un emulador de la lista.
- Forma 2:
- Sobre el proyecto que deseemos correr, pulsar al botón derecho.
- Seleccionar "MyMobileWeb".
- Pinchar en "Run emulator".
- NOTA: Esto hará que se ejecute el primer emulador de la lista de emuladores seleccionados en la parte de configuración
