Multitline in a list labelField

I am working on flash builder 4.5.1 (mobile application) and i want to show the labelfield in multiline. How can i do that ?

Hi,
Following Action Script class might help you:
package components
import mx.core.UITextField;
import flash.text.TextFieldAutoSize;
import mx.controls.Label;
import flash.display.DisplayObject;
public class MultiLineLabel extends Label
override protected function createChildren() : void
// Create a UITextField to display the label.
if (!textField)
textField = new UITextField();
textField.styleName = this;
addChild(DisplayObject(textField));
super.createChildren();
textField.multiline = true;
textField.wordWrap = true;
textField.autoSize = TextFieldAutoSize.LEFT;
Thanks and Regards,
Kanchan Ladwani | [email protected] | www.infocepts.com

Similar Messages

  • Unable to set Labelfield for child element  in List

    Hi All,
    Below is code I am trying to execute
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="0" xmlns:local="*" height="500" creationComplete="init()" >
    <mx:Script>
    <![CDATA[
    private var arr:Array = [{ firstName: "Alex", children:{lastName: "Abc"}}] 
    private function init():void{list.dataProvider=arr;
    ]]>
    </mx:Script>
    <mx:List variableRowHeight="true" wordWrap="
    true" id="list" labelField="
    chidren.lastName" /></mx:Application>
    I basically want to access the children.lastName on my List. Please let me know how exactly can I do it.

A: Unable to set Labelfield for child element  in List

labelFunction is the best way to do this. The attached code also shows how to do it with an itemRenderer, though that would not be as efficient.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="horizontal"
  creationComplete="init()" >
  <mx:Script>
    <![CDATA[
      private var arr:Array = [{ firstName: "Alex", children:{lastName: "Abc"}}]
      private function init():void{
        list1.dataProvider=arr;
        list2.dataProvider=arr;
      private function createLabels(item:Object):String{
        return item.children.lastName;
    ]]>
  </mx:Script>
  <mx:List variableRowHeight="true"
    wordWrap="true" id="list1">
    <mx:itemRenderer>
      <mx:Component>
        <mx:Label text="{data.children.lastName}"/>
      </mx:Component>
    </mx:itemRenderer>
  </mx:List>
  <mx:List variableRowHeight="true"
    wordWrap="true" id="list2"
    labelFunction="createLabels"/>
</mx:Application>
If this post answers your question or helps, please mark it as such. Thanks!
http://www.stardustsystems.com
Adobe Flex Development and Support Services

labelFunction is the best way to do this. The attached code also shows how to do it with an itemRenderer, though that would not be as efficient.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="horizontal"
  creationComplete="init()" >
  <mx:Script>
    <![CDATA[
      private var arr:Array = [{ firstName: "Alex", children:{lastName: "Abc"}}]
      private function init():void{
        list1.dataProvider=arr;
        list2.dataProvider=arr;
      private function createLabels(item:Object):String{
        return item.children.lastName;
    ]]>
  </mx:Script>
  <mx:List variableRowHeight="true"
    wordWrap="true" id="list1">
    <mx:itemRenderer>
      <mx:Component>
        <mx:Label text="{data.children.lastName}"/>
      </mx:Component>
    </mx:itemRenderer>
  </mx:List>
  <mx:List variableRowHeight="true"
    wordWrap="true" id="list2"
    labelFunction="createLabels"/>
</mx:Application>
If this post answers your question or helps, please mark it as such. Thanks!
http://www.stardustsystems.com
Adobe Flex Development and Support Services

  • Whats the best practice to simply manage data using php sql?

    Hi
    I'm trying to follow some tutorials but there is too much old material and I'm getting confused.
    This is basic. I have a db and I want to movement data from flex.
    So, this is how I'm trying to do so. As a newbie, I will try to be clear.
    I have created a simple table called "teste" using myphpadmin with only 2 fields for testing.  (id, name).
    I have created the services automaticly using flex to generate a php code.
    This code is a simple exercise with buttons to add, update, and delete a Item.
    Although there is a lot of auto-generated code, I had a lot of work (due to my ignorance) to make it work.
    It fairly works, but I know veteran users would make it better, smarter, shorter, and ALL I WANT is a better (and simple) example to follow
    Please.
    Thanks in advance
    ps. I have set my table field "name" to the 'utf8_unicode_ci' while creating it and I it seems the adobe's generated php can't handle latin chars.
    THE CODE AS FOLLOWS:
    <?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"
                      xmlns:valueObjects="valueObjects.*"
                      xmlns:testeservice="services.testeservice.*"
                      creationComplete="application1_creationCompleteHandler()" >
    <fx:Script>
              <![CDATA[
                   import mx.collections.ArrayCollection;
                   import mx.controls.Alert;
                   import mx.events.FlexEvent;
                   import mx.events.ListEvent;               
                   import spark.events.IndexChangeEvent;
                   import spark.events.TextOperationEvent;               
                   //selected item
                   public var selId:int;
                   //------GET ITEM (init)------------------------------------------------------
                   protected function application1_creationCompleteHandler():void
                        tx_edit.addEventListener(KeyboardEvent.KEY_UP,parallelEdit)
                        getAllTesteResult.token = testeService.getAllTeste();                    
                   //------SELECTED ITEM ID------------------------------------------------------          
                   protected function list_changeHandler(event:IndexChangeEvent):void
                        selId = event.currentTarget.selectedItem.id;
                        lb_selectedId.text = "sel id: "+ selId;
                        if(tb_edit.selected) tx_edit.text = event.currentTarget.selectedItem.name;
                   //------ADD ITEM-----------------------------------------------------
                   protected function button_clickHandler(event:MouseEvent):void
                        var teste2:Teste     =     new Teste();
                        teste2.name                = nameTextInput.text;
                        createTesteResult.token = testeService.createTeste(teste2);
                        application1_creationCompleteHandler();
                   //------UPDATE ITEM (in parallel)-----------------------------------------------------
                   private function parallelEdit(e:KeyboardEvent):void
                        if(!isNaN(selId) && selId > 0){
                             if(tb_edit.selected){
                                  //uptadating
                                  teste2.id                     = selId;
                                  teste2.name                = tx_edit.text;
                                  updateTesteResult.token = testeService.updateTeste(teste2);
                   //------UPDATE ITEM (button click)-----------------------------------------------------
                   protected function button3_clickHandler(event:MouseEvent):void
                        teste2.id                     = parseInt(idTextInput2.text);
                        teste2.name                = nameTextInput2.text;
                        updateTesteResult.token = testeService.updateTeste(teste2);
                   //------DELETE ITEM------------------------------------------------------     
                   protected function button2_clickHandler(event:MouseEvent):void
                        if(!isNaN(selId) && selId > 0)     deleteTesteResult.token = testeService.deleteTeste(selId);
              ]]>
         </fx:Script>
         <fx:Declarations>
              <!-- this part was mostly auto generated -->
              <valueObjects:Teste id="teste"/>
              <testeservice:TesteService id="testeService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
              <s:CallResponder id="createTesteResult"/>          
              <s:CallResponder id="getAllTesteResult"/>
              <s:CallResponder id="deleteTesteResult"/>
              <s:CallResponder id="updateTesteResult"/>
              <valueObjects:Teste id="teste2"/> 
         </fx:Declarations>
              <!-- this are just visual objects. Renamed only necessary for this example
                    most lines were auto-generated-->
         <!--Create form -->
         <mx:Form defaultButton="{button}">
              <mx:FormItem label="Name">
                   <s:TextInput id="nameTextInput" text="{teste.name}"/>
              </mx:FormItem>
              <s:Button label="CreateTeste" id="button" click="button_clickHandler(event)"/>
         </mx:Form>     
         <!--Create Result -->
         <mx:Form x="10" y="117">
              <mx:FormItem label="CreateTeste">
                   <s:TextInput id="createTesteTextInput" text="{createTesteResult.lastResult as int}" />
              </mx:FormItem>
         </mx:Form>
         <!--List -->
         <s:List x="10" y="179" id="list" labelField="name" change="list_changeHandler(event)">
              <s:AsyncListView  id="anta" list="{getAllTesteResult.lastResult}" />
         </s:List>
         <!--Update in parallel -->
         <s:Label x="147" y="179" id="lb_selectedId"/>
         <s:Button x="147" y="222" label="Remove" id="button2" click="button2_clickHandler(event)"/>
         <s:TextInput x="225" y="257" id="tx_edit"/>
         <s:ToggleButton x="147" y="257" label="Edit" id="tb_edit"  />
         <!--Update with button click -->
         <mx:Form defaultButton="{button3}" x="220" y="0">
              <mx:FormItem label="Id">
                   <s:TextInput id="idTextInput2" text="{teste2.id}"/>
              </mx:FormItem>
              <mx:FormItem label="Name">
                   <s:TextInput id="nameTextInput2" text="{teste2.name}"/>
              </mx:FormItem>
              <s:Button label="UpdateTeste" id="button3" click="button3_clickHandler(event)"/>
         </mx:Form>
    </s:Application>

    Sorry - I had to read up on what a base table block was.
    I think I am. In this particular form I have one block - a customer block which has its items pulled in from the customer table, no problems there, it works fine.
    My problem is I need to make it as user friendly as possible, if the user inputs the wrong customer ID (or does not know their name) I want them to be able to scroll through the customer list using an up or down button.
    When do you have the commit_form statement run, (the OK button) after every change or after a block of changes ? Commit writes the changes to the database giving other users access to that data right ?! How often should it be used ?

  • Is it possible to implement a 4bit image?

    Hi!
    I have some exotic image files with one, 16bit channel. Currently I am able to display them in flex by translating this to 4 8it channels in a bitmapData and using a shader. But, the problem with this is it takes twice the memory it should (16bit to 32bit...).
    I am wondering is it possible to somehow extend the BitmapImage class and override important methods to somehow solve this problem?
    Thx for help!

    So I've done some testing with PNG formats, with test cases from this page: http://www.schaik.com/pngsuite2011/pngsuite_bas_png.html
    Flex handles all this formats well, but it still converts the output to raw 4 8bit channel BitmapData :/
    Test in the Profiler with this code:
    <?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"
                      backgroundColor="0xff0000">
         <fx:Script>
              <![CDATA[
                   [Bindable] private var source:String;
                   private function investigate():void{
                        trace("lold");
              ]]>
         </fx:Script>
         <s:VGroup>
              <s:Label text="PNG test"/>
              <s:Image id="image"
                         source="{source}"
                         cachePolicy="off"
                         cacheAsBitmap="false"/>
              <s:List id="list"
                        labelField="desc"
                        change=" source = list.selectedItem.source; ">
                   <s:dataProvider>
                        <s:ArrayCollection>
                             <fx:Object desc="bit1" source="http://www.schaik.com/pngsuite2011/basn0g01.png"/>
                             <fx:Object desc="bit16" source="http://www.schaik.com/pngsuite2011/basn0g16.png"/>
                             <fx:Object desc="bit64" source="http://www.schaik.com/pngsuite2011/basn6a16.png"/>
                             <fx:Object desc="bit32" source="http://www.schaik.com/pngsuite2011/basn3p08.png"/>                         
                        </s:ArrayCollection>
                   </s:dataProvider>
              </s:List>
              <s:Button click="investigate();"/>
         </s:VGroup>
    </s:Application>

  • Iterating through openItems (Tree)

    I have a tree called cat_tree, which looks like:
    <mx:Tree id="cat_tree"
    dataProvider="{categories_list.list}" labelField="@label"
    showRoot="true" width="375" height="250"
    change="event.currentTarget.editable=false;updateGroups()"
    editable="false" itemClick="event.currentTarget.editable=true"
    itemEditEnd="event.currentTarget.editable=false;updateCategory()"/>
    Oh and by the way, if you ever wanted to figure out that
    problem of making a tree only editable on double-click, the above
    is the answer. Sorry, to go off on a different tangent here, but I
    know people have butted their heads against walls on this one from
    browsing through some forums. You simply just set editable to
    "false" and then for itemClick, you set it to
    "event.currentTarget.editable = true", then for itemEditEnd, you
    set the value to "event.currentTarget.editable = false" and for
    change you set the value to "event.currentTarget.editable = false".
    Basically what that does is when you click on an item (before
    you click on an item, editable is set to false, so it doesn't go
    into "edit" mode), it turns on editability for the tree. Then, when
    you click again, since editability is now enabled, it goes into
    "edit" mode. ItemEditEnd tells the tree to turn off editibility
    when you finish editing the item again. So, this works great, but
    if you then click on one node of a tree and then click on another,
    it goes straight into edit mode, so then you add change and set it
    to "event.currentTarget.editable = false", so when you change
    nodes, it resets the editability to false and then (luckily)
    itemClick gets called after change, so then itemClick starts it's
    process all over again.
    I hope that all made sense. Anyways, if you need to use this
    a lot, I would advise putting it into a custom component.
    So, that tells you why the above code might look a little bit
    "funky". Anyways, moving on to the real reason of my post...
    I have a function called updateCategory which gets called
    after a node is edited. Basically, I want to store the values in
    tree.openItems and then restore them when the dataProvider gets
    updated (the dataProvider is an HTTPService that gets resent).
    My function looks like:
    private function updateCategory():void{
    var openedItems:Array = new Array();
    Alert.show(cat_tree.openItems.children().length());
    x:int;
    for(x = 0; x < cat_tree.openItems.length(); x ++){
    openedItems[x] = cat_tree.openItems[x].@id;
    var new_name:String =
    TextInput(cat_tree.itemEditorInstance).text
    var rVars:Object = new Object();
    rVars.new_name = new_name;
    rVars.category = cat_tree.selectedItem.@id;
    categories_list_http.send(rVars);
    x:int;
    for(x = 0; x < openedItems.length(); x ++){
    cat_tree.expandItem(categories_list.list.node.(@id==openedItems[x]),true,false,false);
    Should this work in theory, or am I totally off the mark. I
    had initially tried something like:
    private function updateCategory():void{
    var openedItems:Object = new Object();
    openedItems = cat_tree.openItems;
    var new_name:String =
    TextInput(cat_tree.itemEditorInstance).text
    var rVars:Object = new Object();
    rVars.new_name = new_name;
    rVars.category = cat_tree.selectedItem.@id;
    categories_list_http.send(rVars);
    cat_tree.openItems = openedItems;
    but that didn't work at all.
    Any pointers.
    I know, I could just use a second HTTPService call and use
    that for updating and have my initial one just never refresh, and I
    may have to do that, but now my curiosity has gotten the better of
    me.

    I've got it to finally work with openItems. I blogged the
    complete source on my
    blog.
    Here's snippets from my code.
    In the Script tag:
    [Bindable]
    public var tempOpen:Object = new Object();
    [Bindable]
    public var refreshSO:Boolean = false;
    public function switchDP():void
    tempOpen = testTree.openItems;
    refreshSO = true;
    if (currentDP == "tempObject")
    currentDP = "secondObject";
    testTree.dataProvider = secondObject;
    else
    currentDP = "tempObject";
    testTree.dataProvider = tempObject;
    public function renderFunc():void
    if (refreshSO)
    refreshSO = false;
    testTree.openItems = tempOpen;
    In my mxml code:
    <mx:Tree id="testTree" render="renderFunc()" width="250"
    click="onTreeNodeClick(event)" dataProvider="{tempObject}"
    labelField="label" />
    That works beautifully for me!

  • Layout help for a newb

    Excuse me if this problem has an obvious answer but I am new to flex.
    Consider the following mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalGap="0" paddingLeft="0" paddingRight="0"  paddingTop="0" paddingBottom="0">
    <mx:VBox backgroundColor="#FDE884"  paddingLeft="0" width="100%"  horizontalAlign="center" verticalGap="0" includeInLayout="true" visible="true">
            <mx:Text text="Message 1"/>
            <mx:Text text="Message 2"/>
            </mx:VBox>
            <mx:HBox width="100%"  >
            <mx:VBox width="30%" backgroundColor="#AE5E8D">
            <mx:Text text="Configuration Summary" fontSize="15" color="#FFFFFF"/>
            <mx:List  labelField="name"  width="100%"/>
            </mx:VBox>
            <mx:VBox width="70%" backgroundColor="#AE5E8D">
    <mx:Text text="Recent Activity" fontSize="18" color="#FFFFFF"/>
    <mx:DataGrid  rowCount="10"  width="100%" >
    </mx:DataGrid>
    <mx:Text text="Events" fontSize="18" color="#FFFFFF"/>
    <mx:DataGrid rowCount="10"  width="100%" >
    </mx:DataGrid>
    </mx:VBox>
            </mx:HBox>
    </mx:Application>
    When this renders I am left with a small gap on the left hand side of the browser.
    When I remove the text line <mx:Text text="Events" fontSize="18" color="#FFFFFF"/>
    It goes away.
    Can anyone tell me why this is?

    Hi,
    It seems to happen when scrollbar appears. Try to turn off vertical scroll policy:
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    verticalGap="0"
    paddingLeft="0"
    paddingRight="0" 
    paddingTop="0"
    paddingBottom="0"
    verticalScrollPolicy="off">
    Regards,
    Adrian

  • Problem with accordion gap

    Hi, I'm using an accordion component with 2 nested repeaters,
    the visualization is OK, except I cannot get rid of a vertical gap
    in the list between my sections. The list displays correctly the
    items of my first section and after that, it has a gap and then
    section 2. How could I get rid of that gaps?
    Thanks in advance
    mofi
    My code is here
    Attach Code
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="
    http://www.adobe.com/2006/mxml"
    layout="absolute"
    width="400"
    height="300"
    backgroundColor="#FFFFFF">
    <mx:XML id="model" format="e4x">
    <course >
    <module id="1" label="Course 1">
    <section label="section 1">
    <lesson label="Lesson One" />
    <lesson label="Lesson Two"/>
    </section>
    <section label="section 2">
    <lesson label="Lesson Three" />
    </section>
    </module >
    <module id="2" label="Course 2">
    <section label="section 1">
    <lesson label="Lesson One" />
    </section>
    <section label="seccion 2">
    <lesson label="Lesson Two" />
    <lesson label="Lesson Three" />
    </section>
    </module >
    <module id="3" label="Course 3">
    <section label="section 1">
    <lesson label="Lesson One" />
    <lesson label="Lesson Two" />
    </section>
    <section label="section 2">
    <lesson label="Lesson Three" />
    <lesson label="Lesson Four" />
    </section>
    </module >
    </course>
    </mx:XML>
    <mx:Accordion width="100%" height="100%" verticalGap="0"
    >
    <mx:Repeater id="repeat" dataProvider="{model.module}"
    >
    <mx:VBox width="100%" height="100%" verticalGap="0"
    label="{repeat.currentItem.@label}" >
    <mx:Repeater id="repeat2"
    dataProvider="{model.module[Number(repeat.currentItem.@id)-1].section}"
    >
    <mx:Label text="{repeat2.currentItem.@label}" />
    <mx:List labelField="@label" width="100%"
    dataProvider="{repeat2.currentItem.lesson}" />
    </mx:Repeater>
    </mx:VBox>
    </mx:Repeater>
    </mx:Accordion>
    </mx:Application>

    I might stop using repeaters and have a custom component for
    each course. There will be many common elements in each course,
    probably each will have sections, or perhaps some will not. In any
    case, just iterate through the xml data provider and create
    instances of your course custom component, which can be based on
    VBox as root container. This might help.

  • Component life cycle doesn't apply to objects created w/in ActionScript block??

    i don't understand why init() is never called. typically one can initialize variables in the constructor, but since this is mxml, the constructor is automatically created for us and the programmer seems to have no access or override privileges. so what to do?? am i failing to grasp some aspect of the component life cycle process?? how should i go about initializing properties??
    --------------------------- Main.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/halo">
      <fx:Script>
        <![CDATA[
          import components.MyComp;
          [Bindable] private var myComp:MyComp = new MyComp();
        ]]>
      </fx:Script>
      <s:Label text="{myComp.myString}"
           horizontalCenter="0" verticalCenter="0"/>
    </s:Application>
    ------------------------ components/MyComp.mxml ---------------------------------------
    <?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/halo"
         initialize="init()">
      <fx:Script>
        <![CDATA[
          [Bindable] public var myString:String = "hello, world!";
          private function init():void {
            myString = "hello, cruel world!";
        ]]>
      </fx:Script>
    </s:Group>
    NOTE: the code above might seem a little ridiculous, but that's b/c i reduced it down. imagine a baseComponent and derivedComponent where the myString has a default value in the base case and needs to be overridden in the derived case. appreciate any insights and thanks,
    - e

    Thanks Corey and Mike
    I suppose I should have been more aware about when the initialize event gets dispatched -- the concept just wasn't registering for me and I was totally miffed about how to initialize variables on construction.
    Do you have to initialize before the instance is added to the display list?
    Yes, I was mixing both mxml and AS classes and the derived classes had no display objects to attach to the stage (they were mostly classes made to modify run time behavior). You can check out my previous post, which gives the code for where or why this might be needed.
    I ended up initializing mxml class variables during construction in the following way:
    ------------------------------ classes/BaseClass.as ------------------------------
    package classes
      public class BaseClass
        public var myString:String = "hello, world";
        public function BaseClass() {
          init();
        protected function init():void {
          // intentionally left empty 
    ------------------------------ classes/DerivedClassI.mxml ------------------------------
    <?xml version="1.0" encoding="utf-8"?>
    <classes:BaseClass xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/halo"
             xmlns:classes="classes.*"
             myString="hello, cruel world!">
    </classes:BaseClass>
    ------------------------------ classes/DerivedClassII.mxml ------------------------------
    <?xml version="1.0" encoding="utf-8"?>
    <classes:BaseClass xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               xmlns:classes="classes.*">
      <fx:Script>
        <![CDATA[
          override protected function init() : void {
            myString = "hello, cruel cruel world!";
        ]]>
      </fx:Script>
    </classes:BaseClass>
    ------------------------------- Main.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/halo">
      <fx:Script>
        <![CDATA[
          import classes.*;
          import mx.collections.ArrayCollection;
          [Bindable] private var list:ArrayCollection = new ArrayCollection( [
            new BaseClass(),
            new DerivedClassI(),
            new DerivedClassII(),
        ]]>
      </fx:Script>
      <s:List dataProvider="{list}" labelField="myString" />
    </s:Application>
    - e

  • How to binding incoming xml node list to the tree control as dataProvider

    Recently, I faced into one issue: I want to binding incoming xml node (it's not avaliable at start) list to the tree control as a dataProvider.
    Since the incoming xml node list is not avaliable at beginning but I needs to bind it to the tree, so I create one virtual one in the xml, and prepare to remove it before the tree is shown. (ready for the actual node adding). But It did not work.
    Please see the presudo-code here:
    1.  Model layer(CsModel.as)
    public class CsModel
            [Bindable]
            public var treeXML:XML=<nodes><car label="virtualOne" id="1">
                                   </car></nodes>;
            (Here, I want to build binding relationship on the <car/> node,
             one 'virtual/stub' node is set here with lable="virtualOne".
             But this node will be deleted after IdTree
             control is created completely.)      
            [Bindable]
            public var treeData:XMLList =new XMLListCollection(treeXML.car);
    2. view layer(treePage.mxml)
            private var _model:CsModel = new CsModel();
            private function addNode():void
                    var newNode:XML=<car/>;
                    newNode.@label="newOne";
                    newNode.@id=1;
                    _model.treeXML.appendChild(newNode);
                             private function cleanData():void
                                     delete _model.treeXML.car;
            <mx:VBox height="100%" width="100%">
            <mx:Button label="AddNode" click="addNode()" />
            <mx:Tree id="IdTree"  labelField="@label"
              creationComplete="cleanData()"
              dataProvider="{_model}"/>
        </mx:VBox>
    3. Top view layer (App.Mxml)
    <mx:application>
        <treePage />
    </mx:application>
    For method: cleanData(),It's expected that when the treePage is shown, we first delete the virutalOne to provide one 'clear' tree since we don't want show virtualOne to the user. The virutalOne node just for building the relationship between treeData and treeXML at beginning. But the side effect of this method, I found, is that the relationship between treeXML and treeData was cut off. And this leads to that when I added new node (by click the 'addNode' button) to the xmlXML, the xmlData was not affected at all !
    So Is there any other way to solve this issue or bind the incoming xml node list to the xmlListCollection which will be used as Tree control's dataProvider ?

    If u want to display the name : value then u can do like this
    <xsl:eval>this.selectSingleNode("name").nodeName</xsl:eval> : <xsl:value-of select="name" />

  • Drag Drop List to List

    I have a source list and a destination list. I want to submit
    the contents of the destination list via my sendformdata function
    along with the other formitems.
    Here are my source/dest lists.
    <mx:VBox dropShadowEnabled="true">
    <mx:Label text="Available Loops"/>
    <mx:List id="srclist" width="300" height="150"
    allowMultipleSelection="true"
    dragEnabled="true" dropEnabled="true"
    dragMoveEnabled="true" labelField="category"
    dataTipFunction="myLabelFunc" showDataTips="true"
    alternatingItemColors="[#ece8ff, #ffffff]">
    </mx:List>
    </mx:VBox>
    <mx:VBox>
    <mx:Label text="Patched Loops"/>
    <mx:List alternatingItemColors="[#ece8ff, #ffffff]"
    id="destlist" width="200" height="150"
    allowMultipleSelection="true"
    dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
    labelField="category"/>
    </mx:VBox>
    user drags one or more items from the source to dest list.
    This works great.
    Now I need to pass the dropped/selected data in destlist to
    myobj, along with the other form items. How?
    <mx:Script>
    <![CDATA[
    private function sendFormdata():void {
    var myobj:Object = new Object();
    myobj.name = myname.text;
    myobj.email = myemail.text;
    myobj.entry = myentry.text;
    myobj.entrycomment = myentrycomment.htmlText;
    myobj.selectedcats= destlist.????
    cfdataInsert.addData({user:myobj})
    ]]>
    </mx:Script>
    Second part of my question is that I want the value of
    myobj.selectedloops to be a comma separated list of categoryid
    numbers (e.g. 1,3,5). My query, that populates the source list via
    the remoteobject contains categoryid,category, and description
    columns. I currently display the category in the labelField of the
    list, but I need to submit the categoryid to the DB.
    data comes from...
    <mx:RemoteObject
    id="cfdata" showBusyCursor="true"
    destination="ColdFusion"
    source="da8.Constellation.entries">
    <mx:method name="getCats" result="getCats_result(event)"
    />
    </mx:RemoteObject>
    getCats ColdFusion function...
    <cffunction name="getCats" access="remote"
    returntype="query">
    <cfset var CatData = "">
    <cfquery name="CatData" datasource="#DSN#">
    select categoryid,category,description
    from Categories
    order by category
    </cfquery>
    <cfreturn CatData />
    </cffunction>
    and then this function populates the srclist with the
    data....
    public function getCats_result(event:ResultEvent):void
    srclist.dataProvider = event.result as ArrayCollection;
    destlist.dataProvider =[];
    How do I pass the resulting destlist categoryids to
    myobj.selectedcats ?
    I don't know how the ArrayCollection organizes the query and
    how to reference the categoryid in the srclist and destlists.
    I'd appreciate any help.
    Thanks,
    Don

    SAP has lots of demo reports for drag and drop functionalities. Please check [Drag & Drop With the ALV Grid Control|http://help.sap.com/saphelp_erp2004/helpdata/en/22/a3f5fbd2fe11d2b467006094192fe3/content.htm]

  • Change the color of selecteditem in a LIST FLEX

    i WANT TO CHANGE THE COLOR OF SELECTEDITEM IN A LIST.  WHEN EVER USER DOUBLE CLICK THE ITEM IT SHOULD CHANGE THE COLOR...
      THIS IS MY LIST WITH DOUBLE CLICK EVENT...PLEASE HELP.....THIS SEEMED SO SIMPLE BUT I ALREADY SPENT FEW HOURS..
    HELP WILL BE APPRECIATED. THANKS
    <s:List id="shopslist1" left="0" right="0" top="57" bottom="0"
                initialize="shopslist1.dataProvider=actions" labelField="details" color="Red"   doubleClick="shopslist1_doubleClickHandler(event)">      
        </s:List>
    protected function shopslist1_doubleClickHandler(event:MouseEvent):void
                    shopslist1.selectedItem. ?????????

    Hello,
    Please see following code:
    <?xml version="1.0" encoding="utf-8"?>
    <!-- dpcontrols\spark\SparkListSimpleStyles.mxml -->
    <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">
    <s:layout>
    <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
    <![CDATA[
    protected function myList_doubleClickHandler(event:MouseEvent):void
    myList.setStyle("selectionColor" ,"#CC6600");
    ]]>
    </fx:Script>
    <s:List id="myList"
    alternatingItemColors="[#66FFFF, #33CCCC]"
        doubleClick="myList_doubleClickHandler(event)">
    <s:dataProvider>
    <mx:ArrayCollection>
    <fx:String>Flex</fx:String>
    <fx:String>Flash Builder</fx:String>
    <fx:String>Flash</fx:String>
    <fx:String>Director</fx:String>
    <fx:String>Dreamweaver</fx:String>
    <fx:String>ColdFusion</fx:String>
    </mx:ArrayCollection>
    </s:dataProvider>
    </s:List>
    </s:Application>
    Thanks and Regards,
    Vibhuti Gosavi | [email protected] | www.infocepts.com

  • How to search XML data from a HTTPMultiService and display the result on the Spark List

    Hello all,
    I am totally new to Flash Builder and Actionscript and hope someone might be able to help me out. I basically create a mobile app with a single view. The view has a TextInput as a search box and a search button. I conntected a Data/Service using a local XML file and bind the Data to a Spark List. Innitally the List will show nothing until the user enter the search term and hit the button. The List suppose to show the XML data that match the search term.
    Now is my problem. I cannot make the List to show the data that match the search text. The List just shows ALL the data.
    Here are my MXML code:
    <?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"
            xmlns:shopping="services.shopping.*"
            title="Search">
        <fx:Script>
            <![CDATA[
                import mx.events.FlexEvent;
                protected function button1_clickHandler(event:MouseEvent):void
                    navigator.popView();
                protected function list_creationCompleteHandler(event:FlexEvent):void
                    getDataResult.token = shopping.getData();
                protected function seach_clickHandler(event:MouseEvent):void
                    getDataResult.token = shopping.getSearchData(searchTxt.text);
            ]]>
        </fx:Script>
        <fx:Declarations>
            <s:CallResponder id="getDataResult"/>
            <shopping:Shopping id="shopping"/>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
        <s:actionContent>
            <s:Button height="79" label="Back" click="button1_clickHandler(event)"/>
        </s:actionContent>
        <s:List id="list" left="0" right="0" top="111" bottom="0"
                creationComplete="list_creationCompleteHandler(event)" labelField="english">
            <s:AsyncListView list="{getDataResult.lastResult}"/>
        </s:List>
        <s:TextInput id="searchTxt" x="80" y="34" width="250" height="49" enabled="true"
                     prompt="search..."/>
        <s:Button id="search" x="338" y="35" width="72" height="49" label="s"
                  click="seach_clickHandler(event)"/>
    </s:View>
    Here is the _Super_Shopping.as file:
    * This is a generated class and is not intended for modification.  To customize behavior
    * of this service wrapper you may modify the generated sub-class of this class - Shopping.as.
    package services.shopping
    import com.adobe.fiber.core.model_internal;
    import com.adobe.fiber.services.wrapper.HTTPServiceWrapper;
    import com.adobe.serializers.xml.XMLSerializationFilter;
    import mx.rpc.AbstractOperation;
    import mx.rpc.AsyncToken;
    import mx.rpc.http.HTTPMultiService;
    import mx.rpc.http.Operation;
    import valueObjects.Shop;
    [ExcludeClass]
    internal class _Super_Shopping extends com.adobe.fiber.services.wrapper.HTTPServiceWrapper
        private static var serializer0:XMLSerializationFilter = new XMLSerializationFilter();
        // Constructor
        public function _Super_Shopping()
            // initialize service control
            _serviceControl = new mx.rpc.http.HTTPMultiService();
             var operations:Array = new Array();
             var operation:mx.rpc.http.Operation;
             var argsArray:Array;
             operation = new mx.rpc.http.Operation(null, "getData");
             operation.url = "assets/data/shopping.xml";
             operation.method = "GET";
             operation.serializationFilter = serializer0;
             operation.properties = new Object();
             operation.properties["xPath"] = "/::shop";
             operation.resultElementType = valueObjects.Shop;
             operations.push(operation);
             operation = new mx.rpc.http.Operation(null, "getSearchData");
             operation.url = "assets/data/shopping.xml";
             operation.method = "GET";
             operation.resultFormat = "text";
             argsArray = new Array("item");
             operation.argumentNames = argsArray;
             operation.properties = new Object();
             operation.properties["xPath"] = "/::shop";
             operation.resultElementType = valueObjects.Shop;
             operations.push(operation);
             _serviceControl.operationList = operations;
             preInitializeService();
             model_internal::initialize();
        //init initialization routine here, child class to override
        protected function preInitializeService():void
          * This method is a generated wrapper used to call the 'getData' operation. It returns an mx.rpc.AsyncToken whose
          * result property will be populated with the result of the operation when the server response is received.
          * To use this result from MXML code, define a CallResponder component and assign its token property to this method's return value.
          * You can then bind to CallResponder.lastResult or listen for the CallResponder.result or fault events.
          * @see mx.rpc.AsyncToken
          * @see mx.rpc.CallResponder
          * @return an mx.rpc.AsyncToken whose result property will be populated with the result of the operation when the server response is received.
        public function getData() : mx.rpc.AsyncToken
            var _internal_operation:mx.rpc.AbstractOperation = _serviceControl.getOperation("getData");
            var _internal_token:mx.rpc.AsyncToken = _internal_operation.send() ;
            return _internal_token;
        public function getSearchData(item:String) : mx.rpc.AsyncToken
            var _internal_operation:mx.rpc.AbstractOperation = _serviceControl.getOperation("getSearchData");
            var _internal_token:mx.rpc.AsyncToken = _internal_operation.send(item);
            return _internal_token;
    The getSearchData() supposed to return XML data that match the search text, but it doesn't. Can anyoen help?
    Thank you!

    Hi,
    are you able to change dynamically the  operation.url = "assets/data/shopping.xml";?
    i need to do that based on the users input.
    Thanks in advance,

  • Issue Putting Data from ArrayCollection into List

    I'm having trouble getting data that has been pulled from a textArea and put into an ArrayCollection to be displayed in a List.  The data is being saved and then read as a file from local storage.  When I run the application, nothing appears in the created list even though I get no compile-time errors.
    Here is my List code:
    <fx:Script>
    <![CDATA[
    import dh.DataHandling;
    import mx.collections.ArrayCollection;
    import mx.collections.ArrayList;
    import mx.events.FlexEvent;
    import spark.effects.SlideViewTransition;
    [Bindable]
    private var dataR:DataHandling = new DataHandling();
    protected function button1_clickHandler(event:MouseEvent):void  // pushed home button
    var svt:SlideViewTransition = new SlideViewTransition(300, SlideViewTransition.SLIDE_RIGHT);
    navigator.pushView(views.HomePage, event.relatedObject, svt);
    ]]>
    </fx:Script>
    <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:actionContent>
    <s:Button label="Delete"/>
    <s:Button label="Home" click="button1_clickHandler(event)" skinClass="skins.homeButtonSkin"/>
    </s:actionContent>
    <s:Image x="0" y="-80" height="603" source="mainapp1.jpg"/>
    <s:List  id="myCardsList" x="10" y="10" width="1004" height="500" top="0" bottom="0" left="0" right="0"
      dataProvider="{dataR.cards as ArrayCollection}">
    <s:itemRenderer>
    <fx:Component>
    <s:MobileIconItemRenderer label="{data.textTitle}"/>
    </fx:Component>
    </s:itemRenderer>
    </s:List>
    Here's the "saving/reading the file" class used in creating the ArrayCollection:  ( DataHandling.as )
    package dh
    public class DataHandling
    import flash.events.IOErrorEvent;
    import flash.filesystem.File;
    import flash.filesystem.FileMode;
    import flash.filesystem.FileStream;
    import mx.collections.ArrayCollection;
    [Bindable]
    public var cards:ArrayCollection = new ArrayCollection();
    public var file:File;
    public var fileStream:FileStream;
    public var fileName:String = "Initial String";
    public var directory:String = "SimpleSaveFromAIR";
    public var textTitle:String;
    public function DataHandling()
    public function add():void
    // new object
    var card:Object = new Object();
    card.tcard = textTitle;
    //card.mtext1 = mtext1.text;
    ///card.mtext2 = mtext2.text;
    cards.addItem(card);
    public function save():void
    // create file object (resolve user's directory, add own directory)
    file = File.documentsDirectory.resolvePath(directory + "\\" + fileName);
    // FileStream for writing the file
    fileStream = new FileStream();
    // open the file in write mode
    fileStream.open(file, FileMode.WRITE);
    // Write the ArrayCollection object of cards to the file
    fileStream.writeObject(cards);
    // close stream
    fileStream.close();
    public function read():void
    // get correct path
    file = File.documentsDirectory.resolvePath(directory + "\\" + fileName);
    // read if exists
    if(file.exists)
    // FileStream for reading the file
    fileStream = new FileStream();
    // open the file in read mode
    fileStream.open(file, FileMode.READ);
    // Read the ArrayCollection object of cards from the file
    cards = fileStream.readObject() as ArrayCollection;
    //close Stream
    fileStream.close();
    else
    // some sample data + save if file does not exist
    cards = new ArrayCollection();
    var card:Object = new Object();
    card.tcard = "Sample Title";
    card.mtext1 = "Sample Text";
    cards.addItem(card);
    save();

    Off topic: I noticed you are binding the label value of the renderer to the data.  It's recommended that you use the labelField property on the List instead for better performance on mobile, for example:
    <s:List  id="myCardsList" labelField="textTitle" ...>
      <s:itemRenderer>
        <fx:Component>
          <s:MobileIconItemRenderer />
        </fx:Component>
      </s:itemRenderer>
    </s:List>

  • Populating a drop down list of users using JSON from a REST call

    Hi guys,
    First post, have just started the mammoth project of turning us paperless.
    My first task has been to create a header template - this header to be used on any form we use. I got this done almost without issue, it seems the only complication is to attach the username to the document.
    Initially I tried to do this with a text field. I set this up with a calculation script to set this.rawValue = identity.username (also tried identity.name), however further reading taught me that that requires priviledged context (haven't figured out what that is or how to get it yet, but it seems like a 'no' for this method).
    My next step has been to attempt to let the user pick their username from a list. "Easy!" I thought, "I just set up a webscript last week to return a configurable list of user details. My web script (it runs off of Alfresco CMS, for the record) is accessed from an URL like https://docs.ourcompany.com:8443/alfresco/service/ourcompany/users?useGroup=[a user group]&filter=[a filter string] and returns JSON like this:
        "users" :
    "name" : "Chris O'Kelly", "userName" : "ChrisO"
    "filter" : "all",
    "error" : 0
    In the layout:ready script section for my dropdown I have used the following js
    function createRequest() {
      var result = null;
      if (window.XMLHttpRequest) {
        // FireFox, Safari, IE>6
        result = new XMLHttpRequest();
        if (typeof xmlhttp.overrideMimeType != 'undefined') {
          result.overrideMimeType('application/json');
      else if (window.ActiveXObject) {
        // IE <7
        alert("No available type");
        result = new ActiveXObject("Microsoft.XMLHTTP");
      else {
        alert("No available type");
        return;
      return result;
    var req = createRequest();
    req.onreadystatechange = function() {
      if (req.readyState != 4) return;
      if (req.status != 200) {
        alert("REST call failed");
        return;
      // Request successful, read the response
      var resp = req.responseText;
      this.addItem(resp.users.name, resp.users.userName);
    req.open("GET", "https://docs.ourcompany.com:8443/alfresco/service/ourcompany/users?useGroup=GROUP_EveryUser&filter=status", true);
    req.send();
    But when I preview the form I get nothing, no errors, no alerts, no filling of the dropdown. I've read a few conflicting forum posts on whether or not xmlHttpRequest works within liveCycle forms, so I suppose the guts of my question boils down to- does it?

    Hi!
    In the DropDownList set the labelField property to the name of the object property you want to appear.
    Ex:
    <s:DropDownList labelField="facilityNumber"
                    includeIn="NewInspection"
                    dataProvider="{ddFacNum}"
                    fontFamily="Arial" fontSize="16"
                    id="ddFacilityNumber"
                    prompt="Select facility number..."/>

  • Help with a vertical scroll bar issue with a List component

    hi. i have a basic <s:list> that uses an XMLListCollection as it's data provider and a very basic itemrenderer. when a row in the list is clicked a function gets the list.selectedIndex then populates some text fields with more xml data. that all works fine.. the problem i have is that the vertical scroll bar on the list seems to be "clickable" - just like a row in the list. the scroll bar scrolls normally but when it's clicked the selectedIndex becomes -1 which is not helpful b/c the value -1 is passed to the XMLListCollection.
    any ideas? cheers.

    thanks but still problematic...surely the <s:List> component shouldn't return a value when the scrollbar thumb is clicked? i created a very basic list (see below) and made the list dimensions short enough so that there is a vertical scrollbar and found that when the scrollbar thumb is clicked the trace(event.currentTarget.selectedIndex) returns a number. that's annoying b/c i just want a selectedIndex value for a row that is clicked not the scrollbar.
    any ideas to get around? cheers
    <fx:Script>
    <![CDATA[
    protected function list1_clickHandler(event:MouseEvent):void
    trace(event.currentTarget.selectedIndex);
    ]]>
    </fx:Script>
    <s:List x="162" click="list1_clickHandler(event)" y="276" labelField="@label" width="144" height="153">
    <s:dataProvider>
    <s:XMLListCollection>
    <fx:XMLList xmlns="">
    <node label="one"/>
    <node label="two"/>
    <node label="three"/>
    <node label="four"/>
    <node label="five"/>
    <node label="six"/>
    <node label="seven"/>
    <node label="eight"/>
    <node label="nine"/>
    <node label="ten"/>
    <node label="eleven"/>
    </fx:XMLList>
    </s:XMLListCollection>
    </s:dataProvider>
    </s:List>

  • Maybe you are looking for