Expand my Community achievements bar.

Editing tools in toolbar of SharedWhiteBoard component

Avatar

Level 2

A client of mine who uses LCCS would like to remove some of the tools from the toolbar. The WhiteBoard component has a UIComponent property named shapesToolBar. Can this class be modified to selectively remove tools? I presume I have to use the non-SWC libs to do this. Wasn't sure if there was a skin class for the toolbar that would make this process easier.

Many thanks in advance for suggestions!

1 Reply

Avatar

Former Community Member

Hi Robert,

For the most part, the SharedWhiteBoard is a "there be dragons" sort of component, but once you know how to mess with it, this particular request isn't too bad. If all you're trying to do is remove some of the default shapes, or rearrange them, here's how :

1. Create a custom subclass of WBToolBarDescriptor - I named mine "CustomWBToolBarDescriptor", for originality points. All I did was override and copy the existing "addDefaultItems()" method, while omitting some of the stuff there.

package
{
     import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBArrowShapeFactory;
     import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBMarkerShapeFactory;
     import com.adobe.coreUI.controls.whiteboardClasses.shapes.WBSimpleShapeFactory;
     import com.adobe.coreUI.controls.whiteboardClasses.ToolBarDescriptors.WBShapeToolBarDescriptor;
     import com.adobe.coreUI.controls.whiteboardClasses.ToolBarDescriptors.WBToolBarDescriptor;
     
     public class CustomWBToolBarDescriptor extends WBToolBarDescriptor
     {
          public function CustomWBToolBarDescriptor(p_includeDefaultItems:Boolean=false)
          {
               super(p_includeDefaultItems);
          }
          
          override protected function addDefaultItems():void
          {
               var toolShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.LABEL);
               toolShape.label = _lm.getString("Tools");
               addShapeToolBar(toolShape);
               
               var selectionToolShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.TOOL);
               selectionToolShape.toolTip = _lm.getString("Selection Tool");
               selectionToolShape.icon = ICON_SELECTION;
               addShapeToolBar(selectionToolShape);
               
               var arrowToolShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.TOOL);
               arrowToolShape.toolTip = _lm.getString("Arrow Tool");
               arrowToolShape.shapeFactory = arrowFactory;
               arrowToolShape.shapeData = WBArrowShapeFactory.ARROW_HEAD;
               arrowToolShape.icon = ICON_ARROW;
               addShapeToolBar(arrowToolShape);
               
               var highLightPenToolShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.TOOL);
               highLightPenToolShape.toolTip =_lm.getString("Highlighter Pen Tool");
               highLightPenToolShape.shapeFactory = markerFactory;
               highLightPenToolShape.shapeData = WBMarkerShapeFactory.HIGHLIGHTER;
               highLightPenToolShape.icon = ICON_HIGHLIGHTER_PEN;
               addShapeToolBar(highLightPenToolShape);
               
               var highlightRectangleToolShape:WBShapeToolBarDescriptor = new WBShapeToolBarDescriptor(WBShapeToolBarDescriptor.TOOL);
               highlightRectangleToolShape.toolTip = _lm.getString("Highlight Rectangle Tool");
               highlightRectangleToolShape.shapeFactory = highlightAreaFactory;
               highlightRectangleToolShape.shapeData = WBSimpleShapeFactory.HIGHLIGHT_AREA;
               highlightRectangleToolShape.icon = ICON_HIGHLIGHT_RECTANGLE;
               addShapeToolBar(highlightRectangleToolShape);
          }
     }
}

2. Next, somewhere after the WhiteBoard has been initialized, I used this code to feed it my new Toolbar descriptor :

var tB:WBShapesToolBar = myWhiteboard.shapesToolBar as WBShapesToolBar;
tB.dataProvider = new CustomWBToolBarDescriptor(true);

This works for me. If you're looking to add new shapes, check out the sample app "WhiteBoardCustomShapes". Warning : Non-trivial.

  hope that helps,

   nigel