XBio:D Javascript Library Reference - Revision history

Jcora: /* Loading the xBio:D JavaScript Library */

2015-07-22T19:33:16Z

‎Loading the xBio:D JavaScript Library

Tyler at 21:17, 1 May 2015

2015-05-01T21:17:07Z

Tyler: /* Example */

2015-05-01T18:52:46Z

‎Example

Tyler at 18:50, 1 May 2015

2015-05-01T18:50:22Z

Tyler at 19:37, 27 April 2015

2015-04-27T19:37:41Z

Tyler: /* Options */

2015-04-21T14:41:23Z

‎Options

Tyler: /* Valid Color Options */

2015-04-21T14:40:50Z

‎Valid Color Options

Tyler: /* Options */

2015-04-21T14:38:58Z

‎Options

Tyler at 14:11, 21 April 2015

2015-04-21T14:11:36Z

Tyler: /* Options */

2015-04-20T21:28:59Z

‎Options

@@ Line 91: / Line 91: @@
 === Loading the xBio:D JavaScript Library ===
-  <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://xbiod.osu.edu/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 will be using xBio:D applications.

@@ Line 156: / Line 156: @@
 * info_element_id - ID String (defaults to element_id parameter)
 * generalFormat - HTML String
-* markers - String ('spiderfy' or 'cluster'). Require additional dependencies (see below).
+* markers - String ('spiderfy' or undefined). Requires additional dependencies (see below).
 * offset - Number
 * limit - Number
@@ Line 164: / Line 164: @@
 ===== Additional Requirements =====
 * [https://developers.google.com/maps/documentation/javascript/ Google Maps API v3]
 * [https://github.com/jawj/OverlappingMarkerSpiderfier Overlapping Marker Spiderfier]
@@ Line 437: / Line 436: @@
 * options
 ===== Options =====
-* pnids ([[OJ_Break API Data Type Glossary#pnid_2|?]]) - array of number
+* place_id - Number
-* inst_id ([[OJ_Break API Data Type Glossary#inst_id_2|?]])
+* inst_id - Number
-* precDecimals ([[OJ_Break API Data Type Glossary#precDecimals|?]])
+* use_sex_icons - Boolean_flag
-* showChildren ([[OJ_Break API Data Type Glossary#showChildren|?]])
+* show_children - Boolean_flag
 ===== Additional Requirements =====
 * [https://developers.google.com/maps/documentation/javascript/ Google Maps API v3]
 * [https://github.com/jawj/OverlappingMarkerSpiderfier Overlapping Marker Spiderfier]
@@ Line 457: / Line 459: @@
 ===== Options =====
-* show_num_spms
+* show_num_spms - Boolean_flag
-* inst_id
+* inst_id - Number
-* show_syns
+* show_syns - Boolean_flag
-* show_fossils
+* show_fossils - Boolean_flag
-* types_only
+* types_only - Boolean_flag
 * nodeColor - string or hexadecimal number
 * backgroundColor - string or hexadecimal number
-* handler_url - URL string
+* handler_url - File path string/URL
 * size - JavaScript object with two string properties:
 ** width - either a number or string in pixels

@@ Line 11: / Line 11: @@
 An easy way to become familiar with the xBio:D JS library is to see a simple example of a web application which uses two xBio:D methods. 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 [https://developers.google.com/maps/documentation/javascript/tutorial Google Maps JavaScript API]. The second method used in the example is a listing of included taxa for a specified tnuid by using the OJ_Break method [[OJ_Break API Reference#getIncludedTaxa|getIncludedTaxa]].
-<!--[[File:Xbiodjslib.png|alt=source code for a simple xBio:D web application.|Simple example of web application.]]-->
+[[File:wiki-test.png|alt=source code for a simple xBio:D web application.|Simple example of web application.]]
 <!--  1 <span style="color:purple"><!DOCTYPE HTML></span>

@@ Line 13: / Line 13: @@
 <!--[[File:Xbiodjslib.png|alt=source code for a simple xBio:D web application.|Simple example of web application.]]-->
-<span style="color:purple"><!DOCTYPE HTML></span>
+<!--  1 <span style="color:purple"><!DOCTYPE HTML></span>
 <span style="color: blue"><html></span>
 <span style="color: blue"><head></span>
@@ Line 57: / Line 57: @@
     <span style="color: blue"><div </span><span style="color: purple">id</span>=<span style="color: green">"included_id"</span><span style="color: blue">/></span>
 <span style="color: blue"></body></span>
-<span style="color: blue"></html></span>
+<span style="color: blue"></html></span>-->

← Older revision		Revision as of 19:37, 27 April 2015
Line 485:		Line 485:

	In this example, a default web page URL is given (note the use of http:// at the beginning). When provided a URL, the taxon hierachy animation will present a link button to the top right of the node that is currently being highlighted (see image below). This link will not be present if a URL is not specified. If this button is clicked, the ''handler_url'' link will be followed.		In this example, a default web page URL is given (note the use of http:// at the beginning). When provided a URL, the taxon hierachy animation will present a link button to the top right of the node that is currently being highlighted (see image below). This link will not be present if a URL is not specified. If this button is clicked, the ''handler_url'' link will be followed.
−
−	~~[[File:link_button_tut.png\|none\|frame\|Link button present on highlighted node. This button would not be present if handler_url option was not specified.]]~~
−

	====== Size Option ======		====== Size Option ======

@@ Line 469: / Line 469: @@
 ** height - either a number of string in pixels
 * imagePath - string of relative path to a folder containing necessary images.
-* widget_options
+* widget_options - Object
 ===== Additional Requirements =====

@@ Line 478: / Line 478: @@
 ===== Additional Information =====
 ====== URL Handler Option ======
 The ''handler_url'' option can be used to allow the nodes to have links attached to them, so that a user may follow the link for more information on that specific taxon.

@@ Line 110: / Line 110: @@
   <span style="color: blue">var</span> taxon = <span style="color: red">new</span> xbiod.taxon();
-An object derived from a namespace is instatiated using the '''new''' keyword and a namespace's constructor. The JavaScript namespace that represents the xBio:D visual applications is the '''visual''' namespace/component and similarly the namespace that represents the xBio:D taxon applications is the '''taxon''' namespace/component. Access to functionality from either of these components requires an object with a reference to that component. These objects allow methods from each component to be called to the web page.
+An object derived from a class is instatiated using the '''new''' keyword and a namespace's constructor. The JavaScript namespace that represents the xBio:D visual applications is the '''visual''' namespace/component and similarly the namespace that represents the xBio:D taxon applications is the '''taxon''' namespace/component. Access to functionality from either of these components requires an object with a reference to that component. These objects allow methods from each component to be called to the web page.
 ==== Calling Application Methods ====