Kliens oldali Vaadin fejlesztés

Posted by | · · · · · | Szoftverfejlesztés | 1 hozzászólás a(z) Kliens oldali Vaadin fejlesztés bejegyzéshez

Eljött az idő, hogy a „gyári” Vaadin komponensek és Add-onok mellett szükségünk lett új, speciális komponensekre, így elkezdtem elmélyedni a Vaadin komponens fejlesztésben. Ebben a blogban a kliens oldali fejlesztésről, ill. annak előkészítéséről írnék.

vaadin_logo_full
A Vaadin két féle fejlesztési modellt támogat: szerver oldali és kliens oldali.
A kliens oldali kódot Java-ban kell írnunk, amit a Vaadin Client Compiler JavaScript kódra fordít le. Ez a JavaScript kód fut le a böngészőben az egyes kliens oldali komponensek – widgetek – betöltésekor.
A widgethez (com.google.gwt.user.client.ui.Widget) általában tartozik egy szerver oldali komponens is (com.vaadin.ui.AbstractComponent), melyet egy connector osztály (com.vaadin.client.ui.AbstractComponentConnector) köt össze a @Connect annotáció segítségével.

gwt_logo

Google Web Toolkit – Productivity for developers, performance for users.

A kliens oldali keretrendszer a Google Web Toolkit -en alapul, kiegészítve azt újabb fejlesztésekkel.
A widgeteket a Client-Side Engine rendereli le a böngészőben. Ez a motor (widget set)  tulajdonképpen widgetek  és olyan connector osztályok halmaza, melyek szerializálják az állapotukat és eseményeiket a megfelelő szerver oldali komponensével. A kommunikáció a szerver oldal és kliens oldal között egy com.vaadin.shared.communication.SharedState leszármazotton keresztül zajlik. A kliens csak olvasni tud a state-ből, a szervernek Remote Procedure Call (RPC) híváson keresztül tud üzenni.

Module Descriptor

Minden kliens oldali Vaadin modulhoz (widget set) tartozik egy, a modult leíró .gwt.xml fájl (Module Descriptor), melyet a root package-be kell helyeznünk.
Legegyszerűbb példa:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN"
"http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro- source/core/src/gwt-module.dtd">

<module>
<!-- Inherit the default widget set -->
<inherits name="com.vaadin.DefaultWidgetSet" />
</module>

Fontos, hogy minden Java kódot, amiből JavaScript lesz,  a .gwt.xml fájl alá, egy „client” package-be kell helyeznünk. A .css fájlok és képek szintén erre a szintre, egy „public” mappába kell, hogy kerüljenek.

A használni kívánt .css fájlokat definiálni kell az xml-ben (public/testwidget/styles.css):

<stylesheet src="testwidget/styles.css" />

Megadhatjuk, hogy a fordító mely package-ekben lévő osztályokat fordítsa még le, hogy azok a kliens oldalon is elérhetővé váljanak a „source” tag segítségével.


<!-- translatable code to client -->
<source path='shared'/>
<source path='client'/>

Widget set fordítása

A widget set fordításához szükségünk lesz a vaadin-client- compiler és vaadin-client modulokra.
A fordítást a „vaadin:compile” goal segítségével végezhetjük el.
Mivel ez néhány percig is eltarthat, fejlesztés közben célszerű a module descriptorban limitálni, hogy mely böngészőre fordítsa le a kódot. Ha például Firefox-ban teszteljük a widgetünket, adjuk hozzá ezt a sort:

<set-property name="user.agent" value="gecko1_8"/>

Megadhatunk több értéket is vesszővel elválasztva (ie6,ie8,gecko1_8,safari,opera,ie9).

Sajnos még így sem nevezhető gyorsnak és elég sokat kell buildelni már csak a nehézkes debug-olás miatt is, ezért utánanéztem, mit lehetne tenni. A megoldás: SuperDevMode .

clock

SuperDevMode

SuperDevMode segítségével az alkalmazás futása közben, az oldal frissítésekor automatikusan újrafordítja a widget setet, ami kb. 10 mp-ig tart!
Ahhoz, hogy működésre bírjuk, a module descriptorban definiálnunk kell az alábbiakat:

<add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>

Miután lebuildeltük a widget setet, el kell indítanunk a com.google.gwt.dev.codeserver.CodeServer -t. Ha Maven projectünk van, a legegyszerűbb, ha definiáljuk az alábbi profilt a pom.xm-be és build-elünk egyet.


<profile>
<id>CodeServer</id>
<build>
<defaultGoal>org.codehaus.mojo:exec-maven-plugin:java</defaultGoal>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.2.1</version>
<executions>
<execution>
<goals>
<goal>java</goal>
</goals>
</execution>
</executions>
<configuration>
<mainClass>com.google.gwt.dev.codeserver.CodeServer</mainClass>
<environmentVariables>-DlogLevel=DEBUG</environmentVariables>
<arguments>
<argument>com.mycompany.MyWidgetSet</argument>
<argument>-src</argument>
<argument>src/main/java</argument>
</arguments>
<classpathScope>compile</classpathScope>
</configuration>
</plugin>
</plugins>
</build>
</profile>

Ajánlott beállítani a logolási szintet (-DlogLevel=DEBUG), mert így sok alattomos hibát kiír nekünk, ami amúgy nem bukna elő sehol, ill. nem értenénk, hogy miért nem működik valami, amikor a fordítás sikeresen lefutott. Nekem előfordult, hogy egy POJO-t használtam a kliens oldalon és a POJO package-ét nem definiáltam a modul descriptorban és mivel a kliens ezt az osztályt nem látta (nem lett lefordítva JavaScript kóddá), csak valami érthetetlen JavaScript hiba jött futáskor, annak ellenére, hogy a fordítás sikeres volt.

Amennyiben a CodeServer elindult, az alábbi sort látjuk:

The code server is ready.

Indítsuk el az alkalmazást, majd adjuk az url-hez a következő paramétereket:

?superdevmode&debug

Ekkor a fordító újrafordítja a widget setet. Ha átírunk valamit a kliens oldali Java kódban és frissítünk, az nyomban meg fog jelenni. A debug paraméter egy debug ablakot nyit fel. Ide a com.vaadin.client.VConsole.log() függvény segítségével tudunk logolni.

Java kód debug-olása Chrome böngészőben

chrome_bug

Lehetőség van – egyelőre csak Chrome támogatja – a kliens oldali Java kód debugolására, amiből a fordító JavaScript kódot fordított. Ehhez az alábbi sort vegyük fel a module descriptor xml-ben, majd fordítsuk újra az alkalmazást:

<set-property name="compiler.useSourceMaps" value="true" />
  1. Chrome-ban nyissuk le az Insperctor ablakot (jobb klikk / Elem megtekintése)
  2. Jobb alsó sarokban kattintsunk a Settings gombra
  3. Pipáljuk be az Enable source maps checkboxot
  4. Töltsük újra az oldalt, nyissuk le az Inspector ablakot és Sources menüpont alatt már láthatjuk a Java kódot

Összefoglalás

Az imént leírtak segítségével összeállíthatunk egy alap fejlesztő környezetet, amely a Vaadin komponens fejlesztés hatékonysága érdekében elengedhetetlen lesz számunkra.

Bővebb információkat a Book of Vaadin 7 -ből tudhatunk meg.

Share on FacebookShare on Google+Email this to someoneTweet about this on TwitterShare on RedditShare on LinkedIn

One Comment

Webstar Blog | FilterTableState Vaadin extension fejlesztése says:

2013. november 27. at 09:05

[…] 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 […]

Reply

Leave a comment