InputText Component

compared with
Version 8 by Steve Maryka
on Dec 13, 2012 23:43.


Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 0 changes. View first change.

 h3. InputText
  
 Based upon HTML5 input tag, there are a lot of variations that are available for components. Because of consistency across browsers and devices a subset of these variations is supported. This component is styled for each supported device with the <mobi:deviceStylesheet/> component and has <mobi:ajax /> support
  
 {note}
  
 Each device will popup the correct keyboard for the "type".&nbsp; Jsf validation and conversion is supported.
  
  
 {note}
  
  
 h3. Usage
  
 h4. Straight text field
  
 {code}
 <mobi:inputText value="#{input.someText}"
  type="text"
  placeholder="#{input.placeholder}"
  title="basic text input"/>
 {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}
 *type* for now just "text", "number", "password" and "textarea" are supported as of this release. "text" is default.
 {panel}
 {panel}
 *placeholder* rather than using tooltips, the placeholder will display directly in the input field allowing developers to give hints as to what the user can use as entries
 {panel}
 {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.
 {panel}
 {panel}{*}tabindex* standard jsf support
 {panel}
 {panel}{*}maxlength* maximum length to display the field
 {panel}
  
 h4. For type="text" only
  
 {panel}{*}autocomplete* not implemented in html5 yet on most browsers so not that useful
 {panel}
 {panel}{*}pattern* at this point, will actually see the pattern in display as placeholder in some browsers
 {panel}
  
 h4. For type="textarea" 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}
  
 h3. Tag Documentation
 [inputText|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/inputText.html]

© Copyright 2017 ICEsoft Technologies Canada Corp.