Dans ce tutoriel nous allons utiliser le Designer pour crééer un 'layout' (mise en page d'une activité). Le 'layout' contiendra une EditText (champ texte) et un Button (bouton).
L'utilisateur doit deviner un nombre généré aléatoirement. Il entre son nombre dans le champ texte (EditText) et clique sur le bouton (Button) pour transmettre au programme le nombre deviné.
Un "toast" message sera affiché, indicant à l'utilisateur si le nombre est plus grand ou plus petit que le nombre généré par le programme. Un "toast" message est un message qui apparaît pour une courte durée puis disparaît.
- Créez un nouveau projet et sauvez le.
- Ouvrez le Designer en cliquant sur Designer dans le menu.
Le Designer est composé de deux composants principaux. Le "control panel" (panneau de contrôle) qui contient toutes les propriétés et options disponibles, et fait partie intégrante du IDE:
et un composant "visuel" qui tourne sur un appareil ou dans l'émulateur:
Le composant visuel, comme son nom le suggère, affiche le 'layout' (mise en page). Il permet également de déplacer et redimensionner les 'views' (objets).
Un changement dans le composant visuel change également les valeurs des paramètres correspondants dans le panneau de contrôle du Designer.
Notez que toutes les données sont mémorisées dans le Designer. Donc rien de fâcheux ne peut survenir si l'émulateur 'se plante' ou est fermé.
Vous pouvez le redémarrer, le connecter et le layout sera à nouveau affiché.
La première étape consiste à se connecter à l'appareil. Sélectionnez dans le menu Tools - Connect.
Cette étape peut prendre bien quelques secondes. Notez que l'IDE reste connecté jusqu'à ce qu'il soit fermé. La fermeture du Designer ne supprime pas la connection.
Cliquez dans le menu Add View sur Button pour ajouter un bouton au layout, sur EditText pour ajouter un champ texte et sur Label pour ajouter une étiquette.
Changez les propriétés Text des 'views' et positionnez les conformément à l'image ci-dessous:
Changez la propriété Drawable de l'Activity en GradientDrawable pour obtenir un effet de dégradé.
Conseil: Si vous travaillez avec un petit écran il peut être pratique de cocher la case "Top Most" dans le coin supérieur droite afin de maintenir le Designer au premier plan et éviter qu'il ne soit caché par l'émulateur.
Sauvez le layout, sous le nom Layout1.
Un point important est qu'il y a une séparation complète entre le code et les layouts.
Le layout est sauvé dans un fichier avec l'extension ".bal". Chaque projet peut avoir un nombre quelconque de ces fichier de layout et tant qu'un de ces fichiers n'est pas explicitement chargé dans le programme il n'a aucun impact sur celui-ci.
Dès que vous avez sauvé le layout, il est automatiquement ajouté dans le gestionnaire de fichiers. Vous pouvez constater sa présence dans l'IDE à droite dans la rubrique Files.
Nous voulons capter l'évènement Click du bouton.
Chaque 'view' a une propriété 'EventName' qui correspond au nom générique des routines d'évènement de cette 'view'. C'est une propriété dans le Designer, et un paramètrer passé dans la méthode Initialize si on ajoute une 'view' dans le code.
Pour pouvoir capter un évènement vous devez écrire une Sub avec la structure ci-dessous (c'est plus simpls qu'il n'y parait):
Sub <EventName>_<Event> (event parameters).
<EventName> nom générique des évènements
<Event> nom de l'évènement
(event parameters) paramètres de l'évènement.
Dans le Designer, la propriété EventName est a par défaut le nom de la view.
Si nous voulons capter l'évènement Click d'un bouton avec le EventName Button1 nous devons écrire le code suivant:
Sub Button1_Click
Voici le code code:
Code:
Sub Process_Globals
End Sub
Sub Globals Dim MyNumber AsInt Dim EditText1 AsEditText'will hold a reference to the view added by the designer End Sub
Sub Activity_Create(FirstTime AsBoolean) Activity.LoadLayout("Layout1") 'Load the layout file. MyNumber = Rnd(1, 100) 'Choose a random number between 1 to 99 End Sub
Sub Button1_Click If EditText1.Text > MyNumber Then ToastMessageShow("My number is smaller.", False) ElseIf EditText1.Text < MyNumber Then ToastMessageShow("My number is larger.", False) Else ToastMessageShow("Well done.", True) EndIf EditText1.SelectAll End Sub
Quelques notes:
- Chaque module d'activité contient un objet Activity qui permet d'accéder à cette.
- Activity.LoadLayout charge le fichier layout. - D'autres views peuvent charger des fichiers layout. Tel que Panel et TabHost. Pour TabHost, chaque page peut être créée en chargeant un fichier layout.
- Pour pouvoir accéder à une view, ajoutée dans le Designer, nous devons la déclarer dans la routine Sub Globals au moyen du mot clé Dim.
- ToastMessageShow affiche un court message qui disparaît après une courte période.
L'utilisation d'un 'toast message' n'est pas optimum dans ce cas car il peut être manqué si le clavier virtuel est ouvert..
Conseil pour l'écriture de routines d'évènement: Dans l'IDE, écrivez Sub et pressez Espace. Vous allez voir une aide locale indicant "press tab to insert event declaration" (pressez Tab pour insérer une déclaration d'èvénement).
Pressez Tab, sélectionnez le type d'objet pressez Enter.
Maintenant tout ce qu'il reste à faire est de cliquer sur le nom de l'évènement et presser Enter.
Support de multiples résolutions d'écran et orientations
Chaque fichier layout peut contenir plusieurs variantes de layout. Chaque variante de layout contient un jeu de valeurs pour les positions et dimensions des views.
Si par exemple, vous changez la valeur de la propriété Text d'une view elle sera automatiquement modifiée dans toutes les variantes. Par contre, si vous changez la position ou une dimension d'une view, leur valeurs ne sont changées que dans la variante active.
Notez qu'une mise à l'échelle automatique peut être générée si nécessaire. Ce qui veut dire que si nous lançons notre programme sur un appareil à haute résolution, le layout sera mis à l'échelle automatiquement.
Vous pouvez néanmoins créer des variantes de layout pour ces différentes résolutions d'écran donc échelles.
Lorsque vous chargez un fichier layout, c'est la variante qui correspond au mieux à l'appareil actuel qui est chargé.
En principe vous avez besoin de deux variantes:
- 320 x 480, scale = 1 (160 dpi). Ceci est l'échelle par défaut en mode portrait.
- 480 x 320, scale = 1 (160 dpi). Echelle par défaut en mode paysage.
Ouvrez le Designer à nouveau. Chargez le fichier Layout1 s'il n'est pas déjà chargé.
Cliquez sur "New Variant" et sélectionnez 480 x 320 (second option).
Changez l'orientation de l'émulateur en cliquant sur l'émulateur et en pressant Ctrl + F11.
Notez que les détails du layout apparaissent sous la liste des variantes.
Changez le layout comme ci-dessous:
Vous pouvez changer la variante actuelle et voir l'effet sur le layout.
Sauvez le layout et lancez le programme.
Changez l'orientation de l'émulateur et constatez comment le layout change en fonction de l'orientation.
Android détruit l'ancienne activité et en crée une nouvelle à chaque changement d'orientation. De ce fait, Activity.LoadLayout sera appelé à chaque fois. Malheureusement le nombre aléatoire sera aussi généré à nouveau chaque fois. Ceci peut être résolu, mais dépasse le cadre de ce tutoriel.
Le projet se trouve sous le lien ci-dessous.
Dernier conseil pour ce tutoriel:
- L'IDE contient une fonction "Export As Zip" dans le menu Files. Cette fonction crée un fichier zip avec tous les fichiers nécessaires au projet.
Designer visuel et gestion d'évènements
Linear Mode
