SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Update

 

<update url='string' 
        delay='int'
        timeout='int'
        retry='int'
        /> 


Description

Update redraws an object without reloading the web page. This makes it possible to display live content, change the look over time for emphasis, or make changes in response to the user:

  • url: Relative or absolute URL of an XML source to get the update from.

  • delay: The delay in seconds before requesting the update. The actual interval between updates is this delay, plus the time it takes to request and receive the next update. Depending on the connection speed, the actual interval might be several seconds longer than this delay. The default is zero.

  • timeout: The number of seconds to wait before loading the update times out. The default is 30 seconds.

  • retry: The number of times to try loading the update before displaying an error message. The default is 2 (try twice).

 


Basics

Update tags enclosed by an object update that object and its contents after an initial delay:

<slickboard>
   
   <object>
   
      <rect x='240' y='270' /> 
      
      <!-- update this object 4 seconds after it was rendered -->   
      <update url='xml/object_1.xml' delay='4' />
      
   </object>

</slickboard>

The above update URL points to the XML code that updates the object. It must be another object starting with an <object> tag:

<object>

   <circle x='240' y='180' radius='100' />   
   
</object>

 


Grouped Updates

Objects can be updated either individually or collectively. To update objects collectively, nest them inside a parent object and then update the parent object:

<slickboard>
   
   <!-- update this object independently --> 
   <object>
      <circle x='240' y='270' radius='100' start='-90' end='90' />   
      <update url='xml/update_1.xml' />
   </object>
   
   
   <!-- parent object -->   
   <object>
   
      <!-- two children -->   
      <object>
         <rect x='50' y='50' width='100' height='100' />
      </object>
      <object>
         <rect x='150' y='1 50' width='100' height='100' />
      </object>
      
      <!-- update the parent and both children -->
      <update url='xml/update_2.xml' />
      
   </object>


</slickboard>

 


Recurring Updates

To update an object, plus schedule for the following update, use update again in the update code:

<slickboard>
   
   <object>
   
      <rect x='240' y='270' /> 
      
      <!-- update this object 4 seconds after it was rendered -->   
      <update url='xml/object_1.xml' delay='4' />
      
   </object>

</slickboard>

The update code:

<object>

   <circle x='240' y='180' radius='100' />   
   
   <!-- schedule for another update -->   
   <update url='xml/object_2.xml' delay='4' />   
   
</object>

 

If the same URL is used to trigger multiple updates, some browsers might cache it instead of calling it repeatedly. This results in seeing only one fresh update. To avoid this, append any unique value to the update URL to keep it new:

<object>

   <circle x='240' y='180' radius='100' />   
   
   <update url='xml/object_2.xml?uniqueID=0.26440600+1128349620' delay='4' />   
   
</object>

 


User-Triggered Updates

To create updates triggered by mouse clicks or javascript, see action and Javascript_to_Flash.

 

Examples

<slickboard>
   
   <!-- reload the webpage to see the transitions again -->


   <!-- create a temporary object without any graphic elements -->   
   <!-- call an update script that builds the actual object -->   
   <object>
      <update url='xml/object_2.xml' />
   </object>
   
   
   <!-- create another temporary object without any graphic elements -->   
   <!-- call the same update script to build a duplicate object 3 seconds later -->   
   <!-- offset the duplicate object horizontally --> 
   <object offset_x='175'>
      <update url='xml/object_2.xml' delay='3' />
   </object>


   <!-- draw semi circle and flip it 4 seconds later with update --> 
   <object>
      <circle x='240' y='270' radius='100' start='-90' end='90' />
      <update url='xml/object_1.xml' delay='4' />
   </object>
   
</slickboard>

The update file object_1.xml contains this code:

<object>

   <circle x='240' y='180' radius='100' start='90' end='270' />   
   
</object>

The update file object_2.xml contains this code:

<object>

   <rect x='100' y='50' line_color='88ff00' line_thickness='10' corner_br='30' />   
   <transition_in type='fly' duration='1' easing='back' startPoint='6' />
   
</object>

 


<slickboard>
   
   <!-- create a temporary object without any graphic elements -->   
   <!-- call an update script that builds the first page -->   
   <object>
      <update url='xml/one.xml' />
   </object>
   
   <filter>
      <shadow id='default' />
   </filter>
   
</slickboard>

<!-- the first page calls an update script that builds the second page -->
<object>
   <rect width='480' height='300' fill_color='ff6600' shadow='default' />
   <text x='200' y='80' width='80' align_h='center' size='120' color='000000' shadow='default'>1</text>   

   <transition_in type='fade' />
   <transition_out type='fade' />

   <update url='xml/two.xml' delay='2' />
</object>

<!-- the second page calls an update script that builds the third page -->
<object>
   <rect width='480' height='300' fill_color='88cc00' shadow='default' />
   <text x='200' y='80' width='80' align_h='center' size='120' color='000000' shadow='default'>2</text>   

   <transition_in type='fly' duration='1' startPoint='6' />
   <transition_out type='fly' duration='1' startPoint='4' />

   <update url='xml/three.xml' delay='2' />
</object>

<!-- the third page calls an update script that builds the first page and loops all the pages again -->
<object>
   <rect width='480' height='300' fill_color='8844ff' shadow='default' />
   <text x='200' y='80' width='80' align_h='center' size='120' color='000000' shadow='default'>3</text>   

   <transition_in type='fly' easing='bounce' startPoint='2' />
   <transition_out type='none' />

   <update url='xml/one.xml' delay='2' />
</object>

 

 < previousnext > 


Copyright © 2010-2017, maani.us