Navigation Scheme in Sun Java Studio Creator IDE

mysorian

Rate me:

3.33/5 (3 votes)

16 Aug 2004CPOL4 min read

57.8K

Frame-like navigation is possible with limited extent using Page Fragments

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:

XML

<?xml version="1.0" encoding="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:

XML

<?xml version="1.0" encoding="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:

XML

<?xml version="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:

XML

<?xml version="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:

XML

<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:

XML

<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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

mysorian

Technical Writer Hodentek

United States

Worked in the area of electrical discharges, high energy lasers, high voltage technology, plasma technology, lithography, thin film plastics, superconducting thin films, diamond thin films, electron accelerators, and free electron lasers for several years. Mentored/guided MS and PhD students at several universities in USA, Brazil, Australia, and India.
Reading books and photography are my hobbies.

Also trained workforce clients with legacy computer skills in web related technologies.

I recently authored a beginner level book on MS SQL Server Integration Services. Details available at the following link:

http://www.packtpub.com/sql-server-integration-services-visual-studio-2005/book

My second book was released in 2008
Learn SQL Server Reporting Services 2008

Get book details at the following site:
http://www.packtpub.com/learning-sql-server-2008-reporting-services/book

This is for anyone who is interested in Reporting Services a la Microsoft. It has over 50 hands-on exercises and covers all aspects of Reporting Services.

Recent new books:

Microsoft SQL Azure Enterprise Application Development 2010
-A Comprehensive book on SQL Azure

Microsoft Visual Studio LightSwitch Business Application Development 2011
A step-by-step approach that is sure to work

Learning SQL Server Reporting Services 2012 Packt Publishers, ISBN: 978-1-84968-992-2 , 2013

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.