You are on page 1of 13

How to use WebGalileo Faces with JDeveloper 10.1.

In JDeveloper 10.1.3, access the JSP Tag Library repository by selecting: Tools->Manage
Libraries from the main menu in JDeveloper. Once invoked, click on the JSP Tag Libraries.
This is where we will add the WGF tag libraries.

Our next step is to locate the WGF tag libraries and add them to JDev's repository.
In the repository tree on the left, click on the "User" node, then click "New".
Next, use the file browser to locate the file:
<your wgf trial home>\JBuilderDesignTimeSupport\thirdparty\wgf-lib\wgf.jar

Click Open to continue. This will inspect the jar file and automatically add the embedded tag
libraries (TLDs) into JDeveloper's repository.

At this point, the tag libraries are now usable on JDeveloper's component palette. However to
make the tag libraries more usable in JDeveloper, we'll perform a few tweaks to the display
names and prefixes of the tag libraries. (This is because what is stored in the TLDs is not so user
friendly.. (Enhancement Request #1 for WebGalileo. :)
As you'll notice in the dialog, the Display Name: is the displayed name of the JSP tag library
in JDev's component palette and the Prefix: is the prefix used in the JSP pages. Since WGF has
multiple tag libraries as opposed to a single one, we'll add a "WGF " marker to the taglibs so we
can distinguish these taglibs from other taglibs in our repository. We'll also shorten the prefixes
so our JSP code won't be too cluttered.
Note: making these changes are purely optional serving only to make working with the taglibs
easier in the future.
So for every WGF taglib perform these steps:
- Click on the taglib on the left, add WGF to the display name
- Shorten the prefix
- Click on the "Execute Tags in JSP Visual Editor" (<- This is supposed to render the tags in the
visual editor, but doesn't yet seem to work on the WGF taglibs. I will research this.)
Here are the settings I used:
URI

(Palette) Display Name

Prefix

http://www.jscape.com/creator/calcdialog

WGF CalcDialog

wgf-calc

http://www.jscape.com/creator/calendar

WGF Calendar

wgf-cal

http://www.jscape.com/creator/colordialog

WGF ColorDialog

wgf-color

http://www.jscape.com/creator/constraints

WGF Constraints

wgf-const

http://www.jscape.com/creator/container

WGF Component

wgf-comp

http://www.jscape.com/creator/htmleditor

WGF HtmlEditor

wgf-htmledit

http://www.jscape.com/creator/layouts

WGF Layout

wgf-layout

http://www.jscape.com/creator/menu

WGF Menu

wgf-menu

http://www.jscape.com/creator/popupdialog

WGF PopupDialog

wgf-popup

http://www.jscape.com/creator/tabbedPanel

WGF TabbedPanel

wgf-tabpanel

http://www.jscape.com/creator/table

WGF Table

wgf-table

http://www.jscape.com/creator/toolbar

WGF Toolbar

wgf-toolbar

http://www.jscape.com/creator/tree

WGF Tree

wgf-tree

http://www.jscape.com/creator/treetable

WGF TreeTable

wgf-treetable

Once done, your taglibs will look like this:

Click OK to dismiss the dialog. You're now ready to build a JSF app with WGF
tags/components.

Using the same workspace that you loaded the previous WGF example war file (WebGalileo
for me) create a new empty project using: File->New->General->Empty Project.
You can name the project: mywgfproject.

Click OK.

In this next step you'll be creating a new JSF enabled JSP page. This has the effect of
automatically prepping this project to work with JSF by adding a faces-config.xml, adding the
necessary JSF runtime libraries to project and configuring the web.xml to work with JSF.
To create a blank JSF enabled JSP select: File->New->Web-Tier->JSF->JSF JSP.
As the wizard invokes you will first be asked what J2EE version, accept the default and click
Next.
Name your page: "hellowgf" (you can use either JSP Page or JSP Document) and click Finish.

You now have a JSF enabled JSP in your properly configured project. The page should be
opened automatically in visual editor. You'll notice a red dotted line. That's simply the boundary
of the JSF form tag.
Now we'll add a WGF Calendar tag to the page. Switch the Component Palette selector to the
"WGF Calendar" palette page.

Now drag and drop the calendar tag onto the page.

As the tag is dropped, a dialog will appear asking to provide the required attibute "id". I used
"mycal".
The calendar will then appear in it's default non-rendered form on the left. (I'll research this with
WebGalileo on why this doesn't render).
At this point the project will compile but we can't successfully run it yet because we still have
configure a few runtime options:

Copy the wgf repository and styles directories from the previous wgf example to this
web application.

Configure the web.xml with necessary runtime settings. Easily done by copying the
previous example web.xml.

Change the J2EE context root to "webgalileofaces" since the web.xml setting are
hardcorded to this path. (ER #2 for WGF. Don't hard code the path to your repository and
styles in your example app.)

Let's start by changing the J2EE Web Context Root for this project. In the file navigator,
double click the project: mywgfproject to see the project settings. Set this value to
"webgalileofaces".

(Don't worry about modifying the J2EE Web Application Name: )

Next we'll jump out to the file system and copy over the repository and styles directories
from the previous WGF example app to this application.
Tip: A simple and helpful way to jump out to the filesystem from JDev's file navigator is to
associate a file browser as an external tool of JDev and make it invokeable from the file
navigator. JDev even has an auto-configure feature in it's external tools wizard. See: Tools>External Tools...
As you jump out to the filesystem:

You'll be located in the public_html directory or Web accessible directory of your app. You'll
need to copy the two directories /repository and /styles from the previous WGF example app to
this location.
WGF example app

Copy to Your new app

...\webgalileo\public_html\repository

->

...\mywgfproject\public_html\repository

...\webgalileo\public_html\styles

->

...\mywgfproject\public_html\styles

Next, in order for the Webapp to be properly configured you'll need to replace your current
web.xml with a copy of the WGF example's web.xml. You'll also need to copy the
webgalileo.key
WGF example app

Copy
Your new app
to

...\webgalileo\public_html\WEBINF\web.xml

->

...\mywgfproject\public_html\WEBINF\web.xml

...\webgalileo\public_html\WEBINF\webgalileo.key

->

...\mywgfproject\public_html\WEBINF\webgalileo.key

Note: Make sure you are not running your web app or have the old web.xml open in an editor as
you will not be able to overwrite it when it is being used.
And now we come to our final step. You recall we added the calendar tag to the JSP page and
just specified the id. Actually in order for the calendar to run correctly with images, you'll need
to specify more attributes. So again to do this we can simply copy the attributes from the
example application.
I extracted them and placed them here. Here is what your calendar tag will look like with all the

attributes loaded.
Feel free to copy and paste from here to the source code of your JSP page.

<wgf-cal:calendar id="mycal"
mask="mm-yyyy-dd"
separator="-"
emptyValueEnabled="true"
monthBackButtonHeight="20"
monthBackButtonWidth="20"
monthBackButtonImg="../repository/images/
new/navigate_left1.gif"
monthBackButtonRollOverImg="../repository
/images/new/navigate_left2.gif"
monthBackButtonStyle="cursor:pointer"
monthBackButtonHintText="One Month
Before"
monthForwardButtonHeight="20"
monthForwardButtonWidth="20"
monthForwardButtonImg="../repository/imag
es/new/navigate_right1.gif"
monthForwardButtonRollOverImg="../reposit
ory/images/new/navigate_right2.gif"
monthForwardButtonStyle="cursor:pointer"
monthForwardButtonHintText="One Month
After"
yearBackButtonHeight="20"
yearBackButtonWidth="20"
yearBackButtonImg="../repository/images/ne
w/navigate_left1.gif"
yearBackButtonRollOverImg="../repository/i
mages/new/navigate_left2.gif"
yearBackButtonStyle="cursor:pointer"
yearBackButtonHintText="One Year Before"
yearForwardButtonHeight="20"
yearForwardButtonWidth="20"
yearForwardButtonImg="../repository/images
/new/navigate_right1.gif"
yearForwardButtonRollOverImg="../repositor
y/images/new/navigate_right2.gif"

yearForwardButtonStyle="cursor:pointer"
yearForwardButtonHintText="One Year
After"
openerButtonHeight="20"
openerButtonWidth="20"
openerButtonImg="../repository/images/new/
calendar.gif"
openerButtonStyle="cursor:pointer"
openerButtonHintText="Expand/Collapse
Calendar"
todayButtonHeight="20"
todayButtonWidth="50"
todayButtonImg="../repository/images/new/to
day.gif"
todayButtonStyle="cursor:pointer"
todayButtonHintText="Set Today Date"
applyButtonHeight="20"
applyButtonWidth="50"
applyButtonImg="../repository/images/new/a
pply.gif"
applyButtonStyle="cursor:pointer"
applyButtonHintText="Set Selected Date"
cancelButtonHeight="20"
cancelButtonWidth="50"
cancelButtonImg="../repository/images/new/c
ancel.gif"
cancelButtonStyle="cursor:pointer"
cancelButtonHintText="Cancel Selected
Date"
/>

Save and compile your web project and verify no errors.

You can now run your new JSF page with the WGF Calendar component.

And here's what the calendar looks like at runtime...

(ER #3: Possibly consider revising some of your default graphics.. Purple gradient looks a little
funky.. ;)
I hope you enjoyed this tutorial and have more fun with JSF and JDeveloper 10.1.3....
-Chris

You might also like