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 »
Komentarze
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.
Popularne
Nazwa padła ofiarą szantażystów, inni polscy hosterzy też zagrożeni?
22
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Premiera Diablo 3 wzbudziła dyskusję na temat gier, które zawsze chcą być online
19
Nowy problem z Windows 8: bootuje się za szybko
10
Amerykańscy rodzice straszeni „e-narkotykami” dostępnymi w Sieci
21
Anonymous upubliczniają 1,7 GB danych wykradzionych Departamentowi Sprawiedliwości USA
11
Blueseed: libertariańska sztuczna wyspa przyciągnęła już ponad sto startupów z całego świata
8
Rewolucja w Firefoksie, nowa łatka czterokrotnie ograniczyła zużycie pamięci
20
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
CVDazzle: makijaż jest w stanie pokonać automatyczne systemy ulicznego monitoringu
3
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Ubuntu 12.04 LTS już dostępny: stabilna dystrybucja na następne pięć lat?
28
Zostań webmasterem polskiego rządu, zarobisz na komfortowe życie dla siebie i swojej rodziny
33
Społeczność
Dave Smith Jestem Pastor Dave Smith prywatny pożyczkodawca pieniądze, z czego ponad...
marcusm Fajna reklama produktu za 500 zł
rza a to starsze aplikacje nie będą działać i kompilacja pod Windows SDK 7.1...
Krzaczor @Jakub Szymański: Możesz zalinkować do opisów jakichś polskich przypadków...
Krzaczor Ale oprogramowanie skompilowane dla Windows 7 ruszy przecież na ósemce...
ankaa Ja to czytam "plejsnow", a nie placek nał :) Nie wiem, co macie z tym...
veramird Są jeszcze studenci i msdaa co pozwoli dużej grupie używać pisać dalej za...
- Najdmen.pl: Konta www z wyłączonym licznikiem transferu od IONIC.pl (1)
- 2BE.PL: [Oferta] Promocja jak złoto w 2BE.PL (1)
- gardius: Dobra hurtownia sportowa (1)
- gardius: Tanie książki gdzie warto kupować? (1)
- Najdmen.pl: PROMOCJA, 500 DOMEN .EU ZA 1 PLN NETTO ! (1)
- VMLine: [Oferta] Serwery VPS Xen-HVM/OpenVZ z darmową administracją (2)
- Marek: Generowanie PDFa (2)
Polecane książki
Praca
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ł |









#1 scager 2010-05-19 10:56:14 0
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)
#2 dAREuS® 2010-05-19 11:21:16 0
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
#3 Posthuman® 2010-05-24 17:44:29 0
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
#4 Paweł Wolniewicz 2010-05-25 15:00:58 0
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