XBio:D Javascript Library Reference
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.
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="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)
- 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)
- 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)
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.
Most current browsers will render content that is declared with this DOCTYPE in "standards mode" which means that your application should be more cross-browser compliant. The DOCTYPE is also designed to degrade gracefully; browsers that don't understand it will ignore it, and use "quirks mode" to display their content.
Note that some CSS that works within quirks mode is not valid in standards mode. In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels. For that reason, the <style> rule was added in the above source code.
