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

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

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

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

  1. Создадим страницу с тремя элементами: textfield, date picker и textarea:
  2. Создадим динамическое событие. Для этого:
  3. Выбираем тип динамического события - Standard:
  4. Назначаем событию имя:
  5. Определяем условие при котором будет выполняться событие:
    где событие (Event) элемента (Selection Type->Item, Region,jQuery Selector, DOM Object) при котором будет выполнено условие (Condition);
  6. Определяем тип события (например: Enable / Disable):
  7. Определяем к какому элементу(региону...) применяем данный тип события и создаем событие:
  8. Запускаем страницу:
  9. Вводим "No" в поле X1 и переходин на другое поле:
    Динамическое событие отработало и поле X2 стало активным.
  10. Аналогично создаем ещё одно динамическое событие, только выбираем тип Advanced (см. шаг 3), имя (например: Action2) и условие при котором будет выполняться событие:
  11. Выбираем тип события (в advanced их несколько больше) - в нашем случае выбираем JavaScript Code:
  12. Вводим имя функции (мы для теста будем использовать стандартную alert()):

  13. Завершаем создание динамического события и запускаем страницу.
  14. Вводим в поле 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.

  1. Создать новое Database-приложение:
  2. Выбрать тип создаваемого приложения From Scratch:
  3. Вводим имя приложения (например: SimpleGoogleMapPlugin):
  4. Добавляем страницу в приложение:
  5. Создаём приложение:
  6. Перейти в Shared Components\User Interface\Plug-ins и нажать Create:
  7. Ввести имя плагина (например: Simple Google Map), внутреннее имя (например: com.yourcompany.apex.simple_google_map) и тип плагина (в нашем случае - Region). После этого нажать Create:
  8. Создать аттрибут:
  9. Ввести следующие значения:
    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

  10. Нажать Create and Create Another.
  11. Аналогичным образом создать ещё 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
  12. Перейти на вкладку 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;  
    
  13. Переходим в закладку "Callbacks" и в поле "Render Function Name" вводим "render_simple_google_map":
  14. Переходим в закладку "Settings". Заходим на http://code.google.com/apis/maps/signup.htm и запрашиваем API Key. Его значение вводим в поле API Key:
  15. Создаём новый регион:
  16. Выбирает тип региона - Plug-Ins:
  17. Выбираем доступный плагин:
  18. Вводим наименование региона (в нашем случае - Maps):
  19. Вводим значения аттрибутов (Width=600,Height=400,P1_LOCATION,P1_TOOLTIP):
  20. Создаём регион:
  21. Создаём новый элемент:
  22. Выбираем тип элемента - Text:
  23. Оставляем по-умолчанию:
  24. Вводим наименование элемента - P1_LOCATION:
  25. Вводим наименование поля на странице:
  26. Завершаем создание элемента. Аналогично создаем элемент P1_TOOLTIP.
  27. Создаем кнопку:
  28. Завершаем создание кнопки:
  29. Запускаем страницу:

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

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

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

  1. 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>  
    
  2. Создать 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;  
     }  
    
  3. Загрузить данный файл на Web server (аналогично, тому как делается в Интеграции Oracle ApEx и extJS ).
  4. Загрузить следующие картинки в #IMAGE_PREFIX#themes/ThemeName/img:
    positive.png
    negative.png
  5. Получаются такие кнопки: