Programación de la interfaz de usuario con Windows Forms y.net CF

Programación de la interfaz de usuario con Windows Forms y.net CF Programación de Sistemas Empotrados y Móviles (PSEM) Marco A. Peña marcoa@ac.upc.edu Índice de contenidos Plataformas: PPC vs. SP Windows Forms Recomendaciones oficiales PPC Diseño GUI en PPC Diseño GUI en SP Gaming 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 Muchos más controles disponibles y más ricos, e.g. TabControl Pocos controles. Un control en cada línea. DSEM: Diseño de Sistemas Empotrados y Móviles 3

Índice de contenidos Plataformas: PPC vs. SP Windows Forms Recomendaciones oficiales PPC Diseño GUI en PPC Diseño GUI en SP Gaming 7 Controles Windows Forms Controles soportados tanto en PPC como en SP Controles soportados sólo 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); i 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. 10 5

Gestión de eventos En tiempo de ejecución: En el método InitializeComponent i añadir: 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"; 11 Índice de contenidos Plataformas: PPC vs. SP Windows Forms Recomendaciones oficiales PPC Diseño GUI en PPC Diseño GUI en SP 12 6

Control Button 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. To conserve space, do not include an Apply command button in an application. Instead, use only an OK button. 13 Control CkeckBox Use CheckBox control only when it provides choices that are opposite and unambiguous. Otherwise, use RadioButton. 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. 14 7

Control ComboBox Use ComboBox control in place of RadioButton control to conserve space or when the user needs to add entries to a list. Pre-scroll the list so that the currently selected item is in 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. 15 Control ContextMenu 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. 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. 16 8

Control ListBox A list box displays items a user can select. To enable the user to enter items in a list, use a combo box instead. If a list box maintains state, it should display the currently selected item by default. Use icons to help the user quickly differentiate between types of items. 17 Control ListView 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). 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. 18 9

Control RadioButton 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. Keep option button labels brief to conserve space. 19 Control ProgressBar 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. Keep progress bar labels brief to conserve space. 20 10

Control TabControl Use tabs in an application to group related information and functionality. So that the user does not need to scroll to view the tabs: Avoid creating more tabs than can fit on the screen at one time. Ensure that all of the edit controls are visible on a property sheet when the input panel is displayed. To keep the content area uncluttered at the top of the screen, place tabs at the bottom of the screen. 21 Control TextBox Use text boxes to input single-line and multi-line texts. 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-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. 22 11

Control TreeView A tree view is a list box control that shows the hierarchical relationship of items. Including icons in a tree view helps users distinguish between different types of items such as files and folders. 23 Diseño GUI. Evolución Home Screen PPC Palm-Size PC 1998 Palm-Size PC 1999 Pocket PC 2000 Pocket PC 2001 Smartphone 2002 Smartphone 2003 Windows Mobile 2003 Windows Mobile 2003, SE Windows Mobile 5.0 2005 Windows Mobile 6.0 2007 24 12

Diseño GUI. Recomendaciones generales Diseño de la interfaz es crítico: 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. No sobrecargar la interfaz. Tienen que destacar los datos no la interfaz. Atención a los detalles! 25 Índice de contenidos Plataformas: PPC vs. SP Windows Forms Recomendaciones oficiales PPC Diseño GUI en PPC Diseño GUI en SP 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. 27 Diseño GUI. Trabajo con varias resoluciones A partir de Windows Mobile 2003 SE existen: Distintas orientaciones: horizontal, vertical Distintos tamaños de pantalla: QVGA, VGA, Cuadrada Distintas resoluciones: Resoluciones estándar: 96dpi, 192dpi Se puede tener resoluciones no estándar pero es un caso extremo que no merece la pena contemplar Una pantalla VGA puede estar en VGA (96dpi) o en modo de compatibilidad QVGA (192dpi) 28 14

Diseño GUI. Trabajo con varias resoluciones Comportamiento de aplicaciones antiguas en pantallas VGA 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 Se visualizan scroll-bars para que se pueda ver toda la interfaz 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. Elegir la mejor estrategia según el caso: 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 30 15

Diseño GUI. Orientación 31 Diseño GUI. Resolución y orientación Trabajo con distintas resoluciones http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnppcgen/html/dpi_awareness.asp Trabajo con distintas orientaciones 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: http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnppcgen/html/installation_with_dpi-specific_resources.asp 32 16

Índice de contenidos Plataformas: PPC vs. SP Windows Forms Recomendaciones oficiales PPC Diseño GUI en PPC Diseño GUI en SP 33 Plataforma Smartphone 34 17

Softkeys La softkey de la izquierda suele asociarse a la acción más común La softkey 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 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 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. Softkey Izquierdo: acción más frecuente o Aceptar cuando se está realizando una modificación. Softkey Derecho: Acceso al Menú o Cancelar cuando se está realizando una modificación. Usar Spin-Boxes Sustituyen los combo boxes, list boxes y option buttons Evitar que el usuario tenga que 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 i ASP.NET Mobile Controls: www.asp.net/mobile Desarrollo Tablet PC: www.tabletpcdeveloper.com Preguntas y respuestas 42 21