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


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


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


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


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


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


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


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


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


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


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


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


14 de 16

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

Framework Atlas


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


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/

atlas mus prototipado

Documents