In the previous recipe, you could see how a JavaScript library like jQuery can be used within APEX. Other JavaScript libraries can also be used but they first need to be downloaded and installed. To make life easier for people who intend to use the various JavaScript libraries, Google introduced the Google API. Google put the most well-known JavaScript libraries online so you can reference them now without installing them into your own APEX environment! By the way, you can also use the JavaScript libraries in other languages like PHP or just plain HTML with JavaScript.
To demonstrate this, we will make use of the Scriptaculous library. Suppose you have the following intranet home page:
We will let the "Latest news" section pulsate on loading the homepage.
- In the application builder, edit page 1.
- In the page section, click on the edit icon.
- In the HTML header and body section, enter the following code in the HTML header text area:
<script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("prototype", "1"); google.load("scriptaculous", "1"); function pulsate_news() { Effect.Pulsate('news', {'pulses' : 15, 'duration' : 3.0}); } google.setOnLoadCallback(pulsate_news); </script> - [1346_03_11.txt]
First, you need to load the libraries. This can be done with the google.load() function. The first argument is the library and the second argument is the version. In this case, we will use version 1 of the Scriptaculous Javascript library. By the way, Scriptaculous makes use of the Prototype library so this library has to be loaded first. The function pulsate_news() calls the pulsate effect, and the function pulsate_news is called by the google.setOnLoadCallback() function. The first argument of the pulsate_news() function is the IDof the affected div. The second argument is a list of options you can set. In this case, the news region pulsates 15 times in 3 seconds.
- Click the Apply changes button.
Now we must set the ID of the affected div to "news".
- Click the edit region latest news.
- In the attributes section, enter news in the static ID text field.
- Click the Apply changes button.
- Run the page and see the "Latest news" region pulsate.
Load the necessary libraries with the google.load function. After that, create a function which calls the effect. To start the effect, use the google.setOnLoadCallBack. The last step is to give the affected object (a div or an item or other DOM object) an ID which will be used in the call to the JavaScript effect.