EJBs, YUI DataTable and JavaScript using Vroom Web ...

searchcoilSoftware and s/w Development

Aug 15, 2012 (5 years and 2 months ago)

291 views

EJBs, YUI DataTable and JavaScript using Vroom Web Framework


Okay! No more advertisements for Vroom Web Framework. This time, I'll show you
how easily

you can build Web Applications using EJBs, Yahoo UI and Vroom Plugin
1.1.0 for NetBeans IDE 6.1.


Step 1
-

Create a new Project and select Enterprise Application under Enterprise
Category:



Step 2
-

Enter the Project Name "DemoApp" and click Next!



Step 3
-

Uncheck Create Web Application Module CheckBox
and Click Finish! We'll
build Web Application separately.



Step 4
-

Create Entity Classes from Database using jdbc/sample database in
DemoApp
-
ejb project.



Step 5
-

Create a Persistence Unit named "DemoApp
-
ejbPU" for jdbc/sample data
source.



Step 6
-

Keep the Class Names as is, enter "com.myco.demo.entity" in Package field
and c
lick Finish!



Step 7
-

Cr
eate a SessionBean named "CustomerSession", enter
"com.myco.demo.session" in Package field, check Remote check box, uncheck Local
check box and click Finish!



Step 8
-

While being inside CustomerSessionBean.java file, select EJB Methods/Add
Business Method... from the context menu

to add a business method. Enter
"getCustomers" in the Name field and "java.util.List" in Return Type Field. Add
Parameter "name" of type "java.lang.String" and click Finish!



Step 9
-

The CustomerSessionBean.java should look like as follows:



Step 10
-

One small change we'll make to the Named Query "
Customer.findByName"
as follows:


@NamedQuery(name = "Customer.findByName", query = "SELECT c FROM
Customer c

WHERE LOWER(c.name) LIKE :name")


At this stage or EJB is ready as per our requirement. Now we'll create a web
application which will use this Cus
tomerSessionBean to get customers list and display
it in Yahoo UI DataTable.


Step 1
-

Create a Web Application named "DemoApp
-
war" and click Next!



Step 2
-

Make sure you don't include the application to the DemoApp Enterprise
Application. Select GlassFish from the server list an
d click Next!



Step 3
-

C
heck Vroom Web Framework from the Frameworks, leave the properties of
the framework unchanged and click Finish!



Step 4
-

Change the HTML code of index.jsp as follows:



Step 5
-

In vroom
-
config.xml file, remove the default web page definition and add
webpage definition for index.jsp as follows:



Step 6
-

Debug the web applicati
on and you'll see the following webpage in the
browser:



Step 7
-

Now, in vroom
-
config.xml, modify the definition for index.jsp as follows:



Step 8
-

Debug the application and click "Search" button, you'll see the message
"Search Button Clicked".



Step 9
-

Create a javascript file named "customer
-
search
-
btnSearch
-
onclick.js" un
der
"web/scripts" folder.



Step 10
-

Edit the javascript file and add following code:



Step 11
-

In vroom
-
config.xml, change the index.jsp definition as follows:



Step 12
-

Debug the application and click "Search" button. This time you'll see the
alert that was placed in customer
-
search
-
btnSearch
-
onclick.js file.




Vroom Web Framework is very pow
erful because it provides you flexibility to attach
javascript files to every single event. These javascripts are not ordinary scripts, these
have access to server methods implicitly and you're not required to include them in
the webpage head tag.


Now we
are going to create a Java file which we'll access in the javascript file we just
created:


Step 1
-

Create a Java class named "DatabaseBean". Enter "com.myco.demo.bean" in
the Package field and click Finish!



Step 2
-

While being in the DatabaseBean.java, select Enterprise Resour
ces/Call
Enterprise Bean... from the context menu, select CustomerSessionBean in the list and
click OK!



Step 3
-

Add a method in DatabaseBean named "getCustomers". The code of the
DatabaseBean.java should look like as follows:



Step 4
-

Replace the javascript code of customer
-
search
-
btnSearch
-
onclick.js
with the
following:


In th
e above code, we're building the url using VroomUtils.generateUrl() method. The
method takes four arguments, first two are mandatory. The arguments are "method",
"beanClass", "var" and "scope". In the above javascript we've passed "getCustomers"
as method
and "com.myco.demo.bean.DatabaseBean" as beanClass.


Step 5
-

Debug the application and click "Search" button. This time you'll see the list
of customers in JSON format in an alert.



The alert is just to check that we're getting correct results. Now we're going to add
Yahoo UI Dat
aTable.


Step 1
-

First of all we need to identify what YUI scripts and CSS files are required to
use the DataTable. To check that we'll use YUI Dependency Configuration using the
following URL:
http://developer.yahoo.com/yui/articles/hosting/#configure
:



Select Connection Manager, JSON and DataTable in the configuration. In my setup
I've deployed complete YUI library as a war file to my GlassFish server with /yui/
context. All the scripts and CSS are a
vailable under "build" folder which can be
accessed with base /yui/build/.


Step 2
-

The YUI Dependency Configuration Utility will give the list of required CSS
and JS files. Just copy the files, and paste in a text editor. Replace all href= and src=
with
url= also replace "> with "/> and replace with empty string. This will make the
script and link tags compatible with vroom
-
config.xml tags. Create a new webpage
definition to include all the webpages as follows:



Step 3
-

Copy the code of YUI Basic Data table from the following lo
cation:

http://developer.yahoo.com/yui/examples/datatable/dt_basic.html



Step 4
-

Place the DataSource script and DataTable script in the customer
-
search
-
btnSearch
-
onclick.js file. Replace the "basic"
parameter of DataTable with
"divResult".



Step 5
-

Save the files and Debug the application. Click Search button and you'll see
the following table.


There is no skin applied to YUI components by default. To apply that we need to set
the class attribute of the control or body tag to "yui
-
skin
-
sam".


Step 6

-

Instead of setting the class in every webpage, Vroom Web Framework helps
us to apply these settings by just defining simple rules in vroom
-
config.xml file. The
rules are applicable to single file or a group of files based on uri pattern. To set the
"yui
-
skin
-
sam" class to every webpage, modify the rule in vroom
-
config.xml as
follows:



Step 7
-

Debug the application and you'll see the skin applied to the DataTable as
follows:



Step 8
-

Now, we need to tweek the code to load the DataTable from the server data.
Modify the customer
-
search
-
btnSearch
-
onclick.
js file as follows:


Note
that we've used the url we generated using VroomUtils.generateUrl() method in
DataSource constructor. Another important thing to note is we've also defined
resultsList: "array". The reason for specifying this is because Vroom Web Framework
adds the returne
d object to an internal Map and converts the Map to JSON object. All
basic data types are accessed using "value" key and Lists and Arrays are accessed
using "array" key.


Step 9
-

Now refresh the webpage and click Search button and you'll see the YUI
DataT
able is loaded with our Customers list.



Step 10
-

Now we need to pass the customer name entered in the text box to the
function. To do so, modify customer
-
search
-
btnSearch
-
onclick.js file as follows:



Step 11
-

Modify the getCustomers() method in the DatabaseBean class as follows:


If you note, you'll find that when we create
d the getCustomers() method first time we
didn't define the HttpServletRequest parameter. But this time we added it as a
parameter. The reason for this is Vroom Framework can deal with three types of
method signatures:


public void|Object method();

public
void|Object method(HttpServletRequest);

public void|Object method(HttpServletRequest, HttpServletResponse);


You can return any type of java object, the framework will try its best to convert it to
JSON string.


Step 12
-

Now Debug the application and type

"com" in the text box and click Search
button. You'll find only those customer which contain "com" in their name.



Step 13
-

Try another by typing valley in the text box and click Search button and
you'll find only those customers which contain valley in their name.



That's all folks. I hope this tim
e I tried my best to explain the potential of the
framework. No matter what web framework you use, you can always empower your
web application with Vroom Web Framework. No other framework provides such a
powerful and flexible way to control your applicatio
n.


Please do provide your feed back about the framework.

Posted by Farrukh at
11:12 AM

10 comments


Labels:
NetBeans
,
Vroom


Saturday, August 16, 2008

Tutorial 1
-

Using Vroom Plugin for NetBeans 6.1


Finally the plugin is ready and has been published to both SourceForge.net and
NetBeans Plugin Portal. In this post I'm going to demonstrate the use of the plugin to
build a simple web a
pplication.


Prerequisite: I assume that you already have installed NetBeans plugin for Vroom
Framework. If not then download it from
Project Website
, decompress the zip fi
le and
install the .nbm file using Downloaded Tab under Tools/Plugins menu of NetBeans
6.1 IDE.


Step 1
-

Create a new web project named "VroomDemo"





Step 2
-

In the frameworks panel, Check Vroom Framework and click Finish.




Step 3
-

The project will be setup to use the framework. To ch
eck that, simply run the
application and you should see the following screen.




Step 4
-

Create a new JSP page named "register.jsp". The page should look like as
follows:




If you notice, firstName and lastName are input tags of type "text" and nationality is
select tag. For gender there

is no control but a simple span with id "divGender". Don't
worry this span will contain gender values as radio buttons.


Step 5
-

Create a java class named "RegisterBean" under "com.myco.bean" package
and add the following code:




The above java class contains firstName
, lastName, nationality and gender properties.
There is a method named "register", we'll bind this method with form in the
configuration file.


Step 6
-

Create a JSP named "confirmation.jsp". The page contents should look like as
follow:




Once the registration is succes
sful, the user will be redirected to this page.


Step 7
-

Create a java class named "LookupBean" under "com.myco.bean" package
and place the following code:




The purpose of LookupBean is to provide list of values e.g. nationalities and genders.


Step 8
-

Open vroom
-
conf
ig.xml file by right
-
clicking on the file and select Open.
Delete all existing webpage definitions and defining one for register.jsp as follows:




Use Ctrl+Space to initiate Code Completion. The plugin will automatically detect the
web pages available in the web module.


Step 9
-

Select "RegsiterBean" as bean
-
class, "rb" as var and "session" as scope.






Step 10
-

Define object element for webpage and select document for the name
attribute.




Step 11
-

Define event element for object and select "onload" for type and
"LookupBean" for bean
-
class attribute:






Step 12
-

Define call element for even
t and select "script" for type attribute:




You should select "script" for a call type if you want to execute a script. For updating
the contents/properties of the webpage elements, you should select "update".


Step 13: Place the cursor between opening and closing call t
ag ( <call type="script">
</call> ) and press Ctrl+F1 or Right+Click and select Edit to invoke JavaScript editor:




Step 14: Write the following code in the JavaScript editor:




VroomUtils class provide some utility functions that are very helpful to manipulate
HTML DOM objects. popula
teSelect() takes two arguments, select name and the json
string. The json string must be an array or list of a bean having "label" and "value"
properties. For custom properties, you may use populateSelectEx() which takes four
arguments. First two are the s
elect name and json string, the third and fourth are the
label and value property name. E.g.


VroomUtils.populateSelect('nationality', '#{nationalities}'); // assumes the json string
is an array of beans having label and value property names.

VroomUtils.po
pulateSelectEx('nationality', '#{nationalities}', 'name', 'id'); // where the
bean contains name and id as properties.


generateRadioGroup() takes four arguments, the first argument is the div or span id
which will contain the radio buttons, the second arg
ument is the name that is assigned
to the generated radio buttons. Third argument is the json string which I just explained
above and fourth is the no of columns. Since I've two values for gender and I want
them to appear on the same line, I've passed 2 as

argument value.


For details of the functions you may look into the Vroom
-
2.1.4.pdf document
available as download or the Vroom Framework article avaliable at wikipedia.org.


Step 15
-

Update the event element defined for document object and add var, scop
e
and method attributes as follows:




If the bean
-
class has any property available with getter method, the code completion
will show "getProperties" in the completion items. It is helpful if you want to access
multiple properties by name in a single call. If you select "
getNationalities" as method
then you won't be able to get "genders" in the same call and instead of using
#{nationalities.array} you'll simply type #{array}.


Step 16
-

Define form element for webpage and select "frmRegister" as form id. This
is defined in

the register.jsp:




Step 17
-

Complete the form element by defining bean
-
class, var, scope and method
attributes:




For method attribute, select "register" in the list. This will bind the form with
"register" method of the RegisterBean class.


Step 18
-

Define navigation elements for
form. For outcome "success" the url should
be "/confirmation.jsp" and for outcome "failure" it should be the same page i.e.
"/register.jsp" with forward attribute set to "true". The forward attribute is very
important to preserve the information user enter
ed previously.






Step 19
-

de
fine the elements which you want to post when the framework invokes
"register" method. The framework automatically populates the fields of the bean
-
class. If the fields do not belong to the same bean class which is used for form, you
may define fine graine
d definition by defining bean
-
class, var, scope at the element
level. E.g. <element id="firstName" bean
-
class="com.myco.bean.SomeOtherBean"
var="sob" scope="session"/>




Step 20
-

Compile and run the web application and type
"http://localhost:port/VroomDemo/register.jsp"

url. Replace the port with the port no.
of your tomcat server. You'll see the following webpage:



Note that the divGender span tag contains "radio" buttons to select gender. These are
dynamically generated as a result of generateRadioGroup() method of VroomUtils
javascr
ipt class.


Step 21
-

Type first name, select nationality and gender and click submit. The server
will display the same webpage populating the fields you entered.




Observe the url in the browser. This is because the response has been forwarded.


Step 22
-

Enter the last

name as well and submit the form, you'll get confirmation.jsp
webpage:




That's all about the web application development. Let's see below how we can play
with the look and feel of the web pages using call element:


Define stylesheet element for webpage as follows:




Observer that I'v
e added another call element of type "update" for document object,
for which I've selected "frmRegister" as id of the element for which I want to update
the contents/properties, "className" as attribute and "form" as value. This form is
defined as .form in

the stylesheet element of the webpage.


Run the application and see the difference:



I'll soon upload a more complex examples involving EJBs, Web Services and
Integration with Struts Framework.


Thanks for spending time to read the post. I believe this post has given yo
u the clear
idea about what is Vroom Framework and how you can utilize it.


Please don't forget to post your views about the framework.