Data Display Widget Embedding

From Dryad wiki
Jump to: navigation, search
Status: In final testing

Data Display Widget embedding how-to

Overview

This page presents markup and interface calls to embed a Data Display Widget object in a web page.

See Data Display Widget Technology for details on the technical implementation of the widget.

Usage

See Supported File Types and Size for a listing of the data content types currently supported for display by the widget.

The data file deposited with Dryad DOI doi:10.5061/dryad.6p76c3pb/8 may be viewed in an HTML page by adding two elements to the page:

  • a "wapper" element, below div#widget-frame-1, used to contain and dimension the widget
  • a Javascript call used to retrieve and inject the widget
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<!-- widget location in document body -->
<div id="widget-frame1" style="height:600px"></div>

...
<!-- async Javascript call to retrieve widget content -->
<script async="true" type="text/javascript"
src="http://datadryad.org/widgets/v1/display/doi:10.5061/dryad.6p76c3pb/8/loader.js?
referrer=JDryadTestng&wrapper=widget-frame1"></script>
...
</body>
</html>

Configuration

A call to the widget interface using loader.js requests Dryad content associated with the provided Dryad DOI and passes parameters identifying the requester and the element in the body to contain the widget. No other parameters are recognized by the Display Widget interface.

The size and layout of a displayed widget is constrained by the enclosing element, as done above by using a @style attribute. The widget has been implemented to fill its enclosing space completely, and has been implemented to adjust its layout (buttons on side or buttons on bottom) according to the width provided to the widget.

Please see the widget preview page for an interactive preview of Dryad content that allows adjusting widget dimensions.