From b34029140ffc8670beb0b28a6710ee1d959edf6a Mon Sep 17 00:00:00 2001
From: Richard Alam <ritzalam@gmail.com>
Date: Mon, 30 Jul 2012 02:57:42 +0000
Subject: [PATCH]  - extract out each button to maintain easily

---
 .../whiteboard/views/WhiteboardToolbar.mxml   | 189 +++++++++---------
 .../views/buttons/CircleButton.mxml           |  22 ++
 .../whiteboard/views/buttons/ClearButton.mxml |  19 ++
 .../whiteboard/views/buttons/LineButton.mxml  |  18 ++
 .../views/buttons/PanZoomButton.mxml          |  19 ++
 .../views/buttons/RectangleButton.mxml        |  20 ++
 .../views/buttons/ScribbleButton.mxml         |  21 ++
 .../whiteboard/views/buttons/TextButton.mxml  |  18 ++
 .../views/buttons/TriangleButton.mxml         |  19 ++
 .../whiteboard/views/buttons/UndoButton.mxml  |  18 ++
 10 files changed, 271 insertions(+), 92 deletions(-)
 create mode 100755 bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/CircleButton.mxml
 create mode 100755 bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/ClearButton.mxml
 create mode 100755 bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/LineButton.mxml
 create mode 100755 bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/PanZoomButton.mxml
 create mode 100755 bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/RectangleButton.mxml
 create mode 100755 bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/ScribbleButton.mxml
 create mode 100755 bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/TextButton.mxml
 create mode 100755 bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/TriangleButton.mxml
 create mode 100755 bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/UndoButton.mxml

diff --git a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/WhiteboardToolbar.mxml b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/WhiteboardToolbar.mxml
index a75444a3b7..922100a66f 100755
--- a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/WhiteboardToolbar.mxml
+++ b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/WhiteboardToolbar.mxml
@@ -20,8 +20,12 @@
   $Id: $
 -->
 
-<mx:VBox xmlns="flexlib.containers.*" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:view="org.bigbluebutton.modules.whiteboard.views.*"
-	xmlns:mate="http://mate.asfusion.com/" visible="false" backgroundColor="0xCCCCCC" cornerRadius="5" borderStyle="solid" 
+<mx:VBox xmlns="flexlib.containers.*" 
+		xmlns:mx="http://www.adobe.com/2006/mxml" 
+		xmlns:view="org.bigbluebutton.modules.whiteboard.views.*"
+		xmlns:wbBtns="org.bigbluebutton.modules.whiteboard.views.buttons.*"
+		xmlns:mate="http://mate.asfusion.com/" 
+		visible="false" backgroundColor="0xCCCCCC" cornerRadius="5" borderStyle="solid" 
 	paddingBottom="3" paddingTop="3" paddingLeft="3" paddingRight="3" >
 	
 	<mate:Listener type="{MadePresenterEvent.SWITCH_TO_PRESENTER_MODE}" method="presenterMode" />
@@ -113,28 +117,28 @@
 				
 				switch(s) {
 					case DrawObject.PENCIL:
-						btnPenc.selected = true;
-						btnEllipse.selected = false;
-						btnRectangle.selected = false;
-                        btnText.selected = false;
+//						btnPenc.selected = true;
+//						btnEllipse.selected = false;
+//						btnRectangle.selected = false;
+//                        btnText.selected = false;
 						break;
 					case DrawObject.ELLIPSE:
-						btnPenc.selected = false;
-						btnEllipse.selected = true;
-						btnRectangle.selected = false;
-                        btnText.selected = false;
+//						btnPenc.selected = false;
+//						btnEllipse.selected = true;
+//						btnRectangle.selected = false;
+//                        btnText.selected = false;
 						break;
 					case DrawObject.RECTANGLE:
-						btnPenc.selected = false;
-						btnEllipse.selected = false;
-						btnRectangle.selected = true;
-                        btnText.selected = false;
+//						btnPenc.selected = false;
+//						btnEllipse.selected = false;
+//						btnRectangle.selected = true;
+//                        btnText.selected = false;
 						break;
                     case DrawObject.TEXT:
-                        btnPenc.selected = false;
-                        btnEllipse.selected = false;
-                        btnRectangle.selected = false;
-                        btnText.selected = true;
+//                       btnPenc.selected = false;
+//                        btnEllipse.selected = false;
+//                        btnRectangle.selected = false;
+//                        btnText.selected = true;
                         break;
 				}
             }
@@ -146,79 +150,79 @@
 
 					switch (toolType) {
 						case DrawObject.PENCIL:
-							btnPenc.selected = true;
-							btnEllipse.selected = false;
-							btnRectangle.selected = false;
-							btnTriangle.selected = false;
-							btnLine.selected = false;
-							btnText.selected = false;
+//							btnPenc.selected = true;
+//							btnEllipse.selected = false;
+//							btnRectangle.selected = false;
+//							btnTriangle.selected = false;
+//							btnLine.selected = false;
+//							btnText.selected = false;
 							break;
 						case DrawObject.HIGHLIGHTER:
-							btnPenc.selected = false;
-							btnEllipse.selected = false;
-							btnRectangle.selected = false;
-							btnTriangle.selected = false;
-							btnLine.selected = false;
-							btnText.selected = false;
+//							btnPenc.selected = false;
+//							btnEllipse.selected = false;
+//							btnRectangle.selected = false;
+//							btnTriangle.selected = false;
+//							btnLine.selected = false;
+//							btnText.selected = false;
 							break;
 						case DrawObject.ELLIPSE:
-							btnPenc.selected = false;
-							btnEllipse.selected = true;
-							btnRectangle.selected = false;
-							btnTriangle.selected = false;
-							btnLine.selected = false;
-							btnText.selected = false;
+//							btnPenc.selected = false;
+//							btnEllipse.selected = true;
+//							btnRectangle.selected = false;
+//							btnTriangle.selected = false;
+//							btnLine.selected = false;
+//							btnText.selected = false;
 							break;
 						case DrawObject.RECTANGLE:
-							btnPenc.selected = false;
-							btnEllipse.selected = false;
-							btnRectangle.selected = true;
-							btnTriangle.selected = false;
-							btnLine.selected = false;
-							btnText.selected = false;
+//							btnPenc.selected = false;
+//							btnEllipse.selected = false;
+//							btnRectangle.selected = true;
+//							btnTriangle.selected = false;
+//							btnLine.selected = false;
+//							btnText.selected = false;
 							break;
 						case DrawObject.TRIANGLE:
-							btnPenc.selected = false;
-							btnEllipse.selected = false;
-							btnRectangle.selected = false;
-							btnTriangle.selected = true;
-							btnLine.selected = false;
-							btnText.selected = false;
+//							btnPenc.selected = false;
+//							btnEllipse.selected = false;
+//							btnRectangle.selected = false;
+//							btnTriangle.selected = true;
+//							btnLine.selected = false;
+//							btnText.selected = false;
 							break;
 						case DrawObject.LINE:
-							btnPenc.selected = false;
-							btnEllipse.selected = false;
-							btnRectangle.selected = false;
-							btnTriangle.selected = false;
-							btnLine.selected = true;
-							btnText.selected = false;
+//							btnPenc.selected = false;
+//							btnEllipse.selected = false;
+//							btnRectangle.selected = false;
+//							btnTriangle.selected = false;
+//							btnLine.selected = true;
+//							btnText.selected = false;
 							break;
 						case DrawObject.ERASER:
-							btnPenc.selected = false;
-							btnEllipse.selected = false;
-							btnRectangle.selected = false;
-							btnTriangle.selected = false;
-							btnLine.selected = false;
-							btnText.selected = false;
+//							btnPenc.selected = false;
+//							btnEllipse.selected = false;
+//							btnRectangle.selected = false;
+//							btnTriangle.selected = false;
+//							btnLine.selected = false;
+//							btnText.selected = false;
 							break;
 					}
 				} else if (gType == WhiteboardConstants.TYPE_TEXT) {
-					btnPenc.selected = false;
-					btnEllipse.selected = false;
-					btnRectangle.selected = false;
-					btnTriangle.selected = false;
-					btnLine.selected = false;
-					btnText.selected = true;
+//					btnPenc.selected = false;
+//					btnEllipse.selected = false;
+//					btnRectangle.selected = false;
+//					btnTriangle.selected = false;
+//					btnLine.selected = false;
+//					btnText.selected = true;
 					canvas.setGraphicType(gType);
 					canvas.setTool(toolType);
 				} else if (gType == WhiteboardConstants.TYPE_SELECTION) {
 					switch(toolType) {
 						case SelectObject.SELECT_TOOL:
-							btnPenc.selected = false;
-							btnEllipse.selected = false;
-							btnRectangle.selected = false;
-							btnLine.selected = false;
-							btnText.selected = false;
+//							btnPenc.selected = false;
+//							btnEllipse.selected = false;
+//							btnRectangle.selected = false;
+//							btnLine.selected = false;
+//							btnText.selected = false;
 							break;
 					}
 					canvas.setGraphicType(gType);
@@ -264,9 +268,7 @@
 			protected function toggleTransparency():void {
 				canvas.toggleTransparency();
 			}
-			
-
-			
+						
 			private function presenterMode(e:MadePresenterEvent):void {
 				canvas.makeTextObjectsEditable(e);
 			}
@@ -322,6 +324,10 @@
                 var gobj:GraphicObject = event.data;
                 LogUtil.debug("!!!!DESELECTED:" + " " + gobj.getProperties());
             }
+			
+			private function enabledWhiteboard():void {
+				dispatchEvent(new WhiteboardButtonEvent(WhiteboardButtonEvent.ENABLE_WHITEBOARD));
+			}
             
 		]]>
 	</mx:Script>
@@ -330,24 +336,20 @@
 	that identifies the "category" of the tool (ex. shape vs text), and the other specifies the 
 	tool itself (ex. line tool vs triangle tool, even though both are "shapes")
 	-->
-    <mx:Button width="20" height="20" id="btnHand" click="setShape(DrawObject.TEXT)" icon="{hand_icon}" 
-               toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.rectangle')}" toggle="true" />
-    <mx:Spacer height="10" />
-	<mx:Button width="20" height="20" id="btnPenc" click="setTool(WhiteboardConstants.TYPE_SHAPE, DrawObject.PENCIL)"  icon="{pencil_icon}" toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.pencil')}" toggle="true" selected="true" />
-	<mx:Button width="20" height="20" id="btnRectangle" click="setTool(WhiteboardConstants.TYPE_SHAPE, DrawObject.RECTANGLE)" icon="{rectangle_icon}" toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.rectangle')}" toggle="true" />
-	<mx:Button width="20" height="20" id="btnEllipse" click="setTool(WhiteboardConstants.TYPE_SHAPE, DrawObject.ELLIPSE)" icon="{ellipse_icon}" toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.ellipse')}" toggle="true" />
-	<mx:Button width="20" height="20" id="btnTriangle" click="setTool(WhiteboardConstants.TYPE_SHAPE, DrawObject.TRIANGLE)" icon="{triangle_icon}" toolTip="{ResourceUtil.getInstance().getString('ltbcustom.bbb.highlighter.toolbar.triangle')}" toggle="true" />
-	<mx:Button width="20" height="20" id="btnLine" click="setTool(WhiteboardConstants.TYPE_SHAPE, DrawObject.LINE)" icon="{line_icon}" 
-			   toolTip="{ResourceUtil.getInstance().getString('ltbcustom.bbb.highlighter.toolbar.line')}" toggle="true" />
-	<mx:Button width="20" height="20" id="btnText" click="setTool(WhiteboardConstants.TYPE_TEXT, TextObject.TEXT_TOOL)" icon="{text_icon}" 
-			   toolTip="{ResourceUtil.getInstance().getString('ltbcustom.bbb.highlighter.toolbar.text')}" toggle="true" />
+    <wbBtns:PanZoomButton/>
+    <mx:Spacer height="10"/>
+	<wbBtns:ScribbleButton/>
+	<wbBtns:RectangleButton/>
+	<wbBtns:CircleButton/>
+	<wbBtns:TriangleButton/>
+	<wbBtns:LineButton/>
+	<wbBtns:TextButton/>
 		
-	<mx:Spacer height="5" />
-	<mx:Button width="20" height="20" id="btnClear" click="dispatchEvent(new WhiteboardDrawEvent(WhiteboardDrawEvent.CLEAR))" icon="{delete_icon}" 
-			   toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.clear')}" />
-	<mx:Button width="20" height="20" id="btnUndo"  click="sendUndoCommand()" icon="{undo_icon}" toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.undo')}" />
+	<mx:Spacer height="5"/>
+	<wbBtns:ClearButton/>
+	<wbBtns:UndoButton/>
 	
-	<mx:Spacer height="5" />
+	<mx:Spacer height="5"/>
 	
 	<!--
 	Properties that were removed from original color picker:
@@ -360,11 +362,14 @@
 	of ColorPickers, one for the "line" color for the outlines of shapes, and the other for
 	the "fill" color that is used only if "fill" is enabled in WhiteboardCanvasModel
 	-->
-	<mx:ColorPicker change="changeColor(event)" id="cpik"  selectedColor="0x000000" toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.color')}"/>
+	<mx:ColorPicker change="changeColor(event)" id="cpik"  selectedColor="0x000000" 
+					toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.color')}"/>
    
 	<mx:Spacer height="3" />
 	<mx:Image source="{thick_icon}" horizontalAlign="center" width="20"/>
-	<mx:VSlider height="50" id="sld" change="changeThickness(event)" toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.thickness')}" minimum="2" maximum="20" 
+	<mx:VSlider height="50" id="sld" change="changeThickness(event)" 
+				toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.thickness')}" 
+				minimum="2" maximum="20" 
 				useHandCursor="true" value="2" showDataTip="true" snapInterval="1" dataTipOffset="0" labelOffset="0" />
 	<mx:Image source="{thin_icon}" horizontalAlign="center" width="20" />
 	
diff --git a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/CircleButton.mxml b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/CircleButton.mxml
new file mode 100755
index 0000000000..0407bbbaba
--- /dev/null
+++ b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/CircleButton.mxml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
+		   width="20" height="20" 
+		   click="onClick()" 
+		   icon="{ellipse_icon}" 
+		   toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.ellipse')}" 
+		   toggle="true">
+	<mx:Script>
+		<![CDATA[
+			import org.bigbluebutton.common.Images;
+			import org.bigbluebutton.util.i18n.ResourceUtil;
+			
+			private var images:Images = new Images();			
+			[Bindable] private var ellipse_icon:Class = images.circle_icon;
+			
+			private function onClick():void {
+				
+			}
+			
+		]]>
+	</mx:Script>
+</mx:Button>
diff --git a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/ClearButton.mxml b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/ClearButton.mxml
new file mode 100755
index 0000000000..b2dcc987bf
--- /dev/null
+++ b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/ClearButton.mxml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
+		   width="20" height="20" click="onClick()" icon="{delete_icon}" 
+		   toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.clear')}">
+	<mx:Script>
+		<![CDATA[
+			import org.bigbluebutton.common.Images;
+			import org.bigbluebutton.util.i18n.ResourceUtil;
+			
+			private var images:Images = new Images();
+			[Bindable] private var delete_icon:Class = images.delete_icon;
+			
+			private function onClick():void {
+				
+			}
+			
+		]]>
+	</mx:Script>
+</mx:Button>
diff --git a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/LineButton.mxml b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/LineButton.mxml
new file mode 100755
index 0000000000..24bf102537
--- /dev/null
+++ b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/LineButton.mxml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
+		   width="20" height="20" click="onClick()" icon="{line_icon}" 
+		   toolTip="{ResourceUtil.getInstance().getString('ltbcustom.bbb.highlighter.toolbar.line')}" toggle="true">
+	<mx:Script>
+		<![CDATA[
+			import org.bigbluebutton.common.Images;
+			import org.bigbluebutton.util.i18n.ResourceUtil;
+			
+			private var images:Images = new Images();
+			[Bindable] private var line_icon:Class = images.line_icon;
+			
+			private function onClick():void {
+				
+			}
+		]]>
+	</mx:Script>
+</mx:Button>
diff --git a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/PanZoomButton.mxml b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/PanZoomButton.mxml
new file mode 100755
index 0000000000..a88dd7a771
--- /dev/null
+++ b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/PanZoomButton.mxml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
+		   width="20" height="20" click="onClick()" icon="{hand_icon}" 
+		   toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.rectangle')}" toggle="true">
+	<mx:Script>
+		<![CDATA[
+			import org.bigbluebutton.common.Images;
+			import org.bigbluebutton.util.i18n.ResourceUtil;
+			
+			private var images:Images = new Images();
+			
+			[Bindable] private var hand_icon:Class = images.hand_icon;
+			
+			private function onClick():void {
+				
+			}
+		]]>
+	</mx:Script>
+</mx:Button>
diff --git a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/RectangleButton.mxml b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/RectangleButton.mxml
new file mode 100755
index 0000000000..922e88cc01
--- /dev/null
+++ b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/RectangleButton.mxml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
+		   width="20" height="20"
+		   click="onClick()" 
+		   icon="{rectangle_icon}" toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.rectangle')}" toggle="true">
+	<mx:Script>
+		<![CDATA[
+			import org.bigbluebutton.common.Images;
+			import org.bigbluebutton.util.i18n.ResourceUtil;
+			
+			private var images:Images = new Images();
+			[Bindable] private var rectangle_icon:Class = images.square_icon;
+			
+			private function onClick():void {
+				
+			}			
+		]]>
+	</mx:Script>
+	
+</mx:Button>
diff --git a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/ScribbleButton.mxml b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/ScribbleButton.mxml
new file mode 100755
index 0000000000..9877a9be5f
--- /dev/null
+++ b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/ScribbleButton.mxml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
+		   width="20" height="20" click="onClick()"  
+		   icon="{scribble_icon}" toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.pencil')}" 
+		   toggle="true" selected="true">
+	<mx:Script>
+		<![CDATA[
+			import org.bigbluebutton.common.Images;
+			import org.bigbluebutton.util.i18n.ResourceUtil;
+			
+			private var images:Images = new Images();
+			
+			[Bindable] private var scribble_icon:Class = images.scribble_icon;
+			
+			private function onClick():void {
+				
+			}
+			
+		]]>
+	</mx:Script>
+</mx:Button>
diff --git a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/TextButton.mxml b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/TextButton.mxml
new file mode 100755
index 0000000000..f143618a6f
--- /dev/null
+++ b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/TextButton.mxml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
+		   width="20" height="20" click="onClick()" icon="{text_icon}" 
+		   toolTip="{ResourceUtil.getInstance().getString('ltbcustom.bbb.highlighter.toolbar.text')}" toggle="true">
+	<mx:Script>
+		<![CDATA[
+			import org.bigbluebutton.common.Images;
+			import org.bigbluebutton.util.i18n.ResourceUtil;
+			
+			private var images:Images = new Images();
+			[Bindable] private var text_icon:Class = images.text_icon;
+			
+			private function onClick():void {
+				
+			}
+		]]>
+	</mx:Script>
+</mx:Button>
diff --git a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/TriangleButton.mxml b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/TriangleButton.mxml
new file mode 100755
index 0000000000..1b2df88ab1
--- /dev/null
+++ b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/TriangleButton.mxml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
+		   width="20" height="20" click="onClick()" icon="{triangle_icon}" 
+		   toolTip="{ResourceUtil.getInstance().getString('ltbcustom.bbb.highlighter.toolbar.triangle')}" 
+		   toggle="true">
+	<mx:Script>
+		<![CDATA[
+			import org.bigbluebutton.common.Images;
+			import org.bigbluebutton.util.i18n.ResourceUtil;
+			
+			private var images:Images = new Images();
+			[Bindable] private var triangle_icon:Class = images.triangle_icon;
+			
+			private function onClick():void {
+				
+			}	
+		]]>
+	</mx:Script>
+</mx:Button>
diff --git a/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/UndoButton.mxml b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/UndoButton.mxml
new file mode 100755
index 0000000000..33c523a149
--- /dev/null
+++ b/bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/buttons/UndoButton.mxml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
+		   width="20" height="20" click="onClick()" icon="{undo_icon}" 
+		   toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.undo')}">
+	<mx:Script>
+		<![CDATA[
+			import org.bigbluebutton.common.Images;
+			import org.bigbluebutton.util.i18n.ResourceUtil;
+			
+			private var images:Images = new Images();
+			[Bindable] private var undo_icon:Class = images.undo_icon;
+			
+			private function onClick():void {
+				
+			}
+		]]>
+	</mx:Script>
+</mx:Button>