| <!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>Adding a Component</title> |
| </head> |
| <body> |
| <div class="section" lang="en"> |
| <div class="titlepage"> |
| <div> |
| <div> |
| <h1 class="Head" style="clear: both"><a name="add_component"></a>Adding |
| a Component</h1> |
| </div> |
| </div> |
| <div></div> |
| </div> |
| <p>You can develop a new JavaServer Faces (JSF) Component. Using the |
| Component section of the JSF Application Configuration editor Component |
| page, you can register a component and its associated classes. |
| Generally, a JSF component is composed of a set of classes, such as the |
| component class, its render class, and so on. See the JSF specification |
| and tutorial on <a href="http://java.sun.com">java.sun.com</a> for component development details.</p> |
| <p><span class="strong">To add a component: </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">Component </span>tab of the |
| editor.</p> |
| <p>The Faces Configuration Components page appears.</p> |
| </li> |
| <li> |
| <p>Expand the <span class="strong">Components</span> section.</p> |
| <p>Defined components display in the components list.</p> |
| </li> |
| <li> |
| <p>Click <span class="strong">Add</span>.</p> |
| <p>A new component <span |
| class="emphasis"><em>x</em></span> is added to the list and General, |
| Facets, Attributes, and Properties sections appear.</p> |
| </li> |
| <li> |
| <p>(Optional) Change the default name to a unique, descriptive name |
| in the <span class="strong">Display Name </span>field of the <span |
| class="strong">General </span> section.</p> |
| </li> |
| <li> |
| <p>(Optional) Type a description of the component in the <span |
| class="strong">Description</span> field.</p> |
| </li> |
| <li> |
| <p>Type the type in the <span class="strong">Component Type</span> |
| field.</p> |
| </li> |
| <li> |
| <p>Click <span class="strong">Browse</span>.</p> |
| <p>The Select Type dialog box appears.</p> |
| </li> |
| <li> |
| <p>Type the first letter of the type you want to use in the <span |
| class="strong">Select entries</span> field.</p> |
| <p>A list of available types beginning with the letter you typed |
| appears in the Matching types list.</p> |
| </li> |
| <li> |
| <p>Select the type that you want to use and click<span |
| class="strong"> OK</span>.</p> |
| </li> |
| <li> |
| <p>Click <span class="strong">Add</span> in the <span |
| class="strong">Facets</span> section.</p> |
| <p>The Add/Edit Facet dialog box appears.</p> |
| </li> |
| <li> |
| <p>Type a facet name, display name, and description and click <span |
| class="strong">Finish</span>.</p> |
| </li> |
| <li> |
| <p>Click <span class="strong">Add</span> in the <span |
| class="strong">Attributes</span> section.</p> |
| <p>The Add/Edit Attribute dialog box appears.</p> |
| </li> |
| <li> |
| <p>Type a unique, descriptive name in the <span class="strong">Attribute |
| Name</span> field.</p> |
| </li> |
| <li> |
| <p>Click <span class="strong">Browse</span>.</p> |
| </li> |
| <li> |
| <p>Type the first letter of the type you want to use in the <span |
| class="strong">Select entries</span> field.</p> |
| <p>A list of available types beginning with the letter you typed |
| appears in the Matching types list.</p> |
| </li> |
| <li> |
| <p>Select the type that you want to use and click<span |
| class="strong"> OK</span>.</p> |
| </li> |
| <li> |
| <p>Type a value in the <span class="strong">Default Value</span> |
| field.</p> |
| </li> |
| <li> |
| <p>(Optional) Type a value in the <span class="strong">Suggested |
| Value</span> field.</p> |
| </li> |
| <li> |
| <p>Click <span class="strong">Add</span> in the <span |
| class="strong">Properties</span> section.</p> |
| <p>The Add/Edit Property dialog box appears.</p> |
| </li> |
| <li> |
| <p>Type a unique, descriptive name in the <span class="strong">Property |
| Name</span> field.</p> |
| </li> |
| <li> |
| <p>Click <span class="strong">Browse</span>.</p> |
| </li> |
| <li> |
| <p>Type the first letter of the type you want to use in the <span |
| class="strong">Select entries</span> field.</p> |
| <p>A list of available types beginning with the letter you typed |
| appears in the Matching types list.</p> |
| </li> |
| <li> |
| <p>Select the type that you want to use and click<span |
| class="strong"> OK</span>.</p> |
| </li> |
| <li> |
| <p>Type a value in the <span class="strong">Default Value</span> |
| field.</p> |
| </li> |
| <li> |
| <p>(Optional) Type a value in the <span class="strong">Suggested |
| Value</span> field.</p> |
| </li> |
| </ol> |
| </div> |
| <p></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><br> |
| </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> |
| </div> |
| |
| </body> |
| </html> |
