XML nodes into multiple views.

Report · Aug 23, 2011

Hello everybody.

First of all i want to say that i'm a beginner in Flex Mobile.

I want to make an application that can read an XML file and change views through XML nodes.

Here is an example of how it should look after reading an XML file.

Here is the XML example. I want to read all of the nodes but only show a few of them.

<?xml version="1.0" encoding="utf-8"?>
<items>
     <item>
          <title>Item 1</title>
          <image>url</image>
          <description>Lorem ipsum</description>
          <subitems>
               <subitem_title>Item 1.1</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 1.2</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 1.3</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 1.4</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 1.5</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
     </item>
     
     <item>
          <title>Item 2</title>
          <image>url</image>
          <description>Lorem ipsum</description>
          <subitems>
               <subitem_title>Item 2.1</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 2.2</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 2.3</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 2.4</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 2.5</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
     </item>
     
     <item>
          <title>Item 3</title>
          <image>url</image>
          <description>Lorem ipsum</description>
          <subitems>
               <subitem_title>Item 3.1</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 3.2</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 3.3</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 3.4</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 3.5</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
     </item>
     
     <item>
          <title>Item 4</title>
          <image>url</image>
          <description>Lorem ipsum</description>
          <subitems>
               <subitem_title>Item 4.1</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 4.2</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 4.3</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 4.4</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
          <subitems>
               <subitem_title>Item 4.5</subitem_name>
               <subitem_description>Lorem ipsum</subitem_description>
               <subitem_image>url</subitem_image>
          </subitems>
          
     </item>

</items>

All i could find about reading XML in a list and adding a change handler was only for 2 views, i need for 3 views and show subitems for each item. Showing subitems for each item from an XML file was very tricky and didn't worked for me.

I could use some little help or advice!

Report · Sep 15, 2011

I already solved the issue!

Used the same getData _type function and created a new one (getData2).

When i parse the xml node childs into another list i used getData2.lastResult[id].child_node_name.

The "id" in the getData2 function is declared with "[Bindable]" and "function" to get the id field [declared in xml] from the parent node.

Hope somebody will need this.

Report · Sep 22, 2011

Hi, I want to make the same thing and I an new to this alos. I know it's way to much to ask, but could you attach your example on how to load an xml in 3 views ? I will pay for it since I am on break to lay down an cry since i just can't get it to work

Report · Sep 23, 2011

Follow this tutorial to learn how to get data from XML files remotelly!

http://www.youtube.com/watch?v=Cksp7IyVNk4

Use the XML from first post on this topic, but, at every <item></item> add an <id> field like this (make sure every item has an unique id):

<items> <item> <id>0</id> <title>Item 1</title> <image>url</image> <description>Lorem ipsum</description> <subitems> <subitem_title>Item 1.1</subitem_name> <subitem_description>Lorem ipsum</subitem_description> ..................................................

Then, create 3 views (New->MXML Component)!

List.mxml - SubList.mxml - Details.xml

After you create them go to List.mxml create a list and import you're XML (follow tutorial before, to know how to do this).

After you import you're XML file and show it in that list, you have to create a change handler for that list (when an item is selected we whant to change view).

And, of course, follow Duane's tutorial to know how to do that. You will want to change view to SubList.mxml. In this view you'll have a list of childs for primary node (item node).

Then,go to SubList.xml and create a list.

Then, the tricky part here is that you need to drag/drop same getData():XML_data() that u used in first list. A popup window will show. Here u have to let "New service call" checked and at "Data provider" u have to select de subitem node of the XML file. And, of course, u'll have to select you're Label field.

When u done this, go to code viewer and find the <s:AsyncListView.... code line.

u'll have to add an .[id]. there like this:

<s:AsyncListView list="{getDataResult2.lastResult[id].subitem}"/>

In this way, you're list will show only entries from XML file with ITEM ID = ?!

Then follow Duane's tutorial again.

PS: in views u'll have to add some [Bindable] vars and a function for that view to recognize the id.

Here's a model!

<fx:Script>
        <![CDATA[
                    import valueObjects.XML_FIELD_type;
                    [Bindable] var id:String;
                    private function init():void
            {
                var thisID:XML_FIELD_type = data as XML_FIELD_type
                id = thisID.id;
              }
          ]]>
    </fx:Script>

After u did this u'll have to add a viewActivate to <s:View> declaration like this:

<?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:XML_FILE_OR_FIELD="services.XML_FILE_OR_FIELD.*"
        title="Title"
        viewActivate="init()"
        cachePolicy="on"
        destructionPolicy="never">

XML_FILE_OR_FIELD is generated automatically.

All of these things u'll find on Duane's tutorial except the 3 view part and parsing that data. Follow it and u will solve you're problem!

Hope it helped!

Cheers,

Daniel

Report · Sep 23, 2011

Hi Daniel,

Really thanks alot. I will try this out as soon as I get home.

Report · Sep 26, 2011

I know this is way to much to ask, but could you post an example ? I just can't get it to work

btw, do you maybe know how to use an image so that when i click on the image it will go to an url from the xml ?

i am really new to this, but know other programming language good.

P.S I did fallow his tutorial and did get it to work, but not with 3 views =/

Adobe Community

XML nodes into multiple views.