Budujemy sieciową aplikację

Jak stworzyć bogatą w funkcje sieciową aplikację wyposażoną w widgety ze złożonym interfejsem za pomocą szkieletu ZK Simply Ajax opowiada Karl Hodge.

ZK Simply Ajax to opensource\’owy, bazujący na asynchronicznym Java-Scripcie oraz XML-u szkielet przeznaczony do tworzenia sieciowych aplikacji z przygotowanych wcześniej przez użytkownika elementów interfejsu. W niewielkim stopniu wymaga użycia znaczników w XML-u, niepotrzebna jest tez umiejętność programowania. Jeśli potrafimy tworzyć skrypty w HTML-u, nauczenie się ZK będzie wymagać jedynie odrobiny wysiłku. Chociaż bez programowania możemy w ZK tworzyć formularze i rozwijalne menu, aplikacja szkieletowa wspiera także Javę, JavaScript, Ruby oraz pozostałe języki.

Podczas gdy wiele bibliotek Ajaksa działa po stronie klienta, ZK jest uruchamiane jako aplikacja Java po stronie serwera, co oznacza, ze będziemy potrzebować sieciowego serwera wspierającego Javę. Możemy też przygotować do pracy kopię ZK na lokalnym komputerze z zainstalowanym \”sieciowym zasobnikiem\”. Jest nim serwer dla sieciowych elementów Javy.

Najprostszym sposobem pracy za pomocą ZK na lokalnej maszynie jest skorzystanie z Apache Tomcata, popularnego zasobnika sieciowego z wbudowana funkcjonalnością HTTP. Chociaż Tomcata można używać z połączeniu z innymi sieciowymi serwerami (włączając w to serwer Apache HTTP), doskonale sprawdza się jako samodzielny sieciowy serwer. Wersje przeznaczona dla Windows wyposażono w instaler i działa ona jako usługa Windows. Aplikacja tak samo stabilna jak Apache HTTP jest solidna, niezawodna i bezpłatna.

W tym poradniku pokażemy jak zainstalować i skonfigurować program Apache Tomcat pod testowym komputerem z Windows, zapoznamy się tez z niektórymi JSP oraz servletami. Następnie zainstalujemy ZK na tym samym komputerze i przyjrzymy się niektórym elementom interfejsu użytkownika, które można dodać do naszych stron. Będziemy mogli skorzystać z tych elementów do tworzenia sieciowych aplikacji i później umieszczać je na zdalnych sieciowych serwerach.

Przygotowanie do pracy ZK na zdalnym koncie jest bardziej złożonym procesem. Będziemy potrzebować hosta, który już wspiera servlety Javy poprzez Tomcata (lub podobny sieciowy zasobnik) i który umożliwi nam bezpośrednią konfigurację serwera. Jeśli możemy skorzystać z dedykowanego serwera na zdalnym hoście, powinniśmy móc zainstalować i skonfigurować Tomcata korzystając z instrukcji na stronie http://tomcat.apache.org, a następnie skorzystać z naszego poradnika w celu pobrania ZK i jego uruchomienia.

Instalujemy JDK 6 i Tomcata

Apache Tomcat do działania wymaga programu Sun Java Runtime Enviroment (JRE). Jeśli już zainstalowaliśmy Javę na naszym komputerze, sięgamy do Panelu Kontrolnego i szukamy ikony Javy. Otwieramy ją i klikamy zakładkę Update, a następnie Update Now, by pobrać i zainstalować najnowsza wersje. Jeśli nie zainstalowaliśmy Javy, powinniśmy zainstalować najnowszy Java Development Kit Suna ze strony http://java.sun.com/javase/downloads/index.jsp. Obecna wersja JDK 6 to paczka zawierająca ostatnią wersje JRE, jak też narzędzia programistyczne Javy.

Gdy już mamy najnowsza wersje Javy, w prosty sposób zainstalujemy Tomcata. Sięgamy po płytę CD lub pobieramy go ze strony http://tomcat.apache.org/download-60.cgi, wybierając wersje dla Windows. Program jest wyposażony we własny instaler, wystarczy więc jedynie dwa razy kliknąć ikonę i pozwolić działać programowi. Po uruchomieniu instalera nie zapomnijmy zaznaczyć opcji Examples.

Gdy zostaniemy poproszeni o podanie miejsca, gdzie ma być zainstalowany program, wybieramy {stala}C:\tomcat{/stala}. Domyślna instalacja w folderze Program Files może powodować błędy ścieżki, gdy później doinstalujemy ZK. W trakcie procesu instalacji zostaniemy poproszeni o podanie nazwy użytkownika i hasła. To konto administratora, które daje dostęp do zarządzania Tomcatem. Domyślnie port jest ustawiony na 8080 – zostawiamy te ustawienia bez zmian.

Gdy zakończymy ustawienia, zostaniemy poproszeni o uruchomienie Tomcata. Przechodzimy do menu Start i szukamy wejścia Apache Tomcat 6.0. Wybieramy Configure Tomcat, aby uruchomić pole dialogowe Właściwości Tomcata. Tutaj możemy zatrzymać lub uruchomić serwer Tomcat. Upewnijmy się, że opcja Startup type jest ustawiona na Manual i serwer jest uruchomiony.

Aby przekonać się, ze wszystko działa, otwieramy nasza przeglądarkę i przechodzimy do {stala}http://localhost:8080{/stala}, gdzie ujrzymy ekran powitalny serwera Tomcat. W sekcji Miscellaneous, znajdującej się po prawej stronie ekranu, znajdziemy linki oznaczone Servlets Examples i JSP Examples. Zebrano tu proste servlety i Java Serve Pages. Warto je wyprobować, by upewnić się, że nasza instalacja działa tak, jak tego oczekujemy i nie generuje błędów.

Instalujemy ZK

Gdy nasz Tomcat już działa, następnym krokiem jest zainstalowanie ZK. Zaczynamy od powrotu do panelu kontrolnego Tomcata i czasowo zatrzymujemy pracę serwera.

ZK możemy pobrać z działu Programy http://programy.magazynyinternetowe.pl/program/3040,177,0,zk_3_0_3..html, a także ze strony http://www.zkoss.org/download). Wypakowujemy pliki z archiwum zip i przechodzimy do folderu {stala}zk-bin-3.0.3\dist\lib{/stala}. Kopiujemy pliki z rozszerzeniami {stala}.jar{/stala} z tego folderu do {stala}c:\tomcat\lib{/stala}. Następnie przechodzimy do {stala}zk-bin-3.0.3\dist\lib\ext{/stala} i kopiujemy pliki z rozszerzeniami {stala}.jar{/stala} do tego samego folderu. Do folderu {stala}lib{/stala} powinniśmy także skopiować zawartość folderu {stala}zkforge{/stala}. Nie przenosimy po prostu folderów jeden na drugi – to zniszczy strukturę instalacji – upewnijmy się, ze wszystkie pliki z rozszerzeniem {stala}.jar{/stala} skopiowaliśmy bezpośrednio do folderu {stala}C:\tomcat\lib{/stala}.

W celu zakończenia instalacji wracamy do panelu kontrolnego Tomcata i klikamy Start. Otwieramy przeglądarkę i przechodzimy do poradnika użytkownika ZK pod adresem {html}http://localhost:8080/zkdemo/userguide{/html}. Jeśli wszystko przebiega zgodnie z planem, ujrzymy listę przykładów ZK oraz prosty przykład znajdujący się po prawej stronie o tytule \”Hello Word!\”.

Jeśli z jakichś powodów nie będziemy mogli zainstalować naszej kopii ZK, możemy połączyć się z adresem http://www.zkoss.org/zkdemo/userguide, gdzie znajduje się wersja online przewodnika użytkownika.

ZK otrzymujemy wraz z obszernym zestawem przykładów, które możemy przetestować. Każdy z nich pokazuje składnik interfejsu użytkownika utworzony za pomocą przedstawionego niżej kodu.

Wiele z nich można użyć na swoich stronach – wszystko, czego wymagają, to zmiana parametrów.

ZK całkowicie pozbyło się programowania. Zamiast tego udostępnia bibliotekę widgetów interfejsów, które można wyposażyć w dodatkowe parametry za pomocą skryptu. Jeśli musielibyśmy utworzyć taki widget w JavaScripcie od podstaw, wymagałoby to mnóstwa programowania i oczywiście czasu. Za pomocą ZK wystarczy odrobina skryptu.

Testujemy ZK

Przyjrzymy się przykładowi \”Hello World!\” w przewodniku użytkownika, by zobaczyć jak to wszystko działa:

Hello, World!

Zawartość \”Hello World!\” oznaczono za pomocą języka znaczników ZK – ZUML-a. Znacznik window tworzy otoczkę wokół tekstu, obrazu lub innego elementu. ZUML to język oparty na XML-u, który odwołuje się do wbudowanych w ZK elementów Java – w tym przypadku klasy window.

Treść znajdującą się miedzy znacznikami window jest automatycznie interpretowana jako element label. Poprzedni kod daje w tym przypadku identyczny rezultat:

Możemy na żywo aktualizować skrypt na ekranie, dodając kolejne atrybuty pokazujące jak ZK korzysta z dodatkowych parametrów. Po wybraniu przykładu \”Hello World!\” klikamy przycisk Try Me!. Naprowadzamy wskaźnik myszy na miejsce tuz za {stala}width=\”200px\”{/stala} i dodajemy element {stala}sizable=\”true\”{/stala}, tak by kod przybrał postać:

Ponownie klikamy przycisk Try Me!, by zaktualizować przykład. Naprowadzamy wskaźnik myszy na róg obramowania \”Hello World!\”. Strzałka powinna zmienić wielkość – teraz możemy kliknąć i zmienić wielkość obramowania.

Sposób w jaki zachowują się elementy interfejsu użytkownika zmodyfikowano za pomocą jednej zmiany. W tym przypadku dodałem interaktywność, zmieniając atrybut istniejącego elementu. Do skryptu możemy dodawać kolejne elementy w ramach zasobnika {html}{/html}. Spróbujmy edytować przykład \”Hello World!\”, tak by wyglądał następująco:

Gdy już zakończyliśmy edycję, ponownie klikamy Try Me!. Tym razem wiadomość \”Hello World!\” została zastąpiona przyciskiem. Klikamy go i pojawia się pole z ostrzeżeniem. Możemy zauważyć, że pole z ostrzeżeniem nie jest wewnętrznym polem przeglądarki. Chociaż kod zamieszczony powyżej wygląda jak JavaScript, jest to Java, odwołanie wbudowanego w ZK zdarzenia onClick, a nie zdarzenie JavaScript onClick – a samo pole z ostrzeżeniem jest zbudowane przez ZK w Javie. ZK korzysta z BeanShella, a intepreter źródła Javy umożliwia stosowanie skryptu z Java w locie. Więcej na temat elementów skryptowych dodawanych do Javy można znaleźć na stronie http://www.beanshell.org.

Przechodzimy do bardziej skomplikowanego przykładu i klikamy odnośnik Sliders na liście przykładów. Ujrzymy serie dem, z których pierwsze dwa dynamicznie zmieniają wielkość obrazka w miarę jak przesuwamy nad nim wskaźnikiem. Klikamy przycisk Try Me!, aby zobaczyć kod źródłowy. Większość tego skryptu to zwykłe znaczniki. Przykładowo, pierwsze dwie linie po znaczniku {html}{/html} to wszystko, co jest potrzebne do utworzenia pierwszego suwaka:

W pierwszej linii tworzymy suwak o nazwie {stala}slider1{/stala}, następnie przypisujemy funkcje zdarzeniu onScroll, która zmienia właściwość elementu poprzez ID img1. Element definiujemy w drugiej linii. Znacznik obrazka jest jak prosty HTML. Jedynym problemem w tym kodzie jest to, ze nie zdefiniowano funkcji zoom. Następuje to trochę niżej, między znacznikami {html}{/html}. Umożliwiają one wprowadzenie fragmentu skryptu, zazwyczaj Javy, dzięki czemu możliwe staje się tworzenie zmiennych i funkcji globalnych:

void zoom(Slider slider, Image img) 
{
int v = slider.getCurpos();
img.setWidth((v*3 + 10) + \"px\");
}

Ten skrypt zwiększa szerokość wybranego obrazu (img) poprzez przemnożenie pozycji kursora przez 3 i dodanie 10 pikseli (oryginalna szerokość obrazu).

Skrypt od zera

Do tej pory eksperymentowałem ze skryptami demonstracyjnymi. Co jednak zrobić, jeśli zechcemy utworzyć elementy interfejsu użytkownika od zera?

Zaczynamy od przejścia do katalogu {stala}C:\tomcat/webapps\zkdemo{/stala}, następnie zakładamy nowy folder o nazwie {stala}myapp{/stala}. Zapisujemy plik do tego katalogu. Powód dla którego dodajemy go jako podfolder katalogu {stala}zkdemo{/stala} jest taki, ze ten folder już zawiera WEB-INF aplikacji ZK. Znajdują się w nim typy plików konfiguracyjnych mówiące Tomcatowi jak renderować skrypty. Możemy wykonać kopie folderu WEB-INF do innego katalogu, o ile nadal pozostaje w hierarchii webapps. Następnie otwieramy skrypt lub edytor tekstowy i dodajemy następujący kod:

Do you like the photo?

Zachowujemy skrypt jako {stala}index.zul{/stala} w ścieżce {stala}C:\tomca\webapps\zkdemo\myapp\{/stala}. Aby przetestować skończony skrypt, przechodzimy do {stala}http://localhost:8080/zkdemo/myapp{/stala}. W tym poradniku skorzystałem z obrazu, który już znajdował się w hierarchii {stala}zkdemo{/stala}, jednak w prosty sposób można zmienić URL i wskazać inny obraz.

{/html}
{html}{/html}