Return false

Un blog IT de plus le blog de Hubebert.

Articles taggés avec ‘iui’

Avec un icône dédié pour mettre sur son menu iPhone...

Avec un icône dédié pour mettre sur son menu iPhone...

Ayant enfin, après un cursus plus qu’aléatoire commencé mes études en informatique. Du coup j’ai développé par un après midi de temps libre deux pages PHP pour stocker mes ebooks en ligne, afin que mes amis lisant sur iPhone puisse se servir dans ma petite collection. C’est un tout petit truc sans ambition, mais étant donné la rareté de la documentation pour iui sur internet, cela ne fera de mal a personne.

Un simple répertoire ftp aurait suffit, mais ça n’a rien de convivial ni de pratique. Lorsque l’on utilise Stanza (l’application gratuite la plus répandue pour lire sur iPhone), cela nécessite de cliquer sur ajouter un catalogue, choisir l’option web, taper l’adresse et galérer un peu avec le zoom pour sélectionner le livre que l’ont veut télécharger.

J’ai donc été chercher du coté des librairies iui de Joe Hewitt. En l’absence de documentation j’ai vraiment fait un truc balbutiant et non fini, mais qui à le mérite de fonctionner et de faire ce que j’attends de lui.

But : lister les fichiers d’un répertoire et de ses sous répertoires et faire un lien vers ceux-ci permettant un import direct dans Stanza. Le contenu des sous répertoires apparaîtra dans une sous-liste.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Berru2 - iPhone</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="apple-touch-icon" href="../err/iui/iui-logo-touch-icon.png" />
<meta name="apple-touch-fullscreen" content="YES" />
<style type="text/css" media="screen">@import "../err/iui/iui.css";</style>
<script type="application/x-javascript" src="../err/iui/iui.js"></script>
</head>

Dans le header on inclue les fichiers de la librairie iui préalablement installée  sur le ftp, ici dans ../err/iui. Le fichier iui.css qui permet d’utiliser les class qui donneront le look iPhone et le iui.js qui permet de faire des transitions animées entre les liens : le petit effet de glissement que l’on à lorsque l’on passe d’un menu à un sous menu dans l’iphone OS.  On donne le lien vers l’icône qui sera utilisé quand l’utilisateur crée un lien vers le site, au format PNG et en 57px par 57px.

Les fichiers .epub sont des fichiers ebooks faciles à lire sur iPhone, de plus lorsqu’un iPhone/iPod Touch à le logiciel Stanza d’installé les liens utilisant le protocole epub:// permettent de dire à l’iPhone de lancer Stanza et de commencer l’importation du fichier vers lequel le lien pointe.

<ul id="home" title="eBooks" selected="true">

<? //----Boucle d'affichage des FOLDER
$folder = "./";
$dossier = opendir($folder);
while ($Fichier = readdir($dossier)) {
if(is_dir($Fichier) && $Fichier != '.' && $Fichier != '..' ){
$nomFichier = $folder.$Fichier;
$nomFichier2 = substr(str_replace('./','',$nomFichier),0,20);
echo '<li><a href="#_'.$nomFichier2.'" target="_self">'.$nomFichier2.'</a></li></br>';

}
}
closedir($dossier);
?>

<li> <a href='#root'> Local </a></li>
</ul>

On débute le contenu de la page lui même : la classe toolbar permet d’afficher le haut de la page d’une appli iPhone, et à lui intégrer un bouton retour lorsque l’on est dans une sous liste. La première boucle en PHP permet de regarder dans le dossier actuel et d’y trouver tous les répertoires. Pour chaque répertoire trouvé, un lien relatif vers une ancre (#_nom_du_répertoire) est créé. Le tout est placé dans des balises <ul> </ul> afin d’apparaître dans une même page, la page home qui sert de page d’accueil. Remarquez la présence du lien vers l’ancre #_root appellélocal“. C’est le lien qui servira à entrer dans le sous menu qui liste les fichiers à la racine du répertoire.

<?php //Affichage du contenu EPUB des sous répertoires
$folder = "./";
$dossier = opendir($folder);
while ($Fichier = readdir($dossier)) {
if(is_dir($Fichier) && $Fichier != '.' && $Fichier != '..' ){
$nomFichier = $folder.$Fichier;
$nomFichier2 = substr(str_replace('./','',$nomFichier),0,20);
echo '<ul id="'.$nomFichier2.'" title="'.$nomFichier2.'">';
$sdossier = opendir($nomFichier.'/');
while ($sFichier = readdir($sdossier)) {
if (substr($sFichier,-4,4)== 'epub') {
$nomsFichier = $folder.$sFichier; // Attention $nomFichier != $nomsFichier
$nomRep = opendir('../');
$nomsFichier2 = str_replace('./', 'epub://berru2.free.fr/', $nomsFichier);
$nomsFichier3 = str_replace('./','',$nomsFichier);
$urlFichier = $nomFichier2.'/'.$nomsFichier3;
$urlFichierStanza = 'epub://berru2.free.fr/ebooks/'.$urlFichier;
echo '<li><a href="'.$urlFichierStanza.'" target="_self">'.str_replace('_',' ',substr($nomsFichier3,0,30)).'</a></li></br>';
}
}
echo '</ul>';

}
}
?>

<ul id="root" title="Racine">

Ici on exécute une boucle qui ouvre les sous répertoires du répertoire courant à la recherche des fichiers .epub
Tous ces fichiers seront donc listés entre deux balises <ul></ul> pour apparaître à chaque fois dans un sous menu portant le nom du répertoire dans lequel on les à trouvés.
Enfin, on remplace le protocole http:// du lien vers le fichier par le protocole epub://.

</pre>
<ul id="root" title="Racine">
<?php
//-------Boucle d'affichage des fichiers EPUB
$folder = "./";
$dossier = opendir($folder);
while ($Fichier = readdir($dossier)) {
if (substr($Fichier,-4,4)== 'epub') {
$nomFichier = $folder.$Fichier;
$nomFichier2 = str_replace('./', 'epub://berru2.free.fr/', $nomFichier);
$nomFichier3 = substr(str_replace('./','',$nomFichier),0,20);
echo '<li><a href="'.$nomFichier2.'" target="_self">'.$nomFichier3.'</a></li></br>';
}
}
closedir($dossier);
?>
</ul>

</body>

La dernière boucle parcours les fichiers du répertoire courant à la recherche des fichiers .epub. Même principe que plus haut, on remplace le protocole http:// par epub:// et on stocke tous les liens relatifs dans le sous menu appelé “Local”.

Pour finir, une petite redirection, en javascript sur ma home afin de rediriger les possesseurs d’iPhone/iPod touch vers la page que l’on viens de voir, sinon vers une page pour permettre d’uploader des fichiers .epub.


<script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') != -1)
{
if(confirm('Vous êtes sur un iPhone/iTouch, voulez vous accèder au catalogue ebook?'))
window.location="http://berru2.free.fr/ebooks/iphone.php";
}
else if (navigator.userAgent.indexOf('iPod') != -1)
{
if(confirm('Vous êtes sur un iPhone/iTouch, voulez vous accèder au catalogue ebook?'))
window.location="http://berru2.free.fr/ebooks/iphone.php";
}
</script>

Vous pourrez tester la page en vous rendant à l’adresse suivante si vous avez un iPhone : http://berru2.free.fr/

Et si vous n’avez pas d’iPhone vous pourrez essayer la page (dont la mise en forme sera proche de ce qu’on voit sur iPhone sans être identique) ici. Par contre les liens vers le ebooks ne seront du coup pas fonctionnel à moins que vous n’ayez associé un programme au protocole epub:// sur votre machine.

Si vous avez des suggestions concernant le code ou les fonctionnalités, elles sont les bienvenues, c’est toujours formateur d’avoir un retour.

L'aspect final en version iPhone.

L'aspect final en version iPhone.

Edit: Les bugs remontés par Caroline sont corrigés, et les underscore dans les menus sont désormais masqués. Le code ci dessus est mis à jour.