Grafikus keretrendszer komponensalap´ u webalkalmaz´ asok fejleszt´ es´ ehez Sz´ ekely Istv´ an Debreceni Egyetem, Informatikai Int´ezet
[email protected]
Kivonat Az Internet ut´ obbi ´evekben v´egbemen˝ o nagym´ert´ek˝ u fejl˝ od´ese az alkalmaz´ asok egy u ´j csoportj´ anak l´etrej¨ ott´et eredm´enyezte. Ezeket az alkalmaz´ asokat ¨ osszefoglal´ o n´even webalkalmaz´ asoknak nevezz¨ uk, mivel ezek a World Wide Web-et v´ alasztott´ ak platformjuknak”. ” A fejleszt˝ ok az ´evek sor´ an k¨ ul¨ onf´ele m´ odszertanokat alkottak ´es sz´ amos fejleszt˝ oeszk¨ ozt k´esz´ıtettek a program´ır´ as megk¨ onny´ıt´es´ere. A mai fejleszt˝ oi k¨ ornyezetek grafikus fel¨ ulettel rendelkeznek, ´es a sz¨ ovegszerkeszt˝ on ´es a ford´ıt´ oprogramon k´ıv¨ ul sz´ amos k´enyelmi szolg´ altat´ asuk van. Webalkalmaz´ asok eset´en szint´en sz¨ uks´eg van ilyen eszk¨ ozre. Cikkemben egy altalam k´esz´ıtett fejleszt˝ ´ oeszk¨ oz ker¨ ul bemutat´ asra, ami maga is egy webalkalmaz´ as. A keretrendszeren bel¨ ul weblapjainkat u ´jrafelhaszn´ alhat´ o komponensekb˝ ol ´ep´ıthetj¨ uk fel, amik a fejleszt´es sor´ an leggyakrabban el˝ ofordul´ o r´eszfeladatokat v´egzik el. Cikkemben bemutatom, hogy hogyan ker¨ ult megval´ os´ıt´ asra a kliens-szerver architekt´ ur´ aj´ u elosztott keretrendszer, valamint hogy hogyan t¨ ort´enhet ebben egy alkalmaz´ as elk´esz´ıt´ese ´es abb´ ol m˝ uk¨ od˝ o JSP lapok el˝ o´ all´ıt´ asa.
1.
Bevezet´ es
Kezdetben a programokat egyedi ig´enyek kiszolg´al´as´ara k´esz´ıtett´ek. A sz´am´ıt´og´epek elterjed´es´evel egyre t¨ obbf´ele alkalmaz´ ast kellett k´esz´ıteni, ami a kor´abban m˝ uk¨od˝o m´odsze´ szempontok ker¨ rekkel nem volt lehets´eges. Uj ultek el˝ot´erbe: csapatmunka, u ´jrafelhaszn´alhat´os´ ag, min˝ os´egbiztos´ıt´ as. Ezeket az ig´enyeket csak megfelel˝o szervez´essel lehetett kiel´eg´ıteni. Az alkalmaz´ asokat j´ ol elk¨ ul¨ on´ıthet˝o r´eszekre, modulokra kellett bontani u ´gy, hogy az egyes modulok egym´ ast´ ol f¨ uggetlen¨ ul fejleszthet˝ok ´es tesztelhet˝ok legyenek. A modulokat tov´abbi r´eszekre lehet bontani, m´ıg v´eg¨ ul eljutunk a komponensekig.
2.
Komponensek
Egy komponens az alkalmaz´ asok olyan atomi r´esze, amely j´ol meghat´arozott feladatot l´at el, valamilyen pontosan defini´ alhat´o funkcionalit´assal rendelkezik, ´es egy¨ uttm˝ uk¨od´esre k´epes az alkalmaz´ as t¨ obbi komponens´evel. 1
A komponenseket k´etf´ele szempont figyelembev´etel´evel kell elk´esz´ıts¨ uk. Els˝ok´ent arra kell t¨ orekedn¨ unk, hogy komponenseink valamilyen gyakran el˝ ofordul´o feladatra adjanak megold´ast. C´elszer˝ u lehet egy olyan komponens elk´esz´ıt´ese, amely adatb´azisban t´arolt adatok alapj´ an egy t´ abl´ azatot jelen´ıt meg. Amennyiben a feladatra siker¨ ul el´eg ´altal´anos megold´ast tal´ alni, ugyanakkor m´egsem ´er¨ unk el t´ ulzott bonyolults´agot, komponens¨ unk az alkalmaz´ as m´asik pontj´ an, s˝ ot, m´ asik alkalmaz´asban u ´jra felhaszn´alhat´o lesz. Az u ´jrafelhaszn´ alhat´ os´ agon k´ıv¨ ul a cser´elhet˝os´eget is ki kell emelni. Elk´epzelhet˝o, hogy ugyanarra a feladatra t¨ obbf´ele implement´aci´ot is tudunk k´esz´ıteni. A implement´aci´ok k¨ oz¨ ul b´ armelyiket v´ alasztjuk is, a t¨obbi komponensnek tudni kell kommunik´alni vele. Ez legk¨ onnyebben interf´eszek defini´al´as´aval ´erhet˝o el.
2.1.
A komponensek implement´ aci´ oja
Webalkalmaz´asok fejleszt´ese sor´ an gyakran el˝ofordul, hogy valamilyen inform´aci´ohalmazt kell valamilyen – esetleg t¨ obbf´ele – m´ odon megjelen´ıteni. Az inform´aci´ohalmaz el˝o´all´ıt´asa param´eterekt˝ ol f¨ ugg. C´elszer˝ u az adatok kezel´es´e´ert ´es a megjelen´ıt´es´ert felel˝os r´eszeket k¨ ul¨onv´alasztani. Ennek az elvnek felel meg az MVC tervez´esi minta, melyben az adatok (modell, M), a megjelen´ıt´es (n´ezet, V) ´es az ezeket ir´any´ıt´o vez´erl˝o (kontroller, C) elk¨ ul¨on¨ ul egym´ ast´ ol. Az MVC mint´ ara m´ar nagyon sok rendszert ´ep´ıtettek, p´eld´aul a Swinget, amely GUI alkalmaz´ asok k´esz´ıt´esre szolg´al´o Java API [1]. A komponensek implement´ aci´ oja a keretrendszerben Java nyelven t¨ort´ent, ´es szint´en az MVC tervez´esi mint´ at k¨ oveti. Az ¨osszetev˝oknek megfelel˝oen defini´altam h´arom interf´eszt. A f˝ o interf´esz a kontrollert ´ırja le, melynek met´odusai a param´eterek be´all´ıt´as´anak ´es a megjelen´ıt´esnek a m´ odj´ at defini´alj´ak. public interface Component { void init(String id, java.util.Map properties); void print(java.io.PrintWriter out); } Minden, a rendszerbe illeszked˝ o komponensnek ezt az interf´eszt kell implement´alni. A modellhez ´es a megjelen´ıt´eshez t´ arsul´o interf´eszek implement´al´as´ar´ol a komponens k´esz´ıt˝oje szabadon d¨ onthet, ´ am ezek haszn´alata is aj´anlott. public interface Model { void init(java.util.Map properties); boolean hasMoreItems(); Object[] nextItem(); } public interface View { void print(java.io.PrintWriter writer); } A el˝obb interf´eszek implement´ al´ as´an t´ ul n´eh´any formai k¨ ovetelm´enynek is meg kell felelni. Ezek a szab´ alyok nem szintaktikai, hanem szemantikai szab´alyok, ´ıgy puszt´an interf´eszekkel nem defini´ alhat´ ok. Ezen szab´alyoknak megfelel˝o komponensek k´esz´ıt´ese automatiz´ alhat´ o, amivel a fejleszt´es menete leegyszer˝ us´ıthet˝o ´es felgyors´ıthat´o [2].
2
2.2.
Kont´ enerek
A kont´enerek speci´ alis komponensek, m´egpedig az´ert, mert tartalmazhatnak m´as komponenseket. Ezek a komponensek term´eszetesen szint´en lehetnek kont´enerek, ´ıgy a komponenseknek egy tartalmaz´ asi hierarchi´aja hozhat´o l´etre. A kont´enerekhez szint´en tartozik egy interf´esz, ´am ez nem tartalmaz egyetlen met´odusdeklar´ aci´ ot sem, csup´ an jel¨ ol˝ ointerf´esz szerep´et t¨olti be.
3.
Komponensszerver
A fejleszt˝ orendszer kliens-szerver architekt´ ur´ara ´ep¨ ul. A komponenseket egy szerver szolg´altatja a b¨ ong´esz˝ oben m˝ uk¨ od˝ o kliensnek. Az implement´aci´o a Java Servlet technol´ogi´an [3] ´es a JavaServer Pages technol´ ogi´ an [4] alapul.
3.1.
Konfigur´ aci´ o
A szerver a rendelkez´esre ´ all´o komponensek list´aj´at egy XML [5] ´allom´anyb´ol olvassa be az ¨osszes olyan inform´ aci´ oval egy¨ utt, ami a grafikus m´odban val´o szerkeszt´eshez sz¨ uks´eges. Ide tartozik a komponens azonos´ıt´oja, ami a k´es˝obbiekben egy komponens t´ıpus´at jel¨oli ki. Fel kell sorolni a komponenseink ¨osszes jellemz˝oj´et, ami a m˝ uk¨od´eshez sz¨ uks´eges (a param´eterek), de nem hagyhat´ok ki a GUI-n val´o megjelen´eshez sz¨ uks´eges inform´aci´ ok sem, mint p´eld´ aul a r¨ ovid le´ır´as, ami eszk¨oztippk´ent (tool tip) jelenhet meg, vagy a komponenst ´ abr´ azol´ o ikon. Mindezek mellett a legl´enyegesebb inform´aci´o a komponenst implement´ al´ o oszt´ aly teljes min˝os´ıtett neve. Egy XML konfigur´ aci´ os ´ allom´ any teh´at a k¨ovetkez˝ok´eppen n´ezhet ki:
<description>Table components.Table /editor/images/table.gif <property name="rows" desc="Number of rows"/> <property name="cols" desc="Number of columns"/> <description>Container with border layout components.BorderLayout /editor/images/borderlayout.gif A szerver indul´ askor beolvassa ´es feldolgozza ezt az ´allom´anyt, ´es ez alapj´an ¨ossze´all´ıtja a komponensek ´es a kont´enerek list´aj´at.
3
3.2.
A szerver szolg´ altat´ asai
M˝ uk¨od´es k¨ ozben a szerver a k¨ ovetkez˝o inform´aci´okat tudja szolg´altatni a kliensnek: – a rendelkez´esre ´ all´ o komponensek list´aja – a rendelkez´esre ´ all´ o kont´enerek list´aja – egy komponens ¨ osszes inform´ aci´ oja (bele´ertve a kont´enereket is) – egy adott t´ıpus´ u komponens kont´ener-e – egy komponens p´eld´ any
4.
A kliens
A kliens implement´ al´ asa szint´en JSP technol´ogi´aval t¨ort´ent, de a Javascript is nagy szerephez jutott, mivel a b¨ ong´esz˝ ok nagy r´esz´et ezen a nyelven lehet programozni. A felhaszn´al´ oi fel¨ ulet fels˝ o r´esz´en egy eszk¨ozt´ar tal´alhat´o, amely az alapvet˝o funkci´okat (´ uj weblap, ment´es, el˝ on´ezet stb.) ir´ any´ıt´o gombokat tartalmazza. Az eszk¨ozt´ ar alatt a b¨ ong´esz˝ o ablaka k´et r´eszre van osztva. A jobb oldali r´esz a szerkeszt˝ oter¨ ulet, amely szinte az eg´esz ablakot kit¨olti. Weblapjainkat ezen a ter¨ uleten hozhatjuk l´etre. A baloldali s´ avban legfel¨ ul a komponenseket, majd azok alatt a kont´enereket ´abr´azol´o ikonokat tal´ aljuk meg. A k¨ oz´eps˝ o r´esz a szerkeszt´es alatt ´all´o weblapon elhelyezett komponensek hierarchi´ aj´ at tartalmazza, fak´ent ´abr´azolva azt. A bal als´o sarokban egy komponens tulajdons´ agait tal´ alhatjuk meg t´abl´azatba rendezve.
4.1.
Komponens elhelyez´ ese a weblapon
´ komponenst a k¨ Uj ovetkez˝ ok´eppen illeszthet¨ unk be a szerkesztett weblapba. A megfelel˝o ikonnal kiv´ alasztjuk a komponens t´ıpus´at, majd a szerkeszt˝oter¨ uleten az eg´errel kijel¨olj¨ uk a hely´et. Ezut´ an ki kell t¨ olteni egy u ˝rlapot, amely a komponens azonos´ıt´oj´an (ID) k´ıv¨ ul annak ¨osszes tulajdons´ ag´ at is tartalmazza. A k´es˝obbi szerkeszt´es sor´an egy komponens az ID-vel egy´ertelm˝ uen azonos´ıthat´ o. A sz¨ uks´eges param´eterek kit¨ olt´ese ut´an a szerver elk¨ uldi a komponens megjelen´ıt´es´ehez sz¨ uks´eges HTML k´ odot a kliensnek. Ezt felhaszn´alva a komponens megjelen´ıthet˝o a szerkeszt˝ oben. A HTML k´ od beilleszt´es´ehez az alkalmaz´as a DOM-ot haszn´alja. 4.1.1.
DOM
A DOM (Document Object Model) a W3C ´altal specifik´alt, platform- ´es nyelvf¨ uggetlen API, amellyel ´erv´enyes HTML ´es j´ol-form´azott XML dokumentumok kezelhet˝ok [6]. A DOM defini´ alja a dokumentumok logikai szerkezet´et ´es a dokumentumokhoz val´o hozz´af´er´es ´es kezel´es m´ odj´ at. Seg´ıts´eg´evel dokumentumok ´ep´ıthet˝ok fel, navig´alhatunk a strukt´ ur´ aban, valamint elemek adhat´ ok hozz´a, m´odos´ıthat´ok ´es t¨or¨olhet˝ok. A b¨ ong´esz˝ ok a weblapokat HTML dokumentumk´ent kezelik, ´es elemeit el´erhet˝ov´e teszik a specifik´ aci´ oban le´ırtak szerint. Az elemeknek megfelel˝o Javascript objektumok implement´ alj´ ak az API-ban defini´ alt interf´eszeket. ´Igy v´alik lehet˝ov´e a szerkeszt˝oter¨ ulet interakt´ıv m´ odon val´ o szerkeszt´ese. 4
4.2.
Szinkroniz´ aci´ o a kliens ´ es a szerver k¨ oz¨ ott
Az elk´esz¨ ult lapok ment´es´er˝ ol, t´ arol´ as´ar´ol a szerver gondoskodik. Biztos´ıtani kell, hogy az elmentett lapok tov´ abbi szerkeszt´esre visszat¨olthet˝ok legyenek, ami a lapok HTML form´atumban val´ o t´ arol´ asa eset´en nem val´os´ıthat´o meg. A megold´ast az jelenti, ha a szerveren is fel´ep´ıt¨ unk egy DOM dokumentumot, ami azonban sokkal egyszer˝ ubb, mint a b¨ong´esz˝ oben megjelen´ıtett HTML dokumentum. Csup´an a komponensek hierarchi´aj´at kell t´arolnunk. A DOM API lehet˝ os´eget ad a szerveren fel´ep´ıtett dokumentum XML ´allom´anyban val´o t´arol´ as´ ara. Egy olyan lap, amin egy kont´ener, azon bel¨ ul egy komponens van, a k¨ovetkez˝ oh¨ oz hasonl´ o XML ´ allom´ annyal adhat´o meg: <web-page>
<property name="rows" value="3"/> <property name="cols" value="4"/> A szerveroldali dokumentum elk´esz´ıt´ese csak u ´gy lehets´eges, ha szerkeszt´es k¨ozben folyamatosan nyomon k¨ ovetj¨ uk a kliensen v´egbemen˝o m´odos´ıt´asokat. A kliens minden v´altoztat´ asr´ ol ´ertes´ıti a szervert, hogy a megfelel˝o adminisztr´aci´o elv´egezhet˝o legyen.
5.
Az elk´ esz¨ ult lapok megjelen´ıt´ ese
A lapok XML form´ atumban val´ o t´ arol´asa biztos´ıtja a tov´abbi szerkeszthet˝os´eget, de nem t´amogatja a megjelen´ıt´est. Megjelen´ıt´es el˝ott a lapok konverzi´oj´ara van sz¨ uks´eg, m´egpedig olyan m´ odon, hogy dinamikus voltuk megmaradjon, ´es a tartalmazott komponensek megjelen´ıthet˝ ok legyenek. Megold´ ast jelent az XML ´ allom´ anyok transzform´al´asa JSP oldalakk´a. Ebben elhelyezhet¨ unk HTML elemeket, de a komponensek beilleszt´es´er˝ol is tudunk gondoskodni. Minden komponens hely´et egy saj´ at JSP tag jelzi, melynek a komponens l´etrehoz´asa ´es a tartalom el˝o´ all´ıt´ asa a feladata. Az erre szolg´ al´ o eszk¨ ozk´eszlet r´esze a JSP technol´ogi´anak. L´etrehozhatunk saj´at tagk¨onyvt´arakat, melyek funkcionalit´ as´ at Java oszt´alyokkal implement´alhatjuk. A transzform´alt lapok az al´ abbihoz hasonl´ o elemeket tartalmazhatnak: <%@ taglib uri="component.tld" prefix="component" %> <%@ page contentType="text/html" %> ...
5
...
6.
Tov´ abbi lehet˝ os´ egek
A jelenlegi rendszerben lehet˝ os´eg van dinamikus weblapok grafikus fel¨ uleten val´o elk´esz´ıt´es´ere. A lapokat egy el˝ ore elk´esz´ıtett komponensk´eszlet seg´ıts´eg´evel hozhatjuk l´etre, amik azt´ an elmenthet˝ ok ´es k´es˝ obb szerkeszt´es c´elj´ab´ol bet¨olthet˝ok. A komponensek elk´esz´ıt´es´et a keretrendszer nem t´amogatja, azokat t˝ole f¨ uggetlen¨ ul kell l´etrehozni, elhelyezni a szerveren ´es felvenni a konfigur´aci´os ´allom´anyba a megfelel˝o bejegyz´eseket. Egyfajta tov´ abbfejleszt´esi lehet˝os´eg ennek a hi´anyoss´agnak a megsz¨ untet´ese. A k´esz weblapok k¨ oz¨ otti navig´ aci´o szint´en nem adhat´o meg a keretrendszerben, ami az el˝oz˝ot˝ ol nagyobb h´ atr´ any. Egy igazi webalkalmaz´as sok weblapb´ol ´all, ´es a m˝ uk¨od´es ´ az ezek k¨ oz¨ otti navig´ aci´ on alapul. Eppen ez´ert ez a fejleszt´esi ir´any sokkal l´enyegesebb.
Hivatkoz´ asok [1] Sun Microsystems, Inc.: Java Foundation Classes (JFC/Swing), http://java.sun.com/products/jfc/, 1999 [2] J´on´as Rich´ ard: Komponensalap´ u webalkalmaz´ as-fejleszt˝ o rendszer, Networkshop 2003, P´ecs [3] Sun Microsystems, Inc.: Java Servlet Technology, http://java.sun.com/products/servlet/index.jsp [4] Sun Microsystems, Inc.: JavaServer Pages Technology, http://java.sun.com/products/jsp/index.jsp [5] T. Bray, J. Paoli, C. M. Sperberg-McQueen, E. Maler, F. Yergeau: Extensible Markup Language (XML) 1.0 (Third Edition), World Wide Web Consortium, 2004 http://www.w3.org/TR/2004/REC-xml-20040204 [6] L. Wood, A. Le Hors, V. Apparao, S. Byrne, M. Champion, S. Isaacs, I. Jacobs, G. Nicol, J. Robie, R. Sutor, C. Wilson: Document Object Model (DOM) Level 1 Specification (Second Edition), World Wide Web Consortium, 2000 http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929
6
