Question

I am trying to create Adobe Air application in which I require the components below:

Allow me to elaborate this mockup:

There are 2 panels on each side, and the items inside these panels can be drag and drop on each other, just like moving items around in 2 folders. Several tutorials have shown that a list with

dragEnabled = "true"
dropEnabled = "true"
dragMoveEnabled = "true"

will do the job. However, here comes the crucial part. I want my item in the list to have such a structure that I have an image on the left and TextArea on the right as specified above. When the user drags this “structured item”, I want the whole thing to go together to another side, regardless of where the user initially drags this “structured item” – meaning if the user clicks from the image and drag and drop it to the other side, this “structured item” will appear on the other side. Should the user drags from the TextArea, the same thing should happen.

The TextArea, a part of this “structured item”, which is inside the scrolling panel, should also allow the user to scroll its text as well.

So how do we do this in Adobe Air?

Answer 1

Flextras is right. It is always best to show the effort you have put in to trying different things and trying to figure it out on your own. However, I am in a good mood yet again today so here you go 🙂

Main application:

        import mx.collections.ArrayCollection;

        [Bindable]
        private var list1Array:ArrayCollection = new ArrayCollection([
            {text: "a"},
            {text: "b"},
            {text: "c"},
            {text: "d"},
            {text: "e"}]);
        [Bindable]
        private var list2Array:ArrayCollection = new ArrayCollection();

    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:HGroup>
    <s:List dataProvider="{list1Array}" dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" itemRenderer="listItemRenderer"/>
    <s:List dataProvider="{list2Array}" dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" itemRenderer="listItemRenderer"/>
</s:HGroup>
</s:Application>

listItemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true">

<fx:Script>
    <![CDATA[
        private function updateData():void
        {
            data.text = textArea.text;
        }
    ]]>
</fx:Script>
<s:HGroup>
    <mx:Image width="50" height="50"/>
    <s:TextArea id="textArea" text="{data.text}" change="updateData()"/>
</s:HGroup> 
</s:ItemRenderer>