Sito Web per smartphone con jQuery Mobile – Lettore di Notizie

 Articolo letto 71475 volte 

Nel precedente articolo è stata illustrata la struttura di un sito basato su jQuery Mobile. Adesso, tramite l’ausilio di un semplice script php, creeremo un documento multipagina per la lettura di un feed RSS.

La struttura del file rimane quasi del tutto invariata. Come nel precedente articolo, è presente un div con data-role=”page” che rappresenta la nostra pagina principale e che, all’interno del content, conterrà la lista delle notizie.

<!DOCTYPE html> 
<html> 
<head> 
 <title>Taison - News</title> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head> 
<body>
<div data-role="page" id="main">
 <div data-role="header" data-position="fixed">
 <h1>Taison Mobile</h1>
 <div data-role="navbar" data-iconpos="top">
 <ul>
 <li><a href="index.php" data-icon="home">Home</a></li>
 <li><a href="news.php" data-icon="star">Notizie</a></li>
 <li><a href="temperature.php" data-icon="grid">Temperature</a></li>
 </ul>
 </div>
 </div><!-- /header -->
<div data-role="content"> 
 <ul data-role="listview">
 <?php
 $xmldom = new DOMDocument(); // Creo un nuovo oggetto XML DOM
 $xmldom->load("http://taison.altervista.org/blog/feed/"); // Scelgo il feed RSS remoto da leggere
 $nodo = $xmldom->getElementsByTagName("item"); //recupero i nodi 'item'
for ($i=0; $i<=$nodo->length-1; $i++) { // Effettuo un ciclo su tutti i nodi <item> trovati
 $titolo = $nodo->item($i)->getElementsByTagName("title")->item(0)->childNodes->item(0)->nodeValue;
 ?>
 <li><a data-transition="slidedown" data-rel="dialog" href="#news<?=$i?>"><?=$titolo?></a></li>
 <?php } ?>
 </ul>
 </div><!-- /content -->

 <div data-role="footer"> 
 <h1>Taison.Altervista.org</h1>
 <a target="_blank" href="http://taison.altervista.org/blog" class="ui-btn-right" data-icon="grid" data-theme="b" data-mini="true">Versione desktop</a>
 </div>
</div><!-- /page -->
<?php
for ($i=0; $i<=$nodo->length-1; $i++) {
 $titolo = $nodo->item($i)->getElementsByTagName("title")->item(0)->childNodes->item(0)->nodeValue;
 $descrizione = $nodo->item($i)->getElementsByTagName("description")->item(0)->childNodes->item(0)->nodeValue;
 ?>
 <div data-role="page" id="news<?=$i?>">
 <div data-role="header">
 <h1><?=$titolo?></h1>
 </div><!-- /header -->

 <div data-role="content"> 
 <p><?=$descrizione?></p> 
 </div><!-- /content -->
<div data-role="footer">
 <a href="#main">Indietro</a>
 </div><!-- /footer -->
 </div><!-- /page -->
 <?php
}
?>
</body>
</html>

La lista delle notizie viene estratta dalla lettura di un feed RSS e dalla successiva conversione in un documento XML DOM.

$xmldom = new DOMDocument(); // Creo un nuovo oggetto XML DOM
// Scelgo il feed RSS remoto da leggere
$xmldom-&gt;load("http://taison.altervista.org/blog/feed/");
//recupero i nodi 'item'
$nodo = $xmldom-&gt;getElementsByTagName("item");

I nodi item trovati contengono i nodi title e description che utilizzeremo per il nostro lettore di notizie.

jQuery Mobile dispone del widget List View che useremo per formattare la visualizzazione delle news. Basta indicare l’attributo data-role=”list-view” su una normale lista non ordinata ed il gioco è fatto. Tramite un ciclo for in php creeremo una serie di list item ( <li> ) all’interno della nostra lista non ordinata ( <ul> ). Ogni elemento della lista conterrà il titolo ed un link per aprire un’estratto dell’articolo.

Per mostrarvi le caratteristiche dei documenti multipagina, il link all’articolo aprirà una finestra di dialogo che sarà contenuta all’interno dello stesso file. Infatti, alla fine dello script, vedrete un ciclo for che creerà una serie di sottopagine contenenti titolo ed estratto degli articoli.

<?php
for ($i=0; $i<=$nodo->length-1; $i++) {
 $titolo = $nodo->item($i)->getElementsByTagName("title")->item(0)->childNodes->item(0)->nodeValue;
 $descrizione = $nodo->item($i)->getElementsByTagName("description")->item(0)->childNodes->item(0)->nodeValue;
 ?>
 <div data-role="page" id="news<?=$i?>">
 <div data-role="header">
 <h1><?=$titolo?></h1>
 </div><!-- /header -->

 <div data-role="content"> 
 <p><?=$descrizione?></p> 
 </div><!-- /content -->
<div data-role="footer">
 <a href="#main">Indietro</a>
 </div><!-- /footer -->
 </div><!-- /page -->
 <?php
}
?>

Lo script appena visto genera il codice delle pagina principale e delle sottopagine con le notizie all’interno dello stesso documento HTML. jQuery Mobile visualizzerà solamente la prima pagina e mostrerà le sottopagine tramite opportuni link

<a data-transition="slidedown" data-rel="dialog" href="#news<?=$i?>"><?=$titolo?></a&gt

Questo link, ad esempio, mostrerà una certa pagina all’interno di una finestra di dialog usando la transizione ‘scorrimento verso il basso’. Per la demo vi rimando al link http://taison.altervista.org/mob/news.php. Nel prossimo articolo parleremo della personalizzazione delle list view e degli accordion.

 Articolo letto 71475 volte