Saturday, 10 November 2012

Oracle Apex 4.2 JQM Smartphone UI

Put a bit of a swing in your Oracle Apex mobile apps by using the JQM smartphone UI application interface now available in Oracle Apex 4.2.

The interface enables you to put page transitions to your apps, define JQuery lists and much more. Here is the option:



I have been playing around creating mobile apps in Oracle Apex for a while now trying various ways such as adding Javascript to HTML content regions, running javascript from PL/SQL, you name it. The JQM smartphone UI is a great improvement. See for yourself. Below is the JQM smartphone version of my famous :-) beachmap app (Twitter: @beachmap) Currently you can only browse beach locations, soon I will add ability to add your own beaches (crowdsourcing).

Enjoy the JQM transitions!





2 comments:

Anonymous said...

Nice application. Can we know the logic how you used map displaying in your application?

Kubilay Tsil Kara said...

Hi Anonymous

The way I display the map is via an HTML region in a page where I just drop the "Google Maps JavaScript API v3 Example: Map Simple" code. Then I pass the variables between Javascript and Apex with the standard notation (substition variables in this case) I am handling variables in both frameworks like this:

// Javascript extract
center: new google.maps.LatLng(&P5_COORDS.)

For the full code which I have pasted in the HTML Region. See https://developers.google.com/maps/documentation/javascript/examples/

Of course, this is to display the map only after you get the coordinates from Google. I just pass the coordinates in &P5_COORDS.. To get the coordinates you need to make a call to Google Geocoding API. This is happening at the point where you add the beach name. The call is done via the PL/SQL proc entered as Page process at the 'On Load - Before Regions' point. The following procedure gets me the coordinates (latlong) which I then pass between pages, store in database table as neeeded and draw the maps. To draw the map you just need to know the coordinates. See how they are passed between the find & display pages in the URL.


DECLARE
l_address varchar2(4000);
l_url varchar2(32000);
l_response varchar2(3200);
BEGIN
l_address:=APEX_UTIL.URL_ENCODE(:P10_X_BEACH_NAME);
l_address := replace(l_address,' ','+');
l_url := 'http://maps.google.com/maps/geo?q='||l_address||'&'||'output=csv';
l_response := utl_http.request(l_url, APEX_APPLICATION.G_PROXY_SERVER);
dbms_output.put_line(l_response);
l_response:=substr(l_response,instr(l_response,',',1,2)+1);
:P10_H_LATLONG := l_response;
END;

Cheers

Kubilay