i really don't understand what i am doing wrong:
It's simple example, but when i click on the button nothing happens..
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"minHeight="600">
<fx:Script>
<![CDATA[
private function drawLine():void
{
var myShape:Shape = new Shape();
myShape = new Shape() ;
myShape.graphics.lineStyle(2, 0x990000, .75);
myShape.graphics.moveTo(100, 100);
myShape.graphics.lineTo(25, 45);
this.addChild(myShape);
}
]]>
</fx:Script>
<!--<mx:Label text="Hello World"/>-->
<mx:Button label="Click" click="drawLine()" />
</s:Application>
Use SpriteVisualElement for adding simple non-flex objects.
<s:SpriteVisualElement width="500" height="500" id="spr"/>
spr.addChild(myShape)
Related
I want to drag my panel without title when I drag any part of it. I already know how to remove title from panel and I know how to drag it with title bar. But i don't know how to drag without title.. Please help.
Here is my example
//Application
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600" creationComplete="init(event)">
<fx:Script>
<![CDATA[
import com.dragpanel.MyPanel;
import mx.events.FlexEvent;
protected function init(event:FlexEvent):void
{
var panel:MyPanel = new MyPanel();
panel.width = 300;
panel.height = 200;
panel.title = "Hello";
this.addElement(panel);
}
]]>
</fx:Script>
</s:Application>
//MyPanel.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="150" height="80" title="Hello"
mouseDown="onMouseDown(event)" mouseUp="onMouseUp(event)"
skinClass="com.dragpanel.PanelNoTitleBar">
<fx:Script>
<![CDATA[
protected function onMouseDown(event:MouseEvent):void
{
this.startDrag();
}
protected function onMouseUp(event:MouseEvent):void
{
this.stopDrag();
}
]]>
</fx:Script>
<s:HGroup verticalAlign="bottom" x="10" y="10">
<s:Label text="Name:"/>
<s:TextInput width="60"/>
</s:HGroup>
</s:Panel>
How are you starting the drag using the title bar? Do you have a mouseDown listener on the titlebar section of the Panel? You can just move the mouseDown listener to the Panel itself.
I have this ViewNavigator inside a callout and the callout displays a view inside it using firstView="views.ListMenusHomeView" . Now how can I close the callout from ListMenusHomeView? Hope someone can help.
Here is my code for the callout:
<?xml version="1.0" encoding="utf-8"?>
<s:Callout xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
contentBackgroundAppearance="none"
height="300" width="300">
<fx:Declarations>
<fx:XML id="menu" source="xmldata/menu2.xml" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.events.PopUpEvent;
protected function back(event:MouseEvent):void {
if(viewNav.length>1)
viewNav.popView();
}
]]>
</fx:Script>
<s:ViewNavigator id="viewNav" width="100%" height="100%" firstView="views.ListMenusHomeView">
<s:navigationContent>
<s:Button label="Back" click="back(event)"/>
</s:navigationContent>
<s:actionContent>
<s:Button label="Cancel" click="close(false)" emphasized="true"/>
</s:actionContent>
</s:ViewNavigator>
</s:Callout>
You see that there is a ViewNavigator which holds the ListMenusHomeView. This is the code for the ListMenusHomeView.
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Main Menu" creationComplete="onCreationComplete()">
<fx:Declarations>
<fx:XML id="menu" source="xmldata/menu2.xml" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.adobe.serializers.xml.XMLDecoder;
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
[Bindable]
private var dataArray:ArrayCollection = new ArrayCollection();
private var object:DataArray = new DataArray();
private function onCreationComplete() : void{
var decoder:XMLDecoder = new XMLDecoder();
var resultObj:Object = decoder.decode(menu);
dataArray = object.onCreationComplete(menu, menu.menuitem, resultObj, resultObj.menuitem);
}
protected function list1_changeHandler(event:IndexChangeEvent):void
{
}
]]>
</fx:Script>
<s:List id="tileLayout"
width="100%" height="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="on"
pageScrollingEnabled="true" dataProvider="{dataArray}"
itemRenderer="renderers.iconList2" change="list1_changeHandler(event)">
<s:layout>
<s:TileLayout orientation="columns" requestedRowCount="3"
verticalGap="20" horizontalGap="20"/>
</s:layout>
</s:List>
Now I want to close MyCallout whenever I click an icon inside ListMenusHomeView. The function list1_changeHandler(event:IndexChangeEvent) is responsible for that one.
What should I do?
The Callout class has a close() method, so you basically just need to access the ListMenusHomeViews parentDocument (which would be your "viewNav" ViewNavigator) and its parentDocument, which should be your ListMenusHomeView.
I haven't tested it but you might fiddle around with the parentDocument, parent and owner properties to access the correct object. Try them with a simple trace and you'll be up and running in no time.
i have the following:
<s:Image source="{path}/imageName"/>
how can i determine that path to load the image from filesystem lets say from
C:\Users\sstauross\Desktop ??
Edit : If you want to select a specific path, the user will have to confirm the path himself first using the FileSystemList
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var userPath:String;
protected function button_clickHandler(event:MouseEvent):void
{
userPath = fsList.selectedPath;
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:FileSystemList id="fsList"/>
<s:Label text="{fsList.selectedPath}"/>
<s:Button label="Confirm folder selection" click="button_clickHandler(event)"/>
</s:WindowedApplication>
Here's one way to do it
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
[Bindable]
private var desktopPath:String;
protected function creationCompleteHandler(event:FlexEvent):void
{
desktopPath = File.desktopDirectory.nativePath.toString();
}
]]>
</fx:Script>
<mx:Image source="{desktopPath}/myFile.jpg"/>
</s:WindowedApplication>
The answer to what i was looking was very simple because i put
<s:Image source="C:\Users\sstauross\Desktop\imageName"/>
instead of
<s:Image source="C:/Users/sstauross/Desktop/imageName"/>
notice the "\" instead of "/"...
Thanks a lot for your answers!
I have a VGroup in my application that contains several custom components of type MyComponent. Now I have a delete method in MyComponent that should once ran delete the element from the VGroup. I know I should use parentDocument.vgroupId.removeElement() but what to pass as a reference?
Note: I want to do the delete within a method from MyComponent
UPDATE: here is my source:
In my main application
<s:VGroup id="vgroupId" width="100%" height="100%" />
Now I add my custom component as:
var cust:FunctionElement = new MyComponent(); // MyComponent extends spark Panel
vgroupId.addElement(cust);
And from MyComponent I call
parentDocument.vgroupId.removeElement(this) // get this error => TypeError: Error #1034: Type Coercion failed: cannot convert global#5ed30d1 to mx.core.IVisualElement.
If I cast it as this as IVisualElement I get an error that it is equal to null
This example will show how you can do it..
ExampleApp.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
protected function button1_mouseUpHandler(event:MouseEvent):void
{
vgroup.addElement(new MyComponent());
}
]]>
</fx:Script>
<s:VGroup id="vgroup" top="30" />
<s:Button label="Add" mouseUp="button1_mouseUpHandler(event)"/>
</s:Application>
Define MyComponent.mxml like this...
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100" height="35">
<fx:Script>
<![CDATA[
import spark.components.VGroup;
protected function button1_mouseUpHandler(event:MouseEvent):void
{
// A few useful traces to see what's what and where.
trace(this);
trace(this.parent);
trace((this.parent as VGroup).getElementIndex(this));
// But all we actually need is ...
var vgroup:VGroup = (this.parent as VGroup);
vgroup.removeElement(this);
// (this.parent as VGroup).removeElement(this); // Would also work fine.
}
]]>
</fx:Script>
<s:Button mouseUp="button1_mouseUpHandler(event)" label="Kill me!"/>
</s:Group>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Script>
import mx.core.IVisualElement;
import spark.components.Button;
private function getNewElement():IVisualElement
{
var btn:spark.components.Button = new spark.components.Button();
btn.label = "button " + myContent.numElements;
return btn;
}
private function addFirstElement():void
{
myContent.addElementAt( getNewElement(), 0 );
}
private function removeFirstElement():void
{
if( myContent.numElements > 0 )
myContent.removeElement( myContent.getElementAt( 0 ) );
}
private function removeLastElement():void
{
if( myContent.numElements > 0 )
myContent.removeElementAt( myContent.numElements - 1 );
}
</mx:Script>
<mx:Button label="addFirst" click="addFirstElement();" />
<mx:Button label="removeFirst" click="removeFirstElement()" />
<mx:Button label="removeLast" click="removeLastElement()" />
<mx:Button label="removeAll" click="myContent.removeAllElements()" />
<mx:VBox id="myContent">
</mx:VBox>
</mx:Application>
In Flex, I am using
var canvasEdit:Canvas = new Canvas();
canvasEdit.setStyle("borderColor", 0x0134FF);
canvasEdit.setStyle("borderThickness", 3);
But I am not able to put border on the sides of the Canvas.
Try adding the following line:
canvasEdit.setStyle("borderStyle","solid");
...for example, here is a full application file example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
protected function init():void
{
canvasEdit.setStyle("borderStyle","solid");
canvasEdit.setStyle("borderColor","#000000");
canvasEdit.setStyle("borderThickness","5");
}
]]>
</mx:Script>
<mx:Canvas width="200" height="200" x="0" y="0" id="canvasEdit"/>
</mx:Application>