2. Configuring Spinneret Environment - Amazon Web Services

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

12 Νοε 2013 (πριν από 3 χρόνια και 11 μήνες)

98 εμφανίσεις











Spinneret Framework

Quick Start Guide



Version: 1.0

Date:
10


Feb
-

2009








By:

CSS Labs





Spinneret Framework



Installation and Configuration

VER 1.0

2

/
23


Revision History

Version

Date

Revision Notes

Author(s)

<1.0>

<
11
-
Fe
b
-
2009
>

Initial Version


Ganesh Raj
Mohan












Spinneret Framework



Installation and Configuration

VER 1.0

3

/
23



Table of Contents

1.

INTRODUCTION

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

4

2.

CONFIGURING SPINNERE
T ENVIRONMENT

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

5

2.1

P
RE
-
REQUISITES

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

5

2.2

D
OWNLOADING AND CONFI
GURING
GWT

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

5

2.3

D
OWNLOADING AND CONFI
GURING
C
YPAL
S
TUDIO
P
LUGIN

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

5

2.4

D
OWNLOADING AND CONFI
GURING
S
PINNERET
F
RAMEWORK

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

7

3.

MY FIRST PROGRAM WIT
H SPINNERET FRAMEWOR
K
................................
................................
..............
14

3.1

A
DDING
GWT
-
EXT

CONFIGURATION TO THE

PROJECT

................................
................................
.........................
14

3.2

A
DDING
S
PINNERET
F
RAMEWORK CONFIGURATI
ONS TO THE PROJECT

................................
................................
.....
14

3.3

C
ONFIGUR
ING THE SCREENS IN
S
PINNERET
F
RAMEWORK

................................
................................
......................
16

3.4

C
ODING THE
S
PINNERET
F
RAMEWORK
E
NTRY
P
OINT

................................
................................
............................
20

3.5

R
UNNING IN HOSTED MOD
E

................................
................................
................................
................................
21


















Spinneret Framework



Installation and Configuration

VER 1.0

4

/
23



1.

I
NTRODUCTION

Spinneret


is a dynamic presentation framework, developed on Java v1.6 with GWT v1.5.0 and Struts 1.1. Spinneret
is a 100% extendable, customizable and configurable framework.


Spinneret fits into the

presentation tier of the enterprise layer and takes care rendering the UI based on the
configuration files.

Spinneret is integrated with Struts 1.1, which takes care of the listener for the GUI objects of the
spinneret framework from the view. Every spinn
eret action is submitted to the ActionServlet of struts and is routed via
struts.


Spinneret has in
-
built, programmable templates, which is based on the GWT layouts available. These templates are
extendable and user is free to write their own template.


Th
is document aims at introducing Spinneret, configuring and developing a quick working program on
SpinneretFr
a
mework.
























Spinneret Framework



Installation and Configuration

VER 1.0

5

/
23


2.

C
ONFIGURING
S
PINNERET
E
NVIRONMENT

2.1

Pre
-
requisites

1.

It is assumed that
you have Eclipse IDE version 3.2 and above

If you

don’t have Eclipse, please visit the link
http://www.eclipse.org/downloads/

and download the latest
version.

2.2

Downloading and configuring GWT

GWT


Google Web Toolkit is an open source toolkit available fro
m
Google

for quickly building and maintaining
complex and high
performing

java script front
-
end applications in the Java Programming Language. You would be
able to know more about GWT by clicking the link
h
ttp://code.google.com/webtoolkit/
.


Spinneret uses GWT version 1.5.0 which can be downloaded from the link
http://google
-
web
-
toolkit.googlecode.com/files/gwt
-
windows
-
1.5
.0.zip.


Note: Spinneret framework is currently NOT tested for compatibility with other versions of GWT and hence we advise
you to use GWT version 1.5.0


Once you have download GWT, extract it to any specific location in your local drive. For example e:
\
g
oogle. Once you
have extracted the zip file to the location you should be able to see a folder with the gwt version like
gwt
-
windows
-
1.5.0
.


We would not be verifying the correctness of the configuration of GWT now.
Let’s

proceed to the next step and on
c
ompletion of the next step, we would be verifying the correctness of this step.


2.3

Downloading and configuring Cypal Studio
Plug
-
in

Cypal Studio GWT plug
-
in, is an open
-
source plug
-
in available in code
google
. Please visit the link to download the
same
http://cypal
-
studio.googlecode.com/files/cypal.studio.for.gwt
-
1.0.zip
.


Cypal Studio GWT Plug
-
in helps you to:

1.

Creating a GWT module

2.

Running GWT applications in hosted mode

3.

C
ompiling the GWT app to Java Script

4.

Deploy compiled applications to external server


Steps to add Cypal Studio Plug
-
in to Eclipse:


1.

Extract the downloaded zip file to the local directory.

2.

You should be able to see 3 jar files



Spinneret Framework



Installation and Configuration

VER 1.0

6

/
23


a.

in.cypal.studio.gwt.core_1.0.0
.200808282244
.jar

b.

in.cypal.studio.gwt.samples_1.0.0.200808282244
.jar

c.

in.cypal.studio.gwt.ui_1.0.0.200808282244
.jar

3.

Copy the JAR files to the Eclipse Plug
-
in directory.

4.

Restart your Eclipse

5.

In Eclipse, select File


New


Other.

6.

You should be able to see t
he Cypal Studio option as shown in the screen shot below.


If you are still not able to see the option, please try repeating the steps again and restart eclipse.




Steps to configure GWT Home to Cypal Studio Plug
-
in


1.

In your Eclipse window, click on Wind
ow


Preferences

2.

Select Cypal Studio from the left menu.

3.

Now, set the “GWT Home” variable by browsing the path were we extracted GWT. Ex:
E:
\
google
\
gwt
-
windows
-
1.5.0
.



Spinneret Framework



Installation and Configuration

VER 1.0

7

/
23




4.

Click “Apply” and then “OK”.


Now that we have successfully configured
GWT and Cypal
Studio, we are all set to land in Spinneret.


2.4

Downloading and configuring Spinneret Framework

Having completed the above steps successfully, you would be able to download and configure Spinneret Framework
by following the steps below.


1.

Download the latest
version of SpinneretFramework from the server
.

Note: Currently you would be able to get the latest build from SmartS3 application. Please refer to the build
release mail that you get.

Latest build as on 11
-
Feb
-
2009 can be downloaded from
http://s3.amazonaws.com/spinneret
-
build09feb09/spinneret.jar
.

2.

Download the dependency jar(s) from the dependency jars folder in the SmartS3 applications. The list of
dependency jar(s) used are lis
ted below:

a.

c3p0
.jar

b.

commons
-
beanutils
.jar

c.

commons
-
codec
.jar

d.

commons
-
collections
.jar



Spinneret Framework



Installation and Configuration

VER 1.0

8

/
23


e.

commons
-
digester
.jar

f.

commons
-
fileupload
.jar

g.

commons
-
httpclient
.jar

h.

commons
-
logging
.jar

i.

commons
-
validator
.jar

j.

jakarta
-
oro
.jar

k.

jbosscache
-
core
.jar

l.

jboss
-
common
-
core
.jar

m.

jboss
-
logging
-
spi
.jar

n.

jcip
-
annotations
.jar

o.

jdbm
.jar

p.

je
.jar

q.

jgroups
.jar

r.

jta
.jar

s.

junit
.jar

t.

log4j
-
1.2.15
.jar

u.

struts
.jar

v.

struts
-
legacy
.jar

3.

Download the GWT EXT set of jars from the dependency jars folder. GWT EXT is used to have
enhanced

the GUI features.

a.

gwtext
.ja
r

b.

gwtextux
.jar

4.

Open you Eclipse Workspace

5.

Select File


New


Other

6.

In the Select Wizard go to Web and select Dynamic Web Project




Spinneret Framework



Installation and Configuration

VER 1.0

9

/
23


7.

Click Next and enter the details below

a.

Project Name: DemoProject

b.

Target Runtime: Leave it as such

c.

Dynamic Web Module: 2.4 (T
his would be the default)

d.

Configuration: Cypal Studio for GWT



8.

Click Next

and it shows the Web Module Configuration.



Spinneret Framework



Installation and Configuration

VER 1.0

10

/
23




9.

Click Finish.

10.

Now the Eclipse screen looks like the one below. We have just created a Dynamic Web Project in Eclipse.
Now as we select
ed “Cypal Studio for GWT” in the configuration, we need to add the GWT module to the
dynamic web project.



Spinneret Framework



Installation and Configuration

VER 1.0

11

/
23




11.

Click File


New


Other

12.

Select Cypal Studio


GWT Module and click Next



13.

In the screen shown below, enter the values given



Spinneret Framework



Installation and Configuration

VER 1.0

12

/
23


a.

Package: com.spinnere
t.demo

b.

Name: HelloWorld



14.

Click Finish. The screen below is what you would now see in your Eclipse window.



Spinneret Framework



Installation and Configuration

VER 1.0

13

/
23




15.

Now copy all the downloaded dependency JARs and the spinneret.jar into the ‘lib’ folder of the WEB
-
INF
folder.

16.

Now you are all set to write your
first Spinneret program.



Spinneret Framework



Installation and Configuration

VER 1.0

14

/
23


3.

M
Y FIRST PROGRAM WITH

S
PINNERET
F
RAMEWORK

Now it would be
an

entire new experience of web programming. You would now be doing web programming which
includes Ajax, but without even writing a single JSP, Servlet, HTML or Java Script
. Yes, true, working with Spinneret
needs a paradigm shift from our conventional web programming model.


Spinneret is all about XML configuration and Java code, that’s it. I am not going to spend more time, instead would
like to take you through your first

program.

3.1

Adding GWT
-
EXT configuration to the project

To include the gwt
-
ext files to the project configuration. Having said this, let’s look at a brief view of what gwt
-
ext is all
about.


GWT
-
EXT is a powerful widget library that provides rich widgets lik
e

1.

Grid with sort, paging and filtering

2.

Tree’s with drag and drop support

3.

Customizable combo boxes

4.

Tab panels

5.

Menus & Toolbars

6.

Dialogs

7.

Forms and lot more.

It provides us with a powerful and easy to use API.


If your memory is good, you would now be thinki
ng back that

alas I remember including the gwt
-
ext jars while
configuring spinneret environment

.

That’s right we have already added the API jar files to our project, now we need
to do a few changes to the configuration files to enable these powerful feat
ures getting included to our project.


1.

Now inside the DemoProject that we created, open the HTML file under com.spinneret.demo


public


HelloWorld.html.

2.

The following entries to add the
JavaScript

and css file related to gwt
-
ext should be added within th
e <body>
tag.

<
script

type
=
"text/javascript"

language
=
"javascript"

src
=
"js/adapter/ext/ext
-
base.js"
></
script
>

<
script

type
=
"text/javascript"

language
=
"javascript"

src
=
"js/ext
-
all.js"
></
script
>


<
link

id
=
"theme"

rel
=
"stylesheet"

type
=
"text/css"

href
=
"ext
-
al
l.css"
/>

3.

Save the file.

3.2

Adding SpinneretFramework configurations to the project

The next step would be to add Spinneret related configuration changes to the project.




Spinneret Framework



Installation and Configuration

VER 1.0

15

/
23


1.

Now inside the same HTML file add one more entry to add the spinneret.css.

2.

The following

code should be added within the <body> tag.

<link rel="stylesheet" href="spinneret.css" type="text/css">

3.

Save the file.

4.

Open the file HelloWorld.gwt.xml which is under com.spinneret.demo

5.

Change the inherit of the core web toolkit stuff.

Existing:


<!
--

In
herit the core Web Toolkit stuff.
--
>

<inherits

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

New:

<!
--

Inherit the core Web Toolkit stuff.
--
>

<inherits

name
=
"com.css.labs.spinneret.Spinneret"
/>

6.

Leave the app entry point entry as it.

It would be pointing to the current module EntryPoint class that we
created.

7.

The inherit entries to use themes can be removed since they are already included as a part of the spinneret
jar.

8.

Add the following lines of code to include the Spinneret Framewo
rk servlets.

<servlet

class
=
"com.css.labs.spinneret.server.SpinneretShadesGeneratorImpl"

path
=
"/headerView"
/>

<servlet
class
=
"com.css.labs.spinneret.server.SpinneretProxyImpl"

path
=
"/proxyCall"
/>



The above code adds entry for two servlets 1. SpinneretSha
desGeneratorImpl


this is used to read the
configuration XML files at runtime and 2. SpinneretProxyImpl


this is used to act as a proxy to submit
requests from GUI to Action Classes via the framework.

9.

Now having done all these things the file HelloWorld.
gwt.xml should look like.

Old
:

<module>




<!
--

Inherit the core Web Toolkit stuff.
--
>



<inherits

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




<!
--

Specify the app entry point class.
--
>



<entry
-
point

class
=
'com.spinneret.demo
.client.HelloWorld'
/>





<inherits

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



<!
--

<inherits name="com.google.gwt.user.theme.chrome.Chrome"/>
-
>



<!
--

<inherits name="com.google.gwt.user.theme.dark.Dark"/>
--
>




</module>

New:

<module>





<!
--

Inherit the core Web Toolkit stuff.
--
>



<inherits

name
=
"com.css.labs.spinneret.Spinneret"
/>




Spinneret Framework



Installation and Configuration

VER 1.0

16

/
23




<!
--

Specify the app entry point class.
--
>



<entry
-
point

class
=
'com.css.labs.demo.client.HelloWorld'
/>



<servlet

class
=
"com.css.labs.spinneret.server.SpinneretShadesGeneratorImpl
"

path
=
"/headerView"
/>

<servlet

class
=
"com.css.labs.spinneret.server.SpinneretProxyImpl"

path
=
"/proxyCall"
/>




</module>

3.3

Configuring the screens in SpinneretFramework

Now as we made the ne
eded changes related to Spinneret Framework to the eclipse project, now let’s do our coding
to create our first HelloWorld application in Spinneret and run and see it in hosted mode.


This involves two steps, the first one is to get the configuration XML’s

ready, and then code the Entry Point class.

Now, create a package by name “resource” directly under the src and start creating your XML files under it.




Now
click “Finish” to
save this package and
let’s get our XMLs ready.


Coding XML configuration fi
les for Spinneret Framework

Now having said that I am going to code my XMLs, I have question now. What would be the screen that I want to
see?



Spinneret Framework



Installation and Configuration

VER 1.0

17

/
23


Ah! That is a good question, which we haven’t thought about till now. Okay, let’s assume that I want a User
Regis
tration screen


Screen Layout


First Name:



Middle Initial:



Last Name:



Present Address:



Permanent Address:






Date of Birth:



Gender:



Male

Female

Marital Status:


Single


Married

Spouse Name:






Now let’s start

configuring the screen in XML. As the document describes, now we need to create a spinneret form
xml. Name the XML as register
-
form.xml.


1.

register
-
form.xml

This is the configuration XML file for the registration screen.


In the root node, the ID attribute

has a value as “register” and not the name of the XML. So, this means that the ID of
this file is only “register” and always the form XML name needs to be suffixed with “
-
form.xml”.


<?xml version=

1.0


encoding=

UTF
-
8

?>

<
spinneret
-
form

id
=

register


xml
ns:xsi
=

http://www.w3.org/2001/XMLSchema
-
instance


xsi:noNamespaceSchemaLocation
=

E:
\
ganesh
\
projects
\
spinneret
\
final_XSDs
\
09Feb09
\
spinneret
-
form.xsd

>


<!

Display name tells that his is a User Registeration form



<
displayname
>
User
Registration
</
displayna
me
>


<
body

multitab
=

false

>



<
groups

seq
-
no
=

1

>




<
displayname
>
Personal Details
</
displayname
>

<!

Starting a group with Single Column Layout for First name, Middle initial and
Last Name





<
group

seq
-
no
=

1

>





<
noofcols
>
1
</
noofcols
>





<
fields
>






<
textbox

seq
-
no
=

1

>







<
name
>
firstName
</
name
>







<
displayname
>
First Name
</
displayname
>



Spinneret Framework



Installation and Configuration

VER 1.0

18

/
23








<
width
>
250
</
width
>







<
tooltiptext
>
Enter your first name here
</
tooltiptext
>







<
max
-
length
>
50
</
max
-
length
>







<
mandatory
>
true
</
mandatory
>






</
textbox
>






<
textbox

seq
-
no
=

2

>







<
name
>
middleInitial
</
name
>







<
displayname
>
Middle Initial
</
displayname
>







<
width
>
50
</
width
>







<
tooltiptext
>
Enter your middle initial here
</
tooltiptext
>







<
max
-
length
>
5
</
max
-
length
>











</
textbox
>






<
textbox

seq
-
no
=

3

>







<
name
>
lastName
</
name
>







<
displayname
>
Last Name
</
displayname
>







<
width
>
250
</
width
>

<
tooltiptext
>
Enter your last name / family name
here
</
tooltiptext
>







<
max
-
length
>
50
</
max
-
length
>







<
mandatory
>
true
</
mandator
y
>






</
textbox
>





</
fields
>




</
group
>




<!

Starting a group with two column layout for Address





<
group

seq
-
no
=

2

>





<
noofcols
>
2
</
noofcols
>





<
fields
>






<
textarea

seq
-
no
=

1

>







<
name
>
presentAddr
</
name
>







<
displayname
>
Present Addr
ess
</
displayname
>







<
width
>
300
</
width
>







<
height
>
150
</
height
>







<
tooltiptext
>
Enter your present address here
</
tooltiptext
>







<
mandatory
>
true
</
mandatory
>






</
textarea
>






<
textarea

seq
-
no
=

2

>







<
name
>
permanantAddr
</
name
>







<
dis
playname
>
Permanant Address
</
displayname
>







<
width
>
300
</
width
>







<
height
>
150
</
height
>







<
tooltiptext
>
Enter your

ermanent

address
here
</
tooltiptext
>







<
mandatory
>
true
</
mandatory
>






</
textarea
>





</
fields
>




</
group
>




<!

Starting a gr
oup with single column layout for the rest





<
group

seq
-
no
=

3

>





<
noofcols
>
1
</
noofcols
>





<
fields
>






<
textbox

seq
-
no
=

4

>







<
name
>
spouseName
</
name
>







<
displayname
>
Spouse Name
</
displayname
>







<
width
>
250
</
width
>







<
max
-
length
>
100
</
max
-
length
>



Spinneret Framework



Installation and Configuration

VER 1.0

19

/
23








<
read
-
only
>
true
</
read
-
only
>












</
textbox
>






<
datefield

seq
-
no
=

1

>







<
name
>
dob
</
name
>







<
displayname
>
Date Of Birth
</
displayname
>







<
format
>
M/d/yy
</
format
>







<
mandatory
>
true
</
mandatory
>











</
datefield
>











<
radiobutton

seq
-
no
=

2

>







<
name
>
gender
</
name
>







<
displayname
>
Gender
</
displayname
>







<
valuelist
>








<
value

id
=

M

>
Male
</
value
>








<
value

id
=

F

>
Female
</
value
>







</
valuelist
>












</
radiobutton
>






<
radiobutton

seq
-
no
=

3

>







<
name
>
maritalStatus
</
name
>







<
displayname
>
Marital Status
</
displayname
>







<
valuelist
>








<
value

id
=

S

>
Single
</
value
>








<
value

id
=

M

>
Married
</
value
>







</
valuelist
>






</
radiobutton
>










</
fields
>








</
group
>



</
g
roups
>





</
actions
>


</
body
>

</
spinneret
-
form
>


2.

spinneret
-
menu.xml

This is the menu XML that basically forms the header part of the screen.

Note: The header is not shown in the layout above


<?xml version=

1.0


encoding=

UTF
-
8

?>

<
spinneret
-
menu

xmlns:xs
i
=

http://www.w3.org/2001/XMLSchema
-
instance


xsi:noNamespaceSchemaLocation
=

E:
\
ganesh
\
projects
\
spinneret
\
final_XSDs
\
09Feb09
\
spinneret
-
menu.xsd

>


<
menu
-
list
>



<
menu

id
=

registeration


parent
=

registeration

>




<
display
-
name
>
Registeration
</
display
-
name
>



</
menu
>


</
menu
-
list
>

</
spinneret
-
menu
>


3.

spinneret
-
tree.xml

This is the tree XML file. The tree appears in the left side of the page.


<?xml version=

1.0


encoding=

UTF
-
8

?>

<
spinneret
-
tree

xmlns:xsi
=

http://www.w3.org/2001/XMLSchema
-
instance


xsi:noName
spaceSchemaLocation
=

E:
\
ganesh
\
projects
\
spinneret
\
final_XSDs
\
09Feb09
\
spinneret
-
tree.xsd

>



Spinneret Framework



Installation and Configuration

VER 1.0

20

/
23



<
tree
-
list
>



<!

The menu id is mapped to the corresponding tree id




<
tree

id
=

register


menu
-
id
=

registeration

/>


</
tree
-
list
>


<
tree
-
node
-
list
>



<!

The panel
(form) id is mapped to corresponding tree node id




<
tree
-
node

id
=

userreg


parent
=

register

>




<
panel
-
id
>
register
</
panel
-
id
>




<
display
-
name
>
User Registeration
</
display
-
name
>






</
tree
-
node
>


</
tree
-
node
-
list
>

</
spinneret
-
tree
>


4.

spinneret
-
footer.xm
l

Currently the footer XML has only the footer message.

<?xml version=

1.0


encoding=

UTF
-
8

?>

<
spinneret
-
footer

xmlns:xsi
=

http://www.w3.org/2001/XMLSchema
-
instance


xsi:noNamespaceSchemaLocation
=

E:
\
ganesh
\
projects
\
spinneret
\
final_XSDs
\
09Feb09
\
spinneret
-
footer.xsd

>


<
footer
-
message
>
Copyright © 2008 CSS Corp India Pvt Ltd. All rights reserved.
</
footer
-
message
>

</
spinneret
-
footer
>

3.4

Coding the SpinneretFramework Entry Point

Coding my Spinn
eretFramework entry point class and SpinneretObjectFactory implementa
tion.


1.

Coding SpinneretObjectFactoryImpl class.

2.

Create a new class with name ObjectFactoryImpl which extends SpinneretObjectFactory





Spinneret Framework



Installation and Configuration

VER 1.0

21

/
23



3.

Click finish to create this class. Leave it as such, currently we don’t need to do anything with this class.

4.

Now let’s m
odify the HelloWorld.java to extend SpinneretEntryPoint class instead of GWT EntryPoint.


This is the entry point class for our project. Now by default when we created this class we had left it to implement the
EntryPoint class of GWT. Now we need to chang
e this extend SpinneretEntryPoint class.


Exiting:

package

com.spinneret.demo.client;


import

com.google.gwt.core.client.EntryPoint;


public

class

HelloWorld
implements

EntryPoint {



public

void

onModuleLoad() {



//
TODO

Auto
-
generated method stub


}


}


New:

package

com.spinneret.demo.client;


import

com.css.labs.spinneret.client.SpinneretEntryPoint;

import

com.css.labs.spinneret.client.SpinneretObjectFactory;



public

class

HelloWorld
extends

SpinneretEntryPoint {



@Override


protected

SpinneretObject
Factory buildInfo() {



//
TODO

Auto
-
generated method stub



return

new

ObjectFactoryImpl();


}

}


5.

Now save the class.

3.5

Running in hosted mode

Running in hosted mode


1.

Right click on the HelloWorld.gwt.xml file and select Run As
--

> GWT Hosted Mode Applicat
ion




Spinneret Framework



Installation and Configuration

VER 1.0

22

/
23




2.

You should be able to see your application in GWT hosted mode.





Spinneret Framework



Installation and Configuration

VER 1.0

23

/
23



You should be able to maximize the active window and click on “Refresh” see it in full screen mode.


Good to see you smile at your first Spinneret application. By this we declare th
at you have successfully
learnt 25% of spinneret! Now, I see you widening your eyes for the “25%”. But it’s quite true that what we
have learnt till now is only 25% of what the framework offers.


Read the SpinneretFramework Developer tutorial.