Enhancing your application with the Google API>_Oracle APEX Cookbook（Second Edition）-QQ阅读男生中文轻小说网

上QQ阅读APP看书，第一时间看更新

Enhancing your application with the Google API>

In the previous recipe you could see how a JavaScript library such as jQuery can be used within APEX. Other JavaScript libraries can also be used, but they need first 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 puts 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 such as 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.

How to do it...

In the Application Builder, edit page 1.
In the Page section, click on the Edit icon.
In the HTML Header section, enter the following code in the HTML Header textarea:
```
<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>
[9672_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 ID of 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 on the Apply Changes button.

Now we must set the ID of the affected div to news.

Click on the edit region link of the latest news region.
In the Attributes section, enter news in the Static ID text field.
Click on the Apply Changes button.
Run the page and see the Latest news region pulsate.

How it works...

Load the necessary libraries with the google.load function. After that, create a function that calls the effect. To start the effect, use google.setOnLoadCallBack. The last step is to give the affected object (a div or an item or other DOM object) an ID that will be used in the call to the JavaScript effect.

There's more...

For APEX 4.2, replace the code in step 3 by the following:

<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>

Add the following to the Execute when Page Loads textarea in the JavaScript section:

Effect.Pulsate('news', {'pulses' : 15, 'duration' : 3.0});