dijit.Dialog.onMove()

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’:

[javascript]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();
});[/javascript]

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ł:

[javascript]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();
});[/javascript]

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:

[javascript]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!’);
});
});[/javascript]

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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *