IT-шные заметки

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

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

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

Создать 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);  
   }  
 }

Создать или изменить на странице 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)"  
```

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

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

Создать 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();  
 }

Добавить в 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();  
 });

Чтобы открыть окно по нажатию на кнопку необходимо установить значение "URL Target" для данной кнопки:
```
   javascript:openModalWindow(номер_страницы,высота_окна,ширина_окна,имя_окна)  
```
например для открытия страницы 170, с высотой окна 470, с шириной окна 660 и именем "Modal Popup Window":
```
   javascript:openModalWindow(170,470,660,'Modal Popup Window')  
```

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

Создать 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){}  
 }

Добавить следующий текст в поле 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-приложений:

Оптимизация и мониторинг производительности
Бэкап схемы БД и самого приложения

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

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

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

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

Из 3-х:

Team Leader (Apex Developer, Database Developer, UI Designer, QA Engineer)
Apex Developer + Database Developer
Apex Developer + QA Engineer

Из 5-и:

Team Leader (Apex Developer, Database Developer, UI Designer, QA Engineer)
Database Developer + Apex Developer
Apex Developer + Database Developer
Apex Developer + QA Engineer
Apex Developer + UI Designer

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

Home -> Application Builder -> Application 101 -> Shared Components -> Templates -> Button Definition:

 <a class="button_ND1" href="#LINK#" onclick="this.blur();">  
                                                <span>#LABEL#</span></a>

Создать 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;  
 }

Загрузить данный файл на Web-server (аналогично, интеграции Oracle Application Express и ExtJS).
Загрузить рядом с css файлом две следующие картинки:
- bg_button_a.gif
- bg_button_span.gif

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

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

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

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

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

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

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

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

Database Developer

UI Designer

Apex Developer

QA Engineer

Team Leader

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

Apex Administrator

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

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

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

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