Louis-Guillaume's Blog

Using jQuery to handle AJAX request and JSON response is a breeze. After completing yesterday's demo, I discovered the Google Visualization API . I decided to display a report and feed the report with data requested using AJAX. For this demo, I'll display an Intensity Map with Visitors Locations per Country. You can see a working example of the AJAX display visitors locations w/ Google Visualization API demo . 1) The Intensity Map Create an HTML Region. The source is: <div id="intensitymap_div" class="google-visualization-intensitymap-container" style="width:440px; height:264px;" /> 2) JavaScript Code <script src="http://www.google.com/jsapi"></script> <script> // Load jQuery google.load("jquery", "1.2.6", {uncompressed:false}); // Load Google Visualization API google.load('visualization', '1', {packages: ['table', 'intensitymap']}); </script> <script...

I decided to push the AJAX integration a little bit further... Using jQuery and Google AJAX Language API , I was able to translate in "real time" a report. For my example, I decided to translate the records of a table containing the different states of the USA. I realize that this data is not the best for translation demonstration because many words are almost the same no matter what is the spoken language. To have better results, translate the data to Arabic, Chinese, Japanese or Korean. You can try a working example of the Dynamic Translation w/ Google AJAX Language API demo . 1) Report (Region Definition) Source: SELECT st ,initcap(state_name) AS state_name_en ,initcap(state_name) AS state_name FROM demo_states N.B. I had to use the initcap function on my data. Google translation engine is case sensitive. (I need to find more documentation to help with this issue.) 2) Report (Column Attributes) STATE_NAME_EN: Column Formatting > CSS Class: translate_src STATE_NA...

I previously posted an article called " How to... Load the jQuery JavaScript Library ". I don't think a gave enough information about why I decided to use the Google AJAX Libraries API . I'll explain a little more this time. I decided to try the Google AJAX Libraries API because I personally like Google services. :) I decided to keep using this library because I don't need to worry about the hosting of my .js files. It's also possible to call a compressed or uncompressed version of jQuery and jQuery UI . It's also possible to call older version of a library. I didn't have bad/slow speed issue using the Google AJAX Libraries API. I'm using this technique for my web development. If I have an application working on an Intranet, I will host the .js file on my web server. links: http://code.google.com/apis/ajaxlibs/ http://code.google.com/apis/ajaxlibs/documentation/

Last week, I write about using jQuery UI Tabs to show each region of my page under a tab . Denes Kubicek send me a message asking if it was possible to display more than one region under a single tab. The answer is yes. But how? I tried 3 different ways to do it. I'll first explain the better/simpliest solution. First, I made a page copy of my last demo (page 30). Don't forget to add the static ID for the regions on the copied page (page copy removes regions static ID)... this is probably a bug in APEX. 1) First solution (working) A. I modified the source of the first region called "TABS". The Region Source is: <div id="my_tabs"> <ul> <li><a href="#form_report"><span>My Form & Report</span></a></li> <li><a href="#my_calendar"><span>My Calendar</span></a></li> </ul> </div> B. Add the jQuery code to my page HTML header. <script src="...

The official release of Insum's jQuery Demo Application was a week ago. What can I say? Thanks to the APEX community for making this project a real success! Using Google Analytics , I was able to track your every move MUHAHAA! :) We received over 300 unique visitors during this period. Thanks again. Now, back to work!

It's possible to reduce the space required by regions on a page. How? Use tabs to dynamically choose which region to display. jQuery UI Tabs makes it easy for us to do so. You can try a working example of my jQuery UI Tabs in APEX demo. 1. For this example, I need 4 regions. The first region called "TABS" is an HTML Region with template " No Template ". The Region Source is: <ul> <li><a href="#my_form"><span>My Form</span></a></li> <li><a href="#my_report"><span>My Report</span></a></li> <li><a href="#my_calendar"><span>My Calendar</span></a></li> </ul> This list holds 3 tabs. One tab for each of the region I want to display. Notice the "ahref" values. Each value correspond to a region static ID. 2. Now, I create the 3 regions I want to display using the tabs. First, create "My Form" Region an...

When using AJAX to request new page content, loading animations are useful because the users won't see their browser's status bar loading animation. You can try a working example of my AJAX get Page Report w/ loading animation demo . 1. Add on your page a "Report Region" using an SQL Query for the data source. Identification > Static ID: p27_report_drop Source > Region Source: select null from dual where 1 = 2 Header and Footer > Region Header: <img src="http://www.blogger.com/i/processing3.gif" /> You should see an empty report with a loading animation. 2. Add the jQuery code to request page 27 Report Region. <script src="http://www.google.com/jsapi"></script> <script> // Load jQuery google.load("jquery", "1.2.6"); </script> <script> $(function() { // send request $.post("wwv_flow.show", {p_flow_id:$('#pFlowId').attr(...

Social applications are more and more popular. Users want to feel they are not alone using the application. A good way to achieve this is to give them the possibility to rate an article. Rating something shouldn't be a long process. Users don't expect to have a complete page reload for such a small action. The solution is to use AJAX to send the user's rating and to retrieve the average rating. jQuery will be used to handle events, send AJAX requests, and display rating choices and results. You can try a working example of my dynamic rating system . 1. Add the rating choices (I decided to use the stars images found in the /i/ of APEX). You'll probably want to add this "controller" at the top or the bottom of the content you want the users to rate. <div id="rating"> Please rate: <img id="rating_choices" src="/i/stars5.gif" usemap="#map_rating_choices" /> </div> <map id="map_rating_choices...

Like any JavaScript API, jQuery needs to be loaded on your web page. To do so, you can host the .js file on your server or call it using Google AJAX API Loader . Using Google's AJAX Libraries API is my favorite choice when I am dealing with an online application. This might not be possible for an intranet application. This is the HTML code to load jQuery using Google's AJAX API Loader. <script src="http://www.google.com/jsapi"></script> <script> // Load jQuery google.load("jquery", "1.2.6"); </script>

With my colleagues at Insum Solutions , we started a demo application of what can be done with jQuery a JavaScript Library. So far, I have been impressed by the simplicity of the tool. Our demo application of jQuery and APEX is available right now! Give it a try, the url is: http://www.insum.ca/jquery . We are waiting for your comments and suggestions. You can contact us at demo@insum.ca .

Hello APEX enthusiasts! This is the first article of many. I will use this blog to help the APEX community achieve more. I will write basic and advanced guides/tutorials that should be interesting for both APEX beginners and pros. I hope we will have a great journey together! ;)

Welcome to my personal blog.