December 2006 [Revision number: V1-1] |
|
|
In this tutorial, you use NetBeans Visual Web Pack 5.5 integrated development
environment (IDE) to create an application that includes two page fragments. One
fragment holds the application's logo. The second fragment holds links for navigating between
the pages in the application. |
Contents
|
|
 |
This tutorial works with the following resources
NetBeans Visual Web Pack 5.5 works with all supported servers and works
with both the Java EE 1.4 and Java EE 5 platforms. This tutorial
illustrates the Visual Web Pack features that work with the resources
check marked in the following table. For detailed information about the
supported servers and Java EE platform, see NetBeans
Visual Web Pack 5.5 Installation Instructions.
Application Server |
Sun Java System Application Server 9
Tomcat
JBoss
BEA WebLogic |
JavaServer Faces Components/
Java EE Platform |
1.2 with Java EE 5*
1.1 with J2EE 1.4
|
Travel Database |
Not Required |
BluePrints AJAX Component Library |
Not Required |
* Only the Sun Java System Application Server supports Java EE 5.
About Page Fragments
A page fragment is a portion of a page, such as a header, footer, or navigation
bar, that can be reused in other pages. For example, you might put a common element
such as a graphic or a Search field in a page fragment and then include that
fragment as a header in all pages in the application. You might also include your
company name and copyright information in a page fragment and use that fragment
as your application's footer. Like a main page, a page fragment is a JSP page with its own
associated page bean; however, the file extension of a page fragment is
jspf instead of jsp .
Designing a Page That Includes Page Fragments
You begin this tutorial by creating the home page for the application.
You then create a header fragment and a navigation fragment and include these
fragments in the home page.
-
Create a new visual web application project and call it FragmentExample .
Figure 1 shows the page that you will create in the steps that follow:
Figure 1: Application Home
Page |
From the Layout section of the Components Palette, drag a Page Fragment
Box component onto the upper left corner of the page.
The Select Page Fragment dialog box opens.
Click Create New Page Fragment. Type CompanyLogo in the Name
field and click OK.
The page fragment appears on the page. In addition, the page fragment is added
to the Projects window and to a <div> block in the Outline window.
Click Close to close the Select Page Fragment dialog box.
The dotted line in the Visual Designer shows the size of the page
fragment. The default size is 400 pixels wide by 200 pixels high.
- Place a second Page Fragment Box component on the left side of the page under
the CompanyLogo page fragment. Name this page fragment
Navigation .
- From the Basic section of the Palette, drag a Static Text component
onto the page and drop it to the right of the Navigation page fragment.
Be sure to drop the component on the page and not on the page fragment.
Change the text of this component to
Welcome
to Sky Company .
- Click the Visual Designer in a place that does not have a component. In the Properties window, change the
Title property to Sky Company Home .
Creating the Header Fragment
Now you define the content of the CompanyLogo fragment.
Any changes you make to a fragment must be made in the fragment itself, and
not in the page.
- If you haven't done so already, save the sample company logo JPEG file to your filesystem.
Open the CompanyLogo fragment by double-clicking the component in the Visual Designer.
The white background shows the size of the page fragment.
- In the Properties window, set the
Width property to 720px and the Height property to 120px .
- From the Basic section of the Palette, drag an Image component into the upper left corner page fragment.
In the Properties window, click the ellipsis (...) button for the Image's url property. Add the company logo to
the page fragment as follows:
- In the dialog box, click Add File.
- Navigate to the folder where you stored the company logo,
sky.jpg , and select the image.
- Click Add File. The IDE copies the image to the resources directory of the project and displays the image's relative URL.
- Click OK.
- If necessary, click and drag
sky.jpg to position it within the page fragment's borders.
- Click the Page1 tab to view the updates to the CompanyLogo
fragment. Adjust the layout of the components on the page as necessary.
Creating the Navigation Fragment
Next you define the content of the navigation fragment as shown in Figure 3.
Figure 3: Navigation Fragment |
- Open the Navigation fragment by double-clicking the component in the Visual Designer.
- In the Properties window, set the
Width property to 150px and the Height property to 100px .
- From the Basic section of the Palette, drag a Hyperlink component
and drop it in the page fragment. Set the text of the Hyperlink to
Home .
- In the Properties window, set the Hyperlink's
id property to homeLink and the url property to /faces/Page1.jsp .
- Drag a second Hyperlink component into the page fragment. Set the text of this component
to
Company News .
-
Set the Hyperlink's id property to newsLink and the url property to /faces/News.jsp .
You will create the News page in the next section.
Adding Fragments to a Second Page
In this section, you create a second page that includes the header and
navigation fragments. You set a
background color for this page to demonstrate how the page's style
settings are inherited by a page fragment.
-
In the Projects window, right-click the FragmentExample > Web Pages
node and choose New > Page. Name the new page News and click Finish.
The News page opens in the Visual Designer.
- Click the Page1 tab. You will copy the Page Fragment and Static Text components from this page to the News page.
- In the Outline window, hold down the Control key and select both
div elements and the Static Text component. Be sure you select the
div elements themselves and not just their jsp:directive.include child elements.
- Right-click the selection and choose Copy from the pop-up menu.
- Click the News tab.
- In the Outline window, expand the News > page1 > html1 > body1 node. Right-click
form1 and select Paste. The components you copied from Page1.jsp appear in the Visual Designer.
- Change the text of the Static Text to
We have a new Chief Executive Officer .
- Click an empty space in the News page. In the Properties window, change the
Title property to Sky Company News .
-
Click the ellipsis (...) button for the Background property
and use the color chooser to set the color to light yellow.
The Company Logo and Navigation fragments inherit the background color of the News page.
Disabling the Link for the Current Page
In this section you add code to to disable the Home link on the Page1 page and the Company News link on the News page.
- Click the Page1 tab and then open the Java source code for the page.
-
Add the following code to the prerender method:
Code Sample 1: Code to Disable the Link for the Current Page |
public void prerender() {
Navigation navigationFragmentBean = (Navigation)getBean("Navigation");
Hyperlink homeLink = navigationFragmentBean.getHomeLink();
homeLink.setDisabled(true);
} |
-
Right-click in the Java Editor and choose Fix Imports. The IDE adds the following import statement:
import com.sun.webui.jsf.component.Hyperlink;
- Click the News tab and open the Java source code for the page.
Add the following code to the prerender method.
Code Sample 2: Code to Disable the Link for the Current Page |
public void prerender() {
Navigation navigationFragmentBean = (Navigation)getBean("Navigation");
Hyperlink newsLink = navigationFragmentBean.getNewsLink();
newsLink.setDisabled(true);
} |
-
Right-click in the Java Editor and choose Fix Imports. The IDE adds the following import statement:
import com.sun.webui.jsf.component.Hyperlink;
-
Run the application.
Verify that the Home and Company News links work correctly.
Doing More: Adding a Footer Fragment
This tutorial demonstrates how to use page fragments in a simple
two-page application. A real application typically has more pages.
Try It. Add a third page to the FragmentExample
application. Be sure to add another Hyperlink component in the
Navigation page fragment and set the Hyperlink's url property.
Try It. Another common use for a page fragment is
to include a company's copyright information. Add a page fragment at
the bottom of each page with width of 720px and height of 100px . Include copyright information such as Copyright 1994-2006 Sky Company .
Tips for Using Page Fragments
Here are some things to consider when using page fragments:
-
The example in this tutorial uses Hyperlink components with their url
property set. This approach is recommended for its simplicity, because it
does not require you to set the immediate property or set up page
navigation. An alternative is to create a page fragment containing
a Button or Hyperlink component with its action property set. In this case, you must set the immediate property and also set up the page
navigation for each page that uses the fragment.
If you have a large
number of pages, and the navigation outcomes for the Button or Hyperlink
are the same for each page, you may optionally edit the page navigation
source file instead of using the Page Navigation Editor. To do
this, click the Source button in the Page Navigation toolbar. In the
source editor, replace the specific page name after the <from-view-id>
tag (for example /Page1.jsp ) with a wildcard value such as /* .
- As shown in this tutorial, it is best to use pixels (for example 100px) to set the height and width of a page fragment.
Percentages (for example, 100%) work fine in the Firefox web browser, but fail in Internet Explorer 6.0.
This page was last modified: December 6, 2006
|