List Controls

How do I get the contents of one list in another ?...Suppose
I have a list that shows a timeline starting from 1999 to 2005. If
I click on 1999,2002 etc, the contents of that reflects on the
other textarea How to do this ?
I got this code from the Flex Help...
<?xml version="1.0"?>
<!-- Simple example to demonstrate the List Control -->
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var selectedItem:Object;
]]>
</mx:Script>
<mx:Model id="mystates">
<states>
<state label="Alabama" data="AL"/>
<state label="Alaska" data="AK"/>
<state label="Arizona" data="AZ"/>
<state label="Arkansas" data="AR"/>
<state label="California" data="CA"/>
<state label="Colorado" data="CO"/>
<state label="Connecticut" data="CT"/>
</states>
</mx:Model>
<mx:Panel title="List Control Example" height="75%"
width="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10"
paddingRight="10">
<mx:Label text="Select a state to see its
abbreviation."/>
<mx:List id="source" width="100%" color="blue"
dataProvider="{mystates.state}"
change="this.selectedItem=List(event.target).selectedItem"/>
<mx:VBox width="100%">
<mx:Label text="Selected State:
{selectedItem.label}"/>
<mx:Label text="State abbreviation:
{selectedItem.data}"/>
</mx:VBox>
</mx:Panel>
</mx:Application>
Instead of my result in a VBox, I want them in a
textarea...

do you wanna share your solution? Now that you have posted
the question already?

Similar Messages

  • How Do You Populate A Spark List Control With An Array?

    Hello, all,
    Sorry to come accross so frustrated, but how in the name of God do you populate a Spark list control with the data in an array?  You used to be able to do this with the mx:List control, but the guys developing Flex just had to make things more difficult than they need to be!  I am more of a code purist and prefer doing things the way they have been done for decades, but apparently nothing can ever stay simple!
    I simply want to populate a list control with an array and this shouldn't be rocket science!  I found out that I must use a "collection" element, so I decided that an arrayCollection would be best.  However, after searching Adobe's documentation about arrayCollections, I am lost in a black hole of data binding, extra lines of code just to add a new element, the need to sort it, etc...!
    Here is my code:
    var pendingArray:ArrayCollection = new ArrayCollection();
    for ( var i:int = 0 ; i < queue.length ; i++ )
         var item:UserQueueItem = queue[i] as UserQueueItem ;
         if ( item.status == UserQueueItem.STATUS_PENDING )
         pendingArray.addItem({label:item.descriptor.displayName,descriptor:item.descriptor});
    Here is the relevant MXML:
    <s:VGroup>
         <s:List id="knockingList" width="110" height="100"/>              
    </s:VGroup>
    I'm not getting any errors, but the list is not populating.
    I have seen several examples where the arrayCollection is declared and populated in MXML:
            <mx:ArrayCollection id="myAC">
                <!-- Use an fx:Array tag to associate an id with the array. -->
                <fx:Array id="myArray">
                    <fx:Object label="MI" data="Lansing"/>
                    <fx:Object label="MO" data="Jefferson City"/>
                    <fx:Object label="MA" data="Boston"/>
                    etc...
               </fx:Array>
            </mx:ArrayCollection>
    That may be fine for an example, but I think this is a rare situation.  Most of the time I would image that the arrayCollection would be created and populated on the fly in ActionScript!  How can I do this?
    Thanks in advance for any help or advice anyone can give!
    Matt

    In your post it seemed like you were trying to take care of many considerations at once: optimization, design, architecture.  I would suggest you get something up and running and then worry about everything else.
    If I use data binding, then I will probably have to declare the  arrayCollection as a global variable and then I'll have to write 100 or  so extra lines of code to addItem(), removeItem(), sort(), etc...  It  just seems like too much overhead.
    I believe you may have some misconceptions about databinding in general.  You won't have to make it a global variable and you certainly won't need an extra 100 lines of code.  If you did this forum would be a very , very quiet place.
    I don't want to use data binding because the original array is refreshed  often and there is one function called by an event that re-declares the  arrayCollection each time, populates it with the array, and then sets  it as the list's dataprovider.
    That is the beauty of the ArrayCollection, it can handle the updates to its source Array. I don't know if you need to redeclare the ArrayCollection, resetting the source to the new Array allows everyone involved to keep their references so you don't have to worry about any "spooky" stuff going on.

  • How to limit the number of items that a list control can hold?

    Hi,
    I am using a Flex3 List control for one of my projects.
    I add drag & drop functionality to it, so that i can drag & drop elements from one control to another.
    How to limit the number of items that a list control can hold / can be dropped in a list control ?
    - Sen.

    1. Listen for the dragdrop event on the control you are dragging onto.
    2. check the length of the items in the dataprovider - if it exceeds your maximum override the default drop action with e.preventDefault(); (assuming you used e for the event on the handler).
    Regards,
    Mark.

  • A Cursor List Control for the HomeBoyz

    I wanted a Cursor List Control for use with a Waveform Graph, but I couldn't find one anywhere in the Controls Palette. So during a busy morning of data gathering, I took about an hour to write one by hand. [Since I'm getting to be pretty good at LabVIEW, I reckon I can bill about $250/hr for this stuff, so y'all appreciate your free software.]
    Anyway, a Cursor List is an array of Cursor Property Clusters. The attached "Cursor List.vi" contains both a singleton Cursor Property Cluster and an Array of Cursor Property Clusters; the block diagram shows how to wire this array to the Waveform Graph's Cursor List property node.
    Attachments:
    Cursor_List.vi ‏40 KB

    Dennis,
    I followed your instructions..
    It works..!!!

  • Issue in List Control

    I am facing a strange issue on the implementation of List Control on webdynpro ABAP UI screen . I have created a List Control where I have some buttons on the toolbar to perform some action. I am providing the data to the list .
    My issue now is when I select a line item on the first row of the List and click any of the buttons , no actions is getting triggered but works fine for the second row onwards. Can you please help in providing some suggestions?
    Thanks
    Ram

    Hi,
    For the First time, the lead selection is already set in the list control, hence the buttons are not getting triggered.
    You might have written the code inside the buttons only when there is a change in the slection of list.
    Regards,
    Lekha.

  • How to handle multiple selection in the Spark List control with checkbox as itemrenderer?

    Hi All,
    I am using checkbox as an ItemRenderer in spark list.
    I have a query.
    how to handle multiple selection in the Spark List control with checkbox as itemrenderer?
    how to retrieve the selected item label?
    Thank you in advance.

    Hi there, I'll tweak your code a little bit to something like this:
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="vertical">
        <mx:Script>
            <![CDATA[
                 import mx.events.ListEvent;
                 import mx.controls.CheckBox;
               [Bindable]
               private var mySelectedIndexes:ArrayCollection=new ArrayCollection();
                private function onChange(e:ListEvent):void
                   if(CheckBox(e.itemRenderer).selected){
                             mySelectedIndexes.addItem(e.rowIndex);
                   }else{
                                  mySelectedIndexes.removeItemAt(mySelectedIndexes.getItemIndex(e.rowIndex));     
                   chkList.selectedIndices=mySelectedIndexes.toArray();
            ]]>
        </mx:Script>
    <mx:ArrayCollection id="collection">
            <mx:Object label="Test A"/>
            <mx:Object label="Test B"/>
            <mx:Object label="Test C"/>
            <mx:Object label="Test D"/>
            <mx:Object label="Test E"/>
            <mx:Object label="Test F"/>
            <mx:Object label="Test G"/>
        </mx:ArrayCollection>
    <mx:List id="chkList" dataProvider="{collection}" itemRenderer="mx.controls.CheckBox"  itemClick="onChange(event);" allowMultipleSelection="true"/>
    </mx:Application>

  • Embed Font in a List Control

    I have no problem embeding fonts to be used in dynamic text
    but I cannot get my style to apply to a list control using AS3.
    My style code is:
    import fl.managers.StyleManager;
    var menuStyle:TextFormat = new TextFormat();
    menuStyle.color = 0xFFFFFF;
    menuStyle.size = 20;
    menuStyle.font = new CKTerzini().fontName;
    menuStyle.letterSpacing = 1;
    menuStyle.align = "center";
    StyleManager.setComponentStyle(List, "textFormat",
    menuStyle);
    My list control code is:
    my_list.setStyle("embedFonts", true);
    //my_list.setStyle("textFormat", menuStyle); DOES NOT WORK
    my_list.setRendererStyle("textFormat", menuStyle);
    I also have the font added to the library and properly
    linked. (Class name set to CKTerzini).
    This code works fine with the font on the system but not on a
    computer without the font.
    I have tested that the font is embed in the SWF by using the
    style on dynamic text and it works fine.
    Any suggestions would be greatly welcomed...
    Robert Pritchard
    Nerds Software

    Can you post the code for your list, renderer and custom control?

  • Multiple selection in List control using CheckBox as itemrenderer

    Hey all,
                I am trying to get multiple selection working in a list control using the CheckBox as itemrederer but I am unable to get a list of selected indices even though I have multiple check boxes selected
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="vertical">
        <mx:Script>
            <![CDATA[
                private function onChange():void
                    trace(chkList.selectedIndices);
            ]]>
        </mx:Script>
    <mx:ArrayCollection id="collection">
            <mx:Object label="Test A"/>
            <mx:Object label="Test B"/>
            <mx:Object label="Test C"/>
            <mx:Object label="Test D"/>
            <mx:Object label="Test E"/>
            <mx:Object label="Test F"/>
            <mx:Object label="Test G"/>
        </mx:ArrayCollection>
    <mx:List id="chkList" dataProvider="{collection}" itemRenderer="mx.controls.CheckBox" change="onChange();" allowMultipleSelection="true"/>
    </mx:Application>
    I always get the last item I clicked
    Thanks,
    Firdosh

    Hi there, I'll tweak your code a little bit to something like this:
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="vertical">
        <mx:Script>
            <![CDATA[
                 import mx.events.ListEvent;
                 import mx.controls.CheckBox;
               [Bindable]
               private var mySelectedIndexes:ArrayCollection=new ArrayCollection();
                private function onChange(e:ListEvent):void
                   if(CheckBox(e.itemRenderer).selected){
                             mySelectedIndexes.addItem(e.rowIndex);
                   }else{
                                  mySelectedIndexes.removeItemAt(mySelectedIndexes.getItemIndex(e.rowIndex));     
                   chkList.selectedIndices=mySelectedIndexes.toArray();
            ]]>
        </mx:Script>
    <mx:ArrayCollection id="collection">
            <mx:Object label="Test A"/>
            <mx:Object label="Test B"/>
            <mx:Object label="Test C"/>
            <mx:Object label="Test D"/>
            <mx:Object label="Test E"/>
            <mx:Object label="Test F"/>
            <mx:Object label="Test G"/>
        </mx:ArrayCollection>
    <mx:List id="chkList" dataProvider="{collection}" itemRenderer="mx.controls.CheckBox"  itemClick="onChange(event);" allowMultipleSelection="true"/>
    </mx:Application>

  • Issue : drag and drop from list control to tree control

    Hi,
    I was trying a drag and drop from list control to tree control. I have used some sample data to populate list and tree controls .
    It is working fine . except one problem ..
    Prob : when i drag an item to tree control .. it gets added .. now tree contains (X+1) data in list .. say X is the inital number of nodes in a tree node.
              now if i drag another item from list to last item in the tree node  .. i.e at X+1 index. .. it throws null pointer exception.
    I am considerably new in flex programming . looking for help from experts ..
    Below is my code :
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="horizontal"
                    creationComplete="init()">
        <mx:Script>
            <![CDATA[
                import mx.controls.listClasses.IListItemRenderer;
                import mx.rpc.events.FaultEvent;
                import mx.rpc.events.ResultEvent;
                import mx.utils.ObjectUtil;
                import mx.collections.ICollectionView;
                import mx.core.UIComponent;
                import mx.managers.DragManager;
                import mx.events.DragEvent;
                import mx.controls.Alert;
                import mx.controls.Label;
                import mx.events.CloseEvent;
                private var homePath:String="/home/e311394/dndTest/";
                private var destPath:String="/home/e311394/dndDest/";
                private var eid:String="e311394";
                private var actn:String;
                [Bindable]
                private var cm:ContextMenu;
                private var cmi:ContextMenuItem;
                [Bindable]
                private var dp:ArrayCollection;
                private function init():void
                    cmi=new ContextMenuItem("Remove");
                    cmi.enabled=true;
                    cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect);
                    cm=new ContextMenu();
                    cm.hideBuiltInItems();
                    cm.customItems=[cmi];
                    cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenuItem_menuSelect);
                    list.contextMenu=cm;
                private function contextMenuItem_menuSelect(evt:ContextMenuEvent):void
                    list.selectedIndex=lastRollOverIndex;
                private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void
                    var loclSelectedRow:Object=list.selectedItem;
                    var lostrSelectedMenuItem:String;
                    lostrSelectedMenuItem=evt.target.caption;
                    if (loclSelectedRow != null)
                        var obj:Object=new Object()
                        obj.label=loclSelectedRow.label as String;
                            //Alert.show(obj.label);
                    if (lostrSelectedMenuItem == "Remove")
                        if(loclSelectedRow!=null)
                        var pth:String=homePath.concat(loclSelectedRow.label);
                        //Alert.show(pth);
                        //FlexDnDRemoteService.process(eid,"delete",pth,"-"); 
                        var coll:ArrayCollection=list.dataProvider as ArrayCollection;
                        if (coll.contains(loclSelectedRow))
                            coll.removeItemAt(coll.getItemIndex(loclSelectedRow));
                public function onTreeDragEnter(event:DragEvent):void
                    event.preventDefault();
                    DragManager.acceptDragDrop(event.target as UIComponent);
                    tree.showDropFeedback(event);
                protected function onTreeDragOver(event:DragEvent):void
                    event.preventDefault();
                    event.currentTarget.hideDropFeedback(event);
                    try
                        var index:int=tree.calculateDropIndex(event);
                    catch (e:Error)
                        DragManager.showFeedback(DragManager.NONE);
                        return;
                    tree.selectedIndex=index;
                    var draggedOverItem:Object=tree.selectedItem;
                public function onTreeDragExit(event:DragEvent):void
                    event.preventDefault();
                    tree.hideDropFeedback(event);
                private function showAlert():void
                    Alert.yesLabel="Move";
                    Alert.noLabel="Copy";
                    Alert.buttonWidth=70;
                    Alert.show("Copy / Move ?", "Confirm", Alert.YES | Alert.NO | Alert.CANCEL, this, alertListener, null, Alert.OK);
                private function alertListener(eventObj:CloseEvent):void
                    var result:Boolean=false;
                    if (eventObj.detail == Alert.CANCEL)
                        //Alert.show("CANCEL");
                        return;
                    if (eventObj.detail == Alert.YES)
                        //Alert.show("YES");
                        result=true;
                    else if (eventObj.detail == Alert.NO)
                        //Alert.show("NO");
                        result=false;
                    var index:int=tree.calculateDropIndex(treedropevt);
                    //Alert.show("Drop Pos" + index.toString());
                    /* var treeList:ArrayCollection=tree.dataProvider as ArrayCollection;
                       Alert.show(" index"+index+"Length "+treeList.length);
                       if(index > treeList.length)
                       Alert.show("Returning");
                       return;
                    var items:Array=new Array();
                    if (treedropevt.dragSource.hasFormat("items"))
                        items=items.concat(treedropevt.dragSource.dataForFormat("items") as Array);
                    var parentItem:Object;
                    parentItem=getObjectTarget();
                    /* if (tree.dataDescriptor.isBranch(tree.indexToItemRenderer(index).data))
                       parentItem=tree.indexToItemRenderer(index).data;
                       else
                       var dropParentPackage:Object = tree.mx_internal::_dropData.parent as Object;
                       Alert.show("HAck"+dropParentPackage.toString());
                       parentItem=tree.getParentItem(tree.indexToItemRenderer(index).data);
                       //Alert.show("Lenght "+ObjectUtil.getClassInfo(parentItem).properties.length);
                    //Alert.show("Lenght "+ObjectUtil.getClassInfo(parentItem).properties.length);
                    var position:int=0;
                    /* if(ObjectUtil.getClassInfo(parentItem).properties.length==0)
                       Alert.show("Returning");
                       return;
                    if (parentItem != null)
                        try
                            while (tree.indexToItemRenderer(index).data != parentItem)
                                //Alert.show(tree.indexToItemRenderer(index).data.toString());
                                if (index > 0)
                                    index--;
                                //Alert.show("Insiade");
                                position++;
                        catch (e:Error)
                            Alert.show("Catch" + index.toString());
                            return;
                    for each (var item:Object in items)
                        var obj:Object=new Object()
                        obj.label=item.label as String;
                        if (parentItem != null)
                            //Alert.show("ADDED");                       
                            tree.dataDescriptor.addChildAt(parentItem, obj, position++);                       
                        else
                            //Alert.show("PARENT NULL");
                            tree.dataDescriptor.addChildAt(tree.selectedItem, obj, position++);                       
                        var spth:String=homePath.concat(item.label);
                        //Alert.show(spth);   
                        var dpth:String=destPath.concat(item.label);
                        //Alert.show(dpth);
                        if (result == true)
                            removeItems();
                                //FlexDnDRemoteService.process(eid,"move",spth,dpth);
                        else
                            //FlexDnDRemoteService.process(eid,"copy",spth,dpth);
                        tree.validateNow();
                public function getObjectTarget():Object
                    var dropData:Object=tree.mx_internal::_dropData as Object;
                    if (dropData.parent != null)
                        return dropData.parent;
                    else
                        // if there is not parent (root of the tree), I take the root directly
                        var renderer:IListItemRenderer=tree.indexToItemRenderer(0);
                        return renderer.data;
                public function removeItems():void
                    //remove moved elements
                    var items:Array=treedropevt.dragSource.dataForFormat("items") as Array;
                    var coll:ArrayCollection=list.dataProvider as ArrayCollection;
                    for each (var item:Object in items)
                        if (coll.contains(item))
                            coll.removeItemAt(coll.getItemIndex(item));
                private var treedropevt:DragEvent;
                public function onTreeDragDrop(event:DragEvent):void
                    treedropevt=event;
                    showAlert();
                    event.preventDefault();
                    tree.hideDropFeedback(event);
                public function resultHandler(event:ResultEvent):void
                    Alert.show("Success", "Status");
                public function faultHandler(event:FaultEvent):void
                    Alert.show(event.fault.faultString, "Failure");
            ]]>
        </mx:Script>
        <mx:ArrayCollection id="listDP">
            <mx:Object label="File1.dnd"/>
            <mx:Object label="File2.dnd"/>
            <mx:Object label="File3.dnd"/>
            <mx:Object label="File4.dnd"/>
            <mx:Object label="File5.dnd"/>
        </mx:ArrayCollection>
        <mx:Number id="lastRollOverIndex"/>
        <!--
             <mx:ArrayCollection id="treeDP">
             <mx:Object label="/home">
             <mx:children>
             <mx:Object label="dummy1.ks"/>
             <mx:Object label="dummy2.ks"/>
             <mx:Object label="e493126">
             <mx:children>
             <mx:ArrayCollection>
             <mx:Object label="/home/e493126/sample1.ks"/>
             </mx:ArrayCollection>
             </mx:children>
             </mx:Object>
             </mx:children>
             </mx:Object>
             </mx:ArrayCollection>
        -->
        <mx:ArrayCollection id="treeDP">
            <mx:Object label="/dndDest">
                <mx:children>
                    <mx:ArrayCollection>
                        <mx:Object label="sample1.ks"/>
                        <mx:Object label="sample2.ks"/>
                        <mx:Object label="sample3.ks"/>
                        <mx:Object label="sample4.ks"/>
                        <mx:Object label="sample5.ks"/>
                        <mx:Object label="sample6.ks"/>
                    </mx:ArrayCollection>
                </mx:children>
            </mx:Object>
        </mx:ArrayCollection>
        <mx:List id="list"
                 itemRollOver="lastRollOverIndex = event.rowIndex"
                 width="50%"
                 dragEnabled="true"
                 dataProvider="{listDP}"
                 labelField="label"
                 allowMultipleSelection="true"
                 dragMoveEnabled="false">
        </mx:List>
        <mx:Tree id="tree"
                 width="50%"            
                 dragEnabled="true"            
                 dataProvider="{treeDP}"            
                 dragEnter="onTreeDragEnter(event)"
                 dragOver="onTreeDragOver(event)"
                 dragExit="onTreeDragExit(event)"
                 dragDrop="onTreeDragDrop(event)"
                 labelField="label"
                 liveScrolling="true">
        </mx:Tree>
        <mx:RemoteObject id="FlexDnDRemoteService"
                         showBusyCursor="true"
                         destination="FlexDnD">
            <mx:method name="process"
                       result="resultHandler(event)"
                       fault="faultHandler(event)"/>
        </mx:RemoteObject>
    </mx:Application>
    Thanks,
    Rajiv

    Ya , i have searched and have used the same code.
    But needed to customize few things like:
    stop dnd in same tree
    drop some item into a folder ..( onto it ) etc
    have achieved the same .. but this issue ..
    i think the tree dataprovider (contents internally is not being updated .. only the UI)
    any suggestions ?
    - Rajiv

  • Value drop down list control in ADOBE Form

    We are on SP16 currently. We are developing an ADOBE interactive online
    form using ABAP WebDynpro.
    To display search help of a few fields like Vendor Number, G/L Account
    Number, Cost Center, we are using 'Value Help Drop Down List' control
    availalbe in WebDynpro Native group.
    After the form gets loaded on the broswer, first time the search help
    control works absolutely fine for any of the field. But only once. Once
    one search help gets displayed, none of the other search value drop
    down control gets clicked. But please note that normal drop down (with
    fixed values) gets clicked and allows to choose any entry from it. It
    also allows to enter values into other text box controls. Only Search
    Value Drop Down list stops working.
    For Example: We have 2 search help drop down list controls (one for
    LIFNR and another for WERKS) and 1 drop down list control (Fixed Values
    to be displayed for selection).
    After form gets displayed on ABAP WebDynpro, if we click on LIFNR, the
    search help for LIFNR will come and it will allow to select vendor
    number from it. But after that, it doesn't allow to select WERKS nor
    even to LIFNR. If we click on WERKS first, it will work perfactly fine
    but then, it will not allow LIFNR or WERKS after that. In any of the
    case, it will always allow to select the values from Fixed Value Drop
    down list.
    Please note that we dont have SAP Portal into the landscape.
    Is there any bug in the control?
    Please provide the solution ASAP.

    Hi Reema,
    We are using ZCI type of form. So, I dont think there is any need to run the report for ZCI_Update.
    And the display type of Interactive Form in ABAP WebDynpro is 'NATIVE' which is the same we dragged the control from (WebDynpro Native).
    Is there any work around to display search helps on ADOBE Interactive forms apart of this control?
    Appreciate your quick answer.
    Thanks & Regardss,
    Sandip Kamdar

  • ContextMenu in List controls

    I have a context menu defined as such:
    _menu = new ContextMenu();
    _menu.hideBuiltInItems();
    this.menu = _menu;
    placed in the init method of a cell renderer. However, the
    normal context menu appears when right clicking on an item.
    I can place this same code on the main movie clip and it the
    updated context menu will display, but I only want it for the items
    in my list control.
    Is there any way to get a specific context menu to work on a
    specific movie clip which is a cell renderer in a list
    control?[

    Anybody?

  • How to intercept a dataTips 'show' event (list control)?

    Hi people,
    I'm using  a list control with showDataTips property set to true, so as dataTips are automatically displayed when the text is too long for the row. The point is that I need to preserve this condition (i.e. I don't want dataTips to be displayed when the row entirely contains the text) but my goal is to delegate the datatips 'show' event to another control. However I cannot figure out how to intercept that event. As any UIComponent the list control dispatches a toolTipShow event but this doesn't regard dataTips
    I suppose I could just disable showDataTips and implement my own logics using the itemRollOver event. But, in that case, how to check whether the text is too long for the row?
    Thanks for any help,
    @+
    Marc

    You'd be better off posting this in the developer forums : https://devforums.apple.com/index.jspa

  • Custom dragIndicator on Spark List Control

    I have a Spark List Control that is displaying a tilelayout of dynamically imported Images.  Basically, a bunch of thumbnail Images that are displayed in a tile layout.  I have drag drop enabled so that I can reorder these thumbnails and everything is working great except for one thing, the dragIndicator.  In my itemrenderer, I have the Image included in the "dragging" state, but the image is not showing in the dragIndicator.  I am basically just getting a semi-transparent square as my dragIndicator, but I want to be able to actually drag my thumbnail.  Any ideas how to do this?
    Here is my List:
    <s:List id="ImageList1" x="77" y="95" width="858" height="412" dataProvider="{imageAC}"
         itemRenderer="renderers.ImageACSmallItemRenderer" contentBackgroundColor="0x000000"
         borderVisible="false" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
         allowMultipleSelection="true" skinClass="skins.General.ListSkin" focusAlpha="0" mouseMove="getImageProxy(event)">
         <s:layout>
              <s:TileLayout columnWidth="76" rowHeight="76" horizontalAlign="center" verticalAlign="middle"
                     horizontalGap="8" verticalGap="8"/>
         </s:layout>
    </s:List>
    Here is my Itemrenderer:
    <fx:Script>
         <![CDATA[
              import mx.utils.ObjectProxy;
              [Bindable]
              public var dataProxy:ObjectProxy;
              private function init():void {
                   dataProxy = new ObjectProxy(data);
         ]]>
    </fx:Script>
         <s:states>
              <s:State name="normal" />
              <s:State name="hovered" />
              <s:State name="selected" />
              <s:State name="dragging" />
         </s:states>
         <mx:Image source="{dataProxy.pathSmall}" horizontalCenter="0" verticalCenter="0" includeIn="normal, hovered, selected, dragging"/>
    </s:ItemRenderer>
    Thanks for any insight!

    Hi Evtim,
    Earlier this summer, you helped me to create an itemRenderer that would allow me to drag photos in a list with a grid layout so that I could re-order them, and the dragIndicator would remain the photo instead of a empty box.  We accomplished this by using the contentCache feature with the Spark BitmapImage.  Now when I drag my photos, they remain photos even while being dragged.  Your very elegant solution ended up looking like this:
    <?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"
                                            width="76" height="76" focusEnabled="false">
              <fx:Script>
                        <![CDATA[
                                  import spark.core.ContentCache;
                                  static private const contentCache:ContentCache = new ContentCache();
                        ]]>
              </fx:Script>
              <s:states>
                        <s:State name="normal" />
                        <s:State name="hovered" />
                        <s:State name="selected" />
                        <s:State name="dragging" />
              </s:states>
              <s:BitmapImage source="{data.pathSmall}" width="70" height="70" contentLoader="{contentCache}"
                                                horizontalCenter="0" verticalCenter="0" alpha.dragging="2" includeIn="normal, hovered, selected, dragging"/>
    </s:ItemRenderer>
    Now I have another little interesting challenge with this itemRenderer.  I don't want to bore you with details, but the situation is that I will no longer be loading thumbnails that are 70x70 pixels in size, but I will be loading photos with various dimensions that have to be displayed as a 70x70 pixel thumbnail.  So I am going to create a Group that is 70x70 pixels, turn on the clipAndEnableScrolling for the Group, and then place the photos within the Group so that they essentially get cropped.  The images that I import will have to be resized to either 70 pixels wide or 70 pixels high depending on what is the larger dimension of the of the image, and then placed inside the Group so that I get a perfect center-crop of the images.
    So to summarize, I need to load the photos using a loader.  Then I can figure out with the height and width of the photos is.  Then I can scale the photo so that the smaller dimension is 70 pixels, and then I can place it in the Group.  But to do all of this, I can no longer do it in MXML but have to do it in ActionScript... and thus my dilema.  I can't figure out how to use the contentCache properly in ActionScript so that the images stay images when dragged.  Here is what I have so far:
    <?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"
                                            width="76" height="76" focusEnabled="false" dataChange="init(event)">
              <fx:Script>
                        <![CDATA[
                                  import mx.core.FlexGlobals;
                                  import mx.events.FlexEvent;
                                  import spark.core.ContentCache; 
                                  private var contentCache:ContentCache = new ContentCache();
                                  private var imageLoader:Loader = new Loader();
                                  private var bitmapImg:BitmapImage = new BitmapImage();
                                  private var widthHolder:int;
                                  private var heightHolder:int;
                                  protected function init(event:FlexEvent):void {
                                            var request:URLRequest = new URLRequest(FlexGlobals.topLevelApplication.imageAC[this.itemIndex].pathSmall);
                                            imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, createVisuals);
                                            imageLoader.load(request);
                                  private function createVisuals(event:Event):void{
                                            bitmapImg.source = Bitmap(imageLoader.content);
                                            bitmapImg.horizontalCenter = 0;
                                            bitmapImg.verticalCenter = 0;
                                            bitmapImg.smooth = true;
                                            bitmapImg.smoothingQuality = "high";
                                            widthHolder = imageLoader.width;
                                            heightHolder = imageLoader.height;
                                            if (widthHolder > heightHolder) {
                                                      bitmapImg.width = int(Math.round(70*widthHolder/heightHolder));
                                                      bitmapImg.height = 70;
                                            else {
                                                      bitmapImg.width = 70;
                                                      bitmapImg.height = int(Math.round(70*heightHolder/widthHolder));
                                            imageGroup.addElement(bitmapImg);
                        ]]>
              </fx:Script>
              <s:states>
                        <s:State name="normal" />
                        <s:State name="hovered" />
                        <s:State name="selected" />
                        <s:State name="dragging"/>
              </s:states>
              <s:Group id="imageGroup" width="70" height="70" horizontalCenter="0" verticalCenter="0" clipAndEnableScrolling="true"/>
    </s:ItemRenderer>
    So when there is a dataChange in my List, the init() function gets called to load the image.  When the load is complete, the createVisuals() method resizes the image and places it in the Group. Everything is working as expected.  The images get resized, centered and cropped within the group, and smoothed out so that they look nice.  But now when I drag them, I get an empty box while dragging.  I am unsure of how to tie in the contentCache with my bitmapImage object so that it will stay an image while being dragged using actionScript.  I don't know if it is as simple as setting the contentLoader property for the bitmapImage object, or if it is more complicated and I need to set the image source for the "dragging" state.  Could you possibly give me some insight as to how to make this happen in ActionScript?
    Thanks for any insight!
    Bill

  • Relating 2 tables with one List Control

    I am testing the new data services in FB4 with PHP.   I have created a simple List control that displays a mySQL list  -- which works fine.
    When I double click on an item in the list, I want to use it as the search index for a second table. I use the doubleclick event to make the call to search the second table.
    I set the dataprovider of the same List control to the new search result array returned from the second table.   This does not work.
    The Individual search code to each table work fine, but calling the second search in the doublclick event function does not.
    any examples would be appreciated.

    Thanks for your help.   My code is below:
    <?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/halo" minWidth="1024" minHeight="768" height="314" width="574" xmlns:categories="services.categories.*" xmlns:subcategories="services.subcategories.*">
    <fx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    import mx.events.FlexEvent;
    import mx.events.IndexChangedEvent;
    import com.adobe.serializers.utility.TypeUtility;
    import mx.controls.Alert;
    protected function connectToData(event:FlexEvent):void
    getAllItemsResult.token = categories.getAllItems();
    protected function list1_doubleClickHandler(event:MouseEvent):void
    var item:* = category.dataProvider.getItemAt(category.selectedIndex);
    getAllItemsResult2.token = subcategories.getAllItems(item.id);
    category.dataProvider = TypeUtility.convertToCollection(getAllItemsResult2.lastResult);
    category.labelField = "name";
    ]]>
    </fx:Script>
    <fx:Declarations>
    <s:CallResponder id="getAllItemsResult"/>
    <categories:Categories id="categories" destination="categories" endpoint="http://springblue/justin/flex/groupbrowser/bin-debug/gateway.php" fault="Alert.show(event.fault.faultString)" showBusyCursor="true" source="categories"/>
    <s:CallResponder id="getAllItemsResult2"/>
    <subcategories:Subcategories id="subcategories" destination="subcategories" endpoint="http://springblue/justin/flex/groupbrowser/bin-debug/gateway.php" fault="Alert.show(event.fault.faultString)" showBusyCursor="true" source="subcategories"/>
    </fx:Declarations>
    <s:List x="25" y="28" height="265" width="525" id="category" doubleClickEnabled="true" doubleClick="list1_doubleClickHandler(event)" creationComplete="connectToData(event)" dataProvider="{TypeUtility.convertToCollection(getAllItemsResult.lastResult)}" labelField="category_name" contentBackgroundColor="#E5E5E5"/>
    </s:Application>

  • Help! - Distorted Add Remove List control!

    Can anyone tell me why on some pc's my Add Remove list control appears stretched out - that is, the right-side 'selected' list box will extend to the left covering the add/remove buttons and the same 'selected' box is only half drawn from the left side (right side missing), including the title being truncated, and the title is then duplicated to the right in its entirety. (It is hard to describe but I can provide a screenshot if needed).
    As soon as an item is selected or de-selected, it re-adjusts itself to normalcy!
    It seems to be a browser independent problem which ONLY happens on SOME pc's and NEVER on others! This leads me to suspect an out-of-date jar or class file on the local pc but I can't seem to find anything inconsistent.
    CAN ANYONE HELP?! It is preventing us from putting this page into production and I would hate to have to write my own replacement, as it would take more time than we have.
    Thanks in advance for your assistance,
    <-j->

    PS - I have tried REPEATEDLY to add some Duke Dollars to this submission to no avail!

  • Displaying icons in List control

    Hi everybody…
    I am trying to display icons in List control:
    <mx:List id="wEuropeList" width="100%" height="100%"
    color="blue"
    dataProvider="{wEuropeXML..client.@label}"
    change="changeHandler(event)"
    borderThickness="0"
    iconField="{wEuropeXML..country.@flag}"/>
    I know I am an idiot but please help me to make it
    work….
    Thanks

    Icons are not natively set to allow runtime images. So trying
    the method you are now won't work just because by default when your
    Flex application compiles it looks for that icon to embed with it.
    There are two ways you can essentially get around this. A) is best
    described by Ben Stucki with his post
    here B) would be to use
    an itemRenderer that uses an Image Control and pass the source to
    that. Either one should do the trick. Hope this helps.

Maybe you are looking for

  • Problems installing Adobe Photoshop Elements 9 - Rollback action issue.

    Im having problems installing Adobe Photoshop Elements 9. The problem is right at the end of installation, it says status is registering and then immediately does an action rollback. The message "The wizard was interrupted before Adobe Photoshop Elem

  • Need to install Standard VGA Graphics Adapter

    My computer initially started with a Standard VGA Graphics Adapter but now its gone and some applications won't run properly. How can I fix this?

  • ABAP Dump on Approving Travel Request

    Hello, We are implementing MSS and when a manager is trying to open a Workitem to Approve a Travel request he gets the following ABAP Dump. The following error text was processed in system R3Q : Value null of URL parameter SAP_FITV_PERSNO has the wro

  • ODI Runtime Parameter value usage

    Hi Gurus, I need a variable which will be used to capture a value @ run-time of ODI scenario This value will be used to update a table column. When I would execute the scenario it should prompt for the value of this variable. What I tried :- create a

  • RMAN  - Last Successful backup

    Dear Experts, RDBMS - 11.1.0.7 I would like to know if anyone of you have experienced this issue. Below is my backup report (queried from recovery catalog) and see DB1 database, I see Last successful Incremental backup date showing 01/01/0001 while t