publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
4 skomentuj »

TAGI: dojo , toolkit , programowanie

2010-05-17 09:51  |  Paweł Wolniewicz

Dojo Toolkit, czyli budujemy atrakcyjny interfejs w JavaScript. Część II: tworzymy aplikację

Dojo Toolkit, czyli budujemy atrakcyjny interfejs w JavaScript. Część II: tworzymy aplikację

W pierwszym artykule prezentującym bibliotekę Dojo Toolkit poznaliśmy kilka spośród podstawowych funkcji, techniki operowania na znacznikach wewnątrz strony WWW, mechanizm zdarzeń, a także zasady korzystania z widgetów. Tym razem przygotujemy zręby bardziej rozbudowanego skryptu, który może stanowić zaczątek samodzielnej aplikacji internetowej. Wykorzystamy wyłącznie bibliotekę Dojo, a przede wszystkim funkcje graficzne oraz związane z pobieraniem danych.

Głównym zadaniem przygotowanego przez nas skryptu będzie wyświetlanie diagramu przypominającego mapy umysłu lub diagramy stosowane w mapowaniu myśli. Na podstawie danych przechowywanych w plikach tekstowych prosta aplikacja internetowa wygeneruje schemat prezentujący relację pomiędzy elementami o dowolnym charakterze, opisanymi zwięzłymi etykietami. Przykładowe diagramy tego typu można obejrzeć na stronach Wikipedii (tutaj oraz tutaj).

Przedstawiony w tym artykule sposób użycia Dojo nie jest bynajmniej nowatorski. Istnieją już serwisy pozwalające na edycję diagramów oraz schematów, wykorzystujące przy tym testowaną przez nas bibliotekę.

Jednym z takich projektów jest Mind42 - internetowe narzędzie do tworzenia map umysłu. Nasze narzędzie będzie o wiele bardziej prymitywne - pozwoli tylko na wygenerowanie grafiki na podstawie danych tekstowych - ale tak właśnie może wyglądać pierwszy krok w kierunku większej aplikacji przygotowanej z użyciem Dojo.

Pobieramy dane

Aby wyświetlić diagram, potrzebne nam będą dane źródłowe zawierające informacje o poszczególnych elementach, ich powiązaniach, a także nazwach. Możemy w tym celu wykorzystać chociażby dokumenty XML zapisywane przez popularną aplikację FreeMind.

Alternatywę stanowi stworzenie własnego formatu, zawierającego dodatkowe informacje - na przykład dotyczące bezwzględnego położenia na mapie. Plik tego typu może wyglądać następująco.

 

{ identifier: 'id',

items: [

{ id: '0', parent: '-1', x: '100', y: '100', width: '60', height:'50', title: 'Title of 0' },

{ id: '1', parent: '0', x: '500', y: '50', width: '60', height:'50', title: 'Title of 1' },

{ id: '2', parent: '0', x: '300', y: '200', width: '60', height:'50', title: 'Title of 2' },

{ id: '3', parent: '0', x: '150', y: '300', width: '60', height:'50', title: 'Title of 3' },

{ id: '4', parent: '1', x: '400', y: '250', width: '60', height:'50', title: 'Title of 4' },

{ id: '5', parent: '2', x: '250', y: '350', width: '60', height:'50', title: 'Title of 5' },

]}

 

Dane te wykorzystamy w dalszej pracy, zapisując je w dokumencie o nazwie store.json. Zwróćmy uwagę na strukturę pliku. Zawiera on informacje o sześciu elementach. Każdy z nich posiada unikalny numer (id), identyfikator rodzica (parent), cztery pola określające położenie na wirtualnej mapie, a także nazwę (title). Informacje te posłużą nam do wykreślenia diagramu.

Za odczytanie zawartości pliku odpowiada następujący fragment skryptu.

 

dojo.require("dojo.data.ItemFileReadStore");

var store = new dojo.data.ItemFileReadStore({ url: "store.json" });

function gotList(items, request) {

var i;

for (i = 0; i < items.length; i++)

{

var item = items[i];

var parent_node = store.getValue(item, "parent");

}

}

var gotError = function(error, request){

alert("Nie odczytano danych. " + error);

}

store.fetch({

onComplete: gotList,

onError: gotError

});

 

Pierwsza linijka określa źródło danych, ostatnie wskazują naomiast funkcje wywoływane w celu przetworzenia lub przeszukania informacji, a także w celu powiadomienia użytkownika o pojawiających się problemach.

W podanym przykładzie brakuje wywołań przeszukujących dokument - dane są odczytywane element po elemencie. Bardziej skomplikowane funkcje nie są nam potrzebne, gdyż wszystkie obiekty posiadają własny, unikatowy identyfikator odpowiadający położeniu wewnątrz pliku.

Odczytywanie linijka po linijce dokumentu zawierającego potrzebne informacje jest realizowane za pomocą pętli for. Za pobranie wartości konkretnego pola odpowiada natomiast linijka var parent_node = store.getValue(item, "parent"), która w tym przypadku sprawdza dane rodzica wybranego elementu.

Odczytywanie zawartości pliku linijka po linijce może być wykonane także za pomocą nieco innego kodu.

 

dojo.forEach(items, function(i){

var label = store.getValue(i, "title");

});

 

W tym wypadku pobierane są tytuły elementów. Efekt jest taki sam, jak w poprzednim przypadku. Dojo Toolkit w wielu sytuacjach pozwala nam na wykonanie konkretnego zadania na co najmniej dwa sposoby.

Parsowanie plików tekstowych również wykonywane jest kilkoma metodami. Jeśli zechcemy generować diagramy na podstawie plików XML zapisywanych przez program FreeMind, to w skrypcie umieścimy następujące wywołanie:

 

var store = new dojox.data.XmlStore({url: "map.xml", rootItem: "node"});

 

Zawartość tak zadeklarowanego pliku przeglądamy w identyczny sposób, jak zaprezentowany we wcześniejszym przykładzie. Dostępna jest także opcja przeszukiwania dokumentu.

 

var request = store.fetch({query: {parent:"1"}, onComplete: nodes});

 

Lista wyników zostanie w tym przypadku przetworzona z użyciem funkcji nodes().

«poprzednia 1 2 3 następna »

publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
4 skomentuj »

Komentarze

  • scager

    #1 scager 2010-05-19 10:56:14 0

    > W pierwszym artykule prezentującym

    > bibliotekę Dojo Toolkit poznaliśmy kilka

    > spośród

    podstawowych funkcji (...)

    a gdzie znajde ten pierwszy artykul ? przeszukalem caly Wasz serwis i niestety nie trafilem na niego :(

    z gory dziekuje za info

    IP: 149.156.12.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (.NET CLR 3.5.30729)

  • dAREuS

    #2 dAREuS® 2010-05-19 11:21:16 0

    Tutaj: http://webhosting.pl/Dojo.Toolkit.czyli.budujemy.atrakcyjny.interfejs.w.JavaScript.Czesc.I.wprowadzenie

    IP: 188.121.11.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1064 Safari/532.5

  • itposthuman

    #3 Posthuman® 2010-05-24 17:44:29 0



    Bardzo się cieszę, że Pan Paweł pokazuje jak wykorzystać Dojo. Zwłaszcza dla żółtodziobów tego frameworka jak Ja.

    Mam tylko jedną uwagę. Prosiłbym aby tekst nie był tak chaotyczny.

    To jak na JS wydawałoby się prosta konstrukcja skryptu a jednak nie wiem co, gdzie w którym momencie ma porwanie funkcjonować.

    Proszę o dodanie poprawnie działającego skryptu w całości np. na końcu artykułu. Tak byłoby przejrzyściej. 

    Lubię patrzeć całościowo na funkcję, natomiast artykuł może stanowić komentarze objaśniające do poszczególne jej części.

    IP: 83.25.119.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1064 Safari/532.5

  • Paweł Wolniewicz

    #4 Paweł Wolniewicz 2010-05-25 15:00:58 0

    Załączam więc kod. Pełny plik HTML może wyglądać tak, jak na listingu poniżej. Mam nadzieję, że wyświetli się poprawnie.

    Dodatkowo trzeba zapisać plik z danymi (w skrypcie pojawia się pod nazwą store.json). Cała treść pliku jest zamieszczona w artykule, w podrozdziale "Pobieramy dane", na listingu zaczynającym się od { identifier: 'id'

    A oto kod:

    Dojo

    dojo.require("dojox.gfx");

    dojo.require("dojo.data.ItemFileReadStore");

    dojo.addOnLoad(function() {

    var node = dojo.byId("surface");

    var surface = dojox.gfx.createSurface(node, 600, 600);

    function drawnode (surface,x,y,height,width)

    {

    surface.createRect({

    x : x,

    y : y,

    height  : height,

    width  : width

    })

    .setFill("yellow")

    ;

    }

    function drawline (surface,x,y,xend,yend)

    {

    surface.createLine({

    x1 : x,

    y1 : y,

    x2  : xend,

    y2  : yend

    })

    .setStroke("black");

    }

    var store = new dojo.data.ItemFileReadStore({ url: "store.json" });

    function gotList(items, request) {

    var i;

    for (i = 0; i = 0)

    {

    var tempor = items;

    var start_x = parseInt(store.getValue(tempor,"x"))+(parseInt(store.getValue(tempor,"width"))/2);

    var start_y = parseInt(store.getValue(tempor,"y"))+(parseInt(store.getValue(tempor,"height"))/2);

    drawline(surface, start_x, start_y, koniec_x, koniec_y);

    }

    }

    dojo.forEach(items, function(i){

    drawnode(surface,store.getValue(i, "x"), store.getValue(i, "y"), store.getValue(i, "height"), store.getValue(i, "width"));

    });

    }

    var gotError = function(error, request){

        alert("The request to the store failed. " +  error);

    }

    store.fetch({

        onComplete: gotList,

        onError: gotError

    });

    });

    IP: 150.254.117.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.8.1.6) Gecko/20070730 SUSE/2.0.0.6-25 Firefox/2.0.0.6

Uwaga! Możesz zarejestrować się w serwisie i w ten sposób zarezerwować swój nick oraz ominąć konieczność ciągłego odczytywania wyrazów.

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.

Polecane książki

Czytaj Webhosting

Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.

Zarejestruj domenę

Sprawdź dostępność swojej domeny:

.pl: 0 zł   .com: 19.90 zł
.com.pl: 0 zł   .eu: 19.90 zł