Développement Web pour mobiles iUI : installation et première application

Image non disponible

Cette bibliothèque compacte (10 Ko pour la version compressée du code JavaScript) permet de donner à une page HTML affichée le style iPhone / Android, à l'aide de divers fichiers CSS livrés avec celle-ci. Le code JavaScript permet quant à lui d'enchainer le défilement des pages HTML entre elles, la plupart du temps sans faire appel au serveur (sauf pour les appels AJAX).

N'hésitez pas à nous faire part de votre avis sur cet article : 3 commentaires Donner une note à l'article (4)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Share on Google+ 

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.

Fichier index.html
Sélectionnez

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

Utilisation de iui.css
Utilisation de iui.css

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 :

Fichier index.html (extrait)
Sélectionnez

<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 soient communs aux deux fichiers).

Le nouvel affichage de la page est maintenant :

Utilisation des fichiers de thèmes CSS
Utilisation des fichiers de thèmes CSS

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 :

Exécution de la commande rails test
Exécution de 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 :

Création d'un contrôleur rails
Création d'un contrôleur rails

Le fichier test_controller.rb contiendra pour l'instant une seule action appelée index :

Fichier test_controller.rb
Sélectionnez

class TestController < ApplicationController
  def index
  end
end
				

A cette action est associée une page HTML index.rhtml située dans app/views :

Fichier index.rhtml (dans app/views)
Sélectionnez

<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/javascripts, 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) :

Fichier application.rhtml (dans app/views/layouts)
Sélectionnez

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

 
Sélectionnez

<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 disparue, 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) :

 
Sélectionnez

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

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

 
Sélectionnez

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

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.

  

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.