Client mobile Hello World
Dans ce tutoriel, vous allez créer une application client mobile qui utilise les contrôles d'interface utilisateur suivants :
- Un champ texte pour entrer un nom.
- Un libellé pour afficher un message.
- Un bouton qui, quand vous cliquez dessus, remplira le libellé avec le message "Hello, <nom>!", où <nom> sera le nom entré dans le champ texte.
Sommaire
Créer une nouvelle application
Vous pouvez créer de nouveaux fichiers et projets à partir de la page Nouveau de la vue Accueil. Dans le côté gauche de la vue arborescente, sélectionnez Projets HTML5 Builder, puis double-cliquez sur Application client mobile dans la zone supérieure droite.
Pour votre nouvelle application, une page client mobile (vide) initiale sera créée, et ouverte dans la vue Conception.
La zone centrale de la vue Conception sera occupée par le Concepteur mobile, un outil d'édition graphique de pages mobiles. Vous noterez aussi différents widgets sur les côtés gauche, droit et inférieur du Concepteur mobile. Ceux-ci sont traités en détail dans les autres pages de la documentation, et nous allons travailler avec certains d'entre eux dans ce tutoriel.
Ajouter des contrôles
La première étape de la création d'une application client mobile avec HTML5 Builder est la conception de l'interface utilisateur. De nombreux composants sont disponibles par défaut pour la création d'interfaces utilisateur. Déplacez votre curseur sur la Palette d'outils (le widget situé dans le coin supérieur droit) et développez la catégorie Mobile en cliquant sur l'icône plus (+). Sélectionnez ensuite le composant MEdit et déposez-le sur le Concepteur mobile. Une instance du composant sera affichée sur le Concepteur mobile.
Répétez ces étapes pour l'ajout des composants MLabel et MButton sur le Concepteur mobile.
Vous devriez maintenant voir trois composants sur le Concepteur mobile. Utilisez le pointeur de la souris pour réarranger les composants à votre guise.
Vous pouvez visualiser et changer les propriétés d'un composant en utilisant l'inspecteur d'objets et en sélectionnant le composant sur le Concepteur mobile.
Changez ensuite visuellement le libellé du composant MButton. Vous pouvez laisser les propriétés Caption de MLabel et Text de MEdit vides, puisque la première sera définie par programme, et la deuxième sera entrée par les utilisateurs. Vous devez aussi changer la propriété ButtonType du composant MButton sur btNormal. Ainsi, un clic sur le bouton n'entraînera pas le rechargement de la page web.
Pour changer une propriété d'un composant, sélectionnez le composant sur le Concepteur mobile (ou sur la liste déroulante dans la partie supérieure de l'inspecteur d'objets), changez la valeur de la propriété cible et appuyez sur Enter pour appliquer le changement. Dans l'écran ci-dessus, la propriété Caption du composant MButton a été changée par "Say Hello", et la propriété ButtonType par btNormal.
Ecrire une réponse à un clic de bouton
Pour les applications mobiles, les réponses aux actions de l'utilisateur, telles que des clics sur les boutons ou des entrées dans les champs texte, peuvent être implémentées en tant que réponse à un événement. Dans HTML5 Builder, de telles réponses sont référencées en tant que gestionnaires d'événements.
Pour le composant MButton, l'événement le plus typique est un clic sur le bouton. Quand vous double-cliquez sur le contrôle MButton sur le Concepteur mobile, HTML5 Builder crée un code squelette afin d'implémenter un gestionnaire d'événements pour l'événement clic de bouton.
Vous pouvez maintenant implémenter des réponses entre les accolades. Implémentons une réponse pour afficher un message dans le composant MLabel : "Hello, <nom entré dans le composant MEdit>!".
$('#MLabel1').html("Hello, " + $('#MEdit1').val() + "!");
La méthode html() du jQuery vous permet de définir le contenu d'un élément tel qu'un MLabel, tandis que val() vous permet de récupérer la valeur d'un champ d'entrée tel qu'un contrôle MEdit. Dans JavaScript, les marques de délimitation qui doivent encadrer les littéraux chaîne sont ' ' ou " ". Vous pouvez aussi utiliser le signe plus (+) pour concaténer des chaînes.
Quand vous tapez du code, vous obtenez des conseils indiquant les types des membres qui sont supportés dans un objet donné, c'est-à-dire les propriétés et les méthodes des éléments JavaScript (et jQuery) représentant vos composants.
L'implémentation de cette application est terminée, vous pouvez donc l'exécuter : cliquez sur le bouton Exécuter dans la barre d'outils principale ou appuyez sur F9. Afin d'obtenir des résultats proches de ceux obtenus quand vous exécutez votre application dans un périphérique réel, vous devez utiliser le navigateur Chrome, ou accéder à l'application à distance à partir d'un navigateur mobile. Voir Exécution mobile.
Dès que vous exécutez l'application, la page mobile avec un MEdit et un MButton est chargée sur votre navigateur web par défaut. Entrez un texte dans le composant MEdit et cliquez sur le bouton Say Hello.
Déployer votre application
Vous pouvez déployer votre application sur tout système mobile majeur comme une application native depuis Accueil > Déployer sur mobile. Les plates-formes supportées sont iOS, Android, BlackBerry, Windows Phone, Symbian et WebOS.
