22
FEV

jqmPHP - Un générateur de code pour vos applications jQuery Mobile

Publié le 22/02/11 à 09h00 par DJo

jqmPHP est une classe PHP permettant de générer facilement du code HTML adapté aux applications jQuery Mobile.

jqmPHP est une classe PHP permettant de générer facilement du code HTML adapté aux applications jQuery Mobile.

jQuery Mobile, actuellement dans sa version 1.0 alpha 3, commence à gagner en maturité et devrait pouvoir être utilisé en production très prochainement.

jqmPHP est un ensemble de classes PHP5 facilitant la création des pages HTML mobiles utilisant jQuery Mobile.

Pour commencer à générer du code, il faut instancier la classe. A tout moment, il est possible de print ou echo l'objet pour retourner le HTML généré suivant les instructions passées. Exemple de base pour initialiser la classe:

include 'lib/jqmPhp.php';
$j = new jqmPhp();
$j->addBasicPage('', 'Hello World', 'It\'s works!');
echo $j;

Et voici le code qui va être généré avec ces quelques lignes:

<!DOCTYPE html>
<html>
    <head xmlns="http://www.w3.org/1999/xhtml">
        <meta charset="UTF-8"></meta>
        <link type="text/css" rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css">
</link>
        <script type="text/javascript"
        src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script type="text/javascript"
src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js">
        </script>
        <title></title>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header" data-position="inline">
                <h1>Hello World</h1>
            </div>
            <div data-role="content">It's works!</div>
        </div>
    </body>
</html>

Bon, le fameux exemple du Hello World ne suffira sans doute pas à vous convaincre, passons maintenant à la génération d'éléments de listings plus poussés, toujours avec notre classe PHP:

/**
 * Include the jqmPhp class.
 */
 include 'lib/jqmPhp.php';
 
 /**
 * Create a new jqmPhp object.
 */
 $j = new jqmPhp();
 
 /**
 * Config 'html' and 'head' tag.
 */
 $j->head()->title('Example 5');
 
 /**
 * Create and config a jqmPage object.
 */
 $p = new jqmPage('example-5');
 $p->theme('b')->title('Example 5');
 $p->header()->theme('a');
 
 
 /**
 * Create and config a new jqmListview object and add Icon Items.
 */
 $p->addContent('<h3>Icon</h3>');
 $list2 = new jqmListviem();
 $list2->inset(true)->addDivider('Animals')->dividerTheme('a');
 $list2->addIcon('Dogs', '#', 'docs/images/dog.png', '13');
 $list2->addIcon('Cats', '#', 'docs/images/cat.png', '10');
 $p->addContent($list2);
 
 /**
 * Create and config a new jqmListview object and add Thumbnails Items.
 */
 $p->addContent('<h3>Thumbnails</h3>');
 $list3 = new jqmListviem();
 $list3->inset(true);
 $list3->addThumb('YouTube', 'www.youtube.com', 'http://www.youtube.com', 'docs/images/youtube.png');
 $list3->addThumb('Flickr', 'www.flickr.com', 'http://www.flickr.com', 'docs/images/flickr.png');
 $list3->addThumb('Picasa', 'picasaweb.google.com', 'http://picasaweb.google.com', 'docs/images/picasa.png');
 $list3->addThumb('Feedburner', 'www.feedburner.com', 'http://www.feedburner.com', 'docs/images/feedburner.png');
 $p->addContent($list3);
 
 /**
 * Create and config a new jqmListview object and add Split Items.
 */
 $p->addContent('<h3>Split</h3>');
 $list4 = new jqmListviem();
 $list4->inset(true)->splitIcon('gear')->splitTheme('c');
 $list4->addDivider('Unread Messages', '11')->dividerTheme('c')->countTheme('b');
 $list4->addSplit('Account 1', '#', '#', '09');
 $list4->addSplit('Account 2', '#', '#', '02');
 $list4->addSplit('Account 3', '#', '#', '00');
 $p->addContent($list4);
 
 /**
 * Add the page to jqmPhp object.
 */
 $j->addPage($p);
 
 /**
 * Generate the HTML code.
 */
 echo $j;

Et voici le résultat en image:

jqmPHP - Génération du code HTML pour jQuery Mobile

Cette librairie peut s'avérer vraiment très pratique pour générer rapidement le code HTML dynamiquement depuis du PHP. Seul hic, on ne travaille plus sur du MVC ! Mais pour des applications rapides, c'est idéal !

Et vous, avez-vous déjà testé le framework jQuery Mobile ?

 

Site Officiel

Commentaire fun ! Prix com' FunBaraguiné par Severin le 22/02/11 à 09h22
Severin sur La Ferme du Web
Haaaa, mieux le charset là :P
Baraguiné par yannux le 22/02/11 à 10h12
yannux sur La Ferme du Web
Pourquoi pas de MVC ? Bien utiliser ça peut servir comme objet de View :)
Baraguiné par mike1310 le 22/02/11 à 11h48
mike1310 sur La Ferme du Web
J'ai fait un test sur mon téléphone Samsung Jet avec Opera Mobile comme navigateur, et c'est vraiment pas top...

La navigation n'est pas fluide, les menus se chevauchent tous, les selectbox ne sont pas sélectionnable, ... et autre petit bug qui font que je ne l'utiliserais pas pour le moment.
Baraguiné par DJo le 22/02/11 à 12h42
DJo sur La Ferme du Web
Mike > Même la dernière version jQuery mobile ? Alpha 3?
Baraguiné par darkcristal le 22/02/11 à 13h14
darkcristal sur La Ferme du Web
Sur iphone4 avec le safari c'est top ! tout fonctionne parfaitement.
Baraguiné par le 22/02/11 à 13h33
@yannux (plus)1
Baraguiné par Khleo le 22/02/11 à 15h06
Khleo sur La Ferme du Web
Je viens de tester http://demo.jqmphp.com/example-5.php sur Opera Mobile 10 et il y a quelques bugs.
Baraguiné par crash__ le 22/02/11 à 15h17
crash__ via Twitter
Je n'ai pas encore testé la béta 3, mais apparemment il y a toujours des problèmes de fluidité. C'est ce qu'on peut reprocher à ce framework comparé à JQTouch qui lui est vraiment au point pour être utilisé en production.

Je n'aime pas trop comment la classe se présente. Pas de MVC, pas de media query dans le CSS ?

La solution est peut-être idéale pour de petites applications faites à la va-vite, mais ce n'est pas cette classe qui va faire en sorte que beaucoup de monde va sortir son application mobile (surtout pour les gros sites)
Baraguiné par Nicolas le 24/02/11 à 17h08
Nicolas sur La Ferme du Web
J'ai testé avec MicroB (navigateur par défaut de Maemo5) et Firefox version mobile. Sur les 2 navigateurs l'affichage est nikel, par contre la navigation n'est pas très fluide.

Nicolas

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web