Guide de Démarrage Desktop Release 1 Xojo, Inc.

Transcription

1 Guide de Démarrage Desktop 2014 Release 1 Xojo, Inc.

2 Chapitre 1 Introduction Bienvenue dans Xojo, le moyen le plus facile de créer des applications desktop and web multiplateformes.

3 Section 1 À propos de ce guide DEMARRER XOJO 1. Téléchargez l installeur pour votre OS ici: 2. Lancez l installeur. 3. Lancez Xojo. 4. Dans le dialogue Project Chooser, choisissez Desktop et cliquez sur OK. À propos de ce guide Bienvenue dans Xojo, l outil le plus facile pour créer des applications multiplateforme desktop et web. Xojo propose un ensemble complet d objets d interface utilisateur, un langage moderne et orienté objet, un débogueur intégré, et un compilateur multiplateforme. Ensemble ils forment l IDE Xojo (Integrated Development Environment). Avec cet IDE, vous pouvez créer l interface de vos applications par simple glisser-déposer d objets d interface sur les fenêtres et dialogues de vos applications. Dans ce guide, vous allez voir à quel point c est simple. Xojo vous donne tous les outils dont vous avez besoin pour créer tout type d application avec pour limite, votre imagination. Ce guide aux personnes nouvelles en programmation et nouvelles dans Xojo. Il propose une agréable introduction à l environnement de développement Xojo et et vous conduit tout au long du processus de développement d une application desktop réelle (un simple navigateur web). Vous aurez besoin de 15 à 20 minutes pour suivre ce guide. Copyright Tous les contenus demeurent sous le copyright 2014 de Xojo, Inc. Tous droits réservés. Tout ou partie de ce document ou de fichiers relatifs ne peuvent être 2

4 reproduits ou transmis sous quelque forme que ce soit (électronique, photocopies, enregistrements, ou autre) sans l accord écrit de son auteur. Marques Déposées Xojo une marque déposée de Xojo, Inc. Ce livre identifie des noms de services et de produits qui sont des marques, des marques enregistrées, ou services qui sont la propriété de leurs auteurs. Ils sont utilisés tout au long de ce livre dans un but éditorial seulement. De plus, les termes correspondant à des marques, marques enregistrées, ou services ressortent au niveau typographique, même si Xojo, Inc. ne peut attester de l exactitude de l information. L utilisation d un terme dans ce livre ne doit pas être compris comme pouvant affecter la validité d une marque, d une marque enregistrée, ou d un service. Xojo, Inc. n est pas associé à ces produits et services. 3

5 Section 2 Conventions de Présentation Ce guide utilise des images-écran prises avec les versions Windows, OS X et Linux de Xojo. La création d interfaces et l ensemble des fonctionnalités sont identiques sur toutes les plateformes, à l exception de différences cosmétiques dues aux différences entre les interfaces utilisateur de Windows, OS X, et Linux. Le type Gras pour faire ressortir la première utilisation d un nouveau terme ou pour souligner un concept important. De plus, les titres de livres, comme Xojo User Guide, apparaissent en italiques. Lorsqu il vous est demandé de choisir un élément d un menu, vous verrez quelque chose comme choisissez File New Project. C est l équivalent de choisissez New Project dans le menu File. Les raccourcis clavier consistent en une séquence de touches qui doivent être pressées dans l ordre listé. Sous Windows et Linux, la touche Ctrl est le modifier; sous OS X, la touche (Command) est le modifier.par exemple, lorsque vous voyez le raccourci Ctrl+O ou -O, cela indique de garder la touche Control appuyée sur un ordinateur Windows ou Linux et de presser la touche O ou de garder la touche appuyée sous OS X et de presser la touche O. Vous relachez la touche modifier seulement après avoir utilisé la touche de raccourci. Ce que vous êtes supposé taper est placé entre guillements, comme GoButton. Des étapes vous demandent d entrer des lignes de code dans l Éditeur de Code. Elles apparaissent dans un rectangle grisé: ShowURL(SelectedURL.Text) Quand vous entrez du code, merci d observer ces règles: Tapez chaque ligne imprimée sur une ligne séparée dans l Éditeur de Code. N essayez pas de coller plusieurs lignes imprimées sur une seul ligne ou de couper une longue ligne en plusieurs lignes. N ajoutez pas d espaces supplémentaires lorsque ce n est pas indiqué. Bien entendu, vous pouvez copier-coller du code. 4

6 Lorsque vous exécutez une application, Xojo vérifie d abord votre code et les erreurs de syntaxe. Si cette vérification révèle une erreur, Une zone d érreurs apparaît au bas de la fenêtre principale pour vous permettre d en prendre connaissance. 5

7 Section 3 Démarrer Démarrez Xojo Si ce n est déjà pas fait, c est le moment de lancer Xojo. 1. Double-cliquez sur l icône de l application Xojo pour lancer Xojo. Chargé, le dialogue Project Chooser apparaît. Figure 1.1 Dialogue Project Chooser 2. Xojo vous permet de créer trois types d applications (Desktop, Web et Console). Pour ce guide, vous allez créer une application Desktop, donc cliquez sur Desktop. 3. Vous devriez désormais voir trois champs à remplir: Application Name, Company Name et Application Identifier. Application Name est le nom de votre application. Ce sera le nom du fichier de l application qui sera créé. Company Name est le nom de votre société. Vous pouvez choisir de le laisser vide. Application Identifier est un identificateur unique pour cette application. Il sera automatiquement complété en utilisant ce que vous avez entré dans Application Name et Company Name, mais vous pouvez le modifier par ce que vous voulez. Entrez "SimpleBrowser" en tant que Application Name. Laissez Company Name tel quel ou changez-le. 4. Cliquez OK pour ouvrir la fenêtre principale de Xojo (appelé Workspace), où vous allez commencer à créer votre application. 6

8 Section 4 Le Workspace Aperçu Xojo ouvre le Workspace avec une fenêtre par défaut pour votre application sélectionnée dans le Navigator et affichée dans le Layout Editor. Figure 1.2 Le Workspace de Xojo Bar. Vous utilisez le Navigator pour naviguer au sein de votre projet. Layout Editor: La zone centrale correspond au Layout Editor. Vous utilisez le Layout Editor pour créer votre interface utilisateur des fenêtres de votre application. Il affiche la fenêtre et donne un aperçu de son look lorsque l application est exécutée. Dans cette illustration, la fenêtre est vide car vous n avez pas ajouté de contrôles graphiques à partir de la Library. Navigator: La zone en haut et à gauche affiche tous les éléments de votre projet. Par défaut vous pouvez voir Window1 (qui est sélectionné), l objet App et l objet MainMenu- Library: La zone située à droite correspond à la Library et affiche les contrôles et les éléments d interface que vous pouvez ajouter à une fenêtre ou au project. Vous composez la fenêtre en glissant des contrôles à partir de la Library vers la fenêtre. Vous pouvez également ajouter un contrôle sur la fenêtre en le double-cliquant. Vous pouvez changer la façon dont les contrôles apparaissent dans la Library en cliquant sur ce bouton choisissant l affichage approprié. et en 7

9 Note: Si la Library n est pas visible, cliquez sur le bouton Library sur la barre d outils pour l afficher. Inspector: Absent de cette illustration, l Inspector, qui permet de voir et modifier les propriétés du contrôle sélectionné. Cette zone de la fenêtre principale est partagée avec la Library. Vous affichez l Inspector en cliquant le bouton Inspector sur la barre d outils. L Inspector affiche les informations concernant l élément sélectionné dans le Navigator ou l éditeur. Le contenu de l Inspector change en cliquant sur différents éléménts. Vous modifiez une valeur en l entrant dans le champ situé à droite de son libellé. 8

10 Chapitre 2 L application Simple Browser Apprenez comment créer un simple navigateur web.

11 Section 1 Aperçu À propos de l application La meilleure façon d apprendre rapidement comment utiliser Xojo est de créer une application. Pour ce guide, vous allez créer un simple navigateur web. Une application Xojo consiste en une collection d objets, appelés classes. Presque tout dans Xojo est une classe, y compris vos fenêtres et leurs contrôles. Dans le projet SimpleBrowser, vous utilisez la fenêtre (classe Window) pr défaut pour créer votre fenpetre et vous ajoutez des contrôles (classes d interface utilisateur) sur la fenêtre pour composer votre interface. L application utilise 3 contrôles: Text Field: Un contrôle Text Field est utilisé pour entrer du texte. dans ce projet, L URL à afficher est entrée dans un Text Field dans le haut de la fenêtre. Button: Un Button est utilisé pour appeler une action. L utilisateur clique le bouton pour charger la page web dont l adresse est l URL, dans un HTML Viewer. Figure 2.1 The Completed Simple Web Browser Application HTML Viewer: Un HTML Viewer est utilisé pour afficher du HTML (une page web). Dans ce projet, il s agit de ce que le site web affiche pour cette URL. Les prochaines sections vous conduisent pas à pas dans la création de l interface utilisateur et dans l ajout du code nécessaire pour que l application fonctionne correctement.. 10

12 Section 2 Composer l Interface Utilisateur Composer la fenêtre Xojo doit avoir été lancé et Window1 ouvert dans le Layout Editor. Sinon, merci de vous référer à la Préface, Sections 3 et 4. Désormais vous êtes prêt pour ajouter des contrôles à votre fenêtre. Figure 2.2 Choisissez Text Field dans Library 1. Commencez par le Text Field: Dans la Library, cliquez sur l icône du Text Field et glissez-le vers le coin en haut et à gauche de la fenêtre dans le Layout Editor. Lorsque vous vous approchez des bords de la fenêtre, vous verrez des indicateurs d alignement qui vous aident à positionner votre contrôle. 2. Ensuite, le tour du Button: Dans la Library, cliquez sur l icône de Default Button et glissez-le en haut à droite de la fenêtre. 3.Enfin le dernier contrôle est le HTML Figure 2.3 Choisissez HTMLViewer dans la Library Viewer: Glissez l icône du HTML Viewer dans la zone restée libre sur la fenêtre (vous aurez peut-être à faire défiler l interface vers le bas pour l apercevoir). Redimensionnez le contrôle (en utilisabt les poignées de sélection afin qu il prenne la plus grande partie de la fenêtre en dessous des Text Field et Button). 11

13 4. Enfin la dernière étape est de redimensionner le Text Field Figure 2.4 Composition Finale de la Fenêtre pour qu il soit plus large. Cliquez dessus pour le sélectionner. Cliquez la poignée du centre-droit et glissez-la vers la droite jusqu àce que les quides d alignement vous indiquent que vous êtes assez proche du bouton. 12

14 Section 3 Propriétés Qu est-ce qu une Propriété? Une property est la valeur d une classe. Changer le valeur d une propriété vous permet de modifier le comportement de la classe. l Inspector, cliquez sur le bouton Inspector sur la barre d outils ou appuyez sur -I (Ctrl+I sur Windows et Linux). Pour ce projet, vous souhaitez modifier différentes propriétés de la fenêtre et de ses contrôles. Parmi les choses que vous besoin de faire: Renommer tous les contrôles (et la fenêtre) pour qu ils décrivent leur comportement et qu il soit fcile de s y référer dans le code. Ajouter un libellé au Button. Appliquer les propriétés de contraintes pour que les contrôles se redimensionnent correctement quand la fenêtre est redimensionnée. Inspecteur L Inspector est utilisé pour modifier la valeur des propriétés de le fenêtre et des contrôles. Il partage la même zone sur la droite de la fenêtre principale avec la Library. Pour afficher 13

15 Section 4 Propriétés de Window Si ce n est pas le cas, affichez l Inspector en cliquant sur le bouton Inspector de la barre d outils. Vous devez changer les propriétés Name et Title: 1. Dans le Layout Editor, cliquez sur la barre de titre de la fenêtre pour la sélectionner. L Inspector affiche désormais les propriétés de la fenêtre. Figure 2.5 Inspecteur de la fenêtre 2. Dans le champ Name (situé dans le groupe ID), changez le nom Window1 en BrowserWindow. Appuyez sur Return pour voir le nom changer dans le Navigator. 3. Dans le champ Title (situé dans le groupe Frame), changer le nom Untitled par Web Browser. Appuyez sur Return et vous verrez le nom changer dans la barre de titre de la fenêtre. 14

16 Section 5 Propriétés du Text Field Le Text Field est là où vos utilisateurs entrent l URL qu ils veulent charcger dans le navigateur. Vous avez donc besoin de modifier les propriétés suivantes: Name et Locking bas et la droite. Cliquez sur les cadenas de sorte que le haut, la gauche et la droite soient fermés et le bas reste ouvert. 1. Sur la fenêtre, sélectionnez le contrôle TextField1. L Inspector affiche les propriétés du Text Field. 2. Dans le champ Name, remplacez TextField1 par AddressField. Appuyez sur Return pour voir le nom changer dans le Navigator. 3. Ensuite vous avez besoin de modifier le locking pour que le Text Field puisse s adapter lorsque la fenêtre est redimensionnée. Dans le groupe Locking observez l image qui montre la fenêtre avec des icônes de cadenas fermés pour le haut et la gauche et des icônes de cadenas ouverts pour le Figure 2.6 Locking pour l AddressField 15

17 Section 6 Propriétés du Bouton Vos utilisateurs cliquent le bouton pour afficher la page web. Vous devez donc modifier ces propriétés: Name, Locking et Caption. 1. Sur la fenêtre, séletionnez le contrôle PushButton1. L inspecteur affiche les propriétés du bouton. Cliquez sur les cadenas pour que le haut et la droite soient fermés et la gauche et le bas soient ouverts. 4. Enfin, il ne vous reste plus qu à donner un libellé à votre bouton. Sans le champ Caption (situé dans le groupe Behavior), modifiez la valeur OK par Go. 2. Dans le champ Name, remplacez PushButton1 par GoButton. Appuyez sur Return pour voir le nom changer dans le Navigator. 3. Ensuite vous devez modifier le locking pour que le bouton reste attaché à la droite de la fenêtre lorsque celle-ci est redimensionnée. Dans le groupe Locking observez l image qui représente la fenêtre avec des icônes de cadenas fermés en haut et à gauche et des Figure 2.7 Locking pour GoButton icônes de cadenas ouverts en bas et à droite. 16

18 Section 7 Propriétés du HTML Viewer Le dernier élément d interface à modifier est le HTML Viewer. Vous avez besoin de modifier ces propriétés: Name et Locking Cliquez sur les cadenas pour que haut, bas, gauche et droite soient fermés. 1. Sur la fenêtre, sélectionnez le contrôle HTMLViewer1. L inspecteur affiche les propriétés du HTML Viewer. 2. Dans le champ Name, remplacez HTMLViewer1 par WebViewer. Appuyez sur Return pour voir le nom changer dans le Navigator. 3. Enfin, vous devez modifier le locking pour que le HTML Viewer continue de remplir la fenêtre lorsqu elle est redimensionnée. Dans le groupe Locking, observez l image qui représente la fenêtre avec des icônes de cadenas fermés pour le haut et la gauche et des icônes de cadenas ouverts pour le bas et la droite. Figure 2.8 Locking pour WebViewer 17

19 Section 8 Ajouter du Code L Éditeur de Code Votre application est presque terminée. C est le moment d ajouter du code pour dire au HTML Viewer quelle page web charger et afficher. Xojo utilise un langage de programmation orienté objet qui est facile à maîtriser. Vous n avez besoin que d une ligne de code pour finir votre projet! Les étapes à remplir sont les suivantes: 1. Savoir quand votre utilisateur clique sur GoButton, appelé Go dans la fenêtre. 2. Récupéréer l URL que l utilsateur a entré dans Address- Field. 3. Faire que WebViewer affiche le page. Pour ajouter le code: 1. Sur la fenêtre, double-cliquez sur le contrôle GoButton, appelé Go. Le dialogue Add Event Handler apparaît. Quand un utilisateur clique sur un bouton, votre application exécute le code présent dans l événement (event handler) Action. Vous devez donc entrer votre code dans cet événement Action (event handler). Aussi, sélectionnez Action dans la liste et cliquez OK. Figure 2.9 Ajouter un Event Handler Notez que le Navigator se met à jour pour afficher l événement Action dans la hiérarchie du contrôle GoButton et le Code Editor apparaît. Cette étape règle votre premier problème de savoir quand l utilisateur clique sur GoButton. 2. Désormais vous avez besoin de récupérer l URL que l utilisateur a tapé. La valeur qu un utilisateur entre dans un Text Field est 18

20 réside dans la propriété Text du Text Field. Vous accédez à cette propriété comme ceci: AddressField.Text 3. La dernière étape à faire que le WebViewer affiche la page web. On le fait en appellant la méthode LoadURL du contrôle en lui passant l URL que l utilisateur a entré. Votre code devrait ressembler à ceci: WebViewer.LoadURL(AddressField.Text) 4. Vous pouvez donc ajouter ce code dans l Éditeur de Code. Pour cela, cliquez dans l espace blanc de votre événement Action() et entrez ce code (essayez de le taper plustôt que de le copier-coller): WebViewer.LoadURL(AddressField.Text) Et voilà! Votre première application est terminée. 19

21 Section 9 Tester Simple Browser PROCHAINE ÉTAPE? Ce guide vous a mis en rapport avec Xojo. Vous avez appris comment composer une fenêtre, ajouter des contrôles, ajouter du code et exécuté votre projet. Votre prochaine étape serait de suivre notre Tutoriel et d explorer le Guide de l Utilisateur (anglais) ainsi que le Manuel du Langage (anglais) pour continuer d apprendre comment créer de superbes applications avec Xojo. Enregistrez Votre Projet Vous devriez enregistrer votre travail régulièrement et toujours avant d exécuter votre projet. 1. Enregistrez en choissant File Save. 2. Appelez votre projet SimpleBrowser et cliquez sur Save. Exécutez Votre Projet Désormais vous pouvez tester votre application terminée: 1. Cliquez sur le bouton Run dans la barre d outils pour exécuter votre projet. L application s ouvre dans sa propre fenêtre. 2. Tapez une URL de votre choix, comme par ex et cliquez sur le bouton Go. 3. Vous verrez s afficher la page web correspondante. 4. Lorsque vous avez terminé de tester votre application Simple Browser, vous pouvez fermer sa fenêtre pour retourner dans Xojo. Sur OS X, choisissez SimpleBrowser.debug Quit pour quitter l application. 20