Framework JQuery mobile

Tous ceux qui ont déjà utilisé le dernier né de JQuery, à savoir JQuery mobile vont vraiment apprécier JqmPhp. En effet JqmPhp permet de simplifier une syntaxe assez lourde et surtout de fournir un code optimisé.

Travaillant actuellement sur une application web pour smartphone, je me suis fortement intéressé à ce framework pour rendre mon code plus clair.

Une fois que vous avez téléchargé le framework vous devez le configurer. A savoir que la version actuelle de JQuery mobile est la Alpha 4 mais que Jqmphpest conçu pour la Alpha 3. C’est pourquoi il est possible que certaines des nouvelles fonctionnalités de JQuery Mobile ne soient pas encore prises en charge.

Pour la configuration rendez-vous dans le fichier /lib/jqmphp.php

Les valeurs suivantes sont à changer par les liens vers les nouvelles versions de JQuery Mobile (en local ou sur un serveur distant).

/**
 * Sets the jQuery path.
 * @var JQMPHP_JQ
 */
define('JQMPHP_JQ', 'http://code.jquery.com/jquery-1.5.min.js', true);

/**
 * Sets the jQuery Mobile path.
 * @var JQMPHP_JQM
 */
define('JQMPHP_JQM', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js', true);

/**
 * Sets the jQuery Mobile CSS path.
 * @var JQMPHP_CSS
 */
define('JQMPHP_CSS', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css', true);

Maintenant que le framework est configuré on va pouvoir créer notre première page.

<?php   
//  Creation de l'objet jqmphp
$j = new jqmPhp();  

// ajout du titre au header
$j->head()->title('Menu principal');

// Création d'une page ( il peu en avoir plusieurs par jqmphp )
$p = new jqmPage('Menu Principal');

// choix du theme et ajout du titre à la page
$p->theme('c')->title('Menu Principal');

// choix du theme pour le header de la page
$p->header()->theme('c');

// ajout de text HTML dans la page
$p->addContent('Bienvenue sur ma belle page');

// Exemple de création de liste ( courant dans JQuery mobile)
$gm = new jqmListviem();

// création et ajout d'un item à la liste
$ann = $gm->addBasic('Lien 1', 'page1.php','',true);

$cal = $gm->addBasic('Lien 2', 'index.php?action=3');

// ajout de la liste à la page
$p->addContent($gm);

// ajout de la page à l'objet
$j->addPage($p);

// affichage de la page
echo $j;

?>

Comme on peut le remarquer le code est assez simple, mais qu’en est-il du résultat ?

Ceci est un exemple très simple mais vous trouverez sur le site du projet des exemples complexes avec des formulaires, des listes à icônes…

En conclusion : Bien que le framework soit très récent il promet d’être très utile aux développeurs web soucieux des utilisateurs de smartphone.

Nous sommes dans l’attente d’une version qui sera sûrement adaptée à la version beta de JQuery mobile qui sortira prochainement.

Créer un site Internet pour mobile avec JQuery mobile

Avez-vous déjà pensé à faire une application mobile, ou une version mobile de votre site Internet ?
Si oui, vous avez dû vous confronter à des centaines de problèmes de compatibilité entre les navigateurs mobile.

L’article va vous montrer comment faire des pages HTML compatibles sur tous les téléphones et tablettes.

Afin de bien comprendre l’article, il vous faudra connaître les bases du HTML ainsi que JQuery.

Dans un premier temps, il va falloir télécharger la libraire JQuery mobile. Donc rendez-vous à la page suivante : Télécharger.

Cependant, pour la mise en production, je vous conseille d’utiliser le code suivant pour inclure JQuery mobile :

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
http://code.jquery.com/jquery-1.6.1.min.js
http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js

Pourquoi utiliser ceci plutôt qu’un version locale ?

Imaginons un utilisateur, qui passe de site en site. Fait à fait, il remplit son cache de scripts et pages en tous genres. S’il a déjà été sur un site avec le code précédent, il les a en cache et donc il ne les téléchargera pas. Vous gagnez ainsi de la bande passante et du temps de chargement. :p

Découverte

Nous allons créer notre première page.

<!DOCTYPE html> 
<html> 
	<head> 
		<title>Outweb</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
		http://code.jquery.com/jquery-1.6.1.min.js
		http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js
	</head> 
<body> 

<div  data-role="page"> 
	<div  data-role="header">Outweb</div> 
	<div  data-role="content">Outweb c'est mon site internet.</div> 
	<div  data-role="footer">Mon footer</div> 
</div> 

</body>
</html>

Ceci est l’exemple le plus simple qui soit.

Vous remarquerez l’utilisation de data-role. C’est en effet le point important de JQuery mobile.

Il permet de dire à JQM (JQuery Mobile) comment il doit traiter le div, et quelles classes il doit lui appliquer.

Une page visible n’est pas, contrairement à une page HTML basique, l’ensemble du code HTML, mais seulement le <div data-role= »page »>. Cela permet de charger plusieurs pages en une seule fois et donc de naviguer de l’une à l’autre en toute fluidité.

Page complexe

Comment appliquer un thème à une page ?

Juste une petite modification à faire.

<div  data-role="page" data-theme="b"> 

Et voila un beau thème bleu style IPhone.

Nous allons maintenant faire une liste. La liste est la structure HTML la plus simple à mettre en place dans JQM, car elle permet d’afficher des menus ou des informations même sur des petits écrans.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
http://code.jquery.com/jquery-1.6.1.min.js
http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js
</head>
<body>

<div data-role="page" data-theme="b">
<div data-role="header">Mon header</div>
<div data-role="content">


<!-- listview permet de mettre en forme toute la liste -->
<ul data-role="listview">
        <!-- Met en place un séparateur dans la liste -->
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top '><b>Accueil</b></li>
	<li><a href="http://localhost:8080">Ma page d'acceuil'</a></li>
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b  '><b>Articles</b></li>
	<li><a href="http://url.localhost:8080/u">Menu contextuel en
	JavaScript</a></li>
	<li class=' ui-corner-bottom '><a href="http://url.localhost:8080/z">Emuler
	un flux RSS</a></li>
</ul>

</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>

</body>
</html>

Lien entre les pages

Comme je le disais précédemment, vous pouvez mettre plusieurs pages dans un fichier HTML. Voici comment faire le lien entre les pages. Et surtout, si vous le souhaitez, comment mettre des effets de transition entre vos pages.

Pensez à mettre des ids à vos pages, sinon vous ne pourrez pas naviguer entre elles.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
http://code.jquery.com/jquery-1.6.1.min.js
http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js
</head>
<body>

<div data-role="page" data-theme="b">
<div data-role="header">Mon header</div>
<div data-role="content">



<ul data-role="listview">
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top '><b>Popup</b></li>
       <!-- data-transition permet de définir l'effet de transition. Les trois disponibles sont présenté ici -->
	<li><a href="#page2" data-transition="pop">Voire la page 2</a></li>
	<li><a href="#page3" data-transition="slidedown">Voire la page 3</a></li>
	<li><a href="#page4" data-transition="flip">Voire la page 4</a></li>
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b  '><b>Accueil</b></li>
	<li><a href="http://localhost:8080">Ma page d'accueil</a></li>
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b  '><b>Articles</b></li>
	<li><a href="http://url.localhost:8080/u">Menu contextuel en
	JavaScript</a></li>
	<li class=' ui-corner-bottom '><a href="http://url.localhost:8080/z">Emuler
	un flux RSS</a></li>
</ul>

</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>


<!-- Les autres pages avec des autres thèmes (oui c'est horrible mais c'est une démo)-->
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">Mon header</div>
<div data-role="content">Ceci est la page 2 (pop) </div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>

<div data-role="page" id="page3" data-theme="c">
<div data-role="header">Mon header</div>
<div data-role="content">Ceci est la page 3 (slide)</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>

<div data-role="page" id="page4" data-theme="e">
<div data-role="header">Mon header</div>
<div data-role="content">Ceci est la page 4 (flip)</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>
</body>
</html>

Voilà vous avez maintenant toutes les informations pour mettre en place une version mobile de votre site Internet. Si vous voulez plus de documentation, je vous recommande la documentation officielle qui vient d’être refaite, suite à la sortie de la version beta de JQM.

Comme vous avez pu le voir, JQuery Mobile est un outil performant, novateur et surtout libre. Alors profitez-en !

Adapter sa taille de police à la résolution avec fitText

Tous les développeurs qui ont déjà travaillé sur des sites Internet qui doivent être visibles depuis plusieurs types de supports (comme une tablette ou un smartphone) ont déjà eu le problème des lignes de textes qui se superposent quand la résolution devient trop petite. fitText est justement pensé pour ne plus avoir ce type de problème.
Il sait adapter la taille de la police en fonction de la résolution de l’écran. Un peu comme le fait JQuery mobile.

Pour l’utiliser, après avoir inclus le plugin dans votre code il vous suffit de faire un simple appel javascript.

   $("#monElement").fitText(0.8);

monElement doit avoir une largeur extensible : exprimé en % afin que le plugin fonctionne. Ici 0,8 est le taux d’agressivité de la police.

fitText va très vite devenir un plugin indispensable à tout site Internet.

Et voila, adieu les problèmes de superposition de texte !