Manuel utilisateur
Contents
1. Sortie R el ce widget permet d afficher des valeurs r els 9 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 4 Manipulation des widgets TinyBuiler met disposition un syst me de manipulation des widgets tr s souple Nous pourrons ajouter et d placer les widgets notre guise La manipulation des widgets est une fonctionnalit importante du Builder Nous l avons am lior au fur et mesure que l impl mentation La plus grande difficult tait de comment faire pour savoir les limites d un widget finalement nous avons trouv les options n cessaires telles que le changement du curseur de souris qui permet une manipulation ais e des widgets 4 1 D placement d un widget Pour d placer un widget d suffit de placer le curseur de la souris sur le widget en question en cliquant sur le bouton gauche de la souris nous pourrons d placer le widget s lectionn Figure 7 D placement widget curseur croix 4 2 Redimensionner le widget Pour redimensionner un widget il faut le s lectionner avec la souris en se pla ant sur l onglet en bas droite et se d placer vers le bas pour agrandir et en haut pour baisser la taille du widget m Figure 8 redimensionner le widget 4 3 Changer la longueur widget De la m me mani re que le redimensionnement mais 1l faut placer le curseur droite du widget En d pla2. W E arr Ter Te E 28 e Recuperation dos COS aa a de een ee a a a 28 0 BOOT OA a E e E 30 O rcahond e Te 32 2 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 1 Introduction Afin d aider les utilisateurs mieux comprendre notre application nous avons r alis ce document qui contient une explication d taill e de son utilisation Dans le cadre des projets des dipl mes nous avons choisi de r aliser un outil de cr ation d interface utilisateur pour des d veloppeurs d butants 2 Vue g n rale Notre diteur s adresse des utilisateurs d butants il doit tre simple d utilisation et intuitif pour l impl mentation des applications Ce d fi se repose surtout sur interface graphique qui doit tre bien con u avec une automatisation des pluparts des fonctionnalit s Il est important de pouvoir cr er des interfaces utilisateurs facilement mais 1l faut aussi que l utilisateur puisse r aliser des applications utiles M jinyBuilder 0 4 Fichier Outils Projet Builder Aide Le I eo gl CI A El Projet Fichiers dition Compilation Builder NA Parametres Widgets Espace de travail Type noh Les groupes pi Les boutons sasz Les textes GE GH Les entiers a Les r els a Les menus Figure I Interface utilisateur de TinyBuilde 3 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing
3. ant le curseur vers la droite pour augmenter le largueur et vers la gauche pour la diminuer p Figure 9 Modifier la longueur du widget 10 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 4 4 Changer la hauteur widget Pour changer la hauteur du widget 1l faut placer le curseur en bas du widget et le d placer vers le bas pour augmenter le largueur et vers le haut pour le contraire k Figure 10 modifier la hauteur du widget 4 5 Param tres widget Cet onglet nous donne acc s un grand nombre d options pour personnaliser les widgets et les interfaces utilisateurs fo Code Style Type Fenetre DlFenetre Label ace de travail eau eg Figure 11 Fen tre des param tres de widget 1 Onglet info Dans cet onglet nous avons la possibilit de personnaliser les informations essentielles sur notre widget Nous y trouvons les coordonn es ainsi que les dimensions Nous avons aussi les identificateurs du widget tel que l identificateur et le label Ce type de widget va nous renseigner sur le type de widget s lectionn partir de la fen tre principale 11 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 2 Onglet code Dans cet onglet nous avons la possibilit d entrer le code source qui sera ex cuter lors d un clique de souris pa
4. 8 43 neig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud al l 3 E Groupe ce widget peut contenir d autres widgets La suppression redimensionnement ou le d placement de ce widget se percute sur tous ses enfants Ce widget est utile pour regrouper un ensemble de widget dans un m me ensemble Bouton c est le widget bouton classique Nous pourrons l utiliser pour le lancement un v nement Bouton coche Ce widget permet de proposer un choix l utilisateur qu il peut ou pas cocher Bouton radio Ce bouton permet de proposer l utilisateur un choix qu il peut cocher ou pas Bouton r p tions Ce bouton permet d ex cuter des actions tant qu il est press Entr e texte ce widget permet l utilisateur d enter un texte sur une ligne Sortie ce widget permet d afficher un texte Il n est pas ditable par l utilisateur Entr e texte multi ligne ce widget permet l utilisateur d enter un texte sur plusieurs lignes Sortie ce widget permet d afficher un texte sur plusieurs lignes Il n est pas ditable par l utilisateur Entr e entier ce widget permet l utilisateur d entrer un nombre Sortie entier ce widget permet d afficher un nombre L utilisateur ne pourra pas la modifier Entr e r el ce widget permet l utilisateur de saisir un nombre r el
5. Aide dei 3 creer Nouveau projet rE ka A Ouvrir un projet bei Gatvpnatder projet Options du projet Builder Projet Fichiers Figure 50 Cr ation d un nouveau projet Dans la boite de dialogue qui s ouvre 1l faut indiquer les informations suivantes R pertoire du travail le r pertoire de travail Nom du projet nom de projet cr er dans notre cas calculatrice Type de projet le type par d faut est tbXML Nous n allons pas le changer dans ce type de projet car nous allons cr er une interface utilisateur 33 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Il faut cliquer sur le bouton Cr er projet pour valider la cr ation du projet Mouveau Projet Repertoire D googlecodeitinybuilder1 0 0 Examples calculatrices E Nom calculatrice Type projet SAM Fichier D q00gecodetinybuidert DU D EKamMmples Calcutatrice calculatrice xt Options de compilation pipe 02 Options de linkage Litinyita Creer projet Figure 51 Boite de dialogue pour la cr ation d un nouveau projet TinyBuilder va nous cr er un fichier de sauvegarde pour le projet et un autre pour la sauvegarde de l interface utilisateur r calculatrice VM Ja calculatrice xml Figure 52 Les fichiers du projet 34 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute E
6. avorites y Ei ke Previeu Filename C aooglecode tinvQuildert 0 0 Examples OK A Cancel Figure 50 Saisie du nom de r pertoire cr er Nous avons besoin d entrer le nom de r pertoire cr er Cliquer sur ok pour valider la cr ation du r pertoire vd New Directory bonjour OK Cancel Figure 31 Saisie du nom r pertoire Suite 22 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud c Saisie du nom du projet sous le nom du projet 1l faut taper un nom de projet voir figure 20 Mouveau Projet Repertoire D g00glecode tinybuidert O 0 Examples bonjour x Nom Bonjour N Type projet IPM Fichier D go0glecodeitinybuilder O 0 Examples honjour 0njour xml Gptions de compilation pipe 07 Options de linkage ltini b Creer projet Annuler Figure 32 Cr ation d un nouveau projet Suite d Type du projet Nous avons la possibilit de cr er des projets de type tbXML c est dire avec une interface utilisateur construite avec TinyBuilder ou bien un projet CPP Type projet CPP Figure 33 type de projet TinyBuilder 23 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud e Valider ou annuler 1 Validation de la cr ation appuyer sur le bouton Cr er projet 11 Annuler la proc du
7. chier tbXML du projet 11 Aucun projet Une boite de dialogue s ouvre pour demander l utiisateur de donner le fichier tb XML 3 Projet amiss Builder Aide creer Nouveau projet Duwrir un projet sauvegarder projet Gptions AL pr jet Figure 22 la rubrique projet Cr er nouveau projet cr ation d un nouveau projet Ouvrir un projet ouvrir un projet enregistr dans un fichier XML Sauvegarder projet sauvegarder un projet Options du projet dition des options du projet bi Ei H P 16 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 4 Builder Aide LIUMII Sauvegarder Supprimer widget courant Ctri Oelete Supprimer tous les widgets STE CtrI 0elete Figure 23 l onglet builder de la barre de menu a Ouvrir ouvrir une interface utilisateur depuis fichier XML b Sauvegarder sauvegarder l interface dans un fichier XML c Supprimer widget courant supprimer le widget courant d Supprimer tous les widgets supprimer tous les widgets 4 10 Raccourcis fichiers BEER Figure 24 Les raccourcis des fichiers a Cr ation d un nouveau fichier texte Ouvrir un fichier texte dans l diteur V Sauvegarder un fichier texte depuis l diteur du code source gt Sauvegarder tous fichiers Fermer le fichier courant de l diteur de fichier 17 43 heig vd Manuel d utilisateur Bo
8. cole d Ing nierie et de Gestion du Canton de Vaud Nous allons maintenant ajouter les widgets l interface utilisateur Ajouter une entr e enti re pour la saisie et l affichage des donn es Les entiers Figure 53 les widgets des entr es sorties des entiers Le widget vient se placer dans l espace de travail dition Compilation Builder Param tres Widgets Espace de travail Les groupes E boutons Errr Les textes Les entiers Les r els LES menus KI li Figure 54 Ajouter une entr e enti re dans l espace de travail 35 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Nous allons ensuite la d placer pour construire notre calculatrice Espace de travail Figure 55 Mette l cran de la calculatrice en place Nous allons maintenant param trer le widget en changeant l identificateur et le label du notre futur cran de calculatrice Param tres Widgets Espace de travail nfo Code stye Type Entreeint Label R sultat x 208 Ma Lata h ET ge Figure 56 Mise jour des informations de l cran 36 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Ajouter les boutons chiffres Maintenant nous allons ajouter les boutons des chiffres Nous allons ajouter le pr
9. emier bouton en cliquant sur le bouton depuis la palette des widgets dition Compilation Param tres Widgets Builder LES groupes LES textes LES entiers Figure 57 Ajouter le premier bouton la calculatrice Nous allons ensuite le d placer et lui donner les param tres n cessaires pour l acc der apr s Param tres Widgets Espace de travail mo Code styie Type Bouton ID ten R sutat o Label 1 x 208 y 108 H ET an Figure 58 Mise en place du bouton I 37 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Nous allons faire la m me chose avec les autres boutons des chiffres AE LL u LE shop Figure 59 Vue g n rale de la calculatrice Nous avons fini de construire notre calculatrice Nous avons mis des identificateurs pour tous les widgets Nous allons maintenant impl menter le comportement des widgets dans la calculatrice Nous avons besoin d un variable globale pour stocker les r sultats interm diaires Nous allons auparavant d buter par l impl mentation des boutons Nous allons nous bas sur la librairie TinyL1b pour impl menter nos widgets Nous avons dans cette librairie toutes les fonctions n cessaires l impl mentation des widgets ErreurType setEntier const string norm widget int entier affecter la valeur entiere Err
10. er O googlecodetinybuilder1 0 0 Exkamples calculatrice Calculatrice Cpp Le widget en Cours Fenetre Compilation termin e Figure 18 Onglet compilation projet dans TinyBuilder 4 9 Barre de menu La barre de menu va nous permettre d ex cuter des fonctionnalit s de TinyBuilder Nous allons expliquer bri vement le but de chaque rubrique Fichier Outils Projet Builder Figure 19 barre de menu de TinyBuilder 1 Fichier Ben Outils Prof phone Chr Ouvrir Sauvegarder LIT Fermer CErI E Quitter Ctri Q Figure 20 Le sous menu Fichier a Nouveau cr ation d un nouveau fichier texte b Ouvrir Ouvrir un fichier texte dans l diteur c Sauvegarder Sauvegarder un fichier texte depuis l diteur du code source d Fermer Fermer le fichier courant de l diteur des fichiers e Quitter Quitter l application 15 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 2 Outils Projet Builder A Executer Fil G n rer code source Figure 21 La rubrique outils de la barre de menu a Compiler Compiler le projet courant 1l faut qu un projet soit cr b Ex cuter Ex cuter le programme qui est dans le projet c G n rer code source G n ration du code source partir d un fichier tb XML Il existe deux issues pour cette fonctionnalit les voici 1 Un projet est ouvert Le code g n rer est celui du fi
11. esch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 4 11 Raccourcis projets Les raccourcis ci dessous vont nous permettre de g rer nos projets Nous allons vous d crire bri vement les fonctionnalit s de mise disposition l 9 Figure 25 les raccourcis de la gestion du projet Cr ation d un nouveau projet bk A Ouverture d un projet d Sauvegarder le projet courant diter les options du projet 4 12 Raccourcis compilation Figure 26 Raccourci de compilation Compiler le projet courant Ex cuter le programme du projet 18 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 5 Fonctionnalit s 5 1 Cr ation d un nouveau projet Cette fonctionnalit permet de cr er un nouveau projet Elle est possible depuis la barre de menu ou bien du raccourci des projets e Demande de cr ation d un nouveau projet depuis la barre de menu ou le raccourci wf nous pourrons lancer la proc dure de cr ation d un nouveau projet Mouveau Projet Fepertoire mmm Nom Type projet tradi Fichier wn Options de compilation pipe 02 Options de linkage Citinylit Annuler Figure 27 La boite de dialogue de cr ation d un nouveau projet 19 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gest
12. eurType setEntier const char nomwWidget int entier affecter la valeur entiere ErreurType setEntier int entier affecter la valeur entiere au widget courant ErreurType getEntier const string amp nom WWidaget int Sentier retourner la valeur enti re ErreurType getEntier const char normwWidaet int entier retourner l valeur enti re ErreurType getEntier int entier retourner la valeur entiere du widget courant Figure 60 Quelques fonctions de la librairie TinyLib 38 43 heig yd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Principe de fonctionnement Nous allons utiliser une pile pour stocker les valeurs interm diaires ainsi que les r sultats Dans notre cas nous allons utiliser la classe vector pour g rer les donn es Nous allons commencer par ajouter la librairie vector Cette d claration doit tre dans le code g n ral de l application Autrement dit dans le code de la fen tre principale include lt vector gt Using std vector Vector lt int gt pile Figure 61 Le code de la d claration du vecteur Dans la figure ci dessus nous avons d clar une pile qui va tre utilis pour les traitements futurs des donn es Param tres Widgets Espace de travail Editer Code d initialisation Code d initilisation ici Editer Code include lt vectorz using std vector wectorsint p
13. ile Gestion du menu Ajouter Modifier Mom menu Mouyveau nom Modifier Figure 62 Vue de la calculatrice ajout du code d initialisation 39 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Passons maintenant l initialisation de l cran de la calculatrice sur la valeur 0 S lectionnez le widget cran de la calculatrice et ajoutez la ligne dans la figure 23 dans son code d initialisation setEntier 0 Figure 63 initialisation du widget cran de la calculatrice Voici un aper ue Param tres Widgets Espace de travail nfo Code stye Code d initialisation Tode d nitiisation ici i 3 setentier O SC WAE Editer Code taper votre code ici CE D push i Figure 64 Ajout du code d initialisation du widget de l entr e enti re Nous allons maintenant pass l impl mentation du comportement des boutons des chiffres Il nous faut tout d abord g rer le probl me de concat nation des chiffres pour avoir des nombres Nous allons d clarer une variable pour r cup rer le contenu de l cran et le concat ner avec la nouvelle valeur Par exemple pour taper le nombre 12 l utilisateur va taper le chiffre 1 ensuite 2 Pour concat ner les deux chiffres nous allons multiplier le premier chiffre par 10 et lui additionner le deuxi me chiffre Pou
14. ion du Canton de Vaud e Remplir le formulaire de cr ation d un nouveau projet a S lection du r pertoire du projet Il faut commencer par choisir un r pertoire pour le projet Il faut cliquer sur le bouton voir figure 16 emplacement du curseur souris pour choisir un r pertoire pour votre projet Vous avez la possibilit aussi de cr er de nouveaux r pertoires voir b Nouveau Projet Repertoire Type projet IPM x Fichier pop de compilation pipe 2 Options de linkage rd Annuler Figure 28 s lection du r pertoire du projet 20 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud b Cr ation d un nouveau r pertoire Il faut cliquer sur le bouton voir figure 17 emplacement curseur et une nouvelle fen tre sera ouverte pour vous demander le nom du r pertoire cr er voir figure 18 Il faut s lectionner le r pertoire apparent pour cr er le r pertoire dans celui ci Choix du repertoire du projet Show a Files Favorites mi calculatrice projet k Preview Filename C aooglecode tinvbuildert 0 0 Examples OK E Cancel Figure 29 cr ation d un nouveau r pertoire 21 43 heig vo Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Choix du repertoire du projet Show All Files v F
15. lculatrice calcutatrice DAMM 0 D google lecture du fichier D googlecodetinybuilderi 0 0 Examplesicalculatriceicalculatrice th wiL generation du fichier O googlecodetinybuilder1 0 0 Exkamples calculatrice Calculatrice Cpp Le widget en cours Fenetre Compilation termin e Figure 41 un exemple de compilation d un projet 5 6 Ex cuter l application Les projets compil s peuvent tre ex cut directement depuis TinyBuilder Il suffit de cliquer sur le raccourci nend El partir de la barre de menu Outils Ex cuter ou en appuyant sur la touche F10 de votre clavier 5 7 R cup ration des erreurs Nous avons mis en place un syst me qui r cup re les erreurs depuis la console de message du compilateur dans le but de retrouver dans le fichier source le ou les erreurs Nous allons ajouter une erreur dans le code et vous faire une d monstration de cette fonctionnalit Nous allons ouvrir un projet test et introduire du texte dans le code d initialisation de la widget 28 43 heig yd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud dition Compilation DOTTER Parametres Widgets nfo Code Style Code d initialisation Code d initilisation ici ERREUR code Taper votre coge ICI Figure 42 introduction d une erreur dans le code Apr s la compilation du projet voici le r sul
16. lt 2 messageModal Op ration impossible Il faut entrer deux valeurs return i Figure 70 Ignorer le double v nement du bouton et v rifier la taille de la pile 41 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud int parametreGauche pile back pile pop back int parametreDroite pile back Figure 71 R cup rer les valeurs depuis la pile int resultat parametreGauche parametreDroite Figure 72 Calcule du r sultat changer le selon l op rateur setEntier ecranResultat resultat Figure 73 afficher le r sultat dans l cran de la calculatrice Edition code source if etatBoutoni return ifipile sizes A aeeeeegdeeg impossible I faut entrer deux valeurs return int parametreGauche pile back pile Dop back int parametreDraite pile Hack int resultat paramelireGauche parametre Droite setentieri ecranResulitat resultati I Figure 74 Capture de l diteur du code source Le bouton push Ce bouton va servir empiler les informations A chaque fois que l utilisateur tape son nombre 1l a besoin de l empiler Le code de ce bouton consiste r cup rer le contenu de l cran et l empiler ensuite il faut initialiser l cran sur la valeur 0 if etatBouton return int valeur getEntier ecranResultat valeur pile push_back valeu
17. n 12 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 3 Onglet style Cet onglet nous donne la possibilit de personnaliser le style de police ainsi que la taille Nous avons aussi la possibilit de personnaliser des couleurs Fonts sl Re lahel Couleur label CoOUEUr fond Figure 14 Longlier pour le param trage du style widget Nouveaut Cette option est ajout e derni rement dans TinyBuilder Elle nous permet de changer la position du label d un widget Il faut cliquer sur les fl ches pour mettre le label dans une position voulue O label 7 Figure 15 position du label du widget Ap Changement de l identificateur L identificateur d un widget est une information tr s importante car elle va nous permettre d acc der au widget partout dans notre application Exemple Lorsqu on ajoute un bouton l interface utilisateur 1l a par d faut un identificateur BoutonO le deuxi me aura comme identificateur Bouton1 set ainsi de suite 13 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Remarque Il est pr f rable de changer les 1dentificateurs par d faut car lors de la r ouverture d un projet existant les identificateurs s ajoutent par d faut comme ci dessus ce qui peut provoquer des conflit
18. ne Sg Manuel utilisateur Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Haute Ecole d Ing nierie et de Gestion du Canton de Vaud heig vo D partement des Technologies de l Information et de la Communication Travail de dipl me TinyBuilder Editeur C CPP Manuel utilisateur Professeur Jean Pierre Molliet R aliser par Boesch Pierre Makrem Mahjoub Yverdon les Bains le 17 12 2008 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Table des mati res OO OR E E E E 3 GH E 3 NO E E E A 4 sA ele EE ACCESS a 4 eoe WE i e E a T AAN A EE ET dt 4 IL Vie HCMN EIOS oann E ce 5 D OA OTO e E E E E E EE S 6 SS WK E EEN 7 SG D WE PAIE CS A EEO 8 4 leet des widoels Rene T can eds cesse diese ces le in esse es 10 SH WE RON AOL a a a A E 10 4 2 ROCHE SORTIR a EEren ieis 10 4 gt Changer enee LOS Te n EEEE ETER EENE 10 4 4 Changer la hauteur widget sise 11 E E Tee E 11 40 Changement de L ICNUTICATOUR h en abiasseretendlesssenene msn 13 e EE 14 TS eege te e ne can r cd Do a coran ei one 15 aD PCR CE Re EN 15 4 10 Ra E ge 17 4 11 Rae ourc D CO a a EE 18 4 12 Raccourcis ena HIE le nee sdaneesecsnanottss sens Dean emereds iaeiei iioi 18 SW Fonc HOMME E E E A E E 19 SL Creanon d unnouvean projel sensisse enine Ern eae anea 19 EE 24 D UN AE DO E ea aa a na de ane ee a eee 25 IE e Te E e EE 26 MM COP Er a E T 28
19. nierie et de Gestion du Canton de Vaud 3 Modules 3 1 Explorateur des fichiers TinyBuilder permet une gestion avanc e des fichiers et des projets Vous avez la possibilit de g rer des fichiers dans un projet tbXML ou tout simplement d ouvrir et d diter des fichiers externes Dans l tat initial aucun projet n est cr par d faut Vous avez la possibilit d utiliser le Builder avec toute libert sauf la compilation o 1l faut cr er un projet 3 1 1 Vue projet Cette vue nous renseigne sur les donn es du projet Nous y trouvons le nom du projet son type bXML CPP ainsi que la liste des fichiers qui se trouve dans le projet Dans la figure 2 nous n avons pas de projet ouvert ou cr e alors d affiche la valeur par d faut N A Projet Fichiers HI Type projet MA Figure 2 Explorateur du projet 4 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 3 1 2 Vue fichiers externes Projet Fichiers l CORCLELCCECELLCCCECCECE LCL Cal Figure 3 Explorateur des fichiers 5 43 heig yd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 3 2 Onglet dition Cet onglet permet d diter des fichiers textes Vous pouvez ouvrir et diter tout type de fichier texte La plupart des touches raccourcis du clavier ctrl c ctrl v fonctionne no
20. nterface utilisateur de l exemple 31 43 heig yd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Nous allons ajouter le code source n cessaire pour copier le contenu de l entr e texte et l afficher dans la sortie texte taper votre code ici char buffer 512 getTexte EntreeTexte0 buffer setTexte SortieTexte0 buffer Figure 48 code du bouton Dans ce cas nous avons deux fonctions la premi re getTexte qui va lire le contenu de la premi re widget et la deuxi me qui va copier le contenu dans la sortie texte Cal dition Compilation Parametres Widgets Espace de travail no Gode sye x us Code Code d initialisation Builder Code d initilisation ici Code taper voire code iti Char buffer 512 getTeste Entree Texteg E setTexte Sortie Texte0 P D F igure 49 interface exemple 6 Cr ation d une calculatrice Nous allons cr er dans cet exemple une simple calculatrice polonaise 1 Cr ation d un nouveau projet Nous avons besoin de cr er un nouveau projet car TinyBuilder ne permet la compilation qu au sein d un projet Dans la barre d outils cliquer sur Projet Cr er nouveau projet 32 43 ne Sg Manuel d utilisateur Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Boesch Pierre amp Makrem Mahjoub Fichier Edition Outils SACS Builder
21. r setEntier ecranResultat 0 Figure 75 code source du bouton push Il nous reste le bouton CE qui va nous permettre d initialiser l tat de la pile ainsi que l cran de la calculatrice Voici le code de ce bouton 42 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Edition code source if etatBoutongi return pile cleari setEntieri ecranResultat 0y Figure 76 code source du bouton CE Nous avons fini la r alisation de notre calculatrice nous pourrons maintenant compiler et ex cuter notre application depuis les raccourcis de compilation e 5 Figure 77 raccourcis de compilation et ex cuter 43 43
22. r exemple Nous trouvons aussi le code d initialisation de chaque widget Celui ci va servir l initialisation du widget le contenu par exemple Editer Code d Initials ation Code d initilisation ici Editer Coge include lt v ctors using std Vector ector lt ints pile Figure 12 Onglet gestion des codes sources Remarque La gestion du code source dans la fen tre principale est un peu sp ciale Le code d initialisation va tre transform en une fonction qui sera ex cut e en d but d application Cette partie va tre utile pour l initialisation des donn es avant le d but d utilisation de l application La deuxi me partie du code va servir ajouter des d clarations globales Par exemple pour la d claration d une variable globale nous devons l ajouter dans cette partie Dans cet onglet nous avons ajout derni rement deux boutons qui permettent d ouvrir une nouvelle fen tre d dition du code source Cette modification est tr s importante car elle va nous permettre d diter le code source dans une plus grande interface Il y a une autre chose savoir concernant la gestion v nement des boutons Lorsqu on clique sur le bouton nous avons deux v nements le bouton est en bas ensuite en haut Pour que le bouton n ex cute pas votre code deux fois il faut ajouter le code ci dessous if etatBouton return Figure 13 code pour la gestion du bouto
23. r finir 1l faut afficher le nombre dans l cran Voici le code ajouter dans le premier bouton if etatBouton return int decalage getEntier ecranResultat decalage setEntier ecranResultat 1 decalage 10 Figure 65 Code d un bouton chiffre bouton 1 40 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Pour le reste des boutons chiffres d suffit de copier le m me code en changent la valeur 1 par la valeur du bouton traiter Fichier Outils Projet Builder hl ve A SERE JIE A Edition code source 2 Tel Q Projet Fichiers taper votre code ici if etatBouton return int decalage getEntier ecranResultat decalage setEntier ecranResultat 1 decalage 10 Espace de travail calculatrice Type projet tbXML calculatrice cpp calculatrice thXML Nom menu Nouveau nom Modifier Figure 66 dition du code source du bouton En ce qui concerne les boutons op rateurs nous allons v rifier qu il y a au moins deux valeurs dans la pile sinon on affiche un message d erreur Ensuite il faut d piler le dernier l ment de la pile et le suivant et finalement calculer le r sultat Voici le code mettre dans la partie code de chaque bouton op rateur en changent l op rateur dans le calcul du r sultat voir figure 30 if etatBouton return if pile size
24. re de cr ation de projet Le reste des options se met automatiquement Nous avons maintenant cr un projet et nous pourrons mod liser notre interface utilisateur Il y a un fichier tb XML qui existe par d faut mais il ne contient aucun widget Projet Fichiers bonjour Type projet tbxXML ID bonjour Dal Figure 34 Un nouveau projet 5 2 Ouverture d un projet Cette fonctionnalit consiste l ouverture d un projet d j enregistr sur le disque Les fichiers des sauvegardes des fichiers TinyBuilder sont des fichiers XML Ils contiennent les informations n cessaires la r ouverture du projet Vous pouvez ouvrir le projet depuis la barre de menu voir figure 23 ou par le bouton LU de la liste des raccourcis projet Builder Aide creer Nouveau projet z 2 Sagesse Sauvegarder projet Options du projet Figure 35 Ouverture d un projet tb XML 24 43 heig yd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Apr s la demande d ouverture d un projet une boite de dialogue vous demande de choisir le projet ouvrir voir figure 24 Fichier du projet Show AI Files x Favorites G SE ft bonjour Cp bonjour Exe bonjour o bonjour Dad bonjour sml k Preview Filename Bite Eure mt a aa OK v Cancel Figure 36 ouverture d un projet t bXML Il faut s lectionner le fichier XML qui contient le
25. reur dans le fichier source 5 8 Bonjour tout le monde Nous allons cr er une petite application qui permet de r cup rer une cha ne de caract res depuis une entr e texte et l afficher dans une sortie texte lorsqu on clique sur un bouton Nous allons commencer par mettre les widgets dans l espace de travail Il faut ajouter la fen tre principale un bouton et deux entr es textes partir de la palette des widgets cliquer sur le bouton Les boutons o LES TEXTES Figure 45 Ajouter un bouton la fen tre principale Un bouton va s ajouter dans la fen tre principale que vous pouvez d placer comme vous le souhaitez 30 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud Espace de travail Figure 46 Ajouter bouton la fen tre principale Il faut faire la m me chose avec les autres widgets que nous avons besoin Maintenant nous avons fini la construction de notre interface utilisateur et voici le r sultat WW JinyBuilder maS Fichier Outils Projet Builder ASS Tao sis Projet Fichiers dition Compilation Builder bonjour Parametres Widgets Espace de travail prrreeeseseeee a info Code Style Type projet taxML HAS ty T bonjour cpp Type Fenetre bonjour thXML ID Fenetre Label face de travail x 0 vlt h 554 es Gestion du menu Ajouter Modifier Menu Ajouter Figure 47 I
26. rfaces utilisateurs cr l aide du Builder Nous pourrons manipuler les widgets l aide de la souris ou partir de l onglet param tre Le Builder met disposition les param tres les plus courants Parametres Widgets Espace de travail Les groupes El Les boutons PEE Les textes SIS Les entiers a JE Les r els SE LES menys 5 Figure 5 Onglet Builder 7 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 3 3 1 Palette des widgets Dans cette palette nous trouvons les widgets que nous pourrons ajouter dans l espace de travail pour construire nos interfaces utilisateurs Pour ajouter un widget dans la fen tre principale 1l suffit de cliquer sur le bouton du type de widget voulu Il faut se r f rer au rapport pour une meilleure compr hension des widgets Ce qu il faut savoir de ses widgets qu elles se devisent en deux groupes dont 1 Widget simple Ce sont les boutons les textes les entiers et les r els Ce type de widget ne peut pas contenir d autre widget 2 Widget Groupe Ce sont les widgets qui peuvent contenir d autres widgets Ils nous permettent aussi la mise en page des widgets dans la fen tre SE Widgets Les groupes al Les boutons Les textes SEW Les entiers SP Les r els SES LES menus a Figure 6 Palette des widgets dans l onglet Builder
27. rmalement comme un diteur de texte normal Mais cet diteur reste tr s minimaliste et on offre pas toutes les fonctionnalit s dition Compilation Builder calculatrice cpp FT TinyBuilder 1 0 0 2008 Ce fichier est g n rer l aide de l outil TinyGenerator qui fait partie de TinyBuilder Ce fichier est le r sultat d une cr ation d une interface utisateur l aide de cet diteur Toutes les fonctions qui existent dans Ce fichier Sont impl emtn s dans la TinLib vi dila librairie TinyLikb include etinylib h gt Fonction principale cette m thode contient le code CPP de Mintertace utilisateur si int mainiint arge Char ar ji d R sultat des fonctions int resultat d resultat creeridaet Fenetre Fenetre 0 0 615 854 Espace de travail Appliquer la police au widget resultat police F enetre Times Appliquer la police au widget resultat tailePolice Fenetre 141 MAfficher les widgets montreri Fenetre return lancerBouclePrincipalet Figure 4 Onglet diteur des fichiers textes 6 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 3 3 Onglet Builder Cette interface est l espace de travail pour la cr ation des interfaces utilisateurs Nous avons ici un espace qui contient la cr ation et le d placement des widgets Nous avons galement la possibilit de sauvegarder les inte
28. s Sc narios Les identificateurs se font de la m me mani re alors il est pr f rable de changer les identificateurs pour viter les conflits hi Parametri nfo Code Style TYDE Bouton IR Bouton Label dn vs njo je Figure 16 ajouter un bouton dans l espace du travail 4 7 Supprimer un widget Vous pouvez supprimer un widget en s lectionnant et appuyer sur les touches ctrl del ou bien partir de la barre de menu LIUIr Sauvegarder Supprimer widget courant k ENEDES Supprimer tous les widgets shift ctri Delete Figure 17 Supprimer le widget courant 14 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 4 8 Onglet compilation Dans cet onglet nous trouvons les messages r cup r s depuis le compilateur Selon la configuration du projet tbXML CPP nous avons une compilation diff rente Lorsqu on lance la compilation TinyBuilder sauvegarde l interface utilisateur et g n re le code source Nous avons laiss un commentaire qui affiche le widget en cours de traitement lors de g n ration du code source dition Compilation Builder Setpath bat amp tinygenerator exe c C aocglecodeftin Quildert 0 D Examples calculatrice calcutatrice DAMM 0 D google lecture du fichier C qooglecodeftinybuildert D 0 xkamples calcutatricefcatcutatrice 4ML generation du fichi
29. s donn es d un projet Dans notre cas c est le fichier bonjour xml qui contient les informations du projet 5 3 Sauvegarder projet Lors de la sauvegarde d un projet TinyBuilder sauvegarde tous les fichiers du projet ainsi que le fichier utilisateur Elle est lanc e partir de la barre de menu voir figure 25 et en cliquant sur k le raccourci d Builder Aide _ cr er Nouveau projet LU Ur projet Eoauvenarder projet OptionSdu projet Figure 37 sauvegarder projet 25 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 5 4 Options projet En cliquant sur les options du projet depuis la barre de menu voir figure 26 ou le raccourci J NOUS pourrons changer les param tres du projet M Options du Projet Nom du projet Nom executable bonjour bonjour Options de compilation pipe 02 Options de linkage in lit Fichiers Ajouter Supprimer QE Annuler Figure 38 Options du projet 26 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud e Nom du projet Changer le nom du projet e Nom ex cutable Changer le nom de l ex cutable e Options de compilation Param tres de compilation e Options de linkage Param tres de liaisons lors de la compilation e Liste des fichiers La liste des fichiers qui font partie d
30. tat setpath bat amp tinygenerator exe c D googlecodetinybuilderi 0 0 kamples bonjourbonjour Dahl o C a00glecodefil lecture du fichier C googlecodeftinQuildert 0 0 Examplesbonjour honjour tb lt ML generation du fichier C googlecodetinvbuilder1 0 0 Examples bonjour honjour cpp Le widget en cours Fenetre Le widget en cours Bouton D go0oglecodeftinvbuidert 0 UiEvamplezibormlourdDordour Cp In function void Bouton init D googlecodetinybuilderi D 0 xkamples honjour bonjour Chp 28 error ERREUR undeclared first use this function D googlecodetinybuilderi D 0 kamples bonjour bonjour CDD 28 error Each undeclared identifier is reported only once C ao00glecodefin buidert D 0 Examples bonjour bonjour CD 28 error expected before VU token Q E8xe D googlecodetinybuilderi 0 AExamplesbonjourbonjour o No such file or directory Compilation termin e Figure 43 Message d erreurs du compilateur Si nous voulons savoir ou est ce qu elle est dans le fichier source 1l suffit de cliquer sur la ligne dans l onglet compilation ainsi TinyBuilder va s lectionner la ligne en question 29 43 heig yd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud por F SH F Code source initialisation du widget Boutan 1 j vpid Bouton init widgetCourant Bouton Code d initilisation ici Figure 44 s lection de l er
31. u projet a Ajouter ce bouton nous permet d ajouter un fichier au projet Lorsqu on clique dessus une boite de dialogue nous permet de s lectionner le fichier ajouter M Options du Projet Nom du projet Mom executable Espace de travail bonjour bonjour Options de Comp pipe 02 Ajouter fichier au projet Options de linka Itinylik Fichiers ke Preview Filename aglecodeitinybuildert O 0 Examples honjour honjour chp BI Cancel OK Annuler Figure 39 Ajouter un fichier au projet courant b Supprimer Ce bouton nous permet de supprimer un fichier du projet courant Il faut le s lectionner depuis la liste des fichiers ensuite cliquer sur le bouton Supprimer et enfin valider avec ok 27 43 heig vd Manuel d utilisateur Boesch Pierre amp Makrem Mahjoub Haute Ecole d Ing nierie et de Gestion du Canton de Vaud 5 5 Compiler un projet Cette fonctionnalit permet de compiler un projet TinyBuilder Il faut avoir un projet d j cr pour que la compilation se r alise correctement Il suffit de cliquer sur le raccourci depuis la liste des raccourcis compilation partir de la barre de menu ou en appuyant sur la touche F9 de votre clavier WII Projet Builder Executer F10 G n rer code source Figure 40 compilation du projet dition Compilation Builder setpath bat amp tinygenerator exe c C a0ocglecodefin Quildert 0 D Examples ca
Download Pdf Manuals
Related Search