воскресенье, 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. Запускаем страницу:


2 комментария:

  1. сделал все по мануалу
    получил http://petromi.com/get/ff317414aa.png

    куда копать?

    ОтветитьУдалить
    Ответы
    1. та же ошибка APEX 4.0.2.
      При изменении Процедуры на функцию(как показано на скрине) возникает другая ошибка:Function returned without value

      Удалить