Diseño de Interfaces y Menús

Transcripción

1 Cod PLATAFORMA.NET Y SERVICIOS WEB belen@lsi lsi.uniovi.es OOTLab Dpto. de Informática Lab - Laboratorio de Tecnologías de Orientación a Objetos

2 Contenidos Introducción Aplicaciones con Interfaces Gráficas de Usuario Controles Ejemplos

3 Contenidos Introducción Conceptos Básicos Window Control Form La clase Control La clase Form Aplicaciones con Interfaces Gráficas de Usuario Controles Ejemplos

4 Conceptos Básicos Sistema Operativo Windows No es orientado a objetos Elemento fundamental: Ventana Lenguaje C C++ C# o C++ Interfaz Windows Application Programming Interface (API) Microsoft Foundation Class (MFC) Library Windows Forms (parte del framework.net)

5 Conceptos Básicos (II) Framework.net Colección de clases que proporciona la funcionalidad necesaria para la construcción de No da soporte multimedia aplicaciones Web, Internet y Windows. Windows Forms Librería de clases que permite la creación de aplicaciones Windows tradicionales. Es independiente de los lenguajes

6 Window Control - Form Button Button Base System.Object Implementa la funcionalidad Gestiona la generación básica y el que es requerida por las display... de las barras de clases que muestran desplazamiento para permitir información al al usuario (teclado, usuario tener acceso a ratón, la mensajes de windows) totalidad de la pantalla Gestiona la funcionalidad requerida Control por un control para actuar como un contenedor de otros controles. TextBoxBase... ScrollableControl Es empleada para crear cualquier clase de ventanas: estándar, cuadros de diálogo, MDI ContainerControl RichTextBox CheckBox RadioButton TextBox Form UserControl Panel

7 La clase Control Implementa la funcionalidad básica para las clases que muestran información al usuario. Métodos y propiedades Color, Position, Size, Controls, CanFocus, Parent, TabStop,... Funcionalidad añadida Docking y Anchoring Gestión de controles hijos No implementa el paint Representa la clase base para las clases predefinidas Es la clase base indirecta para los controles de usuario (UserControl)

8 La clase Form Diferentes tipos de ventanas: Estándar Diálogos MDI Atributos especiales MaximizeBox y MinimizeBox DesktopLocation AcceptButton y CancelButton ShowDialog() Eventos Load Closed y Closing Activated

9 La clase Form.. Propiedades Localización y Tamaño Propiedad Location Size Bounds Width Height Left Top Right Bottom DesktopLocation DesktopBounds Tipo Point Size Rectangle Int Int Int Int Int Int Point DesktopLocation.X<.X<Location.X DesktopLocation.Y<.Y<Location.Y Rectangle Descripción Relativa a la pantalla Tamaño completo de la form Igual a Rectangle (Location,Size) Igual a Size.Width Igual a Size.Height Igual a Location.X Igual a Location.Y Igual a Location.X+Size.Width Igual a Location.Y+Size.Height Igual a Location pero incluye barra tareas Igual a Bounds pero incluye barra tareas

10 La clase Form.. Propiedades (II) Área Cliente de una Form excluye Barra de Título Borde Menú Barra de desplazamiento ClientSize (Size) proporciona la anchura y altura en pixels del área cliente ClientSize

11 La clase Form.. Propiedades (III) StartPosition. Asigna la posición n inicial de la ficha en tiempo de ejecución CenterScreen,, Manual, CenterParent,... TopMost. Indica si la ficha debería a ser mostrada como la ficha más m destacada de la aplicación TopLevel. Indica si la form es considerada como una ventana de alto nivel (MDI).

12 Contenidos Introducción Aplicaciones con Interfaces Gráficas de Usuario Creación de Ventanas Construcción de la aplicación Requerimientos Incorporación de controles a la Ventana Diálogos Controles Ejemplos

13 Creación de Ventanas Form Form Crear una instancia Llamar el método Show (no modal) ShowDialog (modal) Usar propiedades y métodos Form frm = new Form(); frm.text = Caption ; frm.show(); Form frm = new Form(); frm.text = Caption ; frm.formborderstyle = FormBorderStyle.FixedDialog FixedDialog; frm.minimizebox = false; frm.maximizebox = false; frm.showdialog ShowDialog();

14 Aplicaciones basadas en IGU Emplea SYSTEM.WINDOWS.FORMS.DLL La función Main() es el punto de entrada El método Run de la clase Application abre la form principal. public Clase Form static definida void Main() por el usuario para la ventana { principal Form frm = new Form(); frm.text Redefine = OnPaint Caption ; frm.formborderstyle Redefine otros eventos = para FormBorderStyle el manejo de la entrada FormBorderStyle.FixedDialog; Frm.MinimizeBox = false; frm.maximizebox = false; Application.Run(frm frm); }

15 Requerimientos de Usuario Para compilar Compilador C# Para ejecutar Runtime.NET (CLR, Common Language Runtime) Herramientas Microsoft.NET Framework SDK Microsoft Visual C# Microsoft Visual Studio.NET -C++ - C# -Visual Basic

16 Incorporando controles a la Ventana 1.- Crear la instancia del control 2.- Asignar los atributos al control (Text, BackColor,...) 3.- Asignar la localización y dimensiones del control 4.- Añadir manejadores de eventos para el control 5.- Añadir el control a la colección de controles de la form. Private TextBox txt; TextBox txt = new TextBox(); Txt.Text=.Text= Ejemplo ; frm.controls.add(.controls.add(txt);

17 Diálogos Un diálogo es una ventana con una gestión de mensajes especial. Un diálogo modal impide las entradas de teclado y de ratón n para todas las ventanas excepto la ventana del diálogo logo. En.NET se emplea el método m ShowDialog() para abrir una form como un diálogo logo. Form frm = new Form(); frm.text ShowDialog() = Caption ; devuelve un valor DialogResult que frm.formborderstyle representa el resultado. = FormBorderStyle.FixedDialog FixedDialog; frm.minimizebox = false; frm.maximizebox = false; frm.showdialog ShowDialog();

18 Diálogos (II) Valores de Retorno DialogResult únicamente informa de que botón ha cerrado la form, de forma que se deben leer los valores desde los controles. DialogResult Abort Cancel Ignore No None OK Retry Yes Descripción Devuelve Abort Devuelve Cancel Devuelve Ignore Devuelve No No devuelve nada. Significa que aún está ejecutándose Devuelve OK Devuelve Retry Devuelve Yes

19 Diálogos (III) MessageBox Este diálogo está encapsulado en la clase OkCancel MessageBox y es abierto por su método Show(). DialogResult dr = MessagBox.Show( Introduzca valor:, Título,MessageBoxButtons.OkCancel,MessageBoxIcon.Hand) if (dr== ==DialogResult.OK) { // lo que sea Hand } Stop Error Question Exclamation YesNoCancel YesNo...

20 Contenidos Introducción Aplicaciones con Interfaces Gráficas de Usuario Controles Layout Botones Controles de Texto (Text Controls) Controles de Lista (List Controls) Menús Barras de Estados y Herramientas Diálogos Comunes Otros Controles Ejemplos

21 Layout Cambiar la posición y dimensiones de los controles en tiempo de ejecución Posibilidad: Calcular y mover.net: Anchoring y Docking Anchor Distancia fijada a los bordes Dock Conexión a un borde Splitter

22 Anchoring Cuando un control es anclado ( anchoring ) a una ficha (o a otro contenedor), si la form es redimensionada, el control mantiene la distancia entre el control y las posiciones ancladas. En definitiva, fija la distancia a los bordes del contenedor Propiedad: : Anchor. AnchorStyleValues

23 Docking Consiste en acoplar un control con dos bordes del contenedor,, de forma que el control se redimensiona cuando el contenedor es redimensionado. Propiedad: : Dock AnchorStyleValues Un caso especial es DockStyle.Fill.Fill. Acopla el control con todos los bordes.. El control llena el área cliente del contenedor.

24 Splitter Permite que el usuario redimensione elementos acoplados (docked) en tiempo de ejecución. Para usar un Splitter - Acoplar un control contra el borde de un contenedor - Acoplar el Splitter contra el mismo borde

26 Botones Button Base Button CheckBox RadioButton

27 Botones de comando La clase Button representa un push button o botón de comando (tradicional). Funciones básicasb son implementadas en la clase control. Propiedad : DialogResult Si se asigna esta propiedad a un valor distinto de DialogResult.None None, ShowDialog() devuelve este valor si se hace click en el botón

28 Botones de Chequeo Soportan on/off off para opciones que son no exclusivas Se aconseja emplear mnemotécnicos en las etiquetas Capitalización n de sentencias cuando haya más m s de una palabra. Se aconseja una única línea l de texto Si hay un gran número n de opciones o éste varia conviene emplear un list box de selección n múltiplem Emplear la apariencia mixta cuando los valores para esa propiedad difieren Posibles usos Filtrar el contenido de una lista

29 Botones de chequeo Propiedad : Checked y Appearance Para que tome un tercer valor (indeterminado): ThreeState->True CheckState (examinar el estado) CheckState Descripción Checked Eventos: Unchecked Indeterminate CheckBox muestra una marca CheckBox está vacio CheckBox muestra una marca pero sombreada CheckedChanged, cambia el valor de Checked CheckStatedChanged, cambia el valor de CheckState

30 Botones de Opción o de Radio Representan una opción n simple dentro de un conjunto limitado de opciones mutuamente exclusivas Debe evitar usarse para desencadenar una acción. 2>= número n opciones<=7 Se aconseja emplear mnemotécnicos en las etiquetas asociadas a los botones Capitalización n de sentencias Agrupamiento mediante un Group Box Posibles usos: Representar un conjunto de opciones para una propiedad

31 Botones de Radio Sólo admite valores on/off. Propiedad: : Checked. No hay propiedad ThreeState.

32 Etiquetas Se utilizan para mostrar información de sólo lectura (texto o imágenes) No pueden recibir el foco Se emplean para proporcionar texto descriptivo para otros controles. Incluir : Propiedad: UseMnemonic

33 ToolTips Ventana pequeña que muestra información útil cuando el puntero del ratón está sobre un control concreto Se debe definir un ToolTip para cada ventana (siempre que existan controles distintos de ToolBar y StatusBar ya que estos tienen sus propios tooltips). Propiedades AutomaticDelay InitialDelay, tiempo hasta que aparece el tooltip ReshowDelay ToolTip tp = new ToolTip(); tp.settooltip(button1, AutoPopDelay, tiempo que permanece mostrado Guardar ); Tp.SetToolTip(button2, Salir Salir );

35 Controles de Texto TextBoxBase RichTextBox -Lines -SelectionStart -SelectionLength -SelectedText -AcceptsTab -Modified -AppendText -Clear -ClearUndo -Select -SelectAll TextBox

36 TextBoxBase Permiten introducir, mostrar o editar un texto. Algunos de estos text fields combinan campos de introducción de texto con otro tipo de controles Deben emplearse etiquetas para clarificar el campo de texto. Estas etiquetas seguirán la capitalización de sentencias y permitirán el empleo de teclas de acceso Cuando en el campo de texto se tenga que introducir un conjunto restringido de valores hay que validar la entrada del usuario inmediatamente, ignorando los caracteres inapropiados o indicando que el valor es inválido

37 TextBox Es un control rectangular donde el usuario introduce o edita texto Soporta una o varias líneas de texto Multiline->True Puede emplearse para mostrar texto de sólo lectura que no es editable pero si seleccionable. ReadOnly->True Se puede limitar el número de caracteres a introducir MaxLength->45 Se puede soportar la auto-salida, pero con cuidado porque puede sorprender al usuario El formateo afecta a todo el documento

38 TextBox (II) Ofrece algunas otras propiedades interesantes: AcceptReturn. Indica si al presionar ENTER en un TextBox multilínea se crea una nueva línea o bien se activa el botón por defecto de la form. AcceptTabs. Indica si va a funcionar el TAB dentro del TextBox. CharacterCasing. Si modifica los caracteres para ponerlos en mayúsculas, minúsculas,... PasswordChar. Asigna el carácter usado para enmascarar una password en un TextBox simple.

39 RichTextBox Permite al usuario introducir y editar texto proporcionando características más avanzadas para dar formato al documento que el TextBox. SelectionFont, SelectionColor, SelectionAlignment, Selection Indent OnSelectionChange El texto puede ser asignado directamente al control o puede ser cargado desde un fichero de texto o RTF. El formateo del texto puede aplicarse a un carácter o a un párrafo. Propiedades específicas: AutoWordSelection.. Indica si se permite la selección automática de palabras. DetectUrls,, indica si el RichTextBox formateará automáticamente una URL cuando se teclee dentro del control.

41 Listas Es un control que muestra una lista de opciones para el usuario y soporta la selección n de un ítem o varios de la lista Apropiado para mostrar un gran número n de opciones que varían an en número n y contenido Si una opción n no está disponible hay que quitarla de la lista Ordenar adecuadamente las opciones de la lista

42 Listas (II) No llevan incorporadas sus propias etiquetas Asociar una etiqueta permite acceso por teclado al control con capitalización n de sentencias que debe aparecer en estado no disponible si el listbox está deshabilitado Se clasifican atendiendo a cómo c muestran la lista y a cómo permiten la selección

43 Listas Simples ListBox Combo Boxes CheckedListBoxes OwnerDrawMode

44 ListBox textbox1.text Text=( =(String)listBox1.Items[listBox1.SelectedIndex]; Representa una lista de Items Permite selección Simple. SelectedItem (-11 = no hay ninguno seleccionado) Múltiple MultiSimple, ítems no consecutivos MultiExtended, rango de ítems Tres colecciones: Items SelectedItems SelectedIndices Eventos SelectIndexChanged SelectValueChanged 3>= número n de ítems visibles<=8

45 ComboBox ComboBox=ListBox ListBox+TextBox Propiedades y funciones de ambos tipos Eventos OnTextChanged -> recorre ítems o escribe en el campo de edición OnSelectIndexChanged -> recorre los ítems OnSelectionChangeCommitted -> cerrar la lista DropDownStyle Simple DropDown DropDownList Editable SI SI NO Lista Visible Plegada Plegada

46 CheckedListBoxes Derivado de un ListBox Cada ítem de la lista es un CheckBox. CheckedListBox ofrece métodos y propiedades para trabajar con estos checkboxes.

47 OwnerDrawMode Un ListBox puede presentar también otros ítems (no texto) Para ello: Asignar la propiedad DrawMode OwnerDrawVariable (ítems pueden tener diferentes alturas) OwnerDrawFixed (ítems la misma altura) Redefinir los métodos OnMeasureItem,, determina la atura de los ítems OnDrawItem,, dibuja un ítem.

48 Listas Complejas TreeView ListView ImageList

49 ListView Un ListView puede mostrar datos de cuatro formas: List Small Icons Details Cada ítem muestra un título t tulo y una imagen. La clase ListView utiliza la clase ListViewItem para almacenar los valores de los ítems y colecciones: ListView.ListViewItemCollection ListView.SelectedIndexCollection ListView.SelectedListViewItemCollection ListView.CheckedIndexCollection ListView.CheckedListViewItemCollection ListView.ColubmnHeaderCollection

50 TreeView Muestra una lista jerárquica rquica de ítems o nodos. Cada nodo incluye Un títulot tulo Una imagen (opcional) Si tiene sub-nodos se pueden expandir o esconder (collapse). Los valores de un TreeView son almacenados en objetos TreeNode.

51 ImageList Es un contenedor para imágenes genes. Componente invisible que almacena imágenes para otros controles Hay que incorporar las imágenes a la lista y asignar posteriormente a los ítems el índice de la imagen que les corresponde.

53 Menus Se constituyen mediante una jerarquía de clases: Clase base abstracta Menu Clase MenuItem para ítems simples Clase MainMenu para los menús principales Clase ContextMenu para los menús contextuales

54 MenuItem La clase MenuItem es la clase más relevante. Actúa como un elemento de menú simple, aunque puede contener subítems (representados por MenuItems). Eventos Onclick Popup, permite hacer tareas antes de que el menú sea mostrado. Select, permite hacer tareas mientras el usuario coloca el cursor sobre un MenuItem.

55 MenuItem (II) Valor Checked Enabled Mnemonic ShortCut ShowShortCut RadioCheck MdiList Descripción Aparece Indica si está activo Indica el nemotécnico asociado con este Combinación de teclas de acceso rápido asociada Si muestra o no los ShortCut Indica si muestra un radio botón en vez de una marca de chequeo Indica si mostrará la lista de las ventanas hijas en el caso de una aplicación MDI.

56 Menus - ContextMenu La clase ContexMenu representa los menús s que aparecen cuando el usuario pulsa el botón n derecho del ratón n sobre un control. Controles tienen una propiedad ContextMenu a la que se puede asociar esta clase de menús. Eventos: ContextMenuChanged, si la propiedad ContextMenu está asignada MenuStart, cuando se hace click sobre un elemento de menú. MenuComplete,, se genera cuando todos los menús s están n cerrados

58 Barras de Estados y de Herramientas Cuando el usuario interacciona con controles que reflejan propiedades en una barra de herramientas o barra de estados cualquier cambio es directamente aplicado a la selección actual (sin confirmación), excepto si el control requiere una entrada adicional del usuario Los controles que aparecen en una barra de herramientas o de estados y no llevan etiqueta deben proporcionar tooltips Las barras de herramientas y de estados deben ser configurables para dar mayor flexibilidad al usuario visualizarlas y ocultarlas ordenar y organizar los elementos

59 Barras de Estados Una barra de estados (StatusBar) puede ser dividida en partes para mostrar más de un tipo de información. El framework.net ofrece el control StatusBar para la barra de estados y el control StatusBarPanel para los paneles individuales. Panels Size Alignment Text ShowPanels->True

60 Barras de Herramientas 2 classes: ToolBar + ToolBarButton Botones con diferentes estilos Soporta menús Dropdown Soporta botones de conmutación (toggle) Eventos ButtonClick + ButtonDropDown

61 Barras de Herramientas (II) Cada botón n puede tener su propia apariencia. Valor Descripción DropDownButton PushButton Separator ToggleButton Botón que muestra un menú u otra ventana al presionarlo Botón tradicional Separación entre botones Botón de conmutación Las imágenes son almacenadas en un ImageList Para asignar un tooltip para un botón: ShowToolTips -> > true ToolTipText-> escribir el texto

62 Barras de Herramientas (III) Si el estilo es DropDownButton Asignar la propiedad DropDownMenu Asignar la propiedad DropDownArrows Al hacer click en un botón se genera un evento ButtonClick pero es un evento de la barra. El evento ButtonDropDown se produce cuando se presiona la flecha.

64 Diálogos Comunes Windows ofrece algunos diálogos comunes. El framework.net encapsula esta funcionalidad en algunas clases. En la base está la clase abstracta CommonDialog. Clase ColorDialog FontDialog PageSetupDialog PrintDialog FileDialog Descripción Muestra la lista de colores posibles Muestra la lista de fuentes instalados en el sistema Permite seleccionar márgenes y orientación de la página Selección de la impresora y la parte del documento a imprimir Selección de un fichero. Base para OpenFileDialog y SaveFileDialog

65 Diálogos Comunes Se muestran con el método m ShowDialog(). OpenFileDialog Método OpenFile, abre el fichero seleccionado por el usuario (Lectura) FontDialog Genera el evento Apply cuando al presionar el botón Apply. Se puede utilizar para un preview con la letra seleccionada.

67 Tabcontrols y TabPages Permite definir múltiples m páginas p (TabPages( TabPages) para una misma ventana o cuadro de diálogo. Cada página p contiene un grupo de controles que la aplicación n muestra cuando el usuario selecciona la pestaña correspondiente.

68 Tabcontrols y TabPages (II) Las etiquetas del Tab pueden incluir texto, información n gráfica o ambas Si lleva texto: capitalización n de sentencias Si lleva sólo s gráfico: emplear tooltips Un control Tab (por defecto) sólo s muestra una fila de tabs y aunque permite múltiples m filas hay que evitarlo porque hace más m s difícil acceder a un tab particular. Se puede colocar el foco sobre un control particular de la página, p pero si no hay un control apropiado se puede dejar en el propio tab

69 Otros Contoles PictureBox: Representa un control que permite visualizar una imagen (bitmap, icon, JPEG, GIF,...) Timer: Implementa un temporizador que genera un evento para intervalos de tiempo definidos por el usuario. Debe ser empleado en una ventana.

70 Otros Contoles (II) ScrollBar: Implementa la funcionalidad básica b de una barra de desplazamiento. Value Minimum (0), Maximum(100) SmallChange(1), LargeChange(10) TrackBar: Es similar al ScrollBar pero tiene una interfaz de usuario diferente.

71 Otros Contoles (III) NumericUpDown: Representa un control que muestra valores numéricos ricos. Value Minimum y Maximum Increment Eventos: ValueChanged DomainUpDown: Igual al anterior pero con Strings ProgressBar: Representa una barra de progreso

72 Otros Contoles (IV) LinkLabel: Control que puede mostrar hiperenlaces MonthCalendar: Control que encapsula el calendario por meses de Windows. DateTimePicker: Control que permite seleccionar la fecha y hora

73 Ejemplos