
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.
Podsumowanie
Powiedzieliśmy o obsłudze okien, menu a także XHR. Poszerza to naszą wiedzę o możliwościach oferowanych przez środowisko Adobe AIR.
Dociekliwym polecam dokumentację na stronie Adobe AIR.