Difference between revisions of "XBio:D Javascript Library Reference"
(→Example) |
(→Example) |
||
| Line 49: | Line 49: | ||
} | } | ||
</nowiki><span style="color: blue"></script></span><nowiki> | </nowiki><span style="color: blue"></script></span><nowiki> | ||
| − | </nowiki><span style="color: blue"><style </span | + | </nowiki><span style="color: blue"><style </span> <span style="color: purple">type</span>=<span style="color: green">"text/css"</span><span style="color: blue">></span><nowiki> |
html { height: </nowiki><span style="color: pink">100</span><nowiki>% } | html { height: </nowiki><span style="color: pink">100</span><nowiki>% } | ||
body { height: </nowiki><span style="color: pink">100</span><nowiki>%; margin: </nowiki><span style="color: pink">0</span><nowiki>; padding: </nowiki><span style="color: pink">0</span><nowiki> } | body { height: </nowiki><span style="color: pink">100</span><nowiki>%; margin: </nowiki><span style="color: pink">0</span><nowiki>; padding: </nowiki><span style="color: pink">0</span><nowiki> } | ||
| Line 77: | Line 77: | ||
=== Declaring Application as HTML 5 === | === Declaring Application as HTML 5 === | ||
It is recommended for any web application to be declared as a true ''DOCTYPE''. This can easily be done by using the HTML 5 ''DOCTYPE'' as seen below. Please refer to the [https://developers.google.com/maps/documentation/javascript/tutorial#HTML5 Google Maps Documentation on HTML 5] for more info. | It is recommended for any web application to be declared as a true ''DOCTYPE''. This can easily be done by using the HTML 5 ''DOCTYPE'' as seen below. Please refer to the [https://developers.google.com/maps/documentation/javascript/tutorial#HTML5 Google Maps Documentation on HTML 5] for more info. | ||
| − | |||
<span style="color: purple"><!DOCTYPE html></span> | <span style="color: purple"><!DOCTYPE html></span> | ||
| Line 94: | Line 93: | ||
<span style="color: blue"><script </span><span style="color: purple">type</span>=<span style="color: green">"text/javascript"</span> <span style="color: purple">src</span>=<span style="color: green"><nowiki>"http://osuc.biosci.ohio-state.edu/JSLib/xbiod_lib/xbiod.js"</nowiki></span><span style="color: blue">></script></span> | <span style="color: blue"><script </span><span style="color: purple">type</span>=<span style="color: green">"text/javascript"</span> <span style="color: purple">src</span>=<span style="color: green"><nowiki>"http://osuc.biosci.ohio-state.edu/JSLib/xbiod_lib/xbiod.js"</nowiki></span><span style="color: blue">></script></span> | ||
| − | The URL in the '''<script>''' tage above is the location of the xBio:D Javascript Library which is a required file for this simple example and any web application that | + | The URL in the '''<script>''' tage above is the location of the xBio:D Javascript Library which is a required file for this simple example and any web application that will be using xBio:D applications. |
| + | |||
| + | === Initializing the xBio:D JS Library === | ||
| + | <nowiki></nowiki><span style="color: blue"><script></span><nowiki> | ||
| + | // Call the loader for the current page | ||
| + | $(document).ready(loader); | ||
| + | |||
| + | </nowiki><span style="color: blue">function</span><nowiki> loader() { | ||
| + | |||
| + | // Initialize xBio:D library | ||
| + | xbiod.init([</nowiki><span style="color: green">'visual'</span>,<span style="color: green">'taxon'</span>], <span style="color: green; font-style: italic">'{API_KEY}'</span>,<nowiki> function() {</nowiki> | ||
| + | |||
| + | To begin using the xBio:D library, first the components need to be loaded. This is done through the xBio:D ''init()'' function which takes three parameters: an array of the components to be loaded, an API access key, and a callback function. In this example, the ''visual'' and ''taxon'' resources are passed to the ''init()'' function for loading. | ||
== References == | == References == | ||
<!--<references />--> | <!--<references />--> | ||
Revision as of 15:05, 31 July 2014
Introduction
The XBio:D Javascript library offers the functionality to create rich, dynamic, and interactive features for use with the OJ_Break API. The OJ_Break API provides procedures to retrieve data within the xBio:D database, and the xBio:D JS library is how that data gets presented. Users planning on working with the xBio:D JS library should be familiar with Javascript programming and object-oriented programming.
Contents
API Access
All functionality in the xBio:D JS library depends on access of data from the OJ_Break API. See OJ_Break API Access for an overview of the API and how to obtain an API access key.
Example
An easy way to become familiar with the xBio:D JS library is to see a simple example involving two web applications. The first is a Google Maps widget which takes data from the OJ_Break method getLocalities for a specified tnuid and displays the data onto an interactive map. Read more about the Google Maps Javascript API here. The second application used in the example is a listing of included taxa for a specified tnuid by using the OJ_Break method getIncludedTaxa (be patient for this method to load).
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"/> <title>xBio:D API test</title> <link rel="stylesheet" type="text/css" href="xbiod.css"> <script type="text/javascript"> src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" </script> <script type="text/javascript"> src="https://maps.googleapis.com/maps/api/js?sensor=false" </script> <script type="text/javascript" src="http://osuc.biosci.ohio-state.edu/JSLib/xbiod_lib/xbiod.js"></script> <script> // Call the loader for the current page $(document).ready(loader); function loader() { // Initialize xBio:D library xbiod.init(['visual','taxon'], '{API_KEY}', function() { var tnuid = 605; // Load xBio:D components var visual = new xbiod.visual(); var taxon = new xbiod.taxon(); // Load map visual.showGoogleMap('map_id', tnuid); // Load included taxa taxon.showIncludedTaxa('included_id', tnuid, {show_num_spms: 'Y', taxonFormat: '<a href="test.html?tnuid=%tnuid%">%taxon%</a> %author% - %num_spms%' }); }); } </script> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_id { height: 50% } #included_id { height: 50% } </style> </head> <body> <div id="map_id"/> <div id="included_id"/> </body> </html>
View simple example here (test.html)
There are a few things to note about this example:
- The <!DOCTYPE html> tag is necessary for HTML 5 applications (line 1)
- Jquery 1.8 library is included with a <script> tag (line 7 - 9)
- The Map API Javascript is included with a <script> tag (line 10 - 12)
- The xBio:D JS library is included with a <script> tag (line 13)
- A function called loader intializes the xBio:D resources when the web page has finished loading (line 16)
- Two objects where created to access the xBio:D components called visual and taxon (line 25 - 26)
- The applications are created by calling there respective methods via the xBio:D library components (line 29 & 32 - 33)
- In the <body> there are two <div> elements which create areas to hold the widgets. The first is called map_id and the second is included_id. (line 40 - 41)
These steps will be explained below.
Declaring Application as HTML 5
It is recommended for any web application to be declared as a true DOCTYPE. This can easily be done by using the HTML 5 DOCTYPE as seen below. Please refer to the Google Maps Documentation on HTML 5 for more info.
<!DOCTYPE html>
Loading JQuery Library
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
The URL in the <script> tag above is the location of the Javascript file which allows JQuery 1.8 to run on the web application. JQuery is used in the xBio:D JS library to get methods from the OJ_Break API and other scripts. It is a necessary component of any web app that intends to use xBio:D functionality.
Loading the Google Maps API
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
The URL in the <script> tag above is the location of the Javascript file which will load all the necessary defintions to allow access to the Maps API. Normally, an access key would need to be provided in order to use the Maps library. See Loading the Maps API for more info. This script file is necessary for web apps that use Google Maps as part of the application. It is a necessary file to have in this simple example, but is not required for all xBio:D applications.
Loading the xBio:D Javascript Library
<script type="text/javascript" src="http://osuc.biosci.ohio-state.edu/JSLib/xbiod_lib/xbiod.js"></script>
The URL in the <script> tage above is the location of the xBio:D Javascript Library which is a required file for this simple example and any web application that will be using xBio:D applications.
Initializing the xBio:D JS Library
<script> // Call the loader for the current page $(document).ready(loader); function loader() { // Initialize xBio:D library xbiod.init(['visual','taxon'], '{API_KEY}', function() {
To begin using the xBio:D library, first the components need to be loaded. This is done through the xBio:D init() function which takes three parameters: an array of the components to be loaded, an API access key, and a callback function. In this example, the visual and taxon resources are passed to the init() function for loading.
