WebML - tvorba aplikacφ v prost°edφ WebRatio
WebML pat°φ mezi pom∞rn∞ malou skupinu metodologiφ urΦen²ch pro anal²zu a nßvrh webov²ch aplikacφ, kterΘ byly p°eneseny z oblasti akademick²ch debat a₧ do ·sp∞ÜnΘho vyu₧itφ v praxi. Nemal² podφl na tom jist∞ mß i kvalitnφ CASE nßstroj WebRatio, kter² umo₧≥uje plynul² p°echod od anal²zy a nßvrhu k implementaci samotnΘ webovΘ aplikace. V n∞kolika p°edchozφch Φlßncφch byl v∞novßn prostor p°edevÜφm metodologii jako takovΘ. Vysv∞tleny byly jednotlivΘ modely, kterΘ se p°i nßvrhu aplikace musφ vytvß°et. Tentokrßt se podφvßme p°edevÜφm na prost°edφ WebRatio.
WebRatio
WebRatio p°edstavuje komplexnφ CASE nßstroj implementujφcφ metodologii WebML, kter² podporuje cel² ₧ivotnφ cyklus projektu od anal²zy a₧ po implementaci webovΘ aplikace. WebRatio umo₧≥uje t²movou prßci zahrnujφcφ sdφlenφ vzdßlenΘ repository projektu, stahovßnφ a upload zm∞n v projektu, v∞tvenφ projektu a dalÜφ vlastnosti znßmΘ vÜem, kte°φ n∞kdy pou₧φvali n∞jak² nßstroj pro sprßvu verzφ software (nap°φklad CVS nebo Visual SourceSafe).
S pomocφ tohoto prost°edφ byly vytvo°eny veÜkerΘ ukßzkovΘ p°φklady, se kter²mi jste se mohli setkßvat v p°edchozφch Φlßncφch. SamotnΘ WebRatio se pom∞rn∞ rychle vyvφjφ. To byl takΘ jeden z d∙vod∙ zpo₧d∞nφ tohoto Φlßnku. V p°φprav∞ toti₧ byla zcela novß verze tohoto software, v po°adφ ji₧ Φtvrtß.
Instalace
Nejnov∞jÜφ zkuÜebnφ verzi WebRatia si m∙₧ete stßhnout na adrese www.webratio.com. ZkuÜebnφ verze mß kolem 40 MB a je omezena dobou pou₧itφ na t°i m∞sφce.
InstalaΦnφ balφk se sklßdß z n∞kolika souΦßstφ:
- samotn² CASE nßstroj
- kompletnφ instalace webovΘho serveru Apache Tomcat
- nßstroj EasyStyler slou₧φcφ k nßvrhu prezentaΦnφ vrstvy
- velice kvalitnφ manußly pro WebML a WebRatio
- n∞kolik ukßzkov²ch aplikacφ
Instalace probφhß naprosto bezproblΘmov∞. JedinΘ, co pot°ebujete, je nainstalovanß podpora Javy, respektive JRE verze 1.2. WebRatio je kompletn∞ napsanΘ v Jav∞ a dφky tomu je nezßvislΘ na platform∞ (provozovat lze na Windows i Linuxu). Danφ za pou₧itφ Javy je n∞kdy pom∞rn∞ znatelnΘ zpomalovßnφ aplikace. Uvßd∞nΘ hardwarovΘ nßroky (CPU 400 MHz, 256 MB RAM) p°edstavujφ opravdu minimßlnφ konfiguraci, se kterou se dß pracovat. Pro p°φjemnou prßci bych doporuΦoval alespo≥ CPU 1 GHz a 512 MB RAM.
U₧ivatelskΘ rozhranφ
U₧ivatelskΘ rozhranφ WebRatia bylo dle mΘho nßzoru zpracovßno tradiΦn∞ a velice dob°e. P∙sobφ p°ehledn∞ a pracuje se v n∞m opravdu bezproblΘmov∞.
Hlavnφ okno aplikace je rozd∞leno do Φty° zßkladnφch Φßstφ:
- Hlavnφ menu a nßstrojovß liÜta se do urΦitΘ mφry suplujφ. Odsud jsou standardn∞ p°φstupnß vÜechna nastavenφ, funkce a nßstroje.
- Lev² sloupec
- V hornφ Φßsti levΘho sloupce m∙₧eme pro prochßzenφ projektu pou₧φt takzvan² Project Tree, kter² p°edstavuje hierarchickΘ zobrazenφ vÜech souΦßstφ projektu.
- V dolnφ Φßsti levΘho sloupce se zobrazujφ v₧dy vlastnosti p°φsluÜnΘho objektu, kter² je zrovna aktivnφ (nap°φklad vlastnosti vazby mezi dv∞ma entitami v datovΘm modelu).
- Hlavnφ pracovnφ plocha funguje jako vektorov² grafick² editor pro vytvß°enφ jednotliv²ch diagram∙.
- Debug okno, ve kterΘm m∙₧eme sledovat v²sledky kontroly konzistence a chyb v modelu.
S u₧ivatelsk²m rozhranφm se nejlΘpe seznßmφ ka₧d² sßm. Nßs zajφmß p°edevÜφm, jak se s tφmto nßstrojem pracuje a jak²m zp∙sobem se v n∞m dß vyvφjet webovß aplikace.
Transformace modelu na www aplikaci
Zßkladem pro vytvo°enφ funkΦnφ aplikace je samoz°ejm∞ ·pln² model WebML, kter² se sklßdß z datovΘho a hypertextovΘho modelu, kterΘ byly popsßny v p°edchozφch Φlßncφch. WebRatio nßm umo₧nφ tyto modely pohodln∞ zakreslit do p°ehledn²ch diagram∙. Do fßze, kdy mßme zakresleny vÜechny modely, se tedy WebRatio v niΦem zßsadnφm neodliÜuje od jin²ch kreslicφch nßstroj∙, jako je nap°φklad MS Visio. WebRatio ovÜem umo₧≥uje z tohoto modelu vygenerovat pln∞ funkΦnφ aplikaci.
Architektura aplikace
VÜechny aplikace generovanΘ z WebRatia majφ t°φvrstvou architekturu, kterß je zalo₧ena na objektovΘm modelu Model View Controller (MVC) a implementovßna v prost°edφ J2EE. V tΘto fßzi odkazuji vÜechny neznalΘ problematiky MVC na Φlßnek Model-View-Controller Pattern. Pro pohodlnΘ Φtenß°e zjednoduÜen∞ vysv∞tlφm principy architektury MVC. Objekty v aplikaci jsou rozd∞leny na nßsledujφcφ t°i typy:
- Controller: Tyto objekty se starajφ o zpracovßnφ vn∞jÜφch udßlostφ p°ichßzejφcφch od u₧ivatele p°es u₧ivatelskΘ rozhranφ (kliknutφ na odkaz, odeslßnφ formulß°e). Tyto po₧adavky transformujφ na ₧ßdost o provedenφ p°φsluÜnΘ akce pro urΦit² objekt typu model.
- Model: Objekty typu model tvo°φ aplikaΦnφ logiku. P°ijφmajφ po₧adavky od objekt∙ typu controller a zpracovßvajφ pot°ebnΘ operace (dotazovßnφ do databßze a dalÜφ v²poΦty).
- View: Tyto objekty p°edstavujφ grafick² front-end aplikace, starajφ se o vykreslenφ v²slednΘho u₧ivatelskΘho rozhranφ.
Pro WebRatio byla tato architektura ΦßsteΦn∞ pozm∞n∞na. Podrobn∞ji znßzor≥uje celkovou architekturu aplikace tento obrßzek. Ka₧dß WebML strßnka musφ mφt definovßny nßsledujφcφ Φty°i souΦßsti:
- Objekt akce (model): Jednß se o instanci javovskΘ t°φdy, kterß p°i po₧adavku na zobrazenφ strßnky, kter² dostßvß od objektu controlleru, dek≤duje http po₧adavek a zavolß p°φsluÜnou slu₧bu strßnky, kterΘ p°edßvß p°φsluÜnΘ parametry. Kdy₧ je v²poΦet dokonΦen, oznßmφ objektu controlleru, ₧e obsah strßnky je p°ipraven k zobrazenφ.
- Slu₧ba strßnky (model): Starß se o aplikaΦnφ logiku (dotazovßnφ na databßzi, validace formulß°∙ a dalÜφ).
- JSP Üablona (view): Prost°ednictvφm JSP Üablony je generovßn v²sledn² HTML k≤d.
- Mapovßnφ akcφ Ka₧dß aplikace obsahuje konfiguraΦnφ soubor, ze kterΘho controller Φte informace, jakß akce a jakß Üablona p°φsluÜφ urΦitΘmu po₧adavku od u₧ivatele (URL).
Zpracovßnφ ka₧dΘ strßnky probφhß zhruba takto:
- Pokud je na server odeslßn po₧adavek na vystavenφ strßnky, je tento po₧adavek zpracovßn pomocφ Controlleru, kter² je implementovßn jako javovsk² servlet. Controller se podφvß do konfiguraΦnφho souboru a zavolß p°φsluÜn² objekt akce strßnky.
- Objekt akce komunikuje s aplikaΦnφ vrstvou. Transformuje http po₧adavek na javovskΘ objekty a vy₧ßdß si p°φsluÜnou slu₧bu strßnky, kterΘ p°edß pot°ebnΘ parametry.
- Objekty aplikaΦnφ vrstvy vykonajφ p°φsluÜnou slu₧bu, v∞tÜinou naplnφ objekty jednotliv²ch units z databßze, p°φpadn∞ provedou dalÜφ akce.
- Controller je informovßn o p°ipravenosti strßnky k jejφmu zobrazenφ. Ten se podφvß do konfiguraΦnφho souboru a vybere p°φsluÜnou JSP Üablonu pro danou akci na jejφm₧ zßklad∞ je vygenerovßna v²slednß HTML strßnka.
Generovßnφ aplikace
Abychom mohli s pomocφ WebRatia vygenerovat v²slednou aplikaci, pot°ebujeme p°edevÜφm konzistentnφ datov² a hypertextov² model. Pokud mßme modely p°ipravenΘ, musφme provΘst jeÜt∞ dva kroky. Prvnφ nepom∞rn∞ jednoduÜÜφ krok p°edstavuje namapovßnφ datovΘho modelu na vybran² databßzov² systΘm. V druhΘm kroku musφme navrhnout design respektive prezentaΦnφ vrstvu aplikace.
Mapovßnφ datovΘho modelu
Vytvo°en² datov² model aplikace musφme namapovat na konkrΘtnφ databßzov² systΘm. Mßme na v²b∞r ze dvou mo₧nostφ:
- Nechßme si strukturu databßze automaticky vygenerovat.
- Namapujeme datov² model na existujφcφ databßzi.
V obou p°φpadech budeme pot°ebovat nakonfigurovat datov² zdroj. Tφm m∙₧e b²t jedna z podporovan²ch relaΦnφch databßzφ, mezi kterΘ pat°φ Oracle, MySQL, MS SQL, PostgreSQL nebo nap°φklad DB2. Nutnostφ je podpora JDBC rozhranφ.
Mo₧nost p°ipojenφ nebo editace datovΘho zdroje nalezneme v Project Tree, pokud si ho p°epneme do takzvanΘho Mapping View:
Obrßzek Φ. 2: WebRatio - vytvo°enφ datovΘho zdroje
Pokud si chceme nechat datovou strukturu automaticky vygenerovat, staΦφ zvolit volbu "Create Empty Data Mapping" a WebRatio za°φdφ vÜe pot°ebnΘ automaticky, vΦetn∞ vygenerovßnφ primßrnφch a cizφch klφΦ∙ i vazebnφch tabulek.
V p°φpad∞, kdy chceme datov² model namapovat na existujφcφ databßzi, je cel² proces trochu komplikovan∞jÜφ. Pro ka₧dou entitu musφme v jejφch vlastnostech zvolit p°φsluÜnou tabulku z p°ipojenΘho datovΘho zdroje a provΘst propojenφ atribut∙ tabulky na atributy entity.
PrezentaΦnφ vrstva aplikace - design
PrezentaΦnφ vrstva aplikace generovanΘ z WebRatia je zalo₧ena na technologii XSL. Na model aplikace zapsan² v jazyce XML se aplikujφ XSL Üablony, kterΘ transformujφ model na v²slednΘ Üablony strßnek vΦetn∞ pot°ebn²ch server side tag∙. XSL Üablony samoz°ejm∞ netvo°φme od zaΦßtku sami, WebRatio nßm nabφzφ nßstroje pro ulehΦenφ prßce.
U₧ivatelskΘ rozhranφ vychßzφ z hypertextovΘho modelu, kter² nßm vyΦerpßvajφcφm zp∙sobem popisuje strukturu webovΘ aplikace (obsah a provßzßnφ jednotliv²ch strßnek). Nikde v tomto modelu ovÜem nenφ urΦeno, jak budou jednotlivΘ strßnky vypadat.
Definice prezentaΦnφ vrstvy p°edstavuje dva odd∞lenΘ ·koly:
- UrΦit rozlo₧enφ jednotliv²ch prvk∙ (units) v rßmci strßnky.
- Definovat design jednotliv²ch units a layout webu.
Nejprve musφme definovat rozlo₧enφ jednotliv²ch prvk∙ (units) v rßmci strßnky. Pokud se v Project Tree p°epneme do pohledu "Presentation view", m∙₧eme pro ka₧dou strßnku editovat takzvan² page grid:
Obrßzek Φ. 3: WebRatio - page grid
M°φ₧ku vytvß°φme podobn²m zp∙sobem, kter² znßme z tabulkov²ch editor∙. Jednoduch²m ta₧enφm myÜφ urΦujeme rozmφst∞nφ vÜech prvk∙ do vytvo°enΘ m°φ₧ky. Pro jednotlivΘ units dßle musφme zvolit styl, kter² definuje jejich konkrΘtnφ vzhled (barvy, rozm∞ry a podobn∞).
Tφm jsme se dostali k nejd∙le₧it∞jÜφmu kroku v procesu definice prezentaΦnφ vrstvy aplikace - k definici globßlnφho stylu aplikace. Stylem se v terminologii WebRatia myslφ mno₧ina prezentaΦnφch pravidel a definic, k jejich₧ editaci slou₧φ nßstroj Easy Styler:
Styl ka₧dΘho webu obsahuje nßsledujφcφ souΦßsti:
- Layout strßnky
-
Layout strßnky vytvß°φme velice podobn∞ tomu, jak jsme normßln∞ zvyklφ, tedy pomocφ XHTML a CSS. Nejprve vytvo°φme Üablonu v XHTML a poslΘze ji doplnφme o specißlnφ znaΦky, kterΘ urΦφ v²znam jednotliv²ch Φßstφ XHTML k≤du a upozor≥ujφ generßtor aplikace na to, kam se mß generovat dynamick² obsah prezentace. Takto nap°φklad definujeme oblast, do kterΘ mß b²t generovßna prvnφ ·rove≥ menu: <easystyle:landmark-area-menu level="1"></easystyle:landmark-area-menu>. PovinnΘ je pro ka₧dou Üablonu strßnky uvΘst, kde se bude nachßzet oblast, do kterΘ se vygeneruje hlavnφ obsah strßnky, tedy oblast, kam se vlo₧φ v²Üe popisovan² page grid. Tuto oblast v k≤du jednouÜe vyznaΦφme jako
<easystyle:grid />.Hotovou Üablonu nahrajeme do aplikace Easy Styler v sekci Page Layout. ┌pln² v²Φet specißlnφch znaΦek obsahuje referenΦnφ p°φruΦka k nßstroji Easy Styler. Ke sta₧enφ jsem pro vßs p°ipravil ukßzkov² p°φklad Üablony, kde m∙₧ete nalΘzt dalÜφ specißlnφ znaΦky.
- Vzhled jednotliv²ch units
-
V tomto kroku definujeme nejprve takzvan² Unit Frame, kter²m specifikujeme, jak bude vypadat p°φsluÜn² prvek (unit) strßnky. Vytvo°φme ho podobn∞ jako layout strßnky s pomocφ XHTML a CSS s dopln∞nφm specißlnφch znaΦek, kterΘ urΦujφ v²znam jednotliv²ch Φßstφ HTML k≤du (kam se generuje obsah unit a podobn∞). Vytvo°enΘ Üablony se poslΘze nahrajφ do nßstroje Easy Styler.
Dßle musφme definovat takzvan² Look&feel, ve kterΘm popisujeme vzhled vÜech souΦßstφ p°φsluÜn²ch units. Pro tento ·Φel musφme mφt ulo₧en v adresß°i "/html/Resources" soubor "default.css". JednotlivΘ CSS definice z tohoto souboru pak m∙₧eme aplikovat na r∙znΘ vlastnosti ka₧dΘ z units prost°ednictvφm jednoduchΘho nßstroje, obsa₧enΘho v aplikace Easy Styler. Nap°φklad CSS t°φdu ".highlight" pro zv²razn∞n² text m∙₧eme p°i°adit vlastnosti "Scroll link" prvku "scrollerunit".
Ov∞°enφ konzistence modelu
Pokud si chceme ov∞°it, zda mßme p°ipraveno vÜe pro ·sp∞ÜnΘ generovßnφ aplikace, m∙₧eme spustit automatickou validaci konzistence vytvo°en²ch model∙. WebRatio nßs upozornφ na p°φpadnΘ nedostatky, chyby a nekonzistence. NalezenΘ nesrovnalosti jsou t°φd∞ny na varovßnφ (warnings) a chyby (errors). Pokud se v projektu vyskytne chyba, nenφ mo₧nΘ pokraΦovat v generovßnφ k≤du. P°i nalezenφ varovßnφ m∙₧eme aplikaci bez problΘm∙ generovat, ale pozd∞ji nßs m∙₧e p°ekvapit neoΦekßvan²m chovßnφm.
Pokud odstranφme vÜechny chyby a nekonzistence, staΦφ v menu zvolit volbu Build All a v²sledn² zdrojov² k≤d aplikace se vygeneruje do vybranΘho adresß°e. Pro b∞h aplikace je potom zapot°ebφ databßzov² server, kter² jsme urΦili ve fßzi mapovßnφ datovΘho modelu, a webov² server s podporou Javy v konfiguraci obdobnΘ serveru Apache Tomcat, kter² je souΦßstφ instalaΦnφho balφku WebRatia.
DalÜφ informace
Tento Φlßnek p°inesl alespo≥ ΦßsteΦnΘ vysv∞tlenφ, jak se postupuje p°i v²voji webovΘ aplikace v prost°edφ WebRatio. Podrobn∞jÜφ popis jednotliv²ch krok∙ vΦetn∞ p°φklad∙ lze nalΘzt ve velice vyda°en²ch manußlech, kterΘ jsou souΦßstφ instalaΦnφho balφku tohoto nßstroje.
WebML - Web Modeling Language
SΘrie Φlßnk∙ popisuje zßklady technologie WebML - specißlnφ metodologie pro v²voj web-based aplikacφ, odvozenΘ od UML. Autor poukazuje nejen na v²hody, ale i na slabß mφsta, a radφ, jak je vyu₧φt ve vlastnφ prosp∞ch. Tato sΘrie Φlßnk∙ dosud nebyla ukonΦena!
- WebML - tvorba aplikacφ v prost°edφ WebRatio (prßv∞ Φtete)
- WebML - operace a manipulace s daty
- WebML - struktura webovΘ aplikace
- WebML - navigaΦnφ model
- WebML - kompozice webovΘ aplikace
- WebML - datovΘ modelovßnφ
- WebML - projektovßnφ webov²ch aplikacφ
