RootsLabs

More than a tool ! GitHub Google+ LinkedIn RSS

Firefox OS : Dev Tips #2

Progi1984 - Commentaires (4)

Vu que les premières astuces semble vous avoir bien plu, nous allons continuer sur 3 astuces développeur pour Firefox OS :

  • Comment créer une application qui gère le mode portrait et paysage ?
  • Comment faire une transition entre deux pages ?
  • Comment utiliser la WebAPI Alarm ?

Comment créer une application qui gère le mode portrait et paysage ?

Pour cela, il ne faut pas déclarer dans le fichier .webapp de clé « orientation« .
Si vous déclarez (comme ci dessous) une clé orientation, cela bloquera l’application en mode portrait (« portrait ») ou paysage (« landscape »).

Comment faire une transition entre deux pages ?

Tout d’abord, il faut deux sections qui permettront de passer de l’une à l’autre.

Tout d’abord notre code HTML avec deux sections l’une au dessus de l’autre :

Code CSS :

Désormais, on a une application avec deux sections qui se chevauchent.
Pour l’animation, nous allons utiliser du JavaScript. Celui déclenchera en fonction de l’appui sur l’un ou l’autre des boutons une suppression d’une classe et l’ajout d’une autre.

Ce code CSS supplémentaire permettra de créer deux animations qui déclenchent un effet de translation dans un sens ou l’autre. Il est bien sûr possible de gérer la durée (0.4s) et la direction (translateX ou translateY, 100% ou -100%).

D’autres effets de transition se trouvent sur le site BuildingFirefoxOS.com.

Comment utiliser la WebAPI Alarm ?

La gestion des alarmes dans une application peut être intéressante, comme dans le cas d’un réveil, ou pour prévenir d’un évènement.
Pour cela, Mozilla a créé une WebAPI Javascript qui s’appelle mozAlarms.

Tout d’abord, il faut ajouter une permission au manifest.webapp :

Sinon vous risquez un message d’erreur dans la console style :

Pour créer une alerte :

Si l’on souhaite récupérer le succès ou l’échec de request :

Si l’on souhaite supprimer une alarme précédemment créée :

Si l’on souhaite récupérer toutes les alarmes :

Si l’on souhaite écouter les callbacks, on doit définir une propriété dans le manifest.webapp qui définit le fichier qui recevra les évènements :

Si l’on souhaite définir un callback quand une alarme se déclenche :

Si l’on souhaite savoir si il y a des alarmes en attente :

Liens :

Commentaires

1. RootsLabs » Firefox OS : Dev Tips #3, le 10 juin 2013 à 13:36

[…] les Dev Tips #1 et #2, nous allons continuer aujourd’hui avec deux astuces sur Firefox […]

2. RootsLabs » Firefox OS : Dev Tips #4, le 2 février 2014 à 14:54

[…] les trois premiers articles de la série “Firefox OS : Dev Tips” (#1, #2 et #3), nous attaquons ce quatrième article sur Firefox OS avec ces trois points […]

3. RootsLabs » Firefox OS : Dev Tips #3, le 8 novembre 2017 à 09:27

[…] les Dev Tips #1 et #2, nous allons continuer aujourd’hui avec deux astuces sur Firefox […]

4. RootsLabs » Firefox OS : Dev Tips #4, le 8 novembre 2017 à 09:28

[…] les trois premiers articles de la série « Firefox OS : Dev Tips » (#1, #2 et #3), nous attaquons ce quatrième article sur Firefox OS avec ces trois points […]

Ajouter un commentaire

Commentaire :