Guía de Usuario Parte 4

Diseñador de Aplicaciones

Status Enterprise

Diseñador de Aplicaciones

Contenidos 1

Resumen ............................................................................................................................................... 4

1.1 1.1.1

Diseñadores HMI .......................................................................................................................... 4 Diseñador “Mimic” ..................................................................................................................... 4

1.1.2

Diseñador de Aplicaciones ........................................................................................................ 4

1.2 General .......................................................................................................................................... 4 2 Tecnología Compartida con el Diseñador de “Mimics” ................................................................... 5 2.1 Qué es lo mismo ........................................................................................................................... 5 2.2 Qué es diferente ............................................................................................................................ 5 3 Creación de Proyectos ........................................................................................................................ 6 3.1 3.2 3.3 3.3.1

Empezando ................................................................................................................................... 6 Creando un Proyecto en el Diseñador de Aplicaciones ............................................................... 7 Iconos de la Barra de Herramientas ............................................................................................. 8 Iconos de Administración de Archivos ...................................................................................... 9

3.4 Guardando un Proyecto ................................................................................................................ 9 4 Creación de “Mimics”........................................................................................................................ 11 4.1 Página Principal .......................................................................................................................... 11 4.2 Creando un “Mimic” ..................................................................................................................... 11 4.3 Enlace de Datos. ......................................................................................................................... 13 4.4 Compilando y Testeando un Proyecto ........................................................................................ 13 5 Implementando una Aplicación con Status Enterprise ................................................................. 15 5.1 5.2 5.3 5.4 5.5

Usando el Entorno de Ejecución de Aplicaciones ...................................................................... 15 Archivos de Proyecto .................................................................................................................. 15 Creando un Archivo de Configuración de Implementación. ....................................................... 16 Ejecutando el “Entorno de Ejecución de Aplcaciones” ............................................................... 18 Implementando en otras Máquinas ............................................................................................. 19

Status Enterprise

Diseñador de Aplicaciones

Imágenes y Tablas Imagen 1 – Cuadro de Diálogo de Inicio de Sesión .......................................................................................................6 Imagen 2 – Icono Nuevo Proyecto .................................................................................................................................7 Imagen 3 – Nuevo Proyecto en el Menu Archivo ...........................................................................................................7 Imagen 4 – Cuadro de Diálogo Nuevo Proyecto ............................................................................................................8 Imagen 5 – Árbol de Proyecto ........................................................................................................................................8 Imagen 6 – Barra de Herramientas del Diseñador de Aplicaciones ...............................................................................8 Imagen 7 – Iconos del Proyecto del Diseñador de Aplicaciones y de Administración de Archivos ................................9 Imagen 8 – Iconos de administración de archivo ...........................................................................................................9 Imagen 9 – Icon de Guardar Proyecto ...........................................................................................................................9 Imagen 10 – Salvar proyecto desde el menú de Archivo. ............................................................................................ 10 Imagen 11 – Cuadro de Diálogo Crear “Mimic” ............................................................................................................ 11 Imagen 12 – Cuadro de Diálogo Seleccionar Documento. .......................................................................................... 12 Imagen 13 – Captura de Pantalla de un Nuevo Mimic. ................................................................................................ 12 Imagen 14 – Panel de Enlace de Datos en el Diseñador ............................................................................................. 13 Imagen 15 – Iconos de Compilar y Ejecutar ................................................................................................................ 14 Imagen 16 – Archivos de Proyecto de Aplicaciones. ................................................................................................... 15 Imagen 17 – Archivos Generados cuando compilamos un proyecto. .......................................................................... 16 Imagen 18 – Cuadro de Dialogo de Entorno de Ejecución de Aplicaciones ................................................................ 17 Imagen 19 – Archivo de Configuración guardado con los ensamblados de los proyectos........................................... 18 Imagen 20 – Cuadro de Dialogo de Selección del Archivo de Configuración .............................................................. 18 Imagen 21 – Entorno de Ejecución de Aplicaciones Status ......................................................................................... 19

Status Enterprise

Diseñador de Aplicaciones

1 Resumen

1.1

Diseñadores HMI

1.1.1

Diseñador “Mimic”

Diseña de una vez para el cliente Windows o el navegador HTML5 Las pantallas son guardadas en el Modelo de Datos en Status Server No requerido despliegue Capacidades de “code behind” limitadas Pantallas visibles por del Navegador del Modelo (Model Browser) Pantallas enbebidas en aplicaciones de terceros Soporta controles personalizados WPF

1.1.2

Diseñador de Aplicaciones

Alto Rendimiento Extensibilidad ilimitada con .NET “code Behind” en C# o VB con Intelisense Pantallas compiladas en un ensamblado .NET y vistas por un Cliente Windows Programación de pantalla automatizada para señalización digital y otras aplicaciones Soporta controles WPF personalizados

Este documento define las lineas de diseño y creación de interfaces gráficas usando el Diseñador de APlicaciones. El Diseñador de “Mimics” fue tratado en la Parte 3 – Diseñador de “Mimics”. Para más información acerca de los términos frecuentes, definiciones y abreviaturas, por favor mira la parte 1 – Resumen y Conceptos Básicos.

1.2

General

Como con el Diseñador de “Mimics”, el diseñador de aplicaciones es usado para crear pantallas (Mimics) con gráficos y controles de interfaz de usuario, y enlazar estos gráficos y controles a datos en el Modelo de Objetos con enlaces a datos. Al contrario que el Diseñador de “Mimics”, el diseñador de Aplicaciones crea “mimics” como proyectos en Visual Studio .NET que pueden ser modificados y extendidos usando Visual Basic o Visual C#. Esto permite a los usuarios extender la funcionalidad de la aplicación para conseguir la personalización de requerimientos de usabilidad y funcionalidad.

Status Enterprise

Diseñador de Aplicaciones

2 Tecnología Compartida con el Diseñador de “Mimics” La experiencia de usuario trabajando con el diseñador de aplicaciones es extremadamente similar al diseñador de “Mimics”. Mucha de la tecnología utilizada en el Diseñador de “Mimics” es la misma tecnología usada en el Diseñador de Aplicaciones. Para reducir la cantidad de documentación y evitar la duplicación, la documentación del Diseñador de Aplicaciones, solo discutirá las cosas diferentes del Diseñador de “Mimics”. En general, la experiencia de edición de gráficos y los enlaces a datos es identica. La creación del “Mimic” y el despliegue es diferente. La documentación del Diseñador de “Mimics” está localizada en la parte 3 – Diseñador de “Mimics”

2.1

Qué es lo mismo

Añadir Controles Estructura del Documento “Toolbox” Panel de Propiedades Panel de Recursos Ventana de Previsualización Registro de Actividad Iconos para edición de gráficos Atajos del teclado Enlace a Datos Capacidades de Diseño Gráfico

2.2

Qué es diferente

Crea un proyecto de “Mimics” en vez de editarlos individualmente Los Proyectos son compilados en un ensamblado .NET, no son almacenados en el modelo de datos del Servidor Status Enterprise. Las pantallas tienen mayor rendimiento que en el Diseñador de “Mimics” Los proyectos del Diseñador de Aplicaciones son vistos por los clientes windows únicamente El Diseñador de Aplicaciones tiene capacidades extendidas de “code behind” .NET con C# o Visual Basic No tiene soporte HTML 5 con el Diseñador de Aplicaciones

Status Enterprise

Diseñador de Aplicaciones

3 Creación de Proyectos 3.1

Empezando

Cuando el Diseñador de Aplicaciones es abierto, se presentará el cuadro de diálogo de inicio de sesión en el servidor Status. Puedes iniciar sesión con los ajustes por defecto o configurarlos como quieras. Para más información sobre los ajustes de inicio de sesión en el Servidor Status, mira la parte 1 – Resumen y Conceptos Básicos.

Imagen 1 – Cuadro de Diálogo de Inicio de Sesión

Status Enterprise

3.2

Diseñador de Aplicaciones

Creando un Proyecto en el Diseñador de Aplicaciones

Un “Mimic” creado en el Diseñador de “Mimic” es guardado como un solo documento XAML, en el Diseñador de Aplicaciones nosotros creamos un proyecto. Estos proyectos pueden contener varios “Mimics” Para crear un proyecto, seleccione “Nuevo Proyecto” desde el menú Archivo o haga clic en el icono .

Imagen 2 – Icono Nuevo Proyecto

Imagen 3 – Nuevo Proyecto en el Menu Archivo El cuadro de diálogo de Nuevo Proyecto aparecerá, dandote la elección de los lenguajes de “scripting” sobre los que construir tu proyecto. Elige entre Visual Basic o Visual C#. Dale nombre a tu proyecto y elige la localización donde te gustaría guardarlo. Los proyectos son guardados en su máquina local, los proyctos guardados en la red no están soportados.

Status Enterprise

Diseñador de Aplicaciones

Imagen 4 – Cuadro de Diálogo Nuevo Proyecto

El Árbol del Proyecto aparecerá en un panel a la derecha, conteniendo una lista jerárquica colapsable, de todos los archivos asociados al presente proyecto.

Imagen 5 – Árbol de Proyecto Los documentos XAML (“Extensible Application Markup Language”) contine la descripción de la interfaz del usuario de cada pantalla del proyecto, esto son los “Mimics”. Los archivos .cs y .cb son para el “code behind” y no necesita editarlos menos que quiera extender su aplicación. El archivo de la página principal .xaml está en la pantalla principal de la aplicación. Hacer doble clic en “Mainpage.xaml” revela lasuperficie de diseño visual para crear sus gráficos. La página principal es utilizada normalmente par navegar entre diferentes pantallas de tu proyecto.

3.3

Iconos de la Barra de Herramientas

La barra de herramientas del diseñador de aplicaciones provee de varios iconos para hacer tareas de manera rápida y fácil. Algunos iconos están relacionados con la administración de archivos, otros con la manipulación de gráficos. Algunos iconos son contextuales y pueden ser inhabilitados en ciertas ocasiones. Si un icono no está inhabilitado, pasando tu cursor por encima revelará un consejo sobre para que sirve ese icono.

Imagen 6 – Barra de Herramientas del Diseñador de Aplicaciones

Status Enterprise

3.3.1

Diseñador de Aplicaciones

Iconos de Administración de Archivos

Imagen 7 – Iconos del Proyecto del Diseñador de Aplicaciones y de Administración de Archivos

Los iconos agrupados en la parte más a la izquierda de la barra de herramientas se usan para proveer varias funciones de administración de archivos:

Nuevo Proyecto – Haz clic en este icono para crear un nuevo proyecto. Abrir Proyecto – Haz clic en este icono para abrir un proyecto previamente guardado. Construir – Haz clic en este icono para construir el Proyecto actual. Construir y ejecutar – Haz clic en este icono para construir el Proyecto actual y abrirlo en el entorno de ejecución. Guardar Proyecto – Haz clic en este icono para guardar el proyecto actual. Exportar XAML – Haz clic en este icono para exportar el “raw XAML” que describe tu proyecto. Expotrar Raster – Haz clic en este icono para exportar tu “Mimic” como una imagen. Cerrar – Haz clic en esteicono para cerrar el proyecto de tu superficie de diseño. Imagen 8 – Iconos de administración de archivo

3.4

Guardando un Proyecto

Para guardar un proyecto en el Diseñador de Aplicaciones, puedes hacerlo desde el menú archivo o desde el icono de la barra de herramientas.

Imagen 9 – Icon de Guardar Proyecto

Status Enterprise

Diseñador de Aplicaciones

Imagen 10 – Salvar proyecto desde el menú de Archivo.

También puedes hacerlo con el atajo Ctrl + S para guardar. Cualquiera que sea la opción elegida, el Diseñador de Aplicaciones guardará tu proyecto en la localización con el nombre especificado antreriormente.

Status Enterprise

Diseñador de Aplicaciones

4 Creación de “Mimics” 4.1

Página Principal

Cuando un proyecto es creado, un “Mimic” es creado por defecto. Este “Mimic” es el “Mimic” de la Página Principal. Es usado para navegar hacia otros “Mimics” de tu proyecto. Es un “Mimic” regular, no una plantilla.

4.2

Creando un “Mimic”

Para crear un nuevo “mimic” en el proyecto, haz clic con el botón derecho sobre el proyecto en el Árbol y selecciona “Añadir Nuevo” o desde el Menú Archivo selecciona “Nuevo”. El primer cuadro de diálogo que se miestre te permitirá crear un “Mimic” regular o una plantilla. Si estás creando una plantilla necesitarás elegir también el Tipo que tendrá asociado.

Imagen 11 – Cuadro de Diálogo Crear “Mimic” Después de seleccionar el tipo de Mimic, otro cuadro de diálogo se mostrará donde tendrás que elegir el tamaño y tipo de lienzo para tu “mimic”.

Status Enterprise

Diseñador de Aplicaciones

Imagen 12 – Cuadro de Diálogo Seleccionar Documento.

Tu Mimic está creado y puedes empezar a añadir controles a la superficie de diseño.

Imagen 13 – Captura de Pantalla de un Nuevo Mimic.

Status Enterprise

4.3

Diseñador de Aplicaciones

Enlace de Datos.

Si tu”Mimic” es regular serás capaz de enlazar a Activos a través de Vistas de Sistema en la pestaña de Assets. Si tu “mimic” es una plantilla, tu enlazarás las propiedades normalmente a través del Árbol de Tipo Relativo, esto permitirá que tus enlaces trabajen con cualquier objeto que concuerde con el tipo de la plantilla. Los enlaces a través de las Vistas de Sistema son fijas, y siempre para un Activo Particular.

Imagen 14 – Panel de Enlace de Datos en el Diseñador

4.4

Compilando y Testeando un Proyecto

Para construir y ejecutar tu proyecto selecciona el icono de “Compilar y ejecutar” de la Barra de Herramientas.

Status Enterprise

Diseñador de Aplicaciones

Imagen 15 – Iconos de Compilar y Ejecutar Tu proyecto será compilado y el Cliente de Aplicaciones que hospeda tu proyecto será iniciado. Si tienes un “mimic” arrancado en la pantalla, el “mimic” será mostrado. Los “Mimics” que sean plantillas no tendrán ningún dato en el test, porque no están asociados a ningún Activo. Los “mimics” regulares mostrarán datos. Si no tienes ningún “mimc” abierto en la pantalla e inicias un test, la aplicación te preguntará por una pantalla para abrir.

Status Enterprise

Diseñador de Aplicaciones

5 Implementando una Aplicación con Status Enterprise 5.1

Usando el Entorno de Ejecución de Aplicaciones

Los proyectos Windows creados usando el Diseñador de Aplicaciones Status son compilados como un ensamblado .NET que es alojado por el entorno de ejecución de Aplicaciones una vez desplegado. El flujo de trabajo es el siguiente: Crear una Aplicación Status. Compilar tu proyecto en un ensamblado .NET usando el Diseñador de Aplicaciones. Crear una configuración de archivo del entorno de ejecución usando la Utilidad “Configuración del entorno de ejecución de Aplicaciones”. Usa tu ensamblado .NET en esta configuración. Inicia el entorno de ejecución de la Aplicación y carga el archivo de configuración.

5.2

Archivos de Proyecto

Los archivos para tu proyecto están localizados en el directorio que tu especificaste cuando el proyecto fué creado, estos archivos son necesarios únicamente para abrir tu proyecto.

Imagen 16 – Archivos de Proyecto de Aplicaciones. El ensamblado .NET compilado que contiene tu aplicación y tus “mimics” está localizado en el directorio “bin” (ensamblado de la aplicación).

Status Enterprise

Diseñador de Aplicaciones

Imagen 17 – Archivos Generados cuando compilamos un proyecto.

5.3

Creando un Archivo de Configuración de Implementación.

Inicia la Utilidad del Entorno de Ejecución de Aplicaciones. Selecciona el ensamblado de la aplicación que ha sido generado desde el Diseñador de Aplicaciones cuando tu proyecto fue compilado, y el “mimic” que tu quieres mostrar cuando se inicie el entorno de ejecución. Otras opciones que pueden ser configuradas bajo la pestaña de Inicio incluyen: Titulo – El titulo que se mostrará en la barra de título de la ventana Altura de la Ventana – Una altura fija para la Ventana que puede ser usada si la opción ‘Habilitar pantalla Completa’ está desmarcada. Anchura de la ventana – Una anchura fija para la Ventana que puede ser usada si la opción ‘Habilitar pantalla Completa’ está desmarcada Posición de la Ventana – Determina el emplazamiento de la ventana en tu pantalla si la opción “Habilitar pantalla completa está deshabilitada’. Habilitar pantalla Completa – Determina cuando el entorno de ejecución podrá abrir el proyecto a pantalla completa. Estirar Fondo – Estira el fondo del proyecto para cubrir todo el espacio de la aplicación cliente. Autodimensionamiento – Si está seleccionado envolverá tu proyecto con una caja que hará que cuando redimensiones, el contenido de tu pantalla se escale automáticamente. Deshabilitar Tecla de Windows – Si está seleccionado, el entorno de ejecución cliente no podrá ser minimizado o cerrado por la tecla Esc. La única manera de cerrar el cliente es presionando Ctrl + Alt + Supr y parar el proceso. Si estás utilizando escritorio remoto presiona Ctrl + Alt+ Fin para finalizar el proceso.

Status Enterprise

Diseñador de Aplicaciones

Imagen 18 – Cuadro de Dialogo de Entorno de Ejecución de Aplicaciones

Tu puedes también usar la pestaña del planificador para tener el ciclo de pantallas del entorno de ejecución automáticamente. El planificador te permite configurar el entorno de ejecución de Aplicaciones para hacer un ciclo a través de las pantallas especificadas con un intervalo de tiempo predeterminado. Esto puede ser util para señalización digital y otras aplicaciones donde una serie de pantallas deberían ser mostradas de acuerdo a un programa planificado. Si tu estás enlazando contenido en otra aplicación los ensamblados publicados desde el Diseñador de Aplicaciones usando Controles de Navegación y las rutas de estos ensamblados adicionales necesitarán ser añadidos a la lista de “Búsqueda de Rutas”. Cuando navegamos de una pantalla a otra del ensamblado, Status usa estos “Búsqueda de Rutas” para resolver la localización del ensamblado específico. Selecciona la pestaña para revelar esta opción. Guarda tu archivo de configuración, puede ser una buena idea guardarlo con el ensamblado de tu aplicación.

Status Enterprise

Diseñador de Aplicaciones

Imagen 19 – Archivo de Configuración guardado con los ensamblados de los proyectos.

5.4

Ejecutando el “Entorno de Ejecución de Aplcaciones”

Inicia el entorno de ejecución de aplicaciones, éste te preguntará por tu archivo de configuración. Selecciona el archivo que has guardado arriba.

Imagen 20 – Cuadro de Dialogo de Selección del Archivo de Configuración Selecciona “Continuar” y el Entorno de Ejecución de Aplicaciones cargará el ensamblado. El Entorno de Ejecución de Aplicaciones abrirá la pantalla que hayas designado como Pantalla Principal o la primera pantalla configurada en el planificador.

Status Enterprise

Diseñador de Aplicaciones

Imagen 21 – Entorno de Ejecución de Aplicaciones Status Si tienes configurados enlaces a datos, tus pantallas en el entorno de ejecución serán actualizadas con datos en vivo. Cualquier control de navegación que hayas puesto en tu pantalla estará activo, permitiendote navegar entre las pantallas que fueron incluidas durante el diseño del “mimic”.

5.5

Implementando en otras Máquinas

A fin de publicar tus pantallas para otros usuarios, los usuarios iniciarán el entorno de ejecución de Aplicaciones en sus máquinas, ellos necesitarán solo tu ensamblado y tu archivo de configuración a fin de ejecutar el proyecto. Los ensamblados de aplicaciones y sus correspondientes archivos de configuración pueden ser guardados en un recurso compartido de la red.