Adding JavaScript to WebCenter/ ADF web application with Password Meter example

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

Download Application