RAZVOJ SPLETNIH APLIKACIJ Z OGRODJEM VAADIN · RAZVOJ SPLETNIH APLIKACIJ Z OGRODJEM VAADIN Stran 1 1 UVOD V zadnjih letih se je zelo pove čal razvoj spletnih aplikacij in z njim

Mitja Skuhala

RAZVOJ SPLETNIH APLIKACIJ Z OGRODJEM VAADIN

Diplomsko delo

Maribor, marec 2012

I

Diplomsko delo univerzitetnega študijskega programa


Študent: Mitja Skuhala

Študijski program: UN ŠP Računalništvo in informatika

Smer: Informatika

Mentor: red. prof. dr. Marjan Heričko, univ.dipl.inž. rač. in inf.

Somentor: mag. Andrej Krajnc, univ.dipl.inž. rač. in inf.

Maribor, marec 2012

II

III

ZAHVALA

Zahvaljujem se mentorju izr. prof. dr. Marjanu

Heričku za pomoč in vodenje pri opravljanju

diplomskega dela. Prav tako se zahvaljujem

somentorju Andreju Krajnc.

Zahvaljujem se moji družini in ostalim, ki so me

podpirali ves čas študija.

Posebna zahvala velja Maji, ki me je spodbujala in

mi stala ob strani.

IV


Klju čne besede: Vaadin, Java, GWT, AJAX, JavaScript, RIA UDK: 004.41:004.777(043.2)

Povzetek

Diplomsko delo obsega predstavitev ogrodja Vaadin, njegovega delovanja ter prednosti in

slabosti ogrodja. Predstavili smo arhitekturo ogrodja Vaadin, katera temelji na

tehnologijah Ajax, GWT in JSON, ter ga primerjali z drugimi ogrodji. Opisali smo tudi

nekatere uporabniške vmesnike ter njihove dogodke in poslušalce. Pokazali bomo kako se

zgradi poljubna komponenta oziroma widget. V podjetju Iskratel smo izdelali lastno

ogrodje, ki temelji na ogrodju Vaadin, ki smo ga nato uporabili za izdelavo spletne

aplikacije na podlagi meta modelov.

V

DEVELOPMENT OF WEB APPLICATIONS WITH FRAMAWORK

VAADIN

Key words: Vaadin, Java, GWT, AJAX, JavaScript, RIA

UDK: 004.41:004.777(043.2)

Abstract

Graduate work includes a presentation of framework Vaadin, its operation and the

advantages and disadvantages of its use. We will present an architecture of framework

Vaadin, which is based on Ajax technology, GWT and JSON, and compare it with other

framewoks. We will outline some of the user interfaces and their events and listeners. We

will also show how to build a custom component or widget. In Iskratel we have created our

own framework, based on the framework Vaadin, which was then used to create Web

application based on meta models.

VI

VSEBINA

1 UVOD ........................................................................................................................... 1

2 OGRODJA ZA RAZVOJ SPLETNIH APLIKACIJ............... ................................ 2

2.1 ZNAČILNOSTI SPLETA 2.0........................................................................................ 2

2.2 BOGATE SPLETNE APLIKACIJE................................................................................. 3

2.3 DELITEV SPLETNIH OGRODIJ................................................................................... 6

3 OGRODJE VAADIN ................................................................................................ 10

3.1 UVOD ................................................................................................................... 10

3.2 ARHITEKTURA OGRODJA VAADIN...................................................................... 12

3.2.1 Tehnika AJAX .................................................................................................. 14

3.2.2 Ogrodje Google Web Toolkit........................................................................... 15

3.2.3 Format JSON................................................................................................... 16

3.2.4 Aplikacija kot javanska Servlet seja ................................................................ 17

3.2.5 Izvajalno okolje na strani odjemalca............................................................... 17

3.2.6 Dogodki in poslušalci ...................................................................................... 18

4 GRADNJA UPORABNIŠKEGA VMESNIKA ...................................................... 21

4.1 UVOD ................................................................................................................... 21

4.2 VMESNIKI IN ABSTRAKCIJE................................................................................... 22

4.2.1 Vmesnik Component ........................................................................................ 23

4.2.2 Razred AbstractComponent............................................................................. 24

4.2.3 Poljne komponente (Field in AbstractField) ................................................... 24

4.2.4 Vmesnik Field .................................................................................................. 25

4.3 SKUPNE LASTNOSTI KOMPONENT.......................................................................... 25

4.4 STANDARDNE KOMPONENTE................................................................................. 28

4.4.1 Labela .............................................................................................................. 28

4.4.2 Povezava.......................................................................................................... 28

4.4.3 Tekstovno polje ................................................................................................ 29

4.4.4 Datum in čas....................................................................................................29

4.4.5 Gumb ............................................................................................................... 30

VII

4.4.6 Potrditveno polje ............................................................................................. 30

4.4.7 Izbira................................................................................................................ 30

4.4.8 Tabela .............................................................................................................. 31

4.4.9 Vgrajena komponenta...................................................................................... 31

4.5 POSTAVITVENE KOMPONENTE.............................................................................. 32

4.5.1 Vertikalna in horizontalna postavitvena komponenta..................................... 32

4.5.2 Mrežna postavitvena komponenta ................................................................... 33

4.5.3 Plošča .............................................................................................................. 33

4.5.4 Horizontalna in vertikalna razdeljena plošča ................................................. 33

4.5.5 Zavihki ............................................................................................................. 34

4.5.6 Zgibni meni ...................................................................................................... 34

4.5.7 Absolutna postavitvena komponenta. .............................................................. 34

4.6 PODATKOVNI MODEL OGRODJA VAADIN .............................................................. 34

4.6.1 Lastnost............................................................................................................ 37

4.6.2 Držanje vrednosti v vrsticah............................................................................ 38

4.6.3 Zbiranje vrstic v vsebnike................................................................................ 39

5 PRAKTI ČNI DEL ..................................................................................................... 40

5.1 UPORABLJENO OKOLJE......................................................................................... 40

5.2 OPREDELITEV PROBLEMA..................................................................................... 41

5.3 IT OGRODJE........................................................................................................... 41

5.4 SPLETNO OGRODJE................................................................................................ 44

5.5 SPLETNA APLIKACIJA............................................................................................ 45

5.6 METAMODEL ........................................................................................................ 46

5.7 UPORABA VTIČNIKOV ........................................................................................... 47

5.8 NITENJE................................................................................................................ 49

5.9 TEME .................................................................................................................... 50

5.10 LASTNE KOMPONENTE.......................................................................................... 50

5.11 PRESLIKAVA IT OGRODJA V SPLETNO IT OGRODJE................................................ 52

6 SKLEP........................................................................................................................ 56

7 VIRI, LITERATURA................................................................................................ 57

8 PRILOGE................................................................................................................... 59

VIII

8.1 SEZNAM SLIK ........................................................................................................ 59

8.2 SEZNAM PREGLEDNIC........................................................................................... 60

8.3 NASLOV ŠTUDENTA.............................................................................................. 60

IX

UPORABLJENE KRATICE

AJAX – Asynchronous JavaScript and XML

API – Application Programming Interface

AWT – Abstract Windows Toolkit

CSS – Cascade StyleSheet

DOM – Document Object Model

GWT – Google Web Toolkit

HTML – Hypertext Markup Language

HTTP – HyperText Transfer Protocol

IID – Item Identificator

IP – Internet Protocol

JDBC – Java Database Connectivity

JSF – Java Server Faces

JSON – JavaScript Object Nation

LDAP – Lightweight Directory Access Protocol

MAC – Media Access Control address

MVC – Model View Controller

PID – Property Identificator

POJO – Plain Old Java Objects

RIA – Rich Internet Applications

RMI – Remote Method Invocation

RPC – Remote Procedure Call

SNMP – Simple Network Management Protocol

SWT – Standart Widget Toolkit

UIDL – User Interface Definition Language

X

W3C – World Wide Web Consortium

URL – Uniform Resource Locator

XHTML – eXtensible Hypertext Markup Language

XML – eXtensible Markup Language

RAZVOJ SPLETNIH APLIKACIJ Z OGRODJEM VAADIN Stran 1

1 UVOD

V zadnjih letih se je zelo povečal razvoj spletnih aplikacij in z njim potreba po ponovni

uporabi. Podjetja si ne morejo privoščiti, da bi spletne aplikacije vedno znova gradila od

začetka, saj je to predrago in nekonkurenčno. Za boljšo produktivnost je potrebno čimbolj

uporabljati različne koncepte, ki dvigujejo stopnjo ponovne uporabe.

Z uveljavitvijo objektno-orientirane paradigme se je zelo dvignila stopnja ponovne

uporabe. Osnovni koncepti objektne tehnologije, kot so objekt, razred, ograjevanje,

abstrakcija, dedovanje in polimorfizem omogočajo izgradnjo ponovno uporabnih

komponent, ki imajo jasno definiran vmesnik in implementacijo skrito pred zunanjim

svetom. Razvoj na podlagi sestavljanja vnaprej izdelanih komponent ni izum razvoja

programske opreme, temveč se že dolgo uspešno uporablja v drugih industrijah, npr.

avtomobilski. Izkazalo se je, da je tak pristop mogoče uporabiti tudi na področju razvoja

programske opreme. Da bi izboljšali stopnjo ponovne uporabe, je bil uveden koncept

objektno-orientiranih ogrodij[12].

V zadnjih letih se je zelo povečalo število odprtokodnih ogrodjih za razvoj spletnih

aplikacij. Čeprav prevladujeta lastniški rešitvi Adobe Flex in Microsoft Silverlight, se

povečuje uporaba drugih odprtokodnih rešitev, ki temeljijo na različnih programskih

jezikih. Eno izmed javanskih ogrodij je ogrodje Vaadin, ki je še precej novo in še ni tako

poznano in uveljavljeno.

V drugem poglavju bomo raziskali kako lahko delimo spletna ogrodja in zakaj so tako

pomembna za razvoj bogatih spletnih aplikacija, ki temeljijo na spletu 2.0.

V tretjem poglavju bomo predstavili ogrodje Vaadin, opisali njegovo arhitekturo ter

raziskali katere tehnologije in druge koncepte uporablja za prikaz spletnih aplikacija.

V četrtem poglavju bomo opisali glavne razrede, vmesnike ter abstraktne razrede ogrodja

Vaadin. Pogledali bomo tudi lastnosti, ki so skupne vsem komponentam uporabniškega

grafičnega vmesnika.

Peto poglavje pa opisuje, kako smo razvijali spletno ogrodje in kako smo ga nato uporabili

za razvoj spletnih aplikacij.


2 OGRODJA ZA RAZVOJ SPLETNIH APLIKACIJ

Trenutno večina spletnih aplikacij temelji na konceptih spleta 2.0 (angl. Web 2.0). V

primerjavi s prejšnjo verzijo je v splet 2.0 uporabnik aktivno vključen v generiranje

vsebine in ni več le prejemnik statičnih spletnih strani. Za razvoj spletnih aplikacij, spleta

2.0, se pojavila potreba po novih drugačnih pristopih. Pojavila so se ogrodja za razvoj

bogatih spletnih aplikacij (angl. Rich Internet Applications - RIA).

2.1 Značilnosti spleta 2.0

Splet 2.0 je najbolj povezan s spletnimi aplikacijami, ki podpirajo razširjeno uporabnost,

izmenjavo informacij in sodelovanje na svetovnem spletu. Splet 2.0 torej omogoča

uporabnikom interakcijo in sodelovanje drug z drugim, poleg tega pa še vključuje

uporabnike kot aktivne člane, ki lahko sodelujejo pri ustvarjanju vsebin v virtualni

skupnosti. Ponuja veliko več kot je ponujal splet 1.0, ki je uporabnike omejil na pasivno

uporabo vsebin, ki so bile ustvarjene zanje. Splet 2.0 vključuje socialno mreženje, bloge,

wikije, spletne aplikacije, itd.[5].

Splet 2.0 je zmnožek spletnih tehnologij in inovacij uporabe, ki dopolnjujejo dotedanjo

uporabo in razumevanje spleta ter njegova ozadja, ki ga pogosto predstavljajo kot poslovno

revolucijo s premikom k internetu kot osnovi za uspeh. Bistvo spleta 2.0 je sodelovanje

uporabnikov interneta pri dopolnjevanju obstoječih in oblikovanju novih vsebin, medtem,

ko so uporabniki na spletu 1.0 uporabljali le obstoječe vsebine. Posameznik prispeva k

vsebini, zato splet 2.0 nudi informacije vseh možnih tem in področij. Sistem prinaša

kategorizacijo in urejenost vsebine s povezano arhitekturo. Sodelovanje pa hkrati zahteva

vedno hitrejše povezave in izboljšane tehnologije.

Splet 2.0 je mogoče opisati v 3 delih:

• Bogate internetne aplikacije (RIA) - opredeljuje izkušnje so iz namiznih aplikacij

prenesene v brskalnik, iz grafičnega vidika ali iz vidika uporabnosti.


• Spletno usmerjene arhitekture (angl. Web-oriented architecture - WOA) - je ključni

del v spletu 2.0, ki določa, kako aplikacije spleta 2.0 izpostavljajo svoje

funkcionalnosti, da jih lahko druge aplikacije uporabijo.

• Socialni splet (angl. Social Web) - določa, kako splet 2.0 vpliva na končnega

uporabnika, ki je sestavni del aplikacije.

Splet 2.0 združuje zmogljivosti programske opreme odjemalca in strežnika ter ponujanje

vsebine in uporaba omrežnih protokolov. Standardni spletni brskalniki lahko uporabljajo

vtičnike in druge programske razširitve, ki skrbijo za vsebino in uporabniške interakcije

2.2 Bogate spletne aplikacije

Bogata interneta aplikacija (RIA) je spletna aplikacija, ki ima veliko značilnosti namizne

aplikacije in se prikazuje v spletnem brskalniku s pomočjo AJAX tehnologije in običajno

potrebuje vtičnik za prikaz[7]. Take aplikacije v veliki meri uporabljajo jezik JavaScript in

navidezni stroj. Adobe Flash, Java in Microsoft Silverlight so trenutno najbolj pogoste

platforme za razvoj RIA aplikacij. Slika 1 prikazuje razširjenost uporabe ogrodij za razvoj

RIA aplikacij. Kot vidimo je v zadnjih letih precej narasla podpora ogrodju Silverlight.

Slika 1 – Prikaz uporabe tehnologij za RIA aplikacije[6]


Uporabnik mora v večini primerov pred zagonom aplikacije namestiti programsko opremo

ogrodja, ki uporablja računalnikov operacijski sistem, prenesti aplikacijo, jo posodobit in

pognat. To je glavna razlika med običajnimi namiznimi aplikacijami in aplikacijami, ki

temeljijo na tehnologiji AJAX, ki je vključena v brskalnik za prikazovanje vmesnikov.

Tabela 1 – Pregled ogrodij za razvoj bogatih spletnih aplikacije[8]

Ogrodje Programska

licenca Windows Mac OS

X Linux Zgrajeni formati

Adobe Flex MPL Yes Yes Yes Adobe AIR, SWF

Ample SDK MIT, GPL Yes Yes Yes JavaScript

Appcelerator Titanium

Apache 2 Yes Yes Yes Android, iOS (iPad, iPhone)

AppFlower MIT License or

commercial Yes Yes Yes JavaScript

Cappuccino LGPL Yes Yes Yes JavaScript, .sj

Curl Proprietary Yes Yes Yes Curl

DevForce Proprietary Yes Yes Yes Silverlight, WPF

ExtJS GPLv3 or

commercial Yes Yes Yes JavaScript

Google Web Toolkit Apache 2 Yes Yes Yes JavaScript

iPFaces mobile framework

Open source Yes Yes Yes BlackBerry, iOS, Java ME

Lively Kernel MIT Yes Yes Yes JavaScript

MotherApp Proprietary Yes Yes Yes Android, BlackBerry, iOS, Symbian, Windows Mobile

OpenLaszlo Open source Yes Yes Yes DHTML, SWF

PhoneGap Open source Yes Yes Yes Android, BlackBerry, iOS

qooxdoo LGPL, EPL Yes Yes Yes JavaScript

QuickConnectFamily Framework

MIT Yes Yes Yes Android, BlackBerry, iOS,

Linux, Mac

Rhomobile Open source Yes Yes Yes Android, BlackBerry, iOS, Symbian, Windows Mobile

.NET Framework Proprietary Yes Yes Yes Microsoft Silverlight

expanz Proprietary Yes Yes Yes Adobe Air, Flash, Java FX,

Microsoft Silverlight, Windows Mobile, WPF

CaptainCasa Proprietary Yes Yes Yes Ajax, Flash, Java FX,

Microsoft Silverlight, WPF

Rich AJAX Platform Open source Yes Yes Yes ?

Smart GWT & SmartClient

LGPL, commercial

Yes Yes Yes Java server, JavaScript client


Sproutcore MIT Yes Yes Yes JavaScript

Tersus Open source Yes Yes Yes Android, iOS, JavaScript;

planned: BlackBerry, Symbian

Vaadin Apache 2 Yes Yes Yes JavaScript

ZK LGPL, GPL, commercial

Yes Yes Yes Java server, JavaScript client

UltraLightClient Proprietary Yes Yes Yes ?

JavaFX Open source Yes Yes Yes jar, applet

JavaScriptMVC Open source Yes Yes Yes JavaScript, compressed and

one single file

Qt Quick GPL, LGPL, commercial

Yes Yes Yes QML

Echo3 MPL/GPL/LGPL Yes Yes Yes Java server, JavaScript client

JVx Apache 2 Yes Yes Yes

Java, Ext GWT, Qt Jambi

(UI independent architecture)

Quick PHP Open source Yes Yes Yes JavaScript ↔ PHP ↔

JavaScript

Unity Proprietary Yes Yes No

Unity Web Player, iOS, Android, Windows, Mac OS X, Nintendo Wii; planned: Flash (SWF), Playstation,

Xbox

Panda3D Open source Yes Yes Yes P3D

Wt GPL,

commercial Yes Yes Yes

C++ or Java server ↔ HTML (uses JavaScript if

available)

Nexaweb Proprietary Yes Yes Yes Java client and server

V zadnjem času se vedno več govori o standardu HTML5. Čeprav še ni postal uradni

standard, večina brskalnikov, vsaj delno, že podpira njegove nove funkcionalnosti.

HTML5 poskuša nadomestiti predvsem tehnologijo Flash, kjer trojec HTML, CSS in

JavaScript ni bil dovolj. Velika podpornika standarda HTML5 sta podjetji Apple, ki noče

vključiti predvajalnika Flash na svoje mobilne naprave in Google. Podporo je napovedalo

tudi podjetje Microsoft v brskalniku IE 9. Glede na velik vpliv podjetij Google in Apple se

zdi, da bodo obetajoče RIA (Rich Internet Application) tehnologije JavaFX, Silverlight in

Flash vsaj delno izgubile na pomenu[13].


2.3 Delitev spletnih ogrodij

Spletno aplikacijsko ogrodje je programsko ogrodje, ki je namenjeno za razvoj dinamičnih

spletnih strani, spletnih aplikacij in spletnih storitev. Ogrodje olajša delo s skupnimi

aktivnostmi v razvoju spletnih strani. Na primer, veliko ogrodij zagotavlja knjižnice za

dostop do podatkovne baze in upravljanje s sejami ter spodbuja ponovno uporabo kode.

Večina spletnih ogrodij temelji na arhitekturnem vzorcu MVC (Model-View-Controler).

Ogrodja, ki temeljijo na načrtovalskem vzorcu MVC, so lahko strukturirana na različne

načine, vendar med njimi prevladujeta dva tipa[9]:

• MVC ogrodja, ki temeljijo na akcijah (angl. Action based), imenovana tudi »angl.

Push-based MVC« ogrodja. Princip delovanja je naslednji: uporabnik v brskalniku

sproži zahtevo, ki gre do strežnika. Na strežniku upravljalec zahtev, ki ima funkcijo

kontrolnika, prenese podatke v model. Tipično je model predstavljen s tehnologijo

Java strežniške strani (angl. Java Server Pages - JSP). Model posreduje podatke do

pogleda, ta pa jih uporabi za prikaz JSP strani.

• MVC ogrodja, ki temeljijo na komponentah (angl. component based), imenovana

tudi »angl. Pull-based MVC« ogrodja. Te so osredotočena na razvoj bogatih

uporabniških vmesnikov. Od koncepta procesiranja zahtev so se oddaljila k

generiranju samega pogleda. Komponente omogočajo ponovno uporabo znotraj

aplikacije. Princip delovanja je podoben kot pri MVC ogrodjih, ki temeljijo na

akcijah, s to razliko, da je lahko več kontrolnikov in pogled zahteva podatke iz

ustreznega kontrolnika.

Število ogrodij za razvoj spletnih aplikacij je v zadnjih letih zelo naraslo. Na izbiro je

veliko ogrodij in vsako od njih ponuja svojo edinstveno kombinacijo značilnosti, omejitev

in prednosti. Zato je izbira pravega ogrodja še veliko težja.

Tabela 2 prikazuje število ogrodij glede na implementacijski jezik. Iz tabele je lepo

razvidno, da je največ ogrodij razvitih za jezik PHP in Java.


Tabela 2 – Število ogrodij glede na implementacijski jezik[10]

Programski jezik Število ogrodij

PHP 38

Java 37

Python 17

Other 17

CFML (ColdFusion) 9

Ruby 8

Perl 7

ASP.NET 6

C++ 3

Osredotočili se bomo na ogrodja, ki temeljijo na programskem jeziku Java, saj smo v

nadaljevanju diplomskega dela uporabili ogrodje Vaadin, ki temelji ravno na tem

programskem jeziku.

Iz tabele 3, ki prikazuje seznam ogrodij za razvoj spletnih aplikacij v programskem jeziku

Java, lahko razberemo, da prevladuje licenčni model, ki temelji na licenci Apache verzija

2.0. Ta je bila odobrena s strani ASF leta 2004. Licenca določa njeno obvezno distribucijo

skupaj s programom ali izvorno kodo, dovoljeno je vključevanje knjižnic programske kode

licencirane pod drugimi licencami, dovoljena je objava izpeljanega dela pod drugo licenco

in prosta prodaja izpeljanega dela.

Tabela 3 – Seznam ogrodij za razvoj spletnih aplikacij v javi[10]

Projekt Trenutna stabilna verzija

Datum izdaje Licenca

Apache Tapestry 5.3.2 2012-02-07 Apache

Apache Wicket 1.5.4 2012-01-24 Apache

AppFuse 2.1 2011-04-04 Apache

Aranea 1.2.2 2009-06-18 Apache


Context Framework 0.8.4 2011-08-23 Apache

Eclipse RAP 1.4.1 2011-09-23 Eclipse Public License

FormEngine 2.0 2011-10-20 MIT / Proprietary

Grails 2.0.0 2011-12-15 Apache

Google Web Toolkit 2.4.0 2011-09-08 Apache

Hamlets 1.7 2011-03-11 BSD

IceFaces 2.0.2 2011-05-13 Mozilla Public License 1.1 (MPL)

ItsNat 1.2 2011-05-24 LGPL / Proprietary

JavaServer Faces 2.1 2010-10-22 (implementation dependent)

JBoss Seam 3.0.0 GA 2011-03-31 LGPL

Jspx-bay 1.1.0 2011-02-17 Apache 2.0

JVx WebUI 0.9 2011-04-01 Apache 2.0

ManyDesigns Portofino 3.1.10 2011-03-22 GPL v3

OpenLaszlo 4.9.0 2010-10-21 Common Public License

OpenXava 4.3 2011-12-14 LGPL

Oracle ADF 11.1.1.5 2011-05-06

Oracle Technology Network Developer License

Play! 1.2.4 2011-12-02 Apache 2.0

PrimeFaces 3.1.1 2012-02-14 Apache Licens

Richfaces 4.1.0.M1 2011-08-16 GPL

RIFE 1.6.1 2007-07-14 CDDL, LGPL

Apache Shale 1.0.4 2007-12-19 Apache

Apache Sling 6 2011-04-18 Apache 2.0

Apache Struts 2.3.1.2 2012-01-22 Apache 2.0

SmartClient 8.0 2011-01-05 LGPL

Spring 3.0.6 2011-08-23 Apache

Stripes 1.5.6 2011-03-14 Apache

ThinWire 1.2 2007-09-17 GPL

Vaadin 6.7.4 2012-01-10 Apache

Wavemaker 6.3.3 2011-09-22 Apache

WebObjects 5.4.3 2008-09-15 Proprietary

WebWork 2.2.6 2007-07-21 Apache

ZK 5.0.9 2011-10-18 LGPL / ZOL

ztemplates 2.4.0 2011-09-11 Apache

V diplomskem delu smo podrobneje raziskali strežniško AJAX ogrodje Vaadin, ki

razvijalcem omogoča razvoj javanskih uporabniških vmesnikov. Ker je ogrodje Vaadin


strežniško usmerjeno, je glede zmogljivosti zelo neprimerno, saj se vsi dogodki iz

brskalnika pošiljajo na strežnik in spet nazaj v brskalnik. Alternativa temu ogrodju bi lahko

bilo ogrodje Google Web Toolkit (GWT), ki ga ogrodje Vaadin uporablja za prikaz

uporabniškega vmesnika. Ogrodje GWT je odjemalsko orientirano, zato se vsi dogodki

prožijo na odjemalcu, le po potrebi se zahteve pošljejo za strežnik.


3 OGRODJE VAADIN

3.1 Uvod

Vaadin je strežniško AJAX ogrodje za razvoj spletnih aplikacij, ki razvijalcem omogoča

razvoj visoko kakovostnih uporabniških vmesnikov v programskem jeziku Java.

Zagotavlja knjižnice vnaprej pripravljenih uporabniških vmesnikov in ogrodje za izdelavo

lastnih komponent. Poudarek je na preprostosti uporabe, ponovni uporabnosti in

razširljivosti ter izpolnjuje zahteve velikih poslovnih aplikacij.

Osrednji del ogrodja Vaadin je javanska knjižnica, ki je zasnovana tako, da je ustvarjanje

in vzdrževanje spletnih uporabniških vmesnikov preprosto. Ključna ideja programskega

modela ogrodja Vaadin je, da pozabimo na splet in programiramo uporabniške vmesnike

podobno kot namizne javanske aplikacije, ki temeljijo na ogrodjih kot so AWT (Abstract

Windows Toolkit), Swing ali SWT (Standard Widget Toolkit).

Ker tradicionalno spletno programiranje zahteva veliko časa za učenje novih spletnih

tehnologij, nismo tako produktivni. Zato je namen ogrodja Vaadin, da razvijalec čim manj

časa porabi za učenje in se osredotoči na poslovno logiko. Ogrodje s svojim programskim

modelom skrbi za upravljanje uporabniškega vmesnika v brskalniku in AJAX

komunikacijo med brskalnikom in strežnikom. Uporaba ogrodja ne zahteva znanja HTML

ali skriptnega jezika JavaScript.

Osnovna arhitektura spletne aplikacije, zgrajene v ogrodju Vaadin, je prikazana na sliki 2.

Ogrodje je sestavljeno iz strežniškega dela in izvajalca na uporabniški strani. Izvajalec na

uporabniški strani teče v brskalniku kot JavaScript program, ki upodablja grafični vmesnik

in omogoča uporabniško interakcijo s strežnikom. Ker na strežniški strani aplikacija teče

kot Java Servlet seja na aplikacijskem strežniku, jo lahko enostavno povežemo s

podatkovnimi in poslovnimi nivoji.


Slika 2 – Osnovna arhitektura spletne aplikacije v ogrodju Vaadin [1]

HTML, JavaSript in ostale brskalne tehnologije so nevidne v aplikacijski logiki. Zato lahko

o spletnem brskalniku razmišljamo kot o tankem odjemalcu, katerega naloga je prikaz

uporabniškega vmesnika in posredovanje uporabniških dogodkov na strežnik. Kontrolna

logika uporabniškega vmesnika s poslovno logiko aplikacije se izvaja kot javanski spletni

strežnik. Nasprotna, normalna arhitektura odjemalec-strežnik z uporabo odjemalske

aplikacije bi vključevala veliko aplikacijske komunikacije med odjemalcem in strežnikom.

Ločitev uporabniškega vmesnika od aplikacijske arhitekture naredi ta pristop zelo

učinkovit.

Ker se uporabniški vmesnik izvaja kot JavaScript program, brskalnik ne potrebuje nobenih

dodatnih vtičnikov za izvajanje aplikacij. To je velika prednost pred ogrodji, ki temeljijo

na tehnologiji Flash, Java apletih in drugih vtičnikih. Ogrodje Vaadin temelji na ogrodju

GWT(angl. Google Web Toolkit), ki podpira široko paleto brskalnikov, tako da razvijalcu

ni potrebno skrbeti za različne brskalnike.

V ozadju strežniškega razvojnega modela ogrodje Vaadin zelo dobro uporablja tehniko

AJAX, ki omogoča ustvarjanje bogatih spletnih aplikacij, ki so odzivne in interaktivne kot

namizne aplikacije.

Ogrodje Vaadin uporablja ogrodje GWT za prikazovanje uporabniških vmesnikov v

brskalniku. GWT programi so napisani v programskem jeziku Java in prevedeni v

JavaScript program.

Ogrodje Vaadin je namenjeno za izdelavo spletnih aplikacij in ni namenjeno za izdelavo

spletnih strani in predstavitvenih oglasov.


3.2 Arhitektura ogrodja VAADIN

V prejšnjem poglavju smo na kratko spoznali arhitekturo spletne aplikacije, razvite v

ogrodju Vaadin. V tem poglavju bomo podrobneje pogledali arhitekturo ogrodja Vaadin, ki

je prikazana na sliki 3.

Slika 3 – Arhitektura ogrodja Vaadin[1]

Ogrodje Vaadin je sestavljeno iz spletnega programskega vmesnika (angl. Application

Programming Interface - API), komponent uporabniškega vmesnika, tem za upravljanje

prikaza in podatkovnega modela. Podatkovni model omogoča povezovanje komponent

uporabniškega vmesnika s podatki. Medtem pa v ozadju teče terminalski pretvornik (angl.

Terminal adapter), ki prejema zahteve od brskalnika in se odziva z izrisovanjem strani.


Aplikacija, ki uporablja ogrodje Vaadin, teče kot Java Servlet v javanskem spletnem

strežniku, ki streže HTTP zahtevam. Terminalski pretvornik sprejema uporabniške zahteve

preko programskega vmesnika Java Servlet in jih pretvarja v uporabniške dogodke za

posamezno sejo. Dogodek je povezan s komponento uporabniškega vmesnika in

posredovan v aplikacijo. Aplikacijska logika nato opravi spremembe na komponentah

grafičnega vmesnika, terminalski pretvornik pa jih kot odziv posreduje v brskalnik.

JavaScript komponente na odjemalčevi strani prejmejo odziv in ga uporabijo za

spremembe na strani v brskalniku. Najvišji nivo uporabniške aplikacije je sestavljen iz

aplikacijskega razreda com.vaadin.Application, ki kreira komponente grafičnega vmesnika,

ki jih potrebuje, pridobiva njihove dogodke in naredi potrebne spremembe nad

komponentami.

Glavni deli arhitekture in njihove funkcije:

• Komponente uporabniškega vmesnika (angl. User Interface Components) so

sestavni del uporabniškega vmesnika. Vsaka komponenta na strežniški strani ima

na strani odjemalca pripadajoči del (angl. counterpart), s katerim ima uporabnik

interakcijo. Komponente na strežniku se serializirajo k odjemalcu preko

terminalskega pretvornika. Obratno pa se, kot dogodki, serializirajo uporabnikove

interakcije.

• Izvajalno okolje na odjemalcu (angl. Client-Side Engine) v ogrodju Vaadin s

pomočjo ogrodja GWT omogoča prikazovanje aplikacije v spletnem brskalniku.

Ta s pomočjo posebnega jezika UIDL (angl. User Interface Definition Language),

posreduje preko terminalskega pretvornika uporabnikove interakcije in spremembe

na strežnik. Komunikacije so asinhrone HTTP ali HTTPS zahteve.

• Terminalski pretvornik (angl. Terminal Adapter) služi za prikazovanje komponent

na spletni strani, saj se same direktno ne morejo prikazovat. Preko terminalskega

pretvornika gre vsa komunikacija, kot so dogodki in spremembe, med odjemalcem

in strežnikom. Ta komunikacija so asinhrone AJAX zahteve, ki se preko

pretvornika posredujejo aplikacijski logiki.

• Teme (angl. Themes) so, zraven logike, del uporabniškega vmesnika. Logika

uporabniškega vmesnika se obravnava kot Java koda, medtem, ko pa je

predstavitev teh definirana v temah kot slogi CSS (Cascade StyleSheet). Ogrodje


Vaadin zagotavlja privzete teme. Uporabniške teme lahko zraven sloga vsebujejo

tudi HTML predloge, ki definirajo poljubne postavitve in druge vire, kot so slike.

• UIDL (User Interface Definition Language) je poseben jezik, preko katerega

terminalski pretvornik izrisuje uporabniški vmesnik na spletni strani. Komunikacija

preko jezika UIDL uporablja notacijo JSON (JavaSript Object Notation), ki je

preprost izmenjevalni podatkovni format in je zelo učinkovit za povezovanje

JavaScript AJAX kode v brskalniku.

• Dogodki (angl. Events) se kreirajo ob interakciji uporabnika s komponentami

grafičnega vmesnika. Ti so najprej obdelani na odjemalčevi strani z jezikom

JavaScript in nato poslani v aplikacijo skozi HTTP strežnik, terminalski pretvornik

in raven uporabniških komponent.

• Podatkovni model (angl. Data Model) je ob modelu uporabniških vmesnikov

pomemben za predstavitev podatkov. Omogoča povezovanje komponent grafičnega

vmesnika s podatkovnimi viri.

Najbolj pomembne tehnologije, na katerih temelji ogrodje Vaadin, bomo opisali v

nadaljevanju. Poznanje teh tehnologij ni pomembno za uporabo ogrodja, temveč za

predstavitev ozadja v primeru izdelave nizkonivojskih razširitev.

3.2.1 Tehnika AJAX

AJAX (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih

tehnik, uporabljenih za ustvarjanje interaktivnih spletnih aplikacij. S tehniko AJAX si

lahko spletne aplikacije izmenjujejo podatke s strežnikom asinhrono v ozadju, brez potrebe

po ponovnem nalaganju celotne strani. Tako lahko dosežemo interakcijo, podobno

tradicionalnim namiznim aplikacijam. S tem je mogoče tekoče in hitrejše spremljanje ter

spreminjanje vsebine na spletni strani, saj se spreminjajo le manjši deli strani.

Uporaba tehnologij AJAX je značilna za splet 2.0. Navkljub imenu uporaba tehnologij

JavaScript in XML ni pogoj za izvajanje tehnologije AJAX.

Pojem AJAX je leta 2005 skoval in prvič omenil Jesse James Garrett v svojem članku

»Ajax: A New Approach to Web Aplications«. Tehnologije, na katerih temelji, so se začele

razvijati že v letu 1996, ko je podjetje Microsoft v svojem spletnem brskalniku Internet

Explorer predstavilo konstrukt IFrame. V letu 1998 Microsoft predstavi Remote Scripting,


kjer podatke bere javanska aplikacija, s katero komunicira odjemalec s pomočjo

programskega jezika JavaScript. Nadalje leta 1999 Microsoft ustvari objekt

XMLHttpRequest kot kontrolnik ActiveX v brskalniku Internet Explorer 5.0, čemur so

kmalu sledili ustvarjalci brskalnikov Mozilla in Safari. Aprila 2006 je konzorcij W3C

(World Wide Web Consortium) pripravil prvi osnutek specifikacije objekta

XMLHttpRequest z željo ustvariti uradni standard za spletne strani.

Podatki se prenašajo s pomočjo različnih tehnologij kot so [2]:

• HTML ali XHTML ter CSS za predstavitev,

• DOM (Document Object Model) za dinamično prikazovanje vsebine in interakcijo

s podatki,

• XML in XSLT za delo s podatki. Pogosto se kot alternativa uporablja JSON.

• objekt XMLHttpRequest za asinhrono komunikacijo,

• JavaScript, ki vse te tehnologije povezuje

Tehnologija AJAX ima zraven prednosti izdelave hitrejših, boljših, uporabniku prijaznejših

spletnih aplikacij in prenosa samo določenih podatkov tudi nekaj slabosti. Prva taka slabost

je osveževanje strani, zato je navigacija v brskalniku otežena. Druga taka slabost je, da vsi

brskalniki ne uporabljajo skriptih jezikov JavaScript ali pa nimajo enotnega delovanja na

različnih brskalnikih[2].

3.2.2 Ogrodje Google Web Toolkit

Google Web Toolkit je odprtokodni nabor orodij, ki omogočajo spletnim razvijalcem

ustvarjanje in vzdrževanje kompleksnih JavaScript aplikacij v programskem jeziku Java.

Razen nekaj domorodnih knjižnic, GWT vsebuje Java izvorno kodo, ki jo lahko zgradimo

na katerikoli platformi, ki vključuje GWT datoteke za grajenje. GWT je pod licenco

Apache 2.0[3].

GWT je ogrodje za razvoj odjemalske strani aplikacije, brez da bi uporabljali JavaScript ali

druge tehnologije brskalnikov. Aplikacije, ki uporabljajo ogrodje GWT, so razvite z Javo

in prevedene v JavaScript s pomočjo GWT prevajalnika. Uporablja se za razvoj logike

uporabniškega vmesnika v brskalnikih. Aplikacije, zgrajene z ogrodjem GWT,

komunicirajo s strežnikom preko RPC (angl. Remote Procedure Call) klicev in serializacijo


podatkov. Ogrodje Vaadin ima komunikacijo med odjemalcem in strežnikom skrito.

Omogoča obravnavo uporabniške interakcije v strežniški aplikaciji in nudi razvoj

enostavne aplikacije na strežniški strani.

Ogrodje Vaadin uporablja ogrodje GWT za prikazovanje uporabniškega vmesnika v

spletnem brskalniku in obravnava zahteve uporabniške interakcije v brskalniku. Uporaba

ogrodja GWT v ogrodju Vaadin je nevidna aplikacijam, ki ne potrebujejo GWT

komponent[1].

3.2.3 Format JSON

Format JSON (JavaSript Object Notation) je format za izmenjavo podatkov, ki je preprost

za pisanje in branje, omogoča pa tudi enostavno računalniško obdelavo. Sporočila v

formatu JSON bi naj bila tudi do stokrat hitrejša za branje s trenutno brskalniško

tehnologijo, kot so XML sporočila[1]. Format JSON je podmnožica skriptnega jezika

JavaScript, kar mu omogoča enostavno uporabo v spletnih brskalnikih, ki že mnoga leta

uporabljajo ta jezik. JSON je neodvisen od programskega jezika, podprt pa je s strani

mnogih, kot so C, C++, C#, Java, JavaScript, PHP, Perl, Python in mnogi drugi. Ker ga

podpira JavaScipt, je JSON zelo enostaven za uporabo v JavaScript aplikacijah in kot tak

tudi v AJAX aplikacijah[4].

Kot že omenjeno je JSON podprt v mnogih programskih jezikih in z njim je mogoče

povezati med sabo dva različna programska jezika, saj so v njem shranjeni samo osnovni

podatkovni tipi, ki jih podpirajo skoraj vsi programski jeziki[4].

Izvajalno okolje na odjemalčevi strani v ogrodju Vaadin uporablja format JSON preko

ogrodja GWT, ki podpira JSON komunikacijo z uporabo paketa

com.google.gwt.json.client. Ogrodje Vaadin lahko z napredno optimizacijo in

predpomnjenja posodobi spremembe uporabniškega vmesnika na brskalniku na zelo

učinkovit način.

Tako ogrodje GWT kot tehnologija AJAX, je tudi format JSON neviden razvijalcem, ki

uporabljajo ogrodje Vaadin. Implementacija serializacije med odjemalcem in strežnikom

uporablja abstraktne vmesnike, ki se lahko implementirajo kot poljuben nizkonivojski

izmenjevalni format, kot sta XML ali JSON[1].


3.2.4 Aplikacija kot javanska Servlet seja

Ogrodje Vaadin v bistvu počne vse na vrhu programskega vmesnika Java Servlet, ki je

skrit in je zraven terminalskega pretvornika najnižji nivo upravljanja zahtev iz spletnega

vsebnika.

Ko spletni vsebnik dobi prvo zahtevo za aplikacijo na registriranem URL naslovu (angl.

Uniform Resource Locator), se ustvari instanca razreda ApplicationServlet, ki deduje od

razreda HttpServlet, definiranega v programskem vmesniku Java Servlet. Temu sledijo

seje, ki uporabljajo vmesnik HttpSession. Vsaka seja je povezana z instanco aplikacije. V

času življenjskega cikla seje, ogrodje Vaadin poskrbi, da so uporabnikove akcije

posredovane k pravi instanci aplikacije in k pravim komponentam uporabniškega

vmesnika[1].

3.2.5 Izvajalno okolje na strani odjemalca

Slika 4 prikazuje arhitekturo izvajalnega okolja na strani odjemalca za komponento gumb.

Z uporabniškim vmesnikom upravlja razred ApplicationConnection, ki posreduje AJAX

zahteve na strežnik in izrisuje uporabniški vmesnik skladno z odgovori. Kot je prikazano

na sliki 4, komunikacija poteka preko protokola HTTP ali HTTPS z uporabo podatkovnega

izmenjevalnega formata JSON in jezikom za definiranje uporabniškega vmesnika (angl.

User Interface Definition Language). Na strežniški strani aplikacije je komponenta gumb

primer razreda com.vaadin.ui.Button ogrodja Vaadin. Na odjemalčevi strani uporabniški

vmesnik vsebuje različne komponente ogrodja GWT, ki dedujejo od razreda Widget. Iz

slike 4 je tudi razvidno, da se razred FocusWidget iz ogrodja GWT uporablja za

prikazovanje gumba v brskalniku. Ogrodje Vaadin pa zagotavlja razred VButton, ki

implementira vmesnik Paintable, ki se uporablja za izrisovanje GWT komponent[1].

Začetna spletna stran v brskalniku naloži JavaScript izvorno kodo izvajalnega okolja na

odjemalčevi strani. Ko se spletna stran naloži in zažene, izvajalno okolje skrbi za AJAX

zahteve na strežnik. Ta komunikacija je narejena preko razreda ApplicationConnection.


Slika 4 – Arhitektura izvajalnega okolja na odjemalski strani[1]

3.2.6 Dogodki in poslušalci

Ogrodje Vaadin ponuja dogodkovni programski model za obdelavo uporabnikove

interakcije. Ko uporabnik izvede akcijo na uporabniškem vmesniku, mora biti aplikacija o

tem obveščena. Tak primer je klik gumba miške ali izbira elementa. Veliko javanskih

ogrodij, kot je ogrodje Vaadin, za uporabniške vmesnike sledi vzorcu dogodek-poslušalec,


oziroma bolje poznan kot vzorec opazovalec (Observer). Tak pristop je potreben za prenos

uporabniških akcij v aplikacijsko logiko. Ta vzorec vključuje dve vrsti elementov: objekte,

ki generirajo dogodke in število poslušalcev, ki poslušajo po tem dogodku. Ko se tak

dogodek sproži so vsi poslušalci obveščeni. Tipično je to samo en poslušalec[1].

Dogodki lahko služijo več različnim namenom. V ogrodju Vaadin je ta namen obravnava

uporabniških interakcij v uporabniškem vmesniku. Upravljanje s sejami lahko zahteva

posebne dogodke, kot so časovne omejitve v primeru katerih je dogodek pomanjkanje

uporabniške interakcije. Časovna omejitev je poseben primer časovnih in načrtovanih

dogodkov, ki nastopijo na določen dan in uro ali po poteku določene časa. Podatkovne

baze in druge asinhrone komunikacije tudi lahko ustvarjajo dogodke.

Za prejemanje določenega tipa dogodkov mora aplikacija vključevati razred, ki

implementira pripadajoči vmesnik za poslušalce. Poslušalci se v komponente registrirajo z

metodo addListener(), ki ima definirano generično verzijo v razredu AbstractComponent,

ki je osnovni razred vsem komponentam.

Večina komponent, ki imajo podobne dogodke, definirajo lastne dogodkovne razrede in

razrede za poslušalce. Tak primer je dogodek nad komponento gumb, ki smo jo že opisali

v prejšnjem poglavju. Gumb (angl. Button) za klik gumba miške proži dogodek

Button.ClickEvent, katerega poslušamo preko vmesnika Button.ClickListener. Slika 5

prikazuje razredni diagram za poslušalca ob kliku, ki prikazuje kako aplikacijski razred

implementira vmesnik Button.ClickListerner, da lahko posluša na dogodke, ki se prožijo

nad komponento gumb.


Slika 5 – Razredni diagram vmesnika Button.ClickListener[1]

Ko se dogodek zgodi, se instancira objekt dogodka. V tem primeru je to objekt ClickEvent

in ta objekt pozna komponente uporabniškega vmesnika, ki je v tem primeru Button.


4 GRADNJA UPORABNIŠKEGA VMESNIKA

4.1 Uvod

Ogrodje Vaadin ponuja celovit nabor elementov uporabniškega vmesnika in omogoča, da

zgradimo lastne komponente po meri. Slika 6 ponazarja hierarhijo dedovanja razredov in

vmesnikov. Vmesniki so prikazani v sivi barvi, abstraktni razredi v oranžni barvi in splošni

razredi v modri barvi.

Na vrhu hierarhije vmesnikov imamo vmesnik Component. Na vrhu hierarhije razredov pa

imamo razred AbstractComponent, od katerega dedujeta razreda AbstractField, ki deduje

od komponent polja in razred AbstractComponentContainer, ki deduje različne vsebnike

in komponente postavitve.

Komponente, ki niso vezane na vsebino podatkovnega modela, dedujejo neposredno od

razreda AbstractComponent. Take komponente so: vgrajena komponenta, labela, povezava

in meni.

Tako kot pri običajnih javanskih ogrodjih za uporabniške vmesnike v namiznih

aplikacijah, postavitev različnih elementov v oknu nadzirajo postavitvene komponente.

Poleg tega lahko s komponento CustomLayout kreiramo lastno postavitev kot XHTML

predlogo, ki vključuje pozicije vseh vsebujočih komponent.

Ob pogledu na graf dedovanja lahko vidimo, da komponente postavitve dedujejo od

abstraktnega razreda AbstractComponentContainer in vmesnika Layout.

Če pogledamo z vidika hierarhije objektov, bi imel objekt Window, ki vsebuje hierarhijo

postavitvenih komponent katere spet vsebujejo druge postavitvene komponente,

komponente polja in druge vidne komponente.


Slika 6 – Graf dedovanja komponent grafičnega vmesnika[1]

4.2 Vmesniki in abstrakcije

Komponente uporabniškega vmesnika v ogrodju Vaadin so zgrajene iz vmesnikov in

abstraktnih razredov, ki definirajo in implementirajo skupne značilnosti vseh komponent in

osnovne logike za serializacijo in deserializacijo med strežnikom in odjemalcem.

Vse komponente implementirajo vmesnik Paintable, ki se uporablja za serializacijo

komponente za odjemalca. Obratno pa je vmesnik VariableOwner, potreben za

deserializacijo stanja komponent ali interakcijo uporabnika od odjemalca.

Zraven vmesnikov, definiranih v ogrodju Vaadin, vse komponente implementirajo

vmesnik java.io.Serializable. Serializacija je potrebna v mnogih gručnih rešitvah in

rešitvah računalništva v oblakih.


Slika 7 – Vmesniki komponent in abstrakcije[1]

4.2.1 Vmesnik Component

Vmesnik Component je povezan z razredom AbstractComponent, ki implementira vse

definirane metode v vmesniku.

Komponente so v uporabniškem vmesniku določene hierarhično. Postavitev nadzirajo

postavitvene komponente ali bolj na splošno komponente, ki implementirajo vmesnik

ComponentContainer. Takšen vsebnik je starš od vsebujoče komponente.

Metoda getParent() omogoča komponenti pridobivanje komponente starša. Medtem ko

metodo setParent() običajno potrebujemo za dodajanje komponent z metodo

addComponent()vmesnika ComponentContainer, ki samodejno nastavi starša. Ko se

komponenta kreira ne pozna svojega starša, zato se ne moremo sklicevati na starša v

konstruktorju z metodo getParent(). Prav tako se, dokler komponenta nima starša, ni

mogoče sklicevati na objekt aplikacije z metodo getApplication().

Dodajanje komponente v aplikacijo sproži klice metode attach() te komponente. Pravilna

odstranitev komponente pa proži metodo detach(). Če je starš od dodane komponente že

povezan z aplikacijo, se metoda attach() kliče takoj preko metode setParent().


4.2.2 Razred AbstractComponent

Razred AbstractComponent je osnovni razred za vse komponente uporabniškega vmesnika.

V tem razredu je implementacija vseh metod, definiranih v vmesniku Component. Razred

ima samo eno abstraktno metodo, getTag(), ki vrača serializacijski identifikator razreda

komponente. Ta mora biti implementirana, samo kadar kreiramo povsem novo

komponento. Razred AbstractComponent upravlja serializacijo komponent med

odjemalcem in strežnikom.

4.2.3 Poljne komponente (Field in AbstractField)

Polja so komponente, ki vsebujejo vrednosti, ki jih lahko uporabnik spreminja preko

uporabniškega vmesnika. Slika 8 prikazuje relacije dedovanja ter pomembne vmesnike in

osnovne razrede.

Slika 8 – Komponente polj[1]

Komponente polj so vgrajene v ogrodje, definirane so v vmesniku Field in razredu

AbstractField. Polja so v ogrodju Vaadin močno povezana z podatkovnim modelom.


Vrednosti polja se obravnavajo kot lastnost (angl. Property) komponente polja. Izbirna

polja omogočajo upravljanje izbirnim predmetov preko vmesnika Container.

4.2.4 Vmesnik Field

Da lahko ima vmesnik Field vrednost za polje, deduje od vmesnika Component in

vmesnika Property. Razred AbstractField je edini razred, ki implementira vmesnik Field.

Vrednost polja lahko nastavimo z metodo setValue() in iz njega beremo z metodo

getValue(). Obe metodi sta definirani v vmesniku Property. Tip vrednosti polja je odvisen

od komponente.

Vmesnik Filed deduje tudi od razreda Property.ValueChangeListner, da mu dovolimo

poslušanje na spremembe polja in od razreda Property.Editor, da omogočimo urejanje

vrednosti.

Razred AbstractField je osnovni razred za vse poljne komponente. Razen lastnosti,

podedovanih od razreda AbstractComponent, implementira številne lastnosti definiranih v

vmesnikih Property, Buffered, Validatable in Component.Focusable,

4.3 Skupne lastnosti komponent

Osnovni razredi in vmesniki komponent nudijo veliko lastnosti. Vmesniki definirajo

število lastnosti, katere lahko pridobivamo in nastavljamo z ustreznimi set in get

metodami. V nadaljevanju si bomo ogledali te skupne lastnosti:

• Oznaka (angl. Caption) je niz znakov, ki opisujejo komponento. Prikazana je zgoraj

levo ali znotraj komponente. Oznaka se določi kot prvi parameter v konstruktorju.

Lahko pa jo določimo z metodo setCatption(). Privzeto se oznaka komponente

upravlja in prikazuje glede na komponento razporeditve ali komponento vsebnika

na kateri se nahaja. V primeru, da je komponenta odložena na razporeditveno

komponento VerticalLayout, bo oznaka poravnana levo in bo nad komponento. V

primeru, da pa je komponenta odložena na komponento FormLayout, pa je oznaka

levo pred komponento. Razporeditvena komponenta CustomComponent pa ne

upravlja z oznako. Nekatere komponente, kot sta npr. Button in Panel upravljata z

oznako sama in jo prikazujeta v komponenti.


• Opis (angl. Description) je ponavadi prikazan kot namig, ki se pojavi ob prehodu

miškinega kazalca preko komponente. Vse komponente imajo opis ločen od

oznake, ki dedujejo od razreda AbstractComponent. Opis lahko nastavimo z

metodo setDescription(). Forma ga prikazuje kot besedilo nad komponento. Opis ni

le golo besedilo, ampak lahko uporabimo XHTML oznake. Takšni opisi lahko

vsebujejo HTML elemente, vključno s slikami.

• Omogočen (angl. Enabled) je lastnost, ki določa, ali lahko uporabnik uporabi to

komponento. Onemogočena komponenta je vidna, vendar v sivi barvi, katera pove

da je onemogočena. Vse komponente so privzeto omogočene. Onemogočimo jih z

metodo setEnabled().

• Vidnost (angl. Visible) je lastnost, ki pove, ali je komponenta vidna ali ne. Če je

lastnost nastavljena na false, skrijemo komponento pred uporabnikom. Uporabnik

ne bo videl ne komponente, ne oznake, ne ikone ali katerekoli druge lastnosti

gradnika. Če je komponenta nevidna, se niti ne prenaša v brskalnik. To lastnost

določimo z metodo setVisible().

• Samo bralna (angl. Read-Only) lastnost pove, ali se vrednost komponente lahko

spreminja. To lastnost imajo v glavnem komponente polj, katerih vrednosti lahko

spreminja uporabnik. Nastavimo jo z metodo setReadOnly(). Nastavitev postavitve

ali druge komponente kot samo za branje, ne označi rekurzivno vsebujočih

komponent. V primeru, da označimo komponento kot onemogočeno, pa se

rekurzivno prenese na vse podkomponente. Če je komponenta označena samo za

branje še ne pomeni, da je ne moremo spreminjat. Primer je tabela, ki je označena

kot samo za branje, a jo še vedno lahko spreminjamo preko podatkovnega modela,

kjer lahko sortiramo in zamenjujemo vrstni red stolpcev. Spremembe na strani

odjemalca ne bodo posredovane na strežnik in še bolj pomembno je, da strežnik ne

bo sprejemal sprememb vrednosti komponente, ki je označena kot samo za branje.

To je zelo pomembna varnostna funkcija, saj zlonamerni uporabnik ne more

izdelati stanja spremembe komponente, ki je označena samo za branje.

• Ikona (angl. Icon) je grafična oznaka komponente uporabniškega vmesnika, ki je

prikazana zgoraj, levo ali znotraj komponente, odvisno od komponente in


postavitve. Ikona je sorodna oznaki in je ponavadi prikazana horizontalno pred ali

za oznako. Z metodo setIcon() komponenti nastavimo ikono.

• Lokalna (angl. Locale) lastnost opredeljuje državo in jezik, ki sta uporabljena v

komponenti. Lastnost lahko uporabimo za informacije v povezavi z

internacionalizacijo sheme za pridobitev lokaliziranih virov. Nekateri elementi, kot

je npr. DateField, uporabljajo locale za lokalizacijo komponente. Lokalno lastnost

lahko nastavimo z metodo setLocale(). Najboljša praksa je, da lokalizacijo

pridobimo preko aplikacije.

• Ime sloga (angl. Style Name) opredeljuje eno ali več CSS imen razredov za slog

komponente. Slog nastavimo z metodo setStyleName(), z metodama

addStyleName() in removeStyleName() pa dodamo ali odstranimo slog. Ime sloga

se bo pojavilo v HTML jeziku komponente v dveh oblikah: vpisan literar in

predpona razreda komponente z specifičnim imenom sloga. Če damo gumb

komponenti ime sloga »mystyle«, bo komponenta imela oba sloga, »mystyle« in

»v-button-mystyle«.

• Dimenzioniranje (angl. Sizing) komponent omogoča določanje višine in širine

komponente. Komponente ogrodja Vaadin lahko spreminjajo svojo velikost, saj

implementirajo vmesnik Seizable, ki nudi več metod in konstant za spreminjaje

višine in širine, tako v absolutnih kot relativnih vrednostih, ali pa pustimo vrednost

nedefinirano. Velikost lahko nastavljamo z metodama setWidth() in setHeight().

• Vhodni fokus (angl. Input Focus) pove na katero komponento se bo postavil fokus

ob pritisku na tipko TAB. Ko uporabnik klikne na komponento, komponenta dobi

vhodni fokus in če komponenta dovoljuje vpisovanje, se bo prikazal kazalec za

vpisovanje. Fokus je podprt v vseh komponentah polja ter v komponentah Form in

Upload. Vrstni red fokusa komponente je definiran s pozitivnimi celimi števili, ki

jih lahko nastavljamo z metodo setTabIndex(). Privzeti fokus je določen glede na

vrstni red dodajanja komponent na starševsko komponento.


4.4 Standardne komponente

Ker je komponent veliko, ne bomo vseh opisovali. Osredotočili se bomo na tiste, ki so po

našem mnenju najbolj pomembne.

4.4.1 Labela

Labela (angl. Label) je tekstovna komponenta, ki prikazuje tekst, katerega ne moremo

urejat. Ko besedilo presega širino labele, se besedilo nadaljuje v naslednji vrstici. Poleg

splošnega besedila lahko prikažemo tudi vnaprej oblikovano besedilo in HTML, odvisno

od načina vsebine v labeli. Obliko načina vsebine nastavimo z metodo setContentMode().

Privzeto je, da je besedilo neoblikovano. Imamo več načinov vsebine:

• CONTENT_DEFAULT: Privzet način vsebine je CONTENT_TEXT, ki je opisan

nižje

• CONTENT_PREFORMATTED: Način, kjer labela vsebuje vnaprej oblikovano

besedilo, ki lahko vsebuje prelome vrstic ali tabulatorje.

• CONTENT_RAW: Način, ko labela vsebuje neoblikovano besedilo. Ni potrebno,

da je pravilni XML.

• CONTENT_TEXT: Način samo z golim besedilom. Vsi znaki so dovoljeni,

vključno s posebnimi znaki <,> in &.

• CONTENT_XHTML: Način, ko besedilo lahko vsebuje le XHTML

• CONTENT_XML: Labela lahko vsebuje lepo oblikovan in uravnotežen XML.

Vsak glavni element mora imeti določen privzeti imenski prostor.

• CONTENT_UIDL: Oblikovan način, ki vsebuje XML, ki je omejen na UIDL 1.0.

UIDL je interni jezik ogrodja Vaadin za AJAX komunikacijo med strežnikom in

brskalnikom.

4.4.2 Povezava

Povezava (angl. Link) je komponenta, ki dovoljuje kreiranja hiperpovezav. Povezava je

normalna HTML povezava, <a href>. Nasprotno je gumb (angl. Button), ki ob kliku proži

dogodek na strežniški strani, medtem ko ob kliku na povezavo ne prožimo nič.


4.4.3 Tekstovno polje

Polje za tekst (angl. Text Field) je ena izmed najpogosteje uporabljenih uporabniških

komponent. Je komponenta polja, ki omogoča vpisovanje vrednosti preko tipkovnice.

Vrednost lahko pridobimo z metodo getValue() ali jo spremenimo z metodo setValue().

Polje omogoča, da lahko lovimo dogodke ob spremembah besedila.

Slika 9 – Relacije tekstovnih polj[1]

Posebna verzija tekstovnega polja je tekstovno območje (angl. Text Area), ki je večvrstična

različica tekstovnega polja. Z metodo setRows() lahko določimo število vrstic v območju.

Še ena taka različica tekstovnega polja je polje za geslo (angl. PasswordField) pri kateri so

vtipkani znaki skriti.

Obstaja tudi bogato tekstovno območje (angl. RichTextArea), ki omogoča vpisovanje in

urejanje oblikovanega besedila. Orodna vrstica ponuja vse osnovne funkcije urejanja.

Vsebina besedila je predstavljena v HTML obliki.

4.4.4 Datum in čas

Komponenta polja datuma (angl. DateField) zagotavlja prikaz in vnos datuma in ure. Polje

je na voljo v dveh različicah:

• PopupDateField z vhodnim poljem za datum in s pojavnim oknom koledarja, ki se

lahko dodatno prikaže za izbiro datuma. Tako lahko časovno navigiramo po letih,

mesecih in dnevih.


• InlineDateField je različica, ko je koledar vedno viden. Ponuja komponento, kjer

izbiramo datum z mesečnim pogledom.

4.4.5 Gumb

Gumb (angl. Button) je komponenta uporabniškega vmesnika, ki se običajno uporablja za

dokončanje vnosa in začetek akcij. Ko uporabnik klikne gumb, se odda dogodek

Button.ClickEvent. Poslušalec, ki je dedoval od vmesnika Button.ClickListener, obravnava

klik z metodo buttonClick (). Uporabniški vmesnik lahko vsebuje več gumbov, takrat

lahko z metodo getButton() nad dogodkom, izvemo za kateri gumb gre.

4.4.6 Potrditveno polje

Potrditveno polje (angl. CheckBox) je komponenta z dvema stanjema: potrjeno ali

nepotrjeno. Oznaka potrditvenega polja je na desni strani polja. Vaadin ponuja dve

možnosti oblikovanja potrditvenega polja. Ena možnost je samostojno potrditveno polje,

druga pa je skupina potrditvenih polj s katerimi lahko označimo več možnosti. S klikom na

potrditveno polje se spremeni njegovo stanje. Stanje je lastnost, ki ima lahko dve vrednosti,

true ali false. Stanje lahko nastavimo kot pri večini komponent z metodo setValue().

4.4.7 Izbira

Vaadin nudi veliko načinov kako izbrati en ali več predmetov iz seznama. Osrednja

knjižnica vključuje naslednje izborne komponente katere temeljijo na podlagi razreda

AbstractSelect:

• Izbira (angl. Select) je komponenta, katera odpre seznam možnih izbir in vnosno

polje, kjer lahko filtriramo predmete.

• Kombinirano polje (angl. ComboBox) odpre navzdol seznam, s katerega lahko

izbiramo eno možnost. Komponenta omogoča tudi vnos.

• Izbira po seznamu (angl. ListSelect) je vertikalno polje s seznamom, po katerem

lahko izbiramo en ali več predmetov.

• Skupina opcij (angl. OptionGroup) prikazuje predmete v vertikalo urejeni skupini.

Če je na voljo samo ena izbira, govorimo o skupini radijskih gumbov (angl.


RadioButton), če pa lahko izbiramo med več predmeti, govorimo o skupini izbirnih

polj.

• Dvojni seznam (angl. TwinColSelect) prikazuje dva seznama, enega ob drugem,

kjer lahko uporabnik izbira med predmeti iz enega seznama in jih premika na drugi

seznam s pomočjo gumba.

4.4.8 Tabela

Tabela (angl. Table) je komponenta, ki je namenjena predstavitvi tabelaričnih podatkov v

vrstice in stolpce. Je ena izmed najbolj vsestranskih komponent v ogrodju Vaadin. Celica v

tabeli lahko vsebuje besedilo ali poljubno komponento. Brez težav lahko podatke v tabeli

urejamo.

Podatke v tabeli upravljamo preko vmesnika Container in sicer s pomočjo podatkovnega

modela. To omogoča, da lahko tabelo povežemo neposredno z virom podatkov kot je npr.

zbirka poizvedbe podatkov (angl. Database query).

Pri kreiranju tabele moramo najprej z metodo addContainerProperty() definirati stolpce.

Oznaka stolpca je lahko enolična lastnost stolpca, v zahtevnejši implementaciji tabele pa

omogoča, da enolična lastnost stolpca ni enaka kot glava stolpca, kjer je oznaka.

Razširljivost tabele je v veliki meri odvisna od vsebnika. Privzeto se uporablja indeksni

vsebnik, ki je kompleksen in lahko povzroča težave v nadgradljivosti, npr. pri

posodabljanju vrednosti. Tabela nima omejitev glede števila predmetov v njej.

Tabela omogoča izbiro enega ali več elementov s pomočjo miške. Ko uporabnih izbere

predmet, se ID predmeta določi kot lastnost tabele in dogodek za spremembo vrednosti je

sprožen.

4.4.9 Vgrajena komponenta

Vgrajena komponenta (angl. Embedded) omogoča prikazovanje vgrajenim medijskih

objektov, kot so slike, animacije ali katere koli drugi vgrajeni tip, ki ga brskalnik podpira.

Vsebina vgrajene komponente je predstavljena kot vir. Komponenta podpira več različnih

tipov vsebin in vsak je v HTML jeziku prikazan drugače. Poznamo vgrajene objekte (Flash

komponente), vgrajene slike, in vgrajene okvirje brskalnika (iFrame).


4.5 Postavitvene komponente

Komponente uporabniškega grafičnega vmesnika v ogrodju Vaadin so razdeljene v dve

skupini:

• komponente, s katerimi ima lahko uporabnik interakcijo in

• komponente za postavitev drugih komponent na določeno mesto v uporabniškem

vmesniku.

Postavitvene komponente so po namenu identične s komponentami za postavitev iz

splošnih ogrodjih za namizne aplikacije. Vsem komponentam je dovoljeno nastavljati

velikosti, širitvena razmerja, poravnavo, itd. Postavitvene komponente so povezane s

temami, katere določajo lastnosti ozadja, obrob, poravnav teksta ter ogromno drugih

lastnosti.

4.5.1 Vertikalna in horizontalna postavitvena komponenta

Dve najbolj pomembni postavitveni komponenti sta vertikalna in horizontalna (angl.

VerticalLayout in HorizontalLayout, ki sta kot glavna postavitev v nekaterih komponentah,

npr. v oknu in panelu. Kot že ime pove so komponente na teh vsebnikih postavljene v

vertikalnem ali horizontalnem zaporedju. Postavitev lahko ima razmake med celicami. To

omogočimo z metodo setSpacing(). Slika 10 prikazuje primer uporabe obeh postavitev.

Slika 10 – Vertikalna in horizontalna postavitev[1]


4.5.2 Mrežna postavitvena komponenta

Mrežna postavitev (angl. GridLayout) vsebuje komponente na mreži in je opredeljena s

številom stolpcev in vrstic. Stolpci in vrstice v mreži služijo kot koordinate, ki se

uporabljajo za določanje mreže. Vsak element ponavadi zaseda eno celico, lahko pa ga

vstavimo čez več celic, kot območje (x1, y1, x2, y2). Kazalec, ob dodajanju komponent na

mrežo, se pomika od leve proti desni in od zgoraj navzdol. Če se kazalec približa desnemu

spodnjemu kotu, se bo samodejno podaljšala mreža navzdol, dodala se bo nova vrstica.

4.5.3 Plošča

Zelo pomembna postavitvena komponenta je plošča (angl. Panel), ki je navadni vsebnik z

okvirjem in dodatno oznako. Privzeta postavitev vsebine je vertikalna, vendar jo lahko

spremenimo z metodo setContent(). V primeru, da njena vsebina narašča, se pojavi drsnik,

s katerim lahko pomikamo zaslon navzdol ali nazaj gor, ter desno in nazaj levo. To

funkcionalnost mu omogoča vmesnik Scrollable in metoda setScrollable().

4.5.4 Horizontalna in vertikalna razdeljena plošča

Horizontalna in vertikalna razdeljena plošča (angl. HorizontalSplitPanel in

VerticalSplitPanel) sta vsebnika, ki imata vsebino razdeljeno na dva dela. Ločuje ju delilna

črta, ki je pri horizontalni razdeljeni plošči vertikalna in pri vertikalni horizontalna. Primer

uporabe horizontalne in vertikalne razdeljene plošče je prikazan na sliki 11.

Slika 11 – Horizontalna in vertikalna razdelilna plošča[1]


Pozicijo delilne črte lahko določimo z metodo setSplitPosition(), ki sprejme vednost, ki je

odstotek glede na širino ali vrednost, ki je fiksna širina.

4.5.5 Zavihki

Zavihki (angl. TabSheet) je večkomponentni vsebnik, ki dovoljuje preklapljanje med

komponentami z zavihki. Zavihki se nahajajo na vrhu postavitvene komponente. Vsak

zavihek predstavlja objekt zavihka, ki upravlja z nazivom, ikono in atributi, kot sta skrit in

viden.

4.5.6 Zgibni meni

Večkomponentni vsebnik je tudi zgibni meni (angl. Accordion), ki je zelo podoben

zavihkom, vendar da so tukaj komponente postavljene vertikalno. Ob izbiri na zavihek se

odpre vsebina v prostoru med izbranim zavihkom in naslednjim zavihkom.

4.5.7 Absolutna postavitvena komponenta.

Absolutna postavitvena komponenta dovoljuje dodajanje komponent na poljubne položaje

v postavitvenem območju. Ob dodajanju z metodo addComponent() določimo vrednosti za

vertikalno in horizontalno koordinato relativnona rob komponente. Lokacija lahko vsebuje

tridimenzionalno vrednost, ki pove katera, komponenta je v ospredju in katere so v ozadju.

4.6 Podatkovni model ogrodja Vaadin

Podatkovni model ogrodja Vaadin je eden izmed ključnih konceptov celotnega ogrodja. Da

aplikacija dovoli dostop komponentam uporabniškega vmesnika do podatkovnega modela,

so razvili standardni podatkovni vmesnik. Model omogoča neposredno povezavo med

komponentami uporabniškega vmesnika in podatki, ki so prikazani in jih je možno urejat.

V hierarhiji podatkovnega modela obstajajo trije nivoji: lastnosti, zapis in vsebnik. Za

analogijo lahko uporabimo znane Excelove razpredelnice, kjer bi ti nivoji ustrezali celici,

vrstici in tabeli.


Slika 12 – Podatkovni model ogrodja Vaadin[1]

Podatkovni model je realiziran kot nabor vmesnikov znotraj paketa com.vaadin.data.

Paket, skupaj z drugimi specializiranimi vmesniki in razredi, vsebuje vmesnike za

lastnosti, elemente in vsebnike.

Podatkovni model definira samo vmesnike in ne predstavitve podatkov, saj je ta

prepuščena vsebnikom. Predstavitev je lahko karkoli: podatkovna poizvedba, datotečni

sistem ali takoimenovani »enostavni java objekti« (angl. Plain Old Java Objects - POJO).

Podatkovni model ogrodja Vaadin pogosto uporabljajo komponente uporabniškega

vmesnika, še posebej komponente polj, ki implementirajo vmesnik Field in pa

komponente, ki dedujejo od razreda AbstractField. Ključna lastnost vsem komponentam

polj je, da lahko samodejno vzdržujejo svoje podatke ali pa so vezane na zunanje

podatkovne vire. Vrednost polja je vedno dostopna preko vmesnika Property. Na en


podatkovni vir lahko vežemo eno ali več komponent, zato lahko enostavno

implementiramo različne vzorce opazovalec-urejevalec (angl. Viewer-editor pattern).

Relacije med različnimi vmesniki podatkovnega modela so prikazani na Sliki 9.

Slika 13 – Relacije med vmesniki v podatkovnem modelu ogrodja Vaadin [1]

Podatkovni model ima veliko pomembnih in uporabnih značilnosti, kot je npr. podpora

proženja dogodkov ob spremembi vrednosti. Vsebniki imajo pomožne vmesnike, tudi tisti

vsebniki, ki omogočajo indeksiranje, razporejanje, sortiranje in filtriranje podatkov. Tudi

komponente polj, ki implementirajo vmesnik Field, zagotavljajo številne funkcionalnosti,

kot je validacija, medpomnjenje in zakasnjeno (angl. Lazy) nalaganje. Razen vmesnikov,

ogrodje Vaadin, nudi tudi nekaj vgrajenih implementacij teh vmesnikov. Vgrajene

implementacije se uporabljajo kot privzeti podatkovni modeli v mnogih komponentah polj.


Poleg vgrajenih implementiranih podatkovnih modelov obstaja še več implementacij

podatkovnih modelov, ki so kot vtičniki za ogrodje Vaadin. Eden izmed najpogosteje

uporabljanih je SQL vsebnik.

4.6.1 Lastnost

Osnova podatkovnega modela v ogrodju Vaadin je vmesnik Property. Ponuja

standardiziran programski vmesnik za enoten podatkovni objekt, ki ga lahko beremo ali

zapisujemo. Lastnost je vedno tipizirana, po potrebi pa lahko podpira pretvorbe med

podatkovnimi tipi. Tip lastnosti je lahko katerikoli javanski razred. Vrednost se nastavi z

metodo setValue(), beremo pa jo z metodo getValue(), ki vrača generični Java objekt,

katerega je potrebno pretvoriti v pravi tip. Pravi tip vednosti pa lahko dobimo z metodo

getType().

Spremembe vrednosti sprožijo dogodek ValueChangeEnvet, katerega obravnavamo z

vmesnikom ValueChangeListener. Objekt dogodka zagotavlja referenco do lastnosti z

metodo getProperty().

Ker so lastnosti medsebojno nepoimenovane, so zbrane v zapisih, ki povezujejo lastnosti z

njihovimi identifikatorji ali lastnostmi PID (angl. Property Identificator). Zapisi so lahko

zbrani v vsebniku, kjer so identificirani z identifikatorjem IID (angl. Item Identificator).

Če to primerjamo z analogijo z Excel razpredelnico, ugotovimo, da so takoimenovane

lastnosti identifikatorjev PID ekvivalentne nazivom stolpcev, IID pa številkam ali nazivom

vrstic. Da se identifikatorji lahko uporabljajo v standardnih nabornih tipih, kot je kolekcija

(angl. Collection), morajo implementirati metodi equals(Object) in hashCode().

Vmesnik Property se lahko uporablja, ali kot implementacija tega, ali kot uporaba vgrajene

implementacije za lastnosti. Ogrodje Vaadin vključuje vmesnik Property za

implementacijo parov funkcij in lastnosti zrn z razredom MethodProperty, za enostavne

lastnosti objektov pa z razredom ObjectProperty.

Zraven preprostih komponent, mnogo drugih komponent, kot je drevo, tabela in izbira,

zagotavljajo izbiro preko lastnosti Property. V posameznem načinu izbire je lastnost

identifikator ene vrstice, medtem, ko je v načinu večkratne izbire, zbirka identifikatorjev

vrstic.


Komponente, katere lahko navežemo na lastnost imajo notranji privzeti objekt

podatkovnega vira, ki je tipično objekt ObjectProperty.

4.6.2 Držanje vrednosti v vrsticah.

Vmesnik Item nudi dostop do nabora navedenih lastnosti. Vsaka lastnost je identificirana z

identifikatorjemPID. Referenco lastnosti pridobimo z metodo getItemProperty(), ki ji

podamo identifikator lastnosti.

Znani primeri so :

• tabela, kjer so zapisi vrstice z lastnostmi, ki ustrezajo stolpcem,

• drevo, kjer so zapisi listi in

• forma, kjer so lastnosti zapisov vezani na vsako polje.

Vrstice so ekvivalent objektom v objektno-orientiranem modelu, z izjemo, da so

nastavljive in zagotavljajo mehanizem za proženje dogodkov. Najenostavnejši način, kako

uporabiti vmesnik Item, je uporaba obstoječa implementacija vmesnika Item. Pomožni

razredi vključujejo nastavljive zbirke lastnosti (angl. PropertySetItem) in pretvornike med

zrni in vrsticami (angl. BeanItem). Komponenta PropertySetItem je generična

implementacija vmesnika Item, ki omogoča shranjevanje lastnosti. Lastnosti lahko

dodajamo z metodo addItemProperty(), katera kot parametra prejme ime in lastnost.

Komponenta BeanItem pa je implementacija vmesnika Item, ki je ovoj za javanske

objektne zrna. Komponenta Form implementira vmesnik Item, zato jo lahko uporabimo kot

vrstico podatkov. Zraven tega, da se vrstice posredno uporabljajo v mnogih komponentah

uporabniškega vmesnika, še zagotavljajo osnovni podatkovni model, ki je podlaga za

komponento Form. V preprostih primerih, se forme lahko avtomatično generirajo iz vrstic,

saj lastnosti vrstic ustrezajo poljem na formi.

Vmesnik Item definira notranje vmesnike, s katerimi vzdržuje svoje lastnosti in njihove

vrednosti ter proženje dogodkov ob spremembi teh lastnosti. Dogodek, ki se proži ob

spremembi je dogodek PropertySetChangeEvent, katerega oddaja razred, ki implementira

vmesnik PropertySetChangeNotifier. Lovimo ga preko vmesnika

PropertySetChangeListener.


4.6.3 Zbiranje vrstic v vsebnike

Vsebnik je vmesnik, ki je najvišji nivo podatkovnega modela. Zagotavlja zelo prilagodljiv

način upravljanja z zbirkami vrstic, ki imajo skupne lastnosti. Vrstice v vsebniku so

identificirane z IID identifikatorjem. V vsebnik lahko vrstice dodajamo z metodo

addItem(), ki ne sprejema dejanske vrstice kot parameter, temveč le identifikator te vrstice.

V primeru, da kličemo metodo brez parametra, se uporabi samodejno generiran IID.

Lastnosti lahko iz vsebnika dobimo na dva načina. V prvem načinu najprej z metodo

getItem() pridobimo objekt vrstice, nato pa nad objektom vrstice kličemo metodo

getItemProperty(). Drug način je direkten, saj nad vsebnikom pokličemo metodo

getContainerProperty(). Vmesnik Container omogoča prožnosti in učinkovitost ter ima

notranje vmesnike, katere lahko vsebnik implementira za sortiranje, indeksiranje in

hierarhični dostop podatkov. Takšni podatkovni modeli zagotavljajo osnovo za tabele,

drevesa in izbirne komponente. Kot vsi drugi vmesniki podatkovnega modela, vmesnik

Container podpira obveščanje o dogodkih nad svoji podatki. Ker so vsebniki lahko

nesortirani, sortirani, indeksirani ali hierarhični, lahko implementirajo katerokoli vrsto

predstavitve podatkov. Ogrodje Vaadin vključuje vgrajene podatkovne konektorje za

nekatere skupne podatkovne vire. Za preproste tabelarične podatke s komponento

IndexContainer in za podatkovni sistem z komponento FileSystemContainer.


5 PRAKTI ČNI DEL

V praktičnem delo smo raziskali gradnjo spletnih aplikacij s spletnim razvojnim ogrodjem

Vaadin, ter razvili lastno ogrodje za razvoj spletnih aplikacij prilagojenih za upravljanje z

vozlišči. Ker ogrodje Vaadin omogoča razvoj lastnih komponent, smo nekatere

komponente za lastne potrebe tudi razvili.

5.1 Uporabljeno okolje

Aplikacijo smo razvijali v razvojnem okolju Eclipse Indigo 3.7, ki je vključevalo dodatne

vtičnike za integracijo z ogrodjem Vaadin, ter vtičnike za integracijo z aplikacijskim

strežnikom JBoss. Za orodje Eclipse smo se odločili zaradi izkušenj iz preteklosti, saj je

zelo pregledno in omogoča veliko dodatnih funkcionalnosti. Za shranjevanje podatkov in

izvajanje bazne poslovne logike smo uporabili pomnilniško podatkovno bazo IBM

solidDB, verzije 3.6. Slika 15 prikazuje razvojno okolje, v katerem smo razvijali spletne

aplikacije.

Slika 14 – Razvojno okolje z ogrodjem Vaadin[1]


Kot je razvidno iz slike 14 smo uporabljali razvojno orodje Eclipse, kar pa je opcijsko, saj

lahko uporabimo tudi katero drugo orodje, kot je recimo orodje NetBeans. Enako velja za

aplikacijski strežnik, ki je lahko kateri koli spletni vsebnik. Z začetkom razvoja smo

uporabljali Apache Tomcat, kasneje pa smo prešli na aplikacijski strežnik JBoss 7.1. Slika

14 prikazuje, da razvojno orodje Eclipse skrbi za nalaganje spletne aplikacije na strežnik in

upravljanje s strežnikom. Orodje Eclipse tudi prevaja razrede aplikacijske logike ter

knjižnice ogrodja Vaadin in jih zapakira v datotečni format WAR (angl. Web application

ARchive).

5.2 Opredelitev problema

V podjetju Iskratel d.o.o. imamo za razvoj namiznih javanskih aplikacij razvito

takoimenovano »It ogrodje«, ki temelji na ogrodju Swing. Ogrodje podjetja je bilo razvito

za upravljanje s telekomunikacijskimi vozlišči in temelji na metamodelih, ki določajo

vsebino aplikacije.

Ker trenutni trendi kažejo, da se je veliko namiznih aplikacij preoblikovalo v spletne

aplikacije, takoimenovane RIA aplikacije in zaradi oddaljenega upravljanja, smo razvili

spletno verzijo ogrodja, ki temelji na ogrodju Vaadin.

5.3 It ogrodje

Ker je razvijanje aplikacij vedno znova od začetka predrago in nekonkurenčno, smo razvili

ogrodje s katerim bi skrajšali čas razvoja podobnih si aplikacij. Ogrodje je sestavljeno iz

strežniškega dela, ki skrbi za poslovno logiko, odjemalskega dela, ki za prikazovanje

aplikacije uporablja ogrodje Swing, vmesnikov za virov podatkov ter strežnika za

logiranje.

Glavne komponente strežniškega dela so:

• komponenta FwConnection (glavna komponenta, ki omogoča odjemalcu povezavo

do aplikacijskega strežnika),


• komponenta FwServer (Komponenta, ki vsebuje komponento FwConnection in

DbConnection) in

• komponenta MModel (Komponenta z metamodelom, kjer so opisani poslovni

razredi)

Na strani odjemalca so komponente:

• komponenta FwClient (glavna kontrolna komponenta)

• komponenta FwWindow (glavno okno uporabniškega vmesnika)

• komponenta Editor (komponenta za samodejno oblikovanje form)

• komponenta Finder (komponenta, ki nam omogoča iskanje po podatkih)

• razred ClientTransaction (razred zagotavlja povezavo do strežnika)

Aplikacije, zgrajene z It ogrodjem, temeljijo na metamodelih, ki določajo vsebino in izgled

aplikacije. Aplikacija kot parameter prejme pot do konfiguracijske datoteke, ki vsebuje

podatke o podatkovni bazi, povezave do podatkovne baze, podatke o gonilnikih za

podatkovno bazo, ter seveda veliko drugih parametrov. Razvijalec, ki razvija aplikacijo s

tem ogrodjem, ne potrebuje znanja o programskem jeziku Java, temveč le oblikovanje

metamodelov v XML strukturi. Slika 15 prikazuje arhitekturo ogrodja in vidimo lahko, da

se med strežnikom in odjemalcem uporablja protokol RMI. Strežniški del pa naprej

komunicira s podatkovnimi bazami in drugimi viri podatkov.


Slika 15 – Arhitektura ogrodja[14]

Ogrodje razvijalcem omogoča hiter razvoj aplikacij, saj omogoča ponovno uporabo

ponavljajočih delov kode. Naloge ogrodja so:

• trajnost poslovnim objektom;

• neodvisnost poslovnih objektov od vira hranjenja podatkov in dostopa do njih

(JDBC, SNMP, LDAP);

• podporo relacijam med poslovnimi objekti;

• generični dostop do poslovnih objektov - metapodatki;

• transakcijsko delovanje;

• večnitno delovanje;

• zagotavljanje varnosti;

• samodejno oblikovanje vnosnih form;

• samodejno oblikovanje okna za iskanje;


• podporo internacionalizaciji / lokalizaciji

5.4 Spletno ogrodje

Ko smo izbirali ogrodje, na podlagi katerega bi izgradili lastno spletno ogrodje, smo se

odločili za ogrodje Vaadin. Za ogrodje Vaadin smo se odločili, ker je aplikativno

usmerjeno in ker je razvijanje z ogrodjem Vaadin podobno razvoju klasičnih javanskih

namiznih aplikacij. To pa omogoča lažjo preslikavo komponent iz trenutnega ogrodja v

spletno ogrodje. V spletno različico ogrodja smo želeli prenesti vse funkcionalnosti in

obliko uporabniškega vmesnika. To nam je uspelo skoraj povsod. Novo spletno ogrodje je

postalo odvisno od ogrodja za razvoj namiznih aplikacij, saj uporablja enake strežniške

komponente in vmesnike. Ker strežniške komponente ne vedo, ali gre za Swing

komponente ali komponente ogrodja Vaadin, imamo definirane vmesnike, ki jih

implementirajo. Slika 16 prikazuje razredni diagram komponente Button za namizno It

ogrodje, ki temelji na ogrodju Swing ter komponento Button za spletno ogrodje, ki temelji

na ogrodju Vaadin.

Slika 16 – Komponenta Button v It in spletnem It ogrodju

Na levi strani slike so komponente namiznega It ogrodja, na sredini vmesniki ter na desni

strani komponente spletnega It ogrodja. S tem pristopom smo preslikali vse komponente

grafičnega vmesnika iz It ogrodja v spletno It ogrodje.


5.5 Spletna aplikacija

Vsaka spletna aplikacija zgrajena z ogrodjem Vaadin teče kot Java Servlet v Servlet

vsebniku. Vstopna točka je aplikacijski razred, ki kreira in upravlja z vsemi komponentami

uporabniškega vmesnika, vključno z okni. Na sliki 17 je prikazana splošna arhitektura

spletne aplikacije, zgrajene z ogrodjem Vaadin.

Slika 17 – Arhitektura spletne aplikacije[1]

S postavitvenim deskriptorjem (angl. Deployment Descriptor) web.xml določimo ogrodju

Vaadin, kateri aplikacijski razred naj uporabi Servlet. To naredimo tako, da definiramo

servlet ogrodja Vaadin in mu kot vhodne parametre dodamo Aplikacijo, ki podeduje od

Aplikacije ogrodja Vaadin, ter widgetset, ki se bo uporabljal.

<?xml version="1.0" encoding="UTF-8"?>

<web-app >

<display-name>HelloWorld</display-name> <context-param>

<description>Vaadin production mode</description>

<param-name>productionMode</param-name>

<param-value>false</param-value>

</context-param>


<servlet>

<servlet-name>Helloworld Application</servlet-name>

<servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>

<init-param> <description>Vaadin application class to start</description>

<param-name>application</param-name>

<param-value>com.example.helloworld.HelloworldApplication</param-value>

</init-param>

<init-param> <description>Application widgetset</description>

<param-name>widgetset</param-name>

<param-value>com.example.helloworld.widgetset.HelloworldWidgetset</param-

value>

</init-param>

</servlet> <servlet-mapping>

<servlet-name>Helloworld Application</servlet-name>

<url-pattern>/*</url-pattern>

</servlet-mapping>

</web-app>

Pomemben parameter je parameter productionMode, s katerim določimo, ali smo v

razvojnem okolju, ali v produkcijskem okolju. Če smo v razvojnem okolju, mora vrednost

biti postavljena na false. To omogoča, da lahko v brskalniku iščemo in popravljamo

napake po vseh komponentah grafičnega vmesnika in dogodkih. Tudi logiranje je bolj

bogato, saj izpisuje veliko stvari ki pomagajo ob testiranju aplikacije.

5.6 Metamodel

Vsaka spletna aplikacija, zgrajena s spletnim It ogrodjem, temelji na metamodelih. Ti v

aplikaciji določajo izgled in akcije. V metapodatkih definiramo:

• poslovne komponente,

• razrede (tabele v podatkovni bazi),

• atribute (stolpci določene tabele),

• povezave (relacije med tabelami),

• akcije na uporabniškem vmesniku in

• poslovne operacije

<?xml version="1.0" encoding="ISO-8859-1" ?>

<mmodel>


<component/>

<functionalGroup/>

<class>

<attribute/>

<relation/>

<operation/>

</class>

</mmodel>

5.7 Uporaba vtičnikov

Ker implementacija nekaterih komponent, ki niso v naboru ogrodja Vaadin, zahtevajo

veliko časa, smo se poslužili tudi nekaterih vtičnikov. Vtičniki se nahajajo na spletnih

straneh ogrodja Vaadin in skoraj vsi temeljijo na licenci Apache 2.0[11].

Da smo lahko ogrodje Vaadin uporabljali v orodju Eclipse, smo morali vanj dodati vtičnik

za ogrodje Vaadin. Ta omogoča, da lahko kreiramo spletne Vaadin projekte v orodju

Eclipse ter, da lahko zgradimo takoimenovani »Widgetset«, ki vsebuje HTML in

JavaScript kodo za odjemalca.

Vsak vtičnik, ki ga je aplikacija potrebovala, smo morali dodati v mapo WEB-INF/lib, nato

pa ponovno zgraditi widgetset.

Uporabili smo dva vtičnika za prikaz komponent uporabniškega grafičnega vmesnika, ter

eno komponento, ki smo jo potrebovali za prenos komponent iz strežnika na odjemalca:

• Vtičnik ContextMenu je grafična komponenta za prikaz menija kjerkoli in na

katerikoli komponenti. Meni je lahko večnivojski in vsebuje tudi ikone pred

besedilom. Meni smo prikazali po kliku na desni miškin gumb nad komponento in s

tem predefinirali privzeti meni, ki ga ponuja brskalnik.


Slika 18 – Primer uporabe vtičnika ContextMenu

• Vtičnik ContextHelp je komponenta grafičnega vmesnika, ki omogoča, da ob

desnem kliku z miško nad vnosnim poljem ali tipko F1 v vnosnem polju prikaže

informacije o vnosnem polju. Informacije podajajo za kakšno vrsto vnosnega polja

gre, koliko lahko ima znakov, itd. Ker je ta funkcionalnost bila podprta v It

ogrodju, smo morali nekako prenesti v spletno verzijo ogrodja.

Slika 19 – Primer uporabe komponente ContextHelp

• Vtičnik IcePush je komponenta, ki ogrodju Vaadin omogoča funkcijo push(). To

nam omogoča, da spremembe grafičnih komponent pošljemo na odjemalca. Ta

princip smo uporabljali ob klicanju dialogov. Več o tem bomo razložili v

naslednjem poglavju.


5.8 Nitenje

Da bi naša spletna aplikacija podpirala enake funkcionalnosti in enako poslovno logiko,

smo morali uporabit vtičnike. Največji problem je predstavljal dialog in njegova metoda

show(), ki vrača rezultate pridobljene v dialogu.

ItDialog dialog=new ItDialog();

Object[] results=dialog.show();

V ogrodju Swing tak pristop ni povzročal težav, saj aplikacija, zgrajena z ogrodjem Swing

in posledično našo It ogrodje, teče v eni niti. Ogrodje Swing tudi ima podprto komponento

JDialog, ki čaka na odgovor. V spletnem ogrodju Vaadin pa ni podobne komponente, zato

smo uporabljali okno za prikazovanje dialoga. Problem pa se je pojavil, da se je izvajanje

kode nadaljevalo po klicu metode show(). Zato smo dialog prikazali in v zanki čakali

dokler ni zastavica bila true. To nas je privedlo do problema, da smo zablokirali glavno nit

v kateri se izjava spletna aplikacija in nismo mogli prikazati dialoga in posledično tudi

nismo mogli zaključit izvajanje zanke. Zato smo kreirali novo nit in v njej kreirali dialog

ter v niti izvajali zanko, ki se je izvajala, dokler se ni zastavica spremenila. Da smo

prikazali dialog smo uporabili vtičnik IcePush, ki je to novo nit postavil v ospredje in

prikazal dialog. Ta pristop smo uporabili povsod, kjer smo morali čakat na odgovor

uporabnika.

Ker smo dialoge in veliko poslovne logike začeli izvajat v novih nitih, se nismo zavedali

posledic. Aplikacijo smo namestili na oddaljeni strežnik in jo testirali s petnajstimi

odjemalci naenkrat. Zaradi zakasnitve v omrežju ter uporabljanju in proženju akcij več

odjemalcev naenkrat so se pojavile napake java.util.ConcurrentModificationException nad

razredom AbstractList. Ogrodje Vaadin za shranjevanje komponent uporablja razrede, ki

dedujejo od razreda AbstractList, in med delovanjem aplikacije, ko se komponente

dodajajo in odstranjujejo se je ta seznam spremenil, kar je privedlo do omenjene napake.


Zato smo morali povsod, kjer smo komponente grafičnega vmesnika dodajali ali

odstranjevali, klicati v bloku synchronized.

5.9 Teme

Ogrodje Vaadin vsebuje nekaj različnih tem za prikazovanje. V začetku razvoja smo

uporabili privzeto temo. Kasneje pa smo se odločili, da tudi stil iz namiznih aplikacij in

ogrodja prenesemo v spletno ogrodje in spletne aplikacije.

Za vsako temo, ki jo želimo vključiti v aplikacijo, moramo kreirati mapo v direktoriju

WebContent/VAADIN, ki mora imeti enako ime kot je ime teme. Ta mapa mora nato

vsebovati styles.css datoteko, ki opisuje obliko za razrede. Nad razredom Application

lahko pokličemo metodo setTheme(), ki kot parameter prejme ime teme.

public void init() {

setTheme("iskratelNew");

}

Nad vsako komponento lahko kličemo metodo setStyleName(), s katero ji povemo kateri

slog naj uporabi.

.it-icon-button {

position: relative;

}¸

Button button=new Button();

Button.setStyleName(»it-icon-button«)

5.10 Lastne komponente

Ogrodje Vaadin ponuja velik nabor komponent uporabniškega grafičnega vmesnika. Ker

smo potrebovali tudi komponente, ki ji ogrodje ne ponuja, smo morali razviti svoje lastne

komponente. Te komponente so posebna oblika vnosnih polj, ki so namenjene za vnos IP

naslovov, naslova MAC in maske omrežja. Ker bi uporaba splošnega vnosnega polja bila

preveč kompleksna za implementiranje funkcionalnosti, smo kreirali lastne komponente.


Ogrodje Vaadin poudarja, da je lažje ustvarit svojo lastno komponento, kot pa to

funkcionalnost implementirati v obstoječi.

Vsaka lastna komponenta je sestavljena iz več delov. Na sliki 20 vidimo kako in iz katerih

razredov je sestavljena komponenta.

Slika 20 – Struktura lastne komponente

Komponenta je sestavljena iz strežniške komponente MACField.java, ki deduje od

komponente AbstractComponent ogrodja Vaadin, ter komponente na odjemalski strani

VMACField.java, ki deduje od komponente ogrodja GWT. Komponenti na strežniški

strani z notacijo @ClientWidget() povemo, katero komponento bo imela za prikaz v

brskalniku.

@ ClientWidget(value=si.iskratel.webfw.gui.widgets.client.ui.VMACField.class)

public class MACField extends TextField {

}

Komponenti na odjemalski strani lahko rečemo tudi »Widget. Da se lahko prikaže v

brskalniku, mora vsaka taka komponenta implementira vmesnik Paintable. Ta

implementacija je implementirana v metodi updateFromUIDL().

public class VMACField extends TextBoxBase implements Paintable, Field, {

public static final String CLASSNAME_MAC = "it-macfield";

public VMACField() {


this(DOM.createInputText());

}

protected VMACField(Element node) {

super(node);

addStyleName(CLASSNAME_MAC);

}

public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {...}

}

Komponenta je sestavljena iz iz style.css datoteke, ki opisuje njen slog in iz datoteke, ki

pove kateri Widgetset se mora uporabil ob grajenju te komponente.

Po končani implementaciji celotne komponente je potrebno znova zgraditi Widgedset za

našo aplikacijo. To smo storili preko vtičnika v orodju Eclipse. Kako izgledajo lastne

komponente za MAC naslov, IP naslov ter naslov maske lahko vidimo na sliki 21.

Slika 21 – Lastne komponente

5.11 Preslikava It ogrodja v spletno It ogrodje

Ob gradnji spletnega ogrodja smo se želeli vse funkcionalnosti in obliko komponent

uporabniškega grafičnega vmesnika prenest iz It ogrodja v spletno It ogrodje. V veliki meri

nam je to uspelo in nam ni bilo potrebno spreminjat implementacije nekaterih skupnih

razredov, kot je recimo razred Editor, ki skrbi za prikazovanje in upravljanje z dialogom.

Ker pa komponente ogrodja Vaadin niso ekvivalentne komponentam ogrodja Swing, ne

ponujajo vseh funkcionalnosti, temveč le osnovne. Ko smo gradili okno, kjer se logira,

nismo mogli uporabit tekstovnega področja ogrodja Vaadin za izpis vrstic, saj ta nima

možnosti večbarvnih izpisov, medtem ko jih ogrodje Swing omogoča. Drugi problem pri

oknu za logiranje je bil drsnik, kateri bi se moral ob novem vpisu postavit na konec.


Komponenta tekstovnega območja pa ne nudi funkcije za postavitev drsnika. Rešitev smo

našli tako, da smo uporabili ploščo (angl. Panel), ki vsebuje drsnik in funkcijo za

manipuliranje z njim, ter labelo, ki smo jo odložili po celotno plošči. Labela je vsebovala

vsebino v obliki HTML, tako smo lahko v različnih barvah vpisovali v okno za logiranje.

Slika 22 – Namizna aplikacije zgrajene z It ogrodjem

Na sliki 22 je prikazana namizna aplikacija zgrajena z ogrodjem It. Vsaka taka aplikacija

ima na levi strani navigacijsko ploščo, kjer so prikazane funkcionalne skupine in njihovi

razredi. Na desni strani je komponenta Finder, ki vsebuje tabelo, iskalno polje ter

komponente za proženje akcij. Spodaj pa je okno, kamor se logira. Vse te komponente

skupaj sestavljajo komponento MnWindow.

Enak metamodel, smo uporabili za izgradnjo spletne aplikacije. Na slika 23 je prikazana

spletna aplikacija zgrajena s spletnim ogrodjem. Vidimo lahko, da sta aplikaciji enaki,

razen v izgledu komponent uporabniškega vmesnika.


Slika 23 – Spletna aplikacija zgrajena s spletnim It ogrodjem

Tabela 1 prikazuje nekaj komponent, ki smo jih iz namiznega It ogrodja preslikali v

spletno ogrodje.

Tabela 1 – Komponete namiznega in spletna ogrodja

It ogrodje Spletno It ogrodje

MnWindow WebWindow

MnClient WebClient

MnNavigationPanal WebNavigationPanel

StandartFinder WebStandartFinder

QueryPanel WebQueryPanel

ResultPanel WebResultPanel

ToolbarFinderPanel WebToolbarFinderPanel

ItTable WebTable

DialogFactory WebDialogFactory


DateField WebDateField

GenericField WebGenericField

IPField WebIPField

IPMaskField WebIPMaskField

ItButtonImpl WebButton

ItCheckBoxImpl WebCheckBox

ItComboBoxImpl WebComboBox

ItComponentImpl WebComponent

ItContainerImpl WebContainer

ItDialogImpl WebDialog

ItInputFieldImpl WebInputField

ItInputFieldInfo WebInputFieldInfo

ItLabelImpl WebLabel

ItRadioButtonImpl WebRadioButton

ItRelationImple WebRelation

ItTabbedPaneImpl WebTabbedPane

ItTableBoxImple WebTableBox

ItTabPageImpl WebTabPage

ItTextAreaImpl WebTextArea

ItUploadComponentImpl WebUploadComponent

MacField WebMacField

NumberField WebNumberField

PasswordField WebPasswordField

StringField WebStringField

ItStatusPaneImpl WebStatusPane

ItLogPaneImpl WebLogPane


6 SKLEP

V diplomskem delu smo pregledali katere vrste ogrodjih obstajajo za razvoj bogatih

spletnih aplikacij, ter preučili ogrodje za izdelavo bogatih spletnih aplikacij Vaadin.

Ogrodje Vaadin je zelo aplikativno usmerjeno, saj lahko z njim razvijamo aplikacije na

podoben način kot jih razvijamo z ogrodjem za namizne javanske aplikacije. Ogrodje

Vaadin deluje na strežniški strani, uporablja javansko platformo, je odprtokodno in

uporablja licenco Apache 2.0. Ogrodje je zelo dobro dokumentirano, saj je na voljo že

četrta različica knjige in ima veliko skupnost, ki za skoraj vsak problem pozna rešitev.

Tako je razvoj bogatih spletnih aplikacij zelo enostaven in produktivnost zelo hitro začne

naraščati. Razvijalcu se ni potrebno ukvarjati s sejami in podporo različnim brskalnikom,

za to poskrbi vgrajeno ogrodje GWT. Zato se razvijalec lahko posveti poslovni logiki same

aplikacije. Prednost ogrodja Vaadin pred glavnimi ogrodji Microsoft Silverlight in Adobe

Flex, je ta, da ne potrebuje nobenih dodatnih vtičnikov za prikaz, in je seveda odprtokodno.

Kot vsako ogrodje ima ogrodje Vaadin tudi nekaj slabosti. Te se kažejo v zmogljivostih, ki

je pri kompleksnejši obliki spletne aplikacije zelo slaba. Zakasnitve paketov med

strežnikom in odjemalcem postajo vse večje. Tudi vsak dogodek, ki ne vrača podatkov ali

ne spreminja grafičnega vmesnika, se pošilja na strežnik. Še ena od slabosti je

pomanjkanje dobrega grafičnega urejevalnika, da bi se lahko pri oblikovanji grafičnega

vmesnika, izognili kodiranju.

Na področju javanski orodjih za razvoj spletnih aplikacije vlada prava zmeda. Ogrodij je

toliko, da je izbira pravega ogrodja zelo težkavna. Trenutno na trgu prevladujeta lastniški

rešitvi Silverlight in Flex, vendar se v prihodnosti pričakuje močan vpliv HTML5

standarda ter povečanja deleža odprtokodnih rešitev.


7 VIRI, LITERATURA

[1] Marko Grönroos, Book of Vaadin: 4th Edition, Vaadin Ltd, 2011.

[2] Ajax programiranje, http://sl.wikipedia.org/wiki/Ajax_%28programiranje%29,

obiskano 17.3.2012

[3] Google Web Toolkit, http://en.wikipedia.org/wiki/Google_Web_Toolkit, obiskano

19.3.2012

[4] Srečko Žličar, Format JSON in Orderly v spletnih aplikacijah, diplomsko delo,

Maribor 2010

[5] Web 2.0, http://en.wikipedia.org/wiki/Web_2.0, obiskano 20.3.2012

[6] Rich Internet Application Market Share,

http://www.statowl.com/custom_ria_market_penetration.php, obiskano 19.3.2012

[7] Rich Internet application, http://en.wikipedia.org/wiki/Rich_Internet_applications,

obiskano 17.3.2012

[8] List of rich Internet application frameworks,

http://en.wikipedia.org/wiki/List_of_rich_Internet_application_frameworks,

obiskano 18.3.2012

[9] Web application framework, http://en.wikipedia.org/wiki/Web_framework,

obiskano 15.3.2012

[10] Comparison of web application frameworks,

http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks,

obiskano 17.3.2012

[11] Vaadin add-ons, http://vaadin.com/directory, obiskano 20.3.2012

[12] Andrej Krajnc, Dokumentiranje ogrodij informacijskih rešitev, Magistrska naloga,

Maribor, julij 2006

[13] Andrej Krajnc, Ciril Petr, Bojan Štok, Razvoj RIA aplikacij z uporabo HTML5,

konferenca OTS 2010 Sodobne tehnologije in storitve, Maribor 15. in 16. junij

2010


[14] Bojan Štok, Mihael Jezeršek, Aleš Vidic, Application framework for management

nodes software, Intertni dokument podjetja Iskratel, December 2008


8 PRILOGE

8.1 Seznam slik

Slika 1 – Prikaz uporabe tehnologij za RIA aplikacije[6] ..................................................... 3

Slika 2 – Osnovna arhitektura spletne aplikacije v ogrodju Vaadin [1].............................. 11

Slika 3 – Arhitektura ogrodja Vaadin[1] ............................................................................. 12

Slika 4 – Arhitektura izvajalnega okolja na odjemalski strani[1] ....................................... 18

Slika 5 – Razredni diagram vmesnika Button.ClickListener[1].......................................... 20

Slika 6 – Graf dedovanja komponent grafičnega vmesnika[1] ........................................... 22

Slika 7 – Vmesniki komponent in abstrakcije[1] ................................................................ 23

Slika 8 – Komponente polj[1] ............................................................................................. 24

Slika 9 – Relacije tekstovnih polj[1] ................................................................................... 29

Slika 10 – Vertikalna in horizontalna postavitev[1]............................................................ 32

Slika 11 – Horizontalna in vertikalna razdelilna plošča[1] ................................................. 33

Slika 12 – Podatkovni model ogrodja Vaadin[1] ................................................................ 35

Slika 13 – Relacije med vmesniki v podatkovnem modelu ogrodja Vaadin [1] ................. 36

Slika 14 – Razvojno okolje z ogrodjem Vaadin[1] ............................................................. 40

Slika 15 – Arhitektura ogrodja[14]...................................................................................... 43

Slika 16 – Komponenta Button v It in spletnem It ogrodju................................................. 44

Slika 17 – Arhitektura spletne aplikacije[1] ........................................................................ 45

Slika 18 – Primer uporabe vtičnika ContextMenu .............................................................. 48

Slika 19 – Primer uporabe komponente ContextHelp......................................................... 48

Slika 20 – Struktura lastne komponente.............................................................................. 51

Slika 21 – Lastne komponente ............................................................................................ 52

Slika 22 – Namizna aplikacije zgrajene z It ogrodjem........................................................ 53


Slika 23 – Spletna aplikacija zgrajena s spletnim It ogrodjem............................................ 54

8.2 Seznam preglednic

Tabela 1 – Pregled ogrodij za razvoj bogatih spletnih aplikacije[8] ..................................... 4

Tabela 2 – Število ogrodij glede na implementacijski jezik[10]........................................... 7

Tabela 3 – Seznam ogrodij za razvoj spletnih aplikacij v javi[10] ....................................... 7

8.3 Naslov študenta

Mitja Skuhala

Sodinci 13

2274 Velika Nedelja

Tel.študenta: 041 / 911 – 473

e-mail študenta: [email protected]




Documents

RAZVOJ SPLETNIH APLIKACIJ Z OGRODJEM VAADIN · RAZVOJ SPLETNIH APLIKACIJ Z OGRODJEM VAADIN Stran 1 1 UVOD V zadnjih letih se je zelo pove čal razvoj spletnih aplikacij in z njim