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><inputDate></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>"title"</property>
+ </emphasis>, <emphasis>
+ <property>"name"</property>
+ </emphasis>, and <emphasis>
+ <property>" value"</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><inputDate></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