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
});

Liens utiles

⚠️ **GitHub.com Fallback** ⚠️