|
|
Développement Web pour mobiles
iUI côté CSS
Date de publication : 07/12/2010
Par
Eric Sarrion (Site Developpez.com)
On a vu dans l'article
précédent, que l'écriture de code HTML en utilisant certaines règles
CSS définies par iUI permettait de produire un affichage ayant un
aspect iPhone / Android. Voyons en détail les classes dont nous disposons.
N'hésitez pas à nous faire part de votre avis sur cet article :
1 commentaire 
Créer la toolbar de l'application
Créer les fenêtres de notre application
Passer d'une fenêtre à l'autre
Afficher des listes
Grouper les informations
Afficher des boutons
Fenêtres superposées
La suite ?
Remerciements
Créer la toolbar de l'application
La toolbar de l'application correspond à la partie haute de chacune
des fenêtres de l'application. Elle contient au centre le titre
de la fenêtre, puis un éventuel bouton sur la partie gauche permettant
de revenir à la fenêtre précédente.
Cela correspond à une partie du code HTML de notre exemple test précédent :
|
L'élément <h1> (dont l'id
est obligatoirement pageTitle) contiendra le
titre de la fenêtre actuellement affichée, tandis que l'élément
<a> (dont l'id est
obligatoirement backButton) contiendra un bouton
permettant de revenir à la fenêtre précédente (si elle existe).
La classe button associée à ce lien permet de
lui donner par l'intermédiaire des CSS l'apparence d'un bouton.
L'adresse du lien est indiquée par l'attribut href
et celui-ci sera mis à jour automatiquement par le code JavaScript
de iUI.
Créer les fenêtres de notre application
Chaque fenêtre affichée dans notre application sera en fait un
<div> contenu dans la page HTML
principale de notre application. Donc iUI permet de n'avoir qu'une
seule page HTML, qui contiendra toutes les fenêtres de notre
application, chacune de ces fenêtres étant insérée dans un
<div>.
TERMINOLOGIE : page ou fenêtre ?
Par la suite, afin d'éviter tout malentendu, nous emploierons le
terme page lorsqu'il s'agit d'une page HTML et le terme fenêtre
lorsqu'il s'agit de la partie du code HTML (de la page) qui sera
affichée sur l'écran. Étant entendu qu'une page HTML pourra contenir
plusieurs fenêtres...
Voici une page HTML contenant en fait trois fenêtres qui seront
affichées dans notre application :
| Fichier index.html (sous PHP) |
|
On indique une seule fois le <div>
contenant la toolbar (iUI gère son affichage pour chacune des
fenêtres affichées dans notre application), puis ensuite les trois
<div> contenant chacune des fenêtres.
Pour savoir quelle fenêtre afficher en premier, on utilise l'attribut
selected=true pour celle-ci.
Chaque fenêtre possède un attribut title qui sera
le titre affiché en haut de la fenêtre (dans la toolbar). Elle
possède aussi un id qui permettra au code JavaScript de iUI de
procéder à son affichage (l'id est dans ce cas
ce qui la distingue des autres fenêtres).
Passer d'une fenêtre à l'autre
On a vu que l'attribut selected=true positionné
dans le <div> d'une fenêtre permettait
à cette fenêtre d'être affichée par défaut au lancement de
l'application. Il reste maintenant à pouvoir passer sur une autre
fenêtre depuis celle-ci.
iUI utilise pour cela l'id de chaque fenêtre. Il
suffit de créer un lien (ou un bouton) qui lorsqu'il sera cliqué,
affiche l'autre fenêtre.
Modifions légèrement le code HTML relatif à la première fenêtre :
| Code HTML de la première fenêtre |
|
L'attribut href du lien permet d'indiquer sous
la forme #id_de_la_fenetre vers quelle fenêtre
on doit se diriger. iUI gère directement le passage d'une fenêtre
à l'autre.
La nouvelle page d'accueil s'affiche maintenant :
Lien vers une autre fenêtre
Puis lorsqu'on clique sur le lien :
Affichage de la deuxième fenêtre
Nous remarquons qu'iUI a effectué le passage à la deuxième fenêtre
en effectuant une transition horizontale entre les deux fenêtres.
Aucun appel au serveur n'a été effectué, vu que toutes les fenêtres
sont déjà incluses dans la page HTML !
De plus, la toolbar contient maintenant le titre de notre nouvelle
fenêtre, ainsi qu'un bouton permettant de revenir à celle-ci. La
taille du bouton est définie par une valeur maximale à ne pas
dépasser, c'est la raison pour laquelle iUI ajoute automatiquement
des "..." si la longueur du texte dépasse cette taille maximale.
Afficher des listes
Les listes sont une composante principale de l'affichage, permettant
par exemple d'afficher les menus de l'application.
On utilise pour cela la balise <ul>
qui contiendra une ou plusieurs balises <li>
définissant chaque ligne de la liste. De plus, si chaque <li>
contient un lien (balise <a>) cela
permettra de naviguer vers une nouvelle fenêtre lors du clic sur
cet élément de liste.
| Une liste simple sans lien sous PHP |
|
Elle s'affiche comme suit :
Affichage de listes avec iUI
La personnalisation des listes est effectuée dans iui.css
par le sélecteur body > ul > li et définie de la
façon suivante :
| Définition d'un élément de liste dans iui.css |
|
La directive border-bottom permet de mettre une
bordure sous chaque élément de liste, tandis que la directive
padding permet d'espacer harmonieusement le texte
dans chaque élément de liste.
Voici maintenant une liste contenant des liens vers d'autres fenêtres :
|
On obtient maintenant :
Listes contenant des liens
L'inclusion du fichier default-theme.css permet
de personnaliser les liens dans les listes en incluant une flèche
pointée vers la droite à la fin de l'élément de liste. De plus
un clic sur un élément de liste le fait passer provisoirement avec
un fond bleu, montrant qu'il a été sélectionné. Bien sûr le clic
sur un élément de liste provoque le passage à la fenêtre adéquate
si elle existe dans le code HTML (ce qui est le cas ici pour les
fenêtres 2 et 3).
Une autre possibilité offerte par les classes CSS de iUI est celle
de donner un titre à un groupe d'éléments dans une liste. Par
exemple les fenêtres 2 et 3 seraient regroupées dans le menu 1,
tandis que les fenêtres 4 et 5 seraient regroupées dans le menu 2.
On utilise pour cela la classe group pour indiquer les titres :
|
On obtient maintenant :
Listes avec menus
Grouper les informations
Le but ici est de présenter les informations sous la forme de liste,
chaque ligne de la liste étant de la forme d'un intitulé suivi
d'une valeur (par exemple l'intitulé Prénom suivi
du prénom lui-même). Ce type d'affichage est pratique pour présenter
des données en liste.
Les informations à grouper seront incluses dans un élément HTML
<fieldset> permettant d'entourer ces
informations par un cadre, tandis que chaque ligne d'information
sera un <div> ayant la classe CSS
row. L'intitulé sera un élément <label>,
tandis que la valeur sera un <span>.
| Une fenêtre regroupant les informations |
|
On obtient l'affichage suivant :
Informations groupées
Les éléments ont bien été regroupés par un cadre, l'intitulé (élément
<label>) a été mis en gras, suivi de
la valeur (élément <span>) dans une
police plus fine.
Ajoutons maintenant la classe CSS panel à notre fenêtre :
|
Informations groupées avec panel
Cela ressemble bien plus à un style classique !
Les champs contenant les valeurs ne sont pas modifiables pour
l'instant, vu que les balises HTML qui les affichent sont de simples
<span>. Modifions les
<span> en balises <input> :
Listes avec champs modifiables
|
Affichons notre page et cliquons sur la valeur d'un champ (la valeur
Sarrion par exemple) :
Champs de saisie
Le clavier virtuel de l'iPhone ou de l'Android est apparu, permettant
ainsi la modification de la valeur de ce champ. Supposons maintenant
que nous ayons plusieurs groupes d'informations au lieu d'un seul
comme précédemment. On peut utiliser la balise <fieldset>
pour chacun d'eux et mettre un titre à chaque groupe à l'aide la
balise <h2> qui possède un style
spécial dans iui.css.
Plusieurs groupes d'informations
|
Cela donne comme affichage :
Informations groupées
Afficher des boutons
Pour l'instant le seul bouton que nous ayons utilisé est celui
situé dans la toolbar, permettant la navigation entre les fenêtres
(par retour à la fenêtre précédente). Ce bouton est entièrement
géré par iUI, qui l'affiche selon la navigation que l'on effectue
dans l'application.
iUI permet également d'afficher d'autres boutons. Pour cela on
utilise un lien (balise <a>) de
classe :
- whiteButton pour un bouton avec un fond blanc ;
- grayButton pour un bouton avec un fond gris ;
- redButton pour un bouton avec un fond rouge.
 |
REMARQUE : pourquoi utiliser un lien ?
Remarquons que le lien est nécessaire pour effectuer un changement de fenêtre suite au clic sur le bouton. Si l'on utilise par exemple un <div> de classe redButton, le bouton s'affiche mais aucune action ne sera effectuée lorsqu'un clic se produira sur celui-ci. |
Voici par exemple l'affichage précédent, mais scindé en deux fenêtres :
on passe de la première à la seconde à l'aide d'un bouton en
fin d'affichage.
| Fenêtre avec bouton |
|
La première fenêtre s'affiche ainsi :
Affichage d'un bouton
Puis suite au clic sur le bouton :
Après le clic sur le bouton
Fenêtres superposées
Pour l'instant, les fenêtres que nous affichons sont les unes à la
suite de l'autre, la dernière fenêtre affichée faisant disparaître
la précédente. Il y a des cas où l'on souhaiterait ne pas quitter
la fenêtre actuelle, mais afficher par dessus celle-ci une autre
fenêtre contenant un complément d'informations (par exemple des
options...). Cette fonctionnalité est généralement accessible grâce
à un bouton de la toolbar.
Pour afficher ce bouton dans la toolbar, il faut l'insérer dans
celle-ci de la façon suivante :
| Un bouton dans la toolbar de l'application |
|
On crée, comme pour les autres boutons, un lien dont l'attribut
href pointe vers la fenêtre que l'on souhaite
afficher.
Ce bouton devant se situer sur la droite de la toolbar, on utilise
la classe button qui le permet. Il est possible
de changer la couleur du bouton en ajoutant la classe blueButton
à l'élément <a>, comme ceci :
| Un bouton de couleur bleue dans la toolbar |
|
Une fois que le bouton permettant l'accès à la fenêtre superposée est créé,
il reste à créer celle-ci. Pour cela on utilise une fenêtre de
classe CSS dialog, qui permet d'être affichée
au-dessus de la précédente (et non pas à la place de la précédente).
La fenêtre de classe dialog est une fenêtre
particulière. En effet, elle s'affiche tout en haut de l'écran
(la classe dialog définit la propriété CSS
top à 0), donc le bouton permettant de revenir
à la page précédente n'est plus accessible (la toolbar est
complètement cachée) ! Cette fenêtre doit donc posséder un bouton
de fermeture de celle-ci afin que l'utilisateur puisse revenir à
la fenêtre qui l'a ouverte. Ce bouton de fermeture est un bouton
classique (un lien de classe whiteButton,
grayButton ou redButton), mais
lorsqu'il est activé, il doit fermer la fenêtre. Pour fonctionner
de cette façon, iUI impose que la fenêtre soit un élément
<form> et que, le lien correspondant
au bouton ait un attribut type=cancel.
Cela nous donne donc le code HTML suivant :
| Une fenêtre qui en ouvre une autre par superposition |
|
On peut voir le bouton Détails situé dans la toolbar :
Un bouton dans la toolbar
Puis l'affichage de la fenêtre superposée, suite au clic sur le
bouton Détails :
Fenêtre superposée
Nous voyons que l'affichage de cette fenêtre cache complètement
la toolbar, et que sans le bouton Fermer, il serait impossible
de revenir à notre application !
Il est possible de donner à notre fenêtre superposée l'aspect
panel, en ajoutant cette classe CSS dans l'élément
<form> :
| Ajout de l'aspect panel à une fenêtre superposée |
|
L'affichage obtenu est légèrement différent :
Fenêtre superposée avec panel
Remarquons que dans une fenêtre de classe dialog,
iUI permet de styler les éléments <h1>
qui sont dans un <fieldset> (comme
nous l'avons fait). Mais si l'on ajoute la classe panel
à la fenêtre, les éléments <h2> sont
maintenant aussi stylés (car inscrits dans un élément ayant la
classe panel) et l'on pourrait aussi écrire le
code HTML de la façon suivante :
| Éléments h2 dans une fenêtre de classe panel |
|
Ce qui donne maintenant :
Fenêtre superposée avec panel
La suite ?
Vous avez aimé cet article et vous voulez avoir la suite de l'histoire ?
Elle est dans mon livre XHTML / CSS et JavaScript pour le Web mobile.
Remerciements
Un grand merci à jacques_jean
pour sa relecture.
| Liste de mes articles sur le développement mobile : |
Développement Web pour mobiles - Les bases du HTML - 1 commentaire  |
|
Développement Web pour mobiles - iUI : installation et première application - 3 commentaires |
|
Développement Web pour mobiles - iUI côté CSS - 1 commentaire |
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2010 Eric Sarrion. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Cette page est déposée.
Copyright © 2000-2012 - www.developpez.com