Vous êtes sur la page 1sur 184

Livrets B4x

B4x Premiers pas

Copyright: 2017 Anywhere Software Edition 1.1

Dernire mise jour : 2017.10.12


Table des matires 2 B4x Premier pas

1 B4x ............................................................................................................................................... 5
2 B4A Premiers pas ......................................................................................................................... 6
2.1 B4A Version dessai ............................................................................................................ 7
2.2 Installation de B4A et Android SDK ................................................................................... 8
2.2.1 Installation de Java JDK................................................................................................... 8
2.2.2 Installation de Android SDK ............................................................................................ 9
2.2.3 Installation de B4A ........................................................................................................ 10
2.3 B4A Choix de la langue ..................................................................................................... 11
2.4 B4A Configuration des dossiers dans lEDI ...................................................................... 12
2.5 B4A Connecter un dispositif rel ....................................................................................... 14
2.5.1 Connexion via USB ....................................................................................................... 14
2.5.2 Connexion via B4A-Bridge............................................................................................ 15
2.5.2.1 Premiers pas avec B4A-Bridge .............................................................................. 15
2.5.2.2 Excuter B4A-Bridge sur votre dispositif .............................................................. 16
2.5.2.3 Connexion sans fil .................................................................................................. 17
2.6 Mon premier programme B4A (MonPremierProgramme.b4a) ......................................... 19
2.7 Second programme B4A (SecondProgramme.b4a) .......................................................... 43
3 B4i Premiers pas ....................................................................................................................... 59
3.1 Installation de B4i .............................................................................................................. 60
3.1.1 Installation de Java JDK................................................................................................. 60
3.1.2 Installation de B4i .......................................................................................................... 61
3.1.3 Installation du Mac Builder ............................................................................................ 62
3.1.4 Mac builder hberg (Hosted Mac builder) (optionnel) ................................................ 63
3.2 B4i Configuration des dossiers dans lEDI ....................................................................... 64
3.3 Cration dun certificat et profil de provisionnement ........................................................ 65
3.3.1 UDID .............................................................................................................................. 65
3.3.2 Certificat et profil de provisionnement .......................................................................... 66
3.4 Installation de B4i-Bridge .................................................................................................. 67
3.5 Installation du certificat B4I............................................................................................... 67
3.6 Dfinition du nom de Paquet.............................................................................................. 67
3.7 Installation de Build B4i-Bridge ........................................................................................ 68
3.7.1 Chargez B4i-Bridge ....................................................................................................... 68
3.7.2 Installation de B4i-Bridge et dmarrage ........................................................................ 69
3.8 Mon premier programme B4i (MonPremierProgramme.b4i) ............................................ 70
3.9 Second programme B4i (SecondProgram.b4i) .................................................................. 93
4 B4J Premiers pas ..................................................................................................................... 110
4.1 Installation de B4J ............................................................................................................ 110
4.1.1 Installation de Java JDK............................................................................................... 110
4.1.2 Installation de B4J ........................................................................................................ 111
4.2 Configuration des dossiers dans lEDI............................................................................. 111
4.3 Mon premier programme B4J (MonPremierProgramme.b4j) ......................................... 112
4.4 Second programme B4J (SecondProgramme.b4j) .......................................................... 134
5 Premiers pas avec B4R............................................................................................................. 150
5.1 Installation de lEDI Arduino .......................................................................................... 150
5.2 Installation de Microsoft .Net Framework ....................................................................... 150
5.3 Installation et configuration de B4R ................................................................................ 151
5.4 Connection dun circuit .................................................................................................... 152
5.5 Slection dun circuit ....................................................................................................... 152
5.6 Le circuit Arduino UNO .................................................................................................. 154
5.6.1 Alimentation en courant ............................................................................................... 155
5.6.2 Broches ......................................................................................................................... 155
5.6.3 Broches dalimentation ................................................................................................ 155
5.6.3.1 Broches dentre / sortie digitales (Digital Input / Output pins) ......................... 156
Table des matires 3 B4x Premier pas

5.6.3.2 Broches dentre analogiques .............................................................................. 156


5.6.4 Modes dentre INPUT / INPUT_PULLUP ............................................................... 157
5.6.5 Fonctions de base des broches ..................................................................................... 158
5.6.5.1 Initialize................................................................................................................ 158
5.6.5.2 DigitalRead .......................................................................................................... 159
5.6.5.3 DigitalWrite.......................................................................................................... 159
5.6.5.4 AnalogRead .......................................................................................................... 159
5.6.5.5 AnalogWrite ......................................................................................................... 160
5.7 Premiers programmes....................................................................................................... 161
5.7.1 Bouton.b4r.................................................................................................................... 162
5.7.1.1 Schma ................................................................................................................. 162
5.7.1.2 Code ..................................................................................................................... 163
5.7.2 LedVerte.b4r ................................................................................................................ 164
5.7.2.1 Schma ................................................................................................................. 164
5.7.2.2 Code ..................................................................................................................... 165
5.7.3 LedVerteSansRebond.b4r ............................................................................................ 166
5.7.3.1 Schma ................................................................................................................. 167
5.7.3.2 Code ..................................................................................................................... 168
5.7.4 FeuxSignalisation.b4r .................................................................................................. 169
5.7.4.1 Sketch ................................................................................................................... 169
5.7.4.2 Code ..................................................................................................................... 170
5.8 Glossaire........................................................................................................................... 172
5.8.1 Bases dlectricit ........................................................................................................ 172
5.8.2 PWM Pulse Width Modulation .................................................................................. 172
6 Outils daide ............................................................................................................................. 173
6.1 Fonction recherche dans le forum / Search ...................................................................... 173
6.2 B4x Help Viewer.............................................................................................................. 175
6.3 Help documentation - B4A Object Browser .................................................................... 178
6.4 Liens utiles ....................................................................................................................... 179
6.4.1 B4A .............................................................................................................................. 179
6.4.2 B4i ................................................................................................................................ 180
6.4.3 B4J ............................................................................................................................... 181
6.4.4 B4R .............................................................................................................................. 182
6.5 Livres................................................................................................................................ 183
7 Dictionnaire .............................................................................................................................. 184
Table des matires 4 B4x Premier pas

Contributeurs principaux : Klaus Christl (klaus), Erel Uziel (Erel)


Traduit par : Klaus Christl (klaus)

Pour chercher un mot ou une phrase particulire veuillez utiliser la fonction Rechercher dans
le menu Edition.

Les codes source avec tous les fichiers ncessaires (layouts, images etc.) de tous les projets exemple
dans ce guide figurant dans le dossier CodesSource.
Pour chaque programme il y a trois dossiers.
CodesSource
MonPremierProgramme
B4A
MonPremierProgramme.b4a
B4i
MonPremierProgramme.b4i
B4J
MonPremierProgramme.b4j
Les deux programmes MonPremierProgramme et SecondProgramme sont pratiquement les mmes
pour les trois produits B4A, B4i et B4J.

Mis jour pour les versions ci-dessous :


B4A version 7.30
B4i version 4.30
B4J version 5.90
B4R version 2.20

Autres livrets B4x en franais :


B4x Premiers pas
B4x Langage Basic
B4x EDI Environnement de Dveloppement Intgr

Livrets B4x en anglais :


B4x Getting started
B4x Baisc Language
B4x IDE Integrated Development Environment
B4x CustomViews
1 B4x 5 B4x Premier pas

1 B4x
B4x est une suite de langages de programmation BASIC pour diffrentes plateformes.

B4x supporte plus de plateformes que nimporte quel autre outil


ANDROID | IOS | WINDOWS | MAC | LINUX | ARDUINO | RASPBERRY PI | ESP8266 | ET
PLUS...

B4R, B4A, B4J et B4i ensemble, constituent la meilleure solution de dveloppement pour lInternet
des Objets (en anglais Internet of Things IoT).

B4A Android

B4A inclut toutes les fonctionnalits pour dvelopper rapidement nimporte quel type
dapplication pour Android.

B4i iOS

B4i est un outil de dveloppement pour des applications natives pour iOS.
B4i suit les mmes concepts que B4A, et vous permet de rutiliser la plupart du code et
produire des applications pour les deux systmes dexploitation Android et iOS.

B4J Java / Windows / Mac / Linux / Raspberry PI

B4J est un outil de dveloppement, 100% gratuit, pour des applications desktop, serveurs
et IoT.
Avec B4J vous pouvez facilement crer des applications desktop avec interface utilisateur,
des applications de console (sans interface utilisateur) et des solutions serveur.
Les applications compiles peuvent fonctionner sur Windows, Mac, Linux et des cartes
ARM (comme Raspberry Pi).

B4R Arduino / ESP8266

B4R est un outil de dveloppement, 100% gratuit, pour des applications natives pour des
microcontrleurs Arduino et ESP8266.
B4R suit les mmes concepts que les autres produits B4x, fournissant un outil de
dveloppement simple et puissant.
2 B4A Premiers pas 6 B4x Premier pas

2 B4A Premiers pas


B4A (Basic for Android) est un environnement de dveloppement simple mais puissant qui cible
les dispositifs Android.
Le langage B4A est similaire Visual Basic avec un support pour des objets.
Les applications compiles sont des applications natives, donc pas besoin dautres programmes ou
dpendances.
Contrairement aux autres EDI (Environnement de Dveloppement Intgr), B4A est 100% ax sur
le dveloppement d'applications Android.
B4A comprend un Constructeur visuel puissant permettant de dfinir des interfaces utilisateur
supportant des crans et orientations multiples.

Pas besoin dcrire du XML.

Vous pouvez dvelopper et dboguer avec :


- un dispositif rel via B4Abridge
- un dispositif rel via un cble USB
- ou une mulateur Android.

B4A comprend un vaste ensemble de bibliothques qui rendent facile le dveloppement


dapplications avances.
Incluant : SQL databases, GPS, Serial ports (Bluetooth), Camera, XML parsing, Web services (HTTP),
Services (background tasks), JSON, Animations, Network (TCP and UDP), Text To Speech (TTS),
Voice Recognition, WebView, AdMob (ads), Charts, OpenGL, Graphics and more.

Android 1.6 et plus sont supports (incluant les tablettes).


2.1 B4A Version dessai 7 B4x Premiers pas

2.1 B4A Version dessai

Consultez dette page pour des instruction comment utiliser la version dessai :
https://www.b4x.com/b4a.html
2.2 Installation de B4A et Android SDK 8 B4x Premiers pas

2.2 Installation de B4A et Android SDK

B4A dpend de deux composants supplmentaires (gratuits) :


- Java JDK
- Android SDK

2.2.1 Installation de Java JDK

Instructions dinstallation :
La premire tape est dinstaller le Java JDK, car Android SDK lexige aussi.
Notez que vous pouvez, sans problme, installer plusieurs versions de Java sur un mme ordinateur.

- Ouvrez ce lien Java 8 JDK download link.

- Cochez lagrment de licence Accept License Agreement.


- Slectionnez "Windows x86" ou "Windows x64" (pour des ordinateurs 64 bits) dans la liste des
plateformes.
- Tlchargez le fichier et installez-le.
2.2 Installation de B4A et Android SDK 9 B4x Premiers pas

2.2.2 Installation de Android SDK

Ltape suivante consiste installer Android SDK et une plateforme :

- Installation du SDK . Le SDK ne fonctionner correctement que sil est install dans un dossier
dont le nom ne comprend pas des espaces comme (Program Files).
Il est recommand de linstaller dans un dossier particulier similaire C:\Android.

- Vous devez maintenant installer les outils de la plateforme et au minimum une image de
plateforme. Utilisez la dernire version mais au moins API 8.

Il est conseill dinstaller aussi Google USB Driver pour pouvoir connecter physiquement un
dispositif avec USB. Une liste dautres pilotes se trouve ici.
Notez que vous pouvez aussi connecter un dispositif Android par un rseau local avec loutil B4A-
Bridge.

Une fentre similaire celle-ci sera


affiche.

Slectionnez la version de lAPI que


vous voulez tlcharger.
Dans lexemple jai choisi API 24.
2.2 Installation de B4A et Android SDK 10 B4x Premiers pas

Vous pouvez slectionner plusieurs APIs et les installer en parallle.

Dans lexemple, API 22 a aussi t slectionn.

Notez que vous pouvez en installer dautres plus tard.

- Pressez sur Install xx packages.

Si vous voulez connecter votre dispositif avec USB vous devez aussi tlcharger Google USB
driver.

2.2.3 Installation de B4A

- Tlchargez B4A et installez le.


- Lancez B4A.
2.3 B4A Choix de la langue 11 B4x Premiers pas

2.3 B4A Choix de la langue

Dans le menu Tools / IDE Options / Language slectionnez la langue de votre choix, French
(franais) dans lexemple.

Ou, si lditeur est dj en franais vous pouvez choisir une autre langue.
2.4 B4A Configuration des dossiers 12 B4x Premiers pas

2.4 B4A Configuration des dossiers dans lEDI

- Lancez B4A.
- Cliquez sur dans le
menu .

La fentre ci-dessous sera affiche.

- Utilisez les boutons pour chercher les fichiers javac.exe" et "android.jar".


javac.exe est situ dans le dossier <dossier java>\bin.
android.jar est situ dans le dossier <dossier Android>\platforms\android-24.
Le dossier dpend o vous avez install Android SDK,
En principe : C:\Android\platforms\android-xx\android.jar
ou C:\Android\platforms\android-24\android.jar.
Les numros dpendent de la version dAndroid que vous avez installe.

Sur des versions plus anciennes, android.jar peut se trouver sous :


C:\Android\android-sdk-windows\platforms\android-8\android.jar.
Sous Windows 64 bit, Java se trouve probablement sous C:\Program Files (x86).
2.4 B4A Configuration des dossiers 13 B4x Premiers pas

Il est recommand de crer un dossier spcifique pour les bibliothques additionnelles.


B4A utilise deux types de bibliothques :
Bibliothques standard, qui sont fournies avec B4A et sont situes dans le dossier Libraries
de B4A.
Ces bibliothques sont automatiquement mises jour lorsque vous installez une nouvelle
version de B4A.
Bibliothques additionnelles, qui ne sont pas fournies avec B4A, et en majorit crites par
des membres du forum. Ces bibliothques doivent tre enregistres dans un dossier
spcifique diffrent du dossier standard.

Modules partags : Des fichiers Module peuvent tre partags entre diffrents projets et ils doivent
tre enregistrs dans un dossier spcifique.

Les bibliothques et modules sont expliqus dans le livret B4x Langage Basic.
2.5 B4A Connecter un dispositif rel 14 B4x Premiers pas

2.5 B4A Connecter un dispositif rel

Il existe deux moyens de connecter un dispositif rel :


USB
Exige que le dispositif supporte le dbogage ADB.
Exige lactivation de Dbogage USB sur le dispositif.
B4A Bridge, via WiFi.

2.5.1 Connexion via USB

Vous devez tlcharger le pilote Google USB Driver dans Android SDK Manager.
Si ce pilote ne fonctionne pas, vous devez chercher un pilote spcifique pour votre dispositif.

Pour pouvoir connecter un dispositif via USB vous devez activer Dbogage USB.
Cest aussi ncessaire si vous utilisez un mulateur.

Sur le dispositif, excutez Paramtres

Droulez lcran jusqu ce que vous voyiez


Options de dveloppement.

Droulez lcran jusqu ce que vous voyiez


Dbogage USB.

Activez-le.

Le dispositif sera automatiquement reconnu par lEDI.

Dans ce cas, sur certains anciens dispositifs, il ntait pas possible daccder la carte SD depuis le
PC. Si vous voulez accder carte SD vous devez dsactiver Dbogage USB.
2.5 B4A Connecter un dispositif rel 15 B4x Premiers pas

2.5.2 Connexion via B4A-Bridge

Il est toujours recommand dutiliser un dispositif rel au lieu dmulateurs Android qui sont plus
lents compares des dispositifs rels (spcialement lors de linstallation dapplications).

Nanmoins pas tous les dispositifs ne supportent le dbogage ADB.


Cest la raison de loutil B4A-Bridge.
B4A-Bridge comporte deux composantes. Lune sexcute sur le dispositif et permet lautre
composante, qui fait partie de lEDI, de se connecter et de communiquer avec le dispositif.
La connexion se fait au travers dun rseau (B4A-Bridge ne fonctionne pas sans rseau).

Une fois connect, B4A-Bridge supporte toutes les fonctionnalits de lEDI incluant :
Linstallation dapplications, affichage des Logs et le Concepteur Visuel.

Android nautorise pas une application dinstaller dautres applications sans lautorisation de
lutilisateur, cest la raison pour laquelle lorsque vous compilez votre application, B4A-Bridge
affiche un cran demandant votre autorisation.

2.5.2.1 Premiers pas avec B4A-Bridge

Vous devez installer B4A-Bridge sur votre dispositif.

B4A-Bridge peut tre tlcharg depuis ici :


http://www.basic4ppc.com/android/files/b4a_bridge.apk.

B4A-Bridge est aussi disponible sur Play Store. Chercher pour : B4A Bridge.
Notez que vous devez autoriser linstallation dapplications de Sources inconnues.

Sur le dispositif, excutez Paramtres

Droulez lcran jusqu ce que vous voyiez


Options de dveloppement.
Activez-le.

Droulez lcran jusqu ce que vous voyiez


Options de dveloppement.
Activez-le.

B4A-Bridge requiert une carte de stockage en criture. Sinon, il est impossible dinstaller des
applications.
2.5 B4A Connecter un dispositif rel 16 B4x Premiers pas

2.5.2.2 Excuter B4A-Bridge sur votre dispositif

Lancez B4A-Bridge sur votre dispositif, un cran


similaire limage ci-contre sera affich.

Sur le haut vous trouvez ladresse IP du dispositif :


192.168.1.104 dans lexemple.

Status sera :

Pressez sur pour activer une


connexion.

Status change pour :

Notez que B4A-Bridge a t crit avec B4A.


2.5 B4A Connecter un dispositif rel 17 B4x Premiers pas

2.5.2.3 Connexion sans fil

Dans lEDI, dans le menu slectionnez .


Si ladresse existe dj, cliquez directement sur cette adresse.
Si le dispositif avait dj t connect, pressez simplement la touche F2 pour vous connecter.

Entrez ladresse IP de votre dispositif qui se trouve sur le haut de lcran de B4A-Bridge.

Cliquez sur , le dispositif est


maintenant connect lEDI.

Vous verrez que ltat (status) a chang,


sur le dispositif et dans lEDI dans le coin infrieur gauche.

B4A-Bridge sexcute en tant que service jusqu ce que vous pressiez le bouton Stop.

Vous pouvez toujours y avoir accs dans


lcran des notifications.

Vous voyez B4A-Bridge avec son tat actuel.

Notez que la permission Internet sera automatiquement ajoute dans le mode dbogage
2.5 B4A Connecter un dispositif rel 18 B4x Premiers pas

Lorsque vous excutez une application, vous devez


approuver son installation. Vous verrez gnralement un
cran similaire celui-ci-contre.

Pressez pour installer le programme.

Si vous avez press vous verrez un cran


similaire celui gauche.

Sur cet cran, pressez pour excuter lapplication.

Si vous essayez d'installer une application existante


signe avec une cl diffrente, l'installation chouera
(sans aucun message significatif). Vous devez dabord
dsinstaller lapplication existante. Allez dans
Paramtres Applications, slectionnez-la et pressez
DSINSTALLER.

Lorsque vous arrtez le dveloppement, pressez le bouton


Stop dans B4A-Bridge pour conomiser la batterie.
2.5 Mon premier programme B4A 19 B4x Premiers pas

2.6 Mon premier programme B4A (MonPremierProgramme.b4a)

Nous allons crire notre premier programme B4A. Cest un programme dentranement de calcul
pour enfants.

Le projet est disponible dans le dossier des codes sources fourni avec le livret :
CodesSource\MonPremierProgramme\ B4A\ MonPremierProgramme.b4a

Laspect de l'cran est diffrent selon la version Android des dispositifs, galement avec les
mulateurs.

Sony xperia z1 Emulateur Android version 4.2 Emulateur Android version 2.2

Nous aurons sur lcran :


- 2 Labels affichant des nombres gnrs alatoirement (entre 1 et 9).
- 1 Label avec le signe mathmatique (+).
- 1 EditText dans lequel lutilisateur devra entrer le rsultat.
- 1 Button, utilis soit pour confirmer le rsultat entr ou pour gnrer un nouveau calcul.
- 1 Label avec un commentaire concernant le rsultat.

Dans Android :
- Label est un objet pour afficher du texte.
- EditText est un objet permettant lutilisateur dditer du texte.
- Button est un objet permettant lutilisateur des actions, un click.

Nous allons dfinir le layout (mise en page) de linterface utilisateur avec le Concepteur visuel du
Designer et passerons pas pas au travers de tout le processus.
Le Designer gre les diffrents objets de linterface.
Le Concepteur visuel montre les positions et dimensions des diffrents objets et permet de les
dplacer ou de les redimensionner sur lcran.
Sur un dispositif nous voyons laspect rel
2.5 Mon premier programme B4A 20 B4x Premiers pas

Excutez B4A

Lorsque vous excutez B4A vous verrez sur le haut gauche deux onglets Main et Starter.


Est le module principal pour B4A qui est normalement le
module de dpart. Son nom ne peut pas tre chang.

Est un service, qui est excut au lancement du programme.

Pour notre premier programme nous navons pas besoin du module Starter, nous le supprimons.

Cliquez sur longlet


pour slectionner le module Starter.

Dans le menu
cliquez sur .

Vous devez confirmer si vous voulez


supprimer le module.
Cliquez sur OUI.

Le module Starter est supprim.

Vous pouvez aussi laisser le module, sa suppression nest pas obligatoire.


2.5 Mon premier programme B4A 21 B4x Premiers pas

Enregistrez le projet.

Vous devez dabord enregistrer le projet avant de pouvoir utiliser le Designer.

Crez un nouveau dossier MonPremierProgramme et enregistrez le projet avec le nom


MonPremierProgramme.

Dfinissez un nom de paquet (Package Name).

Chaque projet doit avoir un nom de paquet.

Dans le menu cliquez sur

Cette fentre sera affiche :

Le nom de Paquet par dfaut


est b4a.example.
2.5 Mon premier programme B4A 22 B4x Premiers pas

Nous changeons le nom en


b4a.MonPremierProgramme.

Puis cliquez sur .

Dfinissez lApplicationLabel.

LApplicationLabel est le nom qui sera affich sur le dispositif sous licne du projet.
Sur le haut de la zone code, vous voyez les deux lignes ci-dessous montrant deux 'Rgions'.

Les Rgions sont des parties de code qui peuvent


tre rduites ou tendues.
Un clic sur tend une Rgion.
Un clic sur rduit une Rgion.
Les Rgions sont expliques dans le chapitre
Rduire une Rgion dans le livret B4x EDI.

#Region Project Attributes


#ApplicationLabel: B4A Example
#VersionCode: 1
#VersionName:
'SupportedOrientations possible values: unspecified, landscape or portrait.
#SupportedOrientations: unspecified
#CanInstallToExternalStorage: False
#End Region

#Region Activity Attributes


#FullScreen: False
#IncludeTitle: True
#End Region

Le nom par dfaut est B4A Example, mais nous le changeons en MonPremierProgramme.

Changez cette ligne :


#ApplicationLabel: B4A Example
en
#ApplicationLabel: MonPremierProgramme

Les autres lignes sont expliques dans le chapitre Project Attributes attributs projet dans le livret
B4x EDI.
2.5 Mon premier programme B4A 23 B4x Premiers pas

Connectez un dispositif

Pour tester le programme vous devez connecter un dispositif lEDI.

Vous pouvez connecter lEDI un dispositif via (voir chapitre prcdent) :


B4A-Bridge
Cble USB

Il est aussi possible de connecter un mulateur, mais cest dconseill cause de la lenteur.

Dans lEDI lancez le Designer.

Cliquez sur .

Le Visual Designer ressemble limage ci-dessous.

Il y a diffrentes fentres :
Fichiers affiche tous les fichiers ajouts au projet.
Proprits affiche toutes les proprits de la view slectionne.
Concepteur visuel affiche les views sur lcran.
Script - General permet de fignoler des layouts (mises en page).

Le Designer est expliqu dans le livret B4xVisualDesigner.


2.5 Mon premier programme B4A 24 B4x Premiers pas

Dans le premier projet nous nous intressons seulement aux fentres ci-dessous :
Liste des views
Proprits
Concepteur visuel

Affichons la Liste des Views.

Cliquez sur .

Le Designer ressemblera limage ci-dessous.

Pour afficher les views sur le dispositif, vous


devez le connecter au Designer.

Dans le menu cliquez sur


.

Attendez jusqu ce que le dispositif et le Designer soient connects. Ceci peut prendre du temps,
soyez patient.
Vous verrez, dans le coin infrieur gauche, ltat de la connexion ainsi que les paramtres du
dispositif connect :
2.5 Mon premier programme B4A 25 B4x Premiers pas

Maintenant nous ajoutons 2 Labels pour les nombres.

Dans le Designer, ajoutez un Label.

Dans le menu cliquez sur .

Nous voyons le Label avec son nom par dfaut Label1 dans les fentres suivantes :

Proprits Concepteur visuel


Avec les proprets la position et aux dimensions
Liste des Views par dfaut. par dfaut.
2.5 Mon premier programme B4A 26 B4x Premiers pas

Redimensionnez et dplacez le Label avec les points rouges comme ci-dessous.

Les nouvelles proprits Left, Top, Width et Height sont directement mises jour dans la fentre
Proprits.
Vous pouvez aussi modifier ces proprits directement dans la fentre Proprits.

Nous allons changer les proprits de ce premier Label pour nos besoins.

Le nom par dfaut des Labels est Label suivi dun nombre, dans notre cas Label1.
Nous changeons son nom en lblNombre1.
Les trois lettres au dbut lbl correspondent 'Label', et 'Nombre1' correspond au premier nombre.
Il est recommand de donner des noms significatifs aux views, de cette manire nous savons
directement le type de la view et sa fonction.

Pressez la touche Entre ou cliquez quelque part ailleurs pour mettre jour le nom dans les autres
fentres et changer la proprit Nom gnrique des vnements.

Main : Module Main.


Nom : Nom de la view.
Type : Type de la view. Dans notre cas, un Label, qui nest pas ditable.
Nom gnrique : Nom gnrique des routines qui grent les vnements de la view.
Parent : View parent qui contient le Label.
2.5 Mon premier programme B4A 27 B4x Premiers pas

Pour mieux voir les autres proprits nous largissons la fentre Proprits.

Vrifions et modifions les autres proprits :

Left, Top, Widthet Height sont OK.


Ou, si les valeurs ne correspondent pas limage,
veuillez les modifier.

Enabled, Visible sont OK


Tag, reste vide.
Text, nous dfinissons un nombre par dfaut, 5.

Typeface, Style sont OK

Horizontal Alignment, mis CENTER_HORIZONTAL


Vertical Alignment, reste CENTER_VERTICAL.
Size, nous mettons 36

Les autres proprits restent tel quel.


2.5 Mon premier programme B4A 28 B4x Premiers pas

Nous avons besoin dun deuxime Label similaire au premier pour le deuxime nombre. Au lieu
dajouter une nouvelle view, nous copions le premier Label avec les mmes proprits. Seules les
proprits Nom et Left seront modifies.

Dans le Concepteur visuel,


cliquez avec le bouton droit
sur lblNumber1 et cliquez
sur .

Cliquez quelque part ailleurs dans le Concepteur visuel et


cliquez avec le bouton droit puis cliquez sur .

Le nouveau Label couvre le prcdent.

Nous voyons le nouveau Label a t ajout dans la fentre Liste


des Views.
2.5 Mon premier programme B4A 29 B4x Premiers pas

Changez le nom en lblNombre2.

Changez la proprit Left en 190.

Le nouveau Label avec son


nouveau nom se trouve dans
sa nouvelle position.

Maintenant, nous ajoutons un troisime Label pour le signe mathmatique. Nous dupliquons
lblNombre1. Une manire plus simple de copier une view.
Dans le Concepteur visuel, cliquez avec le bouton droit sur lblNumber1 et cliquez sur .

Le nouveau Label couvre lblNumber1.

Positionnez-le entre les deux premier et changez


son nom en lblSigneMath et sa proprit Text en
'+'.
2.5 Mon premier programme B4A 30 B4x Premiers pas

Maintenant nous ajoutons une view EditText.


Dans le Designer, dans le menu .
Cliquez sur .

Positionnez le sous les Labels et


changez son nom en edtResultat.
'edt' signifie EditText et 'Resultat'
sa fonction.

Nous modifions les proprits ci-dessous.


Nom en edtResultat

Horizontal Alignment en CENTER_HORIZONTAL

Size en 30

Input Type en NUMBERS


Hint Text en Rsultat

Nous dfinissons Input Type en NUMBERS pour


que lutilisateur ne puisse entrer que des chiffres.

Hint Text reprsente le texte qui sera affich dans


la view EditText si aucun texte na encore t
entr.
2.5 Mon premier programme B4A 31 B4x Premiers pas

Maintenant nous ajoutons une view Button (bouton) qui,


lorsque press, va soit vrifier le rsultat que lutilisateur a
fourni, ou gnrer un nouveau problme darithmtique en
fonction des rponses de lutilisateur.

Positionnez la view Button et redimensionnez-


la.

Modifiez les proprits ci-dessous.

Nom en btnAction

Text en O K (avec un espace entre O et K)

Size en 24
2.5 Mon premier programme B4A 32 B4x Premiers pas

Ajoutons encore un Label pour les commentaires.


Positionnez-le en dessous du Button btnAction et redimensionnez-le.

Modifiez les proprits ci-dessous :


Nom en lblCommentaire

et Height
Left, Top Width
comme gauche.

Horizontal Alignment CENTER_HORIZONTAL

Text Color en #000000


Nous dfinissons la couleur du texte (Text Color)
en noir (#000000).

Color en #FFFFFF (blanc)


Alpha en 255

La couleur de fond par dfaut dun Label est noir et


transparent. Nous la modifions en blanc.
Nous modifions sa proprit Alpha = 255, pour la
rendre opaque.
2.5 Mon premier programme B4A 33 B4x Premiers pas

Le rsultat ressemblera limage ci-dessous dans le Concepteur visuel.

Et sur un dispositif ou dans lEmulateur.

Samsung S6 Android 4.2 Emulateur Android 2.2 Emulateur


2.5 Mon premier programme B4A 34 B4x Premiers pas

Il est temps denregistrer le layout.

Dans le menu cliquez sur et enregistrez-


le avec le nom 'Main'.

Cliquez sur .

Pour crire le code du projet nous avons besoin de rfrences aux views dfinies dans le layout.
Ceci se fait avec loutil Gnrer membres dans le Designer.
2.5 Mon premier programme B4A 35 B4x Premiers pas

Loutil Gnrer membres permet de gnrer automatiquement des rfrences aux diffrentes views
et de gnrer les cadres de routine dvnement.

Dans le menu
cliquez sur
pour ouvrir le gnrateur.

Dans cette fentre nous trouvons toutes les views du layout actuel.
Nous cochons toutes les views ainsi que lvnement Click pour le Button btnAction.
Cocher une view dans la liste, comme , gnre une rfrence cette view dans la
routine Sub Globals.
Ces dclarations sont ncessaires pour que le compilateur reconnaisse les views et galement pour
la fonction dautocompltion.

Private btnAction As Button


Private edtResultat As EditText
Private lblCommentaire As Label
Private lblSigneMath As Label
Private lblNombre1 As Label
Private lblNombre2 As Label
Cocher un vnement, comme . Gnre les cadres de la routine vnement.

Sub btnAction_Click

End Sub

Cliquez sur pour gnrer les rfrences et les cadres de routines.


2.5 Mon premier programme B4A 36 B4x Premiers pas

Retournons dans lEDI pour crire le code.


Tout dabord, nous devons charger notre fichier layout. Au dbut de la routine Activity_Create,
procdez comme ci-dessous. Vous pouvez supprimer les deux premires lignes en vert.
Nous allons crire la ligne de code suivante Activity.LoadLayout(Main).

- Entrez 'A, ds que vous commencez entrer du code, la fonction dautocompltion affiche les
mots cl commenant par a, et le mot le plus appropri est prslectionn.

- Continuez et crivez Act.

- Pressez la touche Entre ou cliquez sur .

- Nous avons maintenant le mot cl Activity, crivez un point.


2.5 Mon premier programme B4A 37 B4x Premiers pas

- La fonction dautocompltion affiche toutes les proprits de la view.


- crivez 'L', la fonction dautocompltion affiche les proprits commenant par 'L'

- Pressez la flche du clavier vers le bas jusqu ce que LoadLayout est en surimpression avec son
laide en ligne donnant une explication sur la proprit ou mthode.

- Pressez la touche Entre pour ajouter LoadLayout.

Remarquez que la ligne est souligne en rouge indiquant une erreur, car la ligne est incomplte, il
manque des paramtres.

- crivez '(', laide en ligne affiche les paramtres requis pour cette mthode.
2.5 Mon premier programme B4A 38 B4x Premiers pas

- crivez "Main")

Sub Activity_Create(FirstTime As Boolean)


Activity.LoadLayout("Main")
End Sub

Nous voulons dmarrer un nouveau problme ds le dmarrage du programme. Pour a, nous


ajoutons un appel la routine NouveauProbleme.

Sub Activity_Create(FirstTime As Boolean)


Activity.LoadLayout("Main")
NouveauProbleme
End Sub

NouveauProbleme est en rouge indiquant une erreur Variable non dclare car le compilateur
ne connait pas encore ce mot.

Gnrer un nouveau problme daddition consiste gnrer alatoirement deux nouveaux nombres
entre 1 et 9 (inclus) pour Nombre1 et Nombre2, et afficher leur valeur dans les Labels en utilisant la
proprit Text de lblNombre1 et lblNombre2.

Pour ce faire nous ajoutons le code ci-dessous :


Dans la routine Sub Globals nous dclarons deux variables pour les deux nombres.

Public Nombre1, Nombre2 As Int


End Sub

Et ajoutons la routine 'NouveauProbleme' :

Private Sub NouveauProbleme


Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Nombre2 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
lblNombre1.Text = Nombre1 ' Affiche Nombre1 dans le Label lblNombre1
lblNombre2.Text = Nombre2 ' Affiche Nombre2 dans le Label lblNombre2
lblCommentaire.Text = "Entrez le rsultat" & CRLF & "et cliquez sur OK"
edtResultat.Text = "" ' Vide edtResult.Text
End Sub

Cette fonction, Rnd(1, 10), gnre un nombre alatoire entre '1' (inclusif) et '10' (exclusif), donc
entre 1 et 9.

La ligne ci-dessous affiche un commentaire dans le Label lblCommentaire :


lblComments.Text = "Entrez le rsultat" & CRLF & "et cliquez sur OK"
CRLF est le caractre NouvelleLigne.
2.5 Mon premier programme B4A 39 B4x Premiers pas

Maintenant nous ajoutons le code pour lvnement Click du Button btnAction.

Nous avons deux cas :


- Lorsque le texte du bouton est gal "O K" (avec un espace entre le O et le K), ce qui signifie
quun nouveau problme est affich et que le programme attend que lutilisateur entre le rsultat et
presse le bouton.
- Lorsque le texte du bouton est gal "Nouveau", ce qui signifie que lutilisateur a entr un rsultat
correct et lorsquil presse le bouton un nouveau problme est gnr.

Sub btnAction_Click
If btnAction.Text = "O K" Then
If edtResult.Text = "" Then
Msgbox("Il ny a pas de rsultat","E R R E U R")
Else
CheckResult
End If
Else
New
btnAction.Text = "O K"
End If
End Sub

If btnAction.Text = "O K" Then vrifie que le texte du bouton est gal "O K".
Si oui, nous vrifions si EditText est vide (pas de rsultat).
Si oui, nous affichons un message indiquant quil ny a pas de rsultat dans EditText.
Si non, nous vrifions si le rsultat est juste ou faux.
Si non, nous gnrons un nouveau problme, modifions le texte du bouton en "O K" et vidons
EditText.
2.5 Mon premier programme B4A 40 B4x Premiers pas

La dernire routine vrifie le rsultat.

Sub TestResultat
If edtResultat.Text = Nombre1 + Nombre2 Then
lblCommentaire.Text = "B O N rsultat" & CRLF & "Cliquez sur Nouveau"
btnAction.Text = "Nouveau"
Else
lblCommentaire.Text = "M A U V A I S rsultat" & CRLF & "Entrez un nouveau
rsultat" & CRLF & "et cliquez sur O K"
End If
End Sub

Avec If edtResultat.Text = Nombre1 + Nombre2 Then nous vrifions si le rsultat est juste.

Si oui, nous affichons dans le Label lblCommentaire le texte ci-dessous :


'Rsultat J U S T E'
'Cliquez sur Nouveau'
Et nous modifions le texte du bouton en " Nouveau ".
Si non, nous affichons dans le Label lblCommentaire le texte ci-dessous :
'Rsultat F A U X'
'Entrez un nouveau rsultat'
Et cliquez sur.

Dans la partie gauche de lditeur nous voyons une ligne jaune verticale, qui signifie que le code a
t modifi.

Si nous cliquons sur pour enregistrer le projet, la ligne passe en vert indiquant que le code a t
modifi mais dj enregistr. Vous pouvez aussi presser Ctrl + S pour enregistrer le projet.

Lorsque nous quittons lEDI et chargeons le projet nouveau la ligne verte disparait.
2.5 Mon premier programme B4A 41 B4x Premiers pas

Compilons le programme et transfrons-le sur le dispositif.


Dans lEDI cliquez sur :

La compilation du projet dmarre et la fentre ci-dessous affiche lvolution de la compilation.

Lorsque le bouton est actif, la compilation et le transfert du projet sont termins.


Sur le dispositifsi vous tes connects via B4A-Bridge, vous devez encore :

Confirmer linstallation puis ouvrir le projet.


2.5 Mon premier programme B4A 42 B4x Premiers pas

Sur le dispositif vous obtenez un cran similaire celui-ci-dessus, qui peut avoir une apparence
diffrente selon la version dAndroid, avec des nombres diffrents.

Sur le dispositif vous devez utiliser


le clavier virtuel.
Pressez sur lEditText pour afficher
le clavier virtuel.

Nous pouvons videmment faire des amliorations esthtiques dans la mise en page, mais a ntait
pas le but principal du premier projet et fait lobjet du chapitre suivant.

Sur certains dispositifs il se peut que les commentaires soient cachs par le clavier virtuel.

Cet inconvnient sera amlior dans le chapitre suivant Second programme B4A, o nous
crerons notre propre clavier.
2.6 Second programme B4A 43 B4x Premiers pas

2.7 Second programme B4A (SecondProgramme.b4a)

Ce projet est disponible dans le dossier SecondProgramme :


CodesSource\SecondProgramme\B4A\SecondProgramme.b4a

Amliorations par rapport MonPremierProgramme.

Nous ajoutons un clavier numrique dans le layout pour viter que


le clavier virtuel du dispositif ne couvre les commentaires.

Crez un nouveau dossier SecondProgramme. Copiez tous les


fichiers et sous-dossiers de MonPremierProgramme dans
SecondProgramme et renommez les fichiers
MonPremierProgramme.b4a en SecondProgramme.b4a et
MonPremierProgramme.b4a.meta en
SecondProgramme.b4a.meta.

Chargez le nouveau projet dans lEDI.

Nous devons modifier le nom du paquet.

Dans le menu de lEDI.

Cliquez sur .

Changez le nom du Paquet


en b4a.SecondProgramme.

Cliquez sur .
2.6 Second programme B4A 44 B4x Premiers pas

Nous modifions aussi le paramtre ApplicationLabel tout en haut dans le code.


#Region Project Attributes
#ApplicationLabel: SecondProgramme

Lancez le Designer. Vous pouvez dj connecter un dispositif ou un mulateur.

Dans le Concepteur visuel cliquez quelque part en dehors dune view pour activer lActivity.

Modifiez le Titre en Math Trainer.

Ceci modifiera le titre de lapplication lors de lexcution.


2.6 Second programme B4A 45 B4x Premiers pas

Nous remplaons la view EditText edtResultat par un nouveau Label.

Dans le Concepteur visuel cliquez sur la view edtResultat.

Cliquez avec le bouton droit sur edtResultat


puis cliquez sur .

Cliquez avec le bouton droit sur lblNombre1 puis


cliquez sur .

Le nouveau Label couvre lblNombre1.

Dplacez-le entre les Labels suprieurs et le


bouton puis redimensionnez-le.
2.6 Second programme B4A 46 B4x Premiers pas

Modifiez les proprits suivantes :

Nom en lblResultat

Modifiez les proprits Left, Top, Width et Height si


elles nont pas la mme valeur que dans limage.

Text en " " caractre espace.

Text Color en Black #000000 (noir)

Color en White #FFFFFF (blanc)


Niveau Alpha en 255
Rayon des coins en 5
2.6 Second programme B4A 47 B4x Premiers pas

Maintenant nous ajoutons un Panel pour les boutons


du clavier.

Positionnez et redimensionnez-le selon limage.

Modifiez son Nom en pnlClavier


"pnl" pour Panel, le type de view.

Modifiez
Color en #8C8C8C
Niveau Alpha en 255
Rayoin des coins en 0
2.6 Second programme B4A 48 B4x Premiers pas

Nous dplaons le bouton btnAction de lActivity


sur le Panel pnlClavier.

Cliquez sur btnAction.

Et dans la liste Parent cliquez sur .

Le bouton appartient maintenant au Panel pnlClavier.

Nous rarrangeons les diffrentes views pour obtenir


plus despace pour le clavier.

Modifiez la proprit Height des 4 Labels de 60 50.


Modifiez la proprit Top de lblResultat 60.
Modifiez la proprit Top de lblCommentaire 120.
Modifiez la proprit Top de pnlClavier 210.
Modifiez la proprit Height de pnlClavier 180.
2.6 Second programme B4A 49 B4x Premiers pas

Cliquez avec le bouton droit sur


pnlClavier
puis cliquez sur
et cliquez sur
pour ajouter un nouveau bouton.

Le nouveau bouton est ajout.

Modifiez les proprits suivantes :

Nom en btn0

Nom gnrique de lvnement en btnEvent

Left en 0
Top en 120
Width en 55
Height en 55

Tag en 0
Text en 0
2.6 Second programme B4A 50 B4x Premiers pas

Size to 24
Text Color en Black #000000

Nous changeons les couleurs du bouton.

Cliquez sur .

Dans Enabled Drawable


Cliquez sur .

Modifiez les proprits ci-dessous :

Orientation en TOP_BOTTOM
Premire couleur en #FFFFC7C7
Deuxime couleur en #FFFF4F4F

Pressed Drawable en GradientDrawable

Orientation en TOP_BOTTOM
Premire couleur en #FFFF4F4F
Deuxime couleur en #FFFFC7C7

Si vous avez connect un dispositif vous verrez le bouton


comme gauche.
2.6 Second programme B4A 51 B4x Premiers pas

Nous dupliquons btn0 et positionnons le


nouveau bouton ct du prcdent avec un
lger espace.

Cliquez avec le bouton droit sur btn0 et cliquez


sur .

Cliquez avec le bouton droit sur pnlClavier et


cliquez sur .

Dplacez le nouveau bouton ct du prcdent.

Modifiez les proprits suivantes :

Nom en btn1

Tag en 1
Text en 1

Et le rsultat.

Dans le Concepteur visuel et sur le dispositif.

Ajoutons 8 boutons supplmentaires comme dans


limage.

Modifiez les proprits suivantes :


Nom btn2 , btn3 , btn4 etc.
Tag 2 , 3 , 4 etc.
Text 2 , 3 , 4 etc.
2.6 Second programme B4A 52 B4x Premiers pas

Pour crer le bouton BackSpace, dupliquez un des


boutons de numro et positionnez-le comme dans
limage.

Redimensionnez et positionnez btnAction.

Modifiez Color de pnlClavier en Black #000000.

Modifiez leur proprits Nom, Tag, Text and Color


comme ci-dessous.

btnAction OK btnBS <


2.6 Second programme B4A 53 B4x Premiers pas

Une autre amlioration consiste centrer les diffrents objets horizontalement sur lcran.
Pour cela, nous ajoutons le code ci-dessous dans le Designer, dans la fentre Script-Gnral.

'All variants script


AutoScaleAll ' adapte l'chelle la taille de l'cran

lblSigneMath.HorizontalCenter = 50%x ' centre la view au mileu de l'cran


lblNombre1.Right = lblSigneMath.Left ' aligne le bord droit sur le bord gauche
lblNombre2.Left = lblSigneMath.Right ' aligne le bord gauche sur le bord droit
lblResultat.HorizontalCenter = 50%x ' centre la view au mileu de l'cran
lblCommentaire.HorizontalCenter = 50%x ' centre la view au mileu de l'cran
pnlClavier.HorizontalCenter = 50%x ' centre la view au mileu de l'cran

Les deux premires lignes existent par dfaut, nous les laissons.
'All variants script
AutoScaleAll ' adapte l'chelle la taille de l'cran

lblSigneMath.HorizontalCenter = 50%x
HorizontalCenter centre une view horizontalement la valeur dfinie, 50%x dans notre cas donc le
milieu de lcran.

lblNombre1.Right = lblSigneMath.Left
Aligne le bord droit de lblNombre1 au bord gauche de lblSigneMath, positionne lblNombre1 juste
ct de lblSigneMath gauche.

lblNombre2.Left = lblSigneMath.Right
Aligne le bord gauche de lblNombre2 au bord droit de lblSigneMath, positionne lblNombre2 juste
ct de lblSigneMath droite.
2.6 Second programme B4A 54 B4x Premiers pas

Le nouveau layout est termin.


Dans le Concepteur visuel et sur le dispositif.

Nous allons modifier le code.


Tout dabord nous devons remplacer edtResultat par lblResultat car nous avons remplac lEditText
par un Label.

Double cliquez sur edtResultat pour le


slectionner.

Dans le menu cliquez sur


ou pressez F3.
2.6 Second programme B4A 55 B4x Premiers pas

Entrez lblResult dans la case Replace with.

Cliquez sur .

Nous devons aussi modifier le type de la view de EditText en Label.

Private lblResultat As Label

Nous crivons maintenant la routine qui gre les vnements Click des boutons.
Le nom gnrique des vnements de tous les boutons est "btnEvent", sauf le bouton btnAction
La routine associe aux vnement Click sera btnEvent_Click.
crivez le code suivant :

Private Sub btnEvent_Click

End Sub

Nous devons dfinir quel bouton a gnr lvnement. Pour cela, nous utilisons lobjet Sender qui
est un objet spcial contenant la rfrence lobjet qui a gnre lvnement.

Private Sub btnEvent_Click Pour avoir accs aux proprits de la view qui a gnr
Private btnSender As Button lvnement nous dclarons une variable locale.
Private btnSender As Button.
btnSender = Sender Et attribuons btnSender = Sender.

Select btnSender.Tag Puis, pour diffrencier entre le bouton retour arrire


Case "BS" et les boutons numriques nous utilisons une structure
Case Else Select / Case / End Select et la proprit Tag des boutons.
End Select Rappelez-vous, lorsque nous avons ajout les diffrents boutons
End Sub nous avons dfini leur proprit Tag en BS, 0, 1, 2 etc.

Select btnSender.Tag dfinit la variable comparer.


Case "BS" vrifie si cest le bouton avec la valeur Tag "BS".
Case Else gre tous les autres boutons.
2.6 Second programme B4A 56 B4x Premiers pas

Ajoutons le code pour les boutons numriques.


Nous ajoutons le texte du bouton au texte dans le Label lblResultat.

Select btnSender.Tag
Case "BS"
Case Else
lblResultat.Text = lblResultat.Text & btnSender.Text
End Select
End Sub

Ce qui est fait dans cette ligne


lblResult.Text = lblResult.Text & btnSender.Text

Le caractre "&" signifie concatnation, donc nous ajoutons simplement au texte dj existant le
contenu de la proprit Text du bouton qui a gnr lvnement.

Ajoutons le code pour le bouton BackSpace.


Select btnSender.Tag
Case "BS"
If lblResultat.Text.Length >0 Then
lblResultat.Text = lblResultat.Text.SubString2(0, lblResultat.Text.Length - 1)
End If
Case Else
lblResultat.Text = lblResultat.Text & btnSender.Text
End Select
End Sub

Lorsquon presse le bouton BS nous devons supprimer le dernier caractre du texte dans lblResult.
Cependant, ceci est seulement valable si la longueur du texte est plus grande que 0.
Ce qui est vrifi avec :
If lblResultat.Text.Length > 0 Then

Pour supprimer le dernier caractre nous utilisons la fonction SubString2.


lblResult.Text = lblResult.Text.SubString2(0,lblResult.Text.Length - 1)

SubString2(BeginIndex, EndIndex) extrait un nouvel objet String commenant par le caractre


lindex BeginIndex (inclusif) jusquau caractre lindex EndIndex (exclusif).

La routine complte est maintenant termine.

Sub btnEvent_Click
Private btnSender As Button

btnSender = Sender

Select btnSender.Tag
Case "BS"
If lblResultat.Text.Length > 0 Then
lblResultat.Text = lblResultat.Text.SubString2(0, lblResultat.Text.Length - 1)
End If
Case Else
lblResultat.Text = lblResultat.Text & btnSender.Text
End Select
End Sub
2.6 Second programme B4A 57 B4x Premiers pas

Nous pouvons amliorer linterface utilisateur par ladjonction de couleurs de fond du Label
lblCommentaire :
- Jaune pour un nouveau problme
- Vert clair pour un rsultat JUSTE
- Rouge clair pour un rsultat FAUX.

Nous ajoutons dans routine NouveauProbleme la ligne :


lblCommentaire.Color = Colors.RGB(255,235,128).

Private Sub NouveauProbleme


Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Nombre2 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
lblNombre1.Text = Nombre1 ' Affiche Nombre1 dans le Label lblNombre1
lblNombre2.Text = Nombre2 ' Affiche Nombre2 dans le Label lblNombre2
lblCommentaire.Text = "Entrez le rsultat" & CRLF & "et cliquez sur OK."
lblCommentaire.Color = Colors.RGB(255,235,128) ' couleur jaune
lblResultat.Text = "" ' Vide edtResult.Text
End Sub

Dans la routine TestResultat nous ajoutons les deux lignes pour les couleurs.

Private Sub TestResultat


If lblResultat.Text = Nombre1 + Nombre2 Then
lblCommentaire.Text = "Rsultat J U S T E." & CRLF & "Cliquez sur Nouveau."
lblCommentaire.Color = Colors.RGB(128,255,128) ' couleur vert clair
btnAction.Text = "Nouveau"
Else
lblCommentaire.Text = "Rsultat F A U X." & CRLF & "Entrez un nouveau rsultat" & CRLF &
"et cliquez sur O K."
lblCommentaire.Color = Colors.RGB(255,128,128) '
End If
End Sub

Une autre amlioration consiste ne pas afficher la touche 0 pour viter des rsultats commenant
par un 0.
Pour cela, nous la cachons dans la routine NouveauProbleme avec btn0.Visible = False.

Private Sub NouveauProbleme


Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Nombre2 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
lblNombre1.Text = Nombre1 ' Affiche Nombre1 dans le Label lblNombre1
lblNombre2.Text = Nombre2 ' Affiche Nombre2 dans le Label lblNombre2
lblCommentaire.Text = "Entrez le rsultat" & CRLF & "et cliquez sur OK."
lblCommentaire.Color = Colors.RGB(255,235,128) ' couleur jaune
lblResultat.Text = "" ' Vide edtResult.Text
btn0.Visible = False
End Sub
2.6 Second programme B4A 58 B4x Premiers pas

Dans la routine btnEvent_Click, nous cachons la touche 0 si la longueur du texte dans lblResult
est gale zro et laffichons si la longueur est plus grande que zro.

Sub btnEvent_Click
Private btnSender As Button

btnSender = Sender

Select btnSender.Tag
Case "BS"
If lblResultat.Text.Length > 0 Then
lblResultat.Text = lblResultat.Text.SubString2(0,lblResultat.Text.Length - 1)
End If
Case Else
lblResultat.Text = lblResultat.Text & btnSender.Tag
End Select

If lblResultat.Text.Length = 0 Then
btn0.Visible = False
Else
btn0.Visible = True
End If
End Sub

Comme nous utilisons la rfrence btn0 dans le code nous devons la dclarer dans la routine
Globals.

Modifiez la ligne ci-dessous :

Private btnAction, btn0 As Button

Excutez le programme pour voir le rsultat.


3 B4i Premiers pas 59 B4x Premiers pas

3 B4i Premiers pas


B4i est un environnement de dveloppement simple et puissant et cible des dispositifs Apple
(iPhone, iPad etc.).
Le langage B4i est similaire B4A et Visual Basic.
Les applications compiles sont des application iOS natives; il ny a pas dautres dpendances.
Contrairement dautres EDIs, B4i est focalis 100% sur iOS.
B4i comprend un constructeur visuel pour les interfaces homme-machine, avec un support pour de
multiples crans et orientations.
Vous pouvez dvelopper et dboguer avec un dispositif rel.

iOS 7 et suprieur sont supports.

Ce dont vous avez besoin :


Le programme B4i, qui est un programme sexcutant sur un PC.
Le Java SDK sur le PC, gratuit.
Une licence dveloppeur Apple, cot 99$ par an.
Un dispositif pour les essais.
Le programme Basi4i-Bridge sur le dispositif, gratuit.
Un Mac Builder pour compiler le programme, qui peut tre soit :
o Un ordinateur Mac avec le programme Mac Builder, un wifi local.
o Le service Mac Builder hberg sur Internet, cot 26$ par an.
Un ordinateur Mac ou un service MacInCloud pour distribuer le programme.

Liens vers des tutoriels (en anglais) dans le forum :


Local Mac Builder Installation
Creating a certificate and provisioning profile
Installing B4i-Bridge and debugging first app
3 B4i Premiers pas 60 B4x Premiers pas

3.1 Installation de B4i

3.1.1 Installation de Java JDK

B4i dpend du composant gratuit Java JDK.

Si vous utilisez dj B4A vous pouvez sauter ce chapitre.

Instructions dinstallation :

En premier, vous devez installer Java JDK.


Notez quil ny a aucun problme davoir plusieurs versions de Java installes sur un mme
ordinateur.

- Ouvrez ce lien Java 8 JDK download link.


- Cochez la case Accept License Agreement.

- Slectionnez "Windows x86" ou "Windows x64" (pour des machines 64 bit) dans la liste des
plateformes.
- Tlchargez le fichier et installez-le.
3.1 Installation de B4i 61 B4x Premiers pas

3.1.2 Installation de B4i

Tlchargez et installez le ficher B4i sur votre ordinateur.

Copiez le fichier de licence b4i-license.txt dans le dossier B4i et dans un autre endroit sr pour
sauvegarde. Notez que ce nest pas un fichier texte, ne cherchez pas louvrir avec un diteur de
texte.

Lorsque vous excutez B4i pour la premire fois, le programme vous demande dintroduire votre
adresse e-mail, celle que vous avez utilis lors de lachat de B4i.
Vous la trouvez aussi dans le mail que vous avez reu avec le fichier B4i.

Entrez votre adresse e-mail.

Une fentre de confirmation que B4i a t enregistr sera affiche.

Contactez support@basic4ppc.com si vous avez besoin dassistance.


3.1 Installation de B4i 62 B4x Premiers pas

3.1.3 Installation du Mac Builder

La compilation pour iOS ncessite le composant Mac Builder, il y deux options :


Utiliser un ordinateur Mac connect un rseau local.
Pour cela, vous devez tlcharger et installer le Mac Builder.

Utilise le service hberg. Installation du service Mac Builder hberg.


Le service hberg vous permet de dvelopper des applications iOS sans ordinateur Mac.
Toutes les tapes de dveloppement peuvent tre effectues avec ce service lexception de
la dernire tape qui consiste tlcharger lapplication sur Apple App Store. Cette tape
ncessite un ordinateur Mac ou un service tel que MacInCloud.
Notez que ce service est actuellement limit des projets de 15Mb max.

Lien vers le tutoriel dans le forum : Local Mac Builder Installation.

Les instructions ci-dessous expliquent comment installer le Mac Builder sur une machine locale.

1. Installez Java JDK 8 : http://www.oracle.com/technetwork/java/javase/downloads/jdk8-


downloads-2133151.html
2. Installez Xcode 6.
3. Tlchargez et dzipez le B4i-Builder.
4. Ouvrez un terminal et naviguez vers le dossier B4i-Builder.
5. Excutez-le avec : java -jar B4iBuildServer.jar
6. Dfinissez ladresse builder IP dans lEDI sous Outils - Build Server - Dfinitions Server.

Notes & Conseils

- Par dfaut, les ports 51041 (http) et 51042 (https) sont utiliss.
- Le pare-feu doit tre dsactiv ou autoriser des connexions dentre sur les deux ports.
- Pour vrifier que le serveur fonctionne allez vers ce lien : http://<server ip>:51041/test
- Vous pouvez le serveur avec : http://<server ip>:51041/kill
- Il est recommand de dfinir ladresse ip serveur du Mac comme adresse statique. Ceci peut tre
fait dans les rglages du routeur ou dans le Mac sous Rglages rseau.
- Un unique Mac builder peut tre utilis par plusieurs dveloppeurs pour autant quils soient tous
connects au mme rseau local. Notez que vous ntes pas autoris dhberger des builders pour
des dveloppeurs en dehors de votre organisation.

Multiple IPs.

Lors de son dmarrage, le serveur prend la premire adresse IP fourni par le systme et lutilise
pour sa propre adresse IP. Vous pouvez la voir dans les messages du serveur.
Dans la plupart des cas, cest la bonne adresse. Nanmoins, si ce nest pas le cas, alors le serveur est
inutilisable.
Dans ce cas, vous devez dfinir explicitement ladresse correcte :
- Ouvrez le dossier key et effacez tous les fichiers.
- Editez key.txt et changez-le en : manual :<adresse ip correcte>

Par exemple :
manual :192.168.0.199
3.1 Installation de B4i 63 B4x Premiers pas

3.1.4 Mac builder hberg (Hosted Mac builder) (optionnel)

Si vous avez achet le service Mac builder hberg vous avez reu un mail avec votre user ID
(identifiant utilisateur).

Vous devez le dfinir dans lEDI.

Entrez le ID.

Noubliez las de cocher


Si vous utilisez le service Hosted Builder !
3.2 Configuration des dossiers dans lEDI 64 B4x Premiers pas

3.2 B4i Configuration des dossiers dans lEDI

Vous devez configurer diffrents dossiers dans lEDI.

Excutez lEDI.

Dans le menu
cliquez sur
.

javac.exe :
Entrez le dossier dans lequel se trouve le fichier javac.exe.

Keys folder :
Crez un dossier spcifique pour les cls (Keys), par exemple C:\B4i\Keys.

Bibliothques additionnelles :
Crez un dossier spcifique pour les bibliothques additionnelles, par exemple
C:\B4i\AdditionalLibraries.

Modules partags :
Crez un dossier spcifique pour les modules partags, par exemple C:\B4i\SharedModules.
3.3 Creation dun certificat et profil 65 B4x Premiers pas

3.3 Cration dun certificat et profil de provisionnement

Ne paniquez pas.
Alors que ce processus peut paratre un peu ennuyeux, il n'est pas trop compliqu et vous pouvez
toujours supprimer les cls et recommencer partir de zro (ce qui nest pas toujours le cas dans
Android)

Notez que vous devez dabord vous enregistrer auprs dApple en tant que dveloppeur iOS (cot
99$ par an). Le processus est entirement effectu sur un ordinateur Windows.

Pour pouvoir installer une application sur un dispositif iOS, vous devez crer un certificat et un
profil de provisionnement.

Le certificat est utilis pour signer les applications. Le profil de provisionnement, li un certificat
spcifique, comprend une liste des dispositifs sur lesquels cette application peut tre installe.

La vido montre les diffrentes tapes pour crer et tlcharger un certificat et un profil de
provisionnement.

Il y a deux tapes qui ne sont pas montres dans la vido mais sont aussi ncessaires avant que vous
ne puissiez crer un profil de provisionnement :

- Crez un App ID. Cette tape est simple. Assurez-vous de crer in id wildcard.
- Ajoutez un ou plusieurs dispositifs. Pour cela, vous devez chercher les UDID des dispositifs.

Lien pour le tutoriel dans le forum : Creating a certificate and provisioning profile.

3.3.1 UDID

Les dispositifs sont reconnus par leur UDIDs. Il y a deux moyens pour obtenir ces UDID :

1. Si vous avez iTunes install, vous pouvez les trouver dans iTunes.
La premire fois, connectez votre dispositif avec un cble USB votre ordinateur.
Excutez iTunes, vous devriez voir cette icne sur le haut. a peut prendre un moment
avant que vous ne le voyiez.
3.3 Creation dun certificat et profil 66 B4x Premiers pas

Cliquez sur et vous obtenez lcran ci-dessous :

Maintenant, cliquez sur pour obtenir lUDID.

Right click on to copy the UDID.

2. Utilisez un service en ligne tel que celui-ci : http://get.udid.io/

3.3.2 Certificat et profil de provisionnement

tapes principales :

1. Dfinissez un nouveau dossier cl (Key) dans lEDI.


2. Crez une cl (Key) en slectionnant dans Outils / Cl de signature prive.
3. Crez et tlchargez le certificat comme montr dans la vido. Vous devez tlcharger le
fichier CSR qui a t cr dans ltape 2.
Notez que vous pouvez choisir soit iOS App Development ou App Store and Ad Hoc dans
la page de certificat.
4. Crez et tlchargez un profil de provisionnement.
3.4 Installation de B4i-Bridge 67 B4x Premiers pas

3.4 Installation de B4i-Bridge

B4i-Bridge est une application que vous devez installer sur votre dispositif.
Elle a trois fonctions :
1. Lancer la procdure dinstallation en cas de besoin.
2. Excuter lapplication (si une installation nest pas ncessaire).
3. B4i-Bridge est aussi le Constructeur visuel WYSIWYG.

B4i-Bridge ne sinstalle quune fois. Linstallation se fait dans le navigateur du dispositif.

Lien vers le tutoriel dans le forum : Installing B4i-Bridge and debugging first app.

3.5 Installation du certificat B4I

Lancez Safari (navigateur du dispositif) et naviguez vers : www.b4x.com/ca.pem


Suivez les instructions.
Vous pouvez tout moment voir le certificat dans Rglages / Gnral / Profil.

3.6 Dfinition du nom de Paquet

Excutez B4i, chargez un projet ou utilisez le projet par dfaut et dfinissez le nom du Paquet bas
sur le provision app ID.

Dans le menu cliquez sur


.

La fentre ci-dessous sera affiche :

Modifiez le nom du Paquet en


fonction du provision app ID.

Exemple dans mon cas :


anywheresoftware.b4i. obligatoire, la suite en fonction de votre application.
3.4 Installation de B4i-Bridge 68 B4x Premiers pas

3.7 Installation de Build B4i-Bridge

Dans le menu cliquez sur et cliquez sur :

Vous obtenez la fentre ci-dessous dans laquelle vous trouvez le code pour Safari (chapitre suivant).

Le code dans le rectangle rouge est srement diffrent !

3.7.1 Chargez B4i-Bridge

Ouvrez Safari sur le dispositif .

Entrez le code obtenu dans le chapitre prcdent dans la case sur le haut de lcran.
3.4 Installation de B4i-Bridge 69 B4x Premiers pas

Cet cran sera affich.

Cliquez sur.

Cliquez sur pour linstaller

Fermez Safari.

3.7.2 Installation de B4i-Bridge et dmarrage

Cliquez sur licne B4i-Bridge sur le dispositif, vous verrez lanimation dinstallation et

finalement licne de B4i-Bridge .

Conseils :
- Il nest pas ncessaire dattendre que lanimation dinstallation soit termine. Ds que lanimation
a commence vous pouvez presser licne.
- Si linstallation reste bloque en attente plus longtemps que 10 15 secondes, dsinstallez et
rinstallez lapplication.
- B4i-Bridge doit tre en avant-plan pour pouvoir dmarrer une installation ou dmarrer
lapplication. Dans la majorit des cas il est automatiquement en avant-plan. Si a nest pas le cas,
vous devez presser licne pour lamener en avant-plan.
3.7 Mon premier programme B4i 70 B4x Premiers pas

3.8 Mon premier programme B4i (MonPremierProgramme.b4i)

Nous allons crire notre premier programme B4i. Cest un programme dentranement de calcul
pour enfants.

Le projet est disponible dans le dossier CodesSource qui est fourni avec ce livret :
CodesSource\MonPremierProgramme\B4i\ MonPremierProgramme.b4i

Nous aurons sur lcran :


- 2 Labels affichant des nombres gnrs alatoirement (entre 1 et 9).
- 1 Label avec le signe mathmatique (+).
- 1 TextField dans lequel lutilisateur devra entrer le rsultat.
- 1 Button, utilis soit pour confirmer le rsultat entr ou pour gnrer un nouveau calcul.
- 1 Label avec un commentaire concernant le rsultat.

Dans iOS :
- Label est un objet pour afficher du texte.
- TextField est un objet permettant lutilisateur dditer du texte.
- Button est un objet permettant lutilisateur des actions, un clic.

Nous allons dfinir le layout (mise en page) de linterface utilisateur avec le Concepteur visuel du
Designer et passerons pas pas au travers de tout le processus.
Le Designer gre les diffrents objets de linterface.
Le Concepteur visuel montre les positions et dimensions des diffrents objets et permet de les
dplacer ou de les redimensionner sur lcran.
Sur un dispositif nous voyons laspect rel.
3.7 Mon premier programme B4i 71 B4x Premiers pas

Excutez B4i

Enregistrez le projet.

Vous devez enregistrer le projet avant de pouvoir utiliser le Designer.

Crez un nouveau dossier


MonPremierProgramme et
enregistrez le projet avec le nom
MonPremierProgramme.

Dfinissez le nom du Paquet.


Chaque programme ncessite un nom de Paquet.

Dans le menu cliquez sur .

Cette fentre sera affiche :


3.7 Mon premier programme B4i 72 B4x Premiers pas

Le nom par dfaut est b4i.example. Nous le modifions en


anywheresoftware.b4i.MonPremierProgramme.

Dfinissez lattribut Application Label.

Lattribut Application label est le nom du programme qui sera affich sur le dispositif sous licne.

Sur le haut du code vous voyez la Region Project Attributes.

Les Regions sont des parties de code qui peuvent


tre rduites ou tendues comme droite.

Un clic sur tend la Region.


Un clic sur rduit la Region.
Les Regions sont expliques dans le chapitre
Rduire une Rgion dans le livret B4x EDI.

#Region Project Attributes


#ApplicationLabel: B4i Example
#Version: 1.0.0
'Orientation possible values: Portrait, LandscapeLeft, LandscapeRight and
PortraitUpsideDown
#iPhoneOrientations: Portrait, LandscapeLeft, LandscapeRight
#iPadOrientations: Portrait, LandscapeLeft, LandscapeRight, PortraitUpsideDown
#End Region

Le nom par dfaut est B4i Example, nous le modifions en MonPremierProgramme.

Modifiez cette ligne :


#ApplicationLabel: B4i Example
en
#ApplicationLabel: MyFirstProgram

Les autres attributs sont expliqus dans le chapitre Enttes de code Project Attributes / Activity
Attributes dans le livret B4x EDI.
3.7 Mon premier programme B4i 73 B4x Premiers pas

Dans lEDI excutez Build B4i-Bridge App.

Dans lEDI, menu / /

Vous obtenez cette fentre.

Sur le dispositif excutez B4i-Bridge .

Sur son cran vous voyez ladresse IP du dispositif.

Dans lEDI cliquez sur / /


3.7 Mon premier programme B4i 74 B4x Premiers pas

Entrez ladresse IP :

Cliquez sur .

Vous verrez cet cran sur le dispositif (seule la partie suprieure est affiche).

Dans lEDI excutez le Designer.

Attendez que le Designer soit prt.


3.7 Mon premier programme B4i 75 B4x Premiers pas

Le Designer ressemble limage ci-dessous.

Notez dans le coin infrieur gauche ltat de la connexion avec le dispositif :

Vous pouvez aussi voir ceci si le dispositif nest pas connect.

Dans le Designer il y aussi le Constructeur visuel qui affiche graphiquement le layout, pas
exactement WYSIWYG, mais montre les positions et dimensions des diffrents objets.
Seul le haut de la fentre est montr ci-dessous.

Le rectangle en gris fonc reprsente la surface du dispositif connect.


3.7 Mon premier programme B4i 76 B4x Premiers pas

Maintenant, nous allons ajouter 2 Labels pour les nombres.


Dans le Designer, ajoutez un Label.

Le Label apparait dans le Concepteur visuel, dans la fentre Liste des views et les proprits par
dfaut du Label sont affiches dans la fentre Proprits.

Redimensionnez et dplacez le Label avec les


petits carrs rouges comme gauche.

Vous pouvez suivre les layout sur le dispositif.

Pour le moment nous ne voyons que Label1.


La couleur de fond est transparente par dfaut.
Label1 est le nom par dfaut dun Label.
3.7 Mon premier programme B4i 77 B4x Premiers pas

Les nouvelles proprits Left, Top, Width et Height sont


directement mises jour dans la fentre Proprits.
Vous pouvez aussi modifier les proprits Left, Top, Width
et Height directement dans la fentre Proprits.

Nous modifions les proprits du Label nos besoins.


Par dfaut, le nom est Label avec un nombre, ici Label1.
Nous modifions le nom en lblNombre1.
Les trois premires lettres 'lbl' pour 'Label', et 'Nombre1'
pour le premier nombre.
Il est recommand de donner des noms significatifs aux
objets, de cette manire nous savons directement le type
dobjet et sa fonction.

Presser la touche 'Entre' ou cliquez quelque part ailleurs


pour mettre jour la proprit Event Name.

Nous avons maintenant :

Main : Module Main.


Nom : Nom de la view.
Type : Type de la view. Dans ce cas, Label,
affichage de texte non ditable.
Event Name : Nom gnrique des routines qui grent les
vnements du Label.
Parent : View parent laquelle appartient le Label,
Main dans ce cas.
3.7 Mon premier programme B4i 78 B4x Premiers pas

Vrifions et modifions les autres proprits :

Dfinissez Left, Top, Width et Height avec les valeurs dans


limage.

Visible est coch.

Nous gardons les couleurs par dfaut.

Text mis 5

Nous gardons la police de caractres Font par default.


Taille, mis 36.

Text Alignment mis Center.

Et le rsultat dans le Constructeur visuel et sur le dispositif.


3.7 Mon premier programme B4i 79 B4x Premiers pas

Nous avons besoin dun deuxime Label similaire au premier. Au lieu den ajouter un nouveau,
nous copions le premier avec les mmes proprits. Seule les proprits Nom and Left seront
modifies.

Cliquez avec le bouton droit sur lblNombre1


puis cliquez sur dans le menu
contextuel.

Le nouveau Label couvre le Label dupliqu.

Sur la gauche, dans la fentre Liste des Views, vous voyez les
diffrentes views.
Le nouveau Label Label1 est ajout.

Nous positionnons maintenant le nouveau Label et


modifions son nom en lblNombre2.

Modifiez le nom en lblNombre2.

La proprit Left en 180.

Et le rsultat dans le Constructeur visuel et sur le dispositif.


3.7 Mon premier programme B4i 80 B4x Premiers pas

Ajoutons un 3me Label pour le signe mathmatique. Nous dupliquons lblNombre1 encore une fois.
Cliquez avec le bouton droit sur lblNombre1 puis cliquez sur dans le menu contextuel.

Le nouveau Label couvre lblNumber1.

Positionnez-le entre les deux autres Labels et modifiez son nom en lblSigneMath et sa proprit Text
en '+'.

Et le rsultat dans le Constructeur visuel et sur le dispositif.

Maintenant, ajoutons un objet TextField.

Dans le Constructeur visuel, dans le menu ,


cliquez sur .

Positionnez le juste au-dessous des trois Labels et modifiez son nom en txfResultat.
'txf' signifie TextField et 'Resultat' sa fonction.
3.7 Mon premier programme B4i 81 B4x Premiers pas

Modifiez ces proprits.


Nom en txfResultat

Left, Top, Width and Height.

paisseur du cadre en 1

Size en 30

Text Alignment en Center

Hint Text en Rsultat


Hint Text reprsente le texte affich dans TextField sil ny a aucun
texte crit.

Keyboard Type en NUMBER_PAD


Dfinir Keyboard Type en NUMBER_PAD nautorise que lcriture de
chiffres.

Et le rsultat dans le Constructeur visuel et sur le dispositif.


3.7 Mon premier programme B4i 82 B4x Premiers pas

Nous ajoutons un Button (bouton) qui, lorsquil est press vrifie le


rsultat fourni par lutilisateur ou gnre un nouveau problme
dpendant de la rponse de lutilisateur.

Positionnez le au-dessous du TextField txfResultat.


Redimensionnez-le et modifiez les proprits ci-dessous :

Nom en btnAction

Left, Top, Width et Height.

Background Color en #FFBDBBBB

paisseur cadre en 1

Text en O K (avec un espace entre O et K)

Taille en 24

Et le rsultat dans le Constructeur visuel et sur le dispositif.


3.7 Mon premier programme B4i 83 B4x Premiers pas

Ajoutons encore le dernier Label pour afficher des commentaires.


Positionnez le au-dessous du Button et redimensionnez-le.

Modifiez les proprits ci-dessous :


Nom en lblCommentaire

Left, Top, Width et Height.

Epaisseur du cadre en 1

Taille en 20

Multilignes en True (coch)

Text Alignment en Center

Et le rsultat dans le Constructeur visuel et sur le dispositif.


3.7 Mon premier programme B4i 84 B4x Premiers pas

Maintenant nous enregistrons le fichier layout.

Cliquez sur et enregistrez le fichier avec le nom 'Main'.

Cliquez sur .
3.7 Mon premier programme B4i 85 B4x Premiers pas

Pour le code du projet nous avons besoin de rfrences pour les diffrentes views.
Nous gnrons ces rfrences au moyen de la fonction Gnrer Membres du Designer.

La fonction Gnrer Membres gnre automatiquement les rfrences et cadres de routines


dvnement pour les views.

Cliquez sur pour ouvrir le gnrateur.

Dans cette fentre nous trouvons une liste de toutes les views dfinies dans le layout courant.
Nous cochons toutes les views et lvnement Click pour le bouton btnAction.
Le fait de cocher une view gnre sa rfrence dans la routine Process_Globals.
Ces rfrences sont ncessaires au compilateur et pour la fonction dautocompltion.

Private btnAction As Button


Private lblComments As Label
Private lblMathSign As Label
Private lblNumber1 As Label
Private lblNumber2 As Label
Private txfResult As TextField

Un clic sur montre tous les vnements de cette view .


Cocher un vnement dune view gnrera le cadre pour cette routine dvnement.

Sub btnAction_Click

End Sub

Cliquez sur pour gnrer les rfrences et le cadre des routines dvnement, puis
fermez la fentre .
3.7 Mon premier programme B4i 86 B4x Premiers pas

Maintenant nous retournons dans lEDI pour crire le code.

Dans le haut du code nous trouvons :

Sub Process_Globals
'These global variables will be declared once when the application starts.
'Public variables can be accessed from all modules.
Public App As Application
Public NavControl As NavigationController
Private Page1 As Page

Private btnAction As Button


Private lblComments As Label
Private lblMathSign As Label
Private lblNumber1 As Label
Private lblNumber2 As Label
Private txfResult As TextField
End Sub

Ces lignes sont gnres automatiquement dans lEDI.


Public App As Application
Public NavControl As NavigationController
Private Page1 As Page

iOS ncessite au minimum ces objets : une Application, un NavigationControl et une Page, les
dtails sont expliqus dans le chapitre Flux du Programme / Cycle de vis dans le livret B4x Langage
Basic.

Au-dessous nous trouvons la routine Application_Start qui est la premire routine tre excute
lors du dmarrage du programme.
Le code ci-dessous est aussi gnr automatiquement dans chaque nouveau projet.

Private Sub Application_Start (Nav As NavigationController)


NavControl = Nav
Page1.Initialize("Page1")
Page1.Title = "Page 1"
Page1.RootPanel.Color = Colors.White
NavControl.ShowPage(Page1)
End Sub

NavControl = Nav > Dfinit NavControl comme NavigationController


Page1.Initialize("Page1") > Initialise Page1, "Page1" est le nom gnrique (EventName)
pour Page1.
Page1.Title = "Page 1" > Dfinit le titre de la Page.
Page1.RootPanel.Color = Colors.White > Dfinit la couleur de fond en blanc (white).
NavControl.ShowPage(Page1) > Affiche Page1 sur le dispositif.
3.7 Mon premier programme B4i 87 B4x Premiers pas

En premier, notre programme doit charger le fichier layout que nous avons dfini dans les pages
prcdentes.
Le fichier doit tre charg sur RootPanel (panel racine) de Page1, nous le chargeons juste avant
NavControl.ShowPage(Page1)
Nous profitons de la fonction dautocompletion et de laide intgre de B4i.

Entrez P dans une nouvelle ligne 34.

Une liste droulante est affiche avec tous


les mots cl, views et routines contenant P.

Le premier lment commenant par P est


mis en vidence.

Pressez la touche Entre pour valider.

Pest complt en Page1.


Ajoutez un point .

La liste droulante contient toutes les


proprits de la view, Page dans notre cas.

Avec la touche flche vers le bas, allez


jusqu RootPanel.

Nous voyons RootPanel mis en vidence, et ct de la liste laide en ligne avec la syntaxe pour les
paramtres et une explication.
3.7 Mon premier programme B4i 88 B4x Premiers pas

Pressez la touche Entre pour valider.

Ajoutez un point .

A nouveau, une liste droulante avec les


proprits de la view concerne, celles dun
Panel dans notre cas, est affiche.

Avec la touche flche vers le bas, allez


jusqu LoadLayout.

A nouveau nous voyons la syntaxe et


lexplication.

Pressez la touche Entre pour valider.

crivez (.

Laide en ligne nous indique que faire avec une explication.

Compltez la ligne avec le nom du fichier


layout.
Lextension du fichier nest pas ncessaire.
Le nom du fichier "Main" est entre
guillemets car cest on objet String.
La ligne jaune dans la marge gauche indique que le code des lignes en question a t modifi.

Ds que vous enregistrez le projet, la ligne jaune passe en


vert.
3.7 Mon premier programme B4i 89 B4x Premiers pas

Nous voulons gnrer un nouveau problme lors du dmarrage. Pour cela, nous ajoutons un appel
la routine NouveauProbleme dans Application_Start.

Private Sub Application_Start (Nav As NavigationController)


'SetDebugAutoFlushLogs(True) 'Uncomment if program crashes before all logs are
printed.
NavControl = Nav
Page1.Initialize("Page1")
Page1.Title = "Page 1"
Page1.RootPanel.Color = Colors.White
Page1.RootPanel.LoadLayout("Main")
NavControl.ShowPage(Page1)

NouveauProbleme
End Sub

NouveauProbleme est en rouge car la routine NouveauProbleme na pas encore t dfinie.


Gnrer un nouveau problme signifie gnrer alatoirement deux nouveaux nombres, Nombre1 et
Nombre2, entre 1 et 9 (inclusif) puis afficher ces deux nombres dans les proprits Text de
lblNombre1 et lblNombre2.

Nous crivons le code ci-dessous :


Dans la routine Process_Globals nous ajoutons les deux variables pour les deux nombres.

Private Nombre1, Nombre2 As Int


End Sub

Puis nous crivons la routine NouveauProbleme :

Private Sub NouveauProbleme


Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Nombre2 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
lblNombre1.Text = Nombre1 ' Affiche Nombre1 dans le Label lblNombre1
lblNombre2.Text = Nombre2 ' Affiche Nombre2 dans le Label lblNombre2
lblCommentaire.Text = "Entrez le rsultat" & CRLF & "et cliquez sur OK."
txfResultat.Text = "" ' Vide edtResult.Text
End Sub

La fonction ci-dessous gnre un nombre alatoire entre '1' (inclusif) et '10' (exclusif) :
Rnd(1, 10)

Dans cette ligne Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Le texte aprs lapostrophe, ' Gnre..., est considr comme un commentaire.
Il est conseill dajouter des commentaires expliquant la fonctionnalit du code.

Linstruction ci-dessous affiche le commentaire dans le Label lblCommentaire :


lblCommentaire.Text = "Entrez le rsultat" & CRLF & "et cliquez sur OK."
CRLF est le caractre Nouvelle Ligne.
3.7 Mon premier programme B4i 90 B4x Premiers pas

Maintenant nous ajoutons le code pour lvnement Click du bouton Button.

Nous avons deux cas :


- Le texte de btnAction est gal "O K", ce qui signifie quun nouveau problme est affich, et que
le programme attend que lutilisateur entre un rsultat et presse le bouton.
- Le texte de btnAction est gal "Nouveau", ce qui signifie que lutilisateur a entr un rsultat
correct et lorsquil presse btnAction un nouveau problme sera gnr.

Sub btnAction_Click
If btnAction.Text = "O K" Then
If txfResultat.Text = "" Then
lblCommentaire.Text = "Pas de rsultat!" & CRLF & "Entrez le rsultat" & CRLF &
"et cliquez sur OK."
Else
TestResultat
End If
Else
NouveauProbleme
btnAction.Text = "O K"
End If
End Sub

If btnAction.Text = "O K" Then Vrifie si le texte du bouton est gal "O K".
Si oui, nous vrifions si txfResultat est vide, pas de rsultat entr par lutilisateur.
Si oui nous affichons un message dans lblCommentaire indiquant quil ny a pas de rsultat
dans txfResultat.
Si non, nous vrifions si le rsultat est juste ou faux.
Si non, nous gnrons un bouveau problme, modifions le texte de btnAction en "O K" et vidons
txfResultat.

La dernire routine vrifie le rsultat.

Private Sub TestResultat


If txfResultat.Text = Nombre1 + Nombre2 Then
lblCommentaire.Text = "Rsultat J U S T E." & CRLF & "Cliquez sur Nouveau."
btnAction.Text = "Nouveau"
Else
lblCommentaire.Text = "Rsultat F A U X." & CRLF & "Entrez un nouveau rsultat" & CRLF &
"et cliquez sur O K."
End If
End Sub

Avec If txfResultat.Text = Nombre1 + Nombre2 Then nous vrifions si le rsultat est juste.

Si oui, nous affichons dans lblCommentaire le texte ci-dessous :


'Rsultat J U S T E'
'Cliquez sur Nouveau'
Et modifions le texte de en "Nouveau".
Si non, nous affichons dans lblCommentaire le texte ci-dessous :
'Rsultat F A U X'
'Entrez un nouveau rsultat
'et cliquez sur O K'
3.7 Mon premier programme B4i 91 B4x Premiers pas

Nous allons compiler le programme et le transfrer sur le dispositif.


Dans lEDI cliquez sur ou pressez F5 :

Le programme va tre compil.

Lorsque vous voyez


'Termin avec succs.' Dans
la fentre de compilation, la
compilation et le transfert
sont termins.

Sur le dispositif vous verrez un message similaire celui


ci-dessous lorsque vous excutez le programme la
premire fois.

Touchez .

Vous verrez quelque part sur votre dispositif licne du

programme , touchez la pour lexcuter.

Et vous verrez un cran similaire celui gauche, mais


avec des nombres diffrents.

Nous pourrions, bien sr, apporter des amliorations


fonctionnelles et esthtiques au projet, mais a ntait
pas le but de ce premier projet, mais est lobjet du projet
SecondProgramme.
3.7 Mon premier programme B4i 92 B4x Premiers pas

Touchez pour activer le clavier.

Entrez le rsultat, 16 dans lexemple.

Vous verrez un cran similaire celui gauche.

Cliquez sur pour confirmer le rsultat.

Si le rsultat est juste, vous verrez un cran similaire


celui gauche.

Si le rsultat est faux, le message ci-dessous sera affich.


3.8 Second programme B4i 93 B4x Premiers pas

3.9 Second programme B4i (SecondProgram.b4i)

Le projet se trouve dans le dossier CodesSource :


CodesSource\SecondProgramme\B4i\SecondProgramme.b4i.

Amliorations par rapport au projet MonPremierProgramme.


- Clavier numrique indpendant vitant lutilisation du clavier virtuel.
- Couleurs dans les commentaires.
- Centrage des diffrents objets.

Crez un nouveau dossier et nommez-le SecondProgramme. Copiez tous les fichiers du projet
MonPremierProgramme dans ce nouveau dossier et renommez les fichiers
MonPremierProgramme.b4i en SecondProgramme.b4i et MonPremierProgramme.b4i.meta en
SecondProgramme.b4i.meta.

Chargez le nouveau programme dans lEDI.

Nous devons modifier le nom du Paquet.

Dans lEDI, menu .


Cliquez sur .

Modifiez le nom du paquet en anywheresoftware.b4i.SecondProgram et cliquez sur .


3.8 Second programme B4i 94 B4x Premiers pas

Nous devons encore modifier le paramtre ApplicationLabel sur le haut du code.


#Region Project Attributes
#ApplicationLabel: SecondProgramme

Excutez le Designer.

Nous remplaons la view txfResultat TextField par un nouveau Label.


Excutez le Designer et dans le Concepteur visuel cliquez sur la view txfResultat.

Cliquez avec le bouton droit sur txfResultat Cliquez avec le bouton droit sur lblNombre1
et cliquez sur . et cliquez sur .

Le nouveau Label couvre lblNombre1.


3.8 Second programme B4i 95 B4x Premiers pas

Modifiez les proprits ci-dessous :

Nom en lblResultat

Left, Top, Width, Height

paisseur de cadre en 1

Text en "" vide, pas de caractres.


3.8 Second programme B4i 96 B4x Premiers pas

Ajoutons maintenant un Panel pour les boutons


du clavier.

Positionnez et redimensionnez-le comme dans


limage.

Modifiez son nom en pnlClavier


"pnl" pour Panel, le type de la view.

Modifiez
Rayon des coins en 0
3.8 Second programme B4i 97 B4x Premiers pas

Nous dplaons btnAction de Main sur le Panel


pnlClavier.

Cliquez sur btnAction.

Dans la liste Parent cliquez sur .

Le bouton btnAction appartient maintenant au Panel


pnlClavier.

Nous rarrangeons les views pour obtenir plus


de place pour le clavier

Modifiez les proprits ci-dessous :


lblCommentaire Top = 140

pnlClavier Left = 15
pnlClavier Top = 240
pnlClavier Width = 290
pnlClavier Height = 170
pnlClavier paisseur de cadre = 0

Dplacez btnAction dans le coin suprieur droit


de pnlClavier.
3.8 Second programme B4i 98 B4x Premiers pas

Cliquez sur le Panel pnlClavier pour le slectionner.

Cliquez sur

Pour ajouter un nouveau bouton.

Le nouveau bouton est ajout.

Modifiez les proprits ci-dessous :

Nom en btn0
Nom gnrique de lvnement en btnEvent

Left en 0
Top en 120
Width en 50
Height en 50

Tag en 0
Background Color to #B7FA7EA9
3.8 Second programme B4i 99 B4x Premiers pas

paisseur du cadre en 1
Rayon des coins en 5

Text en 0

Taille en 28

Le bouton ressemblera ceci.

Duplquons btn0 et positionnons-le juste ct


de btn0.

Cliquez avec le bouton droit sur btn0


et cliquez sur .

Dplacez le nouveau bouton btn0 ct de btn0


avec un petit espace.

Modifiez les proprits ci-dessous :


Nom en btn1

Tag en 1

Text en 1

Et le rsultat.
Table des matires 100 B4x Premier pas

Ajoutez 8 boutons supplmentaires et


positionnez-les comme dans limage.

Modifiez leurs proprits comme ci-dessous :


Nom btn2, btn3, btn4 etc.
Tag 2 , 3 , 4 etc.
Text 2 , 3 , 4 etc.

Pour crer le bouton Retour Arrire


(BackSpace), nous dupliquons un des boutons
nombre et positionnons-le dans le coin suprieur
gauche.

Redimensionnez et positionnez btnAction.


3.8 Second programme B4i 101 B4x Premiers pas

Modifiez les proprits Name, Tag, Text et Color comme ci-dessous.

btnBS < btnAction OK


3.8 Second programme B4i 102 B4x Premiers pas

Une autre amlioration consiste centrer les diffrents objets horizontalement sur lcran.
Pour cela, nous ajoutons le code ci-dessous dans le Designer, dans la fentre Script-Gnral.

'All variants script


AutoScaleAll

lblSigneMath.HorizontalCenter = 50%x ' centre la view au mileu de l'cran


lblNombre1.Right = lblSigneMath.Left ' aligne le bord droit sur le bord gauche
lblNombre2.Left = lblSigneMath.Right ' aligne le bord gauche sur le bord droit
lblResultat.HorizontalCenter = 50%x ' centre la view au mileu de l'cran
lblCommentaire.HorizontalCenter = 50%x ' centre la view au mileu de l'cran
pnlClavier.HorizontalCenter = 50%x ' centre la view au mileu de l'cran

Les deux premires lignes existent par dfaut, nous les laissons.
'All variants script
AutoScaleAll ' adapte l'chelle la taille de l'cran

lblSigneMath.HorizontalCenter = 50%x
HorizontalCenter centre une view horizontalement la valeur dfinie, 50%x dans notre cas donc le
milieu de lcran.

lblNombre1.Right = lblSigneMath.Left
Aligne le bord droit de lblNombre1 au bord gauche de lblSigneMath, positionne lblNombre1
gauche juste ct de lblSigneMath.

lblNombre2.Left = lblSigneMath.Right
Aligne le bord gauche de lblNombre2 au bord droit de lblSigneMath, positionne lblNombre2 droite
juste ct de lblSigneMath.

Pour voir le rsultat, cliquez sur


dans la fentre Script Gnral.
Ce qui excute le code.
3.8 Second programme B4i 103 B4x Premiers pas

Le nouveau layout sur le dispositif.

Si vous aviez connect votre dispositif ds le dbut


vous auriez pu suivre les volutions du layout au fur et
mesure.
3.8 Second programme B4i 104 B4x Premiers pas

Maintenant nous allons mettre jour le code.


En premier, nous devons remplacer txfResultat par lblResultat puisque nous remplaons un objet
TextField par un objet Label.

Double cliquez sur txfResultat pour le


slectionner.

Cliquez sur

Le fentre Rechercher / Remplacer est affiche.

Cliquez sur et fermez la fentre.


3.8 Second programme B4i 105 B4x Premiers pas

Nous devons aussi modifier le type de la view de TextField Label.

Private lblResult As Label

Maintenant, nous crivons la routine qui gre les vnements Click des boutons.
La proprit Nom gnrique des vnements (Event Name) est "btnEvent" pour tous les boutons,
sauf pour btnAction.
Le nom de la routine associe au vnements Click est btnEvent_Click.

crivez le code ci-dessous :

Private Sub btnEvent_Click

End Sub

Nous avons besoin de savoir quel bouton a gnr lvnement. Pour a, nous utilisons un objet
spcifique Sender qui contient la rfrence de la view qui a gnr lvnement.

Private Sub btnEvent_Click Pour pouvoir accder aux proprits de la view qui a gnr
Dim btnSender As Button lvnement, nous dclarions une variable locale.
Dim btnSender As Button
btnSender = Sender Et dfinissons btnSender = Sender.

Select btnSender.Tag Puis, pour diffrencier entre le bouton Retour Arrire (BS) et
Case "BS" les boutons numriques nous utilisons une structure
Select / Case / End Select et utilisons la proprit Tag des
Else boutons.
End Select Rappelez-vous, lorsque nous avons ajout les diffrents
End Sub boutons, nous avions dfini leur proprit Tag BS, 0, 1, 2 etc.

Select btnSender.Tag Slectionne la variable vrifier.


Case "BS" Vrifie si cest le bouton avec la proprit Tag = "BS".
Case Else Gre tous les autres boutons.
End Select
End Sub

Ajoutons le code pour les boutons numriques.


Nous ajoutons la valeur de la proprit Text du bouton qui a gnr lvnement au texte dans la
proprit Text du Label lblResultat.

Select btnSender.Tag
Case "BS"
Case Else
lblResultat.Text = lblResultat.Text & btnSender.Text
End Select
End Sub

Ceci est effectu dans cette ligne.


lblResultat.Text = lblResultat.Text & btnSender.Text

Le caractre "&" signifie concatnation, nous ajoutons simplement la valeur de la proprit Text du
bouton qui a gnr lvnement au texte dj contenu dans la proprit Text du Label lblResultat.
3.8 Second programme B4i 106 B4x Premiers pas

Ajoutons, maintenant, le code pour le bouton Retour Arrire (BS).


Select btnSender.Tag
Case "BS"
If lblResult.Text.Length > 0 Then
lblResult.Text = lblResult.Text.SubString2(0, lblResult.Text.Length - 1)
End If
Case Else
lblResult.Text = lblResult.Text & btnSender.Text
End Select
End Sub

Lorsquon presse le bouton BS nous devons effacer le dernier caractre du texte contenu dans la
proprit Text de lblResultat. Nanmoins, ceci nest valable que si la longueur du texte est plus
grande que 0. Ceci est vrifi avec :
If lblResult.Text.Length > 0 Then

Pour effacer le dernier caractre nous utilisons la fonction SubString2.


lblResultat.Text = lblResultat.Text.SubString2(0, lblResultat.Text.Length - 1)

SubString2(BeginIndex, EndIndex) extrait un nouvel objet String commenant lindex


BeginIndex (inclusif) jusqu lindice EndIndex (exclusif). Dans notre cas, depuis 0 (premier
caractre) jusqu la longueur du texte moins 1.

La routine est maintenant termine.


Private Sub btnEvent_Click
Private btnSender As Button

btnSender = Sender
Select btnSender.Tag
Case "BS"
If lblResultat.Text.Length > 0 Then
lblResultat.Text = lblResultat.Text.SubString2(0, lblResult.Text.Length - 1)
End If
Case Else
lblResultat.Text = lblResultat.Text & btnSender.Text
End Select
End Sub

Dans la routine Sub btnAction_Click nous ajoutons, la fin, lblResult.Text = "" pour vider le
contenu.
Else
New
btnAction.Text = "O K"
lblResult.Text = ""
End If
End Sub
3.8 Second programme B4i 107 B4x Premiers pas

Nous pouvons amliorer linterface utilisateur en ajoutant des couleurs de fond dans
lblCommentaire pour les commentaires.

Dfinissons :
- Jaune pour nouveau problme
- Vert clair pour rsultat JUSTE
- Rouge clair pour rsultat FAUX.

Nous ajoutons en premier la ligne ci-dessous dans la routine NouveauProbleme.


lblComments.Color = Colors.RGB(255,235,128)

Private Sub NouveauProbleme


Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Nombre2 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
lblNombre1.Text = Nombre1 ' Affiche Nombre1 dans le Label lblNombre1
lblNombre2.Text = Nombre2 ' Affiche Nombre2 dans le Label lblNombre2
lblCommentaire.Text = "Entrez le rsultat" & CRLF & "et cliquez sur OK."
lblCommentaire.Color = Colors.RGB(255,235,128) ' couleur de fond jaune
lblResultat.Text = "" ' Vide edtResult.Text
End Sub

Et nous ajoutons les deux lignes dans la routine TestResultat avec lblComments.Color =...

Private Sub TestResultat


If lblResultat.Text = Nombre1 + Nombre2 Then
lblCommentaire.Text = "Rsultat J U S T E." & CRLF & "Cliquez sur Nouveau."
lblCommentaire.Color = Colors.RGB(128,255,128) ' couleur de fond vert clair
btnAction.Text = "Nouveau"
Else
lblCommentaire.Text = "Rsultat F A U X." & CRLF & "Entrez un nouveau rsultat" & CRLF &
"et cliquez sur O K."
lblCommentaire.Color = Colors.RGB(255,128,128) ' couleur de fond rouge clair
End If
End Sub

Puis, nous donnons au programme un titre plus significatif en ajoutant


Page1.Title = "Math Trainer"
dans la routine Application_Start juste avant NavControl.ShowPage(Page1).

Private Sub Application_Start (Nav As NavigationController)


NavControl = Nav
Page1.Initialize("Page1")
Page1.Title = "Page 1"
Page1.RootPanel.Color = Colors.White
Page1.RootPanel.LoadLayout("Main")
Page1.Title = "Math Trainer"
NavControl.ShowPage(Page1)

NouveauProbleme
End Sub
3.8 Second programme B4i 108 B4x Premiers pas

Autre amlioration, nous voulons cacher le bouton '0' pour viter dentrer des '0' comme premier
caractre.
Pour a, nous ajoutons cette ligne btn0.Visible = False. Dans la routine NouveauProjet.

Private Sub NouveauProbleme


Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Nombre2 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
lblNombre1.Text = Nombre1 ' Affiche Nombre1 dans le Label lblNombre1
lblNombre2.Text = Nombre2 ' Affiche Nombre2 dans le Label lblNombre2
lblCommentaire.Text = "Entrez le rsultat" & CRLF & "et cliquez sur OK."
lblCommentaire.Color = Colors.RGB(255,235,128) ' couleur de fond jaune
lblResultat.Text = "" ' Vide edtResult.Text
btn0.Visible = False
End Sub

Nous voyons que btn0 est en rouge, ce qui signifie quil y a une erreur.
btn0.Visible = False
Regardons dans longlet Logs sur le haut de quelle erreur il sagit.

Variable non dclare, elle nest donc pas reconnue par le systme.

Pour que btn0 soit reconnu nous, le dclarons dans la routine Process_Globals.
Private btnAction, btn0 As Button

Maintenant, btn0 nest plus en rouge.


btn0.Visible = False

En plus, dans la routine btnEvent_Click, nous cachons le bouton btn0 si le texte dans la proprit
Text dans lblResultat est gale zro et affichons le bouton lorsque la longueur du texte est plus
grande que zro.

Private Sub btnEvent_Click


Dim btnSender As Button

btnSender = Sender

Select btnSender.Tag
Case "BS"
If lblResult.Text.Length >0 Then
lblResult.Text = lblResult.Text.SubString2(0,lblResult.Text.Length - 1)
End If
Case Else
lblResult.Text = lblResult.Text & Send.Tag
End Select

If lblResult.Text.Length = 0 Then
btn0.Visible = False
Else
btn0.Visible = True
End If
End Sub
3.8 Second programme B4i 109 B4x Premiers pas

Dernier point, pour rendre le programme indpendant du Dbogueur ou le diffuser sur AppStore
vous devez le compiler en mode Release :

Il ne reste plus qu tester le programme.


4 B4J Premiers pas 110 B4x Premiers pas

4 B4J Premiers pas


B4J, pour Basic for Java, est un outil de dveloppement, 100% gratuit, pour des applications
bureau, serveur et des solutions IoT.

Les applications compiles peuvent tre excuts sur des plateformes Windows, Mac, Linux et
ARM (tel que Raspberry Pi).

B4J est un langage similaire B4A. B4i et Visual Basic.

B4J inclut un Concepteur visuel puissant permettant de crer des interfaces utilisateur avec
support pour des crans et orientations multiples.

Vous avez besoin de :


Le programme B4J, qui est un programme Windows tournant sur un PC.
Le SDK Java, sur le PC, gratuit.

4.1 Installation de B4J

4.1.1 Installation de Java JDK

B4J est bas sur le composant SDK Java.

Si vous utilisez dj B4A ou B4i vous pouvez sauter ce chapitre.

En premier, vous devez installer Java JDK.


Notez quil ny a aucun problme davoir plusieurs versions de Java installes sur un mme
ordinateur.

- Ouvrez ce lien Java 8 JDK download link.


- Cochez la case Accept License Agreement.
- Slectionnez "Windows x86" ou "Windows x64" (pour des machines 64 bit) dans la liste des
plateformes.
- Tlchargez le fichier et installez-le.
4.1 Installation de B4J 111 B4x Premiers pas

4.1.2 Installation de B4J

Tlchargez le fichier B4J et installez-le sur votre ordinateur.

Vu que B4J est gratuit, il ny a donc pas de fichier de license comme pour B4A et B4i.

4.2 Configuration des dossiers dans lEDI

Vous devez configurer diffrents dossiers dans lEDI.

Excutez lEDI.

Dans le menu
cliquez sur

javac.exe :
Entrez le chemin pour le fichier javac.exe file.

Bibliothques Additionnelles :
Crez un dossier spcifique pour les bibliothques additionnelles (Additional libraries), par exemple
C:\B4J\AdditionalLibraries.

Modules partags :
Crez un dossier spcifique pour les Modules partags (Shared Modules), par exemple
C:\B4J\SharedModules.
4.3 Mon premier programme B4J 112 B4x Premiers pas

4.3 Mon premier programme B4J (MonPremierProgramme.b4j)

Nous allons crire notre premier programme B4J. Cest un programme dentranement de calcul
pour enfants.

Le projet est disponible dans le dossier des codes sources fourni avec le livret :
CodesSource\MonPremierProgramme\ B4J\ MonPremierProgramme.b4j

Dans la fentre nous aurons :


- 2 Labels affichant des nombres (de 1 9) gnres alatoirement.
- 1 Label avec le signe mathmatique (+).
- 1 TextField dans lequel lutilisateur devra entrer le rsultat du calcul.
- 1 Button, utilis soit pour confirmer le rsultat soit pour gnrer un nouveau calcul.
- 1 Label avec des commentaires.

Dans B4J :
- Node est un objet dinterface homme machine.
- Label est un objet (Node) pour afficher du texte.
- TextField est un objet (Node) permettant lutilisateur dditer du texte, similaire EditText
dans B4A.
- Button est un objet (Node) permettant des actions de lutilisateur.

Nous allons dfinir le layout (mise en page) de linterface utilisateur avec le Concepteur visuel du
Designer et passerons pas pas au travers de tout le processus.
Le Designer gre les diffrents objets de linterface.
Le Concepteur visuel montre les positions et dimensions des diffrents objets et permet de les
dplacer ou de les redimensionner sur lcran.
Dans la fentre WYSIWYG nous voyons laspect rel.
4.3 Mon premier programme B4J 113 B4x Premiers pas

Excutez B4J

Enregistrez le projet.

Vous devez enregistrer le projet avant


de pouvoir utiliser le Designer.

Crez un nouveau dossier


MonPremierProgramme et enregistrez
le projet avec le nom
MonPremierProgramme.

Dfinissez le nom du paquet.


Chaque programme ncessite un nom de paquet.

Dans le menu cliquez sur .

La fentre ci-dessous sera affiche :


4.3 Mon premier programme B4J 114 B4x Premiers pas

Le nom par dfaut est b4j.example. Nous le modifions en b4j.MonPremierProgramme.

Dfinissez les dimensions de la Form.

Les dimensions de la Form (fentre) correspondent la fentre principale affiche sur lcran.

Sur le haut du code, vous voyez Region Project Attributes.

Regions sont des parties de code qui peuvent tre


rduits ou tendus.
Un clic sur tend la Rgion.
Un clic sur rduit la Rgion.
Les Regions sont expliques dans le chapitre
Rduire une Rgion dans le livret B4x EDI.

Ici, nous pouvons dfinir les dimensions de la fentre principale appele Form.
Les valeurs par dfaut sont MainFormWidth (largeur) = 600 et MainFormHeight (hauteur) = 600.

Nous modifions ces valeurs en MainFormWidth = 400 et MainFormHeight = 600.

#Region Project Attributes


#MainFormWidth: 400
#MainFormHeight: 600
#End Region

Dans lEDI excutez le Designer.

Attendez que le Designer soit prt.


4.3 Mon premier programme B4J 115 B4x Premiers pas

Nous obtenons une fentre


WYSIWYG.

Et le Designer ressemble limage ci-dessous, les dimensions peuvent varier.


4.3 Mon premier programme B4J 116 B4x Premiers pas

Notez que dans le coin infrieur droit du Designer vous voyez ltat de la connexion avec la fentre
WYSIWYG :

Si vous fermez la Form WYSIWYG vous verrez cet tat :

Dans le Designer, nous avons aussi le Concepteur visuel qui affiche le layout pas exactement
WYSIWYG mais les positions et dimensions des diffrents objets.
Seul le haut du Concepteur visuel est montr.

La partie en gris fonc correspond la surface de la fentre connecte, qui est la Form WYSIWYG.

Les dimensions par dfaut de la fentre sont 600 * 600, nous les modifions en 400 * 600, comme
dans les Project Attributes.

Cliquez sur .

Dans la fentre ci-dessous cliquez sur et entrez les deux valeurs.


4.3 Mon premier programme B4J 117 B4x Premiers pas

Dans la fentre Variantes la nouvelle variante est affiche.

Cliquez sur pour slectionner


cette variante 600 * 600.

Cliquez sur pour supprimer la variante 600 * 600.

Cliquez sur pour afficher la fentre Liste des Views.


4.3 Mon premier programme B4J 118 B4x Premiers pas

Nous allons ajouter 2 Labels pour afficher les nombres.


Dans le Designer, ajoutez un Label.

Dans le menu cliquez sur .

Le Label est affich dans le Concepteur visuel, dans la fentre Liste des
Views et ses proprits par dfaut sont listes dans la fentre Proprits.

Et dans la Form
WYSIWYG.
4.3 Mon premier programme B4J 119 B4x Premiers pas

Redimensionnez et dplacez le Label au moyen des petits carrs rouges comme sur limage.

Les nouvelles valeurs des proprits Left, Top, Width et Height


sont automatiquement mises jour dans la fentre Proprits.
Vous pouvez aussi modifier les proprits directement dans la
fentre Proprits.

Nous modifions les proprits du premier Label pour les


adapter nos besoins.
Par dfaut son nom est, Label avec un nombre, ici Label1.
Nous modifions le nom en lblNombre1.
Les trois lettres au dbut 'lbl' signifient 'Label', et 'Nombre1'
signifie premier nombre.
Il est recommand dutiliser des noms significatifs pour les
objets, de cette manire nous savons directement de quel type
dobjet il sagit ainsi que sa fonction.

Presser la touche Entre ou cliquer quelque part ailleurs dans


le Concepteur visuel modifie aussi la proprit Nom gnrique
des vnements, qui est le nom gnrique des routines
dvnements pour cet objet.

Main : Module Main.


Nom : Nom de lobjet (node).
Type : Type de lobjet (node). Dans notre cas,
Label, qui nest pas ditable.
Nom gnrique : Nom gnrique des routines qui grent
les vnements du Label.
Parent : Objet parent auquel appartient le Label.
4.3 Mon premier programme B4J 120 B4x Premiers pas

Vrifions et modifions les autres proprits ci-dessous :

Modifiez Left, Top, Width et Height avec les valeurs dans


limage.

Visible est coch.

Nous gardons les couleurs par dfaut.

Text en 5

Alignment en CENTER.

Nous gardons la valeur par dfaut pour Font DEFAULT

Taille en 36.

Et le rsultat dans le Constructeur visuel et dans la fentre WYSIWYG.


4.3 Mon premier programme B4J 121 B4x Premiers pas

Nous avons besoin dun deuxime Label, similaire au premier. Au lieu dajouter un nouveau, nous
dupliquons le premier avec les mmes proprits. Seuls les proprits Nom et Left seront modifies.

Cliquez avec le bouton droit sur lblNumber1 puis,


cliquez sur dans le menu contextuel.

Le nouveau Label couvre le prcdent.

Dans la fentre Liste des Views gauche, vous voyez les


diffrents objets.
Un nouveau label Label1 a t ajout.

Modifions la position du nouveau Label et son nom.

Modifions le nom en lblNombre2.

Et Left en 220.

Et le rsultat dans le Constructeur visuel et dans la fentre WYSIWYG.


4.3 Mon premier programme B4J 122 B4x Premiers pas

Ajoutons maintenant un troisime Label pour le signe mathmatique. Nous dupliquons encore une
fois lblNombre1.
Cliquez avec le bouton droit sur lblNumber1 puis, cliquez sur dans le menu contextuel.

Le nouveau Label couvre lblNombre1.

Positionnez-le entre les deux premiers Labels, modifiez son nom en lblSigneMath et sa proprit Text
en '+'.

Et le rsultat dans le Constructeur visuel et dans la fentre WYSIWYG.

Ajoutons un objet TextField.


Dans le menu cliquez sur .

Positionnez-le au-dessous des trois Labels et modifiez son nom en


txfResultat.
'txf' signifie TextField et 'Resultat' sa fonction.
4.3 Mon premier programme B4J 123 B4x Premiers pas

Modifiez ces proprits.


Nom en txfResultat

Left, Top, Width et Height.

paisseur du cadre en 1

Prompt en Rsultat
Prompt reprsente le texte affich lorsquaucun texte nest
entr.

Taille en 30

Et le rsultat dans le Constructeur visuel et dans la fentre WYSIWYG.


4.3 Mon premier programme B4J 124 B4x Premiers pas

Maintenant, ajoutons un bouton (Button) qui, lorsque press, vrifie le


rsultat que lutilisateur a entr, ou gnre un nouveau problme en
fonction des donnes entres par lutilisateur.

Positionnez le sous lobjet TextField. Redimensionnez-le et


modifiez les proprits ci-dessous :

Nom en btnAction

Left, Top, Width et Height.

Color en #FFBDBBBB

Text en O K (avec un espace entre O et K)

Resultat (images rduites)


Taille en 24
4.3 Mon premier programme B4J 125 B4x Premiers pas

Ajoutons un dernier Label pour les commentaires. Positionnez le au-


dessous du bouton et redimensionnez-le.

Modifiez les proprits ci-dessous :


Nom en lblCommentaire

Left, Top, Width et Height.

paisseur du cadre en 1

Text vide

Taille en 20
4.3 Mon premier programme B4J 126 B4x Premiers pas

Et le rsultat.

Il est temps denregistrons le fichier layout.

Cliquez sur et enregistrez-le avec le nom 'Main'.

Cliquez sur .
4.3 Mon premier programme B4J 127 B4x Premiers pas

Pour crire les routines pour le projet, nous devons rfrencer les objets dans le code.
Nous le faisons avec loutil Gnrer membres du Designer.

Loutil Gnrer membres gnre automatiquement les rfrences des objets ainsi que des cadres
pour les routines dvnement.

Cliquez sur

pour ouvrir le gnrateur.

Dans cette fentre nous trouvons tous les objets ajouts dans le layout.
Nous cochons tous les objets ainsi que lvnement Action pour btnAction.
4.3 Mon premier programme B4J 128 B4x Premiers pas

Le fait de cocher un objet gnre sa rfrence dans la routine Process_Globals.


Ces rfrences sont ncessaires pour que les objets soient reconnus par le compilateur et aussi pour
la fonction dautocompltion.

Private btnAction As Button


Private lblCommentaire As Label
Private lblNombre1 As Label
Private lblNombre2 As Label
Private lblSigneMath As Label
Private txfResultat As TextField

Un clic sur affiche tous les vnements pour lobjet slectionn


.
Le fait de cocher un vnement dun objet gnre le cadre de la routine vnement.

Sub btnAction_Action

End Sub

Cliquez sur pour gnrer les rfrences at les cadres des routines dvnement, puis
fermez le fentre .
4.3 Mon premier programme B4J 129 B4x Premiers pas

Nous retournons maintenant dans lEDI pour crire le code.

Sur le haut du programme nous avons :

Sub Process_Globals
Private fx As JFX
Private MainForm As Form
Private btnAction As Button
Private lblCommentaire As Label
Private lblNombre1 As Label
Private lblNombre2 As Label
Private lblSigneMath As Label
Private txfResultat As TextField
End Sub

Les deux lignes ci-dessous sont ncessaire et figurent systmatiquement dans le code dun projet.
Private fx As JFX
Private MainForm As Form

B4J ncessite un objet MainForm, ainsi que la bibliothque JFX pour les objets (nodes), dtails
dans le chapitre Flux du programme / cycle de vie dans livret B4x Langage Basic.

En dessous nous trouvons la routine AppStart qui est la premire routine tre excute au
dmarrage de programme.
Le contenu ci-dessous est aussi systmatiquement ajout dans chaque projet.

Sub AppStart (Form1 As Form, Args() As String)


MainForm = Form1
'MainForm.RootPane.LoadLayout("Layout1") 'Load the layout file.
MainForm.Show
End Sub

MainForm = Form1 > Attribue Form1 la variable MainForm.


'MainForm.RootPane.LoadLayout("Layout1") > Charge un fichier layout si besoin.
MainForm.Show > Affiche MainForm

En premier, nous devons charger le fichier layout que nous avons dfini dans les pages prcdentes.
Le fichier doit tre charg dans MainForm.RootPane, pour a, nous dcommentons cette ligne
'MainForm.RootPane.LoadLayout("Layout1")
et modifions le nom du fichier.

Sub AppStart (Form1 As Form, Args() As String)


MainForm = Form1
MainForm.RootPane.LoadLayout("Main") 'Load the layout file.
MainForm.Show
End Sub
4.3 Mon premier programme B4J 130 B4x Premiers pas

Nous voulons gnrer un nouveau problme ds le dmarrage du programme. Pour a, nous


ajoutons un appel la routine NouveauProbleme dans la routine AppStart.

Sub AppStart (Form1 As Form, Args() As String)


MainForm = Form1
MainForm.RootPane.LoadLayout("Main") 'Load the layout file.
MainForm.Show

NouveauProbleme
End Sub

NouveauProbleme est affich en rouge car la routine NouveauProbleme nexiste pas encore.
Gnrer un nouveau problme consiste gnrer alatoirement deux nombres de 1 9 (inclusif)
pour les variables Nombre1 et Nombre2 et afficher ces valeurs dans les proprits Text des deux
Labels lblNombre1 et lblNombre2.

Pour cela, nous crivons le code suivant :


Dans la routine Process_Globals nous ajoutons les rfrences pour les variables des deux nombres.

Private Nombre1, Nombre2 As Int


End Sub

Et la routine 'NouveauProbleme' :

Private Sub NouveauProbleme


Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Nombre2 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
lblNombre1.Text = Nombre1 ' Affiche Nombre1 dans le Label lblNombre1
lblNombre2.Text = Nombre2 ' Affiche Nombre2 dans le Label lblNombre2
lblCommentaire.Text = "Entrez le rsultat" & CRLF & "et cliquez sur O K"
txfResultat.Text = "" ' Vides la proprit Text de edtResult
End Sub

La fonction ci-dessous gnre un nombre entier alatoire de '1' (inclusif) '10' (exclusif) :
Rnd(1, 10)

Dans cette ligne Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Le texte aprs lapostrophe, ' Gnre..., est considr comme un commentaire.
Il est recommand d'ajouter des commentaires expliquant le but du code.

La ligne ci-dessous affiche le commentaire dans le Label lblCommentaire, en attribuant le texte la


proprit Text de lblCommentaire :
lblCommentaire.Text = " Entrez le rsultat" & CRLF & " et cliquez sur O K"
CRLF est le caractre NouvelleLigne.
4.3 Mon premier programme B4J 131 B4x Premiers pas

Maintenant, ajoutons le code pour lvnement Click du bouton btnAction.

Nous avons deux cas :


- Lorsque le texte du bouton est gal "O K", a signifie quun nouveau problme est affich, et
que le programme attend une rponse de lutilisateur et quil presse le bouton.
- Lorsque le texte du bouton est gal "Nouveau", a signifie que lutilisateur a donn une rponse
juste et lorsquil presse le bouton un nouveau problme doit tre gnr.

Private Sub btnAction_Action


If btnAction.Text = "O K" Then
If txfResultat.Text="" Then
lblCommentaire.Text = "Il n'y a pas de rsultat" & CRLF & "Entrez un rsultat" & CRLF &
"et cliquez sur O K"
Else
TestResultat
End If
Else
NouveauProbleme
btnAction.Text = "O K"
End If
End Sub

If btnAction.Text = "O K" Then vrifie si le texte du bouton est gal "O K".
Si oui, nous vrifions si la proprit Text du TextField txfResultat est vide.
Si oui, nous affichons un message indiquant lutilisateur quil na pas entr de rsultat.
Si non, nous vrifions si le rsultat est juste ou faux.
Si non, nous gnrons un nouveau problme, modifions le texte du bouton "O K" et vidons la
proprit Text de lobjet TextField.

La dernire routine vrifie si le rsultat est juste ou faux.

Sub TestResultat
If txfResultat.Text = Nombre1 + Nombre2 Then
lblCommentaire.Text = "Rsultat J U S T E" & CRLF & "Cliquez sur Nouveau"
btnAction.Text = "Nouveau"
Else
lblCommentaire.Text = "Rsultat F A U X" & CRLF & "Entrez un nouveau rsultat" & CRLF &
"et cliquez sur O K"
End If
End Sub

Avec If txfResultat.Text = Nombre1 + Nombre2 Then nous vrifions si le rsultat fourni par
lutilisateur est juste.

Si oui, nous affichons dans le Label lblCommentaire le texte ci-dessous :


'Rsultat J U S T E'
'Cliquez sur Nouveau'
Et nous modifions le texte du bouton en "Nouveau".
Si non, nous affichons dans le Label lblCommentaire le texte ci-dessous :
'Rsultat F A U X'
'Entrez un nouveau rsultat'
'et cliquez sur O K'
4.3 Mon premier programme B4J 132 B4x Premiers pas

Compilons et excutons le programme.


Dans la barre dicnes cliquez sur :

Le programme va tre compil.

Lorsque vous voyez


'Termin avec succs' dans
la fentre de compilation, la
compilation et le transfert
sont termins et le
programme sera excut.

Vous verrez une fentre similaire celle gauche, avec


des nombres diffrents.
4.3 Mon premier programme B4J 133 B4x Premiers pas

Entrez 9.

Cliquez sur pour confirmer le rsultat.

Si le rsultat est juste, vous verrez un cran similaire


celui gauche.

Si le rsultat est faux, le message ci-dessous sera affich :

Cliquez sur pour gnrer un nouveau


problme.

Bien sr, lesthtique nest pas la meilleure, mais a ntait pas le but du premier programme.
Des amliorations font lobjet du second programme.
4.4 Second programme B4J 134 B4x Premiers pas

4.4 Second programme B4J (SecondProgramme.b4j)

Le projet est disponible dans le dossier CodesSource :


CodesSource\SecondProgramme\B4J\SecondProgramme.b4j.

Amliorations par rapport Mon premier programme.


- Clavier numrique intgr pour viter lutilisation du clavier du PC.
- Couleurs dans les commentaires.

Crez un nouveau dossier avec le nom SecondProgramme. Copiez tous les fichiers et sous-
dossiers de MonPremierProgramme vers SecondProgramme et renommez le fichier
MonPremierProgramme.b4j en SecondProgramme.b4j et MonPremierProgramme.b4j.meta en
SecondProgramme.b4j.meta.
4.4 Second programme B4J 135 B4x Premiers pas

Chargez le nouveau programme dans lEDI.

Excutez le Designer.

Nous devons changer le nom du Paquet.

Dans lEDI, menu .


Cliquez sur .

Modifiez le nom du Paquet en b4j.SecondProgramme et cliquez sur .


4.4 Second programme B4J 136 B4x Premiers pas

Nous allons remplacer lobjet TextField txfResultat par un nouveau Label.


Dans le concepteur visuel, cliquez sur lobjet txfResultat.

Cliquez avec le bouton droit sur txfResultat et


cliquez sur .

Cliquez avec le bouton droit sur lblNombre1et


cliquez sur .

Le nouveau label couvre lblNombre1.


4.4 Second programme B4J 137 B4x Premiers pas

Modifiez les proprits suivantes :

Nom en lblResultat

Left, Top, Width, Height

paisseur du cadre en 1

Text en "" pas de texte


4.4 Second programme B4J 138 B4x Premiers pas

Ajoutez on objet Pane pour les boutons du


clavier.
Dans B4J lobjet Pane est similaire lobjet
Panel dans B4A et B4i.

Positionnez et redimensionnez-le comme dans


limage.

Modifiez son Nom en pnlClavier


"pnl" pour Pane (habitude de B4A pour Panel), le type de
lobjet.

Modifiez
Rayon des coins en 0
4.4 Second programme B4J 139 B4x Premiers pas

Dplacez le bouton btnAction de Main sur lobjet


pnlClavier.

Cliquez sur btnAction.

Dans la liste Parent cliquez sur .

Le boutons appartient maintenant lobjet


pnlClavier.

Rarrangeons les diffrents objets pour avoir


plus de place pour le clavier.

Modifiez les proprits ci-dessous :


lblCommentaire Top = 220

pnlClavier Left = 50
pnlClavier Top = 350
pnlClavier Width = 290
pnlClavier Height = 170
pnlClavier paisseur de cadre = 0

Dplacez btnAction dans le coin suprieur droit


de pnlClavier.
4.4 Second programme B4J 140 B4x Premiers pas

Cliquez sur pnlClavier pour le slectionner.

Cliquez sur

Pour ajouter un nouveau bouton.

Le nouveau bouton est ajout.

Modifiez les proprits ci-dessous :

Nom en btn0
Nom gnrique en btnEvent

Left en 0
Top en 120
Width en 50
Height en 50

Tag en 0

Color en #B7FA7EA9
4.4 Second programme B4J 141 B4x Premiers pas

paisseur du cadre en 1
Rayon des coins en 5

Text en 0

Taille en 22

Le bouton ressemblera ceci.


4.4 Second programme B4J 142 B4x Premiers pas

Dupliquez btn0.

Cliquez avec le bouton droit sur btn0


et cliquez sur .

Dplacez le nouveau bouton juste ct du


prcdent avec un petit espace.

Modifiez les proprits suivantes :


Nom en btn1

Tag en 1

Text en 1

Et le rsultat.

Ajoutez 8 boutons supplmentaires comme dans limage.

Modifiez les proprits ci-dessous :


Nom btn2, btn3, btn4 etc.
Tag 2, 3, 4 etc.
Text 2, 3, 4 etc.

Pour crer le bouton Retour arrire (BackSpace),


dupliquez un des boutons numriques, et
positionnez-le dans le coin suprieur gauche.

Redimensionnez et positionnez btnAction.


4.4 Second programme B4J 143 B4x Premiers pas

Modifiez leur Nom, Tag, Text et Color comme ci-dessous.

btnBS < btnAction OK


4.4 Second programme B4J 144 B4x Premiers pas

Le layout termin dans la fentre WYSIWYG.

Vous pouviez aussi suivre toutes les volutions de la


dfinition du layout dans la fentre WYSIWYG.

Nous allons maintenant mettre jour le code.


Tout dabord, nous devons remplacer txfResultat par lblResultat puisque que nous avons remplac
un objet TextField par un objet Label.

Double cliquez txfResultat pour le slectionner.

Dans le menu .

Cliquez sur .
4.4 Second programme B4J 145 B4x Premiers pas

La fentre Rechercher / Remplacer est affiche.

Cliquez sur et fermez la fentre.

Nous devons aussi modifier le type de lobjet de TextField en Label.

Private lblResultat As Label

Maintenant nous crivons la routine qui gre les vnements Click des boutons.
Le nom gnrique des vnements pour tous les boutons est "btnEvent", sauf pour btnAction.
Le nom de la routine associe lvnement Click sera donc btnEvent_Click.
crivez le code ci-dessous :

Private Sub btnEvent_Action

End Sub

Nous devons connaitre le bouton qui a gnr lvnement. Pour a, nous utilisons lobjet spcial
Sender qui contient, dans la routine dvnement, la rfrence de lobjet qui a gnr lvnement.

Private Sub btnEvent_Action Pour avoir accs aux proprits de lobjet qui a gnr
Private btnSender As Button lvnement, nous dclarons une variable locale
Private btnSender As Button.
btnSender = Sender et attribuons btnSender = Sender.

Select btnSender.Tag Puis, pour diffrentier entre le bouton Retour arrire et


Case "BS" les boutons numriques nous utilisons une structure
Case Else Select / Case / End Select et la proprit Tag des boutons.
End Select Rappelez-vous, lorsque nous avions ajout les boutons nous
End Sub avions dfini leur proprit Tag en BS, 0, 1, 2 etc.

Select btnSender.Tag Select dfinit la variable tester.


Case "BS" Vrifie si cest le bouton avec la valeur Tag "BS".
Case Else Gre tous les autres boutons.
4.4 Second programme B4J 146 B4x Premiers pas

Ajoutons le code pour les boutons numriques. Nous ajoutons le contenu de la proprit Text du
bouton au texte dans la proprit Text du Label lblResultat dans la ligne :
lblResultat.Text = lblResultat.Text & btnSender.Text

Select btnSender.Tag
Case "BS"
Case Else
lblResultat.Text = lblResultat.Text & btnSender.Text
End Select
End Sub

Le caractre "&" signifie concatnation, nous ajoutons donc au texte existant le texte du bouton qui
a gnr lvnement.

crivons maintenant le code pour le bouton Retour arrire (BS).


Select btnSender.Tag
Case "BS"
If lblResult.Text.Length > 0 Then
lblResult.Text = lblResult.Text.SubString2(0, lblResult.Text.Length - 1)
End If
Case Else
lblResult.Text = lblResult.Text & btnSender.Text
End Select
End Sub

Lorsquon presse le bouton Retour arrire nous voulons supprimer le dernier caractre du texte dans
lblResultat. Ceci nest possible que si la longueur du texte est > 0. Ceci est vrifi avec :
If lblResultat.Text.Length > 0 Then

Pour supprimer le dernier caractre nous utilisons la fonction SubString2.


lblResultat.Text = lblResultat.Text.SubString2(0, lblResultat.Text.Length - 1)

SubString2(BeginIndex, EndIndex) extrait un nouvel objet String commenant lindex dfini dans
BeginIndex (inclusif) jusqu lindex dfini dans EndIndex (exclusif).

La routine est termine.


Private Sub btnEvent_Action
Private btnSender As Button

btnSender = Sender
Select btnSender.Tag
Case "BS"
If lblResultat.Text.Length >0 Then
lblResultat.Text = lblResultat.Text.SubString2(0,lblResultat.Text.Length - 1)
End If
Case Else
lblResultat.Text = lblResultat.Text & btnSender.Text
End Select
End Sub

Dans la routine Sub btnAction_Action nous ajoutons la fin, lblResult.Text = "" pour vider le
texte.
Else
New
btnAction.Text = "O K"
lblResultat.Text = ""
End If
End Sub
Table des matires 147 B4x Premier pas

Nous amliorons linterface utilisateur en ajoutant des couleurs au Label lblCommentaire.


Dfinissons :
- Jaune pour un nouveau problme.
- Vert clair pour une rponse JUSTE.
- Rouge clair pour une rponse FAUX.

Nous ajoutons la ligne ci-dessous dans la routine NouveauProbleme :


CSSUtils.SetBackgroundColor(lblCommentaire, fx.Colors.RGB(255,235,128))
Nous avons besoin de bibliothque CSSUtils pour modifier la couleur de fond dun objet !
Voir page suivante comment ajouter une bibliothque.

Private Sub NouveauProbleme


Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Nombre2 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
lblNombre1.Text = Nombre1 ' Affiche Nombre1 dans le Label lblNombre1
lblNombre2.Text = Nombre2 ' Affiche Nombre2 dans le Label lblNombre2
lblCommentaire.Text = "Entrez le rsultat" & CRLF & "et cliquez sur O K"
CSSUtils.SetBackgroundColor(lblCommentaire, fx.Colors.RGB(255,235,128)) ' couleur jaune
lblResultat.Text = "" ' Vide la proprit Text de edtResult
End Sub

Et dans la routine TestResultat nous ajoutons les deux lignes avec


CSSUtils.SetBackgroundColor...

Private Sub TestResultat


If lblResultat.Text = Nombre1 + Nombre2 Then
lblCommentaire.Text = "Rsultat J U S T E" & CRLF & "Cliquez sur Nouveau"
CSSUtils.SetBackgroundColor(lblCommentaire, fx.Colors.RGB(128,255,128)) ' couleur vert clair
btnAction.Text = "Nouveau"
Else
lblCommentaire.Text = "Rsultat F A U X" & CRLF & "Entrez un nouveau rsultat" & CRLF & "et cliquez
sur O K"
CSSUtils.SetBackgroundColor(lblCommentaire, fx.Colors.RGB(255,128,128)) ' couleur rouge clair
End If
End Sub

Nous donnons encore un titre significatif au programme en ajoutant


MainForm.Title = "Math Trainer" dans la routine AppStart juste aprs MainForm.Show.
4.4 Second programme B4J 148 B4x Premiers pas

Ajout de la bibliothque CSSUtils.

Dans le coin infrieur droit, cliquez sur


longlet Gestionnaire de bibliothques.

Cliquez sur CSSUtils dans la liste des


bibliothques.

Et le rsultat.
La bibliothque CSSUtils est ajoute au
projet.

Les bibliothques sont classes par ordre alphabtique.

Lutilisation de bibliothques est explique dans le chapitre Bibliothques dans le livret B4x
Langage Basic.
4.4 Second programme B4J 149 B4x Premiers pas

Une autre amlioration est de rendre le bouton 0 invisible lorsque lutilisateur doit entrer le
premier chiffre.
Pour a, nous cachons le bouton dans la routine NouveauProbleme avec btn0.Visible = False.

Private Sub NouveauProbleme


Nombre1 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
Nombre2 = Rnd(1, 10) ' Gnre un nombre alatoire entre 1 et 9
lblNombre1.Text = Nombre1 ' Affiche Nombre1 dans le Label lblNombre1
lblNombre2.Text = Nombre2 ' Affiche Nombre2 dans le Label lblNombre2
lblCommentaire.Text = "Entrez le rsultat" & CRLF & "et cliquez sur O K"
CSSUtils.SetBackgroundColor(lblCommentaire, fx.Colors.RGB(255,235,128)) ' couleur jaune
lblResultat.Text = "" ' Vide la proprit Text de edtResult
btn0.Visible = False
End Sub

Nous voyons que btn0 est affich en rouge, ce qui signifie une erreur, et dans ce cas que lobjet
nest pas reconnu par lEDI.

Pour y remdier, nous ajoutons btn0 dans la routine Globals dans la ligne ci-dessous :
Private btnAction, btn0 As Button

Maintenant, btn0 nest plus en rouge.


btn0.Visible = False

En plus, dans la routine btnEvent_Action, nous cachons le bouton si la longueur du texte dans
lblResultat est gale zro et laffichons si la longueur est plus grande que zro.

Private Sub btnEvent_Action


Dim btnSender As Button

btnSender = Sender

Select btnSender.Tag
Case "BS"
If lblResultat.Text.Length > 0 Then
lblResultat.Text = lblResultat.Text.SubString2(0,lblResultat.Text.Length - 1)
End If
Case Else
lblResultat.Text = lblResultat.Text & Send.Tag
End Select

If lblResultat.Text.Length = 0 Then
btn0.Visible = False
Else
btn0.Visible = True
End If
End Sub
5 Premiers pas avec B4R 150 B4x Premiers pas

5 Premiers pas avec B4R


B4R Le moyen le plus simple pour dvelopper des applications natives et puissantes pour des
microcontrleurs Arduino.

B4R suit les mmes concepts que les autres outils B4X (B4A, B4i, B4J), fournissant un outil de
dveloppement simple et puissant.

Les applications compiles fonctionnent sur des circuits compatibles Arduino.

5.1 Installation de lEDI Arduino

B4R ncessite linstallation de lEDI Arduino version 1.6.7+.

Tlchargez lEDI Arduino depuis ce lien : https://www.arduino.cc/en/Main/Software et installez-


le.

Ninstallez pas Arduino 1.6.12 car il a un dfaut.

Ne tlchargez pas lEDI Arduino depuis ce site : http://www.arduino.org/downloads


Il ne fonctionne pas.

5.2 Installation de Microsoft .Net Framework

Sur la majorit des ordinateurs Microsoft .Net Framework est dj prinstall.

Si ce nest pas le cas, vous devez installer soit :


.Net Framework 4.5.2 pour Windows Vista +
.Net Framework 4.0 pour Windows XP
5.3 Installation et configuration de B4R 151 B4x Premiers pas

5.3 Installation et configuration de B4R

- Tlchargez et installez B4R.


- Lancez B4R.
- Cliquez dans le menu sur .

Utilisez les bouton pour localiser le dossier contenant le fichier "arduino.exe".


Le chemin dpend de lendroit o vous avez install lEDI Arduino.

Il est recommand de crer un dossier spcifique pour les bibliothques additionnelles.


B4R utilise deux types de bibliothques :
Bibliothques standard, qui sont fournies avec B4R et se trouvent dans le dossier Libraries
de B4R.
Ces bibliothques sont automatiquement mises jour lorsque vous installez une nouvelle
version de B4R.
Bibliothques additionnelles, qui ne font pas partie de B4R, et doivent tre enregistres dans
un dossier spcifique diffrent de celui de B4R.
Plus de dtails dans le chapitre Bibliothques additionnelles du livret
B4x Langage Basic.

Vous devriez aussi crer un dossier spcifique pour les modules partags (Shared Modules).
Un mme module code peut tre utilise par diffrents projets sans avoir lenregistrer dans le
dossier du projet.
5.4 Connection dun circuit 152 B4x Premiers pas

5.4 Connection dun circuit

Lorsque vous connectez un circuit au PC avec un cble USB, Windows charge le pilote et affiche le
port srie utilis.

5.5 Slection dun circuit

Lancez B4R.

Dans le menu , cliquez sur .

Une fentre similaire celle ci-dessous sera affiche.

Slectionnez le type de carte dans la liste droulante.


Slectionnez le port srie et le dbit en bauds.

Si un seul circuit est connect il sera reconnu automatiquement.

Seul les circuits connects sont affichs.


5.4 Connection dun circuit 153 B4x Premiers pas

Selon le type de circuit dautres paramtres peuvent tre dfinis.


5.6 Le circuit Arduino UNO 154 B4x Premiers pas

5.6 Le circuit Arduino UNO

Dans ce chapitre vous trouvez des explications sur quelques fonctions de base de Arduino UNO qui
peuvent tre utiles aux dbutants.
Le circuit Arduino UNO est le circuit de base de la famille Arduino.

Il existe dautres modules plus avancs.


Arduino DUE
Arduino MEGA
Arduino MICRO
etc. voir Compare board specs.

Des circuits additionnels, appels Shields peuvent tre clips sur les circuits Arduino.
Arduino Wi-Fi Shield 101
Arduino Ethernet Shield
etc.

LArduino UNO :

La source des informations dans ce chapitre est un rsum du site Arduino.

Digital Input / Output pins


On board
LED 13
LED Serial
TX / RX
USB plug LED
Power ON

DC Power
plug

Power pins Analog Input pins


Digital Input / Output pins Broches entre / sortie digitales.
USB plug Connecteur USB.
DC Power plug Connecteur alimentation DC.
On board LED 13 LED 13 sur le circuit.
Serial TX / RX Signaux srie TX / RX.
LED Power ON LED alimentation ON.
Power pins Broches dalimentation.
Analog Input pins Broches entres analogiques.

Jai intentionnellement gard les dnominations Anglaises sur le schma.


5.6 Le circuit Arduino UNO 155 B4x Premiers pas

5.6.1 Alimentation en courant

Le circuit peut tre aliment en courant soit par le connecteur DC power (7 - 12V), le connecteur
USB (5V), ou la broche VIN du circuit (7-12V).
Une alimentation par les broches 5V ou 3.3V by-passe le rgulateur, et peut endommager
votre circuit (voir Broches ci-dessous). A dconseiller.

5.6.2 Broches

LArduino UNO a 3 connecteurs :


Broches dalimentation.
Broches dentre / sortie digitaux (Digital Input / Output pins).
Broches dentre analogiques (Analog Input pins).

5.6.3 Broches dalimentation

Les Broches dalimentations sont :


GND Masse de lalimentation, 2 broches (GND ground).
VIN Broche dalimentation (VIN V entre).
Tension dalimentation lorsque le circuit UNO est aliment par une source extrieure (par
opposition une alimentation de 5 volts depuis le connecteur USB ou une autre source
rgule). Vous pouvez alimenter le circuit par cette broche, ou, si le circuit est aliment par
une source externe par le connecteur (DC Power plug), y accder par cette broche.
Tension 7 12 V.
5V 5 Volt, tension de rfrence. Nalimentez pas cette broche !
Cette broche fournit une tension rgule de 5V du rgulateur du circuit.
3.3V 3.3 Volt, tension de rfrence. Nalimentez pas cette broche !
Une source de 3.3 volt gnre par le rgulateur du circuit. Courant maximum 50 mA.
RESET
Mettez cette broche sur LOW pour reseter microcontrleur. Typiquement utilis pour
ajouter un bouton reset des circuits shields qui bloquent celui du circuit.
IOREF
Cette broche, sur le circuit UNO, fournit la tension de rfrence avec laquelle le
microcontrleur fonctionne. Un circuit shield, correctement configure, peut lire la tension de
la broche IOREF et slectionner la source approprie pour travailler avec 5V ou 3.3V.
5.6 Le circuit Arduino UNO 156 B4x Premiers pas

5.6.3.1 Broches dentre / sortie digitales (Digital Input / Output pins)

Chacune des broches digitales de lUNO peut tre utilise comme entre ou sortie, en spcifiant son
mode pinMode, avec DigitalRead ou DigitalWrite. Elles oprent avec 5 volts. Chaque broche peut
fournir ou recevoir un courant de 20 mA comme conditions de fonctionnement recommandes et
comprend une rsistance pull-up interne (dconnecte par dfaut) de 20-50 kohm. Une valeur de
courant maximale de 40mA ne doit pas tre dpasse sur aucune des broches pour viter un
endommagement permanent du microcontrleur.

En complment, quelques broches ont des fonctions spcialises :


Serial: 0 (RX) et 1 (TX). Utilises pour recevoir (RX) et transmettre (TX) TTL des donnes
srie TTL. Ces broches sont relies aux broches correspondantes du circuit ATmega8U2
USB-to-TTL Serial.
PWM: ~3, ~5, ~6, ~9, ~10, et ~11. Ces numros ont ~ pour prfixe.
Elles peuvent fournir des signaux de sortie en PWM (Pulse Width Modulation) (modulation
de largeur d'impulsions) avec la fonction AnalogWrite permettant la modulation de la
luminosit de LEDs (Light Emitting Diode) (DELs Diodes Electro-Luminescentes) ou
alimenter un moteur CC diffrentes vitesses.
Une valeur de 0 correspond OFF et 255 correspond toujours ON.
Utilisation:
pinTest3.AnalogWrite(Value As UInt)
pinTest3.AnalogWrite(196)
Aprs AnalogWrite, la broche va gnrer un signal rectangulaire constant avec un rapport
cyclique spcifi jusqu lappel suivant de AnalogWrite (ou un appel DigitalRead ou
DigitalWrite sur la mme broche). La frquence du signal PWM est approximativement de
490 Hz sur la plupart des broches. Sur lUNO et les circuits similaires, les broches 5 et 6 ont
une frquence dapproximativement 980 Hz. Les broches 3 et 11 du circuit Leonardo
fournissent galement un signal 980 Hz.
LED 13 : Il y a une LED sur le circuit gre par la broche 13. Lorsque le signal sur la broche
est HAUT, la LED est allume, si le signal est BAS elle est teinte.

5.6.3.2 Broches dentre analogiques

LArduino UNO contient 6 broches dente analogiques (Analog input pins) A0 A5 avec un
convertisseur analogique vers numrique de 10 bit, donc une rsolution de 0 1023.
La tension de rfrence est de 5 Volt donnant une rsolution de 4.9 mV par unit.
Alors que la fonction principale des broches analogiques pour la plupart des utilisateurs d'Arduino
est de lire des capteurs analogiques, les broches analogiques ont aussi toutes les fonctionnalits des
broches numriques 0 - 13.
5.6 Le circuit Arduino UNO 157 B4x Premiers pas

5.6.4 Modes dentre INPUT / INPUT_PULLUP

Si vous avez configur une broche avec le mode INPUT, et que vous lisez ltat dun interrupteur,
ltat de la broche sera "flottant" lorsque linterrupteur est ouvert, donnant des rsultats
imprvisibles. Pour assurer une lecture correcte lorsque linterrupteur est ouvert, une rsistance de
rappel (pull-up) doit tre ajoute. La fonction de cette rsistance est de mettre la broche dans un
tat connu lorsque linterrupteur est ouvert. Une rsistance de 10 K ohm est gnralement utilise,
cest une valeur suffisamment basse pour viter un point flottant et en mme temps une valeur
suffisamment haute pour ne pas soutirer un courant trop lev lorsque linterrupteur est ferm.

Le mode INPUT_PULLUP ajoute une rsistance de rappel (pull up) interne pour viter de devoir
en ajouter une en externe.

Avec une rsistance de rappel, la broche renvoie False lorsque linterrupteur est ferm car elle est
mise 0 Volt.

Source Wikipedia
5.6 Le circuit Arduino UNO 158 B4x Premiers pas

5.6.5 Fonctions de base des broches

5.6.5.1 Initialize

Initialise une broche.

Pin.Initialize(Pin As Byte, Mode As Byte)

Pin est le numro de la broche.


0, 1, 2, 3 etc. pour les broches digitales
Pin.A0, Pin.A1 , Pin.A2 etc. pour les roches analogiques.

Mode est un des trois modes de connexion :


MODE_INPUT
MODE_INPUT_PULLUP ajoute une rsistance pull up interne.
MODE_OUTPUT

Exemple1 : Initialisation de la broche digitale 3 en entre.


Private pinTest1 As Pin
pinTest1.Initialize(3, pinTest1.MODE_INPUT)

Exemple2 : Initialisation de la broche digitale 3 en entre avec une rsistance pull up.
Private pinTest2 As Pin
pinTest2.Initialize(3, pinTest2.MODE_INPUT_PULLUP)

Exemple3 : Initialisation de la broche digitale 3 en sortie.


Private pinTest3 As Pin
pinTest3.Initialize(3, pinTest3.MODE_OUTPUT)

Exemple4 : Initialisation de la broche analogique 4 en entre.


Private pinTest4 As Pin
pinTest4.Initialize(pinTest4.A4, pinTest4.MODE_INPUT)

Les broches analogiques, sur lArduino UNO, peuvent aussi tre rfrences par des numros,
comme ci-dessous :
pinTest4.Initialize(18, pinTest4.MODE_INPUT)

Pin.A0 = 14
Pin.A1 = 15
Pin.A2 = 16
Pin.A3 = 17
Pin.A4 = 18
Pin.A5 = 19

Linitialisation dune broche analogique en sortie fonctionne comme une broche digitale en sortie.
5.6 Le circuit Arduino UNO 159 B4x Premiers pas

5.6.5.2 DigitalRead

DigitalRead lit la valeur digitale actuelle dune broche.


Les valeurs renvoyes sont True ou False.

Pin.DigitalRead renvoie une valeur du type Boolean.

Il y a deux modes dpendant du type de signal dentre.


Pin.MODE_INPUT
Pin. MODE_INPUT_PULLUP ajoute une rsistance Pulp utiliser avec in
interrupteur.

Exemple :

Private pinTest1 As Pin


pinTest1.Initialize(3, pinTest.MODE_INPUT)

Private Value As Boolean


Value = pinTest1.DigitalRead

LArduino utilise en interne 0 et 1 pour les valeurs boolennes.


Log("State: ", Value)
Va afficher soit 0 pour False ou 1 pour True dans les Logs.
Dans le code vous pouvez utiliser False et True.

5.6.5.3 DigitalWrite

DigitalWrite crit une valeur boolenne sur la broche spcifie.


Peut-tre utilise sur toutes les broches digitales comme analogiques.

Pin.DigitalWrite (Value As Boolean)

Exemple:

Private pinTest3 As Pin


pinTest3.Initialize(3, pinTest3.MODE_OUTPUT)

pinTest3.DigitalWrite(True) directement avec une valeur.


pinTest3.DigitalWrite(Value) avec une variable.

5.6.5.4 AnalogRead

AnalogRead lit la valeur actuelle sur une broche analogique.


La valeur renvoye est du type UInt avec des valeurs entre 0 et 1023 (10 bits).
La tension de rfrence est 5V.

Exemple :
Private pinPot As Pin
pinPot.Initialize(pinPot.A4, pinPot.MODE_INPUT)

Private Value As UInt


Value = pinPot.AnalogRead
5.6 Le circuit Arduino UNO 160 B4x Premiers pas

5.6.5.5 AnalogWrite

AnalogWrite attribue un octet (Byte) la broche dfinie pour une modulation de largeur
d'impulsions.
AnalogWrite na rien faire avec les broches analogiques ni avec AnalogRead.

AnalogWrite peut tre utilise seulement avec les broches numriques ~3, ~5, ~6, ~9, ~10, et ~11 sur
le circuit Arduino UNO, les broches avec le prfixe ~.

Pin.AnalogWrite (Value As UInt)

Exemple : nous utilisons la broche ~3 qui permet la modulation PWM.

Private pinTest3 As Pin


pinTest3.Initialize(3, pinTest3.MODE_OUTPUT)

pinTest3.AnalogWrite(145) directement avec une valeur.


pinTest3.AnalogWrite(Value) avec une variable, Value doit tre une variable du type UInt.
5.7 Premiers programmes B4R 161 B4x Premiers pas

5.7 Premiers programmes

Tous les projets ont t raliss avec le Arduino Starter Kit.

Les diagrammes de montage ont t raliss avec le programme Fritzing.

Lorsque nous excutons B4R nous obtenons le code par dfaut ci-dessous.

La #Region Project Attributes est normalement rduite; ces attributs sont expliqus dans le
chapitre Enttes de code Project Attributes / Activity Attributes dans le livret B4x EDI.

#Region Project Attributes


#AutoFlushLogs: True
#CheckArrayBounds: True
#StackBufferSize: 300
#End Region

Sub Process_Globals
'These global variables will be declared once when the application starts.
'Public variables can be accessed from all modules.
Public Serial1 As Serial
End Sub

Private Sub AppStart


Serial1.Initialize(115200)
Log("AppStart")
End Sub

#AutoFlushLogs: AutoFlushLogs: True assure que les Logs sont renvoys sans problmes.
AutoFlushLogs: False peut provoquer des problmes.
#CheckArrayBounds: Vrifie les limites des tableaux (arrays) ou pas.
#StackBufferSize: Dfinit la dimension par dfaut du tampon de la pile (Stack buffer size).

Public Serial1 As Serial Dfinit linterface srielle avec lordinateur.


Serial1.Initialize(115200) Initialise le port srie avec un dbit en baud de 115200 Hertz.
Log("AppStart") Affiche AppStart dans longlet Logs au dmarrage du
programme.
Les Logs sont expiliqus dans le chapitre Logs dans le livret
B4x EDI.
5.7.1 Bouton.b4r 162 B4x Premiers pas

5.7.1 Bouton.b4r

crivons le premier programme.

Il est similaire lexemple Button dErel dans le forum. Nous utilisons un commutateur bouton
poussoir et la LED 13 se trouvant sur la carte de lArduino UNO.

Le projet Bouton.b4r est disponible dans le dossier CodesSource\B4R\Bouton.

Lancez B4R.

Sauvez le projet sous Bouton dans un dossier avec le nom Bouton.

Ralisez le montage du circuit avec le bouton et le cblage.

Connectez lArduino au PC avec un cble USB.

crivez le code.

Excutez le programme.

5.7.1.1 Schma

Matriel :
1 commutateur bouton poussoir

Reliez une des broches GND (masse / ground) de


lArduino une des lignes GND du breadboard.
Puis, reliez une des broches du commutateur la
ligne GND du breadboard.
Et, reliez lautre broche du commutateur la broche
analogique A5 de lArduino.

Nous aurions pu relier la premire broche du


commutateur directement une des broches GND
de lArduino, mais le montage est dj prt pour les
exemples suivants.

Nous aurions aussi pu utiliser une des broches


digitales au lieu dune broche analogique.
5.7.1 Bouton.b4r 163 B4x Premiers pas

5.7.1.2 Code

Sub Process_Globals
Public Serial1 As Serial
Private pinBouton As Pin 'broche (pin) pour le bouton
Private pinLED13 As Pin 'broche (pin) pour la LED 13 de lArduino
End Sub

Nous dclarons la broche du commutateur et la LED 13 de lArduino.

Private Sub AppStart


Serial1.Initialize(115200)
Log("AppStart")

pinBouton.Initialize(pinBouton.A5, pinBouton.MODE_INPUT_PULLUP)
'Utilisation d'une rsistance pull up pour viter que la broche soit flottante.
pinBouton.AddListener("pinBouton_StateChanged")

pinLED13.Initialize(13, pinLED13.MODE_OUTPUT)
End Sub

Nous initialisons pinBouton, comme broche analogique A5, avec pinBouton.A5 et dfinissons le
mode dentre pinBouton.MODE_INPUT_PULLUP. Nous avons besoin dune rsistance pull up pour
viter que la broche ne soit flottante, MODE_INPUT_PULLUP connecte une rsistance pull up interne.

Nous ajoutons pinBouton.AddListener("pinBouton_StateChanged"), pour gnrer un vnement


StateChanged lorsque ltat de la broche pinBouton change, ce qui veut dire lorsque le bouton est
press ou relch.

Nous initialisons pinLED13, comme broche digitale 13, la LED 13 interne de lArduino, et
dfinissons son mode de sortie pinLED13.MODE_OUTPUT.

Sub pinBouton_StateChanged (State As Boolean)


Log("State: ", State)
'State sera False lorsque le bouton est press cause du mode PULLUP
pinLED13.DigitalWrite(Not(State))
End Sub

Nous ajoutons un Log, Log("State: ", State), pour afficher ltat.

Nous attribuons la valeur de State la broche digitale LED 13,


pinLED13.DigitalWrite(Not(State)).

Nous crivons Not(State) car State sera False lorsque le bouton poussoir est press cause du
mode PULLUP.

Cliquez sur ou pressez F5 pour excuter le code.

Lorsque nous pressons le bouton poussoir, la LED 13 de lArduino UNO sallume et lorsque nous
relchons le bouton poussoir la LED steint.
5.7.2 LedVerte.b4r 164 B4x Premiers pas

5.7.2 LedVerte.b4r

Pour ce projet nous utilisons une copie du projet Bouton.


Crez un nouveau dossier LedVerte, copiez-y tous les fichiers du projet Bouton et renommez les
fichiers Bouton.xxx en LedVerte.xxx.

Nous ajoutons une LED verte notre circuit qui peut tre allume ou teinte avec le commutateur
bouton poussoir du premier projet.

Le projet LedVerte.b4r est disponible dans le dossier CodesSource\B4R\LedVerte.

5.7.2.1 Schma

Matriel :
1 commutateur bouton poussoir
1 LED verte
1 rsistance 220

Nous gardons le montage du commutateur de


premier exemple.
Une broche sur la ligne GND du breadboard.
Lautre sur la broche analogique A5 de lArduino.

Et, nous
- Ajoutons une LED verte sur le breadboard.
- Relions la cathode (-) via une rsistance de 220
la ligne GND du breadboard.
- Relions lanode (+) la broche digitale 7.
5.7.2 LedVerte.b4r 165 B4x Premiers pas

5.7.2.2 Code

Sub Process_Globals
Public Serial1 As Serial
Private pinBoutton As Pin 'broche (pin) pour le bouton
Private pinLEDVerte As Pin 'broche (pin) pour la Led verte
Private Allum = False As Boolean
End Sub

Nous gardons la dfinition de pinBouton.

Nous changeons la dfinition


Private pinLED13 As Pin
en
Private pinLEDVerte As Pin
Pour la LED verte.

Nous ajoutons une variable boolenne globale Allum qui est True quand la LED est allume.

Private Sub AppStart


Serial1.Initialize(115200)

pinBouton.Initialize(pinButton.A5, pinBouton.MODE_INPUT_PULLUP)
'Utilisation d'une rsistance pull up pour viter que la broche soit flottante.
pinBouton.AddListener("pinBouton_StateChanged")

pinLEDVerte.Initialize(7, pinLEDVerte.MODE_OUTPUT)
End Sub

Nous gardons le code pour pinBouton.


Nous initialisons pinLEDVerte comme broche digitale 7 et dfinissons le mode de sortie
pinLEDVerte.MODE_OUTPUT.

Private Sub pinBouton_StateChanged (State As Boolean)


Log("State: ", State)
'State sera False lorsque le bouton est press cause du mode PULLUP.
If State = False Then
Allum = Not(Allum)
pinLEDVerte.DigitalWrite(Allum)
End If
End Sub

Chaque fois que la variable State est False, bouton poussoir press, nous changeons la variable
Allum et lattribuons la broche pinLEDVerte.
5.7.3 LedVerteSansRebond.b4r 166 B4x Premiers pas

5.7.3 LedVerteSansRebond.b4r

Pour ce projet nous utilisons exactement le mme circuit que pour le projet LedVerte.b4r.

La seule diffrence se trouve dans le code.

Le projet LedVerteSansRebond.b4r est disponible dans le dossier CodesSource\B4R\


LedVerteSansRebond.

Le commutateur bouton poussoir a un problme appel rebond.


Le signal dun commutateur mcanique nest pas propre, le contact rebondit plusieurs fois ce qui est
interprt comme plusieurs changements dtat. Si nous avons un nombre pair de changements
dtat cest comme si nous navions rien fait.
Mais nous ne voulons quun seul changement dtat par appui sur le bouton.

Image de rebonds dun commutateur (source Wikipedia) :

Le commutateur rebondit plusieurs fois gnrant plusieurs changements dtat avant de rester dans
un tat stable.

Pour rsoudre ce problme, nous ne ragissons pas, dans la routine pinButton_StateChanged, des
changements dtat pendant un temps donn (10 millisecondes).
5.7.3 LedVerteSansRebond.b4r 167 B4x Premiers pas

5.7.3.1 Schma

Matriel:
1 commutateur bouton poussoir
1 LED verte
1 rsistance 220

Nous gardons le montage du bouton poussoir du


premier exemple.
Une broche lie la ligne GND du circuit.
Lautre la broche digitale 7 de lArduino.

Et nous
- ajoutons une LED verte sur le circuit.
- relions la cathode (-) la ligne GND du circuit
via une rsistance de 220 .
- relions lanode (+) to digital pin 7.
5.7.3 LedVerteSansRebond.b4r 168 B4x Premiers pas

5.7.3.2 Code

Le code est pratiquement le mme que LedGreen.b4r.

Sub Process_Globals
Public Serial1 As Serial
Private pinBouton As Pin 'broche (pin) pour le bouton
Private pinLEDVerte As Pin 'broche (pin) pour la Led verte
Private Allum = False As Boolean
Private RebondTemps As ULong
Private RebondRetard = 10 As ULong
End Sub

Nous ajoutons deux nouvelles variables : RebondTemps et RebondRetard.

Private Sub AppStart


Serial1.Initialize(115200)

pinBouton.Initialize(pinBouton.A5, pinBouton.MODE_INPUT_PULLUP)
'Utilisation d'une rsistance pull up pour viter que la broche soit flottante.
pinBouton.AddListener("pinBouton_StateChanged")

pinLEDVerte.Initialize(7, pinLEDVerte.MODE_OUTPUT)
End Sub

Mme que LedVerte.b4r

Nouvelle routine pinButton_StateChanged :

Private Sub pinBouton_StateChanged (State As Boolean)


Log("State: ", State)
'State sera False lorsque le bouton est press cause du mode PULLUP.
If State = False Then
If Millis - RebondTemps < RebondRetard Then
Return 'Retour, dans le rebond !
Else
Allum = Not(Allum)
pinLEDVerte.DigitalWrite(Allum)
RebondTemps = Millis 'remettre RebondTemps au temps actuel
End If
End If
End Sub

Chaque fois que State est False, bouton poussoir press :


Nous comparons le temps entre le changement dtat actuel par rapport au premier
changement dtat.
Si le temps est plus court que RebondRetard, cest un rebond, nous ne faisons rien.
Si le temps est plus long que RebondRetard, cest un changement dtat rel, nous excutons
le code.
Nous modifions la variable Allum et attribuons sa valeur pinLEDVerte.
Dfinissons un nouveau RebondTemps.
5.7.4 FeuxSignalisation.b4r 169 B4x Premiers pas

5.7.4 FeuxSignalisation.b4r

Ce projet est une evolution du projet LedVerteSansRebond et simule des feux de signalisation.

Nous utilisons une copie du projet LedVerteSansRebond.


Crez un nouveau dossier FeuxSignalisation, copiez-y tous les fichiers du projet
LedVerteSansRebond et renommez les fichiers LedVerteSansRebond .xxx en FeuxSignalisation.xxx.

Les feux peuvent tre actives ou dsactivs avec le commutateur bouton poussoir comme dans les
projets prcdents.
Le cycle rouge vert et vert rouge est gr par un Timer (minuteur) et le cycle jaune est rgi par
une routine appellee avec un retard correspondant la dur de cycle jaune.

Le projet FeuxSignalisation.b4r est disponible dans le dossier CodesSource\B4R\


FeuxSignalisation.

5.7.4.1 Sketch

Matriel:
1 commutateur bouton poussoir
1 LED verte
1 LED jaune
1 LED rouge
3 rsistances de 220

Nous
- ajoutons une LED jaune et une rouge similaire la
verte.
- relions le (+) de la LED jaune la broche digitale 8.
- relions le (+) de la LED rouge la broche digitale 9.
5.7.4 FeuxSignalisation.b4r 170 B4x Premiers pas

5.7.4.2 Code

Sub Process_Globals
Public Serial1 As Serial

Public pinButton As Pin 'broche pour le bouton


Public pinLEDVert, pinLEDJaune, pinLEDRouge As Pin 'broches pour les LEDs
Public TimerVertRouge As Timer
Public FeuxON = False As Boolean
Public LEDVerte = False As Boolean
Public RebondTemps As ULong
Public RebondRetard = 10 As ULong
End Sub

Nous dclarons le commutateur, les trois broches pour les LEDs, le Timer et qutre variables
globales LightOn, LightGreen, RebondTemps et RebondRetard.

FeuxOn = False > Feux OFF


LEDVerte = True > LED verte ON

Private Sub AppStart


Serial1.Initialize(115200)

TimerVertRouge.Initialize("TimerVertRouge_Tick", 2000)

'Utilisation de la rsistance interne.


pinButton.Initialize(pinButton.A5, pinButton.MODE_INPUT_PULLUP)
pinButton.AddListener("pinButton_StateChanged")

pinLEDVert.Initialize(7, pinLEDVert.MODE_OUTPUT)
pinLEDJaune.Initialize(8, pinLEDJaune.MODE_OUTPUT)
pinLEDRouge.Initialize(9, pinLEDRouge.MODE_OUTPUT)
End Sub

Nous initialisons TimerVertRouge avec le nom dvnement TimerVertRouge et un intervalley


de 2000 ce qui signifie que lvnement Tick sera gnr toutes les 2 secondes (2000 milli-
secondes).
Nous gardons le code pour le bouton et la LED verte, et attribuons la broche digitale 8 en sortie
pinLEDJaune et attribuons la broche digitale 9 en sortie pinLEDRouge.
5.7.4 TrafficLight.b4r 171 B4x Premiers pas

Le code est, jespre, auto-explicatif.

Private Sub pinButton_StateChanged (State As Boolean)


Log("tat: ", State) 'Log la valeur de State (tat)

If State = False Then 'si State = False


If Millis - RebondTemps < RebondRetard Then
Return
Else
pinLEDRouge.DigitalWrite(True) 'allume la LED rouge
FeuxON = Not(FeuxON) 'change la valeur de FeuxON
RebondTemps = Millis
Log("Feux: ", FeuxON) 'Log la valeur de FeuxON

TimerVertRouge.Enabled = FeuxON 'active le Timer TimerVertRouge

If FeuxON = False Then 'si FeuxON = False


pinLEDVert.DigitalWrite(False) 'teint la LED verte
pinLEDJaune.DigitalWrite(False) 'allume la LED jaune
pinLEDRouge.DigitalWrite(False) 'teint la LED rouge
End If
End If
End If
End Sub

Private Sub TimerVertRouge_Tick


If LEDVerte = True Then 'si LEDVerte = True
Log("TimerVertRouge_Tick LEDJaune ON") 'crit le Log
CallSubPlus("FinJaune", 500, 0)
pinLEDVert.DigitalWrite(False) 'switch OFF LED Green
pinLEDJaune.DigitalWrite(True) 'allume la LED jaune
LEDVerte = False 'met LEDVerte False
Else
Log("TimerVertRouge_Tick LEDVerte ON") 'crit le Log
pinLEDRouge.DigitalWrite(False) 'teint la LED rouge
pinLEDVert.DigitalWrite(True) 'allume la LED verte
LEDVerte = True 'met LEDVerte True
End If
End Sub

Private Sub FinJaune(Tag As Byte)


Log("LEDRouge ON") 'crit le Log
Log(" ")
pinLEDJaune.DigitalWrite(False) 'teint la LED jaune
pinLEDRouge.DigitalWrite(True) 'allume la LED rouge
End Sub

Nous utilisons la routine FinJaune pour passer du feu jaune au feu rouge.
Cette routine est appellee avec le mot cl CallSubPlus qui permet dappeler la routine dfinie avec
un retard donn.
CallSubPlus("FinJaune", 500, 0)
FinJaune = Nom de le routine
500 = retard, 0.5 seconde (500 milli-secondes)
0= Tag, pas utilize dans notre cas.

Nous pouvons activer ou dsactiver les feux avec le bouton commutateur.


5.8 Glossaire
172 B4x Premiers pas

5.8 Glossaire

5.8.1 Bases dlectricit

Bases dlectricit (en anglais) : Electricity Basics.

5.8.2 PWM Pulse Width Modulation

Pulse Width Modulation, ou PWM (modulation de largeur d'impulsions), est une technique pour
obtenir des rsultats analogiques avec des moyens numriques. Un contrle numrique est utilis
pour crer un signal rectangulaire, un signal qui est commute entre ON et OFF. Ce genre de
commutations peut simuler des tensions entre 5 Volt (toujours ON) et 0 Volt (toujours OFF) en
modifiant la dure pendant laquelle la tension est 5 V par rapport la dure pendant laquelle la
tension est 0 V, appel le rapport cyclique. La dure pendant laquelle le signal est 5 V est
appele largeur d'impulsion (pulse width). Pour obtenir des valeurs analogiques variables, on
modifie ou module cette largeur d'impulsion. Si on rpte ce schma de commutations
suffisamment rapidement, avec une LED par exemple, le rsultat est comme si on avait une tension
stable entre 0 et 5V modulant la luminosit de la LED.

Dans le graphique ci-dessous, les lignes vertes reprsentent une priodicit rgulire dans le temps.
Cette dure ou priode est linverse de la frquence de modulation. En dautres termes, avec une
frquence de modulation denviron 500Hz, (celle des cartes Arduino), les lignes vertes auraient un
espacement de 2 millisecondes. La fonction analogWrite() est base sur 0 - 255, donc
analogWrite(255) fournit un rapport cyclique de 100% (toujours ON), analogWrite(127) est 50%
de rapport cyclique (moiti du temps) et analogWrite(0) 0% donc toujours OFF.

0% de rapport cyclique

25% de rapport cyclique

50% de rapport cyclique

75% de rapport cyclique

100% de rapport cyclique

Source Android Site Tutorials.


4 Outils daide 173 B4x Langage Basic

6 Outils daide
Les outils suivants sont utiles pour trouver des rponses beaucoup de vos questions.

6.1 Fonction recherche dans le forum / Search

Dans le coin suprieur gauche vous trouvez le


champ de recherche Search pour le forum.
Selon la largeur de la fentre, le champ
Search peut se trouver dans le coin suprieur
droit.

Entrez une question ou un mot cl puis pressez


Entre.

La fonction montre les posts qui correspondent


votre requte.

Exemple : Entrez le mot cl ScrollView :

Une liste de rsultats est affiche juste en dessous du champ de


recherche.

Cliquez sur un lment de la liste pour afficher le post complet.


4 Outils daide 174 B4x Langage Basic

Et le rsultat :

Sur le haut vous trouvez des boutons permettant un filtrage selon diffrents critres.

Cliquez sur le titre pour afficher le post complet.

Exemple de filtrage sur un produit :


4 Outils daide 175 B4x Langage Basic

6.2 B4x Help Viewer

Ce programme affiche les fichiers daide xml. Il tait crit lorigine par Andrew Graham
(agraham) pour B4A. Je lai modifi, avec lagrment dAndrew, pour afficher les fichier xml de
toutes les plateformes B4A, B4J, B4i et B4R.

Le programme peut tre tlcharg depuis le forum.


4 Outils daide 176 B4x Langage Basic

Sur le haut, on trouve :

Dans le coin suprieur gauche se


trouve une liste droulante qui
affiche les diffrents objets contenus
dans la bibliothque slectionne.

A ct de la liste des
objets vous trouvez une
autre liste droulante avec
mthodes(M)
vnements(E)
proprits(P)
champs(F)
pour lobjet slectionn.

Slectionne les bibliothques standards (celles livres avec B4x).

Slectionne les bibliothques additionnelles.

Moteur de recherche pour trouver des objets avec des mots cl.

Ferme B4AHelp

Lance le forum 'Online Community'.

Lance le site Android Developers.

Lance le site iOS Developers.

Fichiers daide B4A.


Fichiers daide B4i.
Fichiers daide B4J.
Fichiers daide B4R.
4 Outils daide 177 B4x Langage Basic

Bibliothques standard.

Slectionnez la bibliothque et cliquez sur .

Ici vous pouvez slectionner le


dossier dans lequel les bibliothques standard sont enregistres.

Une fois slectionn, le nom du dossier est mmoris pour les dmarrages suivants du programme.
6 Outils daide 178 B4x Premiers pas

6.3 Help documentation - B4A Object Browser

Ceci est aussi un programme autonome Windows affichant les fichiers daide des bibliothques.

Il a t crit par Vader et peut tre tlcharg ici.

Un mode demploi en pdf sur son utilisation fait partie du tlchargement.


6 Outils daide 179 B4x Premiers pas

6.4 Liens utiles

6.4.1 B4A

Un lien utile, en anglais, pour des graphiques de mise en page.


Android cheat sheet for graphic designers

Android Developers. Design Develop Distribute

Android Developers recherche pour une requte.

Dans le coin suprieur droit vous trouvez le champ de recherche.

Enter View in the field :

Cliquez sur le lien View | Android Developers.

Et vous obtenez toutes les informations sur lobjet View.


6 Outils daide 180 B4x Premiers pas

6.4.2 B4i

iOS developers :

https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

Cest le site de Apple avec toutes les informations sur iOS, en anglais.
6 Outils daide 181 B4x Premiers pas

6.4.3 B4J

Oracle Overview JavaFX API :

http://docs.oracle.com/javase/8/javafx/api/toc.htm
6 Outils daide 182 B4x Premiers pas

6.4.4 B4R

Page daccueil Arduino :

https://www.arduino.cc/en/Guide/HomePage
6 Outils daide 183 B4x Premiers pas

6.5 Livres

Livre B4A (en anglais)

crit par Philip Brown sous le pseudo Wyken Seagrave.

http://pennypress.co.uk/b4a-book/

MagBook Build your own Android App (en anglais).

crit par Nigel Whitfield.

http://www.magbooks.com/product/build-your-own-android-app/
7 Dictionnaire 184 B4x Premiers pas

7 Dictionnaire

Activity Dans B4A objet activit, quivalent un cran.

EDI Environnement de Dveloppement Intgr, lditeur de B4x.


IDE en anglais Integrated Development Environment

EditText Objet dinterface homme-machine. Permet lutilisateur dditer du texte.

Height Proprit Hauteur, hauteur dune view.

IHM Interface Homme Machine


UI en anglais User Interface

Label Objet dinterface homme-machine : tiquette. Visualise du texte.

LED Light Emitting Diod Diode Electo-Luminescente DEL.

Left Proprit Gauche, position du bord gauche dune view.

Node Dans B4J, objet dinterface homme-machine gnrique.

Panel Dans B4A et B4i, objet dinterface homme-machine: panneau.

Pane Dans B4J, objet dinterface homme-machine : panneau.

PWM Pulse Width Modulation modulation de largeur dimpulsion.

Top Proprit Haut, position du bord suprieur dune view.

TextColor Proprit couleur de texte.

TextSize Proprit grandeur de texte.

TypeFace Proprit police de caractre.

View Dans B4A et B4i, objet dinterface homme-machine gnrique.

Width Proprit Largeur, largeur dune view.

WYSIWYG What You See Is What You Get (ce que vous voyez est ce que vous obtenez)
Lutilisateur voit directement quoi ressemblera le rsultat final.