Blog webdeveloperski Patryk yarpo Jar

dijit.Dialog.onMove()

Autor wiadomości Marzec 19, 2012

Dojo posiada pokaźny zbiór widgetów (dijit - Dojo widget). W tym wpisie zajmiemy się kontrolką `dijit.Dialog' oraz (nieistniejącym domyślnie) zdarzeniem `onMove'. Owe zdarzenie zostanie utworzone z wykorzystaniem istniejących mechanizmów dojo.

Proste okienko

Na początek pokażę kod prostego okienka `dijit.Dialog':

dojo.require("dijit.Dialog");
dojo.ready(function(){
    var dialog = new dijit.Dialog({
        title: "Okienko",
        style: "width: 200px; height: 200px;",
        content : "Witaj świecie"
    });
    dialog.startup();
    dialog.show();
});
dojo.require("dijit.Dialog");
dojo.ready(function(){
	var dialog = new dijit.Dialog({
		title: "Okienko",
		style: "width: 200px; height: 200px;",
		content : "Witaj świecie"
	});
	dialog.startup();
	dialog.show();
});

demo online

Do konstruktora przekazałem tylko kilka parametrów. Aby zapoznać się z pozostałymi zapraszam do dokumentacji*. W kodzie zamieszczonym powyżej oczywiście nie ma jeszcze obsługi zdarzenia `onMove'. Aby je dodać wykorzystam mechanizm `dojo.subscribe'.

Wykorzystanie `dojo.subscribe' do przechwycenia przesunięcia

Skoro mamy okno, przechwyćmy moment, w którym zostanie przesunięte. Kontrolka okienka publikuje informacje o swoim przemieszczeniu w kanale '/dnd/move/stop'. Wystarczy zatem zasubskrybować ten kanał:

dojo.require("dijit.Dialog");
dojo.ready(function()
{
    var dialog = new dijit.Dialog({
        title: "Okienko",
        style: "width: 200px; height: 200px;",
        content : "Witaj świecie"
    });
    dojo.subscribe('/dnd/move/stop', function(mover)
    {
        alert('Poruszyłeś mnie!');
    });
    dialog.startup();
    dialog.show();
});

demo online

OK, już mamy prymitywną obsługę "zdarzenia" `onMove'. Jakie są główne problemy:

  • na ten sam kanał publikują wszystkie wigety, a więc nie mamy obsługi konkretnie `onMove' tego okienka,
  • nie jest to zbyt piękne rozwiązanie, raczej proteza.

Dodanie metody `onMove'

Aby ulepszyć poprzednie rozwiązanie musimy po pierwsze rozpoznawać konkretne okno. Po drugie musimy po rozpoznaniu wywołać metodę `onMove'. Kod jest dużo prostszy niż by się to wydawało:

dojo.require("dijit.Dialog");
dojo.ready(function()
{
    function createDijitDialogWithOnMoveEvent(title, content)
    {
        var dialog = new dijit.Dialog({
            title: title,
            style: "width: 200px; height: 200px;",
            content : content,
            onMove : function() {}
        });
       dojo.subscribe('/dnd/move/stop', function(mover)
       {
           // rozpoznanie okna
           if (mover.node.id === dialog.id)
           {
               dialog.onMove();
           }
       });
       dialog.startup();
       dialog.show();

       return dialog;
    }
    var x = createDijitDialogWithOnMoveEvent("dijit.Dialog.onMove", "Witaj świecie!");
    dojo.connect(x, 'onMove', function()
    {
        alert('poruszyłeś mnie!');
    });
});

demo online

Każdy widget dojo posiada swój unikalny id. Pozwala to podczas odczytywania z kanału sprawdzić, czy mamy do czynienia z tym oknem, o które aktualnie nam chodzi.

Następnie przypisanie odpowiedniej funkcji obsługi zdarzenia jest już formalnością. Opis mechanizmy dojo.connect/disconnect można znaleźć w jednym z wcześniejszych wpisów:

*A niech będzie - tu się wyżyję. Dojo Toolkit do wersji 1.6 posiadał bardzo przyjemną i ułatwiającą życie dokumentację (linkowany przykład `dijit.Menu') w postaci opis-przykład-kod do skopiowania. W 1.7 stwierdzono chyba, że życie programisty nie może być takie piękne i zdecydowanie zepsuto IMVHO bardzo przydatne zasoby - dla kontrastu ten sam dijit, dokumentacja w wersji 1.7 - spróbuj uruchomić przykład lokalnie.

EDIT (2013-02-06): W wersji 1.8 naprawiono wyżej opisane błędy.

Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.