[richfaces-svn-commits] JBoss Rich Faces SVN: r9527 - in trunk/docs/cdkguide/en/src/main: resources/images and 1 other directory.

Author: artdaw Date: 2008-07-11 09:15:31 -0400 (Fri, 11 Jul 2008) New Revision: 9527 Added: trunk/docs/cdkguide/en/src/main/resources/images/protoui.png Modified: trunk/docs/cdkguide/en/src/main/docbook/includes/protoui.xml Log: http://jira.jboss.com/jira/browse/RF-3692 - 'Creating a UI prototype' section was added Modified: trunk/docs/cdkguide/en/src/main/docbook/includes/protoui.xml =================================================================== --- trunk/docs/cdkguide/en/src/main/docbook/includes/protoui.xml 2008-07-11 11:42:27 UTC (rev 9526) +++ trunk/docs/cdkguide/en/src/main/docbook/includes/protoui.xml 2008-07-11 13:15:31 UTC (rev 9527) @@ -6,12 +6,56 @@ <keyword>proptotype</keyword> <keyword>UI</keyword> <keyword>CDK</keyword> - <keyword>Guide</keyword> + <keyword>Guide</keyword> </keywordset> </sectioninfo> -<title>Creating a UI prototype</title> -<para> -UI prototype -</para> -</section> - + <title>Creating a UI prototype</title> + <para> It is a good idea to first create a prototype of the intended markup. You will find out + which markup elements the component has to generate and also which renderer-specific + attributes are needed in order to parameterize the generated markup. </para> + <para> The <emphasis role="bold"> + <property>&lt;inputDate&gt;</property> + </emphasis> component consists of an HTML form <code><![CDATA[<input>]]></code> element, an + <code><![CDATA[<img>]]></code> element, and <code><![CDATA[<div>]]></code> element: </para> + <programlisting role="XML"><![CDATA[... +<div title="Date Field Component"> + <input name="dateField" value="01 January 2008" /> + <img class="overlay" src="inputDateOverlay.gif" /> +</div> +...]]> + </programlisting> + <para> As it is shown in the listing above there are three HTML attributes - <emphasis> + <property>&quot;title&quot;</property> + </emphasis>, <emphasis> + <property>&quot;name&quot;</property> + </emphasis>, and <emphasis> + <property>&quot; value&quot;</property> + </emphasis> - are needed to be parameterize the generated markup. </para> + <para> + You map the HTML attributes to the corresponding <code>UIComponent</code> attributes: + </para> + <programlisting role="XML"><![CDATA[... +<div title="[title]"> + <input name="[clientID]" value="[converted value]" /> + <img class="overlay" src="inputDateOverlay.gif" /> +</div> +...]]> + </programlisting> + <para> + All information about styles applied to the <emphasis role="bold"> + <property>&lt;inputDate&gt;</property> + </emphasis> component is considered in the following chapter. + </para> + <para> + This is the result of your prototype which shows a simple page with an input field and an icon indicates that + this is a date field: + </para> + <figure> + <title>The date field component prototype implemented in HTML with an icon</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/protoui.png"/> + </imageobject> + </mediaobject> + </figure> +</section> Added: trunk/docs/cdkguide/en/src/main/resources/images/protoui.png =================================================================== (Binary files differ) Property changes on: trunk/docs/cdkguide/en/src/main/resources/images/protoui.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream