Evropský polytechnický institut, s

towerdevelopmentData Management

Dec 16, 2012 (4 years and 10 months ago)

438 views

EUROPEAN POLYTECHNIC INSTITUTE LTD
.









BACHELOR THESIS





















2011







RADOVAN DVORSKÝ


European Polytechnic
Institute Ltd.
,

Kunovice

Study Field: Economic Informatic
s










Information System
for

the Study Department
Evidence of Sta
te E
xamination
s

(Bachelor Thesis)














Author:

Radovan Dvorský

Supervisor:

Ing. Jindřich Petrucha, Ph.D.




Kunovice, june 2011






























I declare

that

I have prepared this Bachelor thesis by myself under the supervision
of


Ing. Jindřich Petrucha, Ph.D.
and that I have listed all the literary and profession
al sources
in the Bibliography
.



Kunovice, June 2011






































I

would like to thank
Ing
. Jindřich Petrucha, Ph.D.
for

the very useful methodical help

h
e
provided me with during the preparation of my Bachelor Thesis
.


Kunovice,
June 2011


Radovan Dvorský

Content


INTRODUCTION

................................
................................
................................
...............

7

1

ANALYSIS OF THE CURR
ENT STATE AND APPLIC
ATION ANALYSIS

....

9

1.1

A
NALYSIS OF CURRENT S
TATE

................................
................................
................

9

1.2

F
UNCTIONAL REQUIREMEN
TS

................................
................................
.................

9

1.3

T
ECHNICAL REQUIREMENT
S

................................
................................
..................

10

1.4

D
ATABASE MODEL

................................
................................
................................

10

2

TECHNOLOGIES USED FO
R IMPLEMENTATION

................................
........

16

2.1

G
OOGLE
W
EB
T
OOLKIT
(GWT)

................................
................................
............

16

2.1.1

GWT Components

................................
................................
............................

17

2.1.2

Other tools

................................
................................
................................
.......

20

2.1.3

Advantages of GWT

................................
................................
.........................

20

2.2

M
Y
SQL

................................
................................
................................
................

21

2.3

PHP

................................
................................
................................
......................

21

2.4

Z
END
F
RAMEWORK

................................
................................
...............................

22

2.5

XML

R
EMOTE PROCEDURE CALL

(XML
-
RPC)

................................
....................

23

2.5.1

Request specification

................................
................................
.......................

24

2.5.2

Response specification

................................
................................
.....................

26

2.5.3

Supported types

................................
................................
................................

27

2.6

A
PAC
HE

................................
................................
................................
................

28

2.7

J
AVA

................................
................................
................................
.....................

28

2.8

E
CLIPSE
IDE

................................
................................
................................
.........

29

3

IMPLEMENTATION

................................
................................
...............................

30

3.1

GWT

PROJECT PACKAGES STR
UCTURE

................................
................................
.

30

3.2

P
ACKAGES AND FOLDER S
TRUCTURE OF THE APPL
ICATION

................................
...

31

3.2.1

src folder description

................................
................................
.......................

31

3.2.2

war folder description

................................
................................
......................

34

3.3

XML
-
RPC

................................
................................
................................
............

36

3.3.1

Client
-
side implementation

................................
................................
..............

36

3.3.2

Serve
-
side implementation

................................
................................
...............

39

3.4

D
ECLARATIVE
L
AY
OUT WITH
U
I
B
INDER

................................
..............................

40

3.4.1

UI creation

................................
................................
................................
.......

41

3.4.2

Appearance initialization

................................
................................
.................

43

3.4.3

ui.xml elements initialization

................................
................................
...........

44

3.5

C
LIENT
B
UNDLE INTERFACE

................................
................................
..................

44

3.5.1

MyResource interface

................................
................................
......................

45

3.5.2

ImageResource interface

................................
................................
.................

46

3.5.3

CssResources interface

................................
................................
....................

48

4

OUTPUTS TEST
ING

................................
................................
................................

49

4.1

S
UMMARY TABLE EXPORT
................................
................................
.....................

49

4.1.1

_exportTableToPdf and _exportTableToHtml implementation

.......................

50

4.1.2

Database tables used in export

................................
................................
........

52

4.2

P
ROTOCOL EXPORT

................................
................................
...............................

53

4.2.1

Database tables used in

export

................................
................................
........

53

4.3

T
ESTING

................................
................................
................................
................

54

4.3.1

Schedules management

................................
................................
....................

55

4.3.2

St
udy fields management

................................
................................
.................

56

4.3.3

Results management

................................
................................
........................

57

5

DOCUMENTATION

................................
................................
................................
.

59

5.1

S
OURCE CODE DOWNLOAD
AND COMPILATION

................................
.....................

59

5.2

D
ATABASE CREATION

................................
................................
...........................

60

5.3

A
PPLICATION USER INTE
RFACE DESCRIPTION

................................
........................

61

5.3.1

Left section
-

menu

................................
................................
...........................

61

5.3.2

Middle section


content

................................
................................
..................

63

5.3.3

Right section


panel

................................
................................
........................

66

6

EVALUATION OF THE AP
PLICATION IN PRACTIC
E

................................
..

67

CONCLUSION

................................
................................
................................
..................

68

EVALUATION FROM COMP
ANY

................................
................................
...............

69

ABSTRACT

................................
................................
................................
........................

70

BIBLIOGRAPHY

................................
................................
................................
..............

71

LIST OF ABBREVIATION
S

................................
................................
...........................

73

LIST OF PICTURES AND

TABLES

................................
................................
..............

74

LIST OF SOURCE CODES

................................
................................
.............................

75

APPENDICES

................................
................................
................................
....................

76













7

Introduction



The
Information system on our school is extensive and consists of many modules and
applications. These applications cover a variety of activities resulti
ng from the needs of
teachers and students.

The r
ole of my application is to extend this informa
tion system and
to
add a new application that will be used on

the

state examination.


Presently

there

is used an older application which is not sufficient.

The
u
ser interface of
this application has become obsolete and doesn't provide sufficient user comfort. Also the
application functionality isn't sufficient and doesn't cover all

the

task
need
s

on

the

state
examination. Therefore, my task was to create a web ap
plication that will eliminate these
deficiencies and

that

provides satisfactory user experience in creating and managing
schedules for

the
state examination.


Web applications are today popular mainly for their compatibility across different
operating syst
ems. To run
these applications it is

only needed to instal
l a web browser, so
there isn’t any need

to install any additional software on your computer. This type of
application is suitable for deployment in environments such as our school because
applicati
ons like this provides easy access from everywhere without

the

need of installing
any additional software.


The t
ime when websites were built only as static HTML pages is

in

the past. Today

has

become very popular
techniques and tools that allow the

dynami
c generation of HTML
pages. One of these techniques

is a client
-
side scripting which is

using the
JavaScript

language. This solution enables dynamic content generation without re
-
loading the whole
page,
which many users considered as

disturbing. Recently

t
here

has become
very popular
technologies that enable

scripts collaboration on the client
-
side with

the

application server.
One of these technique is AJAX (Asynchronous
JavaScript

and XML), a web development
technique using a combination of HTML,
JavaScrip
t

and the
XMLHttpRequest

interface, which enables

the

sending

of

re
quests to the server and the receiving of

responses without having to refresh the entire page.


Recently

and gaining in

popularity

are

tools built on AJAX technology, allowing quick and
eff
ective web development. Popular are web applications from Google known as Google
8

Apps.

Very

well
-
k
nown are for example these applications: Google Docs, Google Reader,
Gmail, and more. These
applications

are
created by

using Google Web Toolkit (GWT),
which
I also used for my application development
. Use of this tool allowed me a

fast and
efficient application development.


The goal of this Bachelor Thesis

was to create a web application and show

the

possibilities
of GWT and

to

illustrate

the

implementation o
f GWT in

a

larger application.









































9

1

Analysis of

the

current state and application analysis


First was performed analysis.

The m
ain goal of this analysis was t
o find out the

weaknesses of the current solution and

to

sugges
t

a

new solution.


1.1

Analysis of current state


Currently is used an older application, but user interface (UI) of this application does not
provide sufficient user comfort, functionality and does not cover all required activities for
state exam. Therefore,
after analyzing these issues and consultation with professors who
will work with this application I suggested
a new solution that removes

these design
deficiencies.



1.2

Functional requirements


Based on past problems has been made analysis, which led to the
setting of the basic
functional requirements that should application accomplish. The application should
therefore allow:



creation of schedules for state exam



schedule should include a study field in which students belongs



harmonogram also must contain exam

date



there must be four roles for every commission member



harmonogram must also contain exam subjects



order of students in
schedules

must be editable



result table must include question number for every student



result table must contain evaluation for stu
dent from subjects,
evaluation

of
bachelor thesis from „vedúci, oponent“ and
overall

evaluation

from state exam



the output of this application should be protocol from state exam (in HTML or
PDF file format)



user interface (UI) of application should be sim
ple and comfortable

10

1.3

Technical requirements


For full apllication functionality on the server side application requires a http server with
PHP language support (at least version 5.2) and an application data storage requires a
MySQL database system with supp
ort for InnoDB storage system. For the smooth running
of the user interface generated by the GWT, is needed modern web browser with enabled
JavaScript
. Specifically, the application is tested on Firefox, Opera and Chrome
(Chromium). To accelerate the proce
ssing of PHP scripts it is appropriate to use a server
side application eAccelerator. This application speed up PHP scripts processing.


1.4

Database model


Application uses three databases. Two school

databases and one application database.
School databases
m
ostly contains personal students data and is mostly used for generating
„Protokol ze státní zaverečné zkoušky“ . First school database contains
these

tables:



Student, T_Tridy,



Student_has_Tridy,



Sk_Rok
,



St_obory.

second school database contains only one t
able:



uchazeci

and this is tables created by application:



professor,



subject,



subject_studyfield



studyfield



studyfield_st_obory,



question,



harmonogram,



harmonogram_student,



harmonogram_professor



result,



result_subject.

11

Table Student


Is table from school d
atabase which contains personal data like name, login etc
.

There
are
lots

of rows in this table, but
application uses

only this rows:



ID_st


primary key for student



Jmeno



student first name



Priezvisko



student last name



Login



login to the school syst
em


Table T_Tridy


It is also school database table which contains all classes on the school:



ID_tr



primary key for class



Zkratka



class shortcut



Id_oboru



foreign key from table St_Obory



vznik



year of creation


Table Student_has_Tridy


This table ma
ke realational connection between table
Student

and
T_Tridy
:



Student_ID_st

-

primary key for student



Tridy_ID_tr
-

primary key for class


Table Sk_Rok


This school database table contains only school years .



ID_sk



primary key for year



skolni_rok



nam
e of the school year (for example 2009/2010)


Table St_obory


This table contains study fields on school:



Id_oboru


primary key for study field



Obor



name of the study field (for example „Ekonomická informatika“)

12

Table uchazeci


Uchazeci

is l
ast school
database table
and it
contains another personal data which
doesn’t

provide table
Student
. Data from this table is used for generating „protokolu o
státní zkoušce“.


Table professor


In this table are professors who are present at the state exam. These prof
essors are assigned
to commissions.



pid



primary key for professor



short



shortcut of the professors name



firstname



firstname



lastname

-

lastname



title_before



degree before the name



title_behind



degree behind the name


Table subject


This table con
tains all
subjects



sid



primary key for subject



short



shortcut of subject



name



whole name of the subject


Table subject_studyfield


Subject_studyfield is connection table (M:N relation) which assigns subjects to study fields
from table
studyfield
. Th
is assignment determines subjects from which is exam made.



Sfid



primary key for study field



sid



primary key for subject





13

Table studyfield


There are all study fields on the school. This table provides connection between school
table
St_Obory

and app
lication. Main role of this table is also join present and combined
form of study to one database table. This joint is needed because application doesn't need
to distinguish between present and combined form of study and also allows more
comfortable access

to the study fields.



sfid



primary key for study field



name



name of the study field


Table studyfield_st_obory


Main role of this table is make connection between
school

database table
st_obory

and
application table
studyfield
.



sfid



Id_oboru


Tabuľka
question


Table contains all questions for the state exam.



qid



primary key for question



sid



foreign key of the subject from table subject



text



text of the question



qn



number of the question


Tabuľka harmonogram


This table contains all
shedules
.



hi
d



primary key for
shedule



harmonogram_name



shedule

name



sfid



foreign key for study field



date



date of the state exam



exam_place



place where exam is made

14

Table harmonogram_student


This
table

assigns students to the
schedules

and determines the ti
me when they are going to
make exam. It's connection table which make link to the table Student from the
school

database.



hid



primary key for
shedule



ID_st



primary key for student



time



time when student goes to the exam


Table harmonogram_professor


This table is similar to the harmonogram_student table with one difference. Table doesn't
make link to the table Student but table professor. This table also contains row with name
role which determines role of the professor in commission.



hid



foreign ke
y for table
shchedule



pid



foreign key for professor



role



role of the professor in the commission


Table result


In this table are overall result from state exam for every student.



rid



primary key for
result



ID_st



primary key for student



oponent_gra
de



evaluation from „oponent“



obhajoba_grade



grade from the „obhajob
a




overall_grade



overall grade from the exam



overall_subjects_grade



overall grade from „odborný blok“



question_number


number of the questions







15

Table result_subject


This tabl
e

contains grades from subject.



rid



foreign key for table result



sid



foreign key for table subject



grade



grade from the subject











































16

2

Technologies used for implementation


It was
necessary to
choose

suitable techno
logical resources to meet all the requirements
that are placed on the application. I was deciding between two options:



First option was to use a LAMP platform (linux, apache, mysql, php) with using
Zend Framework for PHP programming and JQuery
JavaScript

f
ramework for
AJAX. The disadvantage of this solution was the relative slowness of Zend
Framework. Another disadvantage was programming application in
JavaScript

which is not suitable for this application. Therefore was chosen the second solution.



The chos
en solution was a solution built also on the LAMP platform and Zend
Framework, but for the creating user interface will not be used JQuery framework,
but GWT. GWT provides
resources

for creating UI, so is not needed to use Zend
Framework and JQuery to crea
ting UI. Advantage of this solution is significant
acceleration response of the application. Use of the GWT also allow my faster
development of application, because I have experience in developing similar
applications



2.1

Google Web Toolkit (GWT)


GWT is a t
ool that enables you to develop client
-
side code, working with Java, and
compiling your code into
JavaScript
, which is then executed at the client's
browser. The
final product is the
application with almost desktop application levels of interactivity,
whic
h executes client
-
side with minimal needs of server
-
side code or interaction.

[12,
page

5]


GWT is a toolkit for the development of rich
internet

applications (RIA) built on AJAX
technology. The product is open source and is developed by Google
Inc.
First
version was
released in 2005 and the latest version (2.1), which also uses this application, was
released

on 17 October 2010. GWT is used by many applications from Google, as Google Wave, a
new version of Google AdWords, Google Moderator, and many others.


17

The goal of the GWT is to replace
JavaScript

client
-
side code by Java. So GWT allows
writing entire UI in Java and then compiling

the code to
JavaScript
. Replacement of the
JavaScript

by Java has lot of advantages because it allows development of web appl
ication
such as traditional Java application. This brings many advantages such as easier
debugging, the possibility of the use of JUnit tests, and of course support for the Java
language syntax. Development application with use of GWT is more like classic
desktop
application development as a development of the classic web site.


It is also important that the development
doesn’t

need to worry about compatibility
between web browsers. GWT
compiler always creates

several versions of files for each
web browser.

So it's possible to achieve high code optimization with minimum size of
JavaScript

source code.

[15]



2.1.1

GWT Components


GWT consists of three basic components:

1.

Java
-
to
-
JavaScript

compiller,

2.

Java Runtime Enviroment (JRE) Emulation library,

3.

UI libraries.


Java
-
to
-
JavaScript

compiler


The most important part of the GWT is compiler. Compiler compile Java source code into
JavaScript
. The resulting code can be run on the all supported web browsers. Currently is
supported all common browsers: Firefox (all versi
ons), Opera (version 9.x), all browsers
based on WebKit core like Chrome and Safari (all versions).


During the compilation process make the compiler some optimizations.
These
optimizations make

resulting
JavaScript

source code run faster. The most importa
nt
optimizations are:

18



Dead

code elimination



in this optimization compiler eliminates unused class
methods that the application
doesn’t

use. This makes resulting
JavaScript

source
code smaller, which speeds up the running application.



Constant folding



I
f is expression value known at compile time, is this expression
evaluated and directly used. For example expression
Window.alert(„Hello“
+ „World“)

is replaced by
JavaScript

code
$wnd.alert(„Hello
World“)
-

this expression is
evaluated

fa
st
er than previous.



Copy propagation



this optimization is
similar

to constant folding but this
optimization doesn't replace text expressions but numerical values. For example
source code:


int a=15;


int b = a*b+5;


Value of the first expression will be removed and replace
d
directly

with value


int b = 230.



String Interning



if is same string expression used in source more time, compiler
create new variable in which is value of this string expression saved and then is
used this variable. This prevents the unnecessary creat
ion of duplicate strings.



Code Inlining



code inlining means, that the
function

calls are directly replaced
by function code.

[12]


JRE Emulation Library


GWT also provides a partial implementation
of the

classical Java JRE Library. JRE
Emulation library
makes possible to use some classes from the Java JRE library used in
classic Java applications.


JRD Emulation library includes four packages known from classical JRE:

1.

java.io



is the most limited part of emulation library, which contains only the
interfa
ce
Serializable
. The reason for this restriction is that
JavaScript

can't
access local files,

2.

java.util



this package contains classes and exceptions required to work with
collections,

19

3.

java.lang



is the most important package, which contains basic data t
ypes, classes,
exceptions, and interfaces,

4.

java.sql



contains only the basic classes needed to work with date and time.

Classes from these packages are designed to be translated into
JavaScript
, so do not
contain some class methods and sometimes the signa
ture of methods is different to Java
JRE.

[15]


In addition, GWT also provides its own library in form of the five modules:



User


basic functions of the GWT



HTTP


library for low
-
level
communication

trough

http protocol



JSON


creating and parsing JSON f
ile format



JUnit


support for the Junit framework



XML


crating and parsing of XML documents

These modules are part of the functionalities that are capable of working independently.
The resulting application can therefore use only the modules that genuine
ly needs.
This
conception reduces

length of compiling time and size of the resulting code.


Since version 1.5 GWT provides several modules that include basic appearance settings for
individual widge
ts and panels (Chrome, Standrad

and Dark
). It is possible
to choose one of
them.


Libraries needed to creation the UI


GWT provides a large number of widgets and panels which is used to create the UI.
Creation of this UI is similar to the creation of UI with Swing, but instead of Layout
Manager uses GWT HTML and

CSS.


Widgets are objects used by web browser and with help of these widgets user interact with
application. The appearance of these widgets can be modified by using classic CSS and
HTML methods. In addition to the basic widgets as Button, InputBox provid
es GWT
additional widgets like DataPicker used to select a date or SuggestBox for real
-
time help in
search bar
. Panels are containers for widgets and other panels.

[12,
pages

12
-
17]

20

2.1.2

Other tools


Besides the mentioned three basic tools GWT also include othe
r tools:



UiBinder framework


this framework is used for creating UI in XML format,



GWT
plug
-
in

for Eclipse


Integrates GWT into Eclipse IDE,



Speed Tracer


Browser extension used for application profiling,



GWT Designer


WYSIWYG editor



2.1.3

Advantages of GW
T


Compatibility between web browsers


Each browser has its own characteristics that make the proposed design for Firefox
doesn’t

look same in the
Internet

Explorer or Opera. These problems are solved by generating
optimized code for each browser.


Disadva
ntages

of
JavaScript


GWT also compensates disadvantage of the
JavaScript

for web development. Although
JavaScript

is a powerful programming language, is not very suitable for development of
larger applications that require the cooperation of several peopl
e.
JavaScript

also doesn't
provide tools that are necessary for developing larger applications. These
tools

are for
example debugger, various instruments to create unit tests and other. First option is to use
JavaScript

libraries such as Google's Closure l
ibrary or Yahoo YUI library, which
eliminates some of these deficiencies. The second option is to use GWT, which solve these
issues in a more radical way that completely replaces a
JavaScript

code with higher
programming language


Java. Java contains lot
of tools

that
JavaScript

doesn’t have
.

[12,

page

5]





21

2.2

MySQL


MySQL is originally a product of Swedish company MySQL AB, which was later
purchased by Sun Microsystems. After the repurchase Sun Microsystems in 2009 became
the owner of MySQL, Oracle. MySQL
is available under two licenses
-

free license
General Public License (GPL) and under paid commercial license, which includes
enhanced support from Oracle.


This system was first optimized mainly for speed, and therefore did not support many
functions, whi
ch include
other database systems
. This was for example support for
transactions, foreign keys, triggers, stored procedures and many other features.
These
features bring

a new InnoDB storage system, which gradually replaces the older MyISAM.
MySQL Server i
s intended for mission
-
critical, heavy
-
load production systems as well as
for embedding into mass
-
deployed software.


Communication with the database is made by standard SQL language, extended with some
features that are not compatible with other database
systems.


In cooperation with the Apache server, PHP programming language and program
phpmyadmin represents the simplest and most widely used method for database
management. Our
school also uses

this platform so it was also chosen for this application.

[1
4]



2.3

PHP


PHP is dynamically typed scripting programming language, which interprets code on the
server and then sends the result to the web browser. Interpretation means that the code isn't
compiled

to the binary code, but evaluated directly on the fly. PH
P is primarily intended
for programming dynamic web sites and frequently combined with HTML or XHTML and
CSS. Language syntax is inspired by languages like C and Java.


PHP supports a lot of libraries for working with text and XML files or graphics. Big
ad
vantage of PHP is also extensive support for database systems like MySQL, MSSQL,
22

PostgreSQL
and Oracle
. It also
supports

various protocols (http, smtp, ftp, ldap, etc.).
Other advantage is support for all OS platforms. PHP is currently the most widely
used

language

for web development and is used by many know projects such as Word Press,
phpMyAdmin, Wikipedia and others.


This language, in cooperation with the Zend Framework, is used on the server side.



2.4

Zend Framework


For years w
ere internet websites dev
eloped only in pure

PHP, but development like this
brings lot of disadvantages. For example PHP code was directly written into HTML code,
which for major projects should result in considerable confusion of source code. This
solution also had other disadvan
tages as complicated maintainability or bad re
-
usability
which

caused harder implementation of new features to the application.


That’s the

reason
why
started to gain on popularity PHP frameworks, which should
eliminate these disadvantages of PHP. One of t
hese frameworks is Zend Framework (ZF),
which was created in 2005 by company Zend Technologies. Zend Technologies is also
involved in developing PHP itself and is responsible for the development of the PHP code
parser.


Zend Framework is an open source fra
mework for developing web applications and
services with PHP 5. Zend Framework is implemented using 100% object
-
oriented code.
The component structure of Zend Framework is somewhat unique; each component is
designed with few dependencies on other component
s. This loosely coupled architecture
allows developers to use components individually. We often call this a "use
-
at
-
will"
design.


The most common components of ZF are:



Zend_Acl


user authorization



Zend_Auth


user authentication



Zend_Cache


cache



Zend_C
onfig


provides interface for application configuration

23



Zend_Controller


main component of Zend Framework which implements Model
-
View
-
Controller pattern



Zend_Db


database component



Zend_Form


html form creation helper



Zend_Pdf


create of PDF files



Zen
d_Registry


stores values within the session



and other...

[13]


Besides advantages bring frameworks some disadvantages. The biggest disadvantage of ZF
is large memory consumption and relative slowness. Therefore isn't ZF suitable for smaller
projects, wh
ere speed is required. Another disadvantage can be the need to learn the basics
of working with this framework.


Application doesn't use all components that ZF provides, but only the components that the
application directly uses
. I chose this solution beca
use it allows faster and efficient
development. The mentioned
disadvantages associated with the slowness of framework are

minimized by using a small number of components and with use
of
Zend_Cache
component. This component should minimize the number of dat
abase queries and
minimize time needed to result processing. Last but not least reason for my choice was
good documentation and a large Czech and Slovak community.



2.5

XML Remote procedure call (XML
-
RPC)


C
ommunication between client and server
are provided
by using of remote

procedure calls
-

XML
-
RPC. XML
-
RPC is a protocol through which you can make remote calls. It's a set
of standardized rules that say how
r
equest

and response from the server look. Data are
transmitted mostly through the http protocol and
encapsulated using XML markup
language. This concept allows
communicating

applications written in different
programming language
s
, which also uses this application, where client written in Java
communicates with the server written in PHP. The XML
-
RPC isn't

currently developed
and is replaced by SOAP protocol. But XML
-
RPC is simpler to implement than SOAP and
24

is more suitable for the application needs and therefore were XML
-
RPC calls chosen to be
used
in

this application.


Picture No.

1
: XML
-
RPC

Source:
XML
-
RPC Home Page.[Online]. 1998
-
2011 [cit. 2010
-
12
-
26].
source
:

http://static.userland.com/images/XML
-
RPC/xmlrpc.jpg



2.5.1

Request specification


The standard defines

exactly how each requests look like. Each requests and response has a
header and body.


Header


POST /RPC2 HTTP/1.0

User
-
Agent: Frontier/5.1.2 (WinNT)

Host: betty.userland.com

Content
-
Type: text/xml

Content
-
length: 181

Source code No.

1
: XML
-
RPC
request header


Source
: [17]


First line indicates type of the request, which is according to the standard always POST
type. The second entry on the first line represents URI. The third entry indicates the
protocol version.
Other

rows

are:

25

1.

User
-
Agent


client browser identification

2.

Host


server web address

3.

Content
-
Type


indicates the type of the sending
data
,
according

to the standard is
always
text/xml

4.

Content
-
length


length of the request


Body


<?xml version="1.0"?>

<methodC
all>


<methodName>examples.getStateName</methodName>


<params>


<param>


<value><i4>41</i4></value>


</param>


</params>


</methodCall>

Source code No.

2
: XML
-
RPC request body

Source: [17]


The body must be enclosed in the tag
<medhodCall>
. Inside this tag is
<methodname>

mark, which identifies the method name or procedure call name.
Followed by a list of parameters enclo
sed in the tag
<params>
. Each parameter is
enclosed in a mark
<param>
, which contains the parameter value enclosed in tags
<value>

with optional data type definition.










26

2.5.2

Response specification


Head


HTTP/1.1 200 OK

Connection: close

Content
-
Length:
426

Content
-
Type: text/xml

Date: Fri, 17 Jul 1998 19:55:02 GMT

Server: UserLand Frontier/5.1.2
-
WinNT


Source code No.

3
: XML
-
RPC response header

Source: [17]


When no error occurs, value
HTTP/1.1 200 OK

is send. This value means that the
server has received requests and sends a response. The second row has a value
close
,
which tells the cl
ient that if he wants to create a new connection, it must open a new
connection. The third row indicates the length of the answer and the fourth line indicates
type of response.
Date

indicates time when answer was send.


Body


<?xml version="1.0"?>


<metho
dResponse>



<params>




<param>





<value><string>
String reponse
</string></value>




</param>



</params>


</methodResponse>


Source code No.

4
: XML
-
RPC

reponse body

Source: [17]


Response body is very similar to the body of the
request

with the only difference that the
whole answer is enclosed into mark

<methodResponse>
.


27

2.5.3

Supported types


Tag

Type

Example

<i4>
alebo <int>

32
-
bit integer

<int>
-
12</int>

<boolean>

Boolean (0 or 1)

<boolean>1</boolean>

<string>

String expression

<string>Textový reťazec</string>

<double>

Floating
-
point number

<double>
-
12.214</double>

<dateTime.iso8601>

Date by norm ISO 8601

<date
Time.iso8601>20070529T16:
00:00</dateTime.iso8601>

<base64>

Encoded binary data

<base64>eW91IGNhbid0IHJlYW
QgdGhpcyE=</base64>

Table

No.
1
: Basic data types

Source
:
[17]


Besides these basic data types they are also two structure
d data types:



Array



contains a block bounded by
<data>

mark that contains any number of
values bounded by mark
<value>
.

<array>


<data>


<value><i4>12</i4></value>


<value><string>Egypt</string></value>


<value><boolean>0</boolean></valu
e>


<value><i4>
-
31</i4></value>


</data>


</array>



Struct



contains any number of values, where each element has his own name and
value.

<struct>


<member>


<name>lowerBound</name>


<value><i4>18</i4></value>


</member>


<me
mber>

28


<name>upperBound</name>


<value><i4>139</i4></value>


</member>


</struct>

Source code No.

5
: Example of array and

struct data types

Source
: [17]


These two types can be freely combined with each oth
er.



2.6

Apache


It is
multi
-
platform http server software. Apache is released under the Apache free license
compatible with the GPLv3
license;

therefore the source code is freely available to
everyone. This server is part of the architecture called LAMP, whi
ch consists of the Linux
operating system, Apache Web server, MySQL database system and programming
language PHP. This platform is currently one of the most popular platforms world wide.


This platform, enhanced by GWT on the client
-
side, uses

also this ap
plication.




2.7

Java


Java is object
-
oriented programming language developed by Sun Microsystems. It's high
-
level programming language with these characteristics:



Simple


language syntax is very similar
to C

or C++.



Architecture Neutral


Java application c
an be executed on almost all CPU and
operating system architectures.



Object
-
Oriented


almost all data types in java are object
-
oriented



Portable


the sizes of the primitive data types are always specified, as is the
behavior of arithmetic on them.



Networ
k
-
Savvy


has an extensive library of routines for coping easily with TCP/IP
protocols like HTTP and FTP.

29



High Performance


although the Java is interpreted language, the performance is
very good, because compiler compile source code JIT "just in time" an
d into the
machine code is compiled only the code that is really needed.



Multithreaded


it support multithreaded applications.



Robust


is intended for writing programs that must be reliable in a variety of ways.
Java puts a lot of emphasis on early check
ing for possible problems, later dynamic
(runtime) checking, and eliminating situations that are error prone.



Dynamic


library can be dynamically expanded on the fly with new classes.



Secure


is intended for use in networked/distributed environments. Tow
ard that
end, a lot of emphasis has been placed on security. Java enables the construction of
virus
-
free, tamper
-
free systems. The authentication techniques are based on public
-
key encryption.

[10,

page

25]


Java is one of the most widely used programming
languages
. Allows you to create
programs for different operating systems, from smart cards to large distributed systems. In
this application is the Java used by GWT.



2.8

Eclipse IDE


The application was developed in a development environment (IDE) Eclipse 3.
6. Eclipse is
a universal IDE written in Java, which was created from free released source codes by
IBM. Currently is developed by open source community and Eclipse Foundation.


Ellipse can be very easy extended through the plug
-
ins. The basic version con
tains only the
basic IDE development tools for developing in Java, but can be extended to support other
languages like PHP, C, C++, C# and many more. The advantage of this architecture is a
dynamic plug
-
in loading, which minimizes system requirements and t
ime needed to start
the entire application.


I have chosen Eclipse for its extensibility, since it allows easy integration of GWT and
PHP programming environment.


30

3

Implementation


The application consists of two main parts. One part is the client
-
side part
, which is built
by using GWT and the second part is the server
-
side, which is programmed in PHP with
using of Zend Framework. The client part provides user interface (UI), through which the
user communicates with the application. This client
-
side communic
ates with server
-
side
via XML
-
RPC calls. The server is implemented in the form of services.
These services
provide

the necessary resources (
e.g.

data from the database) for the client side.



3.1

GWT project packages structure


Communication in GWT is made pri
marily through asynchronous calls (GWT RPC) and
Java servlets. Therefore, the GWT standard consists of three packages:



client



this package contains Java source code of the application client
-
side
part. These source codes are compiled into
JavaScript
.



ser
ver



in this package are placed Java servlets. Servlets can run on the java
application server and therefore can use all available classes of classical Java
SDK. These classes are "compiled" into bytecode which is then compiled into
binary code.



share



t
his package contains common classes for the previous two parts.
There are mostly simple classes designed to transmit data between the client
and server.


However, since the application does not use server
-
side Java application server and Java
servlets, but

it used instead the Apache HTTP Server, application server packages and does
not share.





31

3.2

Packages and folder structure of the application



Picture No.

2
:
Structure of the project


Source: own


Folder structure consists of t
hree
folders
:



src



contains source codes in Java, divided into several packages (see chapter
3.2.1).



war



there are static resources used by the page itself (pictures, fonts, Zend
Framework classes, and others). It also contains the compiled source codes

in
JavaScript
. The entire directory is part that is after compilation placed on the
server.



test



Contains JUnit tests, but this directory isn't used in application.



3.2.1

src folder description


As I already mentioned above, this directory contains the sour
ce code written in Java.
Because this application contains and uses an external module, which implements the
XML
-
RPC call, this directory contains two packages:

32



com.redhat.gwt.xmlrpc



provides classes to send XML
-
RPC requests and
receive replies from the
server. Source code of this project can be found at
http://code.google.com/p/xmlrpc
-
gwt/
.



cz.edukomplex.kosilka



contains the application itself. It is further divided
into several more "subpackages”.



Package
cz.edukomplex.kosilka

contains a configuration file in XML file format
called
KosilkaV3.gwt.xml
. This file describes the basic application module. By this
file are defined modules used by application. There are also defined entry
-
point to the
appl
ication. Entry
-
point represents class (implement the
EntryPoint
interface), which
is called when the application is started. Also is there defined basic look of the
application
(
appearance Standard is used). There is the whole file (for better clarity
, co
mments

are
removed):


<?
xml

version
=
"1.0"

encoding
=
"UTF
-
8"
?>

<
module

rename
-
to
=
'kosilkav3'
>


<
inherits

name
=
'com.google.gwt.user.User'
/>


<
inherits

name
=
'com.google.gwt.http.HTTP'
/>


<
inherits

name
=
"com.google.gwt.xml.XML"

/>


<
inherits

name
=
'com.fredh
at.gwt.xmlrpc.XMLRPC'
/>


<
inherits

name
=
"com.google.gwt.resources.Resources"

/>


<
inherits

name
=
"com.google.gwt.user.theme.standard.Standard"

/>





<
entry
-
point

class
=
'cz.edukomplex.kosilka.client.KosilkaV3'
/>




<
source

path
=
'client'
/>


</
module
>



Source code No.

6
: Initialization file configuration in file KosilkaV3.gwt.xml

Source
:
own







33


Picture No.

3
:
Package content of

cz.edkukomplex.kosilka.client

Source
: own



Next package is
cz
.edukomplex.kosilka.client
, it contains two files:



KosilkaV3.java



this file contains a class that represents an entry point into
the application, which means that this class is first started at application startup.
This class implements an interface
Entr
yPoint
, which contains a single method
named
onModuleLoad()
. In this method is placed code, which is executed when
application starts.



KosilkaV3.ui.xml



it's a UiBinder file which defines application look


In this package are placed another packages:



cont
ent

-

this package contains the packages
block
,
schedule

and
result
.
These packages are logical units, in which are placed java classes used to results
and schedules management.



helper



there are helper classes. For example it includes class
MyXmlRpcClien
t
, whose task is to create XML
-
RPC calls.



model

-

in this package are classes similar to JavaBean classes and are used with
collections.



style

-

in this package are look resources classes. By these classes are
application look managed.

There are also css

and image files placed.



34

3.2.2

war folder description





Picture No.

4
:
Folder

war


S
ource:

own


War directory is a directory that is placed after compilation on server. In addition to
the
JavaScript

code this folder also contains
other files (html, php and fonts files) sorted in the
following directory structure:



war/Db



contains classes used to work with the database.
DbTable

contains
directories (how
-
to work with these classes are described in Zend Framework
documentation at add
ress zendframework.com/manual/en/zend.db.table.html),
Mapper
,
Model
.



war/fonts



directory where are placed fonts for PDF documents generation.



war/kosilkav3



This directory contains mostly
JavaScript

source code. In
addition to
JavaScript

there are also
images, which are defined in
MyResources

interface. In the directory with name
gwt

are theme files for selected theme
in
configuration

file
KosilkaV3.gwt.xml
.



war/service



there are placed service classes, which are called by application
client
-
side via X
ML
-
RPC calls
.



war/tmp



there are
temporary

files. For example cache files and generated
Microsoft

word, html and pdf documents.

35



war/WEB
-
INF



there're private files. Directory contains two folders. The folder
My
, in which are application php classes files
. In another folder with name
Zend

are placed all needed Zend Framework components.



war/XMLRPC



compiled
JavaScript

source code for XML
-
RPC module.


There are also files in this directory. The first one is a file called
bootstrap.php
. This
file contains b
asic settings for application server
-
side. For example this file contains
settings for files include path and database access settings.


Another file in this directory is file
KosilkaV3.html
. This is classic HTML page,
which is loaded at the application st
art. In addition to standard HTML formatting tags file
contains also the document element
<script>,

which insert compiled
JavaScript

into
page. The body of the document is in
<iframe>

tag that initializes history support (but
currently isn't this function
implemented). Content of this file is here:

<!
DOCTYPE

html>

<
html
>


<
head
>


<
meta

http
-
equiv
=
"content
-
type"

content
=
"text/html; charset=UTF
-
8"
>



<
title
>
Košilka
</
title
>


<
script

type
=
"text/
JavaScript
"

language
=
"
JavaScript
"

src
=
"kosilkav3/kosil
kav3.nocache.js"
></
script
>


</
head
>


<
body
>



<!
--

OPTIONAL: include this if you want history support
--
>


<
iframe

src
=
"
JavaScript
:''"

id
=
"__gwt_historyFrame"

tabIndex
=
'
-
1'

style
=
"position:absolute;width:0;height:0;border:0"
></
iframe
>



<!
--

RECOMMENDED if your web app will not function without
JavaScript

enabled
--
>


<
noscript
>


<
div

style
=
"width: 22em; position: absolute; left: 50%; margin
-
left:
-
11em; color: red; background
-
color: white; border: 1px solid red;
padding: 4px; font
-
fam
ily: sans
-
serif"
>


Your web browser must have
JavaScript

enabled


in order for this application to display correctly.


</
div
>


</
noscript
>



</
body
>

</
html
>

Source code No.

7
: Initialization page KosilkaV3.html

Source: own


The last file in the directory war is file
xmlrpcserver.php
. This file is initialization
file for XML
-
RPC server. All http request in form of XML
-
RPC calls are send to this

file.



36

3.3

XML
-
RPC


As I mentioned above, the communication between client and server is done through
XML
-
RPC calls. Their role is to provide necessary resources to the client
-
side. Data are
transmitted in XML format and how requests and responses looks is s
howed in chapter 2.5.


Since the application is written in two languages, server
-
side is written in Java and client
-
side in PHP. Server
-
side is implemented with help of external library (module) XMLRPC
-
GWT and to implement client
-
side is used Zend Framewor
k.


Picture No.

5
: XML
-
RPC
scheme

Source: own



3.3.1

Client
-
side implementation


The implementation on the client
-
side is done with use of external XMLRPC
-
GWT
module. This module is a set of classes that implement the XML
-
RPC protoc
ol standard
described in chapter 2.5. The role of this module is to send request through a http protocol
to the server in XML format.
Server sends

response in form of XML document. XML
-
RPC
GWT
module receives

this response and converts it to the suitable J
ava classes. The whole
process of creating the request and receipt of a response explains the following example, in
which is send request to fetch all subjects by study field id.





37

Step 1: Request creation


String id =
selectionModel
.getSelectedObject().
idStudyField
;

XmlRpcClient client = MyXmlRpcClient.
createClient
();

String methodName =
"subject.fetchSubjectsByIdOboru"
;

Object[] params =
new

Object[]{id};


Source code No.

8
: XML
-
RPC request parameters

Source: own


On the first line is initializing of study field id from selected object.


On the next line is the creation of an instance of class
XmlRpcClient
. This instance is
created using the

"factory" class
MyXmlRpcClient
. This factory class allows easy
adjustment of parameters that are common to the entire application. For example the
setting
xmlrpcserver.php

address.


On the third line is the name of the service to be call. This name is com
posed of two parts
separated by dot. The first part is the service name under which the class registered in the
PHP script
xmlrpcserver.php

(method of registration services is explained in the
next chapter). The second part contains the class method name i
tself.


On the last line is the initialization of parameters that are part of the request. These
parameters must be only the type XML
-
RPC standard allows.
These

parameters must be
always initialized in array object.


Step 2: Request sending


XmlRpcRequest<
ArrayList<HashMap<String, String>>> subjectsRequest =
new

XmlRpcRequest<ArrayList<HashMap<String,String>>>(


client, methodName, params,


new
AsyncCallback<ArrayList<HashMap<String, String>>>() {




@Override



public

void

onFailure(Throwable caught) {




ošetrenie chyby na strane serveru





}




@Override



public

void

onSuccess(









ArrayList<HashMap<String, String>> result) {






parseCellTableXMLResponse(result);






}






});

38




subjectsRequest.execute();


Source code No.

9
: XML
-
RPC request sending

Source: own


Request sending is done by
XmlRpcRequest

class, which uses generic types in order to
determine the type that the server will return. In this case, the server returns an array of
values that contains obj
ects of key
-
value type. What is equivalent to
<ArrayList
<HashMap <string, string>>>
. Object parameters are for
XmlRpcRequest

are
instance of
XmlRpcClient

class, created in the previous step. Other parameters are
service name
and asynchronous

interface
Asy
ncCallback
, which contains two methods
onFailure

and
onSucess
. This interface is used for processing results, which server
returned.
OnFailure

method is called when an error occurs (for example, if the server is
unavailable).
OnSucess

method is called when

no failure occur. Results are processed
through
parseCellTableXMLRespose

method. In order to dispatch requests is
necessary to call the method
execute()
, which is located on the last line.


Step 3: Result processing




for

(HashMap<String, String> hashMap

: result) {


SubjectModel row =
new

SubjectModel(




hashMap.get(
"sid"
),




hashMap.get(
"name"
),




hashMap.get(
"short"
)


);


subjectsCellTableArrayList
.add(row );

}


Source code No.

10
: XML
-
RPC response processing

Sourc
e: own





The results are processed by simple iteration, in which is the returned result saved into
SubjectModel

class. This model is then inserted into
arraylist
. This
arraylist

is used by application.




39

3.3.2

Serve
-
side implementation


Implementation on the
server
-
side is provided by Zend Framework component
Zend_XmlRpc
. Setup and initialization of this component
is located

in the file
xmlrpcserver.php
. The purpose of this file is to receive and parse all XML
-
RPC
requests. This is part of the
xmlrpcserver.php

file:


Zend_XmlRpc_Value::setGenerator(


new
Zend_XmlRpc_Generator_XmlWriter()

);

Zend_XmlRpc_Server_Fault::attachFaultException(
'Zend_Exception'
);


$server
=
new
Zend_XmlRpc_Server();

$server
-
>setClass(
new
CommissionService(),
'commission'
);

$server
-
>setC
lass(
new
HarmonogramService(),
'harmonogram'
);

$server
-
>setClass(
new
ResultService(),
'result'
);

$server
-
>setClass(
new
SubjectService(),
'subject'
);

$server
-
>setClass(
new
OborService(),
'obor'
);

$server
-
>setClass(
new
SubjectStOboryService(),
'subject_st_obory'
)
;

$server
-
>setClass(
new
ProfessorService(),
'professor'
);

$server
-
>setClass(
new
StudentService(),
'student'
);


echo
$server
-
>handle();


Source code No.

11
: XML
-
RPC server initialization in bootstrap.php

Source: own


On the f
irst line is set the output format which is XML. The second line ensures that in
case of error the server will provide the complete exceptions, otherwise the server send
only a message “unknown error” with code 404. The follow Zend_XmlRpc_Server class
init
ialization, after which are services set with method SetClass. SetClass method has two
parameters. First parameter is the class name, which provides services. The second
parameter is the name under which will be service called. At the end is the command ec
ho
$ server
-
> handle (), which ensure the execution of the called service.








40

Service example


The following example shows the method of service definition. This service removes the
member from the commission:

/**


* Odstrani clena z komisie


*


*
@pa
ram

integer $hid Id harmonogramu


*
@param

integer $pid Id profesora


*


*
@return

boolean


*/

public function
removeProfessor(
$hid
,
$pid
){






telo funkcie



return
(
$rows
>
0
) ?
true
:
false
;

}


Source code No.

12
: Service implementation example

Source: own


The definition of the method, which provides service consists of commentary and feature
itself. The commentary contained annotations that determine the type of parameter. This

parameter isn’t

PHP data type, but the type defined by XML
-
RPC standard. Sample
method defines a method that accepts two parameters of type "integer", which
contain
schedule

and professor identifier. The method returns the data type "
Boolean
".



3.4

Declarati
ve Layout with UiBinder


UiBinder is a tool that's used to create UI. UiBinder is part of GWT from version 2.0. Until
then, UI was only created by using API functions calling (similar to Swing Gui Toolkit).


UiBinder provides more natural way to build UI i
n which you can use the XML files. This
way is very similar to creating web pages in classic HTML. It allows
creating

application
s

like classic web pages, but you can also use UiBinder widgets provided by the GWT. This
solution has many benefits. Applicati
ons created this way improves maintainability of
applications and increases productivity, because once created template can be used again
simply by copying. Another advantage is that the page written by UiBinder framework
41

separates application logic from t
he appearance, which makes source code more readable
and scalable.



3.4.1

UI creation


Appearance is always defined in files called
[name of class].ui.xml

where
[class name]

is the name of the class for which is the appearance created. So if is
defined look for

class named
QuestionPanel,

stored in a file called
QuestionPanel.java
, so look for that class will be defined in a file called
QuestionPanel.ui.xml
. This file consists of two parts:

1. Header

<!
DOCTYPE

ui:UiBinder

SYSTEM

"http://dl.google.com/gwt/DTD/xhtm
l.ent"
>

<
ui:UiBinder

xmlns:ui
=
"urn:ui:com.google.gwt.uibinder"


xmlns:g
=
"urn:import:com.google.gwt.user.client.ui"


xmlns:c
=
"urn:import:com.google.gwt.user.cellview.client"
>


<
ui:with

field
=
"res"

type
=
"cz.edukomplex.kosilka.client.style.MyResources.Applica
tionResources
"
/>

<
ui:with

field
=
"cc"
type
=
"cz.edukomplex.kosilka.client.i18n.KosilkaV3Constants"
/>

<
ui:style
>


.head
{



definícia vzhľadu pomocou CSS


}

</
ui:style
>


Source code No.

13
: ui.xml file header

Source: own



On the first line in is the
DOCTYPE

definition, which is same for each UiBinder file. On
the other three lines in the tag

<ui:UiBinder>

is namspace definitions (
xmlns: ui,
xmlns: g, xmlns: c
). These namespaces contain all classes that are in defined
package. This is particularly widgets or classes, which are part of GWT.


On the next line in the tag
<ui:style>

is defined app
earance with using a classical CSS
file. The application has two ways to CSS definition. First way is using
a
MyResources.CssResource

interface
.

Second way is to write CSS entry directly into
ui.xml files, which is used in this example.


42

MyResources.CssRes
ource

contains definitions for the appearance of page
elements, which are shared between parts of the application.
Particularly
, the definition of
the appearance of buttons, panels and other colors. This interface is always necessary to
initialize in each
UiBinder file. This definition can be found on the fifth line and has the
following form

<
ui:with

field
=
"res"
type
=
"cz.edukomplex.kosilka.client.style.MyResources.ApplicationResources"
/>
.

This is the definition of the interface through which you can then d
efine the appearance of
the element
(
styleName
=
"{res.applicationStyle.scrollPanel}"
).


The second method to appearance definition is the definition in local
ui.xml

file. This
method is used if the given CSS definition isn't used in other parts of the appli
cation. As I
already mentioned, this definition can be
found in

the tag
<ui:style>

which contains
classic CSS definition. This definition is used by writing

styleName
=
"{style.head}".


Entry

<
ui:with

field
=
"cc"
type
=
"cz.edukomplex.kosilka.client.i18n.Kosilk
aV3Constants"
/>


on the eight line is internalization constants initialization. This interface contains strings in
chosen language. Use ot these constants is the same as above
.


2. Body


<
g:DockLayoutPanel

unit
=
"PX"
>


<
g:north

size
=
"70"
>



<
g:HTMLPanel
>




<
div

class
=
"{style.head}"
/>







<
g:HTMLPanel

ui:field
=
"addSubjectPanel"






styleName
=
"{res.applicationStyle.cellTableHead}"
>






<
g:ListBox

ui:field
=
"subjectsListBox"

/>





<
g:Button

ui:field
=
"addSubjectButton"







text
=
"{cc.addStubjectBtn}"

/>








</
g:HTMLPanel
>



</
g:HTMLPanel
>


</
g:north
>


<
g:center
>



<
g:ScrollPanel











styleName
=
"{res.applicationStyle.scrollPanel}"



ui:field
=
"scrollPanel"
>




<
g:Grid

width
=
"100%"
>





<
g:row
>






<
g:customCell
>







<
c:CellTable

width
=
"100%"









ui:field
=
"subjectCellTable"

/>






</
g:customCell
>





</
g:row
>




</
g:Grid
>

43



</
g:ScrollPanel
>


</
g:center
>

</
g:DockLayoutPanel
>


Source code No.

14
: ui.xml f
ile body

Source: own


This section contains a set of very definition of the distribution of HTML elements and
widgets on the page. Each widget has different attributes determining its properties.
Almost every el
ement can contain an attribute named
ui:field
, which is the identifier
by which the element is then available in class. More of the using UiBinder can be found
here
http://co
de.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html
.



3.4.2

Appearance initialization


Every look created in
ui.xml

file must be first initialized in the class. For this
initialization is needed is need to create interface, which is a child of the UiBind
er
interface. The definition of such an interface looks like this:


interface

BlockContentUiBinder
extends

UiBinder<U, O> {}


UiBinder interface has two generic types:



U


is the type of root element declared in the
ui.xml

file,



O


is the owner type whose

@UiFields

are to be filled in.


Consequently, this interface must be initialized using the static method
GWT.create()

which creates an instance of the
UiBinder

interface and the instance is then possible to
"insert" into the page. This causes that layout
defined
ui.xml

file is transferred to the
classes, which are initialized through
initWidget()
. This initialization looks like this:

BlockContentUiBinder
uiBinder

= GWT.
create
(BlockContentUiBinder.
class
);

initWidget(
uiBinder
.createAndBindUi(
this
));





44


3.4.3

ui.
xml elements initialization


In order to work with declared elements in
ui.xml

is needed to initialize these elements
in class:

<
g:Button

ui:field
=
"addSubjectButton"

text
=
"{cc.addStubjectBtn}"

/>

@UiField

Button
addSubjectButton
;


On the first line is the
entry, which is located in
ui.xml

file. On the second line is its