Application examples.fr_FR - gd-99/symbiogd GitHub Wiki
Hello World !
Sans utiliser X-Tags
NB: Il est préférable d'utiliser X-Tags pour l'interface de vos applications.
//Création d'une nouvelle fenêtre principale
var mainWindow = $.w.window.main({
title: 'Hello World!',
width: 300 //Largeur de 300 pixels
});
//Récupération du contenu de la fenêtre
var windowContent = mainWindow.window('content');
windowContent.html('Hello World!'); //On définit le contenu de la fenêtre
mainWindow.window('open'); //Ouverture de la fenêtre
Utiliser X-Tags
ui.html
<x-window title="Hello World!" width="300">
<p>Hello world!</p>
</x-window>
main.js
W.xtag.loadUI('ui.html', function(mainWindow) { //Chargement du fichier HTML
$(mainWindow).window('open'); //Ouverture de la fenêtre
});
Chronomètre
Dans cet exemple on utilisera X-Tags pour l'interface. C'est la méthode conseillée.
ui.html
<x-window-main title="Chronomètre" resizable="false" width="300" dialog>
<h2 class="timer">0</h2>
<x-buttonContainer>
<x-button class="startStopTimer">Lancer</x-button>
<x-button class="resetTimer" disabled>Réinitialiser</x-button>
</x-buttonContainer>
</x-window-main>
main.js
W.xtag.loadUI('ui.html', function(mainWindow) { //Chargement du fichier HTML
var timerDisplay = $(mainWindow).find('.timer'),
startStopTimer = $(mainWindow).find('.startStopTimer'),
resetTimer = $(mainWindow).find('.resetTimer');
var isTimerStarted = false, timer = null, start = 0, elapsedTime = 0;
startStopTimer.click(function() {
if (isTimerStarted) { //Stopper le timer
resetTimer.button('option', 'disabled', false);
clearInterval(timer);
} else { //Démarrer le timer
resetTimer.button('option', 'disabled', true);
start = Date.now();
if (elapsedTime) { //Si le chrono a seulement été mis en pause
start -= elapsedTime; //On retire le temps déjà écoulé
}
//On démarre le chrono
timer = setInterval(function() {
elapsedTime = Math.floor(Date.now() - start);
timerDisplay.html(Math.round(elapsedTime / 1000)); //Affichage du temps écoulé
}, 500);
}
isTimerStarted = (!isTimerStarted);
startStopTimer.html((isTimerStarted) ? 'Arrêter' : 'Lancer');
});
resetTimer.click(function() { //Réinitialiser le chrono
resetTimer.button('option', 'disabled', true);
if (isTimerStarted) { //Si le chrono est déjà lancé, on l'arrête
startStopTimer.click();
}
//On remet le chrono à 0
elapsedTime = 0;
timerDisplay.html(0);
});
$(mainWindow).window('open'); //Ouverture de la fenêtre
});