B4xPremiersPasV1 1

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
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
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.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.
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.

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.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

Activez-le.

Activez-le.
B4A-Bridge requiert une carte de stockage en criture. Sinon, il est impossible dinstaller des
applications.
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.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
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
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.

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.
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.
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.

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.

.
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 :
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.
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.
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.

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.
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
'+'.
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.
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
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.
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

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.
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
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.

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.

- 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.
- 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
lblNombre1.Text = Nombre1 ' Affiche Nombre1 dans le Label lblNombre1
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.
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.
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.
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.

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 .
Nous modifions aussi le paramtre ApplicationLabel tout en haut dans le code.

#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.

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.
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
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
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.
Cliquez avec le bouton droit sur

pnlClavier
puis cliquez sur
et cliquez sur
pour ajouter un nouveau bouton.
Le nouveau bouton est ajout.
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
Size to 24
Text Color en Black #000000
Nous changeons les couleurs du bouton.
Cliquez sur .
Dans Enabled Drawable

Cliquez sur .
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.
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.
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.

Nom btn2 , btn3 , btn4 etc.
Tag 2 , 3 , 4 etc.
Text 2 , 3 , 4 etc.
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 <

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.
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.
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.

ou pressez F3.
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.
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.

Case "BS"
If lblResultat.Text.Length >0 Then
lblResultat.Text = lblResultat.Text.SubString2(0, lblResultat.Text.Length - 1)
End If
Case Else
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
Case "BS"
End If
Case Else
End Select
End Sub
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).

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
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.

lblCommentaire.Color = Colors.RGB(255,235,128) ' couleur jaune
btn0.Visible = False
End Sub
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
btnSender = Sender
Case "BS"
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
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
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.

- Cochez la case Accept License Agreement.
- Slectionnez "Windows x86" ou "Windows x64" (pour des machines 64 bit) dans la liste des
plateformes.
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.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.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.

.
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.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.
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 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.
Sur un dispositif nous voyons laspect rel.
Excutez B4i
Vous devez enregistrer le projet avant de pouvoir utiliser le Designer.
Crez un nouveau dossier

MonPremierProgramme et
enregistrez le projet avec le nom
Dfinissez le nom du Paquet.

Chaque programme ncessite un nom de Paquet.
Cette fentre sera affiche :

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

#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.
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 / /

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.

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.

Maintenant, nous allons ajouter 2 Labels pour les nombres.

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.
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.
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.

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.

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 '+'.
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.
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.

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
Taille en 24

Ajoutons encore le dernier Label pour afficher des commentaires.

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

Epaisseur du cadre en 1
Taille en 20
Multilignes en True (coch)
Text Alignment en Center

Maintenant nous enregistrons le fichier layout.
Cliquez sur et enregistrez le fichier avec le nom 'Main'.
Cliquez sur .
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 lblComments As Label
Private lblMathSign As Label
Private lblNumber1 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 .
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 lblComments As Label
Private lblMathSign 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.
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
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.
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.
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.
Nous voulons gnrer un nouveau problme lors du dmarrage. Pour cela, nous ajoutons un appel
la routine NouveauProbleme dans Application_Start.

'SetDebugAutoFlushLogs(True) 'Uncomment if program crashes before all logs are
printed.
NavControl = Nav
Page1.RootPanel.LoadLayout("Main")
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 :

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 :

CRLF est le caractre Nouvelle Ligne.
Maintenant nous ajoutons le code pour lvnement Click du bouton Button.

- 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 txfResultat.Text = "" Then
lblCommentaire.Text = "Pas de rsultat!" & CRLF & "Entrez le rsultat" & CRLF &
"et cliquez sur OK."
Else
TestResultat
End If
Else
NouveauProbleme
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 gnrons un bouveau problme, modifions le texte de btnAction en "O K" et vidons
txfResultat.
La dernire routine vrifie le rsultat.

If txfResultat.Text = Nombre1 + Nombre2 Then
Else
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'
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'
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.
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 .

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

#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 .

Nom en lblResultat
Left, Top, Width, Height
paisseur de cadre en 1
Text en "" vide, pas de caractres.

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
Nous dplaons btnAction de Main sur le Panel

pnlClavier.
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

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.
Cliquez sur le Panel pnlClavier pour le slectionner.
Cliquez sur
Pour ajouter un nouveau bouton.
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
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.

Nom en btn1
Tag en 1
Text en 1
Et le rsultat.
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.

Modifiez les proprits Name, Tag, Text et Color comme ci-dessous.
btnBS < btnAction OK

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.

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.
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.
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.
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.

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 :
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.
Case "BS"
Case Else
End Select
End Sub
Ceci est effectu dans cette ligne.

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.
Ajoutons, maintenant, le code pour le bouton Retour Arrire (BS).

Case "BS"
If lblResult.Text.Length > 0 Then
lblResult.Text = lblResult.Text.SubString2(0, lblResult.Text.Length - 1)
End If
Case Else
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 :
Pour effacer le dernier caractre nous utilisons la fonction SubString2.

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.

btnSender = Sender
Case "BS"
lblResultat.Text = lblResultat.Text.SubString2(0, lblResult.Text.Length - 1)
End If
Case Else
End Select
End Sub
Dans la routine Sub btnAction_Click nous ajoutons, la fin, lblResult.Text = "" pour vider le
contenu.
Else
New
lblResult.Text = ""
End If
End Sub
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)

lblCommentaire.Color = Colors.RGB(255,235,128) ' couleur de fond jaune
End Sub
Et nous ajoutons les deux lignes dans la routine TestResultat avec lblComments.Color =...

lblCommentaire.Color = Colors.RGB(128,255,128) ' couleur de fond vert clair
Else
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).

NavControl = Nav
Page1.RootPanel.LoadLayout("Main")
Page1.Title = "Math Trainer"
NouveauProbleme
End Sub
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.

lblCommentaire.Color = Colors.RGB(255,235,128) ' couleur de fond jaune
End Sub
Nous voyons que btn0 est en rouge, ce qui signifie quil y a une erreur.
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.
Maintenant, btn0 nest plus en rouge.

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.

btnSender = Sender
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
Else
btn0.Visible = True
End If
End Sub
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
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.

- Cochez la case Accept License Agreement.
- Slectionnez "Windows x86" ou "Windows x64" (pour des machines 64 bit) dans la liste des
plateformes.
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 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.
Dans la fentre WYSIWYG nous voyons laspect rel.
Excutez B4J
Vous devez enregistrer le projet avant

de pouvoir utiliser le Designer.
Crez un nouveau dossier

MonPremierProgramme et enregistrez
le projet avec le nom
Dfinissez le nom du paquet.

Chaque programme ncessite un nom de paquet.
La fentre ci-dessous sera affiche :

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
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.

#MainFormWidth: 400
#MainFormHeight: 600
#End Region
Dans lEDI excutez le Designer.
Attendez que le Designer soit prt.

Nous obtenons une fentre

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

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.

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.

Nous allons ajouter 2 Labels pour afficher les nombres.

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.
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.
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.

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.

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.
Positionnez-le entre les deux premiers Labels, modifiez son nom en lblSigneMath et sa proprit Text
en '+'.
Ajoutons un objet TextField.

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

txfResultat.
'txf' signifie TextField et 'Resultat' sa fonction.
Modifiez ces proprits.

Nom en txfResultat
Prompt en Rsultat
Prompt reprsente le texte affich lorsquaucun texte nest
entr.
Taille en 30

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
Color en #FFBDBBBB
Resultat (images rduites)

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

dessous du bouton et redimensionnez-le.

Text vide
Taille en 20
Et le rsultat.
Il est temps denregistrons le fichier layout.
Cliquez sur et enregistrez-le avec le nom 'Main'.
Cliquez sur .
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.
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 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 .
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 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.

MainForm = Form1
MainForm.RootPane.LoadLayout("Main") 'Load the layout file.
MainForm.Show
End Sub
Nous voulons gnrer un nouveau problme ds le dmarrage du programme. Pour a, nous

ajoutons un appel la routine NouveauProbleme dans la routine AppStart.

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' :

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.
Maintenant, ajoutons le code pour lvnement Click du bouton btnAction.

- 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 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
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 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"
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'
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'
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.
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.
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 .

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.

Nom en lblResultat
Left, Top, Width, Height
Text en "" pas de texte

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
Dplacez le bouton btnAction de Main sur lobjet

pnlClavier.
Dans la liste Parent cliquez sur .
Le boutons appartient maintenant lobjet

pnlClavier.
Rarrangeons les diffrents objets pour avoir

plus de place pour le clavier.

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.
Cliquez sur pnlClavier pour le slectionner.
Cliquez sur
Pour ajouter un nouveau bouton.
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
Text en 0
Taille en 22
Le bouton ressemblera ceci.

Dupliquez btn0.
Cliquez avec le bouton droit sur btn0

et cliquez sur .
Dplacez le nouveau bouton juste ct du

prcdent avec un petit espace.

Nom en btn1
Tag en 1
Text en 1
Et le rsultat.
Ajoutez 8 boutons supplmentaires comme dans limage.

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.

Modifiez leur Nom, Tag, Text et Color comme ci-dessous.
btnBS < btnAction OK

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 .
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.
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 :
Case "BS"
Case Else
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).

Case "BS"
lblResult.Text = lblResult.Text.SubString2(0, lblResult.Text.Length - 1)
End If
Case Else
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 :
Pour supprimer le dernier caractre nous utilisons la fonction SubString2.

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

btnSender = Sender
Case "BS"
If lblResultat.Text.Length >0 Then
End If
Case Else
End Select
End Sub
Dans la routine Sub btnAction_Action nous ajoutons la fin, lblResult.Text = "" pour vider le
texte.
Else
New
lblResultat.Text = ""
End If
End Sub
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.

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...

lblCommentaire.Text = "Rsultat J U S T E" & CRLF & "Cliquez sur Nouveau"
CSSUtils.SetBackgroundColor(lblCommentaire, fx.Colors.RGB(128,255,128)) ' couleur vert clair
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.
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.
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.

CSSUtils.SetBackgroundColor(lblCommentaire, fx.Colors.RGB(255,235,128)) ' couleur jaune
lblResultat.Text = "" ' Vide la proprit Text de edtResult
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 :
Maintenant, btn0 nest plus en rouge.

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.

btnSender = Sender
Case "BS"
End If
Case Else
lblResultat.Text = lblResultat.Text & Send.Tag
End Select
If lblResultat.Text.Length = 0 Then
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.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.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.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.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.
pinTest2.Initialize(3, pinTest2.MODE_INPUT_PULLUP)
Exemple3 : Initialisation de la broche digitale 3 en sortie.

pinTest3.Initialize(3, pinTest3.MODE_OUTPUT)
Exemple4 : Initialisation de la broche analogique 4 en entre.

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.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 :

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:

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.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.

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.

#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
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.

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 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
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.

pinBouton.Initialize(pinButton.A5, pinBouton.MODE_INPUT_PULLUP)
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)

'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.1 Schma
Matriel:
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.2 Code
Le code est pratiquement le mme que LedGreen.b4r.
Sub Process_Globals
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.

pinBouton.Initialize(pinBouton.A5, pinBouton.MODE_INPUT_PULLUP)
pinLEDVerte.Initialize(7, pinLEDVerte.MODE_OUTPUT)
End Sub
Mme que LedVerte.b4r
Nouvelle routine pinButton_StateChanged :
Private Sub pinBouton_StateChanged (State As Boolean)

'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 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 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

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
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.

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 :

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.

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.
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.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.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.4.3 B4J
Oracle Overview JavaFX API :
http://docs.oracle.com/javase/8/javafx/api/toc.htm
6.4.4 B4R
Page daccueil Arduino :
https://www.arduino.cc/en/Guide/HomePage
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.

B4xPremiersPasV1 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

B4xPremiersPasV1 1

Uploaded by

Copyright:

Available Formats

Livrets B4x

B4x Premiers pas

Copyright: 2017 Anywhere Software Edition 1.1

Dernire mise jour : 2017.10.12

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

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

Mis jour pour les versions ci-dessous :

Autres livrets B4x en franais :

Livrets B4x en anglais :

B4x supporte plus de plateformes que nimporte quel autre outil

B4J Java / Windows / Mac / Linux / Raspberry PI

B4R Arduino / ESP8266

2 B4A Premiers pas

Pas besoin dcrire du XML.

Vous pouvez dvelopper et dboguer avec :

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

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

2.1 B4A Version dessai

2.2 Installation de B4A et Android SDK

B4A dpend de deux composants supplmentaires (gratuits) :

2.2.1 Installation de Java JDK

- Ouvrez ce lien Java 8 JDK download link.

- Cochez lagrment de licence Accept License Agreement.

2.2.2 Installation de Android SDK

Ltape suivante consiste installer Android SDK et une plateforme :

Une fentre similaire celle-ci sera

Slectionnez la version de lAPI que

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.

2.2.3 Installation de B4A

- Tlchargez B4A et installez le.

2.3 B4A Choix de la langue

2.4 B4A Configuration des dossiers dans lEDI

La fentre ci-dessous sera affiche.

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

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

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

2.5 B4A Connecter un dispositif rel

Il existe deux moyens de connecter un dispositif rel :

2.5.1 Connexion via USB

Sur le dispositif, excutez Paramtres

Droulez lcran jusqu ce que vous voyiez

Droulez lcran jusqu ce que vous voyiez

Le dispositif sera automatiquement reconnu par lEDI.

2.5.2 Connexion via B4A-Bridge

Nanmoins pas tous les dispositifs ne supportent le dbogage ADB.

2.5.2.1 Premiers pas avec B4A-Bridge

Vous devez installer B4A-Bridge sur votre dispositif.

B4A-Bridge peut tre tlcharg depuis ici :

Sur le dispositif, excutez Paramtres

Droulez lcran jusqu ce que vous voyiez

Droulez lcran jusqu ce que vous voyiez

2.5.2.2 Excuter B4A-Bridge sur votre dispositif

Lancez B4A-Bridge sur votre dispositif, un cran

Sur le haut vous trouvez ladresse IP du dispositif :

Pressez sur pour activer une

Status change pour :

Notez que B4A-Bridge a t crit avec B4A.

2.5.2.3 Connexion sans fil

Dans lEDI, dans le menu slectionnez .

Cliquez sur , le dispositif est