6 Replies Latest reply on Mar 28, 2008 4:32 AM by cxf02

    List attributes and values

    pjrich
      I have a list control that brings in several Keywords from an XML file with the structure:
      <mainTag>
      <Keyword>myKey</Keyword>
      </mainTag>
      I bring the data in and bind it to the a list component with the labelField property set to 'Keyword". I have the "allowMultipleSelection" property set to true and everything works fine and dandy.

      HOWEVER, my problem occurs when I try to get the selectedItems out of the list component. When I set the text property of a nearby "Label" component to {myListComponent.selectedItems}, I get the entire XML value (see above) for each keyword selected. What I want is just each of the selected Keywords. I've tried all sorts of additional properties on selectedItems (e.g., text, Keyword, value, mainTag, label, *), but have not had any luck getting just the Keywords out of the list. Any ideas on how to procure this information?
        • 1. Re: List attributes and values
          ntsiii Level 3
          I don't really understand what you want but..
          Try selectedItems.toString()
          Tracy
          • 2. Re: List attributes and values
            cxf02 Level 1
            Send me an email at curtis dot fisher at procontent dot net and I'll email you a small e4x framework I am working on for this stuff. I will eventually release it to the community, but it's not documented well enough and there is one more OO design pattern that I'm struggling with. Anyway, it might give you some ideas.

            cheers,
            • 3. Re: List attributes and values
              pjrich Level 1
              ntsiii,
              Thanks for the suggestion, but it just gave me the same output. Use this link to see a picture of an example of what I mean:.
              The dataprovider for the list component comes from an externally-generated html file with the following structure:
              <mainTag>
              <Keyword>myKey0</Keyword>
              </mainTag>
              <mainTag>
              <Keyword>myKey1</Keyword>
              </mainTag>

              I need to get the keywords a user selects back into the database, but I don't need the XML tags.
              • 4. List attributes and values
                Sreenivas R Adobe Employee
                Have you tried this

                var keywords:XMLList = XMLList(list.selectedItems).Keyword.text();

                for each(var item:String in keywords)
                {
                trace(item);
                }
                • 5. List attributes and values
                  cxf02 Level 1
                  Here is some code you might find useful from the simple framework I am building: I'll place this in multiple posts because of the length.

                  ------------------------------------------ object below --------------------------------------
                  package net.procontent.persistance
                  {

                  // Singleton pattern for static datasource that can be accessed from the entire application

                  public class DataSource {

                  import mx.rpc.http.HTTPService;
                  import mx.collections.XMLListCollection;
                  import mx.rpc.events.FaultEvent;
                  import mx.rpc.events.ResultEvent;
                  import mx.controls.Alert;
                  import mx.events.*;
                  import flash.events.Event;

                  /**
                  * Private static variable for singleton handle
                  */
                  private static var dataSource:DataSource;

                  //just a test string for verifying stuff
                  private var testString:String = "This is the test string";

                  /**
                  * The content container for the XML File
                  */
                  private var xmlContent:XMLListCollection = new XMLListCollection();

                  /**
                  * The content service member
                  */
                  private var contentService:HTTPService;

                  /**
                  * The money method for returning the either instantiating a new instance or returning
                  * the handle to the static singleton
                  * @return the dataSource handle
                  *
                  */
                  public static function getInstance():DataSource {
                  if ( dataSource == null ) {
                  dataSource = new DataSource( );
                  }
                  return dataSource;
                  }

                  /**
                  * Public constructor because AS 3.0 will not accept it as private
                  * It either throws an error or populates the instance with data from
                  * the service
                  *
                  */
                  public function DataSource() {
                  // Check for if someone is trying to instantiate this more than once in the code
                  if (DataSource.dataSource != null) {
                  throw new Error( "Sorry, correct your code, one Singleton instance should be instantiated and you are trying to light off a second!" );
                  } else {
                  this.getData();
                  }
                  }

                  /**
                  * The method that sets the content service member with service information
                  * and populates the service wit the e4x XML file
                  *
                  */
                  public function getData():void {
                  contentService = new HTTPService() ;
                  contentService.url = "xml/contents.xml";
                  contentService.resultFormat = 'e4x';
                  contentService.destination = "DefaultHTTP";
                  contentService.useProxy = false;
                  contentService.addEventListener("result", setXmlContent);
                  contentService.addEventListener("fault", httpFault);
                  contentService.method = "post";
                  contentService.send();
                  }

                  /**
                  * Fault method called if there is a problem with the service connection. Caution, the HTTP service
                  * does not have very robust information concerning faults. This event is registered in the getData
                  * method and will fire as a result of issues with that service.
                  * @param event is the error event
                  *
                  */
                  private function httpFault(event:FaultEvent):void {
                  var faultstring:String = event.fault.faultString;
                  Alert.show(faultstring);
                  }

                  /**
                  * This event is registered in the getData method and sets the source of the xmlContent member
                  * with e4x XML data
                  * @param event
                  *
                  */
                  private function setXmlContent (event:ResultEvent):void {
                  this.xmlContent.source = event.result.content;
                  }

                  /**
                  * This method is the public means to use this singleton for retrieving an XML List to be used
                  * by TextAreas for content. Use of TextAreas for content is desired because of the scroll
                  * bar that TA's possess.
                  * @param key uses xpath features to seek an attribute the value of the attribute "id" as shown below:
                  * -------------------------- Example e4x object ----------------------------------------
                  * <contents>
                  * <content menuGroup="myMenuGroup" id="Home" menuLabel="My List Item Text" video="" image="" >
                  * <![CDATA[<font color="#CCCCCC" face="Arial, Helvetica, sans-serif" size="14">
                  * <font size="30">P</font>rofessional <font size="30">C</font>ontent offers <b>
                  * <i>Affordable Rich Internet Application Development...</i></font> ]]>
                  * </content>
                  </contents>
                  * ----------------------------------------------------------------------------------------- ---------
                  * Calling this method as getXMLContent('Home') on an instatiated DataSource object will return an
                  * XMLList object that populates your TextArea with HTML
                  * @return the XMLList object with content as the payload
                  *
                  */
                  public function getXmlContent(key:String):XMLList {
                  return this.xmlContent.source.(@id == key) ;
                  }

                  /**
                  * This method will return an XMLListCollection that your List object will like and accept as items that are
                  * selectable. It uses the same format as the XML commented above
                  * @param key uses the menuGroup attribute in the above XML example to build a list of all XML
                  * elements that match that xpath criteria. You need to set the List attribute labelField="@menuLabel" to use the text
                  * for the list item.
                  * These two methods can be adjusted to use any attributes and any type of XML organization to populate
                  * lists and content selected from lists
                  * @return the XMLlistCollection for List item population
                  *
                  */
                  public function getXmlMenu(key:String):XMLListCollection {
                  var menu:XMLListCollection = new XMLListCollection();
                  menu.source = new XMLList(this.contentService.lastResult.content.(@menuGroup == key));
                  return menu;
                  }

                  /**
                  * Provided to return the service with all the content if there are other objects that require the
                  * data for more complex operations
                  * @return an HTTPService object populated with XML data
                  *
                  */
                  public function getContentService():HTTPService {
                  return this.contentService;
                  }

                  /**
                  * test method
                  * @return a String object
                  *
                  */
                  public function getTestString():String {
                  return this.testString;
                  }
                  }
                  }
                  ------------------------------------------------- object above -----------------------------


                  Populate this in the application object like this
                  --------------------------- Scriptlet below --------------------------------------------
                  import net.procontent.persistance.DataSource;

                  /**
                  * Populate the Application Singleton Data Source
                  */
                  public var xmlData:DataSource = DataSource.getInstance();
                  --------------------------------- Scriptlet above ---------------------------------------


                  Continue below...
                  • 6. List attributes and values
                    cxf02 Level 1
                    Then create this script to use with an include in the component

                    -------------------------------------- Script below --------------------------------------
                    mport mx.collections.XMLListCollection;
                    import mx.controls.TextArea;
                    import mx.core.Application;
                    import flash.events.Event;
                    import net.procontent.persistance.DataSource;

                    private var xmlData:DataSource = Application.application.xmlData;

                    [Bindable]
                    public var xmlMenu:XMLListCollection = new XMLListCollection();

                    public function initList(item:String):void {
                    xmlMenu = xmlData.getXmlMenu(item);
                    }

                    /**
                    * Multipurpose method that can be used to set the content for a TextArea control and
                    * return either a video or image path and file name
                    * @param event Is the List event passed by the Selected List Item
                    * @param target Is a reference to the TextArea object where the HTMLText will be set
                    * @param att Is the attribute name in the XML file that will be used to get the values, either 'image' for an Image component, or 'video' for the video file
                    * @return can be used by the calling component to set anothers object source attribute
                    *
                    */
                    private function getContent(event:Event,target:TextArea,att:String):String {
                    var results:XML;
                    results = new XML(event.currentTarget.selectedItem);
                    target.htmlText = xmlData.getXmlContent(results.attribute("id"));
                    return results.attribute(att);
                    }
                    --------------------------------------------- Script Above -----------------------------------

                    Use it as demonstrated below.

                    ---------------------------- Component below -------------------------------------------
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="98%" height="96%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" >
                    <mx:Script source="../AScripts/init.as" />
                    <mx:Script>
                    <![CDATA[
                    import mx.events.CollectionEvent;
                    import mx.controls.Alert;

                    private function regEvents():void {
                    selectionList.addEventListener("updateComplete", dataChanged);
                    }

                    private function dataChanged (event:Event):void {
                    selectionList.selectedIndex = 0;
                    getContent(event,this.content,"");
                    }
                    ]]>
                    </mx:Script>
                    <mx:Canvas width="30%" height="99%" cornerRadius="20" borderStyle="solid" >
                    <mx:VBox id="contContainer" width="98%" height="93%" y="19" x="4" paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2">
                    <mx:List width="99%" height="100%" id="selectionList" dataProvider="{xmlMenu}" labelField="@menuLabel" click="getContent(event,this.content,'');" updateComplete="regEvents();"/>
                    </mx:VBox>

                    </mx:Canvas>
                    <mx:TextArea id="content" width="70%" height="99%" cornerRadius="20" borderStyle="solid"/>

                    </mx:HBox>
                    ---------------------------- Component above ---------------------------------

                    --------------------------- Final usage of the component below ----------------------
                    <mx:Canvas width="98%" height="98%" xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:ns1="components.*"
                    paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" updateComplete="contentControl.initList('About')">
                    <ns1:ListContentComp id="contentControl" x="10" y="10" />
                    </mx:Canvas>

                    Hopefully this helps your understanding of how to use e4x objects. You can contact me at the email I listed in the previous post if you want individual assistance.
                    Cheers,