Application examples.fr_FR

Hello World !

//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

Il est préférable d'utiliser X-Tags pour l'interface de vos applications.

Utiliser X-Tags

ui.html

<x-window title="Hello World!" width="300">
   <p>Hello world!</p>
</x-window>

main.js

W.xtag.loadUI('/path/to/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 title="Chronomètre" resizable="false">
   <div class="timer"></div>
   <x-buttonContainer>
      <x-button class="startStopTimer">Lancer</x-button>
      <x-button class="resetTimer" disabled>Réinitialiser</x-button>
   </x-buttonContainer>
</x-window>

main.js

W.xtag.loadUI('/path/to/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();
			timer = setInterval(function() {
				elapsedTime += Math.floor(Date.now() - start);
				timerDisplay.html(elapsedTime);
			}, 500);
		}

		isTimerStarted = (!isTimerStarted);
		startStopTimer.html((isTimerStarted) ? 'Arrêter' : 'Lancer');
	});

	resetTimer.click(function() {
		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
});