Diseño de Interfaces y Menús

Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Cod. 1728.61
PLATAFORMA .NET Y
SERVICIOS WEB
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
[email protected]
Dpto. de Informática
OOTLab - Laboratorio de Tecnologías de Orientación a Objetos
http://www.ootlab.uniovi.es
Contenidos
Introducción
Aplicaciones con Interfaces
Gráficas de Usuario
Controles
Ejemplos
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Contenidos
Introducción
Conceptos Básicos
Window – Control – Form
La clase Control
La clase Form
Aplicaciones con Interfaces Gráficas de Usuario
Controles
Ejemplos
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Conceptos Básicos
Sistema Operativo Windows
No es orientado a objetos
Elemento fundamental: Ventana
Lenguaje Interfaz
C
C++
Windows Application Programming Interface
(API)
Microsoft Foundation Class (MFC) Library
C# o C++ Windows Forms (parte del framework .NET)
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Window – Control - Form
Implementa la funcionalidad
System
.Object
Gestiona
la generación
y el que es requerida por las
básica
display de las barras de
clases que muestran
desplazamiento para permitir
al al usuario (teclado,
información
usuario tener acceso aratón,
la
mensajes de windows)
totalidad de la pantalla
Gestiona la funcionalidad
Control por un control para
requerida
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
...
Button Base
Button
Panel
CheckBox
TextBox
RadioButton
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Form
UserControl
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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)
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
La clase Form. Propiedades
– Localización y Tamaño
DesktopLocation.X<Location.X
DesktopLocation.Y<Location.Y
Propiedad
Tipo
Descripción
Location
Point
Relativa a la pantalla
Size
Size
Tamaño completo de la form
Bounds
Rectangle Igual a Rectangle (Location,Size)
Width
Int
Igual a Size.Width
Height
Int
Igual a Size.Height
Left
Int
Igual a Location.X
Top
Int
Igual a Location.Y
Right
Int
Igual a Location.X+Size.Width
Bottom
Int
Igual a Location.Y+Size.Height
DesktopLocation
Point
Igual a Location pero incluye barra tareas
DesktopBounds
Rectangle Igual a Bounds pero incluye barra tareas
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
La clase Form. Propiedades (II)
– Área Cliente de una Form excluye
–Barra de Título
–Borde
–Menú
–Barra de desplazamiento
ClientSize
– ClientSize (Size) proporciona la anchura y
altura en pixels del área cliente
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
La clase Form. Propiedades (III)
• StartPosition.
– Asigna la posición inicial de la ficha en tiempo de
ejecución
– CenterScreen, Manual, CenterParent,...
• TopMost.
– Indica si la ficha debería ser mostrada como la ficha más
destacada de la aplicación
• TopLevel.
– Indica si la form es considerada como una ventana de
alto nivel (MDI).
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Form frm
Creación de Ventanas
= new Form();
frm.Text = “Caption”;
frm.Show();
– 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.FormBorderStyle = FormBorderStyle.FixedDialog;
frm.MinimizeBox = false;
frm.MaximizeBox = false;
frm.ShowDialog();
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
por el usuario para la ventana
staticdefinida
void Main()
{
principal
•
•
•
Form frm = new Form();
–frm
Redefine
.Text = OnPaint
“Caption”;
.FormBorderStyle
= para
FormBorderStyle
–frm
Redefine
otros eventos
el manejo de.FixedDialog
la entrada ;
Frm.MinimizeBox = false;
frm.MaximizeBox = false;
Application.Run(frm);
}
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
- C++
- C#
-Visual Basic
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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=“Ejemplo”;
frm.Controls.Add(txt);
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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 para todas las ventanas excepto la
ventana del diálogo.
• En .NET se emplea el método ShowDialog() para
abrir una form como un diálogo.
Form frm = new Form();
• frm
ShowDialog
() devuelve
un valor DialogResult que
.Text = “Caption
”;
frm
.FormBorderStyle
= FormBorderStyle
.FixedDialog;
representa
el resultado
.
frm.MinimizeBox = false;
frm.MaximizeBox = false;
frm.ShowDialog();
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Descripción
Abort
Devuelve Abort
Cancel
Devuelve Cancel
Ignore
Devuelve Ignore
No
Devuelve No
None
No devuelve nada. Significa que aún está ejecutándose
OK
Devuelve OK
Retry
Devuelve Retry
Yes
Devuelve Yes
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Diálogos (III)
• MessageBox
• Este diálogo está encapsulado en OkCancel
la clase
MessageBox y es abierto por su método
Show().
YesNoCancel
YesNo...
DialogResult dr = MessagBox.Show(“Introduzca valor:”
,”Título”
,MessageBoxButtons.OkCancel
,MessageBoxIcon.Hand)
if (dr==DialogResult.OK)
{
// lo que sea
Hand
}
Stop
Error
Question
Exclamation
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
AnchorStyleValues
• Propiedad: Anchor.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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. Acopla el
control con todos los bordes. El control llena el
área cliente del contenedor.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Botones
Button Base
Button
CheckBox
RadioButton
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Botones de comando
– La clase Button representa un ‘push button’ o
botón de comando (tradicional).
– Funciones básicas son implementadas en la
clase control.
– Propiedad : DialogResult
Si se asigna esta propiedad a un valor distinto de
DialogResult.None, ShowDialog() devuelve este
valor si se hace click en el botón
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Botones de Chequeo
•
•
•
•
•
•
Soportan on/off para opciones que son no exclusivas
Se aconseja emplear mnemotécnicos en las etiquetas
Capitalización de sentencias cuando haya más de una
palabra. Se aconseja una única línea de texto
Si hay un gran número de opciones o éste varia
conviene emplear un list box de selección múltiple
Emplear la apariencia mixta cuando los valores para
esa propiedad difieren
Posibles usos
– Filtrar el contenido de una lista
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Botones de chequeo
– Propiedad : Checked y Appearance
– Para que tome un tercer valor (indeterminado):
– ThreeState->True
– CheckState (examinar el estado)
CheckState
Descripción
Checked
CheckBox muestra una marca
Eventos:
Unchecked
CheckBox está vacio
CheckBox
muestra
marcade
peroChecked
sombreada
•Indeterminate
CheckedChanged,
cambia
eluna
valor
•CheckStatedChanged, cambia el valor de CheckState
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Botones de Opción o de Radio
• Representan una opción simple dentro de un conjunto
limitado de opciones mutuamente exclusivas
• Debe evitar usarse para desencadenar una acción.
• 2>= número opciones<=7
• Se aconseja emplear mnemotécnicos en las etiquetas
asociadas a los botones
• Capitalización de sentencias
• Agrupamiento mediante un Group Box
• Posibles usos:
– Representar un conjunto de opciones para una
propiedad
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Botones de Radio
– Sólo admite valores on/off.
– Propiedad: Checked.
– No hay propiedad ThreeState.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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();
• AutoPopDelay, tiempo que permanece
tp.SetToolTip(button1,
“Guardar”mostrado
);
Tp.SetToolTip(button2,”Salir”);
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Controles de Texto
TextBoxBase
RichTextBox
-Lines
-SelectionStart
-SelectionLength
-SelectedText
-AcceptsTab
-Modified
-AppendText
-Clear
-ClearUndo
-Select
-SelectAll
TextBox
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Listas
• Es un control que muestra una lista de opciones para el
usuario y soporta la selección de un ítem o varios de la
lista
• Apropiado para mostrar un gran número de opciones
que varían en número y contenido
• Si una opción no está disponible hay que quitarla de la
lista
• Ordenar adecuadamente las opciones de la lista
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Listas (II)
• No llevan incorporadas sus propias etiquetas
• Asociar una etiqueta
– permite acceso por teclado al control
– con capitalización de sentencias
– que debe aparecer en estado no disponible si el
listbox está deshabilitado
• Se clasifican atendiendo a cómo muestran la lista y a
cómo permiten la selección
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Listas Simples
– ListBox
– Combo Boxes
– CheckedListBoxes
– OwnerDrawMode
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
ListBox
textBox1.Text=(String)listBox1.Items[listBox1.SelectedIndex];
– Representa una lista de Items
– Permite selección
• Simple. SelectedItem (-1 = 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 de ítems visibles<=8
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
ComboBox
–
–
–
ComboBox=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 Editable
Lista
Simple
SI
Visible
DropDown
SI
Plegada
DropDownList
NO
Plegada
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
CheckedListBoxes
– Derivado de un ListBox
– Cada ítem de la lista es un
CheckBox.
– CheckedListBox ofrece
métodos y propiedades
para trabajar con estos
checkboxes.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Listas Complejas
– TreeView
– ListView
– ImageList
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
ListView
• Un ListView puede mostrar datos de cuatro
formas:
–
–
–
–
List
Small
Icons
Details
• Cada ítem muestra un 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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
TreeView
– Muestra una lista jerárquica de ítems o nodos.
– Cada nodo incluye
•
•
•
Un título
Una imagen (opcional)
Si tiene sub-nodos se pueden
expandir o esconder (collapse).
– Los valores de un TreeView son
almacenados en objetos
TreeNode.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
ImageList
– Es un contenedor para imá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.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
MenuItem (II)
Valor
Descripción
Checked
Aparece √
Enabled
Indica si está activo
Mnemonic
Indica el nemotécnico asociado con este
ShortCut
Combinación de teclas de acceso rápido asociada
ShowShortCut
Si muestra o no los ShortCut
RadioCheck
Indica si muestra un radio botón en vez de una marca de
chequeo
MdiList
Indica si mostrará la lista de las ventanas hijas en el
caso de una aplicación MDI.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Menus - ContextMenu
– La clase ContexMenu representa los menús que aparecen cuando
el usuario pulsa el botón derecho del rató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 están cerrados
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Barras de Herramientas
• 2 classes: ToolBar + ToolBarButton
• Botones con diferentes estilos
– Soporta menús Dropdown
– Soporta botones de conmutación (toggle)
• Eventos
– ButtonClick + ButtonDropDown
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Barras de Herramientas (II)
• Cada botón puede tener su propia apariencia.
Valor
Descripción
DropDownButton
Botón que muestra un menú u otra ventana al
presionarlo
PushButton
Botón tradicional
Separator
Separación entre botones
ToggleButton
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Descripción
ColorDialog
Muestra la lista de colores posibles
FontDialog
Muestra la lista de fuentes instalados en el sistema
PageSetupDialog
Permite seleccionar márgenes y orientación de la página
PrintDialog
Selección de la impresora y la parte del documento a
imprimir
FileDialog
Selección de un fichero. Base para OpenFileDialog y
SaveFileDialog
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Diálogos Comunes
– Se muestran con el método 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.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Tabcontrols y TabPages
– Permite definir múltiples páginas (TabPages)
para una misma ventana o cuadro de diálogo.
– Cada página contiene un grupo de controles
que la aplicación muestra cuando el usuario
selecciona la pestaña correspondiente.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Tabcontrols y TabPages (II)
• Las etiquetas del Tab pueden incluir texto,
información gráfica o ambas
• Si lleva texto: capitalización de sentencias
• Si lleva sólo gráfico: emplear tooltips
• Un control Tab (por defecto) sólo muestra una fila
de tabs y aunque permite múltiples filas hay que
evitarlo porque hace más difícil acceder a un tab
particular.
• Se puede colocar el foco sobre un control
particular de la página, pero si no hay un control
apropiado se puede dejar en el propio tab
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Otros Contoles (II)
– ScrollBar:
• Implementa la funcionalidad básica 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.
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Otros Contoles (III)
– NumericUpDown:
• Representa un control que muestra valores numéricos.
– Value
– Minimum y Maximum
– Increment
– Eventos: ValueChanged
– DomainUpDown:
– Igual al anterior pero con Strings
– ProgressBar:
• Representa una barra de progreso
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
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
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto
Ejemplos
Cursos de Verano 2002
UNIVERSIDAD DE OVIEDO
Diseño de Interfaces y Menús
Ana Belén Martínez Prieto