Download - ATLAS MUS Prototipado
-
ALTAS
MANUAL DE USUARIO PARA EL PROTOTIPADO DE
APLICACIONES
Versin 1.0
Unidad de Arquitectura del Software
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
2 de 16
Hoja de Control
Ttulo Manual de usuario para el prototipado de aplicaciones
Documento de
Referencia NORMATIVA ATLAS
Responsable Unidad de Arquitectura del Software
Versin 1.0 Fecha Versin 04/02/2014
Registro de Cambios
Versin Causa del Cambio Responsable del Cambio Fecha del Cambio
1.0 Versin inicial del documento Unidad de Arquitectura del Software 04/02/2014
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
3 de 16
ndice
1. INTRODUCCIN ................................................................................................................................................................ 4
1.1. AUDIENCIA OBJETIVO ...................................................................................................................................................... 4 1.2. CONOCIMIENTOS PREVIOS ............................................................................................................................................... 4
2. DESCRIPCIN .................................................................................................................................................................... 4
3. INSTALACIN Y CONFIGURACIN............................................................................................................................. 5
3.1. PASO 1: AADIR 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 BSICO DE LOS COMPONENTES ................................................................................................................................. 7 4.2. CREACIN DE UNA PLANTILLA Y MEN ........................................................................................................................... 7 4.3. CREACIN DE UNA PANTALLA CON SOLAPAS ................................................................................................................... 8 4.4. CREACIN DE UNA PANTALLA DE LISTADO ...................................................................................................................... 8 4.5. CREACIN DE FORMULARIOS DE ALTA O MODIFICACIN ............................................................................................... 10 4.6. OTROS COMPONENTES ................................................................................................................................................... 11 4.7. CREAR ENLACES ENTRE PGINAS................................................................................................................................... 12 4.8. EXPORTAR UN PROYECTO .............................................................................................................................................. 13 4.9. CREACIN DE COMPONENTES PROPIOS .......................................................................................................................... 15 4.10. USO DE IMGENES COMO COMPONENTES O PARTE DE COMPONENTES ....................................................................... 16
5. ENLACES RELACIONADOS .......................................................................................................................................... 16
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
4 de 16
Contenido
1. INTRODUCCIN
Para el desarrollo de prototipos de aplicaciones Atlas se ha seleccionado la herramienta Pencil. En este documento
se describe la utilizacin de esta herramienta con las colecciones de objetos propios del framework Atlas que nos
permitan crear un prototipo de aplicacin lo ms parecido a como va a quedar la aplicacin 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 especficos para el uso de esta aplicacin
2. DESCRIPCIN
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 ms usados en las aplicaciones Atlas
Atlas_contenedores: Contiene las plantillas bsicas, solapas y paneles
Atlas_textos: Contiene los mens y textos para los formularios
Atlas_listados: Contiene componentes para pantallas de paginacin de resultados con filtros
Atlas_formularios: Contiene componentes bsicos para pantallas de alta y modificacin
Atlas_otros_componentes: Contiene componentes menos usados como rbol, captcha, cdigo de barras.
Tambin se ha creado una plantilla bsica de ejemplo que puede servir de partida para un nuevo proyecto.
Proyecto_ejemplo.ep
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
5 de 16
3. INSTALACIN Y CONFIGURACIN
La instalacin del Software Evolus Pencil se puede hacer desde la web del producto: http://pencil.evolus.vn/
La versin 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: Aadir las colecciones de componentes de ICM
Una vez instalado el Pencil hay que aadir 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 botn 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
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
6 de 16
Al final de la instalacin de componentes debera 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
pginas que pueden servir de ejemplo para la creacin de un proyecto propio.
Las pginas Plantilla HVC, Plantilla HC, Plantilla HVV y Plantilla C pueden duplicarse (botn derecho en la
solapa y duplicate) para partir de una plantilla con alguna combinacin de mens horizontales, verticales y/o
visuales. Para la construccin de los mens se han usado los componentes de la coleccin Atlas_textos.
La pgina Solapas es un ejemplo de uso de los componentes de solapas de la coleccin Atlas_contenedores
La pgina Listados es un ejemplo de pantalla de listado y filtro de una tabla y de la coleccin Atlas_listados
La pgina Formularios es un ejemplo de formularios de alta y modificacin y de la coleccin Atlas_formularios
La pgina Otros componentes es un ejemplo de uso de componentes Atlas menos comunes y de la coleccin
Atlas_otros_componentes
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
7 de 16
4. USO DE LA HERRAMIENTA PARA UN PROTOTIPO PROPIO
4.1. Uso bsico de los componentes
Todos los componentes se usan arrastrndolos desde alguna de las colecciones de My Stuff a la pgina activa.
Adems 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 slo 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 mayora de los componentes son agrupaciones de otros ms sencillos. En algn caso puede ser til pulsar
botn derecho / ungroup para modificar o eliminar alguno de sus componentes bsicos.
Algunos componentes, como por ejemplo las plantilla Plantilla HVC o Plantilla C se pueden bloquear para que ya
no se muevan de la posicin en la que se han puesto. Esto se puede hacer con botn derecho / locked
4.2. Creacin de una plantilla y men
Lo primero que se debera crear al hacer un proyecto o una parte del mismo (un grupo de pantallas) es partir de
una de las plantillas de la coleccin Atlas_contenedores.
Plantila HVC es una plantilla para mens horizontales y verticales
Plantilla C es una plantilla para mens slo horizontales
Estas plantilla ya estn capturadas a la resolucin 1024x768 y esa debera ser la resolucin a la que se diseen
todos prototipos. Si se quiere, se puede partir de una de las solapas o pginas del proyecto del
Proyecto_ejemplo.ep que est en la web de arquitectura.
En este proyecto ya existen 4 pginas Plantilla HVC, Plantilla HC, Plantilla HVV y Plantilla C que pueden
duplicarse (botn derecho en la solapa y duplicate) para partir de una plantilla con alguna combinacin de mens
horizontales, verticales y/o visuales.
Un plantilla bsica suele tener el men de la aplicacin, 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 estn en la coleccin Atlas_textos
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
8 de 16
4.3. Creacin de una pantalla con solapas
Para la creacin de solapas se han creado 4 componentes en la coleccin 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 pgina Solapas como ejemplo de creacin de solapas.
4.4. Creacin de una pantalla de listado
En la coleccin Atlas_listados hay componentes para la creacin de listados similares a los de las aplicaciones de
Atlas.
Para crear una tabla arrastrar el componente Tabla la pgina de trabajo. Una vez all pulsar botn 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.
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
9 de 16
Una vez creada la tabla y aadidos algunos registros de prueba, para completar el aspecto de la tabla se puede aadir el componente Barra paginacin justo debajo de la tabla
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
10 de 16
Despus de la creacin de la tabla, si el listado a crear tiene filtros se pueden incluir alguno de los componentes de Filtro ... existentes en la coleccin Atlas_listados como por ejemplo:
En el Proyecto_ejemplo.ep la solapa Listados es un ejemplo de lo explicado en este punto. 4.5. Creacin de formularios de alta o modificacin
Para la creacin de pantallas de alta o modificacin se ha creado una coleccin Atlas_formularios, en la que hay
componentes para la creacin de formularios de alta o modificacin.
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:
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
11 de 16
Para simular que al pulsar en algn 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 podrn editar los registros a mostrar en la tabla 4.6. Otros componentes
Para los componentes menos usados en Atlas se ha creado una coleccin Atlas_otros_componentes que contienen componentes como:
rbol de seleccin
Componentes de captcha
Cdigos de barras
Componente visor de mapas Para el rbol de seleccin hay 4 elementos: Nodo menos, nodo ms, nodo lnea vertical y nodo final:
Con ellos se puede hacer un rbol como el de este ejemplo:
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
12 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 pginas
Cuando se crea un componente se puede enlazar de tal forma que al pulsar en el componente vaya a otra de las
pginas definidas en nuestro proyecto.
Para hacer un enlace pulsar en el componente que desea Botn derecho / link /
ATENCIN
Los enlaces creados de este modo slo funcionan en el proyecto exportado en formato HTML
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
13 de 16
4.8. Exportar un proyecto
Una vez creado un proyecto con varias pginas (o solapas) este se puede exportar a varios formatos.
El formato ms comn para exportar los proyectos es HTML. Este formato genera un nico HTML con una captura
de pantalla para cada pgina definida y con hiperlinks en los componentes que hayamos puesto un link de una
pgina a otra.
Para exportar a HTML pulsar en el men Document / Export document aparecer el Wizard de exportacin y
seleccionar Single web page
En la siguiente pantalla seleccionar All pages in the documet
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
14 de 16
En la siguiente pantalla seleccionar Default HTML Template y elegir la carpeta destino donde exportar:
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
15 de 16
4.9. Creacin de componentes propios
Si en un proyecto se crea algn grupo de componentes que se puede reutilizar es posible agruparlos,
seleccionndolos todos y pulsando botn derecho / group para agruparlos en un componente propio. Despus se
puede pulsar botn derecho / add to my collections y luego create new private collection... y darle un nombre.
ATENCIN
Los componentes propios de un proyecto se deben agregar a una coleccin 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 machacaran los componentes
que se han hecho para el proyecto.
Comparte tus componentes
Si en algn 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 prximas versiones de las colecciones Atlas para Pencil
-
Framework Atlas
Manual de Usuario para el prototipado de aplicaciones
16 de 16
4.10. Uso de imgenes 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 pgina de trabajo de Pencil.
Para que luego ese componente no dependa del fichero local del que partamos (el fichero gif, o jpg) hay
que pulsar botn 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
Pgina oficial Evolus Pencil http://pencil.evolus.vn/