Difference between revisions of "XBio:D Javascript Library Reference"

From xBio:D Wiki
Jump to navigation Jump to search
(→‎Example)
(→‎Example)
Line 11: Line 11:
 
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 [[OJ_Break API Reference#getLocalities|getLocalities]] for a specified [[OJ_Break API Data Type Glossary#tnuid_2|tnuid]] and displays the data onto an interactive map. Read more about the Google Maps Javascript API [https://developers.google.com/maps/documentation/javascript/tutorial here]. The second application used in the example is a listing of included taxa for a specified [[OJ_Break API Data Type Glossary#tnuid_2|tnuid]] by using the OJ_Break method [[OJ_Break API Reference#getIncludedTaxa|getIncludedTaxa]] (be patient for this method to load).
 
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 [[OJ_Break API Reference#getLocalities|getLocalities]] for a specified [[OJ_Break API Data Type Glossary#tnuid_2|tnuid]] and displays the data onto an interactive map. Read more about the Google Maps Javascript API [https://developers.google.com/maps/documentation/javascript/tutorial here]. The second application used in the example is a listing of included taxa for a specified [[OJ_Break API Data Type Glossary#tnuid_2|tnuid]] by using the OJ_Break method [[OJ_Break API Reference#getIncludedTaxa|getIncludedTaxa]] (be patient for this method to load).
  
−
[[File:Xbiodjslib.png|alt=source code for a simple xBio:D web application.|Simple example of web application.]]
+
<!--[[File:Xbiodjslib.png|alt=source code for a simple xBio:D web application.|Simple example of web application.]]-->
 +
  <nowiki></nowiki><span style="color: purple"><!DOCTYPE HTML></span><nowiki>
 +
  </nowiki><span style="color: blue"><html></span><nowiki>
 +
  </nowiki><span style="color: blue"><head></span><nowiki>
 +
</nowiki><span style="color: blue"><meta </span><nowiki>charset=</nowiki><span style="color: green">"UTF-8"</span><nowiki></nowiki><span style="color: blue">/></span><nowiki>
 +
</nowiki><span style="color: blue"><title></span><nowiki>xBio:D API test</nowiki><span style="color: blue"></title></span><nowiki>
 +
</nowiki><span style="color: blue"><link </span><nowiki>rel=</nowiki><span style="color: green">"stylesheet"</span><nowiki> type="text/css" href="</nowiki><span style="color: green"><nowiki>xbiod.css</nowiki></span><nowiki>"</nowiki><span style="color: blue">></span><nowiki>
 +
</nowiki><span style="color: blue"><script </span><nowiki> type=</nowiki><span style="color: green">"text/javascript"</span><nowiki>
 +
src="</nowiki><span style="color: green"><nowiki>http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js</nowiki></span><nowiki>"
 +
</nowiki><span style="color: blue"></script></span><nowiki>
 +
</nowiki><span style="color: blue"><script </span><nowiki>type="text/javascript"
 +
src="</nowiki><span style="color: green"><nowiki>https://maps.googleapis.com/maps/api/js?sensor=false</nowiki></span><nowiki>"
 +
</nowiki><span style="color: blue"></script></span><nowiki>
 +
</nowiki><span style="color: blue"><script </span><nowiki> type=</nowiki><span style="color: green">"text/javascript"</span><nowiki> src="</nowiki><span style="color: green"><nowiki>xbiod.js</nowiki></span><nowiki>"></nowiki><span style="color: blue"></script></span><nowiki>
 +
</nowiki><span style="color: blue"><script></span><nowiki>
 +
// Call the loader for the current page
 +
$(document).ready(loader);
 +
 
 +
function loader() {
 +
 
 +
// Initialize xBio:D library
 +
xbiod.init([</nowiki><span style="color: green">'visual'</span><nowiki>,</nowiki><span style="color: green">'taxon'</span><nowiki>], </nowiki><span style="color: green; font-style: italic">'{API_KEY}'</span><nowiki>, function() {
 +
</nowiki><span style="color: blue">var</span><nowiki> tnuid = </nowiki><span style="color: pink">605</span><nowiki>;
 +
 
 +
// Load xBio:D components
 +
</nowiki><span style="color: blue">var</span><nowiki> visual = </nowiki><span style="color: red">new</span><nowiki> xbiod.visual();
 +
</nowiki><span style="color: blue">var</span><nowiki> taxon = </nowiki><span style="color: red">new</span><nowiki> xbiod.taxon();
 +
 +
// Load map
 +
visual.showGoogleMap(</nowiki><span style="color: green">'map_id'</span><nowiki>, tnuid);
 +
 +
// Load included taxa
 +
taxon.showIncludedTaxa(</nowiki><span style="color: green">'included_id'</span><nowiki>, tnuid, {show_num_spms: </nowiki><span style="color: green">'Y'</span><nowiki>,
 +
    taxonFormat: </nowiki><span style="color: green">'<a href="test.html?tnuid=%tnuid%">%taxon%</a> %author% - %num_spms%'</span><nowiki>
 +
});
 +
});
 +
}
 +
</nowiki><span style="color: blue"></script></span><nowiki>
 +
    </nowiki><span style="color: blue"></head></span><nowiki>
 +
    </nowiki><span style="color: blue"><body></span><nowiki>
 +
</nowiki><span style="color: blue"><div </span><nowiki>id=</nowiki><span style="color: green">"map_id"</span><nowiki></nowiki><span style="color: blue">/></span><nowiki>
 +
</nowiki><span style="color: blue"><div </span><nowiki>id=</nowiki><span style="color: green">"included_id"</span><nowiki></nowiki><span style="color: blue">/></span><nowiki>
 +
    </nowiki><span style="color: blue"></body></span><nowiki>
 +
    </nowiki><span style="color: blue"></html></span><nowiki></nowiki>
  
 
[http://osuc.biosci.ohio-state.edu/JSLib/xbiod_lib/test.html View simple example here (test.html)]
 
[http://osuc.biosci.ohio-state.edu/JSLib/xbiod_lib/test.html View simple example here (test.html)]
Line 24: Line 67:
 
* The applications are created by calling there respective methods via the xBio:D library components (line 29 & 32 - 33)
 
* 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.
 
These steps will be explained below.
 +
 +
=== Declaring Application as HTML 5 ===
 +
It is recommended for

Revision as of 17:37, 30 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.

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>
    </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

Retrieved from "https://xbiod.osu.edu/index.php?title=XBio:D_Javascript_Library_Reference&oldid=1073"