ALTAS MANUAL DE USUARIO PARA EL PROTOTIPADO DE APLICACIONES

ALTAS MANUAL DE USUARIO PARA EL PROTOTIPADO DE APLICACIONES Versión 1.0 Unidad de Arquitectura del Software

Hoja de Control Título Documento de Referencia Responsable Manual de usuario para el prototipado de aplicaciones NORMATIVA ATLAS Unidad de Arquitectura del Software Versión 1.0 Fecha Versión 04/02/2014 Registro de Cambios Versión Causa del Cambio Responsable del Cambio Fecha del Cambio 1.0 Versión inicial del documento Unidad de Arquitectura del Software 04/02/2014 2 de 16

Índice 1. INTRODUCCIÓN... 4 1.1. AUDIENCIA OBJETIVO... 4 1.2. CONOCIMIENTOS PREVIOS... 4 2. DESCRIPCIÓN... 4 3. INSTALACIÓN Y CONFIGURACIÓN... 5 3.1. PASO 1: AÑADIR LAS COLECCIONES DE COMPONENTES DE ICM... 5 3.2. PASO 2: DOCUMENTO DE EJEMPLO... 6 4. USO DE LA HERRAMIENTA PARA UN PROTOTIPO PROPIO... 7 4.1. USO BÁSICO DE LOS COMPONENTES... 7 4.2. CREACIÓN DE UNA PLANTILLA Y MENÚ... 7 4.3. CREACIÓN DE UNA PANTALLA CON SOLAPAS... 8 4.4. CREACIÓN DE UNA PANTALLA DE LISTADO... 8 4.5. CREACIÓN DE FORMULARIOS DE ALTA O MODIFICACIÓN... 10 4.6. OTROS COMPONENTES... 11 4.7. CREAR ENLACES ENTRE PÁGINAS... 12 4.8. EXPORTAR UN PROYECTO... 13 4.9. CREACIÓN DE COMPONENTES PROPIOS... 15 4.10. USO DE IMÁGENES COMO COMPONENTES O PARTE DE COMPONENTES... 16 5. ENLACES RELACIONADOS... 16 3 de 16

Contenido 1. INTRODUCCIÓN Para el desarrollo de prototipos de aplicaciones Atlas se ha seleccionado la herramienta Pencil. En este documento se describe la utilización de esta herramienta con las colecciones de objetos propios del framework Atlas que nos permitan crear un prototipo de aplicación lo más parecido a como va a quedar la aplicación cuando se desarrolle con este framework. 1.1. Audiencia objetivo El lector objetivo de este documento es toda aquella persona involucrada en proyectos de desarrollo de aplicaciones ATLAS. 1.2. Conocimientos Previos No se necesitan conocimientos previos específicos para el uso de esta aplicación 2. DESCRIPCIÓN Pencil es una herramienta Open Source de prototipado de aplicaciones sobre la que se han personalizado algunos componentes para adaptarla a proyectos ATLAS. Se han creado varios grupos de componentes para el prototipado de aplicaciones ATLAS, como son: Atlas_iconos: Contiene los iconos más usados en las aplicaciones Atlas Atlas_contenedores: Contiene las plantillas básicas, solapas y paneles Atlas_textos: Contiene los menús y textos para los formularios Atlas_listados: Contiene componentes para pantallas de paginación de resultados con filtros Atlas_formularios: Contiene componentes básicos para pantallas de alta y modificación Atlas_otros_componentes: Contiene componentes menos usados como árbol, captcha, código de barras. También se ha creado una plantilla básica de ejemplo que puede servir de partida para un nuevo proyecto. Proyecto_ejemplo.ep 4 de 16

3. INSTALACIÓN Y CONFIGURACIÓN La instalación del Software Evolus Pencil se puede hacer desde la web del producto: http://pencil.evolus.vn/ La versión con la que se han hecho los ejemplos es la 2.0.5 El programa se instala con las opciones por defecto. 3.1. Paso 1: Añadir las colecciones de componentes de ICM Una vez instalado el Pencil hay que añadir los componentes personalizados de ICM de la web de arquitectura. Bajar las últimas versiones de cada una de las colecciones. Habrá que instalar 6 colecciones de componentes: Atlas_iconos_Vx.zip Atlas_contenedores_Vx.zip Atlas_textos_Vx.zip Atlas_Listados_Vx.zip Atlas_formularios_Vx.zip Atlas_otros_componentes_Vx.zip Para instalarlos seleccionar la solapa My Stuff y con el botón de la derecha Import new private collection y seleccionar cada uno de los ficheros de componentes Saldrá un mensaje Are you sure want to install the unsigned collection: xxxx. Hay que pulsar Install 5 de 16

Al final de la instalación de componentes debería queda algo así: Framework Atlas 3.2. Paso 2: Documento de ejemplo Junto con las colecciones de componentes se ha hecho un proyecto de ejemplo que puede servir de base para otros proyectos o simplemente para aprender a usar las colecciones. Este proyecto se puede bajar de la web de Arquitectura Pulsar document / open y elegir el fichero Proyecto_ejemplo.ep. Este documento contiene varias solapas o páginas que pueden servir de ejemplo para la creación de un proyecto propio. Las páginas Plantilla HVC, Plantilla HC, Plantilla HVV y Plantilla C pueden duplicarse (botón derecho en la solapa y duplicate) para partir de una plantilla con alguna combinación de menús horizontales, verticales y/o visuales. Para la construcción de los menús se han usado los componentes de la colección Atlas_textos. La página Solapas es un ejemplo de uso de los componentes de solapas de la colección Atlas_contenedores La página Listados es un ejemplo de pantalla de listado y filtro de una tabla y de la colección Atlas_listados La página Formularios es un ejemplo de formularios de alta y modificación y de la colección Atlas_formularios La página Otros componentes es un ejemplo de uso de componentes Atlas menos comunes y de la colección Atlas_otros_componentes 6 de 16

4. USO DE LA HERRAMIENTA PARA UN PROTOTIPO PROPIO Framework Atlas 4.1. Uso básico de los componentes Todos los componentes se usan arrastrándolos desde alguna de las colecciones de My Stuff a la página activa. Además de los componentes de las colecciones de Atlas, en la solapa Collections hay muchos otros componentes que se pueden usar. Es recomendable en la medida de lo posible usar sólo los de My Stuff Cualquier componente que contenga texto (excepto Plantilla HVC y Plantilla C), este texto puede ser editado pulsando doble click sobre el mismo. La mayoría de los componentes son agrupaciones de otros más sencillos. En algún caso puede ser útil pulsar botón derecho / ungroup para modificar o eliminar alguno de sus componentes básicos. Algunos componentes, como por ejemplo las plantilla Plantilla HVC o Plantilla C se pueden bloquear para que ya no se muevan de la posición en la que se han puesto. Esto se puede hacer con botón derecho / locked 4.2. Creación de una plantilla y menú Lo primero que se debería crear al hacer un proyecto o una parte del mismo (un grupo de pantallas) es partir de una de las plantillas de la colección Atlas_contenedores. Plantila HVC es una plantilla para menús horizontales y verticales Plantilla C es una plantilla para menús sólo horizontales Estas plantilla ya están capturadas a la resolución 1024x768 y esa debería ser la resolución a la que se diseñen todos prototipos. Si se quiere, se puede partir de una de las solapas o páginas del proyecto del Proyecto_ejemplo.ep que está en la web de arquitectura. En este proyecto ya existen 4 páginas Plantilla HVC, Plantilla HC, Plantilla HVV y Plantilla C que pueden duplicarse (botón derecho en la solapa y duplicate) para partir de una plantilla con alguna combinación de menús horizontales, verticales y/o visuales. Un plantilla básica suele tener el menú de la aplicación, un rastro de migas, una etiqueta Titulo menú, una Subtitulo menú, un contenedor donde va a estar el contenido de la pantalla y dentro de este contenedor un etiqueta Titulo formulario. Todos estos componentes están en la colección Atlas_textos 7 de 16

4.3. Creación de una pantalla con solapas Para la creación de solapas se han creado 4 componentes en la colección Atlas_contenedores, en la que hay componentes de Solapa normal, Solapa activa, Solapa deshabilitada y Panel para solapas. En el Proyecto_ejemplo.ep se ha creado la página Solapas como ejemplo de creación de solapas. 4.4. Creación de una pantalla de listado En la colección Atlas_listados hay componentes para la creación de listados similares a los de las aplicaciones de Atlas. Para crear una tabla arrastrar el componente Tabla la página de trabajo. Una vez allí pulsar botón derecho / propiedades y en el campo TEXT introducir los distintos campos de la tabla separados por un y las distintas filas separadas por un retorno de carro. 8 de 16

Una vez creada la tabla y añadidos algunos registros de prueba, para completar el aspecto de la tabla se puede añadir el componente Barra paginación justo debajo de la tabla 9 de 16

Después de la creación de la tabla, si el listado a crear tiene filtros se pueden incluir alguno de los componentes de Filtro... existentes en la colección Atlas_listados como por ejemplo: En el Proyecto_ejemplo.ep la solapa Listados es un ejemplo de lo explicado en este punto. 4.5. Creación de formularios de alta o modificación Para la creación de pantallas de alta o modificación se ha creado una colección Atlas_formularios, en la que hay componentes para la creación de formularios de alta o modificación. Existen componentes para campos normales, con listas de valores, con fechas, combos de valores o componente Domi. Cada uno de ellos con formato normal y obligatorio. En el Proyecto_ejemplo.ep la solapa Formularios es un ejemplo de lo explicado en este punto: 10 de 16

Para simular que al pulsar en algún campo con lista de valores se abre una lista de valores se han creado dos listas de valores una estrecha y una ancha: Haciendo doble click sobre las listas de valores se podrán editar los registros a mostrar en la tabla 4.6. Otros componentes Para los componentes menos usados en Atlas se ha creado una colección Atlas_otros_componentes que contienen componentes como: Árbol de selección Componentes de captcha Códigos de barras Componente visor de mapas Para el árbol de selección hay 4 elementos: Nodo menos, nodo más, nodo línea vertical y nodo final: Con ellos se puede hacer un árbol como el de este ejemplo: 11 de 16

Un ejemplo de uso de estos componentes se puede ver en la solapa Otros componentes del Proyecto_ejemplo.ep: 4.7. Crear enlaces entre páginas Cuando se crea un componente se puede enlazar de tal forma que al pulsar en el componente vaya a otra de las páginas definidas en nuestro proyecto. Para hacer un enlace pulsar en el componente que desea Botón derecho / link / <pagina a la que linkar> ATENCIÓN Los enlaces creados de este modo sólo funcionan en el proyecto exportado en formato HTML 12 de 16

4.8. Exportar un proyecto Una vez creado un proyecto con varias páginas (o solapas) este se puede exportar a varios formatos. El formato más común para exportar los proyectos es HTML. Este formato genera un único HTML con una captura de pantalla para cada página definida y con hiperlinks en los componentes que hayamos puesto un link de una página a otra. Para exportar a HTML pulsar en el menú Document / Export document aparecerá el Wizard de exportación y seleccionar Single web page En la siguiente pantalla seleccionar All pages in the documet 13 de 16

En la siguiente pantalla seleccionar Default HTML Template y elegir la carpeta destino donde exportar: 14 de 16

4.9. Creación de componentes propios Si en un proyecto se crea algún grupo de componentes que se puede reutilizar es posible agruparlos, seleccionándolos todos y pulsando botón derecho / group para agruparlos en un componente propio. Después se puede pulsar botón derecho / add to my collections y luego create new private collection... y darle un nombre. ATENCIÓN Los componentes propios de un proyecto se deben agregar a una colección propia y no a alguna de la colecciones de ATLAS ya que en el futuro pueden salir nuevas versiones de las colecciones de ATLAS y al importar los nuevos se machacarían los componentes que se han hecho para el proyecto. Comparte tus componentes Si en algún proyecto creas componentes que puedan ser de utilidad a otras personas y quieres compartirlos puedes enviarlos a ICM_ARQUITECTURA_SW@madrid.org y si los vemos de utilidad los integraremos en próximas versiones de las colecciones Atlas para Pencil 15 de 16

4.10. Uso de imágenes como componentes o parte de componentes Framework Atlas Cualquier icono, o imagen se puede convertir en un componente o parte de un componente simplemante arrastrado la imagen desde el explorador a una página de trabajo de Pencil. Para que luego ese componente no dependa del fichero local del que partíamos (el fichero gif, o jpg) hay que pulsar botón de la derecha / actions / convert to embebed y así la imagen irá embebida en el componente y no apuntando a un fichero en nuestro disco local 5. ENLACES RELACIONADOS Producto Página oficial Evolus Pencil URL http://pencil.evolus.vn/ 16 de 16