samedi 20 novembre 2010

Un petit client JQuery mobile

Ce billet fait suite à celui ci où nous avons appris à exposer un service REST/JSON côté serveur (sur le cloud) avec Google APP Engine.

Voyons aujourd'hui comment consommer un tel service et afficher les résultats sur un téléphone en quelques lignes de javascript à l'aide de JQuery.


Le code suivant permet de récupérer un contenu JSON et d'itérer sur les entrées qu'il contient :

var entries = "http://api.monservice/entries.json";
$.each(data, function(i, entry){          
//traitement de l'élement entry d'indice i

Pour prendre un exemple un peu plus concret, nous allons utiliser l'API Twitter pour afficher une liste de tweets. Les messages seront insérés à l'interieur de l'élément posts.
Après récupération de ces messages nous pouvons ajouter les traitements javascript que l'on veut. Dans notre cas nous allons filter les tweets qui font partie d'une conversation, en ignorant ceux qui commencent par '@':

<head>
// include jquery...
<script type="text/javascript">
function list(url){ $.getJSON( url, function( data ){        
     $('#posts').empty();       
     $.each(data, function(i, post){
                var author = post.user.screen_name;            
      var tweet = post.text;
            var reply = "@"
           // filtrage des tweets commençant par '@'
                if (tweet.substr(0, reply.length) != reply) {
                $('#posts').append(
                '<li>'
                  author
                  ' : '
                   tweet
                 '</li>'
            );
         }
        });
    });
 }

$(document).ready(function(){ 
    var tweets = "http://api.twitter.com/1/statuses/user_timeline/loic_d.json&count=20&callback=?";
    list(tweets);
  
});
</head>
<body> 
<h1>Loic's Tweets</h1>
    <ul id="posts">    
       <li>Getting tweets</li>
    </ul>        
</body>
N.B : L'option callback=? permet de demander à JQuery d'utiliser JSONP pour éviter les problème de cross domain lors du rafraichissement de la page.

Mise en page pour les supports mobiles
JQuery mobile permet d'avoir une mise en page adaptée aux écrans de nos téléphones et tablettes.
Le code suivant génère 2 pages distinctes (tweets et about) à l'affichage avec un effet de "slide". De plus, nous pouvons déclarer notre liste ul comme une 'listview' :

<body>
<!-- Première page -->
<div data-role="page" id="tweets"> 
<div data-role="header">Twitter mobile client</div> 
<div data-role="content">
<div>
<h1>Loic's Tweets</h1>
<ul id="posts" data-role="listview">    
<li>Getting tweets</li>
</ul>
</div>
</div> 
<div data-role="footer">Coffee Bean</div> 
<p><a href="#about">About</a></p> 
</div> 

<!-- Seconde page -->
<div data-role="page" id="about">
<div data-role="header">
<h1>About<h1>
</div>
<div data-role="content"> 
<p>Coffee Bean</p>
<p>With Java sauce</p>
<p>http://coffeebean.loicdescotte.com</p>  
<p><a href="#tweets">Back to tweets</a></p> 
</div>
<div data-role="footer">
<h4>Coffee Bean</h4>
</div>
</div>

</body>

Et voilà, avec ces quelques lignes on obtient une petite page qui pourra tourner sur n'importe quel type de materiel et d'OS!

Télécharger le fichier HTML complet.