Programación de la interfaz de usuario con Windows Forms y NET

Programación de la interfaz de usuario
con Windows Forms y .NET
NET CF
Programación de Sistemas Empotrados y Móviles
(PSEM)
Marco A. Peña
[email protected]
Índice de contenidos
„Plataformas: PPC vs. SP
„ Windows
do s Forms
o s
„ Recomendaciones oficiales PPC
„ Diseño GUI en PPC
„ Diseño GUI en SP
„ Gaming
PSEM: Programación de Sistemas Empotrados y Móviles
2
1
Dispositivos móviles vs. PCs
„ Área de visualización mucho más pequeña
„ Número de colores limitado
„ Soporte a gráficos por hardware limitado
„ Mecanismo de entrada de datos menos ágiles que un teclado y
un ratón
„ Recursos de cómputo limitados
„ Dos plataformas: Pocket PC y SmartPhone
DSEM: Diseño de Sistemas Empotrados y Móviles
PPC vs. SP: pantalla
Barra de navegación
Area de trabajo
Menu
SP home screen
(176 x 220 pixels)
PPC today screen
(240 x 320 pixels)
DSEM: Diseño de Sistemas Empotrados y Móviles
2
PPC vs. SP: entrada de datos
Pantalla táctil (reconocimiento
estritura y teclado virtual),
stylus y joystick
Teclado de móvil y
joystick
DSEM: Diseño de Sistemas Empotrados y Móviles
PPC vs. SP: controles
Pocos controles.
Muchos más controles
disponibles y más ricos, e.g.
TabControl
Un control en cada línea.
DSEM: Diseño de Sistemas Empotrados y Móviles
3
Índice de contenidos
„ Plataformas: PPC vs. SP
„Windows
Windows Forms
„ Recomendaciones oficiales PPC
„ Diseño GUI en PPC
„ Diseño GUI en SP
g
„ Gaming
7
PSEM: Programación de Sistemas Empotrados y Móviles
Controles Windows Forms
Controles soportados
Controles soportados sólo
tanto en PPC como en SP
en PPC
CheckBox, ComboBox,
DataGrid, ScrollBar,
ImageList, Label, ListView,
ManiMenu, Panel, PictureBox,
ProgressBar, TextBox, Timer,
TreeView
Button, ContextMenu,
DomainUpDown, ListBox,
NumericUpDown,
Open/SaveFileDialog,
RadioButton, StatusBar,
TabControl, ToolBar,
TrackBar
„ Hay controles del .NET Framework que no están soportados en
Windows Mobile, e.g. GroupBox, ToolTip, RichTextBox.
„ Tampoco hay soporte a operaciones drag-and-drop.
DSEM: Diseño de Sistemas Empotrados y Móviles
8
4
Uso de controles
„ Igual que en aplicaciones de escritorio.
„ Se emplea el Forms Designer de Visual Studio para la creación
de controles en tiempo de diseño.
„ También pueden crearse controles en tiempo de ejecución:
System.Windows.Forms.Button submitButton = new Button();
submitButton.Location = new Point(100,100);
submitButton.Text = "Submit";
this.Controls.Add(submitButton);
hi C
l
dd( b i
)
PSEM: Programación de Sistemas Empotrados y Móviles
9
Gestión de eventos
„ Doble clic sobre el control en el Forms Designer permite crear
un método para tratar el evento principal de dicho control.
„ La ventana de propiedades del Forms Designer permite crear
métodos para tratar cualquier evento de un control.
„ También en tiempo de ejecución.
PSEM: Programación de Sistemas Empotrados y Móviles
10
5
Gestión de eventos
„ En tiempo de ejecución:
E ell método
En
ét d InitializeComponent
i i li
añadir:
ñ di
this.Load += new System.Eventhandler(this.Form1_Load);
Escribir el método :
private void Form1_Load(object sender, System.EventArgs e)
{
comboBox1.DropDownStyle = ComboBoxStyle.DropDownList;
State[] states = new State[] {
new State("Alabama", "AL"),
new State("California", "CA"),
};
comboBox1.DataSource = states;
comboBox1.DisplayMember = "LongName";
}
PSEM: Programación de Sistemas Empotrados y Móviles
11
Índice de contenidos
„ Plataformas: PPC vs. SP
„ Windows Forms
„Recomendaciones oficiales PPC
„ Diseño GUI en PPC
„ Diseño GUI en SP
PSEM: Programación de Sistemas Empotrados y Móviles
12
6
Control
Button
„ Usage
z
On Windows Mobile-based Pocket PCs, the Button control is used to
cause an application to perform an action when the user selects the
button.
„ Design guideline
z
To conserve space, do not include an Apply command button in an
application. Instead, use only an OK button.
PSEM: Programación de Sistemas Empotrados y Móviles
Control
13
CkeckBox
„ Usage
z
Use CheckBox control only when it provides choices that are opposite
and unambiguous. Otherwise, use RadioButton.
„ Design guideline
z
Limit the number of check boxes in the user interface. If you need to
include several options, consider using a list view control instead of
multiple check boxes.
PSEM: Programación de Sistemas Empotrados y Móviles
14
7
Control
ComboBox
„ Usage
z
Use ComboBox control in place of RadioButton control to conserve
space or when the user needs to add entries to a list.
„ Design guideline
z
z
z
Pre-scroll
Pre
scroll the list so that the currently selected item is in view
view.
Determine the trade-off between saving space and clearly identifying
all application options using radio buttons.
Resolve hardware navigation issues. More than a navigation pad is
needed to access all the combo box functionality such as the dropdown list and list selection.
PSEM: Programación de Sistemas Empotrados y Móviles
Control
15
ContextMenu
„ Usage
z
The ContextMenu control displays additional commands for a screen
item. The context menu appears when a user taps and holds the stylus
on the screen item.
„ Design guideline
z
z
z
In general, commands on the context menu should also be available
from menus and buttons on the menu bar.
To minimize stylus movement, list commands from top to bottom in
order of expected frequency of use.
Actions that are difficult to recover from, such as delete, should be
placed at the bottom of the pop-up menu.
PSEM: Programación de Sistemas Empotrados y Móviles
16
8
Control
ListBox
„ Usage
z
A list box displays items a user can select. To enable the user to enter
items in a list, use a combo box instead.
„ Design guideline
z
z
If a list box maintains state, it should display
p y the currently
y selected item
by default.
Use icons to help the user quickly differentiate between types of items.
PSEM: Programación de Sistemas Empotrados y Móviles
Control
17
ListView
„ Usage
z
A list view control is used to display items in a scrollable list. Each item
has an icon and a label. The list view control can display content in
four different views: large icon, small icon, list, and details (e.g.:
listView.View = View.Details). Check boxes can be included in
the list view next to items to indicate current state (CheckBoxes
property).
property)
„ Design guideline
z
z
z
Full-line selection should be enabled (FullRowSelect property).
List items should not be truncated.
When a window containing a list view is opened, the list view control
should display the currently selected item.
PSEM: Programación de Sistemas Empotrados y Móviles
18
9
Control
RadioButton
„ Usage
z
Use radio buttons only when need to provide mutually exclusive
choices and when there are only a few choices. When there are many
choices, use list boxes instead.
„ Design guideline
z
Keep option button labels brief to conserve space.
PSEM: Programación de Sistemas Empotrados y Móviles
Control
19
ProgressBar
„ Usage
z
A progress bar shows the percent completed for an operation or the
percentage of a value, such as battery power remaining. To
communicate the purpose of the progress bar, add static text or other
information.
„ Design guideline
z
Keep progress bar labels brief to conserve space.
PSEM: Programación de Sistemas Empotrados y Móviles
20
10
Control
TabControl
„ Usage
z
Use tabs in an application to group related information and functionality.
„ Design guideline
z
So that the user does not need to scroll to view the tabs:
9 Avoid creating more tabs than can fit on the screen at one time.
9 Ensure that all of the edit controls are visible on a property sheet when the
input panel is displayed.
z
To keep the content area uncluttered at the top of the screen, place
tabs at the bottom of the screen.
PSEM: Programación de Sistemas Empotrados y Móviles
Control
21
TextBox
„ Usage
z
Use text boxes to input single-line and multi-line texts.
„ Design guideline
z
z
In general, a text edit buffer for the control is limited to 255 bytes, or it
is dynamically allocated and is limited to the space left on the device. A
buffer should be limited to 255 bytes for a text box containing an e
e-mail
mail
address, street address, phone number, or Inbox subject.
When a user must enter text in a specific format, provide an example
of the format and set the control to accept only data that is formatted
correctly.
PSEM: Programación de Sistemas Empotrados y Móviles
22
11
Control
TreeView
„ Usage
z
A tree view is a list box control that shows the hierarchical relationship
of items.
„ Design guideline
z
Including icons in a tree view helps users distinguish between different
types of items such as files and folders.
23
PSEM: Programación de Sistemas Empotrados y Móviles
Diseño GUI. Evolución Home Screen PPC
Palm-Size PC
Palm1998
Windows Mobile
2003
Palm--Size PC
Palm
1999
Pocket PC
2000
Windows Mobile
2003, SE
PSEM: Programación de Sistemas Empotrados y Móviles
Pocket PC
2001
Windows Mobile 5.0
2005
Smartphone
2002
Smartphone
2003
Windows Mobile 6.0
2007
24
12
Diseño GUI. Recomendaciones generales
„ Diseño de la interfaz es crítico:
z
z
z
z
z
z
z
z
No intentar simplemente migrar la interfaz de una aplicación de
sobremesa.
Aprovechar los elementos de la UI que ya conocen los usuarios en el
escritorio siempre que se pueda.
Regla 80/20: Optimizar el diseño para las funciones más frecuentes.
No ofrecer muchas opciones. Decidir lo mejor para el caso más frecuente.
En estos dispositivos se consultan datos mucho más que se editan datos.
Seguir las normas de diseño.
Minimizar movimientos del lápiz
lápiz.
No sobrecargar la interfaz. Tienen que destacar los datos no la interfaz.
„ ¡Atención a los detalles!
PSEM: Programación de Sistemas Empotrados y Móviles
25
Índice de contenidos
„ Plataformas: PPC vs. SP
„ Windows Forms
„ Recomendaciones oficiales PPC
„Diseño GUI en PPC
„ Diseño GUI en SP
PSEM: Programación de Sistemas Empotrados y Móviles
26
13
Diseño GUI. Recomendaciones PPC
„ Poner todos los controles de edición por encima del SIP.
„ Evitar scrollbars. Sobre todo las horizontales.
„ Potenciar el uso de los menus contextuales.
„ No usar ‘Ballons’ como diálogos. Sólo para avisos de
aplicaciones que están en el background.
PSEM: Programación de Sistemas Empotrados y Móviles
27
Diseño GUI. Trabajo con varias resoluciones
„ A partir de Windows Mobile 2003 SE existen:
z
z
z
Distintas orientaciones: horizontal, vertical
Distintos tamaños de p
pantalla: QVGA, VGA, Cuadrada
Distintas resoluciones:
9 Resoluciones estándar: 96dpi, 192dpi…
9 Se puede tener resoluciones no estándar pero es un caso extremo
que no merece la pena contemplar
9 Una pantalla VGA puede estar en VGA (96dpi) o en modo de
compatibilidad QVGA (192dpi)
PSEM: Programación de Sistemas Empotrados y Móviles
28
14
Diseño GUI. Trabajo con varias resoluciones
„ Comportamiento de aplicaciones antiguas en pantallas VGA
z
z
z
z
Los dispositivos VGA están por defecto en modo de
compatibilidad QVGA
Las aplicaciones antiguas (compiladas con versión de Windows
CE 4.20 o inferior) trabajan como si la pantalla fuera QVGA
Las aplicaciones modernas trabajan en VGA
Con el recurso HI_RES_AWARE CEUX {1} se puede desactivar
el modo de compatibilidad en aplicaciones antiguas
„ Comportamiento de aplicaciones antiguas cuando cambia la
orientación de la pantalla
z
Se visualizan scroll-bars para que se pueda ver toda la interfaz
PSEM: Programación de Sistemas Empotrados y Móviles
29
Diseño GUI. Orientación
„ Se puede forzar una orientación. De esta manera no es
necesario preparar la aplicación para distintas orientaciones.
No se recomienda porque es confuso para el usuario
usuario.
„ Elegir la mejor estrategia según el caso:
z
z
z
z
z
Volver a dibujar la interfaz
Cambiar el tamaño de algunos controles
Cambiar la posición de los controles en la pantalla
Diseñar para pantalla cuadrada de 240x240
Cambiar el contenido de la interfaz
PSEM: Programación de Sistemas Empotrados y Móviles
30
15
Diseño GUI. Orientación
PSEM: Programación de Sistemas Empotrados y Móviles
31
Diseño GUI. Resolución y orientación
„ Trabajo con distintas resoluciones
z http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnppcgen/html/dpi_awareness.asp
„ Trabajo con distintas orientaciones
z http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnppcgen/html/screen_orientation_awareness.asp
„ Instalar aplicaciones con recursos de la correcta resolución:
z http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnppcgen/html/installation_with_dpi-specific_resources.asp
PSEM: Programación de Sistemas Empotrados y Móviles
32
16
Índice de contenidos
„ Plataformas: PPC vs. SP
„ Windows Forms
„ Recomendaciones oficiales PPC
„ Diseño GUI en PPC
„Diseño GUI en SP
PSEM: Programación de Sistemas Empotrados y Móviles
33
Plataforma Smartphone
PSEM: Programación de Sistemas Empotrados y Móviles
34
17
Softkeys
„ La softkey de la izquierda suele asociarse a la acción más
común
„ La softkey
f
de la derecha es un menú
„ Los diálogos tienen la opción “Done” en la softkey izquierda y
la opción “Cancel” (si es necesaria) en la softkey derecha
PSEM: Programación de Sistemas Empotrados y Móviles
35
Controles de edición
„ Los controles de edición soportan múltiples formas de entrada
de datos
„ Typicamente: numérico, multi-tap y T9
„ Si son multi-línea incluyen soporte zoom para verlos mejor
PSEM: Programación de Sistemas Empotrados y Móviles
36
18
Control Spin-Box
„ Substituye a los combo boxes, radio buttons y list boxes
„ Admiten selección multi-item
Flujo típico en una aplicación
„ List view -> card view -> edit view
„ Ejemplo clásico: Contactos
19
Diseño GUI. Recomendaciones Smartphone
„ Estudiar recomendaciones de diseño.
„ Respetar el uso de las teclas especiales del Smartphone.
z
z
Softkey
S
ftk Izquierdo:
I
i d acción
ió más
á ffrecuente
t o “A
“Aceptar”
t ” cuando
d se
está realizando una modificación.
Softkey Derecho: Acceso al Menú o Cancelar cuando se está
realizando una modificación.
„ Usar Spin-Boxes
z
Sustituyen los combo boxes, list boxes y option buttons
„ Evitar que el usuario tenga que escribir
escribir.
„ Elegir el modo de entrada de los datos adecuado (texto,
números, T9 etc.) cuando el usuario entra en un edit box.
Diseño GUI. Recomendaciones Smartphone
20
Referencias
„ Novedades de desarrollo Pocket PC y Smartphone:
www.microsoft.com/mobile/developer
„ Información detallada de .NET Compact Framework y Visual Studio:
mobility.microsoftdev.com
bilit
i
ftd
„ ASP.NET Mobile Controls: www.asp.net/mobile
„ Desarrollo Tablet PC: www.tabletpcdeveloper.com
Preguntas y respuestas
PSEM: Programación de Sistemas Empotrados y Móviles
42
21