1_InputSecret

TOCSTART

• Key Features
• Basic Configuration
• Layout Configuration
• Showing a Password
• Customizing Styles
• Server-Side Event Listeners
• Client-Side Events
• Client-Side API

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.

Online Demo

Key Features

• All features of the standard InputSecret component
• Changing chars of password field
• Typing password like in Android and IPhone
• Showing and hiding entered password
• Displaying prompt text
• Extended styling
• Generating of password

Basic Configuration

The InputSecret component can be added to a page using the <o:inputSecret> tag. This tag is just an extended version of the standard <h:inputSecret> 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 <h:inputSecret> the value attribute lets you specify the current value of the component.

The following example shows a definition of the InputSecret with the value attribute.

<o:inputSecret value="#{LogInBean.password}" />

You can declare the promptText attribute if you'd like to display an auxiliary text when text field's value is empty. Here is an example:

<o:inputSecret value="#{LogInBean.password}" promptText="Password"/>

And here is the result:

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.

You can also specify a custom style for the prompt text as described below.

Layout Configuration

If you don't like bullets in password field, you can use the replacement attribute for setting your custom chars instead of bullets.

Look at the examples below:

<o:inputSecret id="replacedByHash"
               value="#{LogInBean.password}"
               replacement="#">
</o:inputSecret>

<o:inputSecret id="replacedByAsterisk"
               value="#{LogInBean.password}"
               replacement="*">
</o:inputSecret>

The result is:

Showing a Password

There is more probably to make more errors and to feel less confident when you can’t see what you’re typing while filling in forms. That may have been the reason why Apple implemented an alternative method on iPhone/iPod Touch: passwords get masked while typing but the last character in row is shown in plain text. Compared to common password fields on the web this method improves usability, not only on mobile devices.

So, this method looks to be a pretty good way of typing in passwords, and that is why tried to use it on web forms.

There are two attributes that control how input characters are converting. The duration attribute specifies the delay in msec of converting the last entered character. And another one attribute is interval that specifies the time in msec of converting all last entered characters.

Here is an examples:

<o:inputSecret id="singleCharacterConvertDelay"
               value="#{LogInBean.password}"
               duration="2000"
               replacement="#">
</o:inputSecret>

<o:inputSecret id="multipleCharacterConvertDelay"
               value="#{LogInBean.password}"
               interval="2000"
               replacement="*">
</o:inputSecret>

And here is the result:

Furthermore, OpenFaces provides another one possibility to check whole entered password. You can use client-side API methods for the InputSecret component such as showPassword() and opposite to it hidePassword() for this purpose.

Look at the following example:

    <o:inputSecret id="password"
                   value="#{InputSecretBean.password}"
                   promptText="password"/>

    <div>
        <input type="button" onclick="O$('password').showPassword()"
               value="Show Password"/>
        <input type="button" onclick="O$('password').hidePassword()"
               value="Hide Password"/>
    </div>

Customizing Styles

You can apply styles for the InputSecret component when it's in a normal, focused or rollover state.

The table below lists all style attributes:

Attribute	Description
style and styleClass	A style applied to the entire InputSecret component.
rolloverStyle and rolloverClass	A style applied to the InputSecret component in the rollover state.
focusedStyle and focusedClass	A style applied to the InputSecret component when it is focused.
promptTextStyle and promptTextClass	A style applied to the prompt text.

The following example demonstrates the usage of style-related attributes of the InputSecret component:

 <o:inputSecret id="styledInputSecret"
                replacement="&#9679;"
                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;"/>

The appearance of blank InputSecret component is the next in this case:

When the user is typing the value, this style is changed to the following:

Server-Side Event Listeners

Given that the InputSecret component is a UIInput component, it can fire javax.faces.event.ValueChangeEvent just like any other UIInput component does. To handle a value change event on the server side, the valueChangeListener attribute should be used in the same way as for the HTMLInputSecret component. You can also add a value change listener to the component by using the <f:valueChangeListener> tag.

Client-Side Events

The InputSecret component supports a set of standard client-side events such as onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmouseout, onmousemove, onselect, onchange, onfocus, onblur, onkeyup, onkeydown, onkeypress.

Client-Side API

All client-side API methods for the InputSecret component are listed in the following table:

    </tbody>
</table>

Method	Description
getValue()	Returns a text currently entered in the InputSecret component on which this function is invoked. This function should be used instead of the usual value field to get a correct result in case when prompt text is used.
setValue(text)	Sets a text for the InputSecret component. This function should be used instead of the usual value field assignment to get correct results in case when prompt text is used.
showPassword()	Shows a text entered in the InputSecret component on which this function is invoked.
hidePassword()	Replace text with a mask for the InputSecret component on which this function is invoked.
generatePassword(relativeLength, additionalData)	Generate random password and set it for the InputSecret component on which this function is invoked. Password generation can be customized by two parameters. Parameter relativeLength sets relative length of the password. Parameter additionalData adds additional data defined by the user to the algorithm of randomize.