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.

Personnaliser vos menus déroulants avec DropKick

Vous trouvez que vos menus select sont trop simples ? Le plugin JQuery DropKick vous permet de faire des menus déroulants élégants sans perdre de temps à changer le css, et à travailler sur la compatibilité.

Si les thèmes par défaut ne vous conviennent pas, vous avez la possibilité de vous faire le vôtre assez simplement.

De tels plugins rendent plus attirants des formulaires qui d’habitude rebutent un peu les utilisateurs.

Voici un exemple de menu réalisé avec ce plugin :

Vous admettrez que le style de base est plus que correct, ce qui change des menus déroulants basiques présents sur beaucoup de sites Internet.

Commencer un petit site Internet avec Instant Blueprint

Instant Blueprint est un service en ligne qui vous permet en quelques clics de mettre en place une architecture de base pour votre nouveau projet de site Internet. En effet, après avoir renseigné quelques informations, il va vous générer automatiquement le squelette de votre site Internet.

Pour utiliser cet outil, il vous faut renseigner :

  • Titre du projet
  • Le doctype désiré
  • Le framework javascript à inclure
  • Comment inclure le framework (local ou distant, compressé ou normal)
  • L’extension du fichier index (html, htm, php, asp)
  • Que mettre dans le dossier include (config.php et/ou fonction.php)
  • Centrer ou non le contenu du site
  • Les principales div de la page

Voici le squelette généré :

A partir de ces quelques informations, Instant Blueprint génère le projet et vous propose de le télécharger. Bien entendu, tout reste à faire, mais la partie rébarbative est déjà faite.

Toutefois, il faudra penser à changer le charset par défaut, histoire de le passer en UTF-8 et ainsi se simplifier la vie niveau encodage.

C’est l’outil idéal pour les petits projets.

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 !