Zaawansowane wykorzystanie biblioteki EXT GWT w aplikacjach opartych o Google Web Toolkit

copyright BNS MEDIA

www.devcastzone.com

Warstwy dostępowe

• Kontrolki takie jak ComboBox, ListView, Grid, czy Tree wymagają dostępu

do danych.

• Dane te mogą:

pochodzid z różnych źródeł,

byd przechowywane w pamięci podręcznej

grupowane,

Dzielone na strony

• GXT udostępnia szereg klas pozwalające na transparentny i warstwowy

dostęp do danych

• Wyróżnia się następujące warstwy:

warstwa danych

Proxy z opcjonalną DataReader

Loader

Store

warstwa kontrolki (widgetu)

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

Warstwy model dostępu do danych

Zaawansowane wykorzystanie biblioteki EXT GWT

Widgety typu Tree

Widgety typu List

Warstwa Store

Warstwa Proxy

ComboBox

ListView

Grid

TreePanel

TreeGrid

ListStore

GroupingStore

TreeStore

Warstwa Loader

BaseListLoader

BasePagingListLoader

BaseTreeLoader

BaseRemoteSortTreeLoader

MemoryProxy

PagingModelMemoryProxy

RpcProxy

HttpProxy

ScriptTagProxy

DataReader

Dane

ModelData

nie ModelData

copyright BNS MEDIA

www.devcastzone.com

Format modelu danych

• Aby obiekty reprezentujące wiersze danych mogły

byd zaczytane przez kontrolki GXT, muszą
implementowad interfejs ModelData

• Dopuszczane są również i inne typy, ale wymaga to

zaimplementowania dodatkowego konwertera -
DataReader .

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

Warstwa Proxy

• Warstwa Proxy definiuje interfejs dla obiektów, które

mogą pobrad dane

• Ujednolica metody oraz źródła pobieranych danych
• Rodzina klasy: DataProxy

(

com.extjs.gxt.ui.client.data.DataProxy

)

• Najpopularniejsze implementacje:

MemoryProxy
(

com.extjs.gxt.ui.client.data.MemoryProxy

) –

pozwala na przekazanie załadowanych danych do
wyświetlenia przez konstruktor,

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

Warstwa Proxy

• PagingModelMemoryProxy (

com.extjs.gxt.ui.

client.data.PagingModelMemoryProxy

) – pozwala na

wczytanie

załadowanych danych z uwzględnieniem paginacji,

• RpcProxy (

com.extjs.gxt.ui.client.data.RpcProxy

) –

implementacja pozwalająca na wczytanie danych poprzez
funkcję zwrotną również i GWT-RPC,

• HttpProxy (

com.extjs.gxt.ui.client.data.HttpProxy

)

– implementacja pozwalająca na pobieranie danych
wykorzystując RequestBuildera,

• ScriptTagProxy (

com.extjs.gxt.ui.client.data.

ScriptTagProxy

) – proxy pozwalające na odczyt danych

znajdujących się w innej domenie (cross-site requests),

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

Warstwa Proxy

• DataReader pozwala na konwersję surowych danych

do klas modelu ModelData i na odwrót

• Stosuje się jedynie w przypadku gdy do części

klienckiej zostały zaczytane obiekty niebędące
instancją klasy ModelData

• Rodzina klasy: DataReader

(

com.extjs.gxt.ui.client.data.DataReader

)

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

DataReader - implementacje

• Najpopularniejsze implementacje:

BeanModelReader (

com.extjs.gxt.ui.client.data.BeanModelReader

)

konwertuje automatycznie obiekty

• oznaczone adnotacją BeanModelMarker
• implementujących BeanModelTag

JsonLoadResultReader

(

com.extjs.gxt.ui.client.data.JsonLoadResultReader

)

JsonPagingLoadResultReader

(

com.extjs.gxt.ui.client.data.JsonPagingLoadResultReader

)

XmlLoadResultReader

(

com.extjs.gxt.ui.client.data.XmlLoadResultReader

)

XmlPagingLoadResultReader

(

com.extjs.gxt.ui.client.data.XmlPagingLoadResultReader

)

TreeBeanModelReader

(

com.extjs.gxt.ui.client.data.TreeBeanModelReader

)

TreeModelReader (

com.extjs.gxt.ui.client.data.TreeModelReader

)

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

Loader

• Loader pozwala na wczytanie określnego zakresu

danych uwzględniając:

Dzielenie na strony - paginację

Sortowanie

Filtry

• Rodzina klasy: Loader

(

com.extjs.gxt.ui.client.data.Loader

)

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

Loader

• Najpopularniejsze implementacje:

BaseListLoader (

com.extjs.gxt.ui.client.data.BaseListLoader

) –

domyślna implementacja pozwalająca na ładowanie listy
danych w całości,

BasePagingLoader (

com.extjs.gxt.ui.client.data.BasePagingLoader

) –

pozwala na wczytywanie zakresu danych od określonej
pozycji o określonej ilości elementów

BaseTreeLoader (

com.extjs.gxt.ui.client.data.BaseTreeLoader

)

BaseRemoteSortTreeLoader
(

com.extjs.gxt.ui.client.data.BaseRemoteSortTreeLoader

)

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

Loader – dzielenie na strony

• Loader odpowiedzialny jest za dzielenie na strony -

paginację

• Paginacja pozwala na wczytanie określonego zakresu

danych:

Od jakiego miejsca - offset

Ile wierszy – limit

• Kontrolki automatycznie obsługują paginację o ile

zwrócony jest odpowiedni wynik - LoadResult

• Aby zwracane dane zostały wyświetlone bezpośrednio w

widgecie, proxy do którego się odnosi loader powinno

przyjmowad jako parametr LoadConfig a zwracad

ListLoadResult. Jeżeli tak się nie dzieje musi zostad

dołączony odpowiedni DataReader,

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

Loader

• LoadConfig (

com.extjs.gxt.ui.client.data.

LoadConfig

) jest to interfejs modelu danych, który

służy do przekazywania parametrów przez kontrolki

Zaawansowane wykorzystanie biblioteki EXT GWT

• String sortField
• String sortDir

BaseListLoadConfig

• Modeldata parent

BaseRemoteSortTreeLoadConfig

• String groupBy

BasedGroupingLoadConfig

• int limit
• int offset

BasePagingLoadConfig

• List<filterConfig>

filters

BaseFilterPagingLoadConfig

• Określa parametry,

które definiują w jaki
sposób dane mają zostad
pobrane przez system
dostępu do danych (DAO)

copyright BNS MEDIA

www.devcastzone.com

Loader - paginacja

• ListLoadResult (

com.extjs.gxt.ui.client.

data.ListLoadResult

) stanowi interfejs modelu

danych, który jest wczytywany przez kontrolki.

Zaawansowane wykorzystanie biblioteki EXT GWT

• Zawiera:

listę obiektów do
wyświetlenia

informacje o zastosowanych
ograniczeniach na zwróconym
zbiorze danych

•List<ModelData> listData

ListLoadResult

•int offset
•int totalLength

BasePagingLoadResult

copyright BNS MEDIA

www.devcastzone.com

Loader - paginacja

Zaawansowane wykorzystanie biblioteki EXT GWT

WIDGET

Serwer

Baza

Danych

LoadConfig

LoadResult

offset, limit, sortField,

sortDir, groupBy,

fieldFilters

List<ModelData>

offset, limit

Parametry

załadowania

Parametry

zastosowane

do zestawu

zwracanych

danych

copyright BNS MEDIA

www.devcastzone.com

Warstwa Store

• Store pozwala na przechowywanie odczytanych

obiektów w pamięci podręcznej (cache) klienta

• Dane te mogą byd przechowywane w sposób:

płaski (dla ComboBox, List i Grid)

zgrupowany (Grid, Tree).

• Rodzina klas Store (

com.extjs.gxt.ui.client.

store.Store

)

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

Store

• Najpopularniejsze implementacje:

ListStore (

com.extjs.gxt.ui.client.store.

ListStore

) – podstawowa implementacja pamięci

podręcznej

GroupingStore (

com.extjs.gxt.ui.client.store.

GroupingStore

) – klasa pozwalająca pogrupowad wybrane

obiekty po jednym wybranym polu klasy modelu

TreeStore (

com.extjs.gxt.ui.client.store.

TreeStore

) – pamięd podręczna dla hierarchicznych

danych. Relacja rodzic-dziecko obsługiwana jest wewnątrz
implementacji Store

Zaawansowane wykorzystanie biblioteki EXT GWT

copyright BNS MEDIA

www.devcastzone.com

Warstwowy dostęp do danych - przykład

Zaawansowane wykorzystanie biblioteki EXT GWT

final

FeedModelRpcAsync service = GWT.create(FeedModelRpc.

class

);

RpcProxy<BaseListLoadResult<FeedModel>> proxy =

new

RpcProxy<BaseListLoadResult<FeedModel>>() {

    @Override

protected

void

load(Object loadConfig,

final

AsyncCallback<BaseListLoadResult<FeedModel>> callback) {
service.getAllFeeds(

new

AsyncCallback<ArrayList<FeedModel>>() {

        @Override

public

void

onFailure(Throwable caught) {

          callback.onFailure(caught);
        }

        @Override

public

void

onSuccess(ArrayList<FeedModel> result) {

callback.onSuccess(

new

BaseListLoadResult<FeedModel>(result));

        }
      });
    }
  };
  BaseListLoader<BaseListLoadResult<FeedModel>> loader =

new

BaseListLoader<BaseListLoadResult<FeedModel>>(proxy);
ListStore<FeedModel> store =

new

ListStore<FeedModel>(loader);