Készítsünk saját témát Vaadinhoz!?

Posted by | · · · | Szoftverfejlesztés | 2 hozzászólás Készítsünk saját témát Vaadinhoz!? című bejegyzéshez

Minden webalkalmazás fejlesztése során eljön egyszer az a pillanat, amikor a megjelenítési réteg kialakítására kerül sor. Tapasztalatom szerint a legtöbb fejlesztő számára ez nem különösen kedvelt feladat, pedig sok esetben egyszerűen és gyorsan kivitelezhető, természetesen az igények és a felhasznált eszközök függvényében.

Általános esetben a felület kinézetét stíluslapok segítségével szabjuk át. Keretrendszer használata esetén azonban bizonyos mértékig „kódból“ is befolyásolható a megjelenítés, de a finomhangoláshoz ez esetben is stíluslapok használata szükséges. Erre egy egyszerű példa a Vaadin keretrendszer esetében a komponensek margó tulajdonsága. Minden komponensen megvalósított a margó ki-be kapcsolására szolgáló setter. A margó beállítása „default” méretre egy egysoros parancs segítségével történhet, abban az esetben viszont, ha akár csak egy pixellel kisebbre szeretnénk a komponens körül a margó méretét állítani, akkor már CSS használata szükséges.

Amikor az általunk használt megjelenítési keretrendszer kinézetét először akartuk komolyabban módosítani,  a Vaadin által elsősorban ajánlott módon – az eredeti téma származtatásával – fogtunk hozzá. Sajnálatos módon azonban nem várt nehézségekbe ütköztünk, így más utat kellett választanunk a cél eléréséhez.

A vaadin

A Vaadin egy Javaban készült keretrendszer webalkalmazásokhoz. Segítségével gyorsan építhető felhasználóbarát szoftver. A Vaadint több százezer Java fejlesztő használja szerte a világon – a hobbi projektektől a nagyvállalati alkalmazásokig. Az előzőekben említett stíluslap (CSS) bevezetésére több megoldást is javasol a hivatalos támogatás.

A „sárgaköves” út

A keretrendszerhez tartozó témák stíluslapjai Sass nyelven készültek, így az ajánlás szerint új téma bevezetésével, illetve az eredeti téma kiegészítésével érhető el a megfelelő külalak. Az Sass egy CSS3 kiterjesztés, amely végül CSS-re fordul le. Ezt a fordítást a Vaadin esetén vagy előre, .css -re fordított Sass fájl használatával, vagy a „on the fly” tehetjük meg.

A Sass

sass

A Syntactically Awesome Stylesheets a CSS3 lehetőségeit bővíti szelektorszármaztatással, változók bevezetésével, beágyazással, és több hasznos funkcióval. Nagy változás továbbá, hogy támogatja mixin használatát, az újra felhasználást megkönnyítve, még paraméter átadással is. Ebből egyértelműen látszik a praktikussága. Az Sass fájloknak két kiterjesztése létezik, a .sass és a Vaadin témákban használt .scss.

Mégsem érdemes az utat követni?

A már említett ajánlást követve természetesen szükséges a saját témánk megadása, melyet a @Theme annotációval tehetünk meg. Ezt követően a megfelelő könyvtárba (VAADIN/themes/aTémánk/styles.scss) létre kell hoznunk a styles.scss fájlunkat, melybe írhatunk saját „rule”-okat, vagy importálhatunk stíluslapokat. A keretrendszer által biztosított témát továbbra is kívánjuk használni, csupán a több ezer soros stíluslapot néhány saját szabállyal egészítjük ki. Ezért szükséges az eredeti beemelése egy egyszerű import és include paranccsal. Természetesen a megfelelő téma stíluslapját szükséges importálni az alábbi példa alapján.

@import "../reindeer/reindeer.scss";
.aTemank {
     @include reindeer;
}

Ebben az esetben Vaadin a mi témánkat fogja használni. Itt egyszerűen és gyorsan el is értük volna a célunkat, DE! Az első teszteléseket követően problémákba ütköztünk, jelesül, hogy a témaváltás side-effect-ekkel járt, amely csak többszöri vizsgálatra tűnt fel. Az eltérés az eredeti témához képest minimális, csupán néhány pixeles elcsúszásokat jelent, de ennyi már pont elég ahhoz, hogy elrontsa az összképet. Ha az újdonsült stílusba semmit nem írunk, csak az eredeti importot, sajnos akkor is fennáll ez a probléma. Tehát furcsamód az ajánlást követve, az eredeti témát importálva, és semmit nem változtatva rajta mégsem az eredeti témát kapjuk vissza. Így használhatatlannak minősült számunkra ez a metodika. Ezt az esetet bug report formájában jeleztük is a Vaadin fejlesztőinek.

témaváltás előtt

témaváltás előtt

témaváltás után

témaváltás után

Kerülőúton

Ezen tapasztalatok birtokában más megoldás után kellett néznünk és mindannyiunk fájdalmára visszatérni a jól megszokott CSS fájlokhoz és a lokális javításokhoz. Ekkor minden szükséges ui komponens osztályban a StyleSheet annotációval megadhatjuk a stíluslap elérési útját az adott fájl mélységétől, továbbá az egyes komponensekhez szelektorok hozzáadásával pontosíthatjuk a szabályainkat.

Összegzés

A fejlesztés alapvetően egyszerű szakaszát is képes megnehezíteni egy apró hiba. Így az amúgy jól átgondolt és modern megközelítés számunkra használhatatlanná vált. Remélem, hogy aki éppen hasonló feladat előtt áll, annak ez a cikk lerövidíti a helyes útra találást.


2 hozzászólás

Takács Ákos says:

2013. június 12. at 20:06

Érdekes probléma. Egyébként sokszoros nagyítással látszik, hogy nem csak az ikon más. Van a reindeer téma css-ében pár speciális komment a css sprite-hoz. Azok például bent maradnak az öröklő téma css-ében. A képek pedig nem css sprite-tal egy darab képet pozicionálva jelennek meg, hanem minden külön képként. Azt rosszul pozicionálva.

Az ikonnak például 1px jobb margót adva és képhez tartozó span tag szélességét 19-ről 17-re átírva pont helyrebillen. Viszont a tab-ok szélessége és 3-4 pixellel különbözik egy öröklésnél. Szóval van ott még valami az scss-en kívül, aminek futnia kéne, de nem tud.

Reply

Merckle Laci says:

2013. június 13. at 08:26

Igen, talán. Ami igazán probléma, hogy nem tudjuk mi romlik még el, és hogy mennyire szembetűnő.

Reply

Leave a comment to Merckle Laci

Cancel Reply