SOMMAIRE

I Introduction
II Installation de Xojo
III Petit tour d’horizon de Xojo
IV Conclusion

I Introduction

Dans ce tutoriel nous allons voir comment installer l’outil de développement Xojo sur votre Raspberry Pi. Cet outil vous permet de coder en Basic des applications pour votre Raspberry Pi et de créer des applications cross-platform. Nous ferons ensuite un petit tour d’horizon et verrons dans un dernier temps un petit exemple de programmation comme d’habitude.

II Installation de Xojo

Si vous ne connaissez pas encore cet IDE, voici l’url du site : https://xojo.com

Cet outil vous permet de créer des applications de la même manière que Lazarus. C’est-à-dire qu’il vous permet de créer l’interface de votre application visuellement sans une ligne de code. Vous ajoutez des composants à votre fiche. Pour le code de l’application vous utriliserez ici le langage Basic au lieu du Pascal Objet.

La page de téléchargement est à cette adresse : https://xojo.com/download/

Pour Raspbery Pi il faut prendre la version « Ubuntu / Debain Linux - arm64 ». Normalement lorsque vous cliquez sur le bouton « Download », il détecte la plateforme liée à votre ordinateur directmement. Mais il vaut mieux cliquez sur le lien associé :

Le nom du fichier téléchargé est « xojo2025r31_arm64.deb ».

Certaines dépendances doivent être installées avant de pouvoir exécuter le fichier d’installation :

Exécutez alors cette commande pour installer ces paquets :

$sudo apt install libc6 libglib2.0-0t64 libgtk-3-0t64 libunwind8

Placez-vous dans le dossier dans lequel vous avez téléchargé le fichier :

$cd Downloads

Il suffit alors d’exécuter cette commande pour débuter l’installation de l’application.

$sudo dpkg -i xojo2025r31_arm64.deb 

L’installation commence alors. Une fois le processus terminé votre application est opérationnelle et est disponible depuis le menu « Programmation » de votre Raspberry Pi :

III Petit tour d’horizon de Xojo

Lancez l’application depuis le menu « Démarrer » de votre Raspberry Pi.

La première fenêtre montre le contrat de licence et vous devez l’accepter pour pouvoir utiliser l’application :

Cliquez sur « Agree » pour lancer l’aplication.

Ensuite une nouvelle popup s ‘affiche vous demandant si des informations relatives à votre configuration peuvent être envoyées sur leurs serveurs. Cette option n’est pas obligatoire donc vous pouvez cliquez sur « Don’t Send »

Dans la fenêtre suivante cliquez sur le bouton « Start Using Xojo ».

Vous devez ensuite voir cette fen$etre apparaître à l’écran :

Cette fenêtre est la porte d’entrée de Xojo. L’interface vous donne le choix entre plusieurs types de projets que vous pouvez réaliser. Dans notre cas nous allons voir comment créer une application Desktop dans ce tutoriel. Vous êtes amenés à donner un nom à votre future application. Saisissez « HelloWorld » et cliquez sur le bouton « Create » ou « Créer ». Vous pouvez donner un nom de compagnie aussi. Une fois que vous aurez créé une application vous pourrez la recharger en cliquant sur le bouton « Open an existing File ».

La fenêtre principale de Xojo s’affiche alors et se d »coupe en pluseurs parties disttintes :

En haut de la fenêtre se trouve la barre de menu classique et juste en dessous nous trouvons la barre d’outils ;

Dans la parte gauche, nous trouvons la partie relative à l’application avec les composants qui sont inclus dans votre application. L’élément principal est déjà créé, il s’agit du composant Window1 qui représente la fenêtre de votre future application.

La partie centrale affiche votre composant « Window1 » qui est le composant principal de votre application comme on vient de le dire. C’est dans cet espace que vous pourrez construire l’interface graphique de votre application en ajoutant des composants visuellemennt.

La barre latérale de droite correspond à la bibliothèque de composants. C’est dans cette partie que vous allez rechercher les composants que vous souhaitez ajouter à votre application. Il suffira de faire un drag and drop pour sélectionner le composant voulu et le déposer sur la fenêtre.

Avant de continuer, vous pouvez sauvegarder le projet et les fichiers associés dans un dossier propre à votre nouveau projet. Par exemple dans le dossier Documents de votre compte utilisateur vous pouvez créer un dossier parent nommé « Xojo Projects » dans lequel vous allez créer un sous dossier nommé « Hello World » qui contiendra tous les fichiers de votre projet en cours. Pour effectuer la sauvegarde, cliquez sur la commande de menu « File » => « Save ». Puis naviuez vers le dossier que vous avez créé et indiquez le nom de votre projet :

Cliquez alors sur « Enregistrer pour sauvegarder votre projet.

A noter que pour exécuter l’application depuis l’IDE, vous pourvez cliquer sur le bouton « Run » dans la boîte à outils ancrée en haut de l’application, dem même pour construire votre application, vous cliquerez sur le bouton « Build » situé à côté :

Si vous exécutez votre application maintenant cette fenêtre s’affiche alors :

Vous vous apercevez alors que le projet et créé par défaut avec la fenêtre principale et son menu associé. Ce qui est cohérent avec ce que voyez dans la barre latérale à gauche dans la zone « Contents ».

Nous pouvons maintenant passer à la conception de notre petite application. Nous allons dans un premier temps concevoir l’interface graphique visuellement en drag and dropant les composants voulus sur la fiche qui se trouve dans la partie centrale de l’IDE.

Notre application consiste à demander à l’utilisateur de saisir son nom et son prénom afin d’afficher « Hello » avec ces informations lorsque l’utilisateur cliquera sur le bouton « Ok ». Il suffit do,nc de placer sur la fenêtre les composants suivants :

Deux composants de type « Label »;

Deux composants de type « Text Field » ;

Un bouton de type « Default Button » .

Le composant Label se trouve dans la section « Decorations ». Le composant « Text Edit » se trouve lui dans la section « Inputs » et le composant « Default Button » dans la section « Buttons ».

Glissez ces composants sur la fenêtre centrale afin d’obtenir le résultat suivant :

Nous allons maintenant ajuster certaines propriétés des composants pour que l’interface soit opérationnelle. Cliquez sur le composant Window1 dans la barre latérale à gauche.

Pour voir les propriétés d’un composant, il faut ouvrir la vue « Inspector ». Vous pouvez l’activer en cliquant sur la commande de menu « View » => « Inspector ». Par exemple pour le composant Window voici la liste des propriétés que vous pouvez personnaliser :

Dans la liste recherchez la propriété « Title » et modifiez la valeur par « Hello World ». Vous voyez que le changement est tout de suite répercuté sur le composant au centre.

Nous pouvons donner un nom plus explicite à notre fenêtre principale (autre que « Window1 ») ce sera plus lisible et maintenable xdans le code de l’application. Pour cela modifiez la valeur de la propriété « Name » par « MainFrm » par exemple.

Faîtes de même pour les composants « Label », « Text Field » de sorte que votre votre fenêtre ressemble à ceci maintenant :

Et dans la section « contennts » les noms des composants ont été mis à jour aussi :

Si vous regardez le composant « Menu » vous vous apercevez que certaines commandes de menu sont inutiles pour ce petit projet. Il suffit de supprimer les commandes inutiles pour ne garder que la commande « File » => « Quit » qui servira à fermer l’application. Supprimez alors les composants « EditMenu », « WindowMenu » et « HelpMenu » en cliquant droit sur chacun d’aux et en sélectionnant la commande contextuelle « Delete comme ceci :

De sorte qu’il ne reste que ceci :

L’interface est maintenant configurée, nous pouvons passer au code de l’application.

Le but du code est simplement de réagir au clic sur le bouton « Ok » et d’afficher une boîte de dialogue contenant le message « Hello » avec le nom et le prénom de l’utilisateur à l’intérieur. Il faut donc réagir à un « évènement »de type clic. Double-cliquez sur le bouton « Ok » dans la fenêtre principale. La fenêtre de sélection de gestionnaire d’événement lié au bouton s’affiche alors :

Par défaut le gestionnaire « Pressed » est sélectionné. C’est celui-ci qui nous intéresse actuellement, donc cliquez sur « Ok » pour valider la sélection.

La partie centrale de l’application a été modifiée et affiche maintenant l’éditeur de code associé au gestionnaire d’événement sélectionné.

Dim sLastName As String

Dim sFirstName As  String

Dim sHello As String



If ((txtLastName.Text <> "") and (txtFirstName.Text <> "")) Then 

  sLastName = txtLastName.Text

  sFirstName = txtFirstName.Text

  sHello = "Hello" + " " + sFirstName + " " + sLastName

  MessageBox(sHello) 

Else 

  System.Beep

  MessageBox("Veuillez saisir les informations dans les composants Texte correspondant au nom et prénom")

End If

Ce code est très simple. Nous commençons par déclarer nos varaibles qui permettrons de stocker le nom et le prénom de la personne après avoir cliqué sur le bouton « Ok » de la fenêtre principale de l’application. Nous déclarons aussi la varaible « sHello » qui va nous permettre de stocker la phrase « Hello » suivi du prénom et du nom renseignés dans le formulaire. Nous ajoutons une condition If … Then … Else pour traiter le cas où l’utilisateur ne renseigne pas ces deux valeurs. Si ces valeurs sont correctement assignées aux variables on affiche le contenu de « sHello ». Dans le cas contriare l’ordinateur émet un beep et affiche un message d’avertissement.

Voilà ce petit projet est terminé.

IV Conclusion

Nous avons vu dans ce tutoriel comment installer Xojo sur Raspberry Pi afin de créer des applications écrites en langage Basic. Nous avons fait un petit tour d’horizon de l’interface graphique de cet IDE. Nous avons vu comment créer une application Desktop pour Raspberry Pi en voyant quelques concepts clés comme la conception de l’interface graphique à partir de la bibliothèque de composants standard fournie par l’éditeur. Ensuite nous avons vu comment interagir avec un gestionnaire d’événenement.