Data Shell Sample

This sample demonstrates the use of the Shell Data Set. The Shell Data Set can be bound to a region like any other data set, but its purpose is to serve as a placeholder for other data sets so that developers can "hot swap" them.

The example below demonstrates the hot swapping of an HTML Data Set with an XML Data Set. Because the 2 data sets load data that use the same column names, nothing special needs to be done within the spry:region used to display the Shell Data Set. All that needs to happen is for some code to be triggered which sets the data set to use *inside* the Shell Data Set.

var ds1 = new Spry.Data.HTMLDataSet(null, "empData");
var ds2 = new Spry.Data.XMLDataSet("../../data/employees-02.xml", "employees/employee");
var dsShell = new Spry.Data.DataSetShell(ds1);

In the above code sample, there are 2 data sets: One XML data set and one HTML Data Set. While the data sets are of different types, they have the same structure/node names, so as data sets, they are interchangeable. The Data Shell does this interchanging. When the page loads, the 'dsShell' is loaded with data from 'ds1'.

The spry:region looks like:

<div id="liveTable" spry:region="dsShell" class="SpryHiddenRegion">
 <table border="1" class="dataTable">
   <tr>
     <th spry:sort="@id">@id</th>
     <th spry:sort="firstname">firstname</th>
     <th spry:sort="lastname">lastname</th>
     <th spry:sort="username">username</th>
   </tr>
   <tr spry:repeat="dsShell">
     <td>{dsShell::@id}</td>
     <td>{dsShell::firstname}</td>
     <td>{dsShell::lastname}</td>
     <td>{dsShell::username}</td>
   </tr>
 </table>
</div>

Since both data sets have the same structure, this spry region could be used for either the XML or HTML data set. But instead, we assign the region to 'dsShell' and simply fill 'dsShell' with the data from 'ds1' or 'ds2'. We use the 'setInternalDataSet' method to change the data set that fills the Data Shell. The 'true' value tells Spry to automatically load the data. When you click between the buttons, the data set is automatically loaded and the regions update.

<form style="display: none">
   <label><input type="radio" name="ds" onclick="dsShell.setInternalDataSet(ds1, true);" checked="checked" /> HTML Data Set</label>
   <label><input type="radio" name="ds" onclick="dsShell.setInternalDataSet(ds2, true);" /> XML Data Set</label>
 </form>

Notice in the source code that we use 2 small scripts to show and hide the tables and form in case javascript is turned off.