Page 293 - DCAP109_GRAPHIC_TOOLS

Graphic Tools

Notes <link href=”SpryAssets/atom.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”SpryAssets//SpryData.js”></script>
<script type=”text/javascript” src=”SpryAssets//SpryHTMLDataSet.js”></
script>
<script type=”text/javascript” src=”SpryAssets//SpryTooltip.js”></
script>
<script type=”text/javascript” src=”SpryAssets/atom_functions.js”></
script>
z atom.css contains the bulk of the CSS used in the page functionality.

z SpryData.js is the main Spry functionality file.
z SpryHTMLDataSet.js provides the functionality for using HTML tables as data sets.
z SpryTooltip.js provides the code for the Tooltip widget.

z atom_functions.js contains the three extra functions used for filtering the data.
The CSS File
A big part of the functionality depends on class names. Open the atom.css file.
You see a set of class names that are named after the different Element_Type references.
This allows us to color the different element types using a data reference, since the value
of the data reference and the class name are identical. Other classes are used for positioning
things correctly within the element div. (The element div is the div tag that contains the
data for a single element.)
Data Sets

The Periodic Table uses four data sets:
<script type=”text/javascript” language=”javascript”>
var ds1 = new
Spry.Data.HTMLDataSet(null,”atoms”);
var types = new
Spry.Data.HTMLDataSet(null,”atoms”,{distinctOnLoad:true,
distinctFieldsOnLoad:[‘Element_Type’]});
var periods = new
Spry.Data.HTMLDataSet(null,”atoms”,{distinctOnLoad:true,
distinctFieldsOnLoad:[‘Period’]});
var groups = new
Spry.Data.HTMLDataSet(null,”atoms”,{distinctOnLoad:true,
distinctFieldsOnLoad:[‘Group’],sortOnLoad:”Group”,sortOrderOnLoad:”asce
nding”}); groups.setColumnType(“Group”,”number”); ...
</script>

z var ds1 = new Spry.Data.HTMLDataSet(null,”atoms”);
This is the main data set. It defines a standard HTML data set. We use null in the URL
parameter because the table is on the same page. atoms is the ID of the data table.
z var types = new Spry.Data.HTMLDataSet(null,”atoms”,
{distinctOnLoad: true, distinctFieldsOnLoad:[‘Element_Type’]});

Contd...

286 LOVELY PROFESSIONAL UNIVERSITY