BT

Fries : Créer des interfaces Android natives en HTML, JavaScript et CSS

par Abel Avram , traduit par Matthieu Lux le 30 juil. 2013 |

Inspiré par Ratchet, un framework de prototypage d’application pour iPhone, Jaune Sarmiento a créé Fries, un petit framework pour créer des interfaces d’applications Android utilisant seulement l’HTML, le JavaScript et le CSS sans aucun code natif. Si de nombreux autres ont réalisés des interfaces similaires, Fries imite l’interface Anrdoid 4.0 plutôt bien.

Fries a défini jusque-là un certain nombre de composants d’interfaces : Action Bar (incluant Up Button, Action Buttons, Action Overflows, Subtitles), Tabs, Buttons, Spinners, Lists (incluant 2-line et multi-line) et Forms (incluant Flexible Forms). L’image suivante montre l’Action Bar en haut avec une action et un overflow pour les autres actions.

Action Bar

Le code HTML correspondant est le suivant :

    <div class="page">
      <header class="action-bar fixed-top">
        <a class="app-icon action" href="#">
          <i class="icon-fries"></i>
        </a>
        <h1 class="title">Action Buttons</h1>
        <ul class="actions pull-right">
          <li><a title="Search" class="action" href="#"><i class="icon-search"></i></a>
          <li><a title="Copy" class="action" href="#"><i class="icon-copy"></i></a>
          <li><a title="Cut" class="action" href="#"><i class="icon-scissors"></i></a>
          <li><a title="Settings" class="action" href="#"><i class="icon-settings"></i></a>
        </li></ul>
      </header>
    </div>

Une application Fries est un ensemble de "pages" HTML telles que celle ci-dessus chargé à la demande avec stack.js qui est une adaptation de push.js du projet Ratchet. Stack.js fait des appels AJAX pour récupérer une nouvelle page du serveur lorsque c’est nécessaire. D’après Sarmiento, stack.js utilise "l’API History d’HTML5 pour que l’utilisation du bouton retour d’Android fonctionne".

Fries utilise PhoneGap pour implémenter des transitions entre les pages ainsi que le montre cette vidéo :

Sarmiento a mis en avant une roadmap incluant scrollable tabs, modals, progress bar notamment.

Il y a des inconvénients à réaliser une interface HTML5 qui imite le natif. Le principal avantage d’une application HTML5 est de l’écrire une fois et de la déployer sur différents OS mobiles. Mais celle-ci ressemble à Android et rendra donc mal sur iOS. Cela pourrait fonctionner s’il y avait un framework d’abstraction d’interface au-dessus de Ratchet et de Fries qui utiliserait automatiquement l’un ou l’autre en fonction de l’OS sur lequel il est exécuté : Android ou iOS.

Un autre problème important est l'exécution offline de l'application. Pour le moment, une application Fries nécessite un accès Internet constant ou un serveur Web tournant sur l'appareil lui-même. Ce problème pourrait être résolu si Fries implémente les fonctionnalités offline de l'HTML5 telles que l'application cache ou le local storage.

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Donnez-nous votre avis

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet
Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Discuter

Contenu Éducatif

Rien ne serait possible sans le soutien et la confiance de nos Sponsors Fondateurs:

AppDynamics   CloudBees   Microsoft   Zenika
Feedback Général
Bugs
Publicité
Éditorial
InfoQ.com et tous les contenus sont copyright © 2006-2013 C4Media Inc. InfoQ.com est hébergé chez Contegix, le meilleur ISP avec lequel nous ayons travaillé.
Politique de confidentialité
BT