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:

Komentarze

Unknown pisze…
Mógłbyś dodać tutaj stworzony plik ułatwiłoby to percepcję tekstu.
5 lipca 2008 23:17
Łukasz Pawlik pisze…
Zgodnie z Twoją sugestią zamieściłem niezbędne źródła.
6 lipca 2008 16:26
Prześlij komentarz

Popularne posty z tego bloga

Java ESL program for connecting to the FreeSWITCH

-
Next simple Java program using Event Socket interface to control FreeSWITCH. First you should read: Mod event socket on wiki freeswitch Java ESL Client on wiki freeswitch Next you should not forget to change event_socket.conf.xml (to allow connections from any host on the network): Now we can write simple java ESL program for connecting to the FreeSWITCH. MyEslEventListener.java package myeslevent; import java.util.Map; import java.util.Set; import org.freeswitch.esl.client.IEslEventListener; import org.freeswitch.esl.client.transport.event.EslEvent; import org.slf4j.Logger; import org.slf4j.LoggerFactory; public class MyEslEventListener implements IEslEventListener { private final Logger log = LoggerFactory.getLogger(this.getClass()); @Override public void eventReceived(EslEvent event) { log.info("eventReceived [{}]\n[{}]\n", event, getEventToLog(event)); } @Override public void backgroundJobResultReceived(EslEve
Czytaj więcej

AngularJS example MotoAds more advanced than the tutorial on angularjs.org

-
Obraz
I have just been learning AngularJS and decided to build demo application that cover more techniques than the tutorial on angularjs.org . This application is only demo so it do not have complete server side, some features have the todos and there is not any test. This demo application is some kind of automotive adverts portal, so I called it MotoAds. It has two main features: List of adverts – includes an advanced filtering and sorting. Add advert – a form with some client side field validations. MotoAds application looks like this: Application folders tree: Root file index.html included external resource: bootstrap.css (2.3.2) angular.js, angular-resource.js (1.0.8) ui-bootstrap-tpls-0.6.0.js (0.6.0) and internal resource: app.css app.js services.js controllers.js Bootstrap angular application, add navigation and route templates In index.html we auto-bootstrap the angular application by defining directive ng-app : In app.js we define new
Czytaj więcej

Java program for connecting to the FreeSWITCH XML-RPC

-
I would like to show simple Java program which use XML-RPC interface to do some freeswitch commands. We should on freeswitch console load mod_xml_rpc: Worth checking out if it works, in web browser type: http://fshost8080/webapi/help If you see "FreeSWITCH help" it works. Next we download Apache XML-RPC library. Now we create Java program (using Apache XML-RPC): package fstest1; import java.net.URL; import java.util.Scanner; import org.apache.xmlrpc.client.XmlRpcClient; import org.apache.xmlrpc.client.XmlRpcClientConfigImpl; public class FsTest1 { public static void main(String[] args) { System.out.println("------ hello freeswitch -------\n"); XmlRpcClientConfigImpl config = new XmlRpcClientConfigImpl(); XmlRpcClient client = new XmlRpcClient(); try { config.setServerURL(new URL("http://fshost:8080/RPC2")); config.setBasicUserName("freeswitch"); config.setBasicPassword("works");
Czytaj więcej