<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body link="#355491" alink="#4262a1" vlink="#355491" style="background: #e2e2e2; margin: 0; padding: 20px;">
<div>
<table cellpadding="0" bgcolor="#FFFFFF" border="0" cellspacing="0" style="border: 1px solid #dadada; margin-bottom: 30px; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border: solid 2px #ccc; background: #dadada; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tbody>
<tr>
<td bgcolor="#000000" valign="middle" height="58px" style="border-bottom: 1px solid #ccc; padding: 20px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px;">
<h1 style="color: #333333; font: bold 22px Arial, Helvetica, sans-serif; margin: 0; display: block !important;">
<!-- To have a header image/logo replace the name below with your img tag -->
<!-- Email clients will render the images when the message is read so any image -->
<!-- must be made available on a public server, so that all recipients can load the image. -->
<a href="http://community.jboss.org/index.jspa" style="text-decoration: none; color: #E1E1E1">JBoss Community</a></h1>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="font: normal 12px Arial, Helvetica, sans-serif; color:#333333; padding: 20px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;"><h3 style="margin: 10px 0 5px; font-size: 17px; font-weight: normal;">
JBoss Tools 3.2.0.GA JSF2 Composite Components Features
</h3>
<span style="margin-bottom: 10px;">
modified by <a href="http://community.jboss.org/people/dgolovin">Denis Golovin</a> in <i>JBoss Tools</i> - <a href="http://community.jboss.org/docs/DOC-16511">View the full document</a>
</span>
<hr style="margin: 20px 0; border: none; background-color: #dadada; height: 1px;">
<div class="jive-rendered-content"><p>JBoss Tools introduced JSF 2 Composite Component support in version 3.2.0.M1, it matured through several development versions and got a lot of useful features like:</p><ol style="margin-left: 0pt; padding-left: 30px; list-style-type: decimal;"><li>Content assist for component developers</li><li>Content assist for component users</li><li>Validation and quick fixes</li><li>Refactoring</li><li>Rendering in Visual Editor</li><li>Source Navigation<ul><li>in text editor by Ctrl+Right Mouse Button Click on hyperlink</li><li>in visual part by Double Mouse Click</li></ul></li></ol><h2>Prerequisites</h2><p>To check this out lets start from New JSF Project wizard and follow simple steps. Select <em>"Find JBoss Tools Web -> JSF -> JSF Project"</em> in New Dialog (see screenshot below)</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11402/screenshot1.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11402/399-350/screenshot1.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Then fill "Create JSF Project" step with name and select "JSF 2.0" in "JSF Environment"</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11403/screenshot2.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11403/400-326/screenshot2.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>On last step select Runtime Servlet Container and server to deploy your application to. Runtime is required, if you don't have one just create new.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11404/screenshot3.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11404/400-327/screenshot3.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>After Finish button's pressed new project appears in navigator. Its structure is shown below and it is reincarnation of JSF 1.2 KickStart project which is implemented using JSF 2 Composite Components.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11405/screenshot4.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11405/398-541/screenshot4.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>At runtime it should look in your browser like this</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11407/screenshot7.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11407/420-210/screenshot7.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Lets see what features JBoss Tools provides for JSF 2 Composite Components.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Rendering in Visual Editor</h2><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Visual Editor discovers composite components and it is able to render them. inputname.xhtml opened in xhtml editor looks almost the same (see picture below) as at runtime (see picture above)</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11419/screenshot5.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11419/600-650/screenshot5.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>greeting.xhtm does not use composite component to render greeting and this article is going to show how to do this using JBoss Tools features for composite components. We're going to replace greeting text rendering form greeting.xhtml with new demo:greeting component, which takes <em>demo.User</em> instance as attribute and render greeting the same way greeting.xhtml does.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Composite Component Wizard</h2><p>First, new composite component should be created using JBoss Tools XHTML New Wizard. Picture below show how to call XHTML New Wizard from Web Development Perspective.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11408/screenshot8.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11408/600-436/screenshot8.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Then in first step input component name as as shown below.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11409/screenshot9.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11409/400-413/screenshot9.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Select Use XHTL Template checkbox and JSF Composite Component from template list.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11410/screenshot10.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11410/400-410/screenshot10.png </span></a></p><h2>Content Assist</h2><p>After finishing in opened editor composite:interface and composite:implementation elements should be filed with template attributes and template content. Short description can be provided for composite:interface through shortDescription attribute, but is not used now by JBoss Tools.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11411/screenshot11.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11411/599-314/screenshot11.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>We are creating component to show greeting message for user, so we need to add attribute "user" to pass it to component. Content assist provides proposal list for all composite:interface children nodes. It also shows documentation in documentation hover for selected proposal.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11412/screenshot12.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11412/600-340/screenshot12.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Inserted attribute has cursor located inside quotation marks and that lets to type attribute name as "user" right after proposal is inserted.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11413/screenshot13.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11413/screenshot13.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Text editor provides content assist with help for attributes inside tags from composite component namespace.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11421/screenshot6.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11421/screenshot6.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Using this content assist it is easy to mark new greeting component attribute "user" as required and provide short description for it. For most attributes there are predefined values available through content assist like it is shown below for "required" attribute.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11422/screenshot7.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11422/screenshot7.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>After we're done with component's attribute definition it should look like this</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11414/screenshot14.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11414/597-82/screenshot14.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Implementation for greeting component is going to be simple, it looks almost the same as body definition in greeting.xhtml page. The diffrence is in using cc.attr to reference user attribute.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><pre class="jive-pre"><code class="jive-code jive-java">#<font color="navy">{</font>megs.greeting<font color="navy">}</font> #<font color="navy">{</font>cc.attrs.user.name<font color="navy">}</font>!
</code></pre><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Finished component in resources/demo/greeting.xhtml should look like it is shown below</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11423/screenshot8.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11423/screenshot8.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Full text for greeting component is here:</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><pre class="jive-pre"><code class="jive-code jive-xml"><!DOCTYPE html PUBLIC <span class="jive-xml-quote">-//W3C//DTD XHTML 1.0 Transitional//EN</span>
<span class="jive-xml-quote"><a class="jive-link-external-small" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a></span>>
<span class="jive-xml-tag"><span><html xmlns="</span><a class="jive-link-external-small" href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a><span>"
      xmlns:h="</span><a class="jive-link-external-small" href="http://java.sun.com/jsf/html" target="_blank">http://java.sun.com/jsf/html</a><span>"
      xmlns:composite="</span><a class="jive-link-external-small" href="http://java.sun.com/jsf/composite" target="_blank">http://java.sun.com/jsf/composite</a><span>"
      xmlns:f="</span><a class="jive-link-external-small" href="http://java.sun.com/jsf/core" target="_blank">http://java.sun.com/jsf/core</a><span>"
      xmlns:ui="</span><a class="jive-link-external-small" href="http://java.sun.com/jsf/facelets" target="_blank">http://java.sun.com/jsf/facelets</a><span>"></span></span>
<span class="jive-xml-tag"><head></span>
<span class="jive-xml-tag"><title></span>Not present in rendered output<span class="jive-xml-tag"></title></span>
<span class="jive-xml-tag"></head></span>
<span class="jive-xml-tag"><body></span>
<span class="jive-xml-tag"><composite:interface></span>
    <span class="jive-xml-tag"><composite:attribute name="user" required=""/></span>
<span class="jive-xml-tag"></composite:interface></span>
<span class="jive-xml-tag"><composite:implementation></span>
    #{megs.greeting} #{cc.attrs.user.name}!
<span class="jive-xml-tag"></composite:implementation></span>
<span class="jive-xml-tag"></body></span>
<span class="jive-xml-tag"></html></span>
</code></pre><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>To use new greeting component in greeting.xhtml page root html element should be extended with demo composite component namespace. Add namespace <strong><span>xmlns:ez="</span><a class="jive-link-external-small" href="http://java.sun.com/jsf/composite/demo" target="_blank">http://java.sun.com/jsf/composite/demo</a><span>"</span></strong> after xmlns:f namespce and save the file or new component is not going to be visible for content assist. After removing content of <ui:define name="body"> request content assist by Ctrl+Space and content assist proposal list with components from resources/demo directory appears.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11415/screenshot15.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11415/screenshot15.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Select ez:greeting completion proposal and it inserts composite component tag with all required attributes, for greeting component we've defined above it is going to be only user attribute</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11416/screenshot16.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11416/screenshot16.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>If optional attribute should be set use content assist for composite component attributes. For example for greeting component. which has only one attribute, content assist would look like </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11417/screenshot17.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11417/600-293/screenshot17.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>and it contains attributes with documentation hover filled with shortDescription text.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Validation</h2><p>JSF 2 Composite Components validator checks correctness of namespace declaration for component and each component from declared namespace. If <strong>demo</strong> component from examples above is renamed to <strong>demos</strong> like it is done on screenshot below</p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-16511-1-11398/screenshot-validation-1.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-16511-1-11398/450-224/screenshot-validation-1.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>then two warning markers are created for new file after it is saved.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-16511-1-11399/screenshot-validation-2.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-16511-1-11399/450-67/screenshot-validation-2.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Marker for namespace declaration provides Quick Fix to create a missing folder. If it is selected, demos folder is created in JSF 2 resources folder.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-16511-1-11400/screenshot-validation-3.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-16511-1-11400/450-300/screenshot-validation-3.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Marker for component from missing namespace also provides Quick Fix, which suggests to create component XHTML file.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/102-16511-1-11401/screenshot-validation-4.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/102-16511-1-11401/450-372/screenshot-validation-4.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>If Quick Fix for missing component is selected it reconstructs JSF 2 Composite Component based on tag name and attributes. It leaves implementation part of the component empty</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11418/screenshot4.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11418/screenshot4.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><h2>Refactoring</h2><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>Refactoring supported for renaming folders referenced in composite component URI and for renaming component XHTML files.</p><p>Lets imagine WebContent/resources/demo folder from our project is going to be renamed through Rename action in Package Explorer view. After new folder name is entered, Preview button is going to be activated and it shows that renaming of <strong>demo</strong> folder affects composite component URI in inputname.xhtml page.</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11434/screenshot23.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11434/screenshot23.png </span></a></p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p>For renaming actual component's xhtml files it suggests to update component names in affected files. On screenshot below it shows what happens when input.xhtml component is renamed in demo folder</p><p style="min-height: 8pt; height: 8pt; padding: 0px;"> </p><p><a href="http://community.jboss.org/servlet/JiveServlet/showImage/11435/screenshot22.png"><span> http://community.jboss.org/servlet/JiveServlet/downloadImage/11435/screenshot22.png </span></a></p></div>
<div style="background-color: #f4f4f4; padding: 10px; margin-top: 20px;">
<p style="margin: 0;">Comment by <a href="http://community.jboss.org/docs/DOC-16511">going to Community</a></p>
<p style="margin: 0;">Create a new document in JBoss Tools at <a href="http://community.jboss.org/choose-container!input.jspa?contentType=102&containerType=14&container=2128">Community</a></p>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>