пятница, 5 марта 2010 г.

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>  
    

Роли в команде разработки ПО на Application Express

Роли в команде

Основные роли:

  • Database Developer
  • UI Designer
  • Apex Developer
  • QA Engineer
  • Team Leader
  • Integration Architect (может отсутствовать, если не требуется интеграция)

Дополнительная роль:

  • Apex Administrator - не участвует в процессе разработки

Database Developer

Задачи:

  • Разработка схемы данных
  • Разработка пакетов-утилит в БД

Необходимые навыки/знания:

  • проектирования баз данных
  • опыт программирования на PL/SQL

UI Designer

Задачи:

  • Разработка (и/или изменение) существующих тем
  • Создание кастомных компонентов (и их документирование, например на Wiki)
  • Интеграция с JavaScript-библиотеками (фреймворками)
  • Создание необходимых JavaScript функций-утилит (например: для валидации ввода значений)

Необходимые навыки/знания:

  • DHTML(HTML+JavaScript)
  • CSS
  • Понимание процесса генерации Apex-ом динамического HTML

Apex Developer

Задачи:

  • Разработка интерфейса пользователя средствами Apex
  • Использование кастомных компонентов и тем пользовательского интерфейса
  • Использование JavaScript функций-утилит
  • Использование пакетов-утилит в БД

Необходимые навыки/знания:

  • DHTML(HTML+JavaScript) + Ajax
  • Знание SQL и PL/SQL
  • Понимание процесса разработки приложений на Apex

QA Engineer

Задачи:

  • Функциональное тестирование приложения
  • Тестирование приложения на производительность

Необходимые навыки/знания:

  • Понимание процесса функционального тестирования
  • Понимание принципов автотестов и опыт их использования в Web-ориентированной среде

Team Leader

Задачи:

  • Разработка архитектуры приложения в соответствии с бизнес-требованиями
  • Участие в основных этапах разработки и тестирования системы
  • Планирование выпуска новых версий системы

Необходимые навыки/знания:

  • Навыки ролей “Database Developer”, “Apex Developer”, “QA Engineer” и “UI Engineer”
  • Мэппинг бизнес-требований на технологии и средства Apex и смежных технологий
  • Понимание принципов управления проектами

Integration Architect (может отсутствовать, если не требуется интеграция)

Задачи:

  • Разработка интеграционной архитектуры

Необходимые навыки/знания:

  • Понимание основ и принципов SOA и SaaS
  • Опыт интеграционных проектов:
  • Интеграция на уровне бизнес-процессов
  • Интеграция на основе сервисной шины
  • Интеграция на уровне данных (федерат.хранилища данных)
  • Интеграция на уровне пользовательского интерфейса

Apex Administrator

Задачи:

  • Администрирование Apex-приложений:
  1. Оптимизация и мониторинг производительности
  2. Бэкап схемы БД и самого приложения

Необходимые навыки/знания:

  • Навыки администратора СУБД Oracle
  • Начальные знания Apex

Взаимодействие ролей


Пример: роли в команде из 3-х и 5-и человек

Из 3-х:

  1. Team Leader (Apex Developer, Database Developer, UI Designer, QA Engineer)
  2. Apex Developer + Database Developer
  3. Apex Developer + QA Engineer

Из 5-и:

  1. Team Leader (Apex Developer, Database Developer, UI Designer, QA Engineer)
  2. Database Developer + Apex Developer
  3. Apex Developer + Database Developer
  4. Apex Developer + QA Engineer
  5. Apex Developer + UI Designer

Создание округлых кнопок вместо cтандартных в Application Express

  1. Home -> Application Builder -> Application 101 -> Shared Components -> Templates -> Button Definition:
     <a class="button_ND1" href="#LINK#" onclick="this.blur();">  
                                                    <span>#LABEL#</span></a>  
    
  2. Создать css-файл для описания кнопки:
     .clear { /* generic container (i.e. div) for floating buttons */  
      overflow: hidden;  
      width: 100%;  
     }  
     a.button_ND1 {  
      background: transparent url('bg_button_a.gif') no-repeat scroll top right;  
      color: #444;  
      display: block;  
      float: left;  
      font: normal 12px arial, sans-serif;  
      height: 24px;  
      margin-right: 6px;  
      padding-right: 18px; /* sliding doors padding */  
      text-decoration: none;  
     }  
     a.button_ND1 span {  
      background: transparent url('bg_button_span.gif') no-repeat;  
      display: block;  
      line-height: 14px;  
      padding: 5px 0 5px 18px;  
      text-decoration: none;  
     }  
     a.button_ND1:active {  
      background-position: bottom right;  
      color: #000;  
      outline: none; /* hide dotted outline in Firefox */  
      text-decoration: none;  
     }  
     a.button_ND1:active span {  
      background-position: bottom left;  
      padding: 6px 0 4px 18px; /* push text down 1px */  
      text-decoration: none;  
     }  
    
  3. Загрузить данный файл на Web-server (аналогично, интеграции Oracle Application Express и ExtJS).
  4. Загрузить рядом с css файлом две следующие картинки: