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.
The
<inputDate>
component consists of an HTML form <input> element, an
<img> element, and <div> element:
...
<div title="Date Field Component">
<input name="dateField" value="01 January 2008" />
<img class="overlay" src="inputDateOverlay.png" />
</div>
...
As it is shown in the listing above there are three HTML attributes - "title" , "name" , and "value" - are needed to be parameterize the generated markup.
You map the HTML attributes to the corresponding UIComponent attributes:
...
<div title="[title]">
<input name="[clientID]" value="[converted value]" />
<img class="overlay" src="inputDateOverlay.png" />
</div>
...
All information about styles applied to the <inputDate> component is considered in the following chapter.
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:
