Application Express: функция для ввода только чисел в TEXTFIELD в определённом диапазоне значений

1. Создать JavaScript-файл или добавить в Header Definition:
   

    function limitNumber(elementName,minNum,maxNum) {  
      var t_field=document.getElementById(elementName).value;  
      if (isNumeric(t_field)){  
       if (!((parseInt(t_field) <= maxNum) && ((parseInt(t_field) >= minNum)))) {  
         var temp=document.getElementById(elementName).value.substring(0, document.getElementById(elementName).value.length-1);  
         document.getElementById(elementName).value=temp;  
       }  
      } else {  
       var temp=document.getElementById(elementName).value.substring(0, document.getElementById(elementName).value.length-1);  
       document.getElementById(elementName).value=temp;  
      }  
    }  
   

2. Создать или изменить на странице Apex Item типа TEXTFIELD и указать в свойстве Element->HTML Form Element Attributes следующее значение:
   

    onkeyup="limitNumber('имя_данного_textfield',min_значение,max_значение)" onkeydown="limitNumber('имя_данного_textfield',min_значение,max_значение)"  
   

   например для TEXTFIELD c именем P150_PROBABILITY, минимальный значением 1 и максимальным значением 100:
   

    onkeyup="limitNumber('P150_PROBABILITY',1,100)" onkeydown="limitNumber('P150_PROBABILITY',1,100)"  
   

Application Express: функция для ввода только числовых значений в TEXTFIELD

1. Создать JavaScript-файл или добавить в Header Definition:
   

    function checkOnlyNumbers(evt) {  
      evt = (evt) ? evt : window.event  
      var charCode = (evt.which) ? evt.which : evt.keyCode  
      if (charCode > 31 && (charCode < 48 || charCode > 57)) {  
       return false;  
      } else {  
       return true;  
      }  
    }  
   

2. Создать или изменить на странице Apex Item типа TEXTFIELD и указать в свойстве Element->HTML Form Element Attributes следующее значение:
   

    onkeydown="return checkOnlyNumbers(event)"
      onkeyup="return checkOnlyNumbers(event)"  
   

Application Express: функция для ограничения длины вводимых данных для TEXTAREA

Данная функция предназначена для ограничения вводимых данных в TEXTAREA, т.к. стандартными средствами Apex 3.2 эту валидацию выполнить нельзя.

1. Создать JavaScript-файл или добавить в Header Definition:
   

    function limitText(elementName,limitNum) {  
      var t_field=document.getElementById(elementName);  
      if (t_field.value.length > limitNum) {  
       t_field.value = t_field.value.substring(0, limitNum);  
      }  
    }  
   

2. Создать или изменить на странице Apex Item типа TEXTAREA и указать в свойстве Element->HTML Form Element Attributes следующее значение:
   

   onKeyUp="limitText('имя_данной_textarea',максимальная длинна)" 
      onKeyDown="limitText('имя_данной_textarea',максимальная длинна)"  
   

   например для TEXTAREA c именем P115_DESCRIPTION и максимальной длинной 2000 символов(для латиницы, для кирилицы в двое меньше):
   

   onKeyUp="limitText('P115_DESCRIPTION',2000)" 
      onKeyDown="limitText('P115_DESCRIPTION',2000)"  
   

Рекомендации при разработке Apex-приложений

1. Понимание архитектуры Apex и связанных технологий:
   • Oracle RDBMS - PL/SQL
   • DHTML = HTML+CSS+JavaScript+Ajax
2. Логика отображения(View Layer) должна быть только в:
   • Templates
   • CSS
   • Item Formatting
3. Избегать, где это возможно использования PL/SQL для генерации HTML
4. Вынести все пользовательские JavaScript-функции в отдельный файл и минимализировать и упаковать
5. Перенести анонимные PL/SQL процедуры в БД (нет необходимости в компиляции каждый раз) и отладка из отдельно от Apex. * передавать значения в процедуры как параметры * использовать переменные связывания
6. Использовать схему пэйджинга(pagination scheme) "X to Y" взамен "X to Y of Z"
7. Постоянно производить диагностику производительности вновь созданных страниц и переодически приложения в целом (возможно использование средств автоматического тестирования Web-приложений, например, Oracle Application Testing Suite).

Рекомендую ознакомиться со статьёй Майка Хичва - Оценка производительности, в которой Вы найдёте пояснение некоторых рекомендаций

Application Express: использование всплывающих модальных окон из фреймворка ExtJS

Открытие модального окна

1. Создать JavaScript-файл или добавить в Header Definition:

    function initializePopupWindows(){  
      try{  
       // Define an iframe component, better for garbage collection  
       Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {  
         url : null,  
         onRender : function(ct, position){  
          var url = this.url;  
          this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, src: url, "SCROLLING":'NO'});  
       }  
       });  
      Ext.reg('iframe', Ext.ux.IFrameComponent);  
      Ext.ux.PopupWindow = Ext.extend(Ext.Window, {  
       url: '',  
       title: '',  
       width: 700,  
       height: 600,  
       resizable: true,  
       maximizable: true,  
       initComponent: function(){  
         this.isProcessed = false;  
         var config = {  
          border: false,  
          closable: true,  
          closeAction: 'close',  
          height: this.height,  
          items: [ new Ext.ux.IFrameComponent({ id: id, url: this.url }) ],  
          layout: 'fit',  
          modal: true,  
          plain: false,  
          title: this.title,  
          width: this.width  
       };  
       // apply config  
       Ext.apply(this, Ext.apply(this.initialConfig, config));  
       Ext.ux.PopupWindow.superclass.initComponent.call(this);  
       // define custom events  
       this.addEvents('success');  
      },  
      processSuccessful: function(){  
       this.isProcessed = true;  
       this.fireEvent("success", this);  
      },  
      hasChanged: function() {  
       return this.isProcessed;  
      },  
      show: function(){  
       this.isProcessed = false;  
       Ext.ux.PopupWindow.superclass.show.call(this);  
      },  
      // private  
      initTools : function(){  
       // over-ride Ext.Window functions adding qtips to original code  
       if(this.minimizable){  
         this.addTool({  
          id: 'minimize',  
          handler: this.minimize.createDelegate(this, []),  
          qtip: 'Minimize'  
         });  
       }  
       if(this.maximizable){  
         this.addTool({  
          id: 'maximize',  
          handler: this.maximize.createDelegate(this, []),  
          qtip: 'Maximize'  
         });  
         this.addTool({  
          id: 'restore',  
          handler: this.restore.createDelegate(this, []),  
          hidden:true,  
          qtip: 'Restore size'  
         });  
         this.header.on('dblclick', this.toggleMaximize, this);  
       }  
       if(this.closable){  
         this.addTool({  
          id: 'close',  
          handler: this[this.closeAction].createDelegate(this, []),  
          qtip: 'Close'  
         });  
       }  
      }  
      });  
      Ext.reg('PopupWindow', Ext.ux.PopupWindow);  
      } catch(err){}  
    }  
    function openModalWindow(pageNumber, windowHeight,windowWidth,windTitle){  
      var newURL = window.location.protocol + "//" + window.location.host + "/apex/f?p=" +Ext.getDom('pFlowId').value+":"+pageNumber+":"+Ext.getDom('pInstance').value+":::::";  
      var wind=new Ext.ux.PopupWindow({url: newURL , height: windowHeight,width: windowWidth, title: windTitle});  
      wind.show();  
    }  
    function openModalWindowWithParams(pageNumber, windowHeight,windowWidth,paramNames,paramValues,windTitle){  
      var newURL = window.location.protocol + "//" + window.location.host + "/apex/f?p=" +Ext.getDom('pFlowId').value+":"+pageNumber+":"+Ext.getDom('pInstance').value+"::::"+paramNames+":"+paramValues;  
      var wind=new Ext.ux.PopupWindow({url: newURL , height: windowHeight,width: windowWidth, title: windTitle});  
      wind.show();  
    }  
    function openModalWindowWithParamsNotResizable(pageNumber, windowHeight,windowWidth,paramNames,paramValues,windTitle){  
      var newURL = window.location.protocol + "//" + window.location.host + "/apex/f?p=" +Ext.getDom('pFlowId').value+":"+pageNumber+":"+Ext.getDom('pInstance').value+"::::"+paramNames+":"+paramValues;  
      var wind=new Ext.ux.PopupWindow({url: newURL , height: windowHeight,width: windowWidth, title: windTitle, resizable:false,maximizable:false});  
      wind.show();  
    }  
   

2. Добавить в onload body вызов данной функции (initializePopupWindows) или использовать метод onReady фреймворка ExtJS:
   

    Ext.onReady(function(){  
      Ext.BLANK_IMAGE_URL = '/i/1px_trans.gif';  
      // Create namespace if doesn't already exist  
      Ext.namespace('Ext.ux');  
      //Здесь последовательность вызовов функций, например:  
      initializePopupWindows();  
    });  
   

3. Чтобы открыть окно по нажатию на кнопку необходимо установить значение "URL Target" для данной кнопки:
   

      javascript:openModalWindow(номер_страницы,высота_окна,ширина_окна,имя_окна)  
   

   например для открытия страницы 170, с высотой окна 470, с шириной окна 660 и именем "Modal Popup Window":
   

      javascript:openModalWindow(170,470,660,'Modal Popup Window')  
   

Закрытие окна

1. Создать JavaScript-файл или добавить в Header Definition:
   

    function closePopupWindow(){  
      try{  
       parent.Ext.WindowMgr.getActive().close();  
      }catch(err){}  
    }  
    function closePopupWindowWithRefresh(){  
      try {  
       parent.gReport.pull();  
      }catch(err){  
       parent.location.href=parent.location.href;  
      }  
      try {  
       parent.Ext.WindowMgr.getActive().close();  
      }catch(err){}  
    }  
   

2. Добавить следующий текст в поле Success Message в процесс DML или PL/SQL всплывающего окна:
   

    <script type="text/javascript">  
     closePopupWindowWithRefresh();  
    </script>