<?xml version="1.0" encoding="UTF-8"?>
<section id="protoui" xreflabel="protoui">
    <?dbhtml filename="protoui.html"?>
    <sectioninfo>
        <keywordset>
            <keyword>proptotype</keyword>
            <keyword>UI</keyword>
            <keyword>CDK</keyword>
            <keyword>Guide</keyword>
        </keywordset>
    </sectioninfo>
    <title>Creating a UI prototype</title>
    <para> It is a good idea to create at first 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.png" />
</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.png" />
</div>
...]]>
    </programlisting>
    -->
    <para>
        All information about styles applied to the <emphasis role="bold">
            <property>&lt;inputDate&gt;</property>
        </emphasis> component is provided  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 indicating that 
        this is a date field:
    </para>
    <figure>
        <title>The date field component prototype implementation in HTML with an icon</title>
        <mediaobject> 
            <imageobject>
                <imagedata fileref="images/protoui.png"/>
            </imageobject>
        </mediaobject>
    </figure>
</section>