<meta http-equiv='pics-label' content='(pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline EN v2.0" l gen true for "http://interval.cz" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://interval.cz" r (n 0 s 0 v 0 l 0))' />
<h2>WebML - tvorba aplikacφ v prost°edφ WebRatio</h2>
<p id='prepend'>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.</p>
<h3>WebRatio</h3>
<p>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 <strong>t²movou prßci</strong> 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).</p>
<p>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ß.</p>
<h3>Instalace</h3>
<p>Nejnov∞jÜφ zkuÜebnφ verzi WebRatia si m∙₧ete stßhnout na adrese <a href='http://www.webratio.com'>www.webratio.com</a>. ZkuÜebnφ verze mß kolem 40 MB a je omezena dobou pou₧itφ na t°i m∞sφce.</p>
<p>InstalaΦnφ balφk se sklßdß z n∞kolika souΦßstφ:</p>
<li>nßstroj EasyStyler slou₧φcφ k nßvrhu prezentaΦnφ vrstvy</li>
<li>velice kvalitnφ manußly pro WebML a WebRatio</li>
<li>n∞kolik ukßzkov²ch aplikacφ</li>
</ul>
</div>
<p>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.</p>
<h3>U₧ivatelskΘ rozhranφ</h3>
<p>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∞.</p>
<br /><span class='comment'>Obrßzek Φ. 1: WebRatio - hlavnφ okno aplikace (<a href='podklady/zelenka/1015/gui.png'>plnß velikost, cca 30 kB</a>)</span>
</div>
<p>Hlavnφ okno aplikace je rozd∞leno do Φty° zßkladnφch Φßstφ:</p>
<div class='list'>
<ul>
<li><strong>Hlavnφ menu</strong> a nßstrojovß liÜta se do urΦitΘ mφry suplujφ. Odsud jsou standardn∞ p°φstupnß vÜechna nastavenφ, funkce a nßstroje.</li>
<li><strong>Lev² sloupec</strong>
<ul>
<li>V hornφ Φßsti levΘho sloupce m∙₧eme pro prochßzenφ projektu pou₧φt takzvan² <strong>Project Tree</strong>, kter² p°edstavuje hierarchickΘ zobrazenφ vÜech souΦßstφ projektu.</li>
<li>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).</li>
</ul>
</li>
<li><strong>Hlavnφ pracovnφ plocha</strong> funguje jako vektorov² grafick² editor pro vytvß°enφ jednotliv²ch diagram∙.</li>
<li><strong>Debug okno</strong>, ve kterΘm m∙₧eme sledovat v²sledky kontroly konzistence a chyb v modelu.</li>
</ul>
</div>
<p>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.</p>
<h3>Transformace modelu na www aplikaci</h3>
<p>Zßkladem pro vytvo°enφ funkΦnφ aplikace je samoz°ejm∞ ·pln² model WebML, kter² se sklßdß z <a href='http://interval.cz/clanek.asp?article=2959' title='Zelenka, Petr: WebML - datovΘ modelovßnφ'>datovΘho</a> a <a href='http://interval.cz/clanek.asp?article=3062' title='Zelenka, Petr: WebML - kompozice webovΘ aplikace'>hypertextovΘho</a> 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.</p>
<h4>Architektura aplikace</h4>
<p>VÜechny aplikace generovanΘ z WebRatia majφ t°φvrstvou architekturu, kterß je zalo₧ena na objektovΘm modelu <strong>Model View Controller</strong> (MVC) a implementovßna v prost°edφ J2EE. V tΘto fßzi odkazuji vÜechny neznalΘ problematiky MVC na Φlßnek <a href='http://www.churchillobjects.com/c/14058.html'>Model-View-Controller Pattern</a>. 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:</p>
<div class='list'>
<ul>
<li><strong>Controller</strong>: 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.</li>
<li><strong>Model</strong>: 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).</li>
<li><strong>View</strong>: Tyto objekty p°edstavujφ grafick² front-end aplikace, starajφ se o vykreslenφ v²slednΘho u₧ivatelskΘho rozhranφ.</li>
</ul>
</div>
<p>Pro WebRatio byla tato architektura ΦßsteΦn∞ pozm∞n∞na. Podrobn∞ji znßzor≥uje celkovou architekturu aplikace <a href='podklady/zelenka/1015/architektura.png'>tento obrßzek</a>. Ka₧dß WebML strßnka musφ mφt definovßny nßsledujφcφ Φty°i souΦßsti:</p>
<div class='list'>
<ul>
<li><strong>Objekt akce (model)</strong>: 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φ.</li>
<li><strong>Slu₧ba strßnky (model)</strong>: Starß se o aplikaΦnφ logiku (dotazovßnφ na databßzi, validace formulß°∙ a dalÜφ).</li>
<li><strong>JSP Üablona (view)</strong>: Prost°ednictvφm JSP Üablony je generovßn v²sledn² HTML k≤d.</li>
<li><strong>Mapovßnφ akcφ</strong> 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).</li>
</ul>
</div>
<p>Zpracovßnφ ka₧dΘ strßnky probφhß zhruba takto:</p>
<div class='list'>
<ul>
<li>Pokud je na server odeslßn po₧adavek na vystavenφ strßnky, je tento po₧adavek zpracovßn pomocφ <strong>Controlleru</strong>, 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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
</ul>
</div>
<h3>Generovßnφ aplikace</h3>
<p>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.</p>
<h4>Mapovßnφ datovΘho modelu</h4>
<p>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φ:</p>
<div class='list'>
<ul>
<li>Nechßme si strukturu databßze automaticky vygenerovat.</li>
<li>Namapujeme datov² model na existujφcφ databßzi.</li>
</ul>
</div>
<p>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 <strong>JDBC</strong> rozhranφ.</p>
<p>Mo₧nost p°ipojenφ nebo editace datovΘho zdroje nalezneme v Project Tree, pokud si ho p°epneme do takzvanΘho Mapping View:</p>
<p>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.</p>
<p>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.</p>
<h4>PrezentaΦnφ vrstva aplikace - design</h4>
<p>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.</p>
<p>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.</p>
<p>Definice prezentaΦnφ vrstvy p°edstavuje dva odd∞lenΘ ·koly:</p>
<div class='list'>
<ul>
<li>UrΦit rozlo₧enφ jednotliv²ch prvk∙ (units) v rßmci strßnky.</li>
<li>Definovat design jednotliv²ch units a layout webu.</li>
</ul>
</div>
<p>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² <strong>page grid</strong>:</p>
<p>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∞).</p>
<p>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 <strong>Easy Styler</strong>:</p>
<p>Styl ka₧dΘho webu obsahuje nßsledujφcφ souΦßsti:</p>
<div class='list'>
<dl>
<dt>Layout strßnky</dt>
<dd>
<p>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: <samp><easystyle:landmark-area-menu level="1"></easystyle:landmark-area-menu></samp>. 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 <code><easystyle:grid /></code>.</p>
<p>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 <a href='podklady/zelenka/1015/sablona.zip'>ukßzkov² p°φklad Üablony</a>, kde m∙₧ete nalΘzt dalÜφ specißlnφ znaΦky.</p>
</dd>
<dt>Vzhled jednotliv²ch units</dt>
<dd>
<p>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.</p>
<p>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".</p>
</dd>
</dl>
</div>
<h4>Ov∞°enφ konzistence modelu</h4>
<p>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.</p>
<p>Pokud odstranφme vÜechny chyby a nekonzistence, staΦφ v menu zvolit volbu <strong>Build All</strong> 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.</p>
<h3>DalÜφ informace</h3>
<p>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.</p><div class='refer'><h3><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/serial.asp?serial=16' title='p°ehled Φlßnk∙ vΦetn∞ anotacφ'>WebML - Web Modeling Language</a></h3><p>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!</p><ul><li><strong>WebML - tvorba aplikacφ v prost°edφ WebRatio</strong> (prßv∞ Φtete)</li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3412'>WebML - operace a manipulace s daty</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3297'>WebML - struktura webovΘ aplikace</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3158'>WebML - navigaΦnφ model</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3062'>WebML - kompozice webovΘ aplikace</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2959'>WebML - datovΘ modelovßnφ</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=2893'>WebML - projektovßnφ webov²ch aplikacφ</a></li></ul></div>
