1_InputSecret_from_old
TOCSTART
TOCEND
|
The InputSecret component supports all of the features of the standard JSF InputSecret component and extends it with some additional features like rollover, focused styles, prompt text (is displayed when component's value is empty) and etc. |
<h4><a name="InputSecret2.x%28Incomplete%29-KeyFeatures"></a>Key Features</h4>
<ul>
<li><a href="#InputSecret2.x%28Incomplete%29-BasicConfiguration">All features of the standard InputSecret component</a></li>
<li><span class="error">[Changing chars of password field]</span></li>
<li><span class="error">[Typing password like in Android and IPhone]</span></li>
<li><span class="error">[Showing and hiding entered password]</span></li>
<li><span class="error">[Generating of password]</span></li>
<li><a href="#InputSecret2.x%28Incomplete%29-prompttext">Displaying prompt text</a></li>
<li><a href="#InputSecret2.x%28Incomplete%29-CustomizingStyles">Extended styling</a></li>
</ul>
<h4><a name="InputSecret2.x%28Incomplete%29-BasicConfiguration"></a>Basic Configuration</h4>
<p>The <cite>InputSecret</cite> component can be added to a page using the <font color="gray"><o:inputSecret></font> tag. This tag is just an extended version of the standard <font color="gray"><h:inputSecret></font> tag. Therefore, you can safely replace the standard InputSecret components with OpenFaces InputSecret components which gives you an additional functionality. Just like in the standard <font color="gray"><h:inputSecret></font> the <font color="orange">value</font> attribute lets you specify the current value of the component.</p>
<p>The following example shows a definition of the <cite>InputSecret</cite> with the <font color="orange">value</font> attribute.</p>
<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<o:inputSecret value="#{InputSecretBean.password}" />
</div></div>
<p><a name="InputSecret2.x%28Incomplete%29-prompttext"></a><br>
You can declare the <font color="orange">promptText</font> attribute if you'd like to display an auxiliary text when text field's value is empty. Here is an example:</p>
<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<o:inputSecret value="#{InputSecretBean.password}" promptText="Password"/>
</div></div>
<p>And here is the result:</p>
<p><span class="image-wrap" style=""><img src="/download/attachments/2982196/promptText.gif?version=1&modificationDate=1354202301628" style="border: 0px solid black"></span></p>
<p>Once you focus this component, the prompt text disappears for you to enter the text. If you leave the text field without entering the text, the prompt will be displayed again.</p>
<p>You can also specify a custom style for the prompt text as described below.</p>
<h4><a name="InputSecret2.x%28Incomplete%29-LayoutConfiguration"></a>Layout Configuration</h4>
<p>If you don't like bullets in password field, you can use the <font color="orange">replacement</font> attribute for setting your custom chars instead of bullets.</p>
<p>Here are a few examples:</p>
<p><span class="image-wrap" style=""><img src="/download/attachments/2982196/sharp.gif?version=1&modificationDate=1354202898923" style="border: 0px solid black"></span></p>
<p><span class="image-wrap" style=""><img src="/download/attachments/2982196/star.gif?version=1&modificationDate=1354203159011" style="border: 0px solid black"></span></p>
<h4><a name="InputSecret2.x%28Incomplete%29-CustomizingStyles"></a>Customizing Styles</h4>
<p>You can apply styles for the <cite>InputSecret</cite> component when it's in a normal, focused or rollover state.</p>
<p>The table below lists all style attributes:</p>
<div class="table-wrap">
<table class="confluenceTable"><tbody>
<tr>
<th class="confluenceTh"> Attribute </th>
<th class="confluenceTh"> Description </th>
</tr>
<tr>
<td class="confluenceTd"> <font color="orange">style</font> and <font color="orange">styleClass</font> </td>
<td class="confluenceTd"> A style applied to the entire <cite>InputSecret</cite> component. </td>
</tr>
<tr>
<td class="confluenceTd"> <font color="orange">rolloverStyle</font> and <font color="orange">rolloverClass</font> </td>
<td class="confluenceTd"> A style applied to the <cite>InputSecret</cite> component in the rollover state. </td>
</tr>
<tr>
<td class="confluenceTd"> <font color="orange">focusedStyle</font> and <font color="orange">focusedClass</font> </td>
<td class="confluenceTd"> A style applied to the <cite>InputSecret</cite> component when it is focused. </td>
</tr>
<tr>
<td class="confluenceTd"> <font color="orange">promptTextStyle</font> and <font color="orange">promptTextClass</font> </td>
<td class="confluenceTd"> A style applied to the prompt text. </td>
</tr>
</tbody></table>
</div>
<p>The following example demonstrates the usage of style-related attributes of the <cite>InputSecret</cite> component:
<br class="atl-forced-newline"></p>
<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<o:InputSecret id="styledInputSecret" style="background: beige; border: 2px solid brown; color: brown; font-weight: bold;" promptText="Password" promptTextStyle="font-style: italic; color: #7e7e7e;" focusedStyle="border: 2px solid orange;"/>
</div></div>
<p>And here is the result:</p>
<p><span class="image-wrap" style=""><img src="/download/attachments/2982196/promptTextStyle.gif?version=1&modificationDate=1354205665676" style="border: 0px solid black"></span></p>
<p>When the user is typing the value, this style is changed to the following:</p>
<p><span class="image-wrap" style=""><img src="/download/attachments/2982196/inputSecrettStyle.gif?version=1&modificationDate=1354205720107" style="border: 0px solid black"></span></p>
<h4><a name="InputSecret2.x%28Incomplete%29-ServerSideEventListeners"></a>Server-Side Event Listeners</h4>
<p>Given that the <cite>InputSecret</cite> component is a <cite>UIInput</cite> component, it can fire <tt>javax.faces.event.ValueChangeEvent</tt> just like any other <cite>UIInput</cite> component does. To handle a value change event on the server side, the <font color="orange">valueChangeListener</font> attribute should be used in the same way as for the <cite>HTML InputSecret</cite> component. You can also add a value change listener to the component by using the <font color="gray"><f:valueChangeListener></font> tag.</p>
<h4><a name="InputSecret2.x%28Incomplete%29-ClientSideEvents"></a>Client-Side Events</h4>
<p>The <cite>InputSecret</cite> component supports a set of standard client-side events such as <font color="orange">onclick</font>, <font color="orange">ondblclick</font>, <font color="orange">onmousedown</font>, <font color="orange">onmouseover</font>, <font color="orange">onmouseup</font>, <font color="orange">onmouseout</font>, <font color="orange">onmousemove</font>, <font color="orange">onselect</font>, <font color="orange">onchange</font>, <font color="orange">onfocus</font>, <font color="orange">onblur</font>, <font color="orange">onkeyup</font>, <font color="orange">onkeydown</font>, <font color="orange">onkeypress</font>.</p>
<h4><a name="InputSecret2.x%28Incomplete%29-ClientSideAPI"></a>Client-Side API</h4>
<p>All client-side API methods for the <cite>InputSecret</cite> component are listed in the following table:</p>
<div class="table-wrap">
<table class="confluenceTable"><tbody>
<tr>
<th class="confluenceTh"> Method </th>
<th class="confluenceTh"> Description </th>
</tr>
<tr>
<td class="confluenceTd"> <tt>getValue()</tt> </td>
<td class="confluenceTd"> Returns a text currently entered in the <cite>InputSecret</cite> component on which this function is invoked. This function should be used instead of the usual <tt>value</tt> field to get a correct result in case when prompt text is used. </td>
</tr>
<tr>
<td class="confluenceTd"> <tt>setValue(text)</tt> </td>
<td class="confluenceTd"> Sets a text for the <cite>InputSecret</cite> component. This function should be used instead of the usual <tt>value</tt> field assignment to get correct results in case when prompt text is used. </td>
</tr>
</tbody></table>
</div>