ALTAS MANUAL DE USUARIO PARA EL PROTOTIPADO DE

ALTAS
MANUAL DE USUARIO
PARA EL PROTOTIPADO DE
APLICACIONES
Versión 1.0
Unidad de Arquitectura del Software
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
Hoja de Control
Título
Manual de usuario para el prototipado de aplicaciones
Documento de
Referencia
NORMATIVA ATLAS
Responsable
Unidad de Arquitectura del Software
Versión
1.0
Fecha Versión
04/02/2014
Registro de Cambios
Versión
1.0
Causa del Cambio
Versión inicial del documento
Responsable del Cambio
Unidad de Arquitectura del Software
2 de 16
Fecha del Cambio
04/02/2014
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
Índice
1.
INTRODUCCIÓN ................................................................................................................................................................ 4
1.1.
1.2.
AUDIENCIA OBJETIVO ...................................................................................................................................................... 4
CONOCIMIENTOS PREVIOS ............................................................................................................................................... 4
2.
DESCRIPCIÓN .................................................................................................................................................................... 4
3.
INSTALACIÓN Y CONFIGURACIÓN............................................................................................................................. 5
3.1.
3.2.
4.
USO DE LA HERRAMIENTA PARA UN PROTOTIPO PROPIO ............................................................................... 7
4.1.
4.2.
4.3.
4.4.
4.5.
4.6.
4.7.
4.8.
4.9.
4.10.
5.
PASO 1: AÑADIR LAS COLECCIONES DE COMPONENTES DE ICM ...................................................................................... 5
PASO 2: DOCUMENTO DE EJEMPLO .................................................................................................................................. 6
USO BÁSICO DE LOS COMPONENTES ................................................................................................................................. 7
CREACIÓN DE UNA PLANTILLA Y MENÚ ........................................................................................................................... 7
CREACIÓN DE UNA PANTALLA CON SOLAPAS ................................................................................................................... 8
CREACIÓN DE UNA PANTALLA DE LISTADO ...................................................................................................................... 8
CREACIÓN DE FORMULARIOS DE ALTA O MODIFICACIÓN ............................................................................................... 10
OTROS COMPONENTES ................................................................................................................................................... 11
CREAR ENLACES ENTRE PÁGINAS................................................................................................................................... 12
EXPORTAR UN PROYECTO .............................................................................................................................................. 13
CREACIÓN DE COMPONENTES PROPIOS .......................................................................................................................... 15
USO DE IMÁGENES COMO COMPONENTES O PARTE DE COMPONENTES ....................................................................... 16
ENLACES RELACIONADOS .......................................................................................................................................... 16
3 de 16
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
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
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
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
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
Al final de la instalación de componentes debería queda algo así:
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
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
4. USO DE LA HERRAMIENTA PARA UN PROTOTIPO PROPIO
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
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
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
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
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
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
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
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
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
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
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
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
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
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
En la siguiente pantalla seleccionar “Default HTML Template” y elegir la carpeta destino donde exportar:
14 de 16
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
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 [email protected] y si los vemos
de utilidad los integraremos en próximas versiones de las colecciones Atlas para Pencil
15 de 16
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
4.10.
Uso de imágenes como componentes o parte de componentes
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
URL
Página oficial Evolus Pencil
http://pencil.evolus.vn/
16 de 16