h3. DateSpinner
The DateSpinner component uses a mobility-designed date selection component and is rendered depending on whether the mobile operating system is using iOS5 or not. If the device is running iOS5, then the inherent date selection component is used (so for iPhone, iPad running iOS5) the native dateSelection will be used (html5 input tag with type="date"). If iOS5 is not detected, then the <mobi:dateSpinner/> component renders a mobility designed non-browser solution which with popup selector, styled with <mobi:deviceStyleSheet/>.
{note}
Each device will popup the correct entry spinner that is styled as per the device; Jsf validation and conversion is supported. The non-iOS5 version will actually have built-in conversion for date, so as long as the default pattern of 'yyyy-MM-dd' is used, then no <f:convertDateTime pattern="yyyy-MM-dd" /> tag is required.
The developer will have to know what platforms they are creating applications for in that some of these options are not applicable to the iOS5 supported inherent selection.
{note}
h3. Usage
h4. How to use.
If using iOS5 only
{code}
<mobi:dateSpinner value="#{dateBean.someDate}"
<f:convertDateTime pattern="yyyy-MM-dd" timezone="MST"/>
</mobi:dateSpinner>
{code}
h4. Using single submit
{code}
<mobi:inputText value="#{input.someNumber}"
type="text" singleSubmit="true"
placeholder="#{input.placeholder}"
title="number from popup number menu"/>
{code}
h4. Using password/inputSecret
{code}
<mobi:inputText id="passwordInput" type="password"
placeholder="Password input"
value="#{input.password}">
<f:validateLength minimum="6" maximum="8"/>
</mobi:inputText>
{code}
h4. Using text area
{code}
<mobi:inputText value="#{input.textField}"
type="textarea" placeholder="#{input.placeholder}"
rows="3" cols="40" title="inputText field"/>
{code}
h3. Attributes
Each type will have it's own set of attributes which will be passed through the renderer and applied to the browser to render using HTML5 markup encoding. Since the password and text example both are type='text" they will have the same list of attributes. The textarea has it's own set and their exists a common subset of attributes at this time. As more "types" are implemented, they will each have their own unique set of attributes and share these common ones. The jsf support comes in the ability to use jsf validation and conversion. ICEfaces then allows the ability to submit the field via ajax (singleSubmit) or the traditional (whole form) approach.
h4. Common Attributes
{panel}
*readonly* *disabled
{panel}
*singleSubmit* if true, submits itself (element) and triggers a full page response using the ICEfaces dom-diff algorithm (in other words, only what has changed on the view page). If false, then the field is not submitted until the form is. ** Note that with the various popup widgets, this isn't necessarily working for all browsers/devices. It is unclear as to whether it is even desirable at this time. Will see what users/developers want first before complete implementation.
{panel}
h4. For non-iOS5 only
{panel}{*}yearStart* the year to start inclusion of the year selector, default = 1980
{panel}
{panel}{*}yearEnd* the year to end inclusion of the year selector, default = 2020
{panel}
{panel}{*}pattern* for built in conversion so convertDateTime tag not required for this component, default = 'yyyy-MM-dd' to make it same as default pattern for built-in iOS5 date selector. Supported patterns include dd/MM/yyyy, MM-dd-yyyy, dd-MM-yyyy, yyyy-MM-dd, yyyy-dd-MM
{panel}
{panel}{*}timeZone* for built in conversion so convertDateTime tag not required for this component
{panel}
{panel}{*}locale* for built in conversion so convertDateTime tag not required for this component
{panel}
h4. For iOS5 only
{panel}{*}cols* number of columns for textarea for initial render
{panel}
{panel}{*}rows* number of rows for textarea
{panel}
{panel}{*}wrap* wrap the text if get to end of textarea
{panel}
The DateSpinner component uses a mobility-designed date selection component and is rendered depending on whether the mobile operating system is using iOS5 or not. If the device is running iOS5, then the inherent date selection component is used (so for iPhone, iPad running iOS5) the native dateSelection will be used (html5 input tag with type="date"). If iOS5 is not detected, then the <mobi:dateSpinner/> component renders a mobility designed non-browser solution which with popup selector, styled with <mobi:deviceStyleSheet/>.
{note}
Each device will popup the correct entry spinner that is styled as per the device; Jsf validation and conversion is supported. The non-iOS5 version will actually have built-in conversion for date, so as long as the default pattern of 'yyyy-MM-dd' is used, then no <f:convertDateTime pattern="yyyy-MM-dd" /> tag is required.
The developer will have to know what platforms they are creating applications for in that some of these options are not applicable to the iOS5 supported inherent selection.
{note}
h3. Usage
h4. How to use.
If using iOS5 only
{code}
<mobi:dateSpinner value="#{dateBean.someDate}"
<f:convertDateTime pattern="yyyy-MM-dd" timezone="MST"/>
</mobi:dateSpinner>
{code}
h4. Using single submit
{code}
<mobi:inputText value="#{input.someNumber}"
type="text" singleSubmit="true"
placeholder="#{input.placeholder}"
title="number from popup number menu"/>
{code}
h4. Using password/inputSecret
{code}
<mobi:inputText id="passwordInput" type="password"
placeholder="Password input"
value="#{input.password}">
<f:validateLength minimum="6" maximum="8"/>
</mobi:inputText>
{code}
h4. Using text area
{code}
<mobi:inputText value="#{input.textField}"
type="textarea" placeholder="#{input.placeholder}"
rows="3" cols="40" title="inputText field"/>
{code}
h3. Attributes
Each type will have it's own set of attributes which will be passed through the renderer and applied to the browser to render using HTML5 markup encoding. Since the password and text example both are type='text" they will have the same list of attributes. The textarea has it's own set and their exists a common subset of attributes at this time. As more "types" are implemented, they will each have their own unique set of attributes and share these common ones. The jsf support comes in the ability to use jsf validation and conversion. ICEfaces then allows the ability to submit the field via ajax (singleSubmit) or the traditional (whole form) approach.
h4. Common Attributes
{panel}
*readonly* *disabled
{panel}
*singleSubmit* if true, submits itself (element) and triggers a full page response using the ICEfaces dom-diff algorithm (in other words, only what has changed on the view page). If false, then the field is not submitted until the form is. ** Note that with the various popup widgets, this isn't necessarily working for all browsers/devices. It is unclear as to whether it is even desirable at this time. Will see what users/developers want first before complete implementation.
{panel}
h4. For non-iOS5 only
{panel}{*}yearStart* the year to start inclusion of the year selector, default = 1980
{panel}
{panel}{*}yearEnd* the year to end inclusion of the year selector, default = 2020
{panel}
{panel}{*}pattern* for built in conversion so convertDateTime tag not required for this component, default = 'yyyy-MM-dd' to make it same as default pattern for built-in iOS5 date selector. Supported patterns include dd/MM/yyyy, MM-dd-yyyy, dd-MM-yyyy, yyyy-MM-dd, yyyy-dd-MM
{panel}
{panel}{*}timeZone* for built in conversion so convertDateTime tag not required for this component
{panel}
{panel}{*}locale* for built in conversion so convertDateTime tag not required for this component
{panel}
h4. For iOS5 only
{panel}{*}cols* number of columns for textarea for initial render
{panel}
{panel}{*}rows* number of rows for textarea
{panel}
{panel}{*}wrap* wrap the text if get to end of textarea
{panel}