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

Показаны сообщения с ярлыком apex. Показать все сообщения

четверг, 15 апреля 2010 г.

Динамические события в Application Express 4.0 (на пошаговом примере приложения)

Динамические события - одна из новинок Oracle Application Express 4.0. Декларативный интерфейс для JavaScript-событий (например: скрыть и показать элемент, активировать и деактивировать его, выполнить JavaScript-функцию при наступлении определённого события).

Создадим страницу с тремя элементами: textfield, date picker и textarea:
Создадим динамическое событие. Для этого:
Выбираем тип динамического события - Standard:
Назначаем событию имя:
Определяем условие при котором будет выполняться событие:

где событие (Event) элемента (Selection Type->Item, Region,jQuery Selector, DOM Object) при котором будет выполнено условие (Condition);
Определяем тип события (например: Enable / Disable):
Определяем к какому элементу(региону...) применяем данный тип события и создаем событие:
Запускаем страницу:
Вводим "No" в поле X1 и переходин на другое поле:

Динамическое событие отработало и поле X2 стало активным.
Аналогично создаем ещё одно динамическое событие, только выбираем тип Advanced (см. шаг 3), имя (например: Action2) и условие при котором будет выполняться событие:
Выбираем тип события (в advanced их несколько больше) - в нашем случае выбираем JavaScript Code:
Вводим имя функции (мы для теста будем использовать стандартную alert()):
Завершаем создание динамического события и запускаем страницу.
Вводим в поле X3 значение "testing..." и переходин на другое поле:

Динамическое событие отработало и видим сообщение(результат функции alert)

Возможности командной разработки в Application Express 4.0

Разработчик отслеживает features, to do's, milestones и bugs. Конечный пользователь оставляет feedbacks, которые могут быть собираться и конвертироваться в features, to do's и bugs.

Основные компоненты:

News (Новости)
Features
Milestones (Контрольные точки)
To do's (Задачи)
Feedback (Отзывы)
Bugs (Баги)

News (Новости)

News предоставляет место для общедоступной информации в Workspace. Новости отображаются на домашней странице Workspace. Разработчик может как просмотривать, так и проводить поиск по новостям.

Features

Features отслеживают имплементацию функциональности приложения. Features могут быть организованны по релизам, назначенны на разработчика, теггированны (tagged) и ассоциированны с контрольными точками. Все изменения в features логгируются, так что можно посмотреть «Что изменено?», «Кто изменил?», «Когда изменил?», старое и новое значение(-я).

Отслеживание features по релизам
Назначениие features на разработчиков
Ассоциация статуса с контрольными точками
Ассоциация features с задачами (to do’s)

Milestones (Контрольные точки)

Milestones (контрольные точки) используются для определения сроков(дат) в каждой фазе проекта. Контрольные точки являются опциональными, но однако являются крайне полезными средствам для отслеживания прогресса разработки. To do’s, bugs и features могут быть ассоциированны с milestones.

Огранизация контрольных точек каждой фазы проекта и проекта в целом
Ассоциация и отслеживание контрольных точек совмесно с bugs, features и to do’s

To do's (Задачи)

Задачи – это элементы, которые могут быть назначенны, приоритизированны (prioritized), тэггированны(tagged) и отслеживаемы.

Назначение и отслеживание задач по разработчикам
Ассоциация задач по страницам приложения
Управление задачами требуется для завершения feature

Feedback (Отзывы)

	Интегрирован в APEX приложения Автоматически сохраняет session state пользователя написавшего feedback Трансформация в Features, To-Dos или Bugs

Bugs (Баги)

Встроенный в APEX багтрекер.

Отслеживание багов по разработчикам, релизам, контрольным точкам и страницам приложения
Создание багов на основе feedback предоставляемых конечными пользователями
Управление и отчетность по багам

воскресенье, 11 апреля 2010 г.

Создание плагина в Oracle Application Express 4.0

Подробный, пошаговый пример создания простого плагина в Apex 4.0.

Создать новое Database-приложение:
Выбрать тип создаваемого приложения From Scratch:
Вводим имя приложения (например: SimpleGoogleMapPlugin):
Добавляем страницу в приложение:
Создаём приложение:
Перейти в Shared Components\User Interface\Plug-ins и нажать Create:
Ввести имя плагина (например: Simple Google Map), внутреннее имя (например: com.yourcompany.apex.simple_google_map) и тип плагина (в нашем случае - Region). После этого нажать Create:
Создать аттрибут:
Ввести следующие значения:
Scope: Application
Attribute: 1
Label: API Key
Type: Text
Required: Yes
Translatable: No
Display Length: 90
Max Length: 120
Default Value: Get key at http://code.google.com/apis/maps
Нажать Create and Create Another.
Аналогичным образом создать ещё 4 аттрибута:Scope: Component
Attribute: 1
Label: Width
Type: Integer
Required: Yes
Display Width: 4
Maximum Width: 4
Default Value: 600

Scope: Component
Attribute: 2
Label: Height
Type: Integer
Required: Yes
Display Length: 4
Max Length: 4
Default Value: 400

Scope: Component
Attribute: 3
Prompt: Page Item containing Location
Type: Page Item
Required: Yes
Default Value: P1_LOCATION

Scope: Component
Attribute: 4
Prompt: Page Item containing Tooltip
Type: Page Item
Required: No

Перейти на вкладку Source и ввести в поле PL/SQL Code следующее:

 procedure render_simple_google_map (  
   p_region     in apex_plugin.t_region,  
   p_plugin     in apex_plugin.t_plugin,  
   p_is_printer_friendly in boolean )  
 is  
   -- It's better to have named variables instead of using the generic ones,  
   -- makes the code more readable  
   l_api_key  apex_appl_plugins.attribute_01%type  := p_plugin.attribute_01;  
   l_width  apex_application_page_regions.attribute_01%type := p_region.attribute_01;  
   l_height  apex_application_page_regions.attribute_02%type := p_region.attribute_02;  
   l_location apex_application_page_regions.attribute_03%type := v(p_region.attribute_03);  
   l_tooltip  apex_application_page_regions.attribute_04%type := v(p_region.attribute_04);  
 begin  
   -- During plug-in development it's very helpful to have some debug information  
   if wwv_flow.g_debug then  
    apex_plugin.debug_region (  
      p_plugin     => p_plugin,  
      p_region     => p_region,  
      p_is_printer_friendly => p_is_printer_friendly );  
   end if;  
   -- ***********************************  
   -- Here starts the actual plug-in code  
   -- ***********************************  
   apex_javascript.add_library (  
    p_name    => 'maps?file=api&v=2&key='||l_api_key,  
    p_directory  => 'http://maps.google.com/',  
    p_version   => null,  
    p_skip_extension => true );  
   -- Output the placeholder for the Google Map which is used by the Javascript code  
   sys.htp.p('<div id="'||p_region.static_id||'_map" style="width:'||l_width||'px; height:'||l_height||'px"></div>');     
   -- Initialize the Google map with location stored in the specified location page item.  
   -- The Javascript code is executed when the page has been rendered in the browser.  
   -- apex_javascript.escape are used to make sure that the values are properly escaped,  
   -- otherwise a " in the concatenated strings would break our Javascript code.  
   apex_javascript.add_onload_code (  
    p_code => '  
      if (GBrowserIsCompatible()) {    
      var lBounds = new GLatLngBounds();  
      var lMap = new GMap2($x("'||p_region.static_id||'_map"));  
      lMap.addControl(new GSmallMapControl());  
      lMap.addControl(new GMapTypeControl());  
      var lPoint = new GLatLng('||apex_javascript.escape(l_location)||');  
      lBounds.extend(lPoint);  
      lMap.setCenter(lPoint);  
      lMap.setZoom(lMap.getBoundsZoomLevel(lBounds)-4);'||  
      case when l_tooltip is not null then  
       ' var lTitle = "'||apex_javascript.escape(l_tooltip)||'";  
        var lMarker = new GMarker(lPoint);  
        lMap.addOverlay(lMarker);  
        lMarker.openInfoWindowHtml("<div class=\"tiny\">" + lTitle.replace(/~/g,"<br />") + "</div>");'  
      end||  
      '}' );  
 end render_simple_google_map;

Переходим в закладку "Callbacks" и в поле "Render Function Name" вводим "render_simple_google_map":
Переходим в закладку "Settings". Заходим на http://code.google.com/apis/maps/signup.htm и запрашиваем API Key. Его значение вводим в поле API Key:
Создаём новый регион:
Выбирает тип региона - Plug-Ins:
Выбираем доступный плагин:
Вводим наименование региона (в нашем случае - Maps):
Вводим значения аттрибутов (Width=600,Height=400,P1_LOCATION,P1_TOOLTIP):
Создаём регион:
Создаём новый элемент:
Выбираем тип элемента - Text:
Оставляем по-умолчанию:
Вводим наименование элемента - P1_LOCATION:
Вводим наименование поля на странице:
Завершаем создание элемента. Аналогично создаем элемент P1_TOOLTIP.
Создаем кнопку:
Завершаем создание кнопки:
Запускаем страницу:

четверг, 8 апреля 2010 г.

Application Express: создание CSS-кнопки

Создание три кнопки вместо cтандартных в Apex:

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

1.1 Definition (для первой кнопки):

 <span class="buttons">  
 <a href="#LINK#" class="positive">  
  <img src="#IMAGE_PREFIX#themes/ThemeName/img/positive.png" alt=""/>  
   #LABEL#</a>  
 <span>

1.2 Definition (для второй кнопки):

 <span class="buttons">  
 <a href="#LINK#" class="negative">  
   <img src="#IMAGE_PREFIX#themes/ThemeName/img/negative.png" alt=""/>  
   #LABEL#</a>  
 </span>

1.3 Definition (для третьей кнопки):

 <span class="buttons">  
   <a href="#LINK#" class="regular">  
   #LABEL#</a>  
 </span>

Создать css-файл для описания кнопки:

 .buttons a, .buttons button{  
   display:block;  
   float:left;  
   margin:0 7px 0 0;  
   background-color:#f5f5f5;  
   border:1px solid #dedede;  
   border-top:1px solid #eee;  
   border-left:1px solid #eee;  
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;  
   font-size:12px;  
   line-height:130%;  
   text-decoration:none;  
   font-weight:bold;  
   color:#565656;  
   cursor:pointer;  
   padding:5px 10px 6px 7px; /* Links */  
 }  
 .buttons button{  
   width:auto;  
   overflow:visible;  
   padding:4px 10px 3px 7px; /* IE6 */  
 }  
 .buttons button[type]{  
   padding:5px 10px 5px 7px; /* Firefox */  
   line-height:17px; /* Safari */  
 }  
 *:first-child+html button[type]{  
   padding:4px 10px 3px 7px; /* IE7 */  
 }  
 .buttons button img, .buttons a img{  
   margin:0 3px -3px 0 !important;  
   padding:0;  
   border:none;  
   width:16px;  
   height:16px;  
 }  
 /* STANDARD */  
 button:hover, .buttons a:hover{  
   background-color:#dff4ff;  
   border:1px solid #c2e1ef;  
   color:#336699;  
 }  
 .buttons a:active{  
   background-color:#6299c5;  
   border:1px solid #6299c5;  
   color:#fff;  
 }  
 /* POSITIVE */  
 button.positive, .buttons a.positive{  
   color:#529214;  
 }  
 .buttons a.positive:hover, button.positive:hover{  
   background-color:#E6EFC2;  
   border:1px solid #C6D880;  
   color:#529214;  
 }  
 .buttons a.positive:active{  
   background-color:#529214;  
   border:1px solid #529214;  
   color:#fff;  
 }  
 /* NEGATIVE */  
 .buttons a.negative, button.negative{  
   color:#d12f19;  
 }  
 .buttons a.negative:hover, button.negative:hover{  
   background:#fbe3e4;  
   border:1px solid #fbc2c4;  
   color:#d12f19;  
 }  
 .buttons a.negative:active{  
   background-color:#d12f19;  
   border:1px solid #d12f19;  
   color:#fff;  
 }  
 /* REGULAR */  
 button.regular, .buttons a.regular{  
   color:#336699;  
 }  
 .buttons a.regular:hover, button.regular:hover{  
   background-color:#dff4ff;  
   border:1px solid #c2e1ef;  
   color:#336699;  
 }  
 .buttons a.regular:active{  
   background-color:#6299c5;  
   border:1px solid #6299c5;  
   color:#fff;  
 }

Загрузить данный файл на Web server (аналогично, тому как делается в Интеграции Oracle ApEx и extJS ).
Загрузить следующие картинки в #IMAGE_PREFIX#themes/ThemeName/img:
positive.png
negative.png
Получаются такие кнопки: