Zgłębiamy Adobe AIR. Okna, menu i żądania XHR.

javascript-html5-tutorial.pl

Wrzesień 30th, 2013

Dominik-W

Po omówieniu podstaw Adobe AIR, pora na kolejny artykuł. Będzie on o obsłudze okien i elementów menu, a także o żądaniach XHR w Adobe AIR (jako że możemy korzystać z zalet AJAX’a także w AIR).

Obsługa okien w Adobe AIR

Tworzenie okna wygląda właściwie tak samo jak to ma miejsce w klasycznym JavaScript.

Przykład – tworzenie okna:

function createWindow() {
    window.open("zawartosc.html", "Okno", "height=300, width=300");
}
createWindow();

Adobe AIR idzie o krok dalej, dając nam Native Windows z możliwością ich dostosowywania. Obrazuje to kolejny przykład.

function createNativeWindow() {
    // opcje okna:
    var options = new air.NativeWindowInitOptions();

    // rozmiar i położenie okna:
    var rect = new air.Rectangle(20, 20, 300, 250);

    // stwórz okno:
    popup = air.HTMLLoader.createRootWindow(true, 
        options, false, rect);

    // załaduj treść:
    var page = air.File.applicationDirectory
        .resolvePath('zawartsc.html');

    popup.load(new air.URLRequest(page.url));
}
createNativeWindow();

Możemy dostosowywać opcje okna używając dedykowanych metod; w przykładzie pokazano także jak wczytać zawartość z zewnętrznego pliku (zawartosc.html).

Przy okazji możemy zobaczyć jak wygląda odwołanie się do systemu plików w AIR:

var page = air.File.applicationDirectory
   .resolvePath('zawartsc.html');

popup.load(new air.URLRequest(page.url));

Dostosowywanie przycisków okna

Jedną z wielu możliwości jest definiowanie własnych przycisków sterowania oknem (min, max, close).

Przykład:

CSS

.button {
    position: absolute;
    top: 5px;
    font-family: monospace;
    color: #900;
    font-size: 12px;
}

#close {
    width: 80px;
    right: 0px;
}

#min {
    width: 40px;
    right: 80px;
}

#max {
    width: 40px;
    right: 120px;
}

HTML

<button id="close" onclick="win.close();">Zamknij</button>
<button id="min" onclick="win.minimize();">Min</button>
<button id="max" onclick="win.maximize();">Max</button>

Dodatkowo możemy obsłużyć też przeciąganie i zmianę rozmiaru okna dodając elementy jak przedstawione poniżej:

<span id="move" onmousedown="win.startMove();">Przesuń</span>
<span id="resize" onmousedown="win.startResize (air.NativeWindowResize.BOTTOM_RIGHT);"> Rozmiar</span>

Tworzenie menu w aplikacjach AIR

To zadanie jest równie proste jak tworzenie okien.

Ogólnie definiujemy funkcje obsługi menu, np.:

function doExit(e) {
    air.NativeApplication.nativeApplication.exit();
}

Następnie tworzymy menu bazowe:

var rootMenu = new air.NativeMenu();

oraz podmenu:

var fileMenu = new air.NativeMenu();

i dodajemy element do podmenu wraz z nazwą funkcji obsługi:

var exit = new air.NativeMenuItem('Zakończ');
exit.addEventListener(air.Event.SELECT, doExit);
fileMenu.addItem(exit);

Źródła przykładu jako projekt Aptany do pobrania tutaj.

W tym przykładowym projekcie znajdziemy także przykład definiowania skrótów klawiszowych a także kwestii zależnych od systemu operacyjnego.

XMLHttpRequest (XHR)

Adobe AIR ma tę zaletę, że możemy korzystać z rzeczy już opracowanych dla JavaScript. Możemy zatem próbować migrować opracowane przez nas na potrzeby innych projektów kody, jak i używać sprawdzonych rozwiązań, takich jak biblioteki typu jQuery, czy w ogóle technologia AJAX.

I to właśnie obrazuje kolejny przykład – wykonanie żądania XHR w Adobe AIR:

var xmlhttp;

function appLoad() {
    var url = "http://javascript-html5-tutorial.pl/";
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4) {
            alert(xmlhttp.responseText);
        }
    }
    xmlhttp.send(null)
}

Powinien wyglądać znajomo.