♪
I. Installation▲
Téléchargez la bibliothèque iUI au format .zip à l'adresse http://code.google.com/p/iui/downloads/list. La version utilisée ici est la 0.40 (la plus récente à l'heure où ce livre est écrit).
Les fichiers servant au développement pour iPhone et Android sont ceux se trouvant dans le répertoire webapp/iui. Les fichiers iui.js et iui.css sont les fichiers indispensables au développement pour iPhone / Android, tandis que le sous-répertoire t contient des thèmes d'affichage en CSS. On peut enrichir ce répertoire en créant ses propres thèmes.
II. Application iPhone / Android de base▲
Nous allons maintenant développer une petite application permettant de vérifier que notre installation de iUI est correcte. Nous la développerons dans un premier temps sous un serveur PHP, dans un deuxième temps sous un serveur Ruby on Rails.
II-A. Exemple sous PHP▲
Dans le répertoire www contenant les fichiers et répertoires de nos applications PHP, créons un répertoire test qui contiendra les pages HTML (et PHP si besoin) de notre application. Le fichier principal de notre application sera index.html (situé dans le répertoire test). Pour simplifier, le répertoire iui (situé dans web-app) est recopié directement dans le répertoire test, de façon que notre page HTML accède facilement à iui.js et iui.css.
<html>
<head>
<title>Exemple Test</title>
<meta name="viewport" content="user-scalable=no,width=device-width" />
<link rel="stylesheet" type="text/css" href="iui/iui.css" />
<script type="text/javascript" src="iui/iui.js"></script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<div id="home" title="Introduction" selected="true">
Voici une application pour mobiles !
</div>
</body>
</html>La directive <meta> permet de mettre la page HTML à la taille de l'écran, tandis que le tag <link> permet d'inclure le fichier CSS, et le tag <script> permet d'inclure le fichier JavaScript.
La partie intéressante est située dans la balise <body>. Elle contient deux <div>, l'un contenant la toolbar (partie haute de toute application iPhone / Android, contenant en général les boutons d'actions et de navigation), tandis que l'autre <div> est celui du reste de la page HTML (donc situé en dessous de la toolbar).
La visualisation de cette page dans l'iPhone est celle-ci :
Le titre de la page (Introduction) est venu se mettre dans la toolbar. Ceci est dû au code JavaScript iui.js inclus, qui prend l'attribut title de chaque page que nous créons (ici dans un <div>) pour l'insérer dans l'élément d'id pageTitle de la toolbar.
Vous remarquerez que le titre de la page n'est pas très lisible ! Ceci est dû au fichier iui.css utilisé. Bien qu'il soit obligatoire de l'inclure, nous pouvons personnaliser un peu plus l'affichage en insérant un des autres fichiers CSS fournis avec iUI. Ces fichiers se trouvent dans le répertoire iui/t (t signifiant thèmes).
Insérons par exemple le fichier default-theme.css se trouvant dans iui/t/default :
<link rel="stylesheet" type="text/css" href="iui/iui.css" />
<link rel="stylesheet" type="text/css" href="iui/t/default/default-theme.css" />Remarque : ordre d'insertion des styles
Le nouveau fichier de styles doit être inclus APRÈS le fichier iui.css, de façon que les nouvelles définitions de styles qui y sont effectuées prennent le pas sur celles de iui.css (dans le cas où des identifiants de classes CSS sont communs aux deux fichiers).
Le nouvel affichage de la page est maintenant :
Et aussi : les autres thèmes CSS
Les autres thèmes fournis (defaultgrad, ipdc dans la version 0.40 de iUI) permettent de donner un style différent aux pages HTML affichées. Il suffit de changer le nom du fichier inclus dans la directive <link>.
II-B. Exemple sous Ruby on Rails▲
L'exemple est le même que celui étudié précédemment, mais l'utilisation d'un serveur Ruby on Rails oblige à placer les différents fichiers à des emplacements précis, et de découper le code HTML d'une façon légèrement différente.
On crée tout d'abord une application nommée ici test, par la commande rails test :
On crée dans le répertoire app/controllers le fichier test_controller.rb qui contiendra les actions accessibles depuis un navigateur :
Le fichier test_controller.rb contiendra pour l'instant une seule action appelée index :
class TestController < ApplicationController
def index
end
endÀ cette action est associée une page HTML index.rhtml située dans app/views :
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<div id="home" title="Introduction" selected="true">
Voici une application pour mobiles !
</div>Remarque : où placer les fichiers ?
Le fichier iui.js sera placé dans le répertoire public/JavaScript, tandis que le fichier iui.css sera placé dans public/stylesheets. Le sous-répertoire des thèmes CSS t pourra être placé également dans ce répertoire stylesheets.
Cela permet d'écrire le fichier de mise en page suivant (dans app/views/layouts) :
<html>
<head>
<title>Exemple Test</title>
<meta name="viewport" content="user-scalable=no,width=device-width" />
<%= stylesheet_link_tag "iui.css" %>
<%= stylesheet_link_tag "t/default/default-theme.css" %>
<%= javascript_include_tag "iui.js" %>
</head>
<body>
<%= @content_for_layout %>
</body>
</html>Bien entendu, on obtient le même affichage qu'avec le serveur PHP…
III. Paramétrages spécifiques iPhone▲
III-A. Rendre l'application accessible depuis le bureau de l'iPhone▲
Pour l'instant, notre application est utilisable à travers le navigateur Safari, en donnant l'URL du serveur dans la barre d'adresses de celui-ci. Une application Web peut être aussi accessible comme une autre application iPhone en ayant sa propre icône sur le bureau de l'iPhone.
Voici comment procéder.
Il faut d'abord qu'une icône puisse être associée à cette application. Pour cela, il faut l'indiquer dans le code HTML :
<link rel="apple-touch-icon" href="nom_fichier.png" />Sur un serveur PHP, l'emplacement du fichier sera relatif à celui de la page HTML qui contient l'instruction HTML précédente, tandis que sur un serveur Ruby on Rails l'emplacement sera relatif au répertoire public de l'application.
Ensuite, une fois la page d'accueil de notre site affichée dans le navigateur Safari de l'iPhone, il suffit de cliquer sur le bouton + de la barre de boutons située dans la partie basse de l'écran. Un menu s'affiche, dans lequel on choisit « Ajouter à l'écran d'accueil ». Une nouvelle page s'affiche dans laquelle on retrouve l'icône que l'on a indiquée dans notre code HTML (si elle n'est pas visible, c'est que le chemin d'accès indiqué dans le code HTML n'est pas correct), et un libellé saisissable dans lequel on peut indiquer le nom de notre application. Après avoir cliqué sur le bouton Ajouter, l'icône s'affiche sur le bureau de l'iPhone et notre application est directement accessible par celui-ci.
Remarque : taille de l'icône
L'icône doit être de 57 pixels x 57 pixels, sans bord arrondi (ils seront automatiquement affichés de façon arrondie par le système d'exploitation de l'iPhone).
III-B. Supprimer l'affichage de la barre d'adresses du navigateur▲
Une fois l'application accessible via l'icône sur le bureau de l'iPhone, il subsiste un léger problème qui est que le lancement de l'application via l'icône affiche d'abord la barre d'adresses du navigateur, qui disparaît ensuite pour laisser place à notre page HTML. En fait, cette barre d'adresses n'a pas complètement disparu, elle est simplement remontée vers le haut. Si l'on descend la page, elle réapparait.
Comment la faire disparaître de façon définitive, de façon à ce que l'utilisateur ait vraiment l'impression d'utiliser une application native, et non pas l'impression de naviguer sur un site web ?
Il suffit d'indiquer dans le code HTML que l'application doit être utilisée en plein écran, grâce au tag <meta> suivant (ajoutée dans la partie <head> de la page HTML) :
<meta name="apple-mobile-web-app-capable" content="yes" />Attention : quand insérer ce tag ?
Ce tag doit être inscrit dans la page HTML AVANT que l'icône ne soit créée sur le bureau de l'iPhone, sinon cette instruction n'est pas prise en compte. Pensez donc à l'insérer dès le début de la création de votre application, et surtout avant que les premiers utilisateurs y aient accédé.
Vous remarquerez également que cette instruction fait disparaître la barre de boutons du bas de l'écran affichée par Safari. Nous avons vraiment l'impression d'être dans une application native comme celles téléchargées sur l'AppStore !
III-C. Définir une image affichée au démarrage▲
Pour donner encore plus à l'utilisateur l'impression que l'application qu'il utilise est native, il peut être intéressant d'afficher une page au démarrage de l'application. Cette page sera en fait une image de 320 X 460 pixels, destinée à couvrir la zone d'affichage de l'iPhone. On utilise pour cela le tag <link> de la façon suivante (dans la partie <head> de la page HTML) :
<link rel="apple-touch-startup-image" href="nom_fichier.png" />Sur un serveur PHP, l'emplacement du fichier sera relatif à celui de la page HTML qui contient l'instruction HTML précédente, tandis que sur un serveur Ruby on Rails l'emplacement sera relatif au répertoire public de l'application.
Attention : quand insérer ce tag ?
Comme précédemment, ce tag doit être inscrit dans la page HTML AVANT que l'icône ne soit créée sur le bureau de l'iPhone, sinon cette instruction n'est pas prise en compte. Pensez donc à l'insérer dès le début de la création de votre application, et surtout avant que les premiers utilisateurs y aient accédé.
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 à blade159 pour sa relecture.