Blog Technologiczny ATENA » RIA http://blog.atena.pl JavaEE, AJAX, xHTML, RIA, JBoss Fri, 20 Jan 2012 11:18:46 +0000 en hourly 1 JavaFX jako GUI do JBoss Seam? Nie ma problemu! http://blog.atena.pl/javafx-jako-gui-do-jboss-seam-nie-ma-problemu http://blog.atena.pl/javafx-jako-gui-do-jboss-seam-nie-ma-problemu#comments Wed, 18 Aug 2010 08:20:33 +0000 Adam Andrzejewski http://blog.atena.pl/?p=996 Jakiś czas temu napisałem artykuł opisujący wstępne założenia JavyFX. Wtedy też obiecałem, że gdy uda mi się uruchomić aplikację FXową na serwerze aplikacyjnym, podzielę się doświadczeniem. Właśnie nadszedł ten czas.

Często można spotkać opinie, że JavaFX nie ma przyszłości, bo nie posiada żadnego wsparcia dla komunikacji z elementami biznesowymi. Kiedyś być może było to prawdą, dziś naprzeciw takim oczekiwaniom wychodzi Flamingo. Jest to framework, który może stać się czymś w rodzaju „kleju” łączącego teoretycznie różne technologie, m.in. JavyFX i Seama.

Aby nie pozostawiać słów bez pokrycia, przygotuję projekt, który zaprezentuje możliwości Flamingo. Pokaże on jak łączyć JavaFX z Seamem. Na koniec wszystko wrzucimy na serwer aplikacji i uruchomimy z poziomu przeglądarki.

Zacznijmy od klasycznego projektu Seama. Wykorzystam tu Eclipse 3.5.2, Seama 2.2, JBossa 5.1 oraz JBoss Tools dla Eclipse, żeby szybko wygenerować działającą aplikację. Jeżeli jeszcze ich nie masz, czas się zaopatrzyć w te niezbędne narzędzia.

W Eclipse wybieramy New – > Other -> Seam -> Seam Web Project

Wypełniamy pola formularza:

  • nazwa projektu: SeamApp
  • Target runtime: JBoss 5.1 Runtime
  • Dynamic Web Module Vesion: 2.5
  • Target Server: JBoss 5.1 Runtime Server
  • Configuration: Dynamic web project with JBoss Seam 2.2.0

Najprawdopodobniej nazwy docelowego runtime’u i serwera będą inne – w zależności od tego co sobie skonfigurujemy. Najważniejsze, by wybrać JBoss 5.1 (Seam 2.2. teoretycznie działa też na wcześniejszych wersjach).

Przez kilka kolejnych ekranów konfiguratora możemy przeskoczyć z domyślnymi ustawieniami. Dotrzemy ostatecznie do ekranu z wyborem bazy danych i sposobu deploymentu aplikacji. Ponieważ przykłady mają być proste, wybieramy pakowanie do war i bazę HSQLową – lub dowolną inną, nie będziemy korzystać tutaj z tego elementu.

Możemy zmienić jeszcze domyślne pakiety, ale nie jest to konieczne.

Wygenerowana aplikacja jest gotowa do użycia i deploymentu – zawiera wszystkie niezbędne elementy do uruchomienia, przykładowe strony oraz klasę Authenticator służącą do autentykacji użytkownika w systemie. Dla pewności możemy uruchomić aplikację by upewnić się, że wszystko poszło ok.

Aby móc podpiąć się do aplikacji za pomocą JavaFX, musimy dodać do niej kilka niezbędnych elementów. Są to biblioteki Flamingo (linki do wszystkich materiałów znajdują się na końcu artykułu):

  • amf-serializer.jar
  • flamingo-service.jar
  • flamingo-services-common.jar
  • hessian.jar
  • scannotation.jar

Umieszczamy je bezpośrednio w katalogu lib aplikacji. W skład Flamingo wchodzi jeszcze parę bibliotek, ale do podstawowego przykładu wystarczą te. Aby móc wywoływać komponenty Seam musimy jeszcze dodać do pliku web.xml wpis definiujący servlet, który będzie odpowiadał za komunikację JavaFX z Seamem

1
2
3
4
5
6
7
8
<servlet>
    <servlet-name>Hessian Remote Servlet</servlet-name>
    <servlet-class>com.exadel.flamingo.service.seam.HessianToSeamServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Hessian Remote Servlet</servlet-name>
    <url-pattern>/flamingo/hessian/*</url-pattern>
</servlet-mapping>

Teraz już możemy dostać się do dowolnego komponentu Seam w naszej aplikacji za pomocą Flamingo. Przykładowa aplikacja posiada tylko jeden komponent (autentykator), więc wykorzystajmy go, aby nie komplikować całości. Do klasy Authenticator.java dodajmy metodę

1
2
3
public String hello(String name){
        return "Hello " + name +"!";
}

Pozostanie ona naszą metodą, którą będziemy wywoływać z poziomu aplikacji FX-owej.

Czas na stworzenie klienta tej jakże wyrafinowanej metody. ;)

W Eclipse tworzymy nowy projekt, w którym znajdą się zarówno klasy Java jak i JavaFX. Polecam by zainstalować sobie wytczkę  Exadel JavaFX Eclipse plugin. Ułatwia ona nieco tworzenie projektów FX-owych w Eclipse. Do tej części wymagane jest też posiadanie JavaFX 1.3 SDK. Jeżeli jeszcze go nie masz – czas zainstalować.

Wybieramy New -> Other -> JavaFX -> JavaFX Project

Na kolejnych ekranach wizarda wybieramy nazwę projektu (FxClient), wersję SDK JavyFX, oraz JDK do wykorzystania w projekcie. Po „doklikaniu” do końca wizarda zostanie utworzony projekt ze wszystkimi niezbędnymi bibliotekami do pisania uruchamiania aplikacji FXowej.

Aby móc skorzystać z mechanizmów Seamowych, musimy dodać jeszcze trzy biblioteki. Tworzymy katalog lib i wrzucamy do niego:

  • jboss-seam.jar (z instalacji seama)
  • jboss-seam-remoting.jar (jw.)
  • hessian.jar (ta sama wersja co w aplikacji Seamowej)

Teraz musimy dodać interfejs, który będzie bramką do naszej usługi seamowej. W idealnym świecie pewnie byłby on zawarty w dostarczonym z zewnątrz jarze z API, ale upraszczamy wszystko jak możemy.

1
2
3
4
5
package pl.atena.client.seam.api;

public interface HelloWorld {
     public String hello(String name);
}

Potrzebna będzie też fabryka tej usługi, dodajmy więc i ją:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package pl.atena.client.java;

import java.net.MalformedURLException;

import com.caucho.hessian.client.HessianProxyFactory;

import pl.atena.client.seam.api.HelloWorld;

public class HelloWorldClient {

    public static HelloWorldClient CLIENT;

    private String _url;
    private HelloWorld _service;

    private HelloWorldClient(String url) {
        _url = url;
    }

    public static void setServerUrl(String url) {
        CLIENT = new HelloWorldClient(url);
    }

    private HelloWorld getService() {
        if (_service == null) {
            try {
                HessianProxyFactory factory = new HessianProxyFactory(); //(1)
                _service = (HelloWorld) factory.create(HelloWorld.class, _url); //(2)
            } catch (MalformedURLException ex) {
                System.out.println(ex);
            }
        }
        return _service;
    }

    public String hello(String s) {

        return getService().hello(s);

    }

}

Krótki komentarz do powyższego:

(1)   – Tworzymy nową instancję fabryki połączeń. Komunikacja za pomocą JavaFX i Seam odbywa się po protokole Hessian.

(2)   – Pobieramy instancję usługi HelloWorld na podstawie adresu URL zasobu. Parametr ten ustawimy już bezpośrednio w skrypcie FX i tam opiszę jego wygląd.

Pozostał nam jeszcze skrypt FX który skorzysta z usługi Seamowej. Utwórzmy go zatem:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/*

*MainFrame.fx

*

*Created on sie 12, 2010, 08:09:02 AM

*/
package pl.atena.client.fx;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.TextOrigin;
import javafx.ext.swing.SwingButton;
import javafx.scene.layout.VBox;
import javafx.scene.control.TextBox;

import pl.atena.client.java.HelloWorldClient;

class Hello{ //(1)

    public var name:String;
    public var str:String;    
}

var helloModel = new Hello();

HelloWorldClient.setServerUrl("http://localhost:8080/SeamApp/flamingo/hessian/authenticator"); //(2)

var helloText: TextBox = TextBox {
    text: bind helloModel.name with inverse //(3)
    columns: 7
    selectOnFocus:true
}

var helloLabel = Text{
    y:8
    font: Font { name:"sansserif", size: 12 }
    fill: Color.BLACK
    content: bind "Server says: {helloModel.str}"
    textOrigin: TextOrigin.TOP
}

var helloButton = SwingButton  {
    text:"Say Hello!"
    action: function(){
        helloModel.str = HelloWorldClient.CLIENT.hello(helloModel.name);
    } //(4)
}

Stage { //(5)
    title: "Helloworld Sample"
    width: 200
    height: 150
    scene: Scene {
        content: VBox {
            translateX: 5
            translateY: 5
            spacing: 10
            content: [                
                HBox {
                    content: helloText
                    spacing: 10
                },
                HBox {
                    content: helloButton
                    spacing: 10
                },
                HBox {
                    content: helloLabel
                    spacing: 10
                }
            ]
        }
    }
}

(1)    – Tworzymy miniklasę, w której będziemy trzymać imię do powitania, oraz odpowiedź z komponentu Seam.
(2)    – Ustawiamy adres do komponentu Seam do którego chcemy się odwołać. Generalnie powinien mieć on postać http://adres_serwera/kontekst_aplikacji/flamingo/hessian/nazwa_komponentu_seam, przy czym /flamingo/hessian to ścieżka dla servletu Flamingo którą wpisaliśmy w web.xml aplikacji seamowej.
(3)    – Wiążemy zawartość pola tekstowego z jedną ze zmiennych naszej miniklasy.
(4)    – Podpinamy wywołanie usługi pod kliknięcie na przycisk.
(5)    – Tworzymy scenę, na której umieszczone zostaną nasze elementy graficzne.

W tym momencie (jeżeli mamy uruchomioną aplikację seamową oczywiście) możemy już uruchomić aplikację FXową i sprawdzić czy wszystko się udało.

Jak widać, udało nam się wywołać komponent Seam z aplikacji desktopowej.

Czas podnieść sobie nieco poprzeczkę, i zrobić to samo z aplikacji webowej.

Tu też przydatny jest plugin do eclipse, gdyż może on za nas załatwić mozolną walkę z kompilacją do pliku jar wraz z wymaganymi bibliotekami (javafxpackager z linii poleceń też może to zrobić, ale wówczas trzeba się trochę napisać…).

Aby przygotować plik jar odpowiedni do wykorzystania na serwerze aplikacji wystarczy kliknąć na naszym skrypcie prawym przyciskiem myszy i wybierać Run as -> JavaFX Application (applet)

W folderze dist projektu zostaną utworzone następujące elementy

  • plik jar ze skompilowanym skryptem FX
  • pliki jnlp, umożliwiające uruchamianie aplikacji przez Java Web Start
  • strona html, w treści której umieszczony został aplet ze skryptem FX

Wszystko to przenosimy do katalogu WebContent naszej aplikacji Seamowej, zmieniamy nazwę wygenerowanego przez kompilator pliku html na index.html i robimy redeploy całej aplikacji. Teraz pod domyślnym adresem aplikacji seamowej powinniśmy otrzymać działający skrypt JavyFX

Prawda, że to proste?

Na koniec jeszcze jedna ciekawostka. Jeżeli zmodyfikujemy plik index.html i dodamy do definicji apletu parametr draggable, będziemy mogli dosłownie wyciągnąć aplet na pulpit (trzymając klawisz alt oraz lewy przycisk myszy) i korzystać z niego nawet po zamknięciu przeglądarki.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MainFrame</title>
</head>
<body>
<h1>MainFrame</h1>
<script src="http://dl.javafx.com/1.3/dtfx.js"></script>
<script>
    javafx(
        {
              archive: "MainFrame.jar",
              draggable: true,
              width: 400,
              height: 400,
              code: "pl.atena.client.fx.MainFrame",
              extPackages: "javafx.ext.swing",
              name: "MainFrame"
        }
    );
</script>
</body>
</html>

Podsumowując, Flamingo pozwala nam łatwo zintegrować aplikację FXową z aplikacją Seamową. Dzięki niemu możemy korzystać z komponentów Seama zarówno w aplikacji desktopowej, jak i wykorzystać JavaFX do stworzenia interfejsu użytkownika bezpośrednio w aplikacji seamowej. Aplikację przygotowaną w ten sposób bez problemu można umieścić na serwerze, a także udostępnić wersję desktopową przez jnlp. JavaFX nie zabrania wykorzystania innych elementów na stronie, może współistnieć z innymi elementami i bibliotekami. Czas więc zakasać rękawy i stworzyć prawdziwe RIA.

Zasoby i bibliografia

]]> http://blog.atena.pl/javafx-jako-gui-do-jboss-seam-nie-ma-problemu/feed 0 Wprawki w JavaFX http://blog.atena.pl/wprawki-w-javafx http://blog.atena.pl/wprawki-w-javafx#comments Wed, 21 Apr 2010 08:42:57 +0000 Adam Andrzejewski http://blog.atena.pl/?p=937 Rośnie popularność aplikacji RIA. Powstaje coraz więcej narzędzi i języków do tworzenia takich aplikacji. W tym artykule postaram się przedstawić podstawy JavaFX – języka skryptowego ze stajni SUNa.

JavaFX na początku zniechęcała mnie od siebie reklamując się jako język skryptowy – miałem zbyt dużo złych skojarzeń z Javasciptem, a konkretnie z brakiem statycznego typowania argumentów. Jednak już po lekturze paru artykułów i pierwszej prostej aplikacji okazuje się, że nie jest tak źle – powiedziałbym nawet, że jest całkiem nieźle.

Jako narzędzie do developmentu wybrałem NetBeans IDE for JavaFX – wtyczka do eclipse jest również dostępna, jednak dopiero dla wersji 3.5.

Przejdźmy do konkretów. Stwórzmy prosty kalkulator by poznać semantykę języka. Uruchamiamy NetBeans, i wybieramy New Project

Z kategorii wybieramy JavaFX, klikamy next

Uzupełniamy nazwę projektu, zaznaczamy „Empty Project”, „Set as Main Project” oraz odznaczamy „Create Main File”. Klikamy Finish – NetBeans wygeneruje dla nas projekt kalkulatora.

Po utworzeniu projektu dodajemy naszą klasę „Calculator”. Klikamy prawym na projekcie, wybieramy „New” -> „Empty JavaFX File” i uzupełniamy nazwę klasy. Opcjonalnie można uzupełnić nazwę pakietu, ale w tym przykładzie nie jest to konieczne. Następnie uzupełniamy ciało klasy – aby było to bardziej czytelne. pozwolę sobie nieco skrócić opis. Cały projekt można pobrać tutaj

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.TextBox;
import javafx.scene.control.Button;
import javafx.scene.input.MouseEvent;

var currResult:Number = 0;
var firstElem:Number;
var secondElem:Number;
var funcToRun:function();
var funcDefined = false;

Stage {
    title: "JavaFX quick calculator!"
    scene: Scene {
        width: 130
        height: 150
        content: [
             ......
        ] //Content
    } //Scene
}

Pierwsze co rzuca się w oczy to

1
import

, który znany jest wszystkim programistom Javy i nie tylko. Okazuje się, że JavaFX mimo że jest językiem skryptowym jest kompilowana do bytecode maszyny wirtualnej i tam uruchamiana. Dalej mamy definicje zmiennych, gdzie obserwujemy ciekawą właściwość JavyFX, a mianowicie możliwość (ale nie konieczność!) określenia typu danych jakie reprezentuje dana zmienna. Kompilator sam domyślnie jest w stanie nadać typ na podstawie pierwszej przypisanej zmiennej. A zatem obie konstrukcje -

1
2
var funcDefined = true;
var funcDefined:Boolean = true;

- są jak najbardziej poprawne i akceptowane przez kompilator. JavaFX udostępnia sporo wbudowanych typów danych jednak na potrzeby kalkulatora wystarczy nam Boolean, Number (liczby zmiennoprzecinkowe) i function(). Function() nie jest w ścisłym znaczeniu typem danych, ale pozwala zdefiniować zmienną, której użyjemy w dość ciekawy sposób później.

Stage definiuje nam nasze „okno robocze”, czyli obszar w którym będziemy dodawać i wyświetlać nasze komponenty. Scena to element właściwy w którym pojawia się zawartość.

Struktura elementów w JavaFX nieodzownie kojarzy się mi z DOM – chodzi o rozrastające się ku dołowi drzewo. W każdym elemencie możemy definiować kolejne elementy coraz bardziej rozgałęziając drzewo. Dodajmy parę gałęzi do sceny – niech to będzie pole tekstowe, w którym będą pojawiać się wyniki oraz przyciski funkcyjne kalkulatora.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var currResult:Number = 0;
var firstElem:Number;
var secondElem:Number;
var funcToRun:function();
var funcDefined = false;

Stage {
    title: "JavaFX quick calculator!"
    scene: Scene {
        width: 130
        height: 150
        content: [
            TextBox{
                layoutX:2;
                layoutY:2;
                height:20;
                width:120;
                text: bind currResult.toString();
         editable:false;
            },
         …
            Button{
                layoutX:2;
                layoutY:75;
                text:"+";
                width:55;
                height:20;
                onMouseClicked:function (e:MouseEvent){
                       if(funcDefined){
                          funcToRun();
                       }
                       funcToRun=function(){
                          currResult=firstElem+secondElem;
                          firstElem=currResult;
                          secondElem = 0;
                       }
                       funcDefined = true;

                }
            },  //... kolejne przyciski dla -, *, /, =
        ] //Content
    } //Scene
}

Każdy element jak widać jest dość mocno zbliżony do siebie w definicji – posiada koordynaty położenia, dane dotyczące wymiaru i tekst jaki ma się pojawiać.
Warte zauważenia jest słówko

1
bind

- określna ono wiązanie pomiędzy naszą zmienną currResult a polem tekstowym TextBox. Wykorzystanie bind
pozwala nam nie martwić się o aktualizowanie pola tekstowego gdy zmieni się wynik przechowywany w zmiennej currResult – bind
sprawia, że zmiana currResult jest automatycznie propagowana do elementu

1
text

TextBoxa. Drugą istotną rzeczą jest element

1
onMousceClicked

JavaFX pozwala definiować funkcje listenerów na dane zdarzenia (tu kliknięcie myszką na przycisk) w prosty sposób. W naszym przykładzie nadpisujemy zdefiniowaną wcześniej zmienną:

1
funcToRun

przez podanie nowego ciała metody. Zostaje dodać nam przyciski cyfr, przycisk CE i „=”, by kalkulator mógł zacząć działać

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
var currResult:Number = 0;
var firstElem:Number;
var secondElem:Number;
var funcToRun:function();
var funcDefined = true;

Stage {
    title: "JavaFX quick calculator!"
    scene: Scene {
        width: 130
        height: 150
        content: [
            TextBox{
                layoutX:2;
                layoutY:2;
                height:20;
                width:120;
                text: bind currResult.toString();
         editable:false;
            },
            Button{
                layoutX:2;
                layoutY:25;
                text:"1";
                width:20;
                height:20;
                onMouseClicked:function (e:MouseEvent){
                        if(not funcDefined){
                           firstElem=firstElem*10+1;
                           currResult=firstElem;
                        }else{
                           secondElem=secondElem*10+1;
                        }
                }
            },//... kolejne przyciski dla pozostałych cyfr
            Button{
                layoutX:2;
                layoutY:75;
                text:"+";
                width:55;
                height:20;
                onMouseClicked:function (e:MouseEvent){
                       if(funcDefined){
                          funcToRun();
                       }
                       funcToRun=function(){
                          currResult=firstElem+secondElem;
                          firstElem=currResult;
                          secondElem = 0;
                       }
                       funcDefined = true;

                }
},  //... kolejne przyciski dla -, *, /
Button{
                layoutX:2;
                layoutY:125;
                text:"CE";
                width:55;
                height:20;
                onMouseClicked:function (e:MouseEvent){
                       funcToRun=function(){}
                       funcDefined = false;
                       currResult = 0;
                       firstElem = 0;
                       secondElem = 0;
                }
            },
            Button{
                layoutX:67;
                layoutY:125;
                text:"=";
                width:55;
                height:20;
                onMouseClicked:function (e:MouseEvent){
                       if(funcDefined){
                          funcToRun();
                       }
                       funcToRun=function(){}
                       funcDefined = false;
                       firstElem = 0;
                       secondElem = 0;
                }
            }
        ] //Content
    } //Scene
}

Jak widać struktura przycisków z cyframi niczym nie różni się od przycisków funkcyjnych. W ramach eventu onMouseClicked ustawiamy parametry i ewentualnie wywołujemy funkcję zdefiniowaną w przycisku funkcyjnym. I to już cały kod – wystarczy uruchomić projekt klikając F6 w IDE. W efekcie dostajemy okienko w którym możemy przetestować nasz kalkulator

To tyle jeżeli chodzi o pierwsze wprawki w JavaFX.

Podsumowując – czego dziś dowiedziałem się o JavaFX?
• Jest językiem skryptowym który umożliwia, ale nie wymusza określanie typu zmiennych
• Struktura budowanego widoku opiera się na drzewie
• Najważniejsze elementy tego drzewa to Stage i Scene
• Pozwala tworzyć wiązania między zmiennymi a elementami GUI
• Umożliwia proste zarządzanie zdarzeniami (zwane eventami)
Język rozwija się dynamicznie – kolejne jego wersje wzbogacane są nie tylko o nowe komponenty lecz także o konstrukcje składniowe języka, a wszystko po to, by maksymalnie uprościć pisanie aplikacji z efektownym GUI.
Biorąc pod uwagę możliwość uruchamiania aplikacji JavaFX zarówno jako aplikacji desktopowych, serwerowych oraz mobilnych wróżę temu językowi dość jasną przyszłość.

Pozostaje zgłębiać dostępne klasy i mechanizmy, a gdy uda mi się stworzyć prostą aplikację web i uruchomić ją na serwerze nie omieszkam podzielić się tym doświadczeniem

Materiały dodatkowe:

]]> http://blog.atena.pl/wprawki-w-javafx/feed 2 Wstęp do GWT http://blog.atena.pl/wstep-do-gwt http://blog.atena.pl/wstep-do-gwt#comments Thu, 15 Oct 2009 12:11:38 +0000 Adam Andrzejewski http://blog.atena.pl/?p=493 Google Web Toolkit (GWT) to framework dostarczony przez Google do budowania aplikacji opartych na języku Java z bogatym front-endem AJAXowym. GWT pozwala pisać aplikacje w Javie dostarczając zestaw bibliotek do tworzenia dialogów, przycisków, formularzy itp. Następnie kompiluje je i optymalizuje tworząc JavaScript, który powinien działać prawidłowo na wszystkich najpopularniejszych przeglądarkach. Kompilacja obejmuje statyczne sprawdzanie typów, wyrzucanie niepotrzebnych parametrów z metod, pól z klas, in-linowaniem metod – wszystko by maksymalnie przyśpieszyć działanie.

Instalacja  GWT jest nadzwyczaj prosta. Wystarczy pobrać zzipowaną wersję z http://code.google.com/intl/pl/webtoolkit/download.html i rozpakować w dowolne miejsce. GWT integruje się z eclipse 3.3 i 3.4 poprzez pluginy (instalacja opisana na http://code.google.com/intl/pl/eclipse/docs/download.html).

Po poprawnej instalacji wtyczki na pasku narzędziowym eclipse dostajemy trzy nowe ikony   gtwicons. Pierwsza z nich tworzy nam nowy projekt GWT, druga kompiluje go, trzecia wreszcie służy do deplyowania projektów Google App Engine.

Podczas pierwszego projektu musimy wskazać miejsce, w którym jest rozpakowane GWT. Domyślnie stworzenie nowego projektu generuje przykładową aplikację. Dodatkowo z menu kontekstowego Run As w projekcie możemy wybrać Web Application i automatycznie ona uruchomiona w dostarczonej z biblioteką przeglądarce, w tzw „hosted mode”

runaswebapp

webappbrowser

Główne zalety GWT:

  • edit – refresh – view – używając „hosted browser” do testowania aplikacji, zmiany w kodzie javy nie wymagają dodatkowej kompilacji czy restartu, wystarczy odświeżyć stronę i zmiany będą widoczne;
  • możliwość debugowania aplikacji za pomocą eclipsowego debugera;
  • wsparcie dla JSON, XML,  a także możliwość łatwego wywoływania procedur po stronie serwera (serializowanie i deserializowanie obiektów, zachowanie jak przy RMI);
  • wsparcie dla JavaScript Native Interface przez co możliwe jest samodzielne dodawanie kodu JavaScript do tworzonej aplikacji;
  • wsparcie dla przycisku „wstecz” dla przeglądarek, przez modyfikację historii przeglądanych stron;
  • współpraca z JUnit, JProfiler;
  • praca w 2 trybach – hosted mode (jw z eclipse, po wykonaniu ant hosted, itp bez całkowitej zamiany kodu na javascript) i web mode (zamiana kodu na javascript);
  • pisanie interfejsów użytkownika analogicznie jak w Swing;
  • możliwość rozbudowania o własne moduły lub inne opensourcowe pluginy (np. wspierające drag and drop w aplikacji);
  • szerokie wsparcie dla internacjonalizacji;
  • możliwość własnego ostylowania elementów za pomocą CSS.

GWT posiada kilkanaście gotowych elementów do budowy dynamicznych efektownych interfejsów, np:

  • panele (DecoratorPanel, VerticalPanel, HorizontalPanel, FlowPanel,  AbsolutePanel, DockPanel)
  • widgety (CheckBox, RadioButton, Button, CustomButton, FileUpload, DatePicker, Hyperlink)
  • listy i menu (ListBox, SelectBox, Tree, MenuBar)
  • inputy (TextBox, RichTextArea)
  • okna (DialogBox, DecoratedPopupPanel)
  • tabele (FlexTable, Grid)
  • animacje (Animation)

Możliwości frameworku można obejrzeć na następujących stronach

Dodatkowo istnieje biblioteka GWT-ext która dostarcza zdecydowanie więcej gotowych komponentów. Demo tej biblioteki można zobaczyć na http://www.gwt-ext.com/demo/

GWT docelowo jest zamieniane całkowicie na JavaScript, dlatego choć pisze się go w Javie, są pewne istotne ograniczenia w wykorzystaniu standardowych bibliotek:

  • JavaScript obsługuje tylko 64bitową wersję liczby zmienno przecinkowej, dlatego też wszystkie typy numeryczne, jak byte, short, int, są w trybie web zamieniane na double, a to z kolei pozwala na zwiększenie dozwolonego zakresu liczbowego; typ long jest emulowany na podstawie dwóch 32bitowych intów, co może spowodować spadek wydajności poprzez konieczność emulacji;
  • try, catch, finally działają poprawnie, jednak Throwable.getStackTrace() nie jest dostępne;
  • niektóre wyjątki nie występują w trybie web, np. NullPointerException, StackOverflowException czy OutOfMemoryException;  zamiast nich rzucany jest wyjątek JavaScriptException; takie zachowanie wynika z niemożności zmapowania odpowiedniego wyjątku JavaScriptowego na wyjątek Javy;
  • multithreading – interpretery JavaScript są jednowątkowe, a zatem, choć GWT akceptuje „synchronized” to tak naprawdę nie robi ono nic specjalnego; inne wsparcie wielowątkowości jak wait() notify() nie jest dostępne;
  • wykorzystywanie mechanizmu refleksji – ponieważ GWT nastawione jest na maksymalną optymalizację i szybkość działania dynamiczne ładowanie bibliotek nie jest dostępne; jednocześnie dostępna jest metoda getClass().getName();
  • strictfp nie jest dozwolone w GWT

Oto pakiety które zawierają klasy dostępne w aplikacjach GWT (w niektórych przypadkach tylko niektóre fragmenty pakietu) to

W ramach utrzymania pewnych funkcjonalności GWT udostępnia klasy

  • com.google.gwt.i18n.client.DateTimeFormat: obsługuje część funkcjonalności java.util.DateTimeFormat.
  • com.google.gwt.i18n.client.NumberFormat: obsługuje część funkcjonalności java.util.NumberFormat.
  • com.google.gwt.user.client.rpc.IsSerializable : interfejs spełniający rolę java.io.Serializable wykorzystywana przez GWT do wywoływania zdalnych procedur (RPC)
  • com.google.gwt.user.client.Timer : uproszczona klasa java.util.Timer, (z powodu jednowątkowości)

GWT wydaje się być ciekawą alternatywą dla standardowej budowy interfejsów za pomocą elementów HTMLowych. W wolnych chwilach warto poeksperymentować i zobaczyć, co Google może wnieść do tematu budowania aplikacji internetowych.

Bibliografia:

- http://code.google.com/intl/pl/webtoolkit/

]]> http://blog.atena.pl/wstep-do-gwt/feed 2