Implementing the Composite View Design Pattern using ...

draindecorumDéveloppement de logiciels

15 août 2012 (il y a 9 années et 27 jours)

424 vue(s)

Implementing the Composite View Design Pattern using

Netbeans Visual Web Pack Page Fragments
Many Web applications created today implement the Composite View design pattern. The NetBeans

Integrated Development Environment (IDE) Visual Web Pack provides a Java Server Faces (JSFs)

drag and drop development environment for the creation of Web applications. It seems natural to

wish to use Composite View when building Web applications with the Visual Web Pack and to

consider how this may be achieved
A detailed discussion of Composite View is available at:
The NetBeans Visual Web Pack allows a developer to create page fragments and these can be used

as the atomic subviews required when implementing the Composite View pattern. Also, the Visual

Web Pack component palette includes a layout component called
Page Fragment Box
and through

the inclusion of Page Fragment Box components on a page, page fragments can be used to compose

the composite view that is a specific Web page. Any Page Fragment Box component, included in a

page, is configured with a specific page fragment and therefore page fragments may be reused

across multiple pages.
Since maintenance of a consistent look over all the pages which comprise a Web application is one

of the prime motivations for using composite view it is also essential that Cascading Style Sheet

(CSS) rules applied to each fragment are carried across to the pages that include the fragments.
This tutorial documents the creation of a simple Web application where the Composition View

design pattern is applied to create Web pages with common Banner, Sidebar and Footer subviews.

In the tutorial CSS style rules are used to give the required styling to each subview.
The tutorial uses NetBeans 5.5.1 RC1 with Visual Web Pack 5.5.1 installed and the Glassfish V2

Beta 1 application server. All must be installed before attempting to follow the tutorial.
Netbeans and the Visual Web pack can be downloaded for free from the NetBeans web site:

The Glassfish application server can be downloaded from:
Creating a NetBeans Visual Web Pack Project
Start the NetBeans IDE and choose File > New Project from the menu. Ensure that you select Web

from the Categories and Visual Web Application as the project type, as shown in
Figure 1
, before

clicking on the Next button.
In the New Visual Web Application dialog which is presented provide a project name of

CompositeViewDemo, leave all other settings untouched and click on Finish.
: New Project Dialog
Adding Some Pages
In the projects window expand the Web Pages node for the CompositeViewDemo project. The

project currently has a single Web Page called Page1.jsp. Select the Web Pages node, right click and

choose New > Page. Accept the default values in the New Page dialog and click on finish. Your

project should now feature two pages. Repeat this process until your project has four pages. In this

tutorial we will apply the Composite View pattern by adding identical page fragments to each of our

four pages.
Figure 2
shows the project window after the four pages have been created.
Adding Page Fragments
If we are to apply the Composite View pattern we need to create some page fragments. In order to

provide some structure to our project lets create a folder to hold the page fragments. Select the Web

Pages node, right click and choose New > Folder. Call the folder
. To create some

page fragments select the pagefragments folder you have just created, right click and choose New >

Page Fragment. Call the page fragment Banner and click Finish. Repeat this process to create two

additional page fragments called SideBar and Footer respectively.
Figure 3
shows the project

window after the three page fragments have been added.

: Project Window Showing

Four New Pages
: Project Window Showing the

New Page Fragments
Creating CSS Rules For The Page Fragments
Before staring work on the content of each page fragment at least one CSS rule must be created for

each fragment which defines its overall appearance. Doing this before working on the content of a

fragment makes it easier to design the content of the fragment since if the fragment is configured to

use the rule it looks similar to how it will look when it is added to a page. Any number of CSS rules

can be created for use with page fragments but for simplicity this tutorial only looks at creating one

rule that governs the fragment as a whole.
Our tutorial project features three fragments and we will create a single rule for each fragment.
To keep things simple we will add our CSS rules to the default stylesheet file present in our project.

The default stylesheet file is called stylesheet.css and is present in the resources folder in the Web

Pages folder. Select this file and double click it to open the NetBeans CSS editor. NetBeans has a

powerful built in CSS editor which can be invaluable when adding new rules to a stylesheet as well

as modifying existing rules.
Figure 4
Shows the stylesheet.css file opened in the NetBeans

stylesheet editor with the last CSS rule visible.
: Stylesheet.css file opened in the Stylesheet Editor
To style each of the our fragments we will use a single CSS rule for each fragment.
Add the following CSS rules to the end of the stylesheet.css file.
background-color: #9999ff;
border-bottom-color: blue;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: blue;
border-left-style: solid;
border-left-width: 1px;
border-right-color: blue;
border-right-style: solid;
border-right-width: 1px;
border-top-color: blue;
border-top-style: solid;
border-top-width: 1px;
height: 150px;
width: 100%
background-color: #ffcccc;
height: 150px;
width: 100%
background-color: #ccffcc;
height: 150px;
width: 150px
If you wish you can preview each rule in the NetBeans CSS editor and modify it if you wish.
Editing the Banner Page Fragment
Now that we have stylesheet rules for each of our fragments we can configure the fragments to use

the rules and also edit the fragments as required for use in our specific application. In this tutorial

we will add a Static Text, Button and Image Hyperlink component as well as two Text Field

components to the Banner. To the Footer fragment we will add a single Static Text component and

to the SideBar fragment with will add some Hyperlink components. The Hyperlinks in the SideBar

will allow us to navigate between our pages and will effectively make the SideBar our Web

application menu.
Open the Banner page fragment by double clicking on it in the Projects window. The Outline

window, below the Projects window, presents the elements that compose the fragment. They are

shown as a tree and we can access the elements of the fragment by navigating the tree structure.

Select the root element of the tree i.e. Banner and use the properties window to change the value of

the Page Layout property from Grid Layout to Flow Layout. Changing the value to Flow Layout

causes br elements to be added to the fragment. I am not sure why this is the case and I typically

don't find the ones added automatically to be useful and usually delete them. Select each of the br

elements in turn and by right clicking delete them.
We will now add a Layout Panel component to the fragment. I find it useful to do this since the

Layout Panel component can act as a container for the components that are included in the

fragment. The Layout Panel component also has lots of useful properties that can configure as

required to present the fragment components. Drag a Layout Panel from the Palette window and

drop it on the f:subView element of the Banner fragment in the Outline window. Select the newly

added Layout Panel and change its panelLayout property value to Grid Layout in the Properties

We will now configure the fragment to use one of the stylesheet rules we created earlier. The rule

must be applied to the Layout Panel element of the page fragment. Select the element called

layoutPanel1 in the Outline window and in the Properties window click on the
box for the

styleClass property. Choose the brianbanner class from the list of available classes and make it a

selected class by clicking on the > button. Click OK to close the dialog. We will now need to clear

the values held in the style property so that only the brianbanner rule applies. Click on the
box for

the style property and click the Reset to Default button.
Figure 6
Shows the style property dialog

and its Reset To Default button.
To ensure that only the CSS rule applied to the Layout Panel is applied, when the fragment is used,

we must clear all styling from the div element. Select the div element in the outline window and

clear the value for the style property as we just did for the Layout Panel.
The view of the fragment in the NetBeans Editor window should fully reflect the CSS rule but I

have found this to be problematic. It seems to require that one component is added to the Layout

Panel first.
Drag a Static Text component from the Palette and drop it on the layoutPanel1 node in the Outline

window. Select the newly added Static Text component, staticText1, in the outline window and you

should see it selected in the main editing window for the page fragment. Drag the component in the

editing window so that it near the middle of the fragment on the left hand side and change its text

property to Banner Text.
I have sometimes found the rendering of fragments by NetBeans problematic. Right clicking the

Banner node in the outline window and choosing Refresh often renders the fragment as required but

sometimes even this fails. On occasion the only way to proceed is to restart NetBeans.
To complete the Banner fragment drag two Text Field components and a Button component from

the palette and drop them on the Layout Panel, layoutPanel1. In addition, drag and drop an

ImageHyperlink component and configure its url property so that it displays an image of your

The image used in this tutorial is one of Duke and was obtained from:

: style dialog showing the Reset to Default button
Arrange all the new components on the fragment to the right of the Text Field.
Figure 6
shows the project, outline and editor windows for the Banner fragment with styling applied

and the components added.
Close the editor window for the Banner fragment.
: Banner fragment with styling and components added
Editing the Footer Page Fragment
Repeat the process we followed for the Banner fragment but this time choose the brianfooter rule to

style the Layout Panel. Use appropriate text for the text of the Static Text component.
Figure 7
shows the Footer fragment with styling applied and a single Static Text component added.

Feel free to add as many additional components as you wish to the Footer fragment and even to edit

the CSS rule brianfooter to style the fragment differently from what is shown here.
Close the editor window for the Footer fragment when you are finished.
: Footer with styling and components added
Editing the SideBar Page Fragment
Repeat the process applied to the header one final time for the SideBar fragment. In this case the

stylesheet rule briansidebar is the one to choose. Since we are going to implement a simple menu

using the SideBar fragment drag four Hyperlink components from the Palette and drop them onto

the Layout Panel component, layoutPanel1, in the SideBar fragment. Change the text for each to

Page 1, Page 2, Page 3 and Page 4 respectively and arrange them in order from top to bottom within

the fragment.
Figure 8
Shows the SideBar fragment with styling applied and the four Hyperlink

components added and configured.
Although NetBeans provides a Page Navigation editor to configure the Hyperlink components

present on a page either graphically or by editing directly the XML navigation document I have

found this problematic when using page fragments.
To configure the Hyperlink components select each in turn and modify its url property by clicking

on the
box next to the url property. Ensure that you choose an appropriate url for each link.
: SideBar fragment styled and

with Hyperlink components added
Adding a CSS Rule for the Main Panel
In addition to the three fragments each page will include a main panel. This panel is where the

content specific to each page will be placed. In this tutorial the main panel will be a Layout Panel

component placed under the Banner and to the right of the SideBar. In order to avoid configuring

the style of each Layout Panel on each page a CSS style rule will be created and added to the

stylesheet.css file. This rule can then be applied to each of the Layout Panels when they are added

to the pages.
Add the following CSS rule to the end of the stylesheet.css file:
background-color: rgb(255, 255, 153);
height: 149px;
left: 151px;
top: 152px;
position: absolute;
width: 100%
Adding the Fragments to the Pages
To complete our Web application we must now add all of the page fragments to each of the pages

and also add a Layout Panel to each page to hold the content specific to that page. Although we

could start with any one of our pages we will randomly choose to work on Page3 first.
Double click on the Page3.jsp file to open it. Drag a Page Fragment Box from the Palette to the

page in the editor window. When you do this you will be prompted to choose a page fragment.

Choose the Banner fragment. Repeat this process to add two more fragments one for the Footer

fragment and the other for the SideBar fragment. Don't worry about where you drop the fragments

on the page as long as they are not on top of each other. The styling we have chosen for each

fragment will eventually determine its actual position on the page. Finally, drag a Layout Panel

from the Palette and drop it on the page in the editor window.
In the outline view, navigate down the tree structure until you open the form1 node. Adding the

page fragments has resulted in three div elements and a Layout Panel element being added to the

form element.
Figure 9
Shows Page3 with three Page Fragment Boxes and Layout Panel added.
The reason that the page fragments are not appearing at the correct positions on the page is because

the style attributes of the div elements have a value. We must reset the style attribute values for the

div elements as well as the Layout Panel. In the case of the Layout Panel we must also set the

styleClass attribute value to brianmain.
Clear any existing style values for the div elements by selecting each div element in turn, clicking

on the
button next to its style property in the Property window and then clicking the Reset To

Default button in the style dialog. Do the same with the Layout Panel, layoutPanel1, but also click

on the
button for its styleClass property and configure brianmain as the style rule. If brianmain is

not present in the rule list you may have to refresh the tree shown in the outline view. Doing this

seems to ensure that any stylesheet changes are available to the page. At this stage the fragments

may still not be in their proper position. If not then it will be necessary to drag the div and Layout

Panel elements up and down the tree shown in the Outline window so that they are all in the correct

order. This is not a simple thing to do and takes some practice. Stick at it and you will eventually

get the correct ordering. The ordering we require is Banner, Layout Panel, Sidebar and Footer. To

complete the page we will add a single Static Text component to the Layout Panel and set its text to

something specific to this page.
Figure 10
shows Page 3 fully completed. The fragments and Panel Layout component are in the

correct order and the Panel Layout component contains a Static Text component. If you wish, you

can alter the styling of the Static Text component, perhaps to increase the size of the text or change

its color. The default layout for the Layout Panel component panelLayout property is Flow Layout

but this could be changed to Grid Layout and the Static Text component moved to a specific

Repeat this process for the other three pages to complete the Web application.
: Page 3 with Page Fragments Boxes and Layout Panel added
The Finished Web Application
Now that the application is complete it can be deployed to the application server and used.
Figure 11
Figure 12
show the application in action using the Firefox browser with Page 1 and

Page 2 on display respectively. It is clear to see in the figures that the pages are identical in every

way except for the text identifying the page in the central area. In a real application this central area

would consume more of the page area and make available useful information or functionality to the

user. The key thing to note is that since page fragments have been employed for Banner, Footer and

Side Panel any change in styling or a change of content will be reflected in every page.
: Page 3 with all elements in place and in order
: Finished Application in Firefox Browser with

Page 1 Showing
: Finished Application in Firefox Browser with

Page 2 Showing
This tutorial shows that the implementation of the Composite View design pattern using Visual Web

Pack Page page fragments and Page Fragment Box components is viable. On occasion NetBeans

does have problems rendering the fragments with the correct styling chosen during editing. In most

cases this can be rectified by doing a refresh in the outline window but in some circumstances

requires a restart of NetBeans. Also, graphical editing of page navigation is problematic when page

fragments are involved.
Since the version of NetBeans used was NetBeans 5.5.1 RC1, I would hope that these editing quirks

are resolved in the final release. NetBeans with Visual Web Pack is certainly a powerful IDE for the

development of well designed dynamic Web Applications.
Brian 19
April 2007
(Version 1.0)
Copyright © Brian Hainey 2007