Part 04

dialógy, toasty, ukončenie aplikácie

Oznamy

  • (slide) zajtra cvičenia nebudú

    • DOD

  • (slide) Coder Fest

  • (slide) OSS Víkend

  • (slide) LaTeX Template

    • spravíme komunikačný kanál

  • (slide) zadanie

    1. zmysluplné
    2. využiť aspoň jeden senzor/akčný člen
    3. sieťová komunikácia

Overview

  • (slide) Stále robíme na mobilnej aplikácii Torch, ktorá reprezentuje jednoduchú implementáciu baterky.

  • Naposledy sme sa rozprávali o životnom cykle aplikácie, o tom, že sa môže nachádzať v niekoľkých stavoch, ako aj o tom, že Cordova dokáže ošetriť aj stavy existujúcich mobilných operačných systémov.

  • Okrem toho sme sa bavili aj o tom, že dokážeme zamknúť zmenu orientácie aplikácie.

Dialogs

  • Aplikácia už vie síce svietiť, ale korektne by sme mali ošetriť aj situáciu, keď náhodou zariadenie, na ktorom je aplikácia spustená, nemá blesk. Ak teda prídeme na to, že zariadenie blesk nemá, vypíšeme upozornenie.

  • (slide) V JavaScript-e na tento účel používame funkciu alert(), ktorá preruší vykonávanie aplikácie a zobrazí dialógové okno. Túto funkciu vieme zavolať v každom prehliadači pomocou konzoly:

    alert('Houston, we have a problem!');

  • Mobilný operačný systém má však svoje vlastné dialógové okná a v prípade, že by sme nechali vykresliť štandardný alert dialóg, bolo by to ako päsť na oko. Preto sa budeme čo najviac snažiť priblížiť danej platforme aj v podobe dialógových okien.

  • Ak však vyskúšame predsa len spustiť dialógové okno volaním funkcie alert(), Cordova zabezpečí za nás, že toto dialógové okno bude vyzerať, ako keby patrilo do SDK danej platformy.

  • (slide) My však nainštalujeme samostatné rozšírenie pre dialógy, ktoré nebude pracovať len s Alert Dialógom, ale aj s niekoľkými ďalšími typmi. Rozšírenie sa volá cordova-plugin-dialogs a nainštalujeme ho z priečinku projektu takto:

    cordova plugin add cordova-plugin-dialogs

  • (slide) Po nainštalovaní budeme mať k dispozícii štyri druhy dialógov cez globálny objekt navigator.notification. Dostupné typy dialógov sú:

    • navigator.notification.alert - Shows a custom alert or dialog box.
    • navigator.notification.confirm - Displays a customizable confirmation dialog box.
    • navigator.notification.prompt - Displays a native dialog box that is more customizable than the browser’s prompt function.
    • navigator.notification.beep - The device plays a beep sound.

  • (slide) Pre naše potreby si vystačíme s dialógom alert. Potrebujeme len používateľa upozorniť na to, že niečo nie je v poriadku. S použitím kontroly dostupnosti blesku z plugin-u flashlight to teda môžeme vykonať takto:

    window.plugins.flashlight.available(function(isAvailable) {
    if (!isAvailable) {
        navigator.notification.alert("Flashlight not available on this device");
    }
});

  • Ak teraz spustíme aplikáciu v prehliadači, zobrazí sa táto správa. Ak aplikáciu spustíme na zariadení, správa sa nezobrazí.

Application Exit

  • (slide) Ale čo sa stane potom, ako sa spustí aplikácia, ktorej funkcionalita je závislá od komponentov, ktoré nie sú v zariadení dostupné? Mali by sme zobraziť správu o tom, že niečo nie je v poriadku a aplikáciu ukončiť.

  • slide Ukončiť aplikáciu je možné niekoľkými spôsobmi:

    if (navigator.app) {
    navigator.app.exitApp();
} else if (navigator.device) {
    navigator.device.exitApp();
} else {
    window.close();
}

  • objekt navigator - The navigator object contains information about the browser.

  • objekt window - Window object is supported by all browsers. It represents the browser’s window.

  • Takže úplné riešenie problému by mohlo vyzerať nasledovne. Najprv vytvoríme globálnu funkciu exitApp():

    function appExit() {
    console.log("closing application");
    if (navigator.app) {
        navigator.app.exitApp();
    } else if (navigator.device) {
        navigator.device.exitApp();
    } else {
        window.close();
    }
}

  • A následne vytvoríme test na existenciu blesku. Ak sa ten v ziariadení nenachádza, aplikácia zobrazí dialogóvé okno a zatvorí sa:

     onDeviceReady: function() {
    screen.orientation.lock("portrait");

    window.plugins.flashlight.available(function(isAvailable) {
        if (!isAvailable) {
            navigator.notification.alert(
                "Flashlight not available on this device",
                exitApp,
                "Error",
                "Close"
            );
        }
    });
},

Toasts

  • PhoneGap Toast plugin

  • Nainštalovať:

    $ cordova plugin add cordova-plugin-x-toast
$ cordova prepare

  • Príklad:

    window.plugins.toast.showShortTop('Hello there!');