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

 < previousnext > 

 

Dock

 

<dock top='boolean' 
      bottom='boolean' 
      left='boolean'  
      right='boolean' 
      
      docked='string' 
      />
      


Description

Dock can be added to an object to determine whether it can be docked or not, and whether it is initially docked or not.

The dock is a structure that allows tucking away objects until needed. The dock is located along any or all four edges of the board. It extends only when the cursor is near it, and retracts when the cursor moves away. Interactive objects with the dock tags can be dragged to and from the dock:

 

The dock attributes are:

  • top: Determines if the object can be docked at the top of the board. Valid values are true and false. The default is true.

  • bottom: Determines if the object can be docked at the bottom of the board. Valid values are true and false. The default is true.

  • left: Determines if the object can be docked on the left side of the board. Valid values are true and false. The default is true.

  • right: Determines if the object can be docked on the right side of the board. Valid values are true and false. The default is true.

  • docked: Determines if and where the object is docked initially. Valid values are:

    • top: The object is initially docked at the top.

    • bottom: The object is initially docked at the bottom.

    • left: The object is initially docked on the left.

    • right: The object is initially docked on the right.

    • undocked: The object is initially undocked (default).

 


Enable Docking

To enable docking:

1. The object must be a root object (not nested inside other objects).
2. The object must not be a slide in a slidehsow.
3. The object must enclose the <dock> tag.
4. The object must enclose an icon (see Icon below).

In addition to the above requirements, it is not recommended docking complex objects with children that move independently, objects with hidden or masked parts, or large objects that cover most of the board's area. To organize complex and large objects, it is best to transition them in and out.

 


Icon

Icon tags nested inside an object are a symbolic representation of that object. They can contain any number graphic elements and actions that become visible and active only when the object is docked.

Typically, icons are about 50 pixels in both width and height, but they can be any size. The dock displays the icons either at their initial size, or scaled down when the dock is full or when the mouse moves away from them.

By default, icons are not interactive and cannot be dragged. To make an icon draggable, it is necessary to add an element with a hit area. You may make the whole icon a hit area or only parts of it.

Icons must be created with their top-left corner at the origin point (0,0):

<slickboard>

   <!-- object -->
   <object>
      <rect x='50' y='50' width='100' height='50' />
      <rect x='100' y='50' width='100' height='25' />
      
      <!-- object's icon with a hit state to make it interactive and draggable -->
      <icon>
         <image url='images/icon.jpg' x='0' y='0' width='50' height='50' state='hit' />   
      </icon>
       
   </object>

</slickboard>

 

 


Event Action

When an object is docked or undocked, actions enclosed by the same object with the event='dock' or event='undock' are automatically executed. This can be used to play sounds or execute other actions triggered by docking:

<object>

   <!-- object graphic and its icon -->
   <rect x='125' y='100' width='50' height='40' state='hit' />
   <icon>
      <image url='images/icon.jpg' x='0' y='0' width='50' height='50' state='hit' />   
   </icon>
      
   <!-- dock function -->
   <dock top='true' bottom='true' left='true' right='true' />
      
   <action>
      <item type='drag' />
      
      <!-- action triggered when docking to play a sound -->
      <item type='sound_play' target='woosh' event='dock' />
    </action>

</object>

 

Example

<slickboard>
   
   <object >
      <!-- a blue square that can be clicked --> 
      <rect x='50' y='50' width='100' height='100' fill_color='8888ff' state='hit' />   
      
      <!-- when clicked, start a drag action -->
      <action>
         <item type='drag' />
         
         <!-- actions triggered when docking and undocking -->
         <item type='sound_play' target='woosh' event='dock' />
         <item type='sound_play' target='woosh' event='undock' />
      </action>
      
      <!-- enable docking this object only on the left and bottom edges -->
      <dock left='true' bottom='true' />
      
      <!-- the object's icon is a smaller blue square that can be clicked-->
      <icon>
         <rect x='0' y='0' width='50' height='50' fill_color='8888ff' state='hit' /> 
      </icon>
      
   </object>   
   
   
   <!-- another orange object already docked at the bottom edge -->
   <object >
      <rect x='50' y='50' width='100' height='100' fill_color='ff6600' state='hit' />   
      <action>
         <item type='drag' />
      </action>
      <dock docked='bottom' left='true' bottom='true' />
      <icon>
         <rect x='0' y='0' width='50' height='50' fill_color='ff6600' state='hit' /> 
      </icon>
   </object>  
   
   
   <sound>
      <clip id='woosh' url="sounds/woosh.mp3" />
   </sound>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us