New Plugin: Image Gallery

Image Gallery Pluign

   Image Gallery is plugin to display images based on prettyPhoto javascript library.

  How to Use

  Create a Region, choose Type "Image Gallery[Plug-In]" and in Region source enter following code:

select 'f?p=&APP_ID.:0:&APP_SESSION.:APPLICATION_PROCESS=GETFILE:::FILE_ID:'||
your_image_id SHOW_IMAGE,
your_image_name FILENAME,
your_image_id IMAGE_ID,
 APEX_UTIL.PREPARE_URL(
    p_url => 'f?p=' ||:APP_ID || ':4:'||:APP_SESSION||'::NO::P4_ID:'||your_image_id,
    p_checksum_type => 'SESSION') IMAGE_URL
from your_table

  Create Application Process onDemand GETFILE with following code:

    begin

    for c1 in (select *

                 from your_table

                where id = :FILE_ID) loop

        --

        sys.htp.init;

        sys.owa_util.mime_header( c1.mime_type, FALSE );

        sys.htp.p('Content-length: ' || sys.dbms_lob.getlength( c1.content));

        sys.htp.p('Content-Disposition: attachment; filename="' || c1.filename || '"' );

        sys.htp.p('Cache-Control: max-age=3600');  -- tell the browser to cache for one hour, adjust as necessary

        sys.owa_util.http_header_close;

        sys.wpg_docload.download_file( c1.content );

    

        apex_application.stop_apex_engine;

    end loop;

    end;

 
  Create Application Item FILE_ID where we store ID of image

Options 

1. Style

   you can choose different style of prettyPhoto image Gallery


2. Autoplay slideshow

   with or without auto slideshow

3. Animation speed

4. Slideshow

    Duration of slideshow in miliseconds

5.Link icon   Icon for random link

How to get it 

Visit apex.world plug-in page

Preview

Here is the link to a working demo:  

demo username/password: demo/demo

New Plugin: Item Spinner

Item-Spinner

Item Spinner is item based on JQuery UI widget spinner integrated with mousewheel features. its allow you to enter value, choose value with click on arrows or choose your value with mousewhell functionality. You can choose 4 different items type

1. Standard - standard number item
2. Decimal - with decimal numbers
3. Time - Hours spinner
4. Currency

How to Use

Create a Page Item
Choose Type "Item Spinner[Plug-In]"

How to get it 

Visit apex.world plug-in page

Options

Every item type has his own options

standard has this options

min value - set your minimal value
max value - set your maximal value
step - value with which you increase or decrease your current item value

Decimal has this options

min value - set your minimal value
max value - set your maximal value
step - value with which you increase or decrease your current item value
decimal places - number of decimal places
Decimal separator - comma or dot

Time has this option

Clock - 12 Hour or 24 Hour

Currency has this opitons

min value - set your minimal value
max value - set your maximal value
step - value with which you increase or decrease your current item value
Currency - you can choose different typs of currency ( US Dolar, EURO, ...)

Preview

Here is the link to a working demo:  

demo username/password: demo/demo

Oracle Apex and Google Maps

Hi all,

Recently I searched for integration Oracle APEX and Google Maps and found very good blog post from Farzad Soltani on Introduction to Implementing Google Maps in Oracle APEX Applications but that was not what I really need. So I continued to search for solution for "Searching the Address and get results on the Map" and I found it on Maps JavaScript API where you can find other solutions regarding Google maps. By implementation of Integration Google maps with Oracle APEX I followed some steps from Farzad Blog, but here I will explain step by step how I did that.

1. I Created Static Region with static ID : googlemap and placed following code in its
    source:

 <script>  
 var map;  
  function initMap() {  
      map = new google.maps.Map(document.getElementById('googlemap'), {  
          center: {  
            lat: -34.397,  
            lng: 150.644  
            },  
          zoom: 15  
       });  
   var geocoder = new google.maps.Geocoder();  
     geocodeAddress(geocoder, map);  
  }  
  function geocodeAddress(geocoder, resultsMap) {  
     var address = document.getElementById('P2_ADDRESS').value;  
     geocoder.geocode({'address': address}, function(results, status) {  
      if (status === 'OK') {  
       resultsMap.setCenter(results[0].geometry.location);  
       var marker = new google.maps.Marker({  
        map: resultsMap,  
        position: results[0].geometry.location  
       });  
       var infoWindow = new google.maps.InfoWindow({  
           content: address  
        });  
       google.maps.event.addListener(marker, 'click', function () {  
           infoWindow.open(map, marker);  
       });  
      } else {  
       alert('Geocode was not successful for the following reason: ' + status);  
      }  
     });  
    }  
 </script>  
 <script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_APP_KEY&libraries=places&callback=initMap" async defer></script>  

as we can See, we have two JavaScript Function InitMap and geocodeAddress, initMap is for Map initialization and geocodeAddress is for searching address. In initMap we are calling function geocodeAddress in which you can find line of code where we get value from item P2_ADDRESS which we will create later.


In the end of Code, you can find the link 


https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_APP_KEY&libraries=places&callback=initMap

as Farzad in his blog explained

I have written MY_GOOGLE_APP_KEY. A Google API Key must be obtained and placed instead of MY_GOOGLE_APP_KEY.

In order to obtain a Google API Key, refer to https://console.developers.google.com/apis/credentials and get your hands on a KEY by signing up for a free one using your Gmail account.

Second thing in link which is also very important is callback function, where we calling our JavaScript function for map initialization in our example initMap


2. Add custom CSS in inline CSS Page field

  #googlemap {           
     height: 600px !important;         
  }  

3. Another Static Region with Page Item P2_ADDRESS type text and Region Button search

4. Dynamic action with event on Button click Search and actions 

    EXECUTE PL/SQL code

null;

Page Items submit: P2_ADDRESS

    EXECUTE JavaScript Code 

initMap();

Here is the link to a working demo of the method above :  

demo username/password: demo/demo


If You have any Question feel free to ask.

Till next time!