This blog describes steps to add JavaScript to
WebCenter/ ADF web application, providing an example of Password Meter. It is
common requirement in web applications to enforce user to create strong account
password while registering on web site
1. Create
new WebCenter Portal – Framework Application, say MyWebApplicationWithJavaScript.
Add new MyRegistrationForm.jspx file, in
which JavaScript code is required to be added. Select View > Component
Palette > Common Components and drag and drop ADF Faces Input
Text into the .jspx file. Source code would contain lines as below
<af:inputText
label="Password" id="itPassword"/>
Modify
these as below
<af:inputText
label="Password" id="itPassword">
</af:inputText>
2. Select
View > Component Palette > Operations and drag and drop Client Listener
above </af:inputText>
Figure 1
3. In Insert
Client Listener pop-up dialog, type method name of your JavaScript method in
Method *: (in this example, chkpass), select type of event from Type *: (in
this example, keyUp). This should change code to following
<af:inputText
label="Password: " id="itMyValue">
<af:clientListener
method="printMyValue" type="keyUp"/>
</af:inputText>
Note that secret="true" has not been added to af:inputText. Hence typed text would be visible as plain text to make it
convenient for you to observe
4. Add div
tag as below, after password
<div
id="divPasswordStrength">
<af:clientAttribute
name="caPasswordStrength"/>
</div>
5. Add af:resource tag to
.jspx file just above </af:document> tag. Add
JavaScript code by either typing JavaScript function directly within af:resource tag
<af:resource
type="javascript”>
function chkPass(evt) {
//Add your code here
}
</af:resource>
Or provide path to your .js file and .js file name,
containing your JavaScript code, as value to source property of af:resource
<af:resource
type="javascript" source="/PATH_TO_YOUR_.JS_FILE/YOUR_.JS_FILE_NAME">
</af:resource>
Below is code for MyRegistrationForm.jspx and function chkPass
<?xml
version='1.0' encoding='UTF-8'?>
<jsp:root
xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page
contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1"
title="My Registration Form">
<af:form id="f1">
<af:inputText label="Password:
" id="itPassword" maximumLength="10">
<af:clientListener
method="chkPass" type="keyUp"/>
</af:inputText>
<div
id="divPasswordStrength">
<af:clientAttribute
name="caPasswordStrength"/>
</div>
</af:form>
<af:resource
type="javascript">
function chkPass(evt) {
var objItPassword =
evt.getCurrentTarget();
var strPassword =
objItPassword.getValue();
var intScore = 0;
if (strPassword.match(/[a-z]/)) {
intScore++;
}
if (strPassword.match(/[A-Z]/)) {
intScore++;
}
if (strPassword.match(/\d+/)) {
intScore++;
}
if
(strPassword.match(/.[!,@,#,$,%,^,*,?,_,~,-,(,)]/)) {
intScore++;
}
if (strPassword.length > 7) {
intScore++;
}
var strStrengthArray = new
Array();
strStrengthArray[0] = "Blank
Password";
strStrengthArray[1] = "Very
Weak";
strStrengthArray[2] =
"Weak";
strStrengthArray[3] =
"Good";
strStrengthArray[4] =
"Strong";
strStrengthArray[5] = "Very
Strong";
var strStrength =
strStrengthArray[intScore];
var objDiv =
document.getElementById('divPasswordStrength');
objDiv.innerHTML = "";
if (intScore == 0) {
objDiv.style.color =
"#ffffff";
}
else if (intScore == 1) {
objDiv.style.color =
"#ff0000";
}
else if (intScore == 2) {
objDiv.style.color =
"#ff5f5f";
}
else if (intScore == 3) {
objDiv.style.color =
"#56e500";
}
else if (intScore == 4) {
objDiv.style.color =
"#4dcd00";
}
else if (intScore == 5) {
objDiv.style.color =
"#399800";
}
if (intScore > 0) {
objDiv.innerHTML = "Score:
" + (intScore * 20) + "%";
objDiv.innerHTML += " |
Strength: " + strStrength;
}
else {
objDiv.innerHTML =
"";
}
}
</af:resource>
</af:document>
</f:view>
</jsp:root>
6. To test application, download it by
clicking on 'Download Application' below, unzip it, right click MyRegistrationForm.jspx in Application Navigator and click
Run. Type characters in upper/ lower cases, numbers, special characters and
press enter to observe password strength. Output is as shown in Figure 2
Figure 2
