Home

App.js est un framework Javascript permettant de créer rapidement des applications web mobiles efficaces.

App.js est un framework Javascript permettant de créer rapidement des applications web mobiles efficaces.

L’objectif du framework Javascript est simple, proposer une interface mobile intuitive et proche de l’UI native.

Multi plateforme, elle pourra être utilisée sur n’importe quel smartphone, et en particulier sur Android et iOS sur lesquels les transitions/animations sont natives.

On retrouve différents éléments d’UI mobile: Listes, Header de navigation, boutons, inputs et système de scroll infini…

D’un point de vue code, App.js propose un système de contrôleurs intéressant, exemple de mise en place:

On définit le layout de la webapp:

01.<!DOCTYPE html>
02.<html>
03.<head>
04.<title>My App</title>
05.<meta name="viewport" content="width=device-width,
06.initial-scale=1.0,
07.maximum-scale=1.0,
08.user-scalable=no,
09.minimal-ui">
10.<link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
11.<style>
12./* put your styles here */
13.</style>
14.</head>
15.<body>
16.<!-- put your pages here -->
17.<script src="//zeptojs.com/zepto.min.js"></script>
18.<script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
19.<script>
20./* put your javascript here */
21.</script>
22.</body>
23.</html>

Ensuite, on ajoute les pages de notre webapp en créant une div avec une classe app-page et un data-page permettant de nommer la page en question pour notre contrôleur:

1.<div class="app-page" data-page="home">
2.<div class="app-topbar"></div>
3.<div class="app-content"></div>
4.</div>

Pour charger notre page « home », il faut utiliser le JS suivant:

1.App.load('home');

Et dès qu’elle sera affichée, notre contrôleur « home » sera appelé:

01.App.controller('home', function (page) {
02.// this runs whenever a 'home' page is loaded
03.// 'page' is the HTML app-page element
04.$(page)
05..find('.app-button')
06..on('click', function () {
07.console.log('button was clicked!');
08.});
09.});

La navigation est elle aussi assez simple à mettre en place, un historique des pages permet de mettre en place le bouton retour facilement.

N’hésitez pas à consulter la documentation du framework qui est plutôt complète.

Grâce à App.js vous pourrez créer rapidement des webapps mobiles compatibles sur l’ensembles des smartphones du marché.

A tester !

Site Officiel

Publicités

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s