Author: artdaw Date: 2008-08-07 08:02:53 -0400 (Thu, 07 Aug 2008) New Revision: 9968 Added: trunk/docs/cdkguide/en/src/main/resources/images/lifecycle.png Modified: trunk/docs/cdkguide/en/src/main/docbook/includes/rendererbase.xml trunk/docs/cdkguide/en/src/main/docbook/includes/template.xml Log: https://jira.jboss.org/jira/browse/RF-3692 -Creating a Renderer chapter was fixed. Modified: trunk/docs/cdkguide/en/src/main/docbook/includes/rendererbase.xml =================================================================== --- trunk/docs/cdkguide/en/src/main/docbook/includes/rendererbase.xml 2008-08-07 10:13:56 UTC (rev 9967) +++ trunk/docs/cdkguide/en/src/main/docbook/includes/rendererbase.xml 2008-08-07 12:02:53 UTC (rev 9968) @@ -14,15 +14,11 @@ After the component tree is restored on the <property>Restore View Phase </property>, each component in the tree extracts its new value from the request parameters by using its <code>decode()</code> method. Then the value is stored locally on the component. + So in the <code>InputDateRendererBase</code> class you need to override + the <code>decode()</code> method: </para> - <para> - The <code>InputDateRendererBase</code> class extends a <code>HeaderResourcesRendererBase</code> - class. In the <code>HeaderResourcesRendererBase</code> class all the <code>encode()</code> methods for - the right resources encoding - are already realized, so in the <code>InputDateRendererBase</code> class you need to override - the <code>decode()</code> method only: - </para> -<programlisting role="JAVA"><![CDATA[ public void decode(FacesContext context, UIComponent component){ +<programlisting role="JAVA"><![CDATA[ ... +public void decode(FacesContext context, UIComponent component){ ExternalContext external = context.getExternalContext(); Map requestParams = external.getRequestParameterMap(); UIInputDate inputDate = (UIInputDate)component; @@ -32,7 +28,7 @@ inputDate.setSubmittedValue(submittedValue); } } -]]></programlisting> +...]]></programlisting> <para> As you see in the example above the <code>decode()</code> method reads values from request parameters, grabs the <code>clientId</code> from the component to identify the request parameter to be looked up. @@ -69,10 +65,10 @@ and queued on <property>FacesContext</property>. </para> <para> - The <code>getConverter()</code> method of the <code>InputDateRendererBase</code> class controls - the conversion of entered values, as shown in the following example: + The <code>getConverter()</code> method of the <code>InputDateRendererBase</code> class returns the a converter, as shown in the following example: </para> -<programlisting role="JAVA"><![CDATA[private Converter getConverter(FacesContext context, UIInputDate inputDate){ +<programlisting role="JAVA"><![CDATA[... +private Converter getConverter(FacesContext context, UIInputDate inputDate){ Converter converter = inputDate.getConverter(); if (converter == null){ // default the converter @@ -86,10 +82,10 @@ } return converter; } -]]></programlisting> +...]]></programlisting> <para> - At first you should check whether the application developer has attached a <property>Converter</property> to the - <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component + During the converter creation you should check whether the application developer has attached a <property>Converter</property> to the + <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component already (for example, <emphasis role="bold"><property>&lt;f:convertDateTime&gt;</property></emphasis>) . If not you should follow the next steps: </para> @@ -108,8 +104,8 @@ <listitem> <para> set the time zone, date type, date style, and date pattern on the new converter with the help of - <code>setTimeZone</code>, <code>setType</code>, <code>setDateStyle</code>, and - <code>setPattern</code> methods respectively + <code>setTimeZone()</code>, <code>setType()</code>, <code>setDateStyle()</code>, and + <code>setPattern()</code> methods respectively </para> </listitem> <listitem> @@ -134,22 +130,24 @@ <para> Here is the snippet: </para> -<programlisting role="JAVA"><![CDATA[public Object getConvertedValue(FacesContext context, UIComponent component, Object submittedValue) throws ConverterException{ +<programlisting role="JAVA"><![CDATA[... +public Object getConvertedValue(FacesContext context, UIComponent component, Object submittedValue) throws ConverterException{ UIInputDate inputDate = (UIInputDate)component; Converter converter = getConverter(context, inputDate); String valueString = (String)submittedValue; return converter.getAsObject(context, component, valueString); -}]]></programlisting> +} +...]]></programlisting> <para> Finally on the the <property>Renderer Response</property> phase the value of the component is rendered back to the view. The converter is responsible for transforming the object data back in to a string representation, so you need to - implement <code>getValueAsString</code>. - JSF calls the <code>getAsString</code> method of your <property>Converter</property> which converts an Object into a String. + implement <code>getValueAsString()</code> method: </para> <para> Here is the example: </para> - <programlisting role="JAVA"><![CDATA[protected String getValueAsString(FacesContext context, UIComponent component) throws IOException { + <programlisting role="JAVA"><![CDATA[... +protected String getValueAsString(FacesContext context, UIComponent component) throws IOException { UIInputDate inputDate = (UIInputDate) component; String valueString = (String) inputDate.getSubmittedValue(); if (valueString == null) { @@ -160,7 +158,8 @@ } } return valueString; -}]]></programlisting> +} +...]]></programlisting> </section> <para> You could find the whole example of the <code>InputDateRendererBase</code> class <ulink url="examples/InputDateRendererBase.java">here</ulink>. Modified: trunk/docs/cdkguide/en/src/main/docbook/includes/template.xml =================================================================== --- trunk/docs/cdkguide/en/src/main/docbook/includes/template.xml 2008-08-07 10:13:56 UTC (rev 9967) +++ trunk/docs/cdkguide/en/src/main/docbook/includes/template.xml 2008-08-07 12:02:53 UTC (rev 9968) @@ -55,6 +55,22 @@ <emphasis><property>&quot;id&quot;</property></emphasis> attributes and with the<emphasis><property>&quot;caption&quot;</property></emphasis> facet </para> + <programlisting role="XML"><![CDATA[... +<c:object var="caption" type="javax.faces.component.UIComponent"/> +<jsp:scriptlet> + caption = component.getFacet("caption"); + if(caption !=null && caption.isRendered()) { +</jsp:scriptlet> +<div id="#{clientId}_caption" class="my-inputDate-caption #{component.attributes['captionClass']}"> + <f:insertComponent value="#{caption}"/> +</div> +<jsp:scriptlet> + } +</jsp:scriptlet> +<div id="#{clientId}" title="#{value}" x:passThruWithExclusions="value,name,type,id"> + ... +</div> +...]]></programlisting> </listitem> <listitem> <para> @@ -64,23 +80,49 @@ <emphasis><property>&quot;name&quot;</property></emphasis>, <emphasis><property>&quot;type&quot;</property></emphasis>, <emphasis><property>&quot;class&quot;</property></emphasis>, -<emphasis><property>&quot;style&quot;</property></emphasis> attributes and with -the <emphasis><property>&quot;icon&quot;</property></emphasis> facet used to define an icon of the component. +<emphasis><property>&quot;style&quot;</property></emphasis> attributes. +It is possible to use the <emphasis><property>&quot;icon&quot;</property></emphasis> facet in order to redefine a default icon of the component. </para> + <programlisting role="XML"><![CDATA[... +<input id="#{clientId}" + name="#{clientId}" + type="text" + value="#{this:getValueAsString(context, component)}" + class="my-inputDate-input #{component.attributes['inputClass']}" + style="#{component.attributes['inputStyle']}"/> +...]]></programlisting> </listitem> <listitem> <para> <emphasis role="bold"><property>&lt;img&gt;</property></emphasis> element with <emphasis><property>&quot;src&quot;</property></emphasis>, <emphasis><property>&quot;class&quot;</property></emphasis>, -<emphasis><property>&quot;style&quot;</property></emphasis> attributes. +<emphasis><property>&quot;style&quot;</property></emphasis> attributes which defines a default icon of the component. + In order to add an image to the Template you should register it with the help of + <emphasis role="bold"><property>&lt;f:resource&gt;</property></emphasis> template tag + and bind to a variable specified by the <emphasis><property>&quot;var&quot;</property></emphasis> attribute: </para> + <programlisting role="XML"><![CDATA[... +<f:resource name="/org/mycompany/renderkit/html/images/inputDate.png" var="icon" /> + ... +<img src="#{icon}" class="my-inputDate-icon #{component.attributes['iconClass']}" style="#{component.attributes['iconStyle']}"/> +...]]></programlisting> </listitem> </itemizedlist> <para> The <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component uses styles and scripts that should be defined in the template with the help of <emphasis role="bold"><property>&lt;h:styles&gt;</property></emphasis> and - <emphasis role="bold"><property>&lt;h:scripts&gt;</property></emphasis> tags. How to register all resources is explained in the + <emphasis role="bold"><property>&lt;h:scripts&gt;</property></emphasis> tags: +</para> + <programlisting role="XML"><![CDATA[... +<h:scripts> + new org.ajax4jsf.javascript.PrototypeScript(), + /org/mycompany/renderkit/html/scripts/inputDate.js +</h:scripts> +<h:styles>/org/mycompany/renderkit/html/css/inputDate.xcss</h:styles> +...]]></programlisting> +<para> + How to register all resources is explained in the <property>&quot;Component resources registration&quot;</property> chapter. </para> <important> @@ -109,12 +151,13 @@ <note> <title>Note:</title> <para> - In the <property>Template Skeleton</property> Renderer Baseclass is <code>org.ajax4jsf.renderkit.AjaxComponentRendererBase</code>, but - you need to define Renderer Baseclass special for <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component. - In the next section <link linkend="rendererbase">&quot;Creating a Renderer Base class&quot;</link> we will define Renderer Baseclass <code>org.mycompany.renderkit.InputDateRendererBase</code>. + As is easy to see, in the <property>Template Skeleton</property> the Renderer Baseclass is <code>org.ajax4jsf.renderkit.AjaxComponentRendererBase</code>. + You need to define Renderer Base class special for the <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component. + In the next section <link linkend="rendererbase">&quot;Creating a Renderer Base class&quot;</link> + we will create Renderer Base class <code>org.mycompany.renderkit.InputDateRendererBase</code>. </para> </note> <para> All the Template tags you could find in the <property>&quot;Template tags overview&quot;</property> chapter. </para> - </section> + </section> \ No newline at end of file Added: trunk/docs/cdkguide/en/src/main/resources/images/lifecycle.png =================================================================== (Binary files differ) Property changes on: trunk/docs/cdkguide/en/src/main/resources/images/lifecycle.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream