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

 < previousnext > 

 

External

 

<action>

     <item type='string' call='string' url='string' target='string' target_shift='string' />
     ...
   
</action>
             


Description

The action tags can be added to an object and enclose any number of items, each executes an action when triggered by an event.

The external actions on this page are available only to licensed copies of the tool.

 

  • type: The type of action to execute. The type values that execute actions external to board are:

    • alert: Opens the browser's standard alert box and displays a message.

    • javascript: Send a message to a javascript function.

    • link: Go to another web page.

    • print: Print the board.

    • send: Send a request to a server and ignore the response. This is useful for sending information to a server without changing the board, opening a new web page, or showing any visual feedback.

    • submit: Submit the information collected in a form. A form can contain any number of text fields, password fields, checkboxes, and radio buttons. See example below.

    • update: Update an object by downloading new XML code for it.



  • call: This attribute is used only when the action type is javascript. It determines the javascript function to call.

  • text: This attribute is used only when the action type is alert. It determines the text to display.

  • url: This attribute is used when the action type is link, send, submit, or update. It determines the URL to call.

  • target: This attribute is used when the action type is either link, submit, or update. When the action type is update, it specifies the ID of the object to apply this action to. If this attribute is omitted, then the object that encloses this action is targeted. When the action type is link or submit, it determines the window to open the new web page in. Valid values are:

    • _self: opens the link in the same window (default).
    • _blank: opens the link in a new blank window.
    • _parent: opens the link in the immediate frameset parent.
    • _top: opens the link in the full body of the window .
    • string: opens the link in the window named string. If this window doesn't exist, a new window is opened and named string.


  • target_shift: This attribute is used when the action type is link and the shift key is held down. It determines the window to open the new web page in. Valid values are:

    • _self: opens the link in the same window (default).
    • _blank: opens the link in a new blank window.
    • _parent: opens the link in the immediate frameset parent.
    • _top: opens the link in the full body of the window .
    • string: opens the link in the window named string. If this window doesn't exist, a new window is opened and named string.

 

Example

<slickboard>
 
   <!-- a button with an action that displays an alert message -->
   <object>
      <rect x='150' y='80' width='80' height='20' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='150' y='81' width='80' height='20' align_h='center'>Alert</text>
      <action>
         <item type='alert' text='Hello World!' />
      </action>
   </object>   
   
   
   <!-- a button with an action that calls a javascrpt function -->
   <object>
      <rect x='250' y='80' width='80' height='20' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='250' y='81' width='80' height='20' align_h='center'>Javascript</text>
      <action>
         <item type='javascript' call="my_function('Hello', 100)" />
      </action>
   </object>
   
   
   <!-- a button with an action that opens a web page -->
   <!-- if the shift key is held down, open a new window. Otherwise, use the same window -->   
   <object>
      <rect x='150' y='120' width='80' height='20' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='150' y='121' width='80' height='20' align_h='center'>Link</text>
      <action>
         <item type='link' url='http://www.google.com' target='_self' target_shift='_blank' />
      </action>
   </object>   
   
   
   <!-- a button with an action that prints the board -->
   <object>
      <rect x='250' y='120' width='80' height='20' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='250' y='121' width='80' height='20' align_h='center'>Print</text>
      <action>
         <item type='print' />
      </action>
   </object>   
   
   
   <!-- a button with an action that sends information to a server and ignores the response (no visible effect) -->   
   <!-- the information (user id & clicked button) is attached to a script URL that receives the information -->   
   <object>
      <rect x='190' y='160' width='80' height='20' fill_color='FF6600' shadow='default' state='hit' />   
      <text x='190' y='161' width='80' height='20' align_h='center'>Send</text>
      <action>
         <item type='send' url='php/feedback.php?user_id=564&button=send' />
      </action>
   </object>   


   <filter>
      <shadow id='default' />
   </filter>   
</slickboard>

 


<slickboard>
   
   <!-- click the inner blue circle. Reload the web page to test again -->
   
   <object>
      
      <!-- the inner circle triggers an update action when clicked -->
      <circle x='240' y='150' radius='50' fill_color='8888ff' state='hit' />
      <circle x='240' y='150' radius='75' fill_alpha='0' line_color='aaaaff' line_thickness='20' />   
      
      <action>
         <!-- the update action with the update URL -->
         <item type='update' url='xml/object_3.xml' />
      </action>
      
   </object>   
  
</slickboard>

<!-- the update xml in the "object_3.xml" URL -->
<object>
   
   <!-- the updated object looks similar, but in red -->
   <circle x='240' y='150' radius='50' fill_color='ff4400'  />
   <circle x='240' y='150' radius='75' fill_alpha='0' line_color='ff8800' line_thickness='20' />   
   
   <!-- transitions that move the old object out and the new object in -->   
   <transition_out type='fly' duration='1' easing='back' startPoint='6' />   
   <transition_in type='fly' duration='1' easing='back' startPoint='6' />
   
</object>

 


<slickboard>

   <!-- object that encloses a form and all its components -->
   <object>

      <!-- name field -->
      <text x='100' y='10' width='150'>Name:</text>     
      <rect x='100' y='30' width='150' height='20' fill_color='444444' shadow='hole' />     
      <field id='name' x='100' y='30' width='150' height='20' color='ffffff'></field>     
    
      <!-- password field -->
      <text x='100' y='60' width='150'>Password:</text>     
      <rect x='100' y='80' width='150' height='20' fill_color='444444' shadow='hole' />     
      <field id='password' password='true' x='100' y='80' width='150' color='ffffff'></field>    
      
      <!-- hidden field (transparent text with an id that becomes a hidden variable) -->
      <text id='page' alpha='0'>login</text>    

      <!-- checkbox -->
      <object id='remember' offset_x='100' offset_y='110'>
         <rect x='0' y='0' width='15' height='15' fill_color='ff4400' shadow='default' state='hit' />    
         <line x1='3' y1='3' x2='12' y2='12' thickness='2' caps='round' state='checked' /> 
         <line x1='12' y1='3' x2='3' y2='12' thickness='2' caps='round' state='checked' /> 
         <text x='20' y='0' alpha='.7'>Remember Me</text>
      </object>    
      
      <!-- radio button group -->
      <object offset_x='107' offset_y='150'>
         <object id='male' selected='true'>
            <circle radius='7' fill_color='ff4400' shadow='default' state='hit' />    
            <circle radius='4' state='selected' />    
            <text x='12' y='-8' alpha='.7'>Male</text>
         </object>    
         <object id='female' selected='false' offset_x='70'>
            <circle radius='7' fill_color='ff4400' shadow='default' state='hit' />    
            <circle radius='4' state='selected' />    
            <text x='12' y='-8' alpha='.7'>Female</text>
         </object>   
      </object> 


      <text x='100' y='175' width='100' height='100'>Favorate season:</text>
      <line x1='80' y1='220' x2='350' y2='220' thickness='3' caps='round' /> 

      <!-- a list menu -->
      <object offset_x='210' offset_y='175'>

         <!-- the menu title, which is a button that opens the menu drawer -->
         <rect x='0' y='0' width='100' height='20' fill_color='eeeeff' shadow='default' state='hit' />
         <text id='season' x='0' y='0' width='100' height='20' align_h='center' shadow='default'>Select one</text>   
         <action><item type='drawer_toggle' target='menu_body' /></action>
         
         <!-- the mask that hides menu_body when retracted -->
         <object id='menu_mask'>
            <rect x='0' y='20' width='100' height='80' />
         </object>
         
         
         <!-- the menu body, which includes the menu items and their background -->
         <object id='menu_body' offset_y='-60'>
         
            <rect x='0' y='0' width='100' height='80' fill_color='aaaaaa' />
            <mask target='menu_mask' />
            <drawer type='down' depth='80' auto_open='false' handle_front='80' handle_back='20' />   
            
            <!-- the first menu item -->
            <object offset_y='0'>
               <rect x='0' y='0' width='100' height='19' fill_color='cccccc' state='hit' />
               <rect x='0' y='0' width='100' height='19' fill_color='bbbbbb' state='over' />
               <text x='10' y='0' width='90' height='19' alpha='.7' shadow='default'>Spring</text>
               <action>
                  <item type='set_text' target='season' text='Spring' />
                  <item type='drawer_close' target='menu_body' />
               </action>
            </object>
            
            <!-- the second menu item -->
            <object offset_y='20'>
               <rect x='0' y='0' width='100' height='19' fill_color='cccccc' state='hit' />
               <rect x='0' y='0' width='100' height='19' fill_color='bbbbbb' state='over' />
               <text x='10' y='0' width='90' height='19' alpha='.7' shadow='default'>Summer</text>
               <action>
                  <item type='set_text' target='season' text='Summer' />
                  <item type='drawer_close' target='menu_body' />
               </action>
            </object>
            
            <!-- the third menu item -->
            <object offset_y='40'>
               <rect x='0' y='0' width='100' height='19' fill_color='cccccc' state='hit' />
               <rect x='0' y='0' width='100' height='19' fill_color='bbbbbb' state='over' />
               <text x='10' y='0' width='90' height='19' alpha='.7' shadow='default'>Autumn</text>
               <action>
                  <item type='set_text' target='season' text='Autumn' />
                  <item type='drawer_close' target='menu_body' />
               </action>
            </object>
            
            <!-- the fourth menu item -->
            <object offset_y='60'>
               <rect x='0' y='0' width='100' height='19' fill_color='cccccc' state='hit' />
               <rect x='0' y='0' width='100' height='19' fill_color='bbbbbb' state='over' />
               <text x='10' y='0' width='90' height='19' alpha='.7' shadow='default'>Winter</text>
               <action>
                  <item type='set_text' target='season' text='Winter' />
                  <item type='drawer_close' target='menu_body' />
               </action>
            </object>         
         </object>
         
      </object>   
   

      <!-- submit button -->
      <rect x='100' y='240' width='80' height='25' fill_color='ff4400' shadow='default' state='hit' />   
      <text x='100' y='242' width='80' height='25' align_h='center' size='14' shadow='default'>Submit</text>   

      <!-- form action. The URL includes additional session & cart variables. -->
      <action>
         <item type='submit' url='php/form.php?session_id=46783&cart_id=95673' />
      </action>
      
   </object>

   <filter>
      <shadow id='default' />
      <shadow id='hole' alpha='.5' blurX='10' blurY='10' inner='true' />
   </filter>
 
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us