sobota, 13 października 2007

Drag&Drop w GWT

Od czasu kiedy pojawiło się GWT minęło już sporo czasu, dlatego można go już oceniać nie tylko pod kątem tego czy zaproponowana przez Google koncepcja jest właśnie tą na którą czekają programiści webowi, którym dzierganie w JavaScriptcie po prostu nie odpowiada, ale również można oceniać go pod kątem popularności jaką zdobywa i przyznam, że przeglądając zasoby Internetu wyraźnie widać, że pozostawia konkurencję w tyle jak choćby framework YUI tworzony przez Yahoo.

Innym istotnym elementem, który wpływa w zasadniczy sposób na popularność danego frameworku jest wsparcie jakie zyskuje on w środowisku OpenSource'owym, głównie mam tutaj na myśli ilość darmowych rozszerzeń jaka jest tworzona przez to grono programistów.
Wczoraj przeszukując Internet natrafiłem na bardzo ciekawą bibliotekę gwt-dnd, która przy naprawdę niewielkim nakładzie pracy pozwoli na zbudowanie interfejsu użytkownika z elementami Drag&Drop.

Podstawową zaletą tej biblioteki jest to, iż możemy korzystać ze standarowych widgetów i paneli dostarczanych przez GWT - nie muszą one implementować specjalnych klas lub interfejsów, po prostu wystarczy użyć istniejące widgety i panele. Nie będę się koncentrował w dalszym opisie nad tym jakie funkcjonalności dostarcza ta biblioteka, natomiast zaprezentuję fragment kodu, który zaprezentuje prostotę użycia tego rozszerzenia.

W pierwszym kroku tworzymy główny panel poza który nie będą mogły wyjść przeciagane elementy: Następnie wewnątrz tego panelu tworzymy kolejny panel tym razem będzie on określał obszar poza którym nie będzie można upuścić widgetu (w naszym przypadku będzie to prostu label): Kolejny krok to stworzenie tzw. DragControllera, w którym umieszczamy panel poza który nie będzie można przeciągać widgetów (co nie znaczy, że będzie można w nim go upuszczać): Teraz dodajemy analogicznie tzw. DropController, w którym umieszczamy panel w obrębie którego mogą zostać upuszczone widgety: Rejestrujemy DropController w DragControllerze: Tworzymy etykiete, którą będziemy przeciągać i upuszczać w obrębie targetPanel: Za pośrednictwem DragControllera robimy z etykiety widget, który można przeciągać: Siła tej biblioteki tkwi w prostocie jej użycia, w 12 liniach kodu można zrobić naprawdę dużo zamieszania :)

Źródła z których korzystałem i wszystkim polecam się z nimi zapoznać:
http://code.google.com/p/gwt-dnd/
http://code.google.com/p/gwt-dnd/wiki/GettingStarted

Dla zainteresowanych zamieszczam kody źródłowe.

Kod źródłowy pliku MyApplication.gwt.xml: Kod źródłowy pliku MyApplication.java:

2 komentarze:

Krzysztof pisze...

Mógłbyś dodać tutaj stworzony plik ułatwiłoby to percepcję tekstu.

Łukasz Pawlik pisze...

Zgodnie z Twoją sugestią zamieściłem niezbędne źródła.