Tutorial 7 – GWT Page Design

VIInternet και Εφαρμογές Web

14 Οκτ 2011 (πριν από 5 χρόνια και 8 μήνες)

878 εμφανίσεις

6 April 2011 This tutorial is all to do with getting to know Google Web Toolkit (GWT). First you will install the Firefox plugin required to see your GWT pages in Development mode. In order to get hands-on experience of using GWT, you will follow detailed instructions in a GWT tutorial. The deliverable for this week, will be taking this new-found expertise in GWT, to start to build some of the functionality you will need for your Voting System project.

Tutorial 7



GWT Page Design

6 April

2011

This tutorial

is all to do with getting to k
now
Google Web Toolkit (GWT). First you will install the Firefox
plugin required to see your GWT pages in Development mode.
In order to get hands
-
on experience of

using GWT, you will follow detailed instructions in a GWT tutorial. T
he deliverable for this week, will be
taking this new
-
found expertise in GWT, to start to build some of the functionality you will need for
your Voting System project.

Plugin Installation

Open Firefox, c
lick o
n
http://star.sun.ac.za/
~
perasmus/gwt
-
dev
-
plugin.xpi

and install the plugin
.

Part 1: Follow the GWT Tutorial from Google

Surf over to
http://code.google.com/webtoolkit/doc/latest/tutorial/gettingstarted.html

Follow the
8
ste
ps, of whic
h we already did the
first 5 in cla
ss.

Part 2:
First Step
s

in

b
uilding the Voti
ng System client
-
s
ide

Take only the view that the students will have when answering the voting questions and implement
those pages as client
-
side only functionality in GWT. In order to do this you need to think through the
same steps as in
the

tutorial to understand
which
UI
components

you will need etc.

The minimum requirement here is to have a question with answers being displayed and the student
must be able to select one answer
.


Note that you do not need

to communicate with the
server side, but nothing is stopp
ing you
from
moving ahead
and sending the v
oting information to the server
and receiving questions from the
server side. [this will be part of next week

s tut]

Requirements

[due by 2pm on 13 April
]

You will need to deliver a WAR (Web
Application
Archive)
file containing your project. Insid
e of this

WAR you
must make sure to keep the source code as well. Here are some steps to

cr
eating a WAR file which can then be

deployed on a web server:
http://blog.elitecoderz.net/gwt
-
and
-
tomcat
-
create
-
war
-
using
-
eclipse
-
to
-
deploy
-
war
-
on
-
tomcat/2009/12/

Name your WAR file, Tut7_studentNum.WAR and send to
willem@gmail.com

an
d cc to
kevdur@gmail.com

and
visserw@sun.ac.za
.
Add “[RW334] Tut 7” to the subject.


Steps to create a WAR

from a GWT project in Eclipse
:

From
:
http://blog.elitecoderz.net/gwt
-
and
-
tomcat
-
create
-
war
-
using
-
eclipse
-
to
-
deploy
-
war
-
on
-
tomcat/2009/12/

Before following the steps below, it is important to first COMPILE your GWT code into actu
al
Javascript. This is done by r
ight
-
clicking on the

Project and selecting Google and
then GWT
Co
mp
i
l
e

o
r
cli
c
k

on the title red icon in the toolbar

which is the short
-
cut.

The first step is building a .jar from your src
-
folder and putting the .jar into the lib
-
folder of
the
.war
-
folder of your GWT
-
project. The second step is building a .war
-
file from your war
-
folder and
deploying the .war to your
[
tomcat

etc.]

server. T
o make the second step more com
fortable, I
wrote a little Ant
-
script, that will create the .war
.

1)

Right
-
cli
ck the src folder inside your projec
t

2)

T
he following PopUp
-
menu will appear.

Select “Export …” from this menu.

3)

Select “JAR file” from the next windo
w

4)

Make sure, only the “src”
-
folder of your project is checked in the next window.

Select the
export de
stination like this: <folder of your project>/war/WEB
-
INF/lib/<projectname>.jar


then click “Finish”


Extra step for us: create a src.zip file of the src folder so that we have the sources

and
dump it in the same location where you added the jar from above, i.e.
<folder of your
project>/war/WEB
-
INF/lib/
src.zip


Now your GWT
-
project is ready to be packed into a .war, that can be deployed to a tomcat server.

More detailed


Step 2:

1) Create a new ANT
-
script in your project (Right
-
click your project folder and select “New” and then select
“File” from the submenu. Call the new file “warbuilder.xml” or something like this.).

2) Copy the following content into the newly created file. Re
place <projectname> with the name of your
project:

<project

name
=
"<projectname>
" basedir="." default="default">




<target

name
=
"default"

depends
=
"buildwar,deploy"
></target>




<target

name
=
"buildwar"
>



<war

basedir
=
"war"

destfile
=
"

<projectname>
.war" webxml="war/WEB
-
INF/web.xml">




<exclude

name
=
"WEB
-
INF/**"

/>




<webinf

dir
=
"war/WEB
-
INF/"
>





<include

name
=
"**/*.jar"

/>





<include

name
=
"**/*.zip
"

/>




</webinf>



</war>


</target>




<target

name
=
"deploy"
>



<copy

file
=
"

<projectname>
.war" todir="." />


</target>



</pro
ject>


The first two steps must be done only once. You can reuse the warbuilder.xml and do not have to build it every
time. Now simply right
-
click the “warbuilder.xml” and select “Run As” and “Ant Build” from the PopUp
-
menu.

The .war
-
File will be created by

this ANT
-
script. You will find the .war
-
file in your ProjectFolder.