Firefox OS : Dev Tips #2
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 »).
{
"orientation": ["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 :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test App</title>
<link rel="stylesheet" type="text/css" href="style/headers.css"/>
<link rel="stylesheet" type="text/css" href="style/lists.css" />
<link rel="stylesheet" type="text/css" href="style/input_areas.css" />
<link rel="stylesheet" type="text/css" href="style/app.css"/>
</head>
<body role="application">
<section role="region" id="page1-view">
<header>
<menu type="toolbar">
<button id="page2-btn"><span class="icon icon-settings">settings</span></button>
</menu>
<h1>Page 1</h1>
</header>
<article id="appList" data-type="list">
Contenu 1
</article>
</section>
<section role="region" id="page2-view" class="skin-organic">
<header>
<button id="page1-btn"><span class="icon icon-close">close</span></button>
<h1>Page 2</h1>
</header>
<article>
Contenu 2
</article>
</section>
<script src="js/app.js"></script>
</body>
</html>
Code CSS :
html, body {
margin: 0;
padding: 0;
font-size: 10px;
background-color: #fff;
}
body {
height: 100%;
display: block;
overflow: hidden;
}
section[role="region"] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
}
#page2-view {
z-index: 10;
}
section[role="region"] > header:first-child .icon.icon-settings {
background-image: url(images/settings.png);
}
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.
var btnSettings = document.querySelector("#page2-btn");
var viewSettings = document.querySelector("#page2-view");
btnSettings.addEventListener ('click', function () {
viewSettings.classList.remove('move-from_right');
viewSettings.classList.add('move-from_left');
});
var btnCloseSettings = document.querySelector("#page1-btn");
btnCloseSettings.addEventListener ('click', function () {
viewSettings.classList.remove('move-from_left');
viewSettings.classList.add('move-from_right');
});
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%).
.move-from_right {
animation: currentToLeft 0.4s forwards;
}
@keyframes currentToLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.move-from_left {
animation: leftToCurrent 0.4s forwards;
}
@keyframes leftToCurrent {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
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 :
"permissions": {
"alarms": {
"description": "Permit to add alarms"
}
}
Sinon vous risquez un message d’erreur dans la console style :
Error: TypeError: navigator.mozAlarms is null
Pour créer une alerte :
request = navigator.mozAlarms.add(
new Date("May 20, 2013 10:30:00"),
"honorTimezone",
{
mydata: "MyNewAlarm"
}
);
Si l’on souhaite récupérer le succès ou l’échec de request :
request.onsuccess = function (e) {
alarmId1 = e.target.result;
};
request.onerror = function (e) {
alert(e.target.error.name);
};
Si l’on souhaite supprimer une alarme précédemment créée :
navigator.mozAlarms.remove(alarmId1);
Si l’on souhaite récupérer toutes les alarmes :
var request = navigator.mozAlarms.getAll();
request.onsuccess = function (e) {
alert(JSON.stringify(e.target.result));
};
request.onerror = function (e) {
alert(e.target.error.name);
};
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 :
"messages": [
{
"alarm": "/index.html"
}
]
Si l’on souhaite définir un callback quand une alarme se déclenche :
navigator.mozSetMessageHandler("alarm", function (message) {
alert("Evenement: " + JSON.stringify(message));
});
Si l’on souhaite savoir si il y a des alarmes en attente :
navigator.mozHasPendingMessage("alarm");
Liens :
Commentaires
[…] les Dev Tips #1 et #2, nous allons continuer aujourd’hui avec deux astuces sur Firefox […]
[…] 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 […]
[…] les Dev Tips #1 et #2, nous allons continuer aujourd’hui avec deux astuces sur Firefox […]
[…] 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