Displaying Linked Pages with Creator2 Using Page Fragments

A new web project was created called DemoNav as shown in the next picture, from File-->New Project.... This creates a folder for the project with several items. The reader should review a previous article in which most of the salient features of this IDE are described.

When a JSP page is added from the Web Pages node of the project from the drop-down menu, the following source code will be the source for that page. The same drop-down can be used to add Page Fragments as well.

Source code for an empty JSP

<?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" 
xmlns:ui="http://www.sun.com/web/ui">
<jsp:directive.page contentType="text/html;charset=UTF-8" 

pageEncoding="UTF-8"/>
<f:view>
<ui:page binding="#{DemoNav.page1}" id="page1">
<ui:html binding="#{DemoNav.html1}" id="html1">
<ui:head binding="#{DemoNav.head1}" id="head1">
<ui:link binding="#{DemoNav.link1}" id="link1" 
url="/resources/stylesheet.css"/>
</ui:head>
<ui:body binding="#{DemoNav.body1}" id="body1" 
style="-rave-layout: grid">
<ui:form binding="#{DemoNav.form1}" id="form1"/>
</ui:body>
</ui:html>
</ui:page>
</f:view>
</jsp:root>

Adding <div> elements to create the layout

In order to divide the page's real estate to mimic the desired layout, four <div/> elements will be added as shown.

This changes the source code as follows. The added areas are shown in different colors to draw the reader's attention. Make sure when you change the dimensions, you also correctly make changes to the top, left, height, width and position properties of the <style/> tags.

<?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" 
xmlns:ui="http://www.sun.com/web/ui">
<jsp:directive.page contentType="text/html;charset=UTF-8" 
pageEncoding="UTF-8"/>
<f:view>
<ui:page binding="#{DemoNav.page1}" id="page1">
<ui:html binding="#{DemoNav.html1}" id="html1">
<ui:head binding="#{DemoNav.head1}" id="head1">
<ui:link binding="#{DemoNav.link1}" id="link1" 
url="/resources/stylesheet.css"/>
</ui:head>
<ui:body binding="#{DemoNav.body1}" id="body1" 
style="-rave-layout: grid">
<ui:form binding="#{DemoNav.form1}" id="form1"/>
<!--adding three 4 div elements--> <!--header goes 

in here-->
<div style="left:50px;width:500px;height:80px;

top:10px;
background-color:silver;position:

absolute">
Header
</div>
<!--end of header  --> <!--navigation menu here-->
<div style="left:50px;width:100px;height:500px;

top:90px;
background-color:lightyellow;position:

absolute">
Navigation
</div>
<!--end of navigation--> <!--Main display area 

here -->
<div style="left:150px;width:400px;height:500px; 

top:90px;
background-color:lightblue;position:

absolute">
Main
</div>
<!--end of display --> <!--footer goes here-->
<div style="left:50px;width:500px; height:80px;

top:590px; 
background-color:silver;

position:absolute">
Footer
</div>
<!--end of footer--> <!--these are in the body -->
</ui:body>
</ui:html>
</ui:page>
</f:view>
</jsp:root>

The IDE is quite user-friendly and you can associate the various HTML tags in the Outline with the features on the Design view of the page as shown here. The third <div/> in the Outline is associated with the Main section in the Design view as shown here.