I'm getting up to speed with Flex and I am looking for any example of implementing a drag and drop re-sort within a vbox container. Basically I have a Vbox that contains a number of canvas's that are full width and 35px high. I want to be able to drag and drop them to re-order within the vbox.
Any help is greatly appreciated - thanks,
b
Have you tried using a mx:List - drag and drop support is already built in and very easy to use - i threw together a sample for you using the dimensions you mentioned:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var _source:ArrayCollection = new ArrayCollection();
private function init():void{
var n:int = 10;
for(var i:int = 0; i < n; i++){ _source.addItem({value:Math.random()}); }
}
private function handleReorder(event:DragEvent):void{
Alert.show("A change was made!");
}
]]>
</mx:Script>
<mx:List dataProvider="{_source}" width="250" height="500" dragMoveEnabled="true"
dragEnabled="true" dropEnabled="true" dragDrop="handleReorder(event)">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width="100%" height="35">
<mx:Text text="{data.value}" width="100%" height="100%" selectable="false" />
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:Application>
And there is of course more info here: http://livedocs.adobe.com/flex/3/langref/mx/controls/List.html
good luck!
If I were you, I'd first check the Flex documentation available online. There's this example. You will have to customize this for your list control's itemeditor. There's another example which you should take a look at. If you have a problem let us know.
Related
I'd like to use a button within a component to remove it. So, you click it and the component is gone. But, I haven't figured out how you reference the component from within the component. What should I put in click=""?
My component: popCanvas
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel width="200" height="200" title="hello"
click="remove=">
</mx:Panel>
</mx:Canvas>
In the main app:
var popCanvas:PopCanvas= new PopCanvas;
popCanvas.x = 20;
popCanvas.y = 30;
this.addChild(popCanvas);
Any suggestions?
Thank you.
-Laxmidi
Okay,
This is what I came up with:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function removeMe(event:MouseEvent):void {
this.removeChild(event.currentTarget as DisplayObject);
}
]]>
</mx:Script>
<mx:Panel width="400" height="300" title="hello" click="removeMe(event)">
</mx:Panel>
</mx:Canvas>
So, I used the event's currentTarget to reference the component in order to remove it. If someone clicks anywhere on the component it's removed.
Thanks.
-Laxmidi
I have a Canvas with a VBox in it. As I add items to the VBox, I want the VBox to grow, I want the scrollbar on the Canvas to control the visibility.
How do I accomplish this?
try setting the VBoxes verticalScrollPolicy to off (false? not sure, whatever the negative option is)
Credit to invertedSpear as it was a correct answer, but here's an example that demonstrates it:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.controls.Label;
private function createChild() : DisplayObject {
var label:Label = new Label();
label.text = "hello " + container.numChildren;
return label;
}
]]>
</mx:Script>
<mx:Button label="Add More" click="container.addChild(createChild())" />
<mx:Canvas width="100%" height="100%" backgroundColor="#FF0000">
<mx:VBox id="container" verticalScrollPolicy="off" backgroundColor="#FFF" backgroundAlpha="0.5">
<mx:Label text="hello" />
</mx:VBox>
</mx:Canvas>
</mx:Application>
I am trying to develop a custom component to act as a divider.
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas id="left"/>
<mx:Canvas id="right"/>
</mx:HBox>
I would like to use this component to assign objects like this:
<Divider>
<left>
<mx:label text="Stuff I want to put in the left canvas"/>
<mx:label text="etc..."/>
<mx:label text="etc..."/>
</left>
<right>
<mx:label text="Stuff I want to put in the right canvas"/>
<mx:label text="etc..."/>
<mx:label text="etc..."/>
</right >
</Divider>
Unfortunately, this does not work. I get a compiler error saying :
In initializer for 'left': multiple initializer values for target type mx.containers.Canvas.
What am I missing ?
I ended up finding the solution reading the following from the Adobe website.
Using the technique described as template component, you can specify an array of a certain type of objects. I ended up rewriting my component as follow:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
<mx:Script>
<![CDATA[
[ArrayElementType("mx.core.UIComponent")]
public var right:Array;
[ArrayElementType("mx.core.UIComponent")]
public var left:Array;
protected function init():void
{
var i:int;
for (i = 0; i < left.length; i++)
leftCanvas.addChild(left[i]);
for (i = 0; i < right.length; i++)
rightCanvas.addChild(right[i]);
}
]]>
</mx:Script>
<mx:Canvas id="rightCanvas"/>
<mx:Canvas id="leftCanvas"/>
</mx:HBox>
It now works as intended.
Hi i have added a control with the help itemrender in my datagrid. but there is a problem that
in time of execution it comes two times at init and creation complete event of that control
which i added in my datagrid column.
Thanks
Atul Yadav
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGridColumn xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="Component.*" >
<mx:Script>
<![CDATA[
[Bindable]
public var columnID:String="";
[Bindable]
public var ColumnData:String="";
]]>
</mx:Script>
<mx:itemRenderer>
<mx:Component>
<ns1:test >
</ns1:test>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
and my control code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" xmlns:ns1="View.*" creationComplete="init(event)">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private static var arr:Array;
private function init(e:Event):void{
if(!arr)
arr=new Array();
arr.push(this);
btn_apply.addEventListener(MouseEvent.CLICK,function(e:Event):void{Alert.show(arr.length.toString());});
}
]]>
</mx:Script>
<mx:Button label="Button" id="btn_apply"/>
</mx:VBox>
when i get arr length it gives me just double count.
If I understand correctly the second code snippet is your custom item renderer that is instantiated as <ns1:test> in the first snippet.
The DataGrid control will create instances of your renderer as and when it sees fit - you don't really have any control of how many instances will get created. So while you may have one row in the column the Data Grid is quite likely to have created more than one instance of the renderer component. The result, as you can see, is that creation complete is called more than once and you are getting more items in your static array than you are expecting. When developing item renderers you have to take into account that: you don't control their instantiation and that they are recycled by the framework. The best approach to take is to make them as stateless as possible.
i need your help about below purposes.
problem-1:In php we can easily move one page to another and easily use different type of function from those pages.In flex3 how i can use different type of .mxml pages like php. Please guide me with tutorials.It will really helpful for me.
problem-2: In same page some content dynamically updated its resource by done one task.How can i do that please guide me.
Rather than treating your Flex application as a series of pages, you may want to consider an all-in-one SWF instead. This greatly reduces navigation time, at the cost of a longer initial download. You can switch among different views using tab pages or view stacks. As far as keeping your functions for each page separate, you can do this by implementing each logical "page" as a separate MXML component. Your top-level application MXML would look something like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:my="com.mycompany.myapp"
>
<mx:ViewStack id="pageViewStack" width="100%" height="100%">
<my:MyComponent1 width="100%" height="100%"/>
<my:MyComponent2 width="100%" height="100%"/>
</mx:ViewStack>
</mx:Application>
For your second problem I have 2 files
imageResize.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var _imageHolderWidth:Number = 500;
private var _imageHolderHeight:Number = 500;
[Bindable]
private var imageArrayCollection:ArrayCollection = new ArrayCollection();
private function changeSize():void{
this.imageHolder.width = this._imageHolderWidth *(this.widthSlider.value * 0.01);
this.imageHolder.height = this.imageHolder.width;
}
private function addToTileList():void{
var bitmapData : BitmapData = new BitmapData(this.imageHolder.width, this.imageHolder.height );
var m : Matrix = new Matrix();
bitmapData.draw( this.imageHolder, m );
this.imageArrayCollection.addItem({bitmapData: bitmapData, width: this.imageHolder.width, height: this.imageHolder.height});
}
]]>
</mx:Script>
<mx:Image id="imageHolder" source="#Embed('fx.png')" />
<mx:HSlider id="widthSlider" width="400" y="520" maximum="100" value="100" minimum="1" labels="[1%, 50%, 100%]" snapInterval="1" change="{changeSize();}" liveDragging="true" />
<mx:Button label="add to tile" click="{this.addToTileList();}"/>
<mx:TileList x="520" dataProvider="{this.imageArrayCollection}" itemRenderer="TileListRenderer" />
</mx:Application>
second file TileListRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="140">
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
override public function set data(value:Object):void
{
super.data = value;
}
]]>
</mx:Script>
<mx:VBox horizontalAlign="center">
<mx:Image id="thumbHolder" source="{new Bitmap(data.bitmapData)}" maxWidth="100" maxHeight="100" />
<mx:Label text="{data.width}x{data.height}" />
</mx:VBox>
</mx:Canvas>
Because it is easier to see it with working source (right mouse button to see the source):
blog.arnomanders.nl/upload/imageResize/imageResize.html