Displaying Linked Pages with Creator2 Using Page Fragments

In a manner similar to adding pages you can add Page Fragments. When you pick Page Fragment from the drop-down menu shown earlier, you will see the following window pop up. You give a name to the Page Fragment and it gets added to the Web Pages Node.

In this manner three Page Fragments were added to the project called hdr.jspf, ftr.jspf, and nav.jspf for each of the sections header, footer and the ToC (Navigation) as shown in the project view.

Adding Page Fragments to the page

Each of these page fragments will be placed in the corresponding sections. In order to place the page fragments you need to drag and drop the Page Fragment Box control. A container for the Page Fragment is available in the Palette as shown.

When you drop the Page Fragment Box on the page, the following window pops up where you need to specify with which of the Page Fragments in your project you want this section to be associated. It is also possible to create a new Page fragment from this window.

When you drop a Page Fragment Box on the Header section and associate hdr.jspf with it, the source code for the header section changes as shown here. The generated code in the source file is shown in the next paragraph. The hdr file is just like the include file in the Active Server Pages.

<!--header goes in here-->
<div style="left:50px;width:500px;height:80px;top:10px;
background-color:silver;position:absolute">

<div style="position: relative">  <jsp:directive.include 

file="hdr.jspf"/> 

</div> </div>
<!--end of header  --> 

Contents of hdr.jspf file

It has just the 500 X 80 graphic element which is imported into the Resources folder of the project as shown.You can drag and drop the image file and it will be correctly formatted in the source view.

Design View

Source code

<?xml version="1.0" encoding="UTF-8"?>
<div style="-rave-layout: grid; width: 500px; height: 80px" 
xmlns:f="http://java.sun.com/jsf/core" 
xmlns:h="http://java.sun.com/jsf/html">
<f:subview id="hdr"> <h:graphicImage binding="#{hdr.image1}" 

id="image1" 
style="left: 0px; top: 0px; height:80px;position: 

absolute"
value="/resources/Blue hills.jpg" width="500" /> 

</f:subview>
</div>

Contents of ftr.jspf file

Adding a Page Fragment Box and embedding the ftr.jspf there follows the same procedure as in the case of the Header section..

Design View

Source code

<?xml version="1.0"?>
<div style="-rave-layout: grid; width: 500px; height: 80px" 
xmlns:f="http://java.sun.com/jsf/core" >
<f:subview id="ftr"> <table bgcolor="black" style="left:50px;

color:yellow; 
height:80px;font-size:15;

font-weight:bold" 
width="500px">
<tr>
<td style="height: 14px">Copy Right of:</td>
</tr>
<tr>
<td>Hodentek 2004</td>
</tr>
<tr>
<td>
<font color="magenta">
<a href="http://www.anglefire.com/vt2/

hodentek">
Hodentek
</a>
</font>
</td>
</tr>
</table> </f:subview>
</div>

Contents of nav.jspf file

The ToC section has embedded in it the nav.jspf page fragment and the design view is as shown here. Although part of one of the links appears outside of the nav.jspf, the words will wrap in the final rendering. However, these details are important for correct design. The <ul/> has its own characteristics as to its default location and this has to be taken into consideration when placing elements.

Design View

Source code

<?xml version="1.0" encoding="UTF-8"?>
<div style="-rave-layout: grid; width: 100px; height: 500px" 
xmlns:f="http://java.sun.com/jsf/core">
<f:subview id="nav"> <ul>
<li>
<a href="http://www.aspfree.com" target="t">
ASPFREE</a>
</li>
<li>
<a href="http://hodentek.blogspot.com" target="t">
Hodentek Blog</a>
</li>
<li>
<a href="/a>
</li>
<li>
<a href="http://www.Devshed.com" target="t">
DevShed</a>
</li>
<li>
<a href=http://localhost:28080/Frametype/Test.html 

target="t">
Test HTML</a>
</li>
</ul> </f:subview>
</div>