alamflex
asked on
How to show particular symbol when a button is pressed?
How to show particular symbol when a button is pressed?
For Eg:
If you look in to paintbrush when ever we select a line button corresponding a star icon appears in the drawing area.
How can we do this in flex.
Plz find below attachement for your reference.
Demo.doc
For Eg:
If you look in to paintbrush when ever we select a line button corresponding a star icon appears in the drawing area.
How can we do this in flex.
Plz find below attachement for your reference.
Demo.doc
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Can you share me the full code. or add necessary changes to my code.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" >
<mx:Script>
<![CDATA[
import flash.net.FileReference;
import mx.controls.Menu;
import flash.display.Stage;
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;
import DrawingClasses.Designer;
import mx.managers.CursorManager;
[Bindable]
[Embed(source="/images2/pencil.png")]
private var PencilIcon:Class;
private var cursorID:int;
[Bindable]
[Embed(source="/images2/line.png")]
public var linePicture:Class;
[Bindable]
[Embed(source="/images2/box.png")]
public var boxPicture:Class;
[Bindable]
public var xm:XML =
<AbstractComponentTemplate></AbstractComponentTemplate>;
public var compType:XML =
<ComponentTemplateDescriptor>
<Owner>BackTesting</Owner>
<Name>Component</Name>
<Version>1</Version>
</ComponentTemplateDescriptor>;
[Bindable]
private var cm:ContextMenu;
public var xm1:XML;
public var loopparent:Array = new Array();
private var mouseTarget:DisplayObject;
private var xOff:Number;
private var yOff:Number;
private var designer:Designer = new Designer();
private var i:int;
private var j:int;
private function init():void
{
designer.setDesignArea(designArea);
var cmi1:ContextMenuItem = new ContextMenuItem("Properties", true);
cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_propertiesSelect);
var cmi2:ContextMenuItem = new ContextMenuItem("View XML", true);
cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_viewXMLSelect);
var cmi3:ContextMenuItem = new ContextMenuItem("Saved Components", true);
cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_savedListSelect);
cm = new ContextMenu();
cm.hideBuiltInItems();
cm.customItems = [cmi1, cmi2, cmi3];
cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
}
private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
}
private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
accrCon2.label = "Two Way Split - Properties";
accrWin.selectedIndex = 1;
}
private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {
viewstack1.selectedIndex = 1;
}
private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {
accrWin.selectedIndex = 0;
}
[Bindable]
private var propValue:String = "Component";
private function itemClickEvent(event:ListEvent):void {
var propKey:String = dgProp.selectedItem.@key;
if (propKey == "name") {
propValue = dgProp.selectedItem.propvalue;
}
}
[Bindable]
private var sourceXML:XML =
<order>
<!--This is a comment. -->
<?PROC_INSTR sample ?>
<item id='1'>
<menuName>burger</menuName>
<price>3.95</price>
</item>
<item id='2'>
<menuName>fries</menuName>
<price>1.45</price>
</item>
</order>;
[Bindable]
private var savedComp:Array=['ComponentTemplate',
'iv85341.EquityCash.v1',
'ra92724.ThreeWaySplit.EU.US.OTHERS.v1',
'ra92724.TwoWaySplit.EU.OTHERS.v1',
'ra92724.TwoWaySplit.US.OTHERS.v1',
'iv85341.VanillaNode.v1',
'iv85341.ReadGmrFs.v1'
];
[Bindable]
private var propData:XML =
<properties>
<prop key="name">
<propvalue>Component</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="Version">
<propvalue>1.0</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="Owner">
<propvalue>iv85341</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="width">
<propvalue>250</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="height">
<propvalue>300</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="X-Pos">
<propvalue>40</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
<prop key="Y-Pos">
<propvalue>20</propvalue>
<itemRenderer>mx.controls.NumericStepper</itemRenderer>
</prop>
</properties>;
private function rightClick(event:MouseEvent):void
{
Alert.show("Properties ..." + event.currentTarget, "Open");
}
// Draging Code Starts Here
private var curDate:Date = new Date();
private var dateList:XMLList = null;
public function pictureDragDrop(event:DragEvent):void {
//Alert.show (" com = " + event.dragSource.dataForFormat("key"));
var nodeName:String = event.dragSource.dataForFormat("key").toString(); //txtInput1.text;
var nodeValue:String = "";
if (nodeValue == "")
{
if (xm == <AbstractComponentTemplate></AbstractComponentTemplate>)
{
xm.appendChild(compType);
dateList = new XMLList("<DateCreated>" + curDate + "</DateCreated>");
xm.appendChild(dateList);
dateList = new XMLList("<DateModified>" + curDate + "</DateModified>");
xm.appendChild(dateList);
xm1 = XML("<" + nodeName + "></" + nodeName + ">");
xm.appendChild(xm1);
}
else
{
i++;
xm1 = XML("<" + nodeName + "></" + nodeName + ">");
xm.appendChild(xm1);
//loopparent.push(xmlarray:xm1);
loopparent[i] = xm1;
}
}
else
{
var xmlList:XMLList = new XMLList("<" + nodeName + ">" + nodeValue + "</" + nodeName + ">");
if (xm1 == null)
{
xm.appendChild(xmlList);
}
else
{
for (j = i; j>0; j--)
{
(loopparent[j]).appendChild(xmlList);
//Alert.show("alert");
}
}
}
var x:int = event.currentTarget.mouseX - xOff;
var y:int = event.currentTarget.mouseY - yOff;
if(event.dragSource.dataForFormat("key") == "box")
{
designer.addBox(x, y);
}
else if(event.dragSource.dataForFormat("key") == "circle")
{
designer.addCircle(x, y);
}
else
{
designer.addRectangle(x, y);
}
//txtInput1.text = "";
//txtInput2.text = "";
}
// this method gets x and y coordinate of template box image
private function myoffset(img:Image):void {
xOff = img.mouseX;
yOff = img.mouseY;
}
// this method does acceptable draging box image
public function pictureDragEnter(event:DragEvent):void{
DragManager.acceptDragDrop(Canvas(event.target));
}
// this method supply drag box when mouse move on the design area
private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
var dragInitiator:Image=Image(event.currentTarget);
var ds:DragSource = new DragSource();
var imageProxy:Image = new Image();
imageProxy.source = img1.source;
imageProxy.height= 150;
imageProxy.width= 150;
ds.addData(format,"key");
DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
}
// this method works when click on the line button
// it is make enable to draw line
public function doDrawEnable():void {
designer.setIsDrawEnable(true);
}
private var fileRef:FileReference;
public function createXML():void {
var fileName:String = "component.xml";
fileRef = new FileReference();
fileRef.browse();
}
// Draging code ends here
]]>
</mx:Script>
<mx:Fade id="theEffect"/>
<mx:HDividedBox width="100%" height="100%">
<mx:VDividedBox height="100%" width="20%">
<mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
<mx:Panel title="Nodes" width="100%" height="100%" layout="vertical">
<mx:Image id="box" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" x="84" y="6"></mx:Image>
<mx:Image id="rectangle" toolTip="MultiWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" x="160" y="10"></mx:Image>
<mx:Image id="circle" toolTip="Reader" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" x="120" y="8"></mx:Image>
<!--<mx:Image id="line" toolTip="Line" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/line.png')" click="doDrawEnable()" width="28" height="28" x="279" y="10"></mx:Image>-->
<mx:Button toggle="true" buttonMode="true" useHandCursor="true" id="line" icon="@Embed(source='/images2/line.png')" keyDown='Alert.show("key pressed");' click="doDrawEnable()" width="28" height="28"/>
<!--<mx:Label text="Name" x="350" y="10"/>
<mx:TextInput id="txtInput1" width="50" height="28" x="400" y="10"/>
<mx:Label text="Value" x="470" y="10"/>
<mx:TextInput id="txtInput2" width="50" height="28" x="510" y="10"/>-->
</mx:Panel>
</mx:Panel>
</mx:VDividedBox>
<mx:VDividedBox height="100%" width="60%">
<mx:HDividedBox width="100%" height="100%">
<mx:Canvas width="100%" height="100%" >
<mx:TabBar x="0" y="10" dataProvider="viewstack1" />
<mx:ViewStack id="viewstack1" width="100%" height="100%" y="32">
<mx:Canvas backgroundColor="#ffffff" borderColor="0xB7BABC" borderStyle="solid" borderThickness="7" label="{propValue}" id="designArea" contextMenu="{cm}" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" width="100%" height="100%" >
</mx:Canvas>
<mx:Panel id="pnlXML" label="XML" width="100%" height="100%" showEffect="{theEffect}" >
<mx:ControlBar width="100%" barColor="#FF22CC">
<mx:Spacer width="100%"/>
<mx:Button id="btnSave" label="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
</mx:ControlBar>
<mx:TextArea fontSize="12" wordWrap="false" textIndent="8" id="txtAreaXML" text="{xm}" width="100%" height="100%" editable="false" />
</mx:Panel>
</mx:ViewStack>
</mx:Canvas>
</mx:HDividedBox>
</mx:VDividedBox>
<mx:VDividedBox height="100%" width="20%">
<mx:Panel title="Saved Components and Properties" width="100%" height="100%" layout="vertical" >
<mx:Accordion id="accrWin" x="51" y="35" width="100%" height="100%">
<mx:Canvas label="Saved Components" width="100%" height="100%">
<mx:List height="100%" width="100%" dataProvider="{savedComp}" />
</mx:Canvas>
<mx:Canvas id="accrCon2" label="Properties" width="100%" height="100%">
<mx:DataGrid id="dgProp" dataProvider="{propData.prop}" height="100%" width="100%" editable="true" itemClick="itemClickEvent(event);">
<mx:columns>
<mx:DataGridColumn dataField="@key" headerText="Property" editable="false" />
<mx:DataGridColumn dataField="propvalue" headerText="Value" editable="true" />
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:Accordion>
</mx:Panel>
</mx:VDividedBox>
</mx:HDividedBox>
<mx:ApplicationControlBar dock="true">
<mx:Image source="images/Openfile.gif" toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
<mx:Image source="images/Savefile.gif" toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
<mx:Image source="images/Undo.gif" toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Image source="images/Redo.gif" toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Image source="images/Delete.gif" toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Image source="images/Print.gif" toolTip="Print" useHandCursor="true" buttonMode="true" mouseChildren="false" />
<mx:Spacer width="100%" />
<mx:Label text="BackTesting" fontWeight="bold" fontSize="16" />
</mx:ApplicationControlBar>
</mx:Application>
So which is the button you want to press and which is the instance you want to add in your code?
Warm Regards
Deepanjan Das
Warm Regards
Deepanjan Das
ASKER