| Projets |
362 Visiteurs
3168 Projets
|
|
 |
 |
 |
 |
|
|
| 2006 - Pérennisation |
  Création d'une application avec XULRunner
[30 mn de lecture - paru le 5/30/2006 10:33:33 AM - Public : Confirmé]
|
|
Auteur
3. Création de l'application
Passons maintenant à l'application. Elle va consister en une simple fenêtre dans laquelle on pourra prendre des notes. Une textbox est donc nécessaire. Ensuite il faudra rendre la fenêtre un peu plus belle. On finira par la création des actions.
3.1 Le fichier XUL
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<window
id="pensees"
title="Pensées"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
screenX="10" screenY="10"
persist="300 300 screenX screenY">
<textbox id="note" multiline="true" flex="1" />
</window>
La première chose à faire est de définir la feuille de styles globale. Elle définie tous les styles par défaut des éléments. Ensuite nous avons l'élément racine window avec quelques attributs :
- id est l'id de la fenêtre
- title est le titre de la fenêtre
- xmlns est le namespace par défaut avec comme URI http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul qui est le namespace pour le XUL
- screenX et screenY sont les positions de la fenêtre au niveau de l'écran
- persist permet de garder en mémoire la taille et la position de la fenêtre. Ici la taille de la fenêtre sera toujours de 300px*300px mais screenX et screenY pourront changer.
Ensuite il y a l'élément textbox avec un id, l'attribut multiline pour pouvoir faire des retours à la ligne et l'attribut flex permettant d'indiquer que l'élément doit s'étendre sur toute la fenêre. Voici le rendu que l'on aura :
Mais pour que se soit plus joli, il serait mieux de lui donner l'apparence d'un post-it. Pour cela il faudra enlever la bordure de la fenêtre et remplacer la barre de titre par une que l'on va personnaliser.
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<?xml-stylesheet href="chrome://pensees/skin/styles.css" type="text/css" ?>
<window
id="pensees"
title="Pensées"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
hidechrome="true"
screenX="10" screenY="10"
persist="300 300 screenX screenY">
<vbox flex="1">
<hbox id="titlebar">
<titlebar flex="1">
<caption flex="1" label="Pensées"/>
</titlebar>
<label value="Fermer" id="close" />
</hbox>
<textbox id="note" multiline="true" flex="1" />
</vbox>
</window>
Une feuille de styles a été ajoutée pour créer le design de l'application que nous verrons dans le prochain paragraphe. L'ajout de l'attribut hidechrome permet de cacher la bordure. Enfin pour palier l'absence de la barre de titre, il a fallu ajouter l'élément titlebar et le label qui sera un bouton pour fermer l'application. Tout est embarqué dans des boîtes car avec XUL, le positionnement n'est pas absolu. Les éléments à l'intérieur d'une vbox vont s'afficher les uns en dessous des autres alors que les éléments dans les hbox vont s'afficher les uns à côté des autres. Voici le rendu que cela va produire :
3.2 Le design avec CSS
Voici maintenant le design. Rien de plus simple que CSS pour créer le style d'une application :
window {
-moz-appearance: none;
background-image: url(images/bg.png);
font: normal 12px/1.5em "Lucida Grande", "Lucida Sans Unicode", "Lucida", "Verdana", sans-serif;
}
#note {
margin: 0;
padding: 2px;
-moz-appearance: none;
border: none;
background-color: transparent;
}
#close {
-moz-appearance: none;
border: none;
background-color: transparent;
background-image: url(images/close.png);
background-repeat: no-repeat;
width: 18px;
height: 16px;
margin: 0;
padding: 0;
cursor: pointer;
}
#titlebar {
padding: 2px;
}
titlebar {
padding: 0;
margin: 0;
}
caption {
-moz-appearance: none;
background-color: transparent;
padding: 0;
margin: 0;
color: orange;
}
La propriété -moz-appearance sert à enlever ou mettre le style par défaut de l'élément. Pour tout le reste, ce sont des propriétés CSS comme celles que l'on utilise pour faire le design d'une page web. Voici le résultat :
3.3 Les actions
Au niveau des actions, il en faut une au chargement de la page pour charger le fichier texte dans la textbox et une sur le label de fermeture de la fenêtre pour la sauvegarde des modifications de l'application dans le fichier texte et pour la fermeture de la fenêtre.
// Chargement de la classe File
var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
.getService(Components.interfaces.mozIJSSubScriptLoader);
loader.loadSubScript("chrome://pensees/content/File.js");
// Action effectuée quand la fenêtre est totalement chargée
window.onload = function()
{
// Récupération du contenu du fichier
var file = new File();
file.read();
// Focus sur la textbox
document.getElementById("note").focus();
// Bouton de fermeture de l'application
document.getElementById("close").onclick = function()
{
// Sauvegarde du fichier
file.save();
// Fermeture de l'application
window.close();
}
}
Pour la récupération du fichier et sa sauvegarde, tout a été mis dans une classe nommée File qui se trouve dans le fichier File.js. Au chargement de l'application, le focus est directement donné à la textbox, ce qui permet de ne pas à avoir à cliquer dedans pour commencer à écrire.
3.4 La classe File
La classe File est composée d'un constructeur qui va aller chercher le fichier texte que l'on a mis à la racine du répertoire de profil. Cette classe est aussi composée de la propriété path qui va stocker le chemin du fichier texte, de la méthode read() qui va lire le contenu du fichier texte et l'insérer dans la textbox et enfin de la méthode save() qui va sauvegarder le fichier texte en y insérant le contenu de la textbox.
function File()
{
// Récupération du chemin du répertoire du profil
var dir_service = Components.classes["@mozilla.org/file/directory_service;1"]
.getService( Components.interfaces.nsIProperties);
this.path = dir_service.get("ProfD", Components.interfaces.nsIFile).path;
// Ajout d'un slash ou d'un anti slash selon le système d'exploitation
if (this.path.search(/\\/) != -1) {
this.path = this.path + "\\";
} else {
this.path = this.path + "/";
}
// Chemin du fichier de note
this.path = this.path + "notes.txt";
}
File.prototype =
{
read: function()
{
// Activer les privilèges nécessaires pour la manipulation des fichiers
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
// Ouverture du fichier en lecture
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
file.initWithPath(this.path);
// Le reste du chargement du fichier est effectué seulement si ce dernier existe
if (file.exists()) {
var is = Components.classes["@mozilla.org/network/file-input-stream;1"]
.createInstance(Components.interfaces.nsIFileInputStream);
is.init(file, 0x01, 00004, null);
var sis = Components.classes["@mozilla.org/scriptableinputstream;1"]
.createInstance(Components.interfaces.nsIScriptableInputStream);
sis.init(is);
// Lecture du contenu du fichier et affichage dans la textbox
var output = sis.read(sis.available());
document.getElementById('note').value = output;
}
},
save: function()
{
// Activer les privilèges nécessaires pour la manipulation des fichiers
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
// Ouverture du fichier en écriture
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
file.initWithPath(this.path);
// Le fichier est créé s'il n'existe pas
if (!file.exists()) {
file.create(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420);
}
var stream = Components.classes["@mozilla.org/network/file-output-stream;1"]
.createInstance(Components.interfaces.nsIFileOutputStream);
stream.init(file, 0x04 | 0x08 | 0x20, 420, 0);
//Sauvegarde du contenu de la textbox dans le fichier
var output = document.getElementById('note').value;
stream.write(output, output.length);
stream.close();
}
};
L'application est maintenant terminée et on va pouvoir la tester puis la packager pour la distribuer.
|
|
|
|
|
|
|
| Articles de la même catégorie |
|
|
|
|
|
|
|
| SUPINFO Training Center peut vous proposer une formation ... |
|
|
|
|
|
|
|
|
27 Visites
Nicolas MÉROUZE
[10 mn de lecture - paru le 5/30/2006 9:49:37 AM - Public : Débutant]