2009.07 Ext JS Tworzenie własnych ...
|
2009.07 Ext JS Tworzenie własnych komponentów [Bazy Danych], Informatyka, ►Artykuły, SDJ, Bazy Danych
[ Pobierz całość w formacie PDF ] Bazy danych Ext JS Tworzenie własnych komponentów Rozwój Internetu, jak również rosnące wymagania użytkowników przyczyniają się do tworzenia systemów internetowych, które coraz bardziej przypominają aplikacje desktopowe. Staje się to możliwe między innymi dzięki rozwojowi framework’ów Javascript. Przykładem takiego framework’a jest Ext JS. Dowiesz się: • Jak tworzyć komponenty w Ext JS; • Jak dostarczać asynchronicznie dane z serwera. Powinieneś znać: • Podstawy Ext JS; • Podstawy HTML; • Podstawy Javascript. nich korzysta. Proces implementacji będzie przebiegał następująco: • Pierwszym krokiem będzie stworzenie źró- dła danych, którego zadaniem będzie dostar- czanie tychże danych do naszego kompo- nentu. Źródło danych w naszym przypadku będzie czerpało informacje asynchronicznie z serwera. • Kolejnym krokiem będzie stworzenie kom- ponentu jako zbioru kontrolek i obsłużenie odpowiednich zdarzeń. W naszym przypad- ku będzie on dziedziczył z Ext.Panel, dzięki czemu będzie posiadał szereg przydatnych opcji bez konieczności dodatkowego pisania kodu. • Ostatnim krokiem będzie podpięcie źró- dła danych do komponentu. To zadanie jest wbrew pozorom bardzo łatwym krokiem i zajmuje najmniej czasu. Poziom trudności liwia stworzenie skryptu z tymi elementa- mi, których naprawdę będziemy potrzebo- wać. Więc jeśli będziemy używać tylko kil- ku, nie ma sensu dołączać ogromnego skryp- tu, skoro możemy mieć odchudzoną wersję, która będzie uruchamiać się i działać szyb- ciej i wydajniej. Musimy wspomnieć o kwestiach licencyj- nych, a mianowicie Ext JS jest udostępniany w oparciu o dwa rodzaje licencji: musimy się przede wszystkim za- opatrzyć w źródła. Najnowszą wer- sją jest wersja 2.2, którą można ściągnąć ze strony . Po ściągnięciu i roz- pakowaniu zauważymy mnóstwo zasobów, są tam między innymi skrypty zarówno te skompilowane, jak i te, które powinniśmy używać do debugowania, źródła, przykłady, dokumentacja. Widząc tyle rzeczy naraz, możemy mieć mały mętlik w głowie i może być nam ciężko rozpocząć tworzenie aplika- cji. A tak naprawdę wiąże się to z wykona- niem kilku prostych kroków: • Open Source – dla niekomercyjnych pro- jektów; • Commercial – dla komercyjnych. Programistów na pewno ucieszy fakt, że Ext JS jest obecnie w pełni kompatybilny z nastę- pującymi przeglądarkami: Podstawowym elementem źródeł danych jest Record, jak nietrudno się domyśleć przechowuje on informacje o konkretnym elemencie, zarów- no jego pola, jak i wartości. Nowy rekord powi- nien być tworzony w następujący sposób: • Internet Explorer 6+; • FireFox 1.5+ (PC, Mac); • Safari 3+; • Opera 9+ (PC, Mac). • przekopiowanie zawartości folderu Resour- ces do naszego folderu roboczego; • przekopiowanie plików ext-base.js oraz ext- all.js , a następnie dodanie w sekcji HEAD: • <link rel="stylesheet" type="text/css" href="ext-all.css" /> – główny plik ze stylami; • <script type="text/javascript" src="ext-base.js"></script>; • <script type="text/javascript" src="ext-all.js"></script>; • stworzenie definicji obiektu za pomocą Ext.data.Record.create . Definicja ta posiada m.in. następujące pola: • name – nazwa referencji do pola; • mapping (opcjonalne) – specyfikuje, pod jakim polem obiektu szukać wartości (lub jakiego wyrażenia użyć); • type (opcjonalne) – specyfikuje typ pola do wyświetlania, możliwe wartości to: auto, string, int, float, boolean, date; • defaultValue – domyślna wartość. • stworzenie konkretnego obiektu, używając definicji. Dzięki temu nie musimy pisać kilku rodzajów skryptów, aby nasza aplikacja działała w każ- dej przeglądarce. W dalszej części artykułu będę się starał po- kazać, jak w łatwy sposób można tworzyć wła- sne komponenty korzystające ze źródeł da- nych oraz opiszę dodatkowe funkcje, takie jak współpraca z Gears, AIR i AJAX. Aby jed- nak zacząć, musimy poznać kilka ważnych ele- mentów. Należą do nich obiekty typu Record oraz Store (łącznie z gotowymi implementa- cjami). Gdy już opanujemy ich obsługę, bę- dziemy mogli stworzyć komponent, który z opcjonalne: dodanie linku do pliku CSS z sza- blonem wyglądu. Ciekawą rzeczą jest specjalnie przygoto- wany builder na stronie Ext JS, który umoż- Przykład możemy zobaczyć na Listingu 1. Ko- lejną rzeczą, na którą powinniśmy zwrócić uwa- gę, jest Store, czyli kolekcja rekordów. Pozwala on 40 07/2009 A by zacząć naszą przygodę z Ext JS, Ext JS – tworzenie własnych komponentów na dostarczanie danych do komponentów, np. GridPanel. Store posiada dwie możliwości łado- wania danych: • JsonStore – ułatwia ładowanie danych z ser- wera; • GroupingStore – umożliwia grupowanie po wybranym polu. pics":[{"post_id":"id postu","topic_title":"tema- t","topic_id":"id tematu","author":"autor","post_ time":"czas","post_text":"zawartość","forum_ti- tle":"Tytuł forum","forumid":"id forum","reply_ count":"liczba odpowiedzi"},{..}]} Mając tak zdefiniowany Store, możemy go wy- świetlić np. w GridPanel, ustawiając właściwość store. Kolejnym zagadnieniem będzie tworzenie komponentów. Na prostym przykładzie będę • ręczne dostarczenie kolekcji elementów; • automatyczne ładowanie kolekcji z serwera. Przykład załadowania Store z serwera można zo- baczyć na Listingu 2. Dane w tym przykładzie są czerpane z forum Ext i dostarczane w formacie: {"totalCount":"liczba wszystkich wpisów","to- Do najważniejszych opcji konfiguracyjnych należą: • autoLoad – flaga mówiąca, czy dane mają być załadowane zaraz po stworzeniu Store; • data – kolekcja elementów typu Record, która może być podana jako lista statyczna; • proxy – obiekt, za pomocą którego będzie- my dostawać się do źródła danych, np. ser- wera (HttpProxy, MemoryProxy, ScriptTag- Proxy); • reader – obiekt służący do czytania listy ele- mentów (ArrayReader, JsonReader, XmlRe- ader); • remoteSort – domyślnie sortowanie odbywa się po stronie klienta, lecz jeśli chcemy, mo- żemy to robić po stronie serwera. Wtedy do- datkowo będą przesyłane dwa parametry: sort , w którym podana będzie nazwa kolum- ny, po której sortować, oraz dir , który może przyjmować dwie wartości: ASC lub DESC Rysunek 1. Gotowy komponent Listing 1. Utworzenie deinicji obiektu Re cord var DefRecord = Ext . data . Record . create ([ { name : 'title' , mapping : 'topic_title' } , { name : 'author' , mapping : 'username' } , { name : 'totalPosts' , mapping : 'topic_replies' , type : 'int' } , { name : 'lastPost' , mapping : 'post_time' , type : 'date' } , { name : 'lastPoster' , mapping : 'user2' } , { name : 'excerpt' , mapping : 'post_text' } ]); var myNewRecord = new TopicRecord ({ topic_title : 'Do my job please' , username : 'noobie' , topic_replies : 1 , post_time : new Date () , user2 : 'Animal' , post_text : 'No way dude!' }); Często będziemy również używać następują- cych metod: • Store – tworzy nowy Store; • add – dodaje rekord(y) do istniejącej kolek- cji; • addSorted – dodaje rekord i automatycznie ustawia go w odpowiednim miejscu w zależ- ności od rodzaju sortowania; • filter – filtruje listę elementów po wybra- nym polu; • filterBy – filtruje listę elementów zdefinio- waną przez użytkownika funkcją; • getAt – pobiera rekord o podanym indeksie; • getById – pobiera rekord o podanym id; • getCount – pobiera liczbę rekordów; • getTotalCount – podaje liczbę rekordów zwróconą przez serwer; • indexOf – podaje indeks podanego rekordu; • indexOfId – podaje indeks rekordu o poda- nym id; • insert – dodaje rekord(y) do kolekcji pod po- danym indeksem; • load – ładuje rekordy za pomocą Proxy i Re- adera; • loadData – ładuje rekordy z podanej kolekcji; • remove – usuwa element; • removeAll – usuwa wszystkie elementy; • sort – sortuje kolekcję. Listing 2. Przykład załadowania Store var store = new Ext . data . Store ({ remoteSort : true , proxy : new Ext . data . ScriptTagProxy ({ url : }) , reader : new Ext . data . JsonReader ({ root : 'topics' , totalProperty : 'totalCount' , id : 'post_id' } , [ { name : 'postId' , mapping : 'post_id' } , { name : 'title' , mapping : 'topic_title' } , { name : 'topicId' , mapping : 'topic_id' } , { name : 'author' , mapping : 'author' } , { name : 'lastPost' , mapping : 'post_time' , type : 'date' , dateFormat : 'timestamp' } , { name : 'excerpt' , mapping : 'post_text' } ]) }); this . store . setDefaultSort ( 'lastpost' , 'desc' ); Ext posiada również specjalnie przygotowane i skonfigurowane implementacje Store: • SimpleStore – ułatwia ładowanie danych z list; www.sdjournal.org 41 Bazy danych chciał omówić kolejne kroki tego procesu. Wyni- kiem naszej pracy będzie plik z kodem Javascript z definicją komponentu. Komponent ten będzie się składał z kalendarza oraz obiektu grid. Po wy- braniu daty z kalendarza w gridzie wyświetlą się przefiltrowane dane, zależne od wybranej daty. Proces tworzenia komponentu będzie się składał z następujących kroków: wa implementacja Viewer.ashx dostępna jest w Listingu 7; • stworzenie Store, który sczyta dane z serwe- ra oraz GridPanel, który te dane wyświetli, przykład możemy zobaczyć na Listingu 3; • dodanie kalendarza; • dodanie kontrolki grid; • obsłużenie zdarzenia zmiany daty; • zgrupowanie kodu w jeden spójny kompo- nent. stronie klienta). Są to Google Gears oraz AIR. Po- zwalają one na tworzenie dość złożonych baz da- nych na dysku klienta oraz uruchamianie apli- kacji webowych jako desktopowych. Do zalet te- go rozwiązania możemy zaliczyć fakt, że nasz serwer nie będzie obciążony operacjami bazo- danowymi; wszystko na siebie weźmie kompu- ter klienta. Ciekawe jest również, że komputer nie będzie musiał być online , aby aplikacja działa- ła. Wady są oczywiste, weźmy np. synchronizację na wielu komputerach. Jeśli dana osoba korzysta z kilku komputerów, to na każdym będzie miała osobną bazę. Warto dodać, że Ext JS posiada sze- reg komponentów gotowych do pracy z AIR bez konieczności przeróbek czy pisania dodatkowego kodu. Zatem jeśli po głębszym zastanowieniu doj- dziemy do wniosku, że nasz projekt może działać tylko po stronie klienta, to warto się tymi kompo- nentami zainteresować. Ostatnią rzeczą, o której chciałbym wspo- mnieć, jest obsługa AJAX. W Ext JS została przy- gotowana specjalna klasa, mająca na celu ułatwie- nie współpracy z AJAX. Często będziemy uży- wać następujących właściwości: • przygotowanie mechanizmu zwracające- go dane z serwera w odpowiednim forma- cie. Wybrany przeze mnie format to: {"licz- ba":"liczba elementów","elementy":[{"id": "id","nazwa":"nazwa elementu","data":"licz- ba sekund, która upłynęła od 1 stycznia 1970 roku do daty elementu"},{..}]}. Dane w formacie JSON będą zwracane w moim przypadku przez Viewer.ashx. Przykłado- Gotowy kod możemy zobaczyć na Listingu 4, a rezultat widoczny na Rysunku 1. Warto zapoznać się z przykładem tasks w ka- talogu examples , który jest dostępny po ściągnię- ciu ze strony Ext JS. Pokazano tam dwie meto- dy dostępu do danych bez konieczności łączenia się z serwerem (całość jest przechowywana po Gears Jest to dodatek do przeglądarek Internet Explorer oraz Firefox stworzony przez irmę Google, pozwalający przede wszystkim na tworzenie bazy danych na dysku użytkownika. Z poziomu przeglądarki z bazą danych można komunikować się za pomocą języka Javascript. AIR Jest to środowisko wykonawcze stworzone przez irmę Adobe, przeznaczone dla wielu syste- mów. Umożliwia programistom wykorzystywanie technologii internetowych, takich jak HTML, AJAX, Flash, do tworzenia aplikacji internetowych przeznaczonych do wdrażania na kompute- rach stacjonarnych. • defaultHeaders – headery dołączane do każ- dego request; • extraParams – dodatkowe parametry dołą- czane do każdego request; • method – używana metoda HTTP, domyśl- nie POST; • timeout – liczony w milisekundach, domyśl- nie 30000. Listing 3. Stworzenie Store i GridPanel czytającego dane komponentu var store = new Ext . data . Store ({ autoLoad : true , proxy : new Ext . data . HttpProxy ({ url : 'Viewer.ashx' }) , reader : new Ext . data . JsonReader ({ root : 'elementy' , totalProperty : 'liczba' , id : 'id' } , [ { name : 'Id' , mapping : 'id' } , { name : 'Name' , mapping : 'nazwa' } , { name : 'ElementDate' , mapping : 'data' , type : 'date' , dateFormat : 'timestamp' } Do najważniejszych metod należą: • serializeForm – serializuje podany formu- larz, tworzy parametry, które można prze- słać do serwera; • request – główna metoda, pozwala na wyko- nywanie asynchronicznego request do ser- wera, jak również na asynchroniczne submi- towanie form. Posiada szereg opcji konfigu- racyjnych: • url – URL, do którego będzie wysyłany request; • params – obiekt przechowujący parame- try i wartości tych parametrów; • method – metoda HTTP używana do wysyłania request; • callback – funkcja wywoływana po za- kończeniu request, posiada następujące argumenty: options - parametry requst, success - jeśli true nie było błędów, re- sponse – obiekt zawierający odpowiedź serwera; • success – funkcja wywoływana po za- kończeniu request, jeśli nie było błędów, posiada następujące argumenty: respon- se, options • failure – funkcja wywoływana po zakoń- czeniu request, jeśli pojawiły się błędy, posiada następujące argumenty: respon- se, options ]) }); store . setDefaultSort ( 'ElementDate' , 'asc' ); var grid = new Ext . grid . GridPanel ({ store : store , columns : [ { header : "Nazwa" , width : 100 , sortable : true , dataIndex : 'Name' } , { header : "Data" , width : 140 , sortable : true , dataIndex : 'ElementDate' , renderer : Ext . util . Format . dateRenderer ( 'Y-m-d H:i:s' )} ] , height : 350 , width : 300 , title : 'Lista elementów' }); 42 07/2009 Ext JS – tworzenie własnych komponentów Listing 4. Gotowy komponent ElementPanel = function ( conig ) { //koniguracja komponentu Ext . apply ( this , conig ); var store = new Ext . data . Store ({ autoLoad : true , proxy : new Ext . data . HttpProxy ({ url : 'Viewer.ashx' }) , reader : new Ext . data . JsonReader ({ root : 'elementy' , totalProperty : 'liczba' , id : 'id' } , [ { name : 'Id' , mapping : 'id' } , { name : 'Name' , mapping : 'nazwa' } , { name : 'ElementDate' , mapping : 'data' , type : 'date' , dateFormat : 'timestamp' } collapsible : true , title : 'Wybierz datę' , region : 'west' , width : 250 , items : [ new Ext . DatePicker ({ handler : function ( picker , date ) { store . ilterBy ( function ( record , id ) { if ( record . data . ElementDate . bet ween ( date , date . add ( Date . DAY , 1 ))) { return true ; } return false ; } ); } })] } , { collapsible : false , region : 'center' , items : [ grid ] } ] //wywołanie konstruktora bazowego ElementPanel . superclass . constructor . call ( this , conig ); } //w tym miejscu dziedziczymy z Ext.Panel Ext . extend ( ElementPanel , Ext . Panel , {}); ]) }); store . setDefaultSort ( 'ElementDate' , 'asc' ); var grid = new Ext . grid . GridPanel ({ store : store , columns : [ { header : "Nazwa" , width : 100 , sortable : true , dataIndex : 'Name' } , { header : "Data" , width : 140 , sortable : true , dataIndex : 'ElementDate' , renderer : Ext . ut il . Format . dateRenderer ( 'Y-m-d H:i:s' )} ] , height : 250 , width : 300 , title : 'Lista elementów' }); //właściwości wydziedziczone z Ext.Panel this . width = 600 this . height = 310 this . layout = 'border' this . items = [ { //mając ten komponent, możemy go wykorzystać np. poprzez Ext.onReady Ext . onReady ( function () { var p = new ElementPanel ( { frame : true , renderTo : 'kontener' , title : 'Gotowy komponent' }); }); Listing 5. AJAX – request function MakeRequest () { Ext . Ajax . request ({ Ext . get ( 'pResult' ). dom . innerHTML = response . responseText ; } url : 'TestRequest.aspx' , function OnFailure ( response , options ) { success : OnSuccess , failure : OnFailure , Ext . Msg . alert ( 'Error' , response . responseText ); } //kod HTML < input type = "text" id = "par1" /> params : { param1 : Ext . get ( 'par1' ). g etValue () , param2 : Ext . get ( 'par2' ). getVa lue () } }); } < input type = "text" id = "par2" /> < input type = "button" onclick = "MakeRequest();" value = "Make Request" /> function OnSuccess ( response , options ) { < p id = "pResult" ></ p > www.sdjournal.org 43 Bazy danych W Sieci • form – element form; • isUpload – upload pliku jest automa- tycznie wykrywany, lecz można to też ustawić ręcznie; • xmlData – dokument XML przesyłany do serwera zamiast parametrów; • jsonData – dokument w formacie JSON przesyłany do serwera zamiast parametrów. • Są trzy zdarzenia, które możemy obsłużyć: Listing 6. AJAX – submitowanie formularza function MakeFormRequest () { Ext . Ajax . request ({ form : 'testForm' , success : OnFormSuccess , failure : OnFormFailure }); } function OnFormSuccess ( response , options ) { Ext . get ( 'pFormResult' ). dom . innerHTML = response . responseText ; } function OnFormFailure ( response , options ) { Ext . Msg . alert ( 'Error' , response . responseText ); } //kod HTML < form id = "testForm" action = "TestRequest.aspx" > < input type = "text" id = "param1" name = "param1" /> < input type = "text" id = "param2" name = "param2" /> < input type = "button" onclick = "MakeFormRequest(); return false" value = "Make Form Request" /> < p id = "pFormResult" ></ p > </ form > • beforerequest – wywoływane przed wysła- niem request; • requestcomplete – wywoływane po otrzyma- niu odpowiedzi od serwera w przypadku, gdy nie było błędów; • requestexception – wywoływane, gdy wystą- piły błędy podczas request. Przykład request pokazany jest na Listingu 5, a przykład submitowania form na Listingu 6. Tworzenie komponentów w Ext JS jest na ty- le proste, że każdy, kto posiada nawet minimalne doświadczenie z Javascript, bez problemów bę- dzie mógł sprostać temu zadaniu. Framework ten dostarcza wiele gotowych rozwiązań, które może- my z łatwością integrować z istniejącymi strona- mi WWW. Współpraca ze źródłami danych nie stanowi już problemu po stronie klienta, rów- nież asynchroniczna współpraca z serwerem jest w pełni wspierana. Jeśli ktoś nie lubi programo- wać w Javascript, a mimo to chciałby korzystać z dobrodziejstw Ext JS lub być może chciałby sobie ułatwić pracę, może użyć: Listing 7. Przykładowa realizacja Viewer.ashx public class Viewer : IHttpHandler { public void ProcessRequest ( HttpContext context ) { context . Response . ContentType = "text/plain" ; StringBuilder builder = new StringBuilder (); builder . Append ( "{\"liczba\":\"20\",\"elementy\":[" ); DateTime startDate = DateTime . Now ; for ( int i = 0 ; i < 20 ; i ++) { if ( i > 0 ) builder . Append ( "," ); builder . Append ( "{\"id\":\"" + i + "\",\"nazwa\":\"nazwa: " + i + "\",\"data\":\ "" + SerializeDateValue ( startDate . AddHours ( 3 * i )) + "\"}" ); } builder . Append ( "]}" ); context . Response . Write ( builder . ToString ()); } public bool IsReusable { get{return false ; } } private static string SerializeDateValue ( DateTime date ) { TimeSpan ts = date - ( new DateTime ( 1970 , 1 , 1 )); return (( int ) ts . TotalSeconds ). ToString (); }} • w przypadku JSF – Ext GWT, jest to biblio- teka komponentów przygotowana przez fir- mę Ext; • w przypadku ASP.NET – Coolite Toolkit; • w przypadku PHP – PHP–Ext. Nie sposób w kilku zdaniach opisać wszystkich możliwości Ext JS, proponuję zapoznać się z do- kumentacją oraz przejrzeć dostępne przykłady w celu uzyskania większej ilości szczegółów. GRZEGORZ PIENIĄŻEK Absolwent Wydziału Elektrycznego Politechniki War- szawskiej na kierunku Informatyka. Finalista pol- skiej edycji Imagine Cup w 2007 roku. Obecnie pra- cuje jako developer .net w irmie Altkom Software & Consuting, która realizuje złożone projekty i usługi w technologiach .NET, Java oraz Microsoft Dynamics. Zespół tworzy złożone rozwiązania o dużej skali, wspierające podstawowe procesy biznesowe przed- siębiorstw z branż: ubezpieczeniowej, usług inan- sowych oraz telekomunikacji. Wspiera także proce- sy komunikacji i pracy grupowej swoich klientów po- przez dostarczanie skutecznych rozwiązań. Altkom Software & Consulting inwestuje w rozwój kompe- tencji swoich ekspertów, promuje wykorzystanie no- woczesnych i efektywnych technologii. Kontakt z autorem: grzegorz.pieniazek@gmail.com 44 07/2009
[ Pobierz całość w formacie PDF ] zanotowane.pldoc.pisz.plpdf.pisz.pllily-lou.xlx.pl
|
|
Linki |
: Strona pocz±tkowa | : 2009 AON - Bibliografia publikacji pracowników w 2007r, 002-05 WOJSKO POLSKIE OD 01.01.1990, AON - Bibliografia publikacji pracowników | : 2009.06-2010.06 Kalendarz świętojański, KALENDARZE | : 2009.05.13 Rozp MON wojskowe dokumenty osobiste, 002-05 WOJSKO POLSKIE OD 01.01.1990 | : 3. arkusz Jezyk polski poziom p rok 2009 , MATURA, język polski | : 2009.05.04 Rozp MON używanie znaków w SZ RP, 002-05 WOJSKO POLSKIE OD 01.01.1990 | : 2009 Produktywny kalendarz, KALENDARZE | : 2009 I z, Matura, Chemia, Arkusze Maturalne | : 2009 EGZ WSTĘPNY NA AM, EGZAMIN WSTĘPNY NA AM(1) | : 2009, Matura, Chemia, Arkusze Maturalne | : 2009 Kalendarz FotografiaDlaCiekawych.pl 1, KALENDARZE |
zanotowane.pldoc.pisz.plpdf.pisz.plstaniec.opx.pl
. : : . |
|