• 30 minutes
  • Facile

Mis à jour le 08/01/2013

Les Widgets de bases

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Kuix nous propose tout un étendard de composants graphiques qui peuvent être très utiles pour le développement d'interfaces graphiques très riches. Voyons les plus utilisées.

Les conteneurs

Comme dans tout langage de balisage (HTML, XAML, MXML, etc.) on doit encapsuler nos composants dans des conteneurs afin de bien les positionner dans notre page ou notre écran. Kuix nous propose diverses façons d'aligner nos composants dans son screen. On en dénombre au total 6 layouts pour nos conteneurs :

  • borderLayout

  • gridLayout

  • flowLayout

  • inLineLayout

  • staticLayout

  • tableLayout

Nous allons voir les quatre premiers. Pour en savoir plus sur les autres types de dispositions, consultez la documentation officielle.

borderLayout

Créez un nouveau document borderLayout.xml que vous placerez dans un répertoire Layout_exemple. Ceci fait, voici un exemple tout simple :

<screen title="Border Layout">
    <container style="layout:borderlayout">
        <text class="nord" style="layout-data:bld(north); align:center">Nord</text>
	<text class="sud" style="layout-data:bld(south); align:center">Sud</text>
	<text class="ouest" style="layout-data:bld(west); align:center">Ouest</text>
	<text class="est" style="layout-data:bld(east); align:center">Est</text>
    </container>
</screen>
.nord {
	bg-color: #FF0000;
}

.sud {
	bg-color: #00FF00;
}

.ouest {
	bg-color: #0000FF;
}

.est {
	bg-color: #FFFF00;
}
Image utilisateur

La propriété layout:borderlayout indique le type de disposition que va prendre le conteneur, layout-data va positionner nos composants correctement dans notre écran.

gridLayout

Cette disposition est certainement celle que vous utiliserez le plus, en particulier pour vos formulaires, elle représente une matrice n X m. Voici un exemple d'utilisation :

<container style="layout:gridlayout(3,3); gap:5 5">
        <text class="un_un" style="align:top-left;">(1, 1)</text>
	<text class="deux_un" style="align:top">(2, 1)</text>
	<text class="trois_un" style="align:top-right">(3, 1)</text>
	<text class="un_deux" style="align:left">(1, 2)</text>
	<text class="deux_deux" style="align:center">(2, 2)</text>
	<text class="trois_deux" style="align:right">(3, 2)</text>
	<text class="un_trois" style="align:bottom-left">(1, 3)</text>
	<text class="deux_trois" style="align:bottom;color:white">(2, 3)</text>
	<text style="align:bottom-right">(3, 3)</text>
 </container>

Et pour le CSS :

.un_un {
	bg-color: #FF0000;
}

.deux_un {
	bg-color: #00FF00;
}

.trois_un {
	bg-color: #0000FF;
}

.un_deux {
	bg-color: #FFFF00;
}

.deux_deux {
	bg-color: #00FFFF;
}

.trois_deux {
	bg-color: #FF00FF;
}

.un_trois {
	bg-color: #FFFFFF;
}

.deux_trois {
	bg-color: #000000;
}
Image utilisateur

Rien de nouveau, mise à part la propriété CSS "gap" qui nous permet de créer des séparations entre les lignes et les colonnes.

flowLayout

Cette disposition permet d'aligner nos composants sur une seule ligne, si la ligne est dépassée on passe à la prochaine. Voici un simple exemple d'utilisation :

<screen title="Flow Layout">
    <container style="align:top-left;layout:flowlayout(top)">
		<container class="pos1">
			<picture>290643.png</picture>
		</container>
		<text class="pos2">POS2</text>
		<container class="pos3">
			<picture>bouton_on.png</picture>
		</container>
                <container class="pos4">
			<picture>logo_sdz_fr.png</picture>
		</container>
	
    </container>
</screen>

.pos1 {
	bg-color: #FF00FF;
}

.pos2 {
	bg-color: #00FF00;
}

.pos3 {
	bg-color: #000000;
}
Image utilisateur
inLineLayout

Cette disposition aligne tous nos composants présents dans le composant ayant ce style dans des lignes, très utile pour les formulaires. Exemple :

<screen title="Inline Layout">
    <container style="align:fill-center; layout:inlinelayout(false,fill);gap:0 5;">

        <container>
            <text>Ligne 1</text>
        </container>

        <container>
            <text>Ligne 2</text>
        </container>
        
    </container>
</screen>
Image utilisateur

Ces quatre types de dispositions seront certainement ceux que vous utiliserez le plus souvent dans vos applications avec Kuix. Voyons maintenant ce qu'on devrait mettre d'utile dans ces conteneurs ;) .

Les boutons

Les boutons sont des éléments importants dans une application mobile. On les utilise régulièrement pour faire des menus, des formulaires, etc.

Les boutons

Commencez par créer un nouveau document XML que vous appellerez button.xml que vous placerez dans un répertoire du nom de "component_exemple". Nous allons commencer par créer un simple bouton à l'aide des balises <button> :

<screen title="Exemple de boutons">
  <button class="monBouton">Je suis un bouton</button>
</screen>

Si vous exécutez l'application, vous remarquerez que le bouton prend tout l'écran. Pour éviter cela on utilise un conteneur. Les balises <container> sont utilisés à cet effet :

<container> 
  <button class="monBouton">Je suis un bouton</button>
</container>
.monBouton{
        bg-color: #dddddd;
}
Image utilisateur

Bizarre comme bouton o_O , donnons-lui un peu plus de style en lui intégrant une image comme arrière-plan :

Image utilisateur
<container class="conteneur">
    <button class="monBouton">Je suis un bouton</button>
</container>
.monBouton{
        padding: -3 -10 -9 -10;
	bg-color: #434546;
	border: 8 15 14 15;
	border-image: url(bg.png) 8 15 14 15;
}

.conteneur {
	border: 0 0 1 0;
	margin: 10;
	padding: 0 0 2 0;
}

Résultat :

Image utilisateur

Si vous souhaitez personnaliser votre bouton autrement je vous redirige vers cet excellent tutoriel officiel : Create a custom border.

Attributs principals du Widget

Voyons les attributs essentiels de ce bouton :

  • enabled : Si la valeur est à true alors le bouton est activé, le contraire pour false.

  • id : Représente l'identifiant du bouton, qui lui permettra d'être identifié par nos classes Java.

  • onAction, onfocus, onlostfocus : Pour les évènements sur le bouton.

  • visible : Pour afficher ou masquer le bouton.

N'hésitez pas à consulter la Documentation sur les Widget pour plus de détails.

Les cases à cocher et boutons radio

Checkbox

On peut créer des cases à cocher à l'aide des balises <checkbox>, voici un exemple d'utilisation :

Image utilisateur
<container class="conteneur">
     <checkbox class="macaseAcocher">Je suis une case à cocher</checkbox>
</container>
.checkBox {
	bg-image: url(case_a_cocher.png,0,0,11,11);
	bg-align: left;
	bg-repeat: 1 1;
	padding: 0 3 0 16;
	align: left;
}

.checkBox:hover {
	bg-image: url(case_a_cocher.png,11,0,11,11);
}

.checkBox:selected {
	bg-image: url(case_a_cocher.png,11,0,11,11);
}

.checkBox:hover:selected {
	bg-image: url(case_a_cocher.png,11,0,11,11);
}

Résultat :

Image utilisateur
radiobutton

Les boutons radio doivent être contenus dans des balises radioGroup :

Image utilisateur
<container class="conteneur">
       <radioGroup>
             <radiobutton class="boutonRadio" value="1">Radio N°1</radiobutton>
             <radiobutton class="boutonRadio" value="2">Radio N°2</radiobutton>
       </radioGroup>
</container>

Le css est le même sauf que l'on change d'image.
Résultat :

Image utilisateur

Supposons que l'on ait 36 boutons radios, ce ne serait pas un peu... long à afficher ? :euh:

Pour cela, il existe un Widget qui va encapsuler tous les boutons radios et les placer dans un autre screen, après avoir cliqué sur un menu déroulant (tout comme <select> en HTML) :

Image utilisateur
Image utilisateur
Image utilisateur
<container class="conteneur">
     <choice title="Boutons radio avancés">
       <choiceRadiogroup>
             <radiobutton class="boutonRadio" value="1">Radio N°1</radiobutton>
             <radiobutton class="boutonRadio" value="2">Radio N°2</radiobutton>
       </choiceRadiogroup>
     </choice>
</container>
choice {
	bg-image: url(fleche.png);
	bg-repeat: 1 1;
	bg-align: right;
}

choice {
	border: 3;
	border-image: url(normal.png) 3 3 3 3;
	bg-color: #ffffff;
	color: black;
}

choice:hover {
	border-image: url(hover.png) 3 3 3 3;
	bg-color: #7fc7fb;
}

Résultat :

Image utilisateur
Image utilisateur

On a étudié tous les boutons essentiels de l'API (mise à part la gauge que nous verrons après) qui nous permettront de faire pas mal de choses plus tard dans le tutoriel.

Les formulaires

Tout le monde sait ce qu'est un formulaire ? Cela représente plusieurs champs de textes et éventuellement quelques boutons. Pour créer un champ de texte en HTML on ferait cela :

<input type="text" name="texte" value="une valeur" title="Entrez un texte"/>

Sachez qu'avec Kuix c'est pareil, ou presque :

<textfield id="texte" text="ma valeur" tooltip="Entrez un texte" />

Ajoutons du CSS pour voir ce que ça donne sur notre écran :

<screen title="Champs de texte" style="align:fill-center; layout:inlinelayout(false,fill);gap:0 5;">
    <container style="layout:gridlayout(2,4); " class="conteneur">

            <text>Nom</text> 
            <textfield id="nom" tooltip="Entrez votre nom" />

            <text>Prénom</text> 
            <textfield id="nom" tooltip="Entrez votre prénom" />

    </container>
</screen>

textfield {
	border: 3;
	border-image: url(normal.png) 3 3 3 3;
	bg-color: #ffffff;
	color: black;
}

textfield:hover {
	border-image: url(hover.png) 3 3 3 3;
	bg-color: #7fc7fb;
}

text.tooltip {
	bg-color: #e95711;
	color: white;
	padding: 0 2 0 2;
	font-size: small;
}
Image utilisateur

Notre formulaire a été créé, il ne nous manque plus qu'à ajouter un bouton.

<screen title="Mon premier formulaire" style="align:fill-center; layout:inlinelayout(false,fill);gap:0 5;">
    <container style="layout:gridlayout(2,4); " class="conteneur">

            <text>Nom</text> 
            <textfield id="nom" tooltip="Entrez votre nom" />

            <text>Prénom</text> 
            <textfield id="nom" tooltip="Entrez votre prénom" />

    </container>
    <container style="layout:gridlayout(1,1); gap:5 5;" class="conteneur">
            <button class="monBouton">Valider</button>
    </container>
</screen>

<code type="css">
.monBouton{
        padding: -3 -10 -9 -10;
	bg-color: #434546;
	border: 8 15 14 15;
	border-image: url(bg.png) 8 15 14 15;
}

.conteneur {
	border: 0 0 1 0;
	margin: 0 10 3 10;
	padding: 0 0 2 0;
}
Image utilisateur

Voilà, rien de plus compliqué ^^ . C'est peut-être le tutoriel le plus facile du site du zéro :p .

C'est tellement simple qu'un QCM ne voudrait vraiment pas la peine d'être posé :-° .

Pour l'instant ça à l'air simple... Nous verrons plus tard l'interaction de nos Widgets avec Java à l'aide des DataProvider ( :diable: ) .

Remerciements :

Exemple de certificat de réussite
Exemple de certificat de réussite