Grafikus keretrendszer komponensalapú webalkalmazások fejlesztéséhez Székely István Debreceni Egyetem, Informatikai Intézet
A rendszer felépítése szerver a komponenseket szolgáltatja Java nyelvű implementáció kliens böngésző HTML és JavaScript alapokon a kliens és a szerver egymással folyamatosan kommunikál a változások szinkronizálásához
Komponensek jellemzői jól elkülöníthetőek az alkalmazás többi részétől pontosan definiált feladatot látnak el más komponensekkel együttműködésre képesek a komponensek egymástól függetlenül fejleszthetők és tesztelhetők
A komponensek implementációja célszerű szétválasztani az adatokat a megjelenítéstől MVC tervezési minta alkalmazása (modell, nézet, vezérlő elkülönül) Java interfészek a fenti részekhez az interfészeken túl informálisan megadott szemantikai szabályok konténerek: speciális komponensek több komponens összefogására
Komponensszerver Java Servletek és JSP lapok konfiguráció XML állománnyal komponens neve implementáló osztály neve a szükséges paraméterek információk a grafikus módban való szerkesztéshez indulás után a komponensek elérhetők kérelem esetén a komponensnek megfelelő HTML kódot továbbítja a kliens felé
Példa konfiguráció <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE components SYSTEM "components.dtd"> <components> <component id="table"> <description>table</description> <class>components.table</class> <image-url>/editor/images/table.gif</image-url> <property name="rows" desc="number of rows"/> <property name="cols" desc="number of columns"/> </component> <container id="borderlayout"> <description>container with border layout</description> <class>components.borderlayout</class> <image-url>/editor/images/borderlayout.gif</image-url> </container> </components>
Kliens böngésző erős JavaScript támogatással (Mozilla) felhasználói felülete a szokásos eszköztár komponenspaletta komponenshierarchia fában ábrázolva új komponens egérrel helyezhető el a szerkesztett weblapon a beillesztés a DOM API felhasználásával történik
A felhasználói felület
Document Object Model platform- és nyelvfüggetlen API W3C ajánlás jólformázott HTML és XML lapok kezelhetők (elemek hozzáadása, módosítása, törlése) a weblapok HTML dokumentumként értelmezettek a DOM API JavaScript implementációja elérhető a böngészőben interaktív szerkesztés lehetséges
Szinkronizáció a szerverrel a kész lapokat a szerver tárolja gondoskodni kell az újbóli szerkesztésről HTML formátum nem megfelelő DOM dokumentum építése a szerveren csak a komponenshierarchia egyszerűbb, mint a kliensnél tárolás XML formátumban folyamatos kétirányú kommunikáció
A tárolt XML formátuma <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE web-page SYSTEM "web-page.dtd"> <web-page> <container id="layout" type="borderlayout"> <component constraint="center" id="content" type="table"> <property name="rows" value="3"/> <property name="cols" value= 5"/> </component> </container> </web-page>
A végleges lapok előállítása dinamikus lapokra van szükség XML JSP konverzió a komponensek megjelenítése saját tagkönyvtárral történik
Példa egy végleges lapra <%@ taglib uri="component.tld" prefix="component" %> <%@ page contenttype="text/html" %> <html> <body>... <component:show id="content" type="table"> <component:property name="rows" value="4" /> <component:property name="cols" value="5" /> </component:show>... </body> </html>
Fejlesztési lehetőségek saját komponensek felhasználása a beépítetteken kívül saját komponensek készítésének támogatása a weblapok közötti navigáció kezelése
Köszönöm figyelmüket! Székely István iszekely@inf.unideb.hu