| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| <link rel="stylesheet" href="../../book.css" type="text/css"> |
| <title>Linking Web Pages</title> |
| </head> |
| <body> |
| <div class="section" lang="en"> |
| <div class="titlepage"> |
| <div> |
| <div> |
| <h1 class="Head" style="clear: both"><a name="define_navigations"></a>Creating |
| Navigation Rule</h1> |
| </div> |
| </div> |
| </div> |
| </div> |
| <p>You can link Web pages to create a Web application Navigation |
| Rule.</p> |
| <p><span class="strong">To create Navigation Rule:</span></p> |
| <div class="orderedlist"> |
| <ol type="1"> |
| <li> |
| <p>Select<span class="strong"> faces-config.xml</span> in the <span |
| class="strong">Project Explorer</span> of the <span class="strong">J2EE</span> |
| perspective.</p> |
| <p>The JSF Application Configuration editor opens.</p> |
| </li> |
| <li> |
| <p>Select the <span class="strong">Navigation Rule </span>tab of |
| the editor.</p> |
| </li> |
| <li> |
| <p>Drag the pages that you want to link from the <span |
| class="strong">Project Explorer</span> and drop them onto the <span |
| class="strong">Navigation Rule</span> page.</p> |
| </li> |
| <li> |
| <p>Show <span class="strong">Palette</span> <span |
| class="inlinemediaobject"><img src="images/palette.gif" |
| width="19"></span>.</p> |
| </li> |
| <li> |
| <p>Click <span class="strong">Link </span>on the <span |
| class="strong">Palette</span>.</p> |
| <p>This activates the link control so you can draw lines to link |
| pages and indicate the navigation rule.</p> |
| </li> |
| <li> |
| <p>Click on the page that you want to link, move the cursor to the |
| page to which you want to link, and click again to release the cursor..</p> |
| <p>A line with an arrow appears connecting the two pages. The arrow |
| points to the page the line was drawn to indicate the navigation rule.</p> |
| </li> |
| <li> |
| <p>Repeat steps 5 and 6 until all pages and actions are linked.</p> |
| </li> |
| <li> |
| <p>The scale percentage appears on the main toolbar. You can also |
| change the scale by clicking the arrow in the percentage tool to open |
| the drop-down menu and selecting the scale percentage.</p> |
| </li> |
| <li> |
| <p>(Optional) To align icons in the navigation rule diagram:</p> |
| <div class="orderedlist"> |
| <ol type="a"> |
| <li> |
| <p>Click <span class="strong">Select </span>on the <span |
| class="strong">Palette</span>.</p> |
| <p>This activates the select control.</p> |
| </li> |
| <li> |
| <p>Select the icons that you want to align.</p> |
| <p>The Align tools are enabled on the main toolbar.</p> |
| </li> |
| <li> |
| <p>Click the direction that you want the alignment.</p> |
| <p>You can align icons left, center, right, top, middle, or |
| bottom.</p> |
| <p>The icons are aligned in the selected direction.</p> |
| </li> |
| </ol> |
| </div> |
| <p></p> |
| </li> |
| </ol> |
| </div> |
| <p></p> |
| <p><span class="strong">Next: </span> <a href="define_link_properties.html">Defining |
| Link Properties</a></p> |
| |
| <br> |
| <img src="../../images/ngrelc.png" alt="Related concepts" border="0"> |
| <p><br> |
| </p> |
| |
| <p><img src="../../images/ngrelr.png" alt="Related reference" |
| border="0"></p> |
| <p><a href="use_facesconfig_editor.html">Faces Config |
| Editor</a><br> |
| </p> |
| |
| <p><img src="../../images/ngrelt.png" alt="Related tasks" border="0"> |
| </p> |
| <p><a href="../gettingstarted/tutorial/JSFTools_tutorial.html">Tutorial</a></p> |
| </body> |
| </html> |
