Создание плагина в 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. Запускаем страницу: