Temario 23/09/2008. UNIVERSIDAD ABIERTA INTERAMERICANA Facultad de Tecnología Informática. Luis Perdomo Rocio Gimenez

Transcripción

1 UNIVERSIDAD ABIERTA INTERAMERICANA Facultad de Tecnología Informática Luis Perdomo Rocio Gimenez Temario 1. Qué es WPF? 2. Objetivo de WPF 3. Funcionalidades Básicas 4. Presentación de un problema 5. Principales dificultades 6. Solución al problema 7. Ejemplos de interfaz 8. XAML 9. Para que sirve XAML? 10. Modelo de aplicación 11. Application 12. Interfaz de usuario 13. Estilos de Interfaz 14. Diseño y controles 1

2 Temario 15. Estilos 16. Plantillas 17. Texto 18. Documentos 19. Imágenes 20. Video y audio 21. Gráficos Bidimensionales 22. Gráficos Tridimensionales 23. Animación 24. Automatización de interfaces de usuario 25. Herramientas para WPF 26. Fin Qué es WPF? Tecnologías de Microsoft y uno de los pilares de Windows Vista. WPF potencia las capacidades de desarrollo de interfaces de interacción integrando y ampliando las mejores características de las aplicaciones Windows y Web 2

3 Objetivo de WPF Proporcionar avances en el entorno de Windows. WPF se incluye en la versión 3.0 de Microsoft.NET Framework Permite crear interfaces que incorporan documentos, componentes multimedia, gráficos bidimensionales y tridimensionales, animaciones, características tipo web, etc. WPF esta disponible para Windows Vista, Windows XP y Windows Server 2003 Funcionalidades Básicas 1/2 WPF ofrece una amplia infraestructura y potencialidad gráfica con la que se podrán desarrollar aplicaciones atractiva apariencia, con mayores y más funcionales facilidades de interacción que incluyen animación, vídeo, audio, documentos, navegación, gráfica 3D. 3

4 Funcionalidades Básicas 2/2 WPF separa, con el lenguaje declarativo XAML y los lenguajes de programación de.net, la interfaz de interacción de la lógica del negocio, propiciando una arquitectura Modelo Vista Controlador para el desarrollo de las aplicaciones. Presentación de un problema Presentación de imágenes y texto sobre los pacientes. Presentación y actualización de gráficos bidimensionales sobre las señales vitales de los pacientes (ritmo cardíaco, presión arterial, etc.). Presentación de vistas y superposiciones tridimensionales de la información de los pacientes. Presentación de vídeo para ecografías y otros diagnósticos que admita anotaciones por parte de médicos y enfermeras. Posibilidad para el personal del hospital de leer y realizar anotaciones en los documentos de descripción de los pacientes y sus condiciones médicas. Ejecución como aplicación de Windows para ofrecer una funcionalidad total a los empleados del hospital y en una aplicación del explorador web con restricciones de seguridad, con el fin de ofrecer un acceso más limitado a través de Internet al personal remoto. 4

5 Principales dificultades Imágenes y video Trabajo separado de los diseñadores y los desarrolladores Creación de dos implementaciones diferentes Solución del problema 1/2 WPF ofrece Plataforma unificada para interfaces de usuario modernas Posibilidad para desarrolladores y diseñadores de trabajar conjuntamente Tecnología común para interfaces de usuario de Windows y explorador web 5

6 Solución del problema 2/2 Interfaz gráfica, como formularios y controles Documentos en pantalla Documentos de formato fijo Imágenes Vídeo y audio Gráficos bidimensionales Gráficos tridimensionales Ejemplos de Interfaz de usuario 1/3 6

7 Ejemplo de Interfaz de usuario 2/3 Ejemplo de Interfaz de usuario 3/3 7

8 XAML El lenguaje de marcado de aplicaciones extensible define elementos XML, como Button, TextBox, Label, entre muchos otros, para especificar exactamente la apariencia de las interfaces de usuario. Sus elementos suelen disponer de atributos, lo que permite definir varias opciones. <Button Background="Red"> No </Button> Button btn = new Button(); btn.background = Brushes.Red; btn.content = "No"; 8

9 Para que sirve XAML? XAML ofrece un método basado en herramientas muy sencillo para describir interfaces de usuario y, de este modo, permite una mejor colaboración entre desarrolladores y diseñadores Modelo de aplicación WPF organiza su funcionalidad en un grupo de espacios de nombres, contenidos todos a su vez en el espacio de nombres System.Windows. 9

10 Application 1/2 Clase que proporciona servicios comunes útiles para cualquier aplicación Contiene métodos estándar, como Run, que permite iniciar la aplicación, y Shutdown, para finalizarla. Los objetos Application se pueden crear con XAML, por medio del elemento Application, o con código, mediante la clase Application. Application 2/2 <Application xmlns= " StartupUri xmlns:x=" StartupUri="Page1.xaml" x:class="example.simpleapp">... Class </Application> 10

11 Interfaz de Usuario Windows Interfaz de Usuario NavigationWindow Estilos de interfaz 1/2 Window: proporciona funciones basadas en ventanas básicas y se suele usar en aplicaciones de WPF que no usan una interfaz de navegación. 11

12 Estilos de Interfaz 2/2 NavegationWindow: amplía la clase básica Window para ofrecer compatibilidad con tareas de navegación. Esta compatibilidad incluye el método Navigate, que permite a la aplicación pasar a una nueva página, un diario que contiene el historial de navegación del usuario y varios eventos referentes a la navegación. Diseño y controles Con el fin de ordenar las diferentes partes de que se compone una interfaz, las aplicaciones de WPF presentan paneles de diseño. DockPanel permite colocar los elementos secundarios en los bordes del panel Grid supone la colocación precisa de estos elementos en una cuadrícula. Canvas ofrece al desarrollador la posibilidad de colocar estos elementos en cualquier lugar dentro de los límites del panel. 12

13 Estilos Mediante el elemento Style el creador de una aplicación de WPF puede definir uno o varios aspectos de la apariencia de un elemento particular y, posteriormente, aplicar el mismo estilo una y otra vez Plantillas 1/2 Plantillas de datos: permiten el uso del elemento DataTemplate de XAML para especificar conjuntos de características relacionadas con la apariencia de datos. 13

14 Plantillas 2/2 Plantillas de control: permiten el uso del elemento ControlTemplate de XAML para definir la apariencia de controles. Texto Objetivo 1/2 El objetivo de WPF es dotar al texto en pantalla de la legibilidad característica del texto impreso para poner fin a esta distinción 14

15 Texto Solución 2/2 WPF ofrece compatibilidad con las fuentes OpenType estándar de la industria, lo que permite el uso de las bibliotecas de fuentes existentes. Documentos 1/3 Documentos fijos Documentos Documentos de flujo 15

16 Documentos fijos 2/3 Los documentos fijos presentan la misma apariencia tanto en pantalla como en formato impreso El contenido de los documentos fijos se puede especificar mediante el elemento FixedDocument de XAML Documentos de flujo 3/3 Se encuentra ideados únicamente para la pantalla. Con el fin de que su contenido resulte lo más claro posible, la apariencia del texto y de los gráficos se puede ajustar automáticamente al tamaño de la ventana, entre otros factores. Los documentos de flujo vienen definidos por el elemento FlowDocument de XAML 16

17 Imágenes La presentación de las imágenes se suele llevar a cabo mediante el control Image El control Image de WPF admite imágenes almacenadas en varios formatos, entre ellos, JPEG, BMP, TIFF, GIF y PNG Video y audio WPF ofrece compatibilidad integrada con ambos. Esta compatibilidad depende del control MediaElement. 17

18 Gráficos Bidimensionales 1/2 Los gráficos 2D y 3D se pueden crear directamente en XAML o en código de procedimiento con las bibliotecas de WPF. Como sucede con el resto en WPF, los elementos usados son simplemente una parte más del árbol visual de las aplicaciones. Gráficos Bidimensionales 2/2 En lo que respecta a gráficos bidimensionales, WPF define un grupo de formas que las aplicaciones pueden usar para crear imágenes. Son los siguientes: Line Ellipse Rectangle PolygonPolylinePath 18

19 Gráficos Tridimensionales 1/2 Para mostrar gráficos 3D en WPF, la aplicación usa el control Viewport3D que, básicamente, ofrece una ventana al mundo tridimensional que describe esta aplicación. El control Viewport3D se puede usar en cualquier parte de las interfaces de WPF, lo que permite la representación de gráficos 3D allí donde se necesiten. Gráficos Tridimensionales 2/2 Para crear una escena tridimensional, el desarrollador describe uno o más modelos y, a continuación, especifica el modo de iluminación y visualización de éstos 19

20 Animación 1/2 Las animaciones se pueden aplicar a muchos aspectos de interfaz de usuario: botones, formas, imágenes, etc. Para crear una animación, basta con cambiar el valor de una o más propiedades de un objeto a lo largo de cierto período de tiempo. Animación Ejemplo 2/2 Aplastar lentamente un elemento Ellipse, es necesario disminuir progresivamente la propiedad Height asociada durante dos segundos. 20

21 Automatización de interfaces de usuario WPF crea un árbol de automatización de IU. El árbol se compone de objetos AutomationElement Herramientas para WPF Para Desarrolladores VisualStudio Para Diseñadores Expression Interactive Designer 21

22 Herramientas para WPF Muchas Gracias por su Atención!! 22