Page Fragments

7/28/2019 Page Fragments

http://slidepdf.com/reader/full/page-fragments 1/8

Using Page Fragments

January 2006 [Revision number: V2-3]Copyright 2006 Sun Microsystems, Inc.

In this tutorial, you use Sun Java Studio Creator integrated development environment (IDE) to create an application thatincludes two page fragments. One fragment holds the application's logo. The second fragment holds links for navigatingbetween the pages in the application.

Contents

- About Page Fragments

- Designing a Page That Includes Page Fragments

- Creating a Header Fragment

- Creating a Navigation Fragment

- Adding Fragments to a Second Page

- Disabling the Link for the Current Page

- Doing More: Adding a Footer Fragment- Tips for Using Page Fragments

Sample company logo used in this tutorial

» sky.jpg included in the downloaded ZIPfile.

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. Forexample, you might put a common element such as a graphic or a Search field in a page fragment and then include thatfragment 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 aJSP 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 navigationfragment and include these fragments in the home page.

1. Create a new web application project and call it FragmentExample.

Figure 1 shows the page that you will create in the following steps.

1



Figure 1: Application Home Page

2. From the Layout section of the Components Palette, drag a Page Fragment Box component onto the upper leftcorner of the page.

The Select Page Fragment dialog box opens.

3. 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 also ina <div> block in the Outline window.

4. 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 by200 pixels high.

5. Place a second Page Fragment Box component on the left side of the page under the CompanyLogo pagefragment. Name this page fragment Navigation.

6. From the Basic section of the Palette, drag a Static Text component onto the page and drop it to the right of theNavigation page fragment. Be sure to drop the component on the page and not on the page fragment. Change thetext of this component to Welcome to Sky Company.

Creating a Header Fragment

Now you define the content of the CompanyLogo fragment, as shown in Figure 2. Any changes you make to a fragmentmust be made in the fragment itself, and not in the page.

2



Figure 2: CompanyLogo Page Fragment

1. If you haven't done so already, save the sample company logo (sky.jpg) JPEG file to your filesystem.

2. Open the CompanyLogo fragment by double-clicking the component in the Visual Designer.

The white background shows the size of the page fragment.

3. In the Properties window, set theHeight property to 120px and the Width property to 720px.

4. From the Basic section of the Palette, drag an Image component into the upper left corner page fragment.

5. In the Properties window, click the ellipsis (...) button for the Image'surl property. Add the company logo to thepage fragment as follows:

a. In the dialog box, click Add File.b. Navigate to the folder where you stored the company logo and select the image.c. Click Add File. The IDE copies the image to the resources directory of the project.d. Click OK.

6. Click the Page1 tab to view the updates to the CompanyLogo fragment. Adjust the layout of the components onthe page as necessary.

Creating a Navigation Fragment

Next you define the content of the navigation fragment as shown in Figure 3.

Figure 3: Navigation Fragment

3



1. Open the Navigation fragment by double-clicking the component in the Visual Designer.

2. In the Properties window, set theHeight property to 100px and the Width property to 150px.

3. 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.

4. In the Properties window, set the Hyperlink'sid property to homeLink and the url property to /faces/Page1.jsp.

5. Drag a second Hyperlink component into the page fragment. Set the text of this component toCompany News.

6. 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 colorfor this page to demonstrate how the page's style settings are inherited by a page fragment.

1. In the Projects window, right-click the FragmentExample > Web Pages node and choose New > Page. Type News as the page name and click Finish.

The News page opens in the Visual Designer. You will design the page as shown in Figure 4.

Figure 4: News Page

2. Click the Page1 tab. You will copy the Page Fragment and Static Text components from this page to the Newspage.

3. In the Outline window, hold down the Control key and select bothdiv elements and the Static Text component.Be sure you select the div elements themselves and not just their jsp:directive.include child elements.

4



4. Right-click the selection and choose Copy from the pop-up menu.

5. Click the News tab.

6. Right-click in the Visual Designer and choose Paste from the pop-up menu. Adjust the layout of the componentson the page as necessary.

7. Change the text of the Static Text to We have a new Chief Executive Officer.

8. Click an empty space in the News page. In the Properties window, click the ellipsis (...) button for theBackground 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

Here you add code to to disable the Home link on the Page1 page and the Company News link on the News page.

1. Click the Page1 tab and then open the Java source code for the page.

2. 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);

}

3. Right-click in the Java Editor and choose Fix Imports.

4. Click the News tab and open the Java source code for the page.

5. 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);

}

6. Right-click in the Java Editor and choose Fix Imports.

7. Run the application.

Verify that the Home and Company News links work correctly.

5



This tutorial demonstrates how to use page fragments in a simple two-page application. A real application typically hasmore pages. Try It. Add a third page to the FragmentExample application. Be sure to add another Hyperlink component in theNavigation 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 fragmentat the bottom of each page with width of 720px and height of 100px. Include copyright information such asCopyright 1994-2006 Sky Company.

Tips for Using Page Fragments

Here are some things to consider when using page fragments:

q The example in this tutorial uses Hyperlink components with their url property set. This approach isrecommended for its simplicity, because it does not require you to set the immediate property or set up pagenavigation. An alternative is to create a page fragment containing a Button or Hyperlink component with itsaction 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 Buttonor Hyperlink are the same for each page, you may optionally edit the page navigation source file instead of usingthe Page Navigation Editor. To do this, click the Source button in the Page Navigation toolbar. In the sourceeditor, replace the specific page name after the <from-view-id> tag (for example /Page1.jsp) with awildcard value such as /*.

q Typically, a page fragment inherits the style settings of the page in which it is included. The page's style sheetdefines these settings. The components inside a page fragment can use the style classes defined in this style sheet.In general, any Java Studio Creator component can be associated with style classes that are defined in a style sheet.

q If you are using the latest version of the Java Studio Creator IDE, the updates you make to a page fragment atdesign time are automatically reloaded in the pages in which they are included. If you are using an earlier versionof the IDE, then you will need to update the page by right-clicking and choosing Refresh on the contextual menu.

q There is no support for virtual forms within a page fragment. To configure selective processing on components in

a page fragment, you must set the immediate property to True on those components. This solution is sufficientto cover a number of uses cases; however, it is still limited insofar as it can only configure selective processing onone group of components.

q For an example of using a Layout Component to lay out the page fragments and other components on a page, seeWinston Prakash's blog on CSS Layout Technique.

q As shown in this tutorial, it is best to use pixels (for example 100px) to set the height and width of a pagefragment. Percentages (for example, 100%) work fine in the Firefox web browser, but fail in Internet Explorer 6.0.

See Also:

q Adding Styles to Componentsq Using Virtual Forms

This page was last modified: February 10, 2006

Sun and Third-party Trademarked Terminology

The following Sun trademarked terms might be used in the Sun Java(tm) Studio Creator tutorials:

Doing More: Adding a Footer Fragment

6

http://blogs.sun.com/roller/page/winston#css_layout

http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/stylesheets_comps.html

http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/virtual_form.html

http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/virtual_form.html

http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/stylesheets_comps.html

http://blogs.sun.com/roller/page/winston#css_layout



q Sun Java Studio Creator integrated development environment (IDE)q Sun Java System Application Server version number (Application Server)q Java Platform, Standard Edition technology (Java SE(tm) platform)q JavaServer(tm) Faces technologyq JavaServer Pages(tm) technology (JSP(tm) technology)q Sun Java System Web Server version number (Web Server)q Java Database Connectivity software (JDBC software)q Enterprise JavaBeans(tm) specification (EJB(tm) specification)q Solaris(tm) Operating System software (Solaris OS software)

The following third-party trademarked terms might be used in the Sun Java Studio Creator tutorials:

q UNIX(R) softwareq SPARC(R) processor

Copyright © 2006 Sun Microsystems, Inc., 4150 Network Circle, Santa Clara, California 95054, U.S.A. All rights reserved.

Sun Microsystems, Inc. has intellectual property rights relating to technology embodied in the product that is described in thisdocument. In particular, and without limitation, these intellectual property rights may include one or more of the U.S. patents

listed at http://www.sun.com/patents and one or more additional patents or pending patent applications in the U.S. and inother countries.

U.S. Government Rights - Commercial software.

Government users are subject to the Sun Microsystems, Inc. standard license agreement and applicable provisions of the FARand its supplements. Use is subject to license terms. Sun, Sun Microsystems, the Sun logo, Java and the Java Coffee Cup logoare trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries.This product is coveredand controlled by U.S. Export Control laws and may be subject to the export or import laws in other countries. Nuclear,missile, chemical biological weapons or nuclear maritime end uses or end users, whether direct or indirect, are strictlyprohibited. Export or reexport to countries subject to U.S. embargo or to entities identified on U.S. export exclusion lists,including, but not limited to, the denied persons and specially designated nationals lists is strictly prohibited.

Note: Sun is not responsible for the availability of third-party web sites mentioned in this document and does not endorse andis not responsible or liable for any content, advertising, products, or other materials on or available from such sites orresources. Sun will not be responsible or liable for any damage or loss caused or alleged to be caused by or in connectionwith use of or reliance on any such content, goods, or services available on or through any such sites or resources.

Copyright © 2006 Sun Microsystems, Inc., 4150 Network Circle, Santa Clara, California 95054, États-Unis. Tous droitsréservés.

Sun Microsystems, Inc. détient les droits de propriété intellectuels relatifs à la technologie incorporée dans le produit qui estdécrit dans ce document. En particulier, et ce sans limitation, ces droits de propriété intellectuelle peuvent inclure un ou plusdes brevets américains listés à l'adresse http://www.sun.com/patents et un ou les brevets supplémentaires ou les applicationsde brevet en attente aux États-Unis et dans les autres pays. L'utilisation est soumise aux termes de la Licence. Sun, SunMicrosystems, le logo Sun, Java et le logo Java Coffee Cup sont des marques de fabrique ou des marques déposées de SunMicrosystems, Inc. aux États-Unis et dans d'autres pays.Ce produit est soumis à la législation américaine en matière decontrôle des exportations et peut être soumis à la règlementation en vigueur dans d'autres pays dans le domaine desexportations et importations. Les utilisations, ou utilisateurs finaux, pour des armes nucléaires,des missiles, des armesbiologiques et chimiques ou du nucléaire maritime, directement ou indirectement, sont strictement interdites. Lesexportations ou réexportations vers les pays sous embargo américain, ou vers des entités figurant sur les listes d'exclusiond'exportation américaines, y compris, mais de manière non exhaustive, la liste de personnes qui font objet d'un ordre de nepas participer, d'une façon directe ou indirecte, aux exportations des produits ou des services qui sont régis par la législationaméricaine en matière de contrôle des exportations et la liste de ressortissants spécifiquement désignés, sont rigoureusementinterdites.

7



Sun Microsystems n'est pas responsable de la disponibilité de tiers emplacements d'enchaînement mentionnés dans cedocument et n'approuve pas et n'est pas responsable ou iresponsable d'aucun contenu, de la publicité, de produits, ou d'autresmatériaux dessus ou fournis par de tels emplacements ou ressources. Sun ne sera pas responsable ou iresponsable d'aucunsdommages ou perte causés ou allégués pour être causé par ou en liaison avec l'utilisation de ce produit ou la confiance dansdes tels contenu, marchandises, ou services disponibles sur ou par des tels emplacements ou ressources.

8

Documents

Page Fragments