Dear Wiki user, You have subscribed to a wiki page or wiki category on "Shale Wiki" for change notification.
The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial ------------------------------------------------------------------------------ </symbols>[[BR]] </component>[[BR]] + As we can see we have a section named âsymbolsâ, Here we instruct Clay what to substitute the symbols with. In this case we have made some defaults to substitute in and the will be used unless we override them when defining a specific page. Now that we have a template to work with the work of creating specific pages start. Since we for now only want to replace the content part (defined by the symbol bodyContent) and the page title, we only need to create those parts. We now need to let Clay know about these. To tell Clay how to build our specifi pages we do that in the clay-views.xml file. If we open this file, we will find several page definitions: + + <component jsfid="/page1.jsf" extends="baseLayout">[[BR]] + <symbols>[[BR]] + <set name="title" value="Page 1" />[[BR]] + <set name="bodyContent" value="/pages/page1Body.html" />[[BR]] + </symbols>[[BR]] + </component> + <component jsfid="/page2.jsf" extends="baseLayout">[[BR]] + <symbols>[[BR]] + <set name="title" value="Page 2" />[[BR]] + <set name="bodyContent" value="/pages/page2Body.html" />[[BR]] + </symbols>[[BR]] + </component> + <component jsfid="/page3.jsf" extends="baseLayout">[[BR]] + <symbols>[[BR]] + <set name="title" value="Page 3" />[[BR]] + <set name="bodyContent" value="/pages/page3Body.html" />[[BR]] + </symbols>[[BR]] + </component>[[BR]] + + Here we define 3 components that inherit from our basecomponent âbaseLayoutâ. As we mentioned we override the definitions of the title and bodyContent. We have now created 3 components based on a common template, but where the title and content vary. If we now look at for instance page1Body.html: + + <h3>[[BR]] + <span jsfid="outputText" value="#{messages['content.title.page1']}" allowBody="false">Clay template application - Page 1</span>[[BR]] + </h3>[[BR]] + <p>[[BR]] + <span jsfid="outputText" value="#{messages['content.message.page1']}" allowBody="false">This is Page 1 content</span>[[BR]] + </p>[[BR]] + + then we see that we refer to the jsfid âoutputTextâ. This is one of the standard predefined Clay components that we can utilize. Itâs purpose is to output text. Further we refer to â#{messages['content.message.page1']}. This is a reference to a âmanaged-beanâ named messages. This is a bean that Shale will instantiate for us, If you open the faces-config.xml file you will find this at the bottom: + + <!-- Make resources available to the pages by defining it here (in a page use messages['propertyname'] as value -->[[BR]] + <managed-bean>[[BR]] + <managed-bean-name>messages</managed-bean-name>[[BR]] + <managed-bean-class>[[BR]] + org.apache.shale.util.LoadBundle[[BR]] + </managed-bean-class>[[BR]] + <managed-bean-scope>application</managed-bean-scope>[[BR]] + <managed-property>[[BR]] + <property-name>basename</property-name>[[BR]] + <value>[[BR]] + ResourceBundle[[BR]] + </value>[[BR]] + </managed-property>[[BR]] + </managed-bean>[[BR]] + + Here we define the messages bean. In the this case it is a special purpose Shale bean. It purpose it to make available to us a resourcebundle that we have created. The name of that is ResourceBundle.properties. You will find it the folder src/main/resources. This bean is available application wide (given by the scope section). It supports internationalization (I18N), so we can have several versions of the file where the are unique by their extension (_en, _no etc.). + + Another attribute to note is âallowBodyâ. This attribute tells Clay whether or not to include any content within this tags body or not. Another way to achieve the same is through the Clay meta information <!-- ### clay:remove ### --> <!-- ### /clay:remove ### -->. One of the nice things about this that we can have mock content on a page so that during design time w eget the full picture, and then have it removed during runtime so that it does not interfere with the actual content (Open the page in a browser to see this effect). + + If we more on and look at the second page (/page2.jsf) and its content (pageBody2.html) we see that we have used more of Clays functionalities. + + <h3>[[BR]] + <span jsfid="outputText" value="#{messages['content.title.page2']}" allowBody="false">Clay template application - Page 2</span>[[BR]] + </h3>[[BR]] + <p>[[BR]] + <span jsfid="outputText" value="#{messages['content.message.page2']}" allowBody="false">This is Page 2 content</span>[[BR]] + </p>[[BR]] + <span jsfid="form">[[BR]] + <table>[[BR]] + <tbody>[[BR]] + <tr>[[BR]] + <th>[[BR]] + <span jsfid="outputText" value="#{messages['name.label']}" allowBody="false">Please enter your name</span>[[BR]] + </th>[[BR]] + <td>[[BR]] + <input id="name" type="text" size="40" maxlength="50" value="[EMAIL PROTECTED]"/>[[BR]] + </td>[[BR]] + </tr>[[BR]] + <tr>[[BR]] + <td colspan="2">[[BR]] + <input type="submit" action="[EMAIL PROTECTED]" value="#{messages['page2.button.label']}">[[BR]] + </td>[[BR]] + </tr>[[BR]] + </tbody>[[BR]] + </table>[[BR]] + </span>[[BR]] + + Here we see that we no longer only use the SPAN convenience tag, but the INPUT tag instead. Clay has 11 implicitly mapped tags. Those are html tags that it will check to see if they have been annotated with Clay attributes: + + + 1. <a> </a>[[BR]] + 2. <form> </form>[[BR]] + 3. <input type=text>[[BR]] + 4. <input type=checkbox>[[BR]] + 5. <input type=radio>[[BR]] + 6. <input type=submit>[[BR]] + 7. <label> </label>[[BR]] + 8. <select> </select>[[BR]] + 9. <select multiple> </select>[[BR]] + 10. <option>[[BR]] + 11. <textarea> </textarea>[[BR]] +
