جلوگیری از ورود کاراکتر و فرمت اعداد با استفاده از جاوا اسکریپت در ADF

در انجام پروژه‌ها گاهی نیاز می‌شود که فیلدهای ورودی در فرم ها را با استفاده از جاوا اسکریپت کنترل نمایید. به عنوان مثال کاربر امکان وارد نمودن حروف را نداشته باشد و همچنین اعداد وارد شده با کاما فرمت دهی گردد(مثال: ۱۲,۳۴۵) . ADF برای پیاده‌سازی جاوا اسکریپت در لایه نمایش خود از مجموعه APIهای خوبی برخوردار است که بهتر است با آشنایی کامل اقدام به افزودن جاوا اسکریپت به صفحات خود نمایید. توصیه فراوان شده است که حتما با دانش کافی از جاوا اسکریپت در صفحات خود استفاده نمایید چرا که ADF‌ یک فریم ورک AJAX می باشد و ممکن است جاوا اسکریپت‌های شما عملکرد صحیح صفحات را از بین ببرد. در این مقاله اقدام به توضیح مثالی نموده‌ایم تا در جدول مربوط به کارکنان در بانک HR بر روی فیلد حقوق محدودیتهایی را اعمال نماییم. این محدودیت‌ها به این صورت خواهد بود که کاربر فقط اجازه وارد نمودن اعداد را خواهد داشت و در نهایت نیز عدد وارد شده با کاما جدا گردد(فرمت :۱۲,۳۴۵)

ابتدا یک Application ایجاد نمایید و در پروژه مربوط به مدل entity و view‌ و Application Module‌ مربوط به جدول Employee‌ را بسازید( با فرض آشنایی شما با این مراحل از توضیح آن اجتناب شده است). سپس بر روی فیلد Salary‌ در Entity راست کلیک کرده و Edit را کلیک نمایید تا پنجره ویرایش باز گردد به قسمت Control Hints‌ بروید و Format Type آن را بر روی Number و Format آن را برابر ;۰##,# قرار دهید.

نکته: برای اعدادی که کاربر اجازه وارد نمودن اعدادمنفی را دارد باید از فرمت ;۰##,#-;۰##,# استفاده کنید.
حال در پروژه View خود یک پوشه با نام js‌ در Web Content‌ ایجاد نمایید و درون آن یک فایل با نام functions.js بسازید و کدهای زیر را درون آن قرار دهید.

function blockCharacters(evt) {

    var keyPressed = evt.getKeyCode();
    var inputField = evt.getCurrentTarget();
    var oldValue = inputField.getSubmittedValue();
    var validKeys = new Array(48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 109, 173, AdfKeyStroke.ARROWRIGHT_KEY, AdfKeyStroke.ARROWLEFT_KEY, AdfKeyStroke.BACKSPACE_KEY, AdfKeyStroke.DELETE_KEY, AdfKeyStroke.END_KEY, AdfKeyStroke.ESC_KEY, AdfKeyStroke.TAB_KEY);
    var isValidKey = false;
    for (var i = 0;i < validKeys.length;++i) {
        if (validKeys[i] == keyPressed) {
            isValidKey = true;
            break;
        }
    }
    if (isValidKey && oldValue.length > 0 && (keyPressed == 109 || keyPressed == 173)) {
        isValidKey = false;
    }
    if (!isValidKey) {
        inputField.setValue(oldValue);
        evt.cancel();
    }
}

function formatInput(pattern, delimiter) {
    return function (evt) {
        var inputField = evt.getCurrentTarget();
        var oldValue = inputField.getSubmittedValue();
        var formatLength = pattern.length;
        if (oldValue.charAt(0) == "-")
            formatLength = formatLength + 1;
        if (formatLength == oldValue.length) {
            inputField.setValue(oldValue);
            evt.cancel();
        }
        else {
            var negative = "";
            if (oldValue.length >= 3) {
                var val = "";
                for (var k = 0;k < oldValue.length;k++) {
                    if (oldValue.charAt(k) == delimiter) {
                        ;
                    }
                    else {
                        if (oldValue.charAt(k) == '-') {
                            negative = "-";
                        }
                        else {
                            val = val + oldValue.charAt(k);
                        }
                    }
                }
                oldValue = val;
                val = "";
                var pos = 1;
                for (var ii = oldValue.length;ii > 0;ii--) {
                    val = oldValue.charAt((ii - 1)) + val;
                    if ((pos % 3 == 0) && (ii != 1)) {
                        val = delimiter + val;
                    }
                    pos++;
                }
                inputField.setValue(negative + val);
                evt.cancel();
            }
        }

    }
}

سپس یک صفحه ایجاد نمایید و از قسمت Data Control کارکنان را کشیده و بر روی صفحه به صورت یک فرم رها نمایید. درون تگ مربوط به af:document کامپوننت زیر را قرار دهید.

<af:resource type="javascript" source="/js/functions.js"/>

در نهایت در کامپوننت af:inputText مربوط به Salary کامپوننت af:convertNumber‌ درون آن را حذف نمایید و سپس کامپوننت‌های زیر را درون آن قرار دهید.

<af:clientListener method="blockCharacters" type="keyDown"/>
<af:clientListener method="formatInput('x,xxx,xxx,xxx,xxx,xxx,xxx',',')" type="keyUp"/>

کامپوننت اول متدی را فراخوانی می نماید که باعث می شود تا از ورود کاراکترهای غیر عددی جلوگیری شود و کامپوننت دوم مربوط به فرمت نمودن عدد وارد شده می باشد. این متد دو پارامتر می‌گیرد که پارامتر اول حداکثر طولی که کاربر اجازه ورود را دارد مشخص می نماید و پارامتر دوم جدا کننده را برای جداسازی تعیین می نماید.صفحه شما در نهایت باید همانند زیر شده باشد.

<?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:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document id="d1">
    <af:resource type="javascript" source="/js/functions.js"/>
      <af:messages id="m1"/>
      <af:form id="f1">
        <af:panelFormLayout id="pfl1">
          <af:inputText value="#{bindings.EmployeeId.inputValue}"
                        label="#{bindings.EmployeeId.hints.label}"
                        required="#{bindings.EmployeeId.hints.mandatory}"
                        columns="#{bindings.EmployeeId.hints.displayWidth}"
                        maximumLength="#{bindings.EmployeeId.hints.precision}"
                        shortDesc="#{bindings.EmployeeId.hints.tooltip}"
                        id="it1">
            <f:validator binding="#{bindings.EmployeeId.validator}"/>
            <af:convertNumber groupingUsed="false"
                              pattern="#{bindings.EmployeeId.format}"/>
          </af:inputText>
          <af:inputText value="#{bindings.FirstName.inputValue}"
                        label="#{bindings.FirstName.hints.label}"
                        required="#{bindings.FirstName.hints.mandatory}"
                        columns="#{bindings.FirstName.hints.displayWidth}"
                        maximumLength="#{bindings.FirstName.hints.precision}"
                        shortDesc="#{bindings.FirstName.hints.tooltip}"
                        id="it8">
            <f:validator binding="#{bindings.FirstName.validator}"/>
          </af:inputText>
          <af:inputText value="#{bindings.LastName.inputValue}"
                        label="#{bindings.LastName.hints.label}"
                        required="#{bindings.LastName.hints.mandatory}"
                        columns="#{bindings.LastName.hints.displayWidth}"
                        maximumLength="#{bindings.LastName.hints.precision}"
                        shortDesc="#{bindings.LastName.hints.tooltip}" id="it2">
            <f:validator binding="#{bindings.LastName.validator}"/>
          </af:inputText>
          <af:inputText value="#{bindings.Email.inputValue}"
                        label="#{bindings.Email.hints.label}"
                        required="#{bindings.Email.hints.mandatory}"
                        columns="#{bindings.Email.hints.displayWidth}"
                        maximumLength="#{bindings.Email.hints.precision}"
                        shortDesc="#{bindings.Email.hints.tooltip}" id="it9">
            <f:validator binding="#{bindings.Email.validator}"/>
          </af:inputText>
          <af:inputText value="#{bindings.PhoneNumber.inputValue}"
                        label="#{bindings.PhoneNumber.hints.label}"
                        required="#{bindings.PhoneNumber.hints.mandatory}"
                        columns="#{bindings.PhoneNumber.hints.displayWidth}"
                        maximumLength="#{bindings.PhoneNumber.hints.precision}"
                        shortDesc="#{bindings.PhoneNumber.hints.tooltip}"
                        id="it7">
            <f:validator binding="#{bindings.PhoneNumber.validator}"/>
          </af:inputText>
          <af:inputDate value="#{bindings.HireDate.inputValue}"
                        label="#{bindings.HireDate.hints.label}"
                        required="#{bindings.HireDate.hints.mandatory}"
                        shortDesc="#{bindings.HireDate.hints.tooltip}" id="id1">
            <f:validator binding="#{bindings.HireDate.validator}"/>
            <af:convertDateTime pattern="#{bindings.HireDate.format}"/>
          </af:inputDate>
          <af:inputText value="#{bindings.JobId.inputValue}"
                        label="#{bindings.JobId.hints.label}"
                        required="#{bindings.JobId.hints.mandatory}"
                        columns="#{bindings.JobId.hints.displayWidth}"
                        maximumLength="#{bindings.JobId.hints.precision}"
                        shortDesc="#{bindings.JobId.hints.tooltip}" id="it3">
            <f:validator binding="#{bindings.JobId.validator}"/>
          </af:inputText>
          <af:inputText value="#{bindings.Salary.inputValue}"
                        label="#{bindings.Salary.hints.label}"
                        required="#{bindings.Salary.hints.mandatory}"
                        columns="#{bindings.Salary.hints.displayWidth}"
                        maximumLength="#{bindings.Salary.hints.precision}"
                        shortDesc="#{bindings.Salary.hints.tooltip}" id="it5">
            <f:validator binding="#{bindings.Salary.validator}"/>
            <af:clientListener method="blockCharacters" type="keyDown"/>
            <af:clientListener method="formatInput('x,xxx,xxx,xxx,xxx,xxx,xxx',',')"
                                    type="keyUp"/>
          </af:inputText>
          <af:inputText value="#{bindings.CommissionPct.inputValue}"
                        label="#{bindings.CommissionPct.hints.label}"
                        required="#{bindings.CommissionPct.hints.mandatory}"
                        columns="#{bindings.CommissionPct.hints.displayWidth}"
                        maximumLength="#{bindings.CommissionPct.hints.precision}"
                        shortDesc="#{bindings.CommissionPct.hints.tooltip}"
                        id="it6">
            <f:validator binding="#{bindings.CommissionPct.validator}"/>
            <af:convertNumber groupingUsed="false"
                              pattern="#{bindings.CommissionPct.format}"/>
          </af:inputText>
          <af:inputText value="#{bindings.ManagerId.inputValue}"
                        label="#{bindings.ManagerId.hints.label}"
                        required="#{bindings.ManagerId.hints.mandatory}"
                        columns="#{bindings.ManagerId.hints.displayWidth}"
                        maximumLength="#{bindings.ManagerId.hints.precision}"
                        shortDesc="#{bindings.ManagerId.hints.tooltip}"
                        id="it10">
            <f:validator binding="#{bindings.ManagerId.validator}"/>
            <af:convertNumber groupingUsed="false"
                              pattern="#{bindings.ManagerId.format}"/>
          </af:inputText>
          <af:inputText value="#{bindings.DepartmentId.inputValue}"
                        label="#{bindings.DepartmentId.hints.label}"
                        required="#{bindings.DepartmentId.hints.mandatory}"
                        columns="#{bindings.DepartmentId.hints.displayWidth}"
                        maximumLength="#{bindings.DepartmentId.hints.precision}"
                        shortDesc="#{bindings.DepartmentId.hints.tooltip}"
                        id="it4">
            <f:validator binding="#{bindings.DepartmentId.validator}"/>
            <af:convertNumber groupingUsed="false"
                              pattern="#{bindings.DepartmentId.format}"/>
          </af:inputText>
        </af:panelFormLayout>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>