XML <make> Tag With Data Manipulation

  1 <?xml version="1.0" encoding="UTF-8"?>
  2 <page>
  3   <config>
  4     <!--Loading top level special="true" to support level 0 make tag objects-->
  5     <stylesheet special="true">
  6       ../mydata/myStyles.css
  7     </stylesheet>
  8     
  9     <setPageContentPosition>
 10       <![CDATA[
 11         { left  : '@0',
 12           top   : '@59' }          
 13       ]]>
 14     </setPageContentPosition>
 15     
 16     <!--Drop out the browser window color from black to a gray-blue.
 17         Of course, this could be set using ToolBook's authoring tools.-->
 18     <setBrowserWindowStyles>
 19       <![CDATA[
 20         { color : "#E1EBF2" }
 21       ]]>
 22     </setBrowserWindowStyles>    
 23   </config>
 24   
 25   <!--Make a container to hold our level 0 objects; no special styling;
 26       could add user event functions here as necessary-->
 27   <make id="src-container" level="0" type="div" dims="0,0,100%,auto">
 28     
 29     <!--This make tag creates our banner object for handling data messages-->
 30     <make id="srcCode_1" level="0" type="div" dims="0,0,100%,auto" class="srcstyle">
 31       <!--STYLES for this object are in myStyles.css;
 32           But we need to set inline style for position within the src-container object-->
 33       <style>
 34         <![CDATA[
 35           { "position" : "relative" }
 36         ]]>
 37       </style>
 38       
 39       <!--Set default text; CDATA tag not necessary unless actually using HTML tags-->
 40       <htmlText>
 41         <![CDATA[
 42           Source code container.
 43         ]]>
 44       </htmlText>
 45     
 46       <!--ToolBook will send loop back user event to this object and this script will run
 47           When user event is received, the [value] parameter from ToolBook is read in as 
 48           evt.data or evt.myValue (either is acceptable)-->
 49       <function name="dataLoaded" event="user" params="evt">
 50         <![CDATA[
 51           //ToolBook is set to notify this object when this XML file has loaded
 52           this.markers = evt.data['markers']; //Get ToolBook value from user event; it should be an XML array
 53           var h = 'Click this banner to display a single row of XML video data.';
 54           
 55           tbfunction_pgTBObjSet(this.id, "htmlText", "Video markers loaded from XML data."); //Temporarily set field text
 56         
 57           //NOTE: pgTBObjSet can be used to handle delayed manipulation of <make> elements
 58           tbfunction_pgTBObjSet(this.id, "htmlText", h, 3000); //Restore normal caption 
 59         ]]>
 60       </function>
 61     
 62       <!--Each time the banner is clicked, another row of data is retrieved from the cached XML-->
 63       <function name="myClick" event="click" params="evt">
 64         <![CDATA[
 65           if (typeof this.curMark == 'undefined') this.curMark = -1;
 66           this.curMark += 1;
 67         
 68           if (this.curMark >= this.markers.length) this.curMark = 0; //Reset our pointer if out of bounds
 69         
 70           var data = this.markers[this.curMark];
 71           var msg = '<b>Pointer ' + this.curMark + ':</b>';
 72           for (var p in data) {
 73             //Retrieve a row of data from our XML data pool
 74             msg += " <span style='color:#be7c00;'>[" + p + "] = </span>" + (!!data[p] ? data[p] : "(none)"); 
 75           }
 76         
 77           //NOTE: You can use pgTBObjSet to put data into <make> elements but can be done using javascript too.
 78           tbfunction_pgTBObjSet(this.id, "htmlText", msg);
 79         ]]>
 80       </function>  
 81     </make>
 82 
 83     <!--Clicking this button will display the XML data file on the ToolBook page-->
 84     <make id="xmlview" level="0" type="button" dims="0,0,auto,auto"
 85           class="xmlbtn" refObj="srcCode_1">
 86       <style>
 87         <![CDATA[
 88           { "visibility"  : "hidden",
 89             "position"    : "relative" }
 90         ]]>
 91       </style>
 92 
 93       <htmlText>
 94         Show XML File Details
 95       </htmlText>
 96     
 97       <!--When clicked, this function loads the html document into the
 98           dynamically created ToolBook span/field object-->
 99       <function name="myxml" event="click" params="evt">
100         <![CDATA[
101           this.blur();
102           tbfunction_pgTBObjSet('xml_viewer', "visible", true);
103           tbfunction_pgGotoURL('xml_viewer', '../mydata/myData.xml.html', '', '', '', '', '', 'scrollbars=1', true, true); //Open XML file on ToolBook page
104         ]]>
105       </function>
106     
107       <!--This code is executed immediately after the object is created-->
108       <exeJavascriptDirect>
109         <![CDATA[
110           var f = function() {
111             var o = document.getElementById('xmlview');
112             if (o) o.style.visibility = 'visible'; //Restore visibility after loading content
113           };
114           setTimeout(f, 200); //Delay required as object may not be located until loaded
115         ]]>
116       </exeJavascriptDirect>
117     </make>
118   
119   </make>
120   
121   
122   <!--This becomes a ToolBook object IN THE TOOLBOOK iFRAME;
123       dynamically created to act as container for view XML files-->
124   <make id="xml_viewer" level="1" type="span" dims="page">
125     <style>
126       <![CDATA[
127         { "width" : "100%",
128           "height" : "100%",
129           "visibility"  : "hidden" } 
130       ]]>
131     </style>
132   </make>
133   
134   <!--MARK ENTRIES BEGIN HERE
135       Could've put this data in a separate XML to make things easier to manage.-->
136   <markers pos="12147" v1="6" v2="r1" v3="3406" v4="-">
137     <en>
138       What animals can you see?
139     </en>
140   </markers>
141   <markers pos="14241" v1="4" v2="3954" v3="1" v4="1">
142     <en>
143     </en>
144   </markers>
145   <markers pos="19687" v1="3" v2="r3" v3="6125" v4="-">
146     <en>
147       Testing for recording without pause.
148     </en>
149   </markers>
150   <markers pos="25970" v1="4" v2="6079" v3="2" v4="1">
151     <en>
152     </en>
153   </markers>
154   <markers pos="32881" v1="7" v2="6283" v3="-" v4="-">
155     <en>
156       Two natural predators in empathy.
157     </en>
158   </markers>
159   <markers pos="39164" v1="4" v2="5500" v3="3" v4="1">
160     <en>
161     </en>
162   </markers>
163   <markers pos="43144" v1="1" v2="-" v3="-" v4="-">
164     <en>
165       Here is a text being displayed without pausing the video.
166     </en>
167   </markers>
168   <markers pos="63878" v1="4" v2="4688" v3="4" v4="1">
169     <en>
170     </en>
171   </markers>
172   <markers pos="77240" v1="2" v2="5000" v3="-" v4="-">
173     <en>
174       This is a text being displayed while the video is paused.
175     </en>
176   </markers>
177   <markers pos="77240" v1="4" v2="5828" v3="5" v4="1">
178     <en>
179     </en>
180   </markers>
181   <markers pos="84804" v1="6" v2="r11" v3="6172" v4="-">
182     <en>
183       Teacher recording followed by unlimited student recording.
184     </en>
185   </markers>
186   <markers pos="84804" v1="4" v2="-" v3="6" v4="-">
187     <en>
188     </en>
189   </markers>
190   <markers pos="91590" v1="3" v2="r13" v3="5312" v4="-">
191     <en>
192       Commentary without pause.
193     </en>
194   </markers>
195   <markers pos="96969" v1="4" v2="-" v3="7" v4="-">
196     <en> 
197     </en>
198   </markers>
199   <markers pos="100668" v1="7" v2="-" v3="6624" v4="-">
200     <en>
201       We're in the open. We're in the frontierage. It's not like we're in some civilized place.
202     </en>
203   </markers>
204 
205 </page>
206