FilterTableState Vaadin extension fejlesztése

Posted by | · · · · · | Szoftverfejlesztés | Nincs hozzászólás a(z) FilterTableState Vaadin extension fejlesztése bejegyzéshez

Előzmények

Előző blogomban vetettem fel az ötletet, hogy talán szükség lenne a Vaadin FilteringTable komponens kibővítésére olyan módon, hogy képes legyen a táblázat állapotának mentését kezelni különböző profilok szerint.

Újra ismertetném a kívánt funkciókat, ha már elfelejtettétek volna:

  • táblázat állapotának mentése profilokba (szűrés, rendezés, oszlopok sorrendje, láthatósága, szélessége)
  • alapértelmezett profil beállítása, kikapcsolása
  • profil törlése
  • táblázat eredeti állapotának visszaállítása
  • funkciók hozzáadása szerver oldalon
  • alapértelmezett funkció beállítása szerver oldalon
  • jelenlegi oszlop „kapcsolgató” funkció megtartása


filtertablestate_1_a

FilterTableState extension fejlesztése

Egyik blogomban már írtam a kliens oldali Vaadin fejlesztés alapjairól, az ott leírtak extension fejlesztése esetén is felhasználhatóak. Gyakorlatilag csak annyi különbség van egy komponens és extension fejlesztése között, hogy AbstractComponent helyett AbstractExtension-ből kell származtatnunk, AbstractComponentConnector helyett pedig AbstractExtensionConnector-ból. Egy meglévő komponens kiegészítéséhez meg kell hívnunk szerver oldali AbstractExtension osztály

protected void extend(AbstractClientConnector target)

metódusát, ahol a target paraméter maga a kiegészítendő komponens. Jelen esetben a FilterTable. A kliens oldalon pedig a

protected void extend(ServerConnector target)

metódust kell felülírnunk, ahol már hozzá is férünk a komponensünk kliens oldali példányához, még pedig úgy, hogy a target objektumot az adott komponens connector osztályára castolva elkérjük a widgetet:

private VFilterTable filterTable;
@Override
protected void extend(ServerConnector target) {
FilterTableConnector ftc = (FilterTableConnector) target;
filterTable = ftc.getWidget();
filterTable.addAttachHandler(this);
}

A kliens oldal

A kliens oldalon először is (attach eseménynél) lecserélem a már említett „pöcköt” GQuery segítségével, hogy az ne a jelenlegi működés szerint járjon el.

GQuery querySelector = $("." + COLUMN_SELECTOR_STYLE, filterTable);
Element buttonElement = DOM.createDiv();
querySelector.after(buttonElement);
querySelector.remove();
buttonElement.addClassName(COLUMN_SELECTOR_STYLE);
addButtonClickListener(buttonElement);

logo-gquery

A GQuery, azaz gwtquery, egy jQuery-hez hasonló API a GWT-hez, mellyel viszonylag könnyen manipulálhatjuk a HTML DOM fánkat. Megkereshetünk vele DOM elemeket CSS3 selectorok alapján, widgeteket, átmozgathatunk div-eket egyik helyről a másikra, style-ozhatunk, animációkat adhatunk meg, eseményeket tudunk kezelni. Használata tényleg hasonló a jQuery-hez.
Ezt követően létrehozok egy VOverlay widgetet, mely egy „lebegő” panel. Erre kell összedobnom a funkciókat tartalmazó listát, az oszlopok kapcsolgatásához és a profilok karbantartásához szükséges div-eket. Ezeket nagyrészt egyszerű GWT-s HTML widgetekből állítom össze a SharedState objektumban tárolt adatok alapján. Az egyes div-eket különböző style class segítségével css-ezem, a gombokra – melyek valójában szintén div-ek vagy span-ok – click listenereket állítok be, melyek RPC hívásokon keresztül kommunikálnak a szerver felé. A ServerRpc interfészemen az alábbi metódusok érhetők el:

public void resetProfile();
public void setSelectedProfile(String profileName);
public void setDefaultProfile(String profileName);
public void saveProfile(String profileName);
public void deleteProfile(String profileName);
public void setSelectedFunction(Integer functionCode);

A szerver oldal

A szerver oldali extend metódusom 2, opcionálisan 3 paramétert vár:

FilterTable table
FilterTableStateHandler stateHandler
FilterTableClickFunctionHandler functionHandler

A table egyértelmű, ezzel hívom meg az ős extend metódusát, ahogy már említettem:

super.extend(table);

A FilterTableStateHandler interfész végzi a profilok kezelését. A widget nem tartalmaz FilterTableStateHandler implementációt, ezt nekünk kell megvalósítunk az adott projektben a saját igényeinknek megfelelően. Implementálandó függvényei a következők:

public void save(FilterTableStateProfile profile);

Ebben a metódusban kell elvégeznünk a profil mentését.
A FilterTableStateProfile wrapper osztály tartalmazza a profil egyedi nevét és egy Set-et az oszlopok tulajdonságaival (ColumnInfo). A ColumnInfo objektum a filtereket Object-ként kezeli, így amennyiben adatbázisban szeretnénk tárolni, szerializálnunk kell, hogy egy byte[] tömbként le tudjuk menteni azt. Egy user ID és tábla ID jól jön a rekordok beazonosításához.

public void delete(String profileName);

A paraméterben érkező profil névhez tartozó profilt kell törölnünk.

public Set load();

A lementett profilokat kell visszaadnunk.

public String getDefaultProfile();

Az alapértelmezett profil nevét kell visszaadnunk. Amennyiben ez nem elérhető, null értéket.

public void setDefaultProfile(String profileName);

A profil névhez tartozó profilt kell beállítanunk alapértelmezettként.

A FilterTableClickFunctionHandler interfész a funkciók kezelését végzi, implementálása opcionális:

public Set load();

A lementett funkciók halmazát (egyedi kód, név) kell visszaadnunk. Ezek fognak megjelenni a widgetben.

public void setSelected(Integer functionCode);

Egy funkció kiválasztásakor hívódik meg. Implementálnunk kell, hogy az egyes funkciók kiválasztásakor mi történjen.

public Integer getDefaultFunctionCode();

Az alapértelmezett funkció kódját kell visszaadnunk.
Az extension tartalmaz egy alap (angol) és magyar .properties fájlt a felületen megjelenő címkékhez, üzenetekhez, de megadhatunk saját ResourceBundle példányt is.

Összefoglalás

A FilterTableState segítségével, egy kis munka ráfordítása után már könnyedén felruházhatjuk jelenleg használt táblázatainkat az itt leírt funkciókkal, melyek remélhetőleg számos felhasználó igényeit fogják kielégíteni.
Az Add-on megtalálható a publikus Vaadin Directoryban.

A forráskód pedig egy GitHub repositoryban.


No Comments

Leave a comment