Guía de Usuario Parte 4. Diseñador de Aplicaciones

Transcripción

1 Guía de Usuario Parte 4

2 Contenidos 1 Resumen Diseñadores HMI Diseñador Mimic General Tecnología Compartida con el Diseñador de Mimics Qué es lo mismo Qué es diferente Creación de Proyectos Empezando Creando un Proyecto en el Iconos de la Barra de Herramientas Iconos de Administración de Archivos Guardando un Proyecto Creación de Mimics Página Principal Creando un Mimic Enlace de Datos Compilando y Testeando un Proyecto Implementando una Aplicación con Status Enterprise Usando el Entorno de Ejecución de Aplicaciones Archivos de Proyecto Creando un Archivo de Configuración de Implementación Ejecutando el Entorno de Ejecución de Aplcaciones Implementando en otras Máquinas... 19

3 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... 8 Imagen 7 Iconos del Proyecto del 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 Imagen 11 Cuadro de Diálogo Crear Mimic Imagen 12 Cuadro de Diálogo Seleccionar Documento Imagen 13 Captura de Pantalla de un Nuevo Mimic Imagen 14 Panel de Enlace de Datos en el Diseñador Imagen 15 Iconos de Compilar y Ejecutar Imagen 16 Archivos de Proyecto de Aplicaciones Imagen 17 Archivos Generados cuando compilamos un proyecto Imagen 18 Cuadro de Dialogo de Entorno de Ejecución de Aplicaciones Imagen 19 Archivo de Configuración guardado con los ensamblados de los proyectos Imagen 20 Cuadro de Dialogo de Selección del Archivo de Configuración Imagen 21 Entorno de Ejecución de Aplicaciones Status... 19

4 1 Resumen 1.1 Diseñadores HMI 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 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.

5 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. 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 son vistos por los clientes windows únicamente El tiene capacidades extendidas de code behind.net con C# o Visual Basic No tiene soporte HTML 5 con el

6 3 Creación de Proyectos 3.1 Empezando Cuando el 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

7 3.2 Creando un Proyecto en el Un Mimic creado en el Diseñador de Mimic es guardado como un solo documento XAML, en el 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 <Nuevo Proyecto>. 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.

8 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

9 3.3.1 Iconos de Administración de Archivos Imagen 7 Iconos del Proyecto del 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, puedes hacerlo desde el menú archivo o desde el icono de la barra de herramientas. Imagen 9 Icon de Guardar Proyecto

10 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 guardará tu proyecto en la localización con el nombre especificado antreriormente.

11 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.

12 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.

13 4.3 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.

14 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.

15 5 Implementando una Aplicación con Status Enterprise 5.1 Usando el Entorno de Ejecución de Aplicaciones Los proyectos Windows creados usando el 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. 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).

16 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 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.

17 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 <Búsqueda de Rutas> para revelar esta opción. Guarda tu archivo de configuración, puede ser una buena idea guardarlo con el ensamblado de tu aplicación.

18 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.

19 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.