Introduction
Sun Microsystem's Studio Creator is a development tool for creating multi-tiered Web applications in pure Java that has similarities to some of the Microsoft products, the latest of which is Visual Studio based on the .NET Framework.
This article is based on one of the early edition releases of this product. The forum that looks at this product is active, and the developers are trying to experience the level to which this product can be exploited.
One of the usability features that the users require is to have the same multi-windowed applications they can create with frames and framesets in the Web applications that makes page navigation so easy. Presently this is not supported in the Sun Creator IDE according to one of its team members as it appeared in the forum.
Page navigation in Sun Creator IDE is handled by custom links between pages or between components and pages defined by an XML file, rightly called the Navigation.xml. These links [navigation handlers] are only defined for JSP pages and JSF components. These links can only be defined for JSP pages or components and do not include HTML(HTM) pages, and even the 'Page Fragments' that are of JSF construct. In this same context, the navigation between frames[windows] is based on an hierarchical parent-child relationships in the HTML's DTD.
The Page Fragment objects described earlier have similarities to the 'user controls' in the Visual Studio world, reusable objects for the RAD. They are very attractive because in principle, they can be drag-dropped on a JSP. However, presently it does not seem to be included in the navigation schemes of this IDE.
One way to have this experience is described in this article using Page Fragments, but falls short of the 'full experience' which one obtains with frame and framesets.
Navigation Scheme Using Page Fragments
The following screen shot shows how to implement the scheme for 'frame-like' navigation in this IDE. In the main JSP, create a number of divisions that mimic the frames and create 'page fragments' that can be dragged and dropped into their slots or incorporated using Page Fragment Box container. The 'links'[HTML links] in the navigation page fragment will bind their sources to the named target, namely the <iframe/> in the page as shown:
Elements on This Page
top.jsp
The main page's HTML content is as shown here before placing any of the elements:
="1.0" ="UTF-8"
<jsp:root version="1.2"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:jsp="http://java.sun.com/JSP/Page">
<jsp:directive.page contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"/>
<f:view>
<html lang="en-US" xml:lang="en-US">
<head>
<meta content="no-cache" http-equiv="Cache-Control"/>
<meta content="no-cache" http-equiv="Pragma"/>
<title>Page1 Title</title>
<link href="resources/stylesheet.css" rel="stylesheet"
type="text/css"/>
</head>
<body style="-rave-layout: grid">
<div style='color:yellow;left:50px;top:10px;width:500px;background-
color:green;height:80px;position:absolute'><p>Header</p></div>
<div style='color:yellow;height:400px;left:50px;top:90px;
width:150px;background-color:blue;position:absolute'><p>Navigator</p></div>
<div style='color:yellow;height:400px;left:200px;top:90px;
width:350px;background-color:yellow;position:absolute'><iframe src=""
width="350" height="400" name="t1">Test...test..</iframe></div>
<h:form binding="#{top.form1}" id="form1"/>
<div style='color:yellow;height:80px;left:50px;top:490px;
width:500px;background-color:red;position:absolute'><p>Footer</p></div>
</body>
</html>
</f:view>
</jsp:root>
This JSP page is rendered on the IE as shown here:
Adding Page Fragments to the Project
Three Page Fragments will be added to the project, a hdr.jspf for the 'header', a nav.jspf for the 'navigator' area, and a ftr.jspf for the 'footer'. If you right click on the project and pickup add 'Page fragments', the following screen shows up from which you add a page Fragment and give a name to it.
Header Page Fragment: hrd.jspf
Here only a single graphic is placed. The IDE has the toolbox called 'Palette' from which an image can be inserted that brings up a dialog to insert from a file or a URL as shown in this screen-shot:
="1.0" ="UTF-8"
<div style="-rave-layout: grid" xmlns:h="http://java.sun.com/jsf/html">
<h:graphicImage binding="#{hdr.image1}" id="image1" style="left: 25px;
top: 25px; position: absolute" value="resources/ASPNET_01.gif"/>
</div>
Footer Page Fragment: ftr.jspf
The footer page fragment is a small text placed in a table without borders. Although the IDE at some point[at some build point] allowed dragging and dropping, the correct way would be to first place a 'Page Fragment Box' from the 'palette' which functions as a container for the page fragment. Placing a 'Page Fragment Box' brings up the following dialog which lists all the page fragments in the project:
The code for this page is as follows:
="1.0"
<div style="-rave-layout: grid">
<table bgcolor='black' width='500px' style='color:yellow;
font-size:15;font-weight:bold'>
<tr><td>Copy Right of:</td></tr>
<tr><td>Hodentek 2004</td></tr>
<tr><td><font color='magenta'> http://www.mysorian.com</font></td></tr>
</table>
</div>
Navigator Page Fragment: nav:psfg
This Page fragment has the various links that target the <Iframe/> placed on this page as shown in this code:
="1.0"
<div style="-rave-layout: grid">
<ul style='width:150px;background-color:#D2D2FF;color:magenta;height:400px'>
<li><a href="http://www.sun.com" target="t1">Sun Microsystems</a></li>
<li><a href="http://www.yahoo.com" target="t1">Yahoo</a></li>
<li><a href="http://www.microsoft.com" target="t1">Microsoft</a></li>
</ul>
</div>
Build & Run Project
When the project is built and run, the links will function very much like the frame and frameset mode as shown in the next three screen shots:
Microsoft Link
Yahoo Link
Sun Microsytem Link
Error Linking to a JSP
An extra list element was added to the navigator page fragment to link to a test JSP in this project by adding:
<li><a href="http://localhost:18080/navigation/Test.jsp" target="t1">
Test JSP</a></li>
This link however produced the error shown here in this next screen shot:
Navigation with 'faces' Context [added 8/21/2004]
Although using Navigation.xml scheme the above procedure failed, it is possible to navigate using the 'faces' context. This was verified using:
<li><a href="http://localhost:18080/navigation/faces/Test.jsp" target="t1">
Test JSP</a></li>
Conclusions
- 8/21/2004: Conclusions modified
It is possible to create a 'frame/frameset' mode of operation with a JSP using navigation achieved by the Navigation.xml construct, or using the 'faces' context.
The author is grateful to the Sun Studio Creator team member who suggested using the 'faces' context while linking to the JSP.
