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

 < previousnext > 

 

Context Menu

 

<context_menu>

     <item label_a='string' label_b='string' type='string' />
     ...
   
</context_menu>
             


Description

Context_menu encloses any number of item tags and overrides the default context menu. The context menu appears when any component is right-clicked:

 

The "Settings..." menu item is required by Flash so users can access the settings that affect privacy and storage on their computers. The "About Adobe Flash" menu item is required by Flash to determine the Flash version. This tool has no control over these menu items.

 

The item attributes are:

  • label_a: The item label that appears in the context menu. If a label refuses to appear in the context menu, then it is reserved by Flash. In this case, try a different label specific to your board, such as "Print Presentation", "Hide Circle", etc. This is the reason why this tool uses "Print Board" instead of "Print".

  • label_b: If the menu item has two states (toggle type), then this is the label for the second state. label_a and label_b are swapped every time this menu item is selected.

  • type: The type of menu item. Valid values are:

    • standard: Standard menu item that uses only label_a. This is the default type.

    • toggle: Toggle menu item that has two states. label_a and label_b are swapped every time this menu item is selected. This is done independently from the action the menu item executes, so it is necessary to keep both synched. For example, if the menu item displays the labels "Hide Object" and "Show Object", then make sure that the visibility of the object is controlled only by this menu item. Otherwise, the menu item might display "Hide Object" when the object has already been hidden by a different action. To avoid this problem, use a standard menu item with only one generic label such as "Toggle Object".

    • toggle_screen: Toggle menu item that displays label_a if the board is in normal screen mode, or label_b if the board is in full screen mode. This is done after checking the actual screen state to always display the correct label.

    • separator: Display a menu separator.

 


Context Menu Events & Actions

Menu items with the toggle_screen type automatically toggle the screen between normal and full mode. So, it is not necessary to attach an action to this menu item type.

Menu items with the "About SlickBoard" and "Print Board" labels automatically execute their corresponding actions. So, it is not necessary to attach actions to these menu items.

The remaining menu items execute actions enclosed by the same object. Each menu item executes the actions with its corresponding event. The first menu item executes actions with the event "context_1", the second menu item executes actions with the event "context_2", and so on.

Menu items with the toggle type generate an event with the menu item number (example: context_2) and another that identifies both the menu item number and the current label (example: context_2a or context_2b). You may use one or both events.

<slickboard>
   
   <!-- context menu with 4 items -->
   <context_menu>
      <item label_a='About My Board' />
      <item type='separator' />
      <item label_a='Hide Red Square' label_b='Show Red Square' type='toggle' />
      <item label_a='Hide Green Square' label_b='Show Green Square' type='toggle' />   
   </context_menu>
   

   <action>
      <!-- action for the first menu item -->
      <item event='context_1' type='alert' text='This is my board.' />
      
      <!-- the second menu item is a seperator that does not need an action -->
      
      <!-- action for the third menu item -->
      <item event='context_3' type='toggle' target='red' />
      
      <!-- two actions for the fourth toggle menu item -->
      <item event='context_4a' type='hide' target='green' />
      <item event='context_4b' type='show' target='green' />
      
   </action>
   
</slickboard>

 


Context Menu Types

Each SlickBoard component can have an independent context menu with any number of different menu items:

  • Default: The default context menu that starts with "About SlickBoard" is used when no other context menus are created. It is displayed when the background or any object is right-clicked.

  • General: Context menu tags placed at the top level of the board (outside of all objects) create a context menu that overrides the default one. It is displayed when no other context menus are created and when the background or any object is right-clicked.

  • Object: Context menu tags placed inside an object create a context menu that appears when that object is right-clicked.

  • Icon: Context menu tags placed inside an icon create a context menu that appears when the icon of that object is right-clicked (when the object is docked).

  • Empty: If context_menu is created without any enclosed menu items, then only the required menu items by Flash are displayed:

    <context_menu />   


  • Target: If context_menu is created with a target attribute that specifies the ID of another object, then this object inherits both the context menu and its actions from the target object:

    <context_menu target='blue_object' />   


 

Example

<slickboard>
   
   <!-- A context_menu not enclosed by an object. This overrides the default context menu. --> 
   <!-- Right-click the background and the red square to see it -->
   <context_menu>
      <item label_a='About My Board' />
      <item label_a='Print My Board' />
      <item type='separator' />
      <item label_a='Hide Red Square' label_b='Show Red Square' type='toggle' />
      <item label_a='Hide Green Square' label_b='Show Green Square' type='toggle' />
   </context_menu>
   
   <!-- the actions for the main context menu -->
   <action>
      <item event='context_1' type='alert' text='This is the default context menu.' />
      <item event='context_2' type='print' />
      <item event='context_4' type='toggle' target='red' />
      <item event='context_5a' type='hide' target='green' />
      <item event='context_5b' type='show' target='green' />
   </action>
   
   
   <!-- ========================================================================== -->
   <!-- A red aquare without a context menu. Right-click the red square to see the default context menu -->
   <object id='red'>
      <rect x='50'y='50'fill_color='ff3300' />   
   </object>
   
   
   <!-- ========================================================================== -->
   <!-- A green square with an empty context menu. Right-click the green square to see it -->
   <object id='green'>
      <rect x='200'y='50' fill_color='88ff00' />   
      <context_menu />  
   </object>
   
   
   <!-- ========================================================================== -->
   <!-- An interactive blue square with a custom context menu for both the object and its icon -->
   <!-- right-click the blue square to see the object's context menu -->
   <!-- dock the object at the bottom of the board, then right-click the icon to see the icon's context menu -->
   <object>
      
      <rect x='350' y='50' fill_color='4444ff' state='hit' />
      <dock bottom='true' />
      
      <!-- context menu for the undocked blue square -->
      <context_menu>
         <item label_a='About Blue Object' />  
         <item type='separator' />
         <item label_a='Print My Board' />
         <item label_a='Full Board' label_b='Normal Board' type='toggle_screen' />
      </context_menu>
      
      <!-- the actions for the blue square and the first context menu item -->
      <!-- the screen mode context menu item is automatic and does not require an action -->
      <action>
         <item type='drag' />
         <item event='context_1' type='alert' 
               text="Drag this object to the bottom of the board to dock it and see the icon\'s context menu." />   
         <item event='context_3' type='print' />
      </action>


      <icon>
         <rect x='0' y='0' width='50' height='50' fill_color='8888ff' state='hit' />
         
         <!-- context menu for the docked blue icon -->
         <context_menu>
            <item label_a='About Blue Icon' />   
         </context_menu>  
         
         <!-- the action for the docked blue icon -->
         <action>
            <item event='context_1' type='alert' text='Drag this icon to the board to undock it.' />
         </action>  
      </icon>
      
   </object>       


   <!-- ========================================================================== -->
   <!-- yellow square with a child black square -->
   <object id='yellow'>
      <rect x='50' y='175'fill_color='ffff00' />   
      <context_menu>
         <item label_a='About Yellow Object' />   
      </context_menu>  
         
      <action>
         <item event='context_1' type='alert' text='This is the yellow context menu.' />
      </action>  
         
      <object>
         <rect x='115' y='240' width='50' height='50' />
         <!-- the child object uses its parent's context menu -->
         <context_menu target='yellow' />   
      </object>
   </object>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us