L interface graphique de l utilisateur en Windows Mobile

L interface graphique de l utilisateur en Windows Mobile Z

2 Chapitre 3 - Interface Utilisateur Windows Mobile Sommaire 1 Introduction... 3 2 Une GUI limitée... 3 3 Les quelques différences de comportements entre les Windows Form du.net Framework et ceux du.net Compact Framework... 3 4 Implémenter des contrôles depuis l interface graphique de l utilisateur... 4 4.1 Créer des contrôles... 4 4.2 Les membres des contrôles... 5 4.3 Les contrôles List-Based... 7 4.3.1 La ListBox... 7 4.3.2 La ComboBox... 10 4.3.3 La ListView... 11 4.3.4 Le TreeView... 12 4.3.5 Le NumericUpDown et le DomainUpDown... 13 4.4 Gérer les éléments au sein d un contrôle List-Based... 14 4.4.1 Ajouter ou supprimer des éléments... 14 4.5 Des contrôles permettant de choisir... 18 4.5.1 La CheckBox... 18 4.5.2 Le RadioButton... 19 4.5.3 Le TrackBar... 19 4.6 Les contrôles d états... 20 4.6.1 Le ProgressBar... 20 4.6.2 Le StatusBar... 21 4.7 Afficher des images... 22 4.7.1 PictureBox... 22 4.7.2 ImageList... 23 4.8 Le bouton, contrôle indispensable... 24 5 Conclusion... 24

3 Chapitre 3 - Interface Utilisateur Windows Mobile 1 Introduction Avant d approcher en profondeur la programmation en Windows Mobile, nous allons vous familiariser avec l interface graphique de l utilisateur (GUI en anglais). Cela vous permettra de mieux démarrer une application destinée aux appareils mobiles. Vous devez garder à l esprit que la particularité et les caractéristiques de l interface graphique de l utilisateur en Windows Mobile sont assez différentes de celles que nous pouvons trouver en Windows Form par exemple. Le nombre de couleur est limité, un clavier virtuel peut être implémenté pour la saisie de données. Nous verrons donc dans ce chapitre ce que nous permet de réaliser l interface graphique de l utilisateur, nous procurerons les différents contrôles de la GUI et enfin nous distinguerons les différents comportements de certains points sur les formulaires Windows Mobile. 2 Une GUI limitée Le.NET Compact Framework a été conçu pour ses performances et sa taille qui lui permet une mobilité totale. Il faut aussi partir de l idée que la GUI du.net Compact Framework pour Windows Mobile fonctionne sur des résolutions réduites et que la gestion de la mémoire est plus limitée que sur un PC. De plus, l espace de nom System.Windows.Form qui intègre tous les composants et la gestion de la GUI possède plus de restrictions dans le.net Compact Framework : pas de drag-anddrop, pas d impression, pas de support pour les contrôles ActiveX, le support graphique est limité et un support pour un sous-ensemble d événements, de propriétés et de méthodes (par exemple l événement GotFocus est pris en charge dans le.net Compact Framework mais pas l événement Activated). 3 Les quelques différences de comportement entre les Windows Form du.net Framework et ceux du.net Compact Framework Au sein du.net Compact Framework il existe plusieurs différences de propriétés, de méthodes et d événements qui sont listées ci-dessous : - KeyPreview : il n existe pas de propriété KeyPreview pour les formulaires dans le.net Compact Framework. Dans le.net Framework cette propriété permet aux événements des formulaires de recevoir les événements du clavier avant les événements des contrôles actifs des formulaires. - Les événements claviers : les événements comme KeyUp ou encore KeyPress sont très peu présents dans le.net Compact Framework. Il n existe que pour le formulaire, la TextBox et les contrôles personnalisés lorsque vous faites hériter ces contrôles l espace de nom System.Windows.Forms.Control. - Les événements Paint et Resize : ces événements ne sont présents que pour le formulaire, le Panel et la PictureBox. Donc vous ne pourrez pas utiliser ces événements pour les contrôles personnalisés qui découlent d un contrôle. - IsMdiContainer : vous ne pouvez pas créer de MDI (Multiple Document Interface) dans le.net Compact Framework.

4 Chapitre 3 - Interface Utilisateur Windows Mobile 4 Implémenter des contrôles depuis l interface graphique de l utilisateur 4.1 Créer des contrôles Comme dans les technologies Windows Form ou encore ASP.NET, vous pouvez implémenter vos contrôles dans votre formulaire d un projet Smart Device depuis le Designer en effectuant le «glisser-déposer» avec votre boite à outils. Cependant vous pouvez aussi les implémenter dans la partie code de votre projet. Partie Design : Effectuer un Drag-and-Drop depuis votre boite à outils dans la partie Design de votre projet Smart Device. Partie code : écrivez votre code dans la partie d initialisation des composants afin d implémenter votre contrôle. Pour cela vous allez dans votre Explorateur de solutions, faites un clic droit sur votre formulaire et sélectionnez «Afficher le code». Vous accéderez ainsi à la partie code de votre formulaire (par défaut nomdevotreformulaire.cs pour le C# ou nomdevotreformulaire.vb pour le Visual Basic). En Visual Basic il faut sélectionner dans la DropDownList InitializeComponent pour accéder à la page nomdevotreformulaire.designer.vb comme ci-dessous

5 Chapitre 3 - Interface Utilisateur Windows Mobile Puis vous tapez votre code : //C# public Form1() { InitializeComponent(); Button testbutton = new Button(); testbutton.text = "Test"; this.controls.add(testbutton); } VB.NET Private Sub InitializeComponent() Dim TestButton As New Button() TestButton.Text = "Test" Me.Controls.Add(TestButton) End Sub 4.2 Les membres des contrôles Vous pouvez modifier les propriétés de vos contrôles comme en Windows Form depuis l interface graphique de l utilisateur ou bien dans la partie code de votre formulaire contenant le(s) contrôle(s).

6 Chapitre 3 - Interface Utilisateur Windows Mobile Faites un clic droit sur votre contrôle et sélectionnez Propriétés. Une nouvelle fenêtre s affiche et présente les différentes propriétés du contrôle. Vous pouvez aussi accéder aux événements auxquels est attaché le contrôle en question. L utilisation des méthodes dans le.net Compact Framework s opère de la même façon que dans le.net Framework. Cela s applique aussi pour les événements sauf pour ceux qui ne sont pas supportés par le.net Compact Framework.

7 Chapitre 3 - Interface Utilisateur Windows Mobile 4.3 Les contrôles List-Based Les contrôles List-Display sont des contrôles qui permettent d afficher une liste d affichage de plusieurs éléments. 4.3.1 La ListBox Ce contrôle est présent que pour les projets Windows CE et PDA. Il permet simplement d afficher une liste d éléments qui permet à un utilisateur de procéder à un choix d éléments ou encore d ajouter/supprimer des éléments. Voici un aperçu d un contrôle ListBox.

8 Chapitre 3 - Interface Utilisateur Windows Mobile Propriété DataSource DisplayMember Items SelectedIndex SelectedItem SelectedValue ValueMember Description Définit la source de données dans ce contrôle. Représente la source membre affichée dans ce contrôle. Contient la collection d éléments de la ListBox. Définit l index (de base 0) de l élément sélectionné dans la ListBox. Cependant si SelectionMode est défini sur MultiSimple ou MultiExtended alors n importe quel élément sélectionné est retourné. Renvoie l élément sélectionné. Cependant si SelectionMode est défini sur MultiSimple ou MultiExtended alors n importe quel élément sélectionné est retourné. Si la valeur dans la propriété ValueMember n est pas spécifiée, alors SelectedValue retourne les résultats selon la méthode ToString de l objet. Indique la propriété à utiliser comme valeur réelle pour les éléments du contrôle. Remarque : Les propriétés SelectedItem, SelectedIndex et SelectedValue se situent dans l option (DataBindings) que vous devez développer pour les afficher.

9 Chapitre 3 - Interface Utilisateur Windows Mobile Vous pouvez modifier les éléments de votre contrôle depuis la partie Design de votre projet. Une nouvelle fenêtre s ouvre intitulée Éditeur de collections String. Vous ajouterez ainsi les éléments que vous voulez faire apparaitre dans votre contrôle.

10 Chapitre 3 - Interface Utilisateur Windows Mobile Vous avez aussi la possibilité d ajouter des éléments depuis le code de votre projet. Pour cela il vous suffit d intégrer la méthode Add. //C# public Form1() { InitializeComponent(); listboxtest.items.add("hello"); } VB.NET Private Sub InitializeComponent() ListBox1.Items.Add("hello") End Sub Remarque : Ce contrôle n est pas disponible pour les SmartPhones. 4.3.2 La ComboBox Le contrôle ComboBox permet d afficher une liste déroulante de plusieurs options présentées à l utilisateur, il s apparente donc au contrôle ListBox. Ce contrôle peut être implémenté sur un Pocket PC comme sur un SmartPhone ou encore dans un projet Windows CE. Nous allons ainsi vous présenter les principales propriétés de ce contrôle : Propriété DataSource DisplayMember DropDownStyle Items SelectedIndex SelectedItem SelectedValue Description Définit la source de données dans ce contrôle. Représente la source membre affichée dans ce contrôle. Détermine le style du contrôle. Contient la collection d éléments de la ListBox. Définit l index (de base 0) de l élément sélectionné dans la ListBox. Cependant si SelectionMode est défini sur MultiSimple ou MultiExtended alors n importe quel élément sélectionné est retourné. Renvoie l élément sélectionné. Cependant si SelectionMode est défini sur MultiSimple ou MultiExtended alors n importe quel élément sélectionné est retourné. Si la valeur dans la propriété ValueMember n est pas spécifiée, alors SelectedValue retourne les

11 Chapitre 3 - Interface Utilisateur Windows Mobile résultats selon la méthode ToString de l objet. ValueMember Indique la propriété à utiliser comme valeur réelle pour les éléments du contrôle. 4.3.3 La ListView Le contrôle ListView permet d avoir une liste d élément avec des icônes de la même façon que Windows Explorer. Voici quelques propriétés de la ListView : Propriété Columns CheckedBoxes FullRowSelect Items LargeImageList SmallImageList View Description Permet d obtenir une collection d en-tête de colonnes lorsque la propriété View est définie sur Details. Indique si des cases à cocher sont affichées à coté des éléments. Indique si les sous-éléments sont mis en évidence lorsqu un élément est sélectionné. Charge une collection d éléments qui seront affichés dans la ListView. Définit comment les images du contrôle ImageList seront affichées. Ici elles seront sous forme de grandes icones. Définit comment les images du contrôle ImageList seront affichées. Ici elles seront sous forme de petites icones. Indique de quelle façon la ListView sera affichée. Pour ajouter des nouveaux éléments dans votre contrôle depuis la GUI vous devez sélectionner la propriété Items qui ouvre une fenêtre de collections d éléments qui vous permettra de gérer ou modifier vos éléments de votre ListView.

12 Chapitre 3 - Interface Utilisateur Windows Mobile Lorsque vous sélectionnez la propriété Items, celle-ci ouvre une fenêtre intitulée Éditeur de collections ListViewItem Dans cet éditeur on peut retrouver aussi quelques propriétés tels que Text ou encore BackColor. La propriété SubItems permet d accéder à un éditeur pour les sous-éléments de l élément sélectionné. 4.3.4 Le TreeView Ce contrôle permet comme en Windows Form d afficher de façon hiérarchique plusieurs éléments. Sa propriété la plus importante est Node qui permet d ouvrir un éditeur de Nœuds qui vous permettra de gérer vos éléments. Voici quelques propriétés du TreeView : Propriété Nodes ShowLines ShowPlusMinus Description Ouvre un éditeur TreeNode qui permet de gérer vos différents éléments. Permet d afficher les lignes entre les nœuds frères ainsi que les lignes entre le nœud parent et le nœud enfant. Indique si les boutons s affichent plus ou moins

13 Chapitre 3 - Interface Utilisateur Windows Mobile à coté du nœud parent. ShowRootLines Permet d afficher les lignes entre les nœuds racines. Remarque : Les propriétés de l éditeur TreeNode sont assez limitées par rapport à celles qui sont présentes en Windows Form. 4.3.5 Le NumericUpDown et le DomainUpDown Ces deux contrôles ne sont présents que pour Windows CE et les projets Smart Device pour PDA. Tout comme les autres contrôles, ceux-ci sont limités au niveau des propriétés (ex : la propriété Hexadecimal n est pas présente dans le.net Compact Framework). Dans un premier temps, parlons du contrôle NumericUpDown qui est une zone de texte contenant une valeur numérique. L utilisateur choisit ainsi le nombre qu il souhaite en cliquant sur les flèches. Dans le tableau suivant vous retrouverez les propriétés les plus importantes du contrôle NumericUpDown : Propriété Increment Maximum Minimum Value Description Obtient ou définie la valeur pour incrémenter ou décrémenter la zone de sélection numérique lors d un clic. Indique la valeur maximale du contrôle. Indique la valeur minimale du contrôle. Obtient ou Fixe la valeur actuelle du contrôle. Ensuite nous avons le DomainUp Down qui possède la même définition que le contrôle NumericUpDown, cependant ce contrôle affiche une valeur de chaîne au lieu d une valeur numérique.

14 Chapitre 3 - Interface Utilisateur Windows Mobile Voici quelques propriétés les plus utilisées et les plus importantes : Propriété Items ReadOnly Text Description Contient les collections de chaîne qui s affichereront dans ce contrôle. Détermine si le texte du contrôle pourra être modifié par l utilisateur. Obtient ou définit le texte du contrôle DomainUpDown. Remarque : Ces contrôles ne sont pas disponibles pour les SmartPhones. 4.4 Gérer les éléments au sein d un contrôle List-Based 4.4.1 Ajouter ou supprimer des éléments Vous avez deux possibilités d ajouter ou de supprimer des éléments d un contrôle List-Based : la méthode via GUI (ou l interface graphique de l utilisateur) ou via le code. L avantage de la méthode GUI c est qu elle permet d ajouter ou de supprimer des éléments avant la conception et donc d initialiser, en quelque sorte, votre projet avant toute exécution. Cependant grâce au code vous pouvez non seulement initialiser des éléments mais aussi permettre d ajouter de nouveaux éléments lors de l exécution de votre application. Par exemple vous pouvez définir un bouton qui ajoute dans un contrôle ListBox toutes les chaînes de caractères qui sont entrées dans une TextBox. Nous allons voir tout d abord la méthode GUI : Pour ajouter ou supprimer des éléments avec la GUI d un contrôle List-Based lors de la conception, il vous suffit d accéder à ses propriétés et de sélectionner la propriété Items qui permet d ouvrir un éditeur de collections d éléments.

15 Chapitre 3 - Interface Utilisateur Windows Mobile On ajoute plusieurs éléments dans l éditeur de collections d éléments. Une fois validé, le contrôle ListBox affiche les éléments ajoutés.

16 Chapitre 3 - Interface Utilisateur Windows Mobile Ensuite nous avons la méthode de programmation grâce à Add, Remove, RemoveAt, Insert ou encore Clear : La méthode Add vous permet d ajouter des éléments dans votre contrôle. //C# public Form1() { InitializeComponent(); listbox1.items.add("bonjour"); listbox1.items.add("good Morning"); listbox1.items.add("buenos Dias"); } VB.NET Private Sub InitializeComponent() Me.ListBox1.Items.Add("Bonjour") Me.ListBox1.Items.Add("Good Morning") Me.ListBox1.Items.Add("Buenos Dias") End Sub

17 Chapitre 3 - Interface Utilisateur Windows Mobile Pour la méthode Remove qui permet de supprimer, nous avons ajouté des éléments avec l interface graphique de l utilisateur : Bonjour, Good morning, Buenos Dias. Puis nous supprimons le dernier élément Buenos Dias grâce à la méthode Remove : //C# public Form1() { InitializeComponent(); listbox1.items.remove("buenos Dias"); } VB.NET Private Sub InitializeComponent() Me.ListBox1.Items.Remove("Buenos Dias") End Sub Remarque : La méthode AddRange n est pas présente dans le.net Compact Framework. Celle-ci vous permettait d ajouter plusieurs éléments sur une seule ligne de code, ce qui évitait ainsi la lourdeur du code lorsque celui-ci comprend un grand nombre d éléments à mettre en place dans un contrôle List-Based. Ensuite si vous voulez insérer ou supprimer un élément particulier sans pour autant détruire votre liste d éléments, vous devrez utiliser respectivement les méthodes Insert et RemoveAt, comme dans les exemples ci-dessous : //C# public Form1() { InitializeComponent(); listbox1.items.insert(1, "Bonsoir"); } VB.NET Private Sub InitializeComponent() Me.ListBox1.Items.Insert(1, "Bonsoir") End Sub

18 Chapitre 3 - Interface Utilisateur Windows Mobile //C# public Form1() { InitializeComponent(); listbox1.items.removeat(1); } VB.NET Private Sub InitializeComponent() Me.ListBox1.Items.RemoveAt(1) End Sub Remarque : L index que vous devez spécifier pour insérer ou supprimer un élément particulier comme à partir de 0. Donc l index 0 correspond au premier élément de la liste d éléments du contrôle List-Based. 4.5 Des contrôles permettant de choisir 4.5.1 La CheckBox La CheckBox est un contrôle permettant à l utilisateur de cocher selon son choix un ou plusieurs éléments qui sont en interaction avec lui. Il existe trois types de statut pour ce contrôle : coché, décoché ou indéterminé (Checked, Unchecked or Indeterminate). Le dernier statut nécessite que la propriété TreeState soit déterminée sur true. Ainsi lorsque la propriété est définie sur ce statut, le contrôle apparait grisé. De plus si la propriété AutoCheck est activée alors le statut sera automatiquement changé, notamment lorsque celui est défini sur Indeterminate. Le code ci-dessous montre comment utiliser ce statut particulier. //C# public Form1() { InitializeComponent(); checkbox1.threestate = true; checkbox1.checkstate = CheckState.Indeterminate; checkbox1.autocheck = false; } VB.NET Private Sub InitializeComponent() Me.CheckBox1.AutoCheck = False Me.CheckBox1.ThreeState = True Me.CheckBox1.CheckState = CheckState.Indeterminate End Sub Remarque : Le statut Indeterminate est surtout utilisé pour des paramètres par défaut.

19 Chapitre 3 - Interface Utilisateur Windows Mobile 4.5.2 Le RadioButton Ce contrôle est de la même nature que le contrôle CheckBox, cependant il ne peut offrir qu une seule option à choisir pour l utilisateur. C'est-à-dire que l utilisateur ne pourra sélectionner qu un seul RadioButton parmi plusieurs. Par exemple si votre application a pour but de créer un QCM, il y aura certaines questions qui ne comprendront qu une seule réponse. Il faut donc faire en sorte que l utilisateur sélectionne qu une seule solution d où l utilisation d un RadioButton. Remarque : Ce contrôle n est pas disponible pour les SmartPhones. 4.5.3 Le TrackBar Le TrackBar est un contrôle qui affiche un curseur pouvant se déplacer sur une ligne de valeurs. L utilisateur peut ainsi choisir une valeur en déplaçant le curseur.

20 Chapitre 3 - Interface Utilisateur Windows Mobile Voici les principales propriétés de ce contrôle : Type de Propriété LargeChange Maximum Minimum SmallChange TickFrequency TickStyle Value Description Il permet de définir de combien de rang augmente votre flèche en cliquant avec la souris. Par exemple si la valeur définie est 3, en cliquant avec votre souris, le curseur augmentera de 3 barres. Définit le nombre maximum de valeur sur votre barre. Définit le nombre minimum de valeur sur votre barre. Il permet de définir de combien de rang augmente votre flèche en cliquant avec les touches de votre clavier. Par exemple si la valeur définie est 3, en cliquant avec votre clavier, le curseur augmentera de 3 barres. Permet d indiquer le nombre de position que le curseur peut prendre entre chaque rangée. Permet d indiquer où sont les Tick sur la TrackBar. Définit la valeur retournée par la TrackBar. Remarque : Ce contrôle n est pas disponible pour les SmartPhones. 4.6 Les contrôles d états Il existe deux contrôles principaux qui permettent d identifier un état de chargement : le ProgressBar et le StatusBar. 4.6.1 Le ProgressBar Le contrôle ProgressBar permet d identifier l état de chargement ou d avancement d une tâche (par exemple le chargement d un fichier).

21 Chapitre 3 - Interface Utilisateur Windows Mobile 4.6.2 Le StatusBar Le contrôle StatusBar est une zone qui se trouve en bas du formulaire et qui permet d afficher des informations d états (un peu comme pour une page web). Le Statusbar peut être une alternative au contrôle ProgressBar lorsque la procédure est assez longue. Remarque : Ce contrôle n est pas disponible pour les SmartPhones.

22 Chapitre 3 - Interface Utilisateur Windows Mobile 4.7 Afficher des images 4.7.1 PictureBox Pour afficher une seule image, vous devez utiliser le contrôle PictureBox. Comme dans l exemple cidessous : //C# public Form1() { InitializeComponent(); Bitmap NewImage = new Bitmap(@"C:\Users\Desktop\DotNet- France.png"); picturebox1.image = NewImage; } VB.NET Private Sub InitializeComponent() Dim NewImage As New Bitmap("C:\Users\Ketin\Desktop\DotNet- France.png") Me.PictureBox1.Image = NewImage End Sub Vous pouvez aussi charger votre image dans votre contrôle depuis la propriété Image via le GUI. Vous aurez ainsi un aperçu avant l exécution de votre application.

23 Chapitre 3 - Interface Utilisateur Windows Mobile Remarque : le redimensionnement n est pas disponible dans le.net Compact Framework (avec la propriété resize présent dans la version complète du.net Framework). Il vous faudra donc utiliser les méthodes disponibles dans l espace de nom System.Drawing. 4.7.2 ImageList Le contrôle ImageList est un container d images. Ainsi contrairement au contrôle PictureBox on peut insérer plusieurs images dans un seul contrôle (exemple : galerie d images). On dit aussi que c est un gestionnaire d images. Vous avez la possibilité comme le contrôle Picturebox de charger vos images depuis la propriété Image qui ouvre un éditeur de collections d images.

24 Chapitre 3 - Interface Utilisateur Windows Mobile Ou bien vous pouvez gérer vos images depuis la partie code de votre application. 4.8 Le bouton, contrôle indispensable Le contrôle Bouton est le contrôle le plus utilisé comme en Windows. C est ce contrôle qui interagit essentiellement avec l utilisateur. Les différents événements que comporte le Bouton permettent de charger un fichier ou encore d entrer un nouvel élément dans un contrôle List-Based. Cependant ce contrôle reste assez limité au niveau de ses options d amélioration contrairement en Windows Form. C est pourquoi vous pouvez toujours créer votre propre Bouton appelé Custom Control que nous verrons dans un autre chapitre. Remarque : Le contrôle Bouton n est pas présent pour les Smartphones puisque tous les boutons nécessaire dans un téléphone sont prédéfinis mais vous pouvez toujours changer la fonction de ces boutons. 5 Conclusion Vous avez donc vu dans ce chapitre l interface graphique de l utilisateur en manipulant et en découvrant les différents contrôles que peut offrir le.net Compact Framework. Même si ceux-ci restent assez limités au niveau des options d amélioration, ils restent tout de même indispensables. Ce chapitre vous permet ainsi d avoir une première approche sur les contrôles de Windows Mobile et d avoir une vue d ensemble sur ce que cette technologie peut apporter aux appareils mobiles.