Creating a CSS-based Fixed Page Layout - Part1

In this tutorial, you use the NetBeans Visual Web JSF framework to create a CSS-based fixed page layout. You will use different Layout Panels and other HTML elements from the palette to complete the layout for your page.

Contents

• Creating the Application
• Adding the Header Contents
• Adding the Left Sidebar Contents
• Adding the Right Sidebar Contents
• Adding the Footer Contents
• Adding Contents to the Main Menu
• Summary

To follow this tutorial, you need the following software and resources.

* To take advantage of NetBeans IDE's Java EE 5 capabilities, use an application server that is fully compliant with the Java EE 5 specification, such as the GlassFish Application Server V2 UR2. If you are using a different server, consult the Release Notes and FAQs for known problems and workarounds. For detailed information about the supported servers and Java EE platform, see the Release Notes.

Note for NetBeans IDE 6.1 users:

• Creating a project in NetBeans 6.1 includes new options which can be left at the default. For example, the Use Dedicated Folder for Storing Libraries checkbox may be left unselected.
• NetBeans IDE 6.1 features on-demand binding. Where components require Java coding, you must now manually add the binding attribute to components in a Visual Web JSF application. To do so, right-click each component and choose Add Binding Attribute. For more information, see the On-demand Binding Attribute Wiki.

Creating the Application

In this tutorial, you create a CSS-based, single-page web application. You begin by constructing a page with the layout structure shown in the following figure.

1. Create a web application that uses the Visual Web JSF framework. Name the project com.samples.layout and the default source package fixedpagelayoutex.

   Note: Creating a project in NetBeans 6.1 includes new options which can be left at the default. For example, the Use Dedicated Folder for Storing Libraries checkbox may be left unselected.

   Page1.jsp file opens in the Visual Designer.

2. In the Projects window, expand the Web pages node, right-click on Page1.jsp, and choose Refactor > Rename.

   The Rename dialog box opens.

3. In the Rename dialog box, type PageLayout1 as the new name of the page. Check to apply rename of comments and click Refactor.

   The name of the page changes in the Project window and on the tab in the Visual Designer.

4. Click the JSP tab to open the JSP Editor. Add the following HTML to the <form> component.

   Code Sample 1: Editing the JSP.

   <div id="container"> <div id="header"> Header </div> <div id="leftBar"> Left Bar </div> <div id="content"> Main Content </div> <div id="rightBar"> Right Bar </div> <div id="footer"> Footer </div> </div>

5. In the Projects window, right-click the resources folder and select New > Cascading Style Sheet.

6. In the New Cascading Style Sheet wizard, type layout as the file name and click Finish.

   layout.css appears under the resources node in the Projects window.
7. Return to the design view of PageLayout1.jsp. From the Advanced section of the Palette, drag and drop a Link component onto the Visual Designer.
8. Select the link component in the Navigator window. In the Property window, set the URL as /resources/layout.css.
9. In the Projects window, double-click layout.css to open it in the Visual Designer.

10. Add the following CSS rules to layout.css.

    Code Sample 2: Adding CSS Rules.

    #container { margin:auto; width: 760px; background: #ffffff; } #header { background: #DDDDDD; } #leftBar { float: left; width: 150px; background: #EBEBEB; } #content { float:left; width:450px; background-color: #cdcde6; } #rightBar { float:right; width: 160px; background: #EBEBEB; } #footer { clear:both; background:#DDDDDD; }

    
    Give special attention to the CSS properties highlighted in blue. They are responsible for placing the containers (
    ) in the correct place. The footer CSS rule has the property clear:both which gives a hint to the browser that both of its ends should be cleared (does not allow floating elements on both sides), so it is always placed beneath the other floating elements.
11. To achieve the border, select the div:container in the Navigator window and set its style property Border to solid, 5px width, and leave the default color at black.
12. Right-click the project node and choose Run to deploy the application. The Browser should display a page resembling the following figure:

Adding the Header Contents

First we add the header to our page and then add its contents.

1. From the Layout section of the Palette, drag and drop a Layout Panel component onto the header <div> in the Visual Designer.

   Note: The default size of the Layout Panel is 128 x 128 pixels.

2. Open the JSP Editor and remove the content Header from the header <div>.

3. Select the Layout Panel in the Visual Designer. In the Properties window for the Layout Panel, click the ellipsis (...) next to the style property.

   The Style Editor opens.

4. In the Style Editor for the Layout Panel, set the height to 175px and width to 760px.

   Note: The width is same as width of the container <div> as specified in layout.css.

5. Set the background image of the Layout Panel using the Style Editor.

   If you do not have a header image, you can use the download one here.
6. Click OK to save your changes.

7. In the Properties window, set the panelLayout property to either Grid Layout or Flow Layout.

   Note: If you select GridLayout, then you can more easily place other components on the page. If you would rather wish to use Flow Layout then you must use other layout components to format the component placement.

8. Drag and drop a Static Text on to the Layout Panel and set its text property to Fixed Page Layout 1. Use the Style Editor to change the style of the text.

9. Run the application. The application should resemble the following figure.

   

Adding the Left Sidebar Contents

Next we add a Navigation Bar to the left-hand side of the page. Let us keep its contents simple by adding only hyperlinks.

1. Drag and drop a Grid Panel component on to the leftBar <div>.

   Note: The default size of the Grid Panel is 128 x 128 pixels. Once a component is added to the Grid Panel, the initial size is discarded.

2. In the JSP Editor, remove the content Left Bar from the leftBar <div>.
3. From the Basic section of the Palette, drag and drop several HyperLink components onto the Grid Panel. Look at the Navigator window to ensure that all the hyperlinks are inside the Grid Panel, and rearrange if necessary.

4. Run the application. The application should resemble the following figure.

   

Adding the Right Sidebar Contents

Bookmark this page