Listview with the given xml model

Question

Hi I'm new to Blackberry 10 cascades development.

I want to create a list with the below data model(which is placed in assests folder).

Categories.xml

 <?xml version="1.0" encoding="utf-8"?>
 <MasterData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xmlns:xsd="http://www.w3.org/2001/XMLSchema">
 <CategoryList>
    <Category>
       <CategoryId>12</CategoryId>
       <CategoryNameEn>Banks &amp; Investments</CategoryNameEn>
       <CategoryImageName>banks.png</CategoryImageName>
       <DisplayOrder>1</DisplayOrder>
    </Category>
    <Category>
       <CategoryId>15</CategoryId>
       <CategoryNameEn>Car Rental</CategoryNameEn>
       <CategoryImageName>cars.png</CategoryImageName>
       <DisplayOrder>2</DisplayOrder>
    </Category>
    <Category>
       <CategoryId>19</CategoryId>
       <CategoryNameEn>Services</CategoryNameEn>
       <CategoryImageName>services.png</CategoryImageName>
       <DisplayOrder>3</DisplayOrder>
    </Category>
    <Category>
       <CategoryId>18</CategoryId>
       <CategoryNameEn>Real Estate &amp; Constructions</CategoryNameEn>
       <CategoryImageName>construction.png</CategoryImageName>
       <DisplayOrder>5</DisplayOrder>
    </Category>
    <Category>
       <CategoryId>2</CategoryId>
       <CategoryNameEn>Hotels &amp; Apartments</CategoryNameEn>
       <CategoryImageName>hotels.png</CategoryImageName>
      <DisplayOrder>7</DisplayOrder>
    </Category>
 </CategoryList>

I want to display the only CategoryNameEn as the list item.

In the main.qml i have given like this.

    // Create a ListView that uses an XML data model
ListView {
    dataModel: XmlDataModel {
        source: "asset:///categories.xml"
    }
    // The ListItemComponent defines how "listItem" items should appear. 
    listItemComponents: [
        ListItemComponent {
            type: "Category" //setting the node name
            Container {
                preferredWidth: 748
                preferredHeight: 50
                background: Color.Blue

                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }

                Label {
                    text: ListItemData.CategoryNameEn //setting the node 
                    verticalAlignment: VerticalAlignment.Center
                    // Apply a text style to create a title-sized font
                    // with normal weight
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                        fontWeight: FontWeight.Normal
                    }
                }
                Container {
                    horizontalAlignment: HorizontalAlignment.Fill
                    verticalAlignment: VerticalAlignment.Center
                    preferredWidth: 50
                    preferredHeight: 50
                    //background: Color.Blue

                    layout: StackLayout {
                        orientation: LayoutOrientation.RightToLeft
                    }
                    // Arrow image
                    ImageView {
                        verticalAlignment: VerticalAlignment.Center
                        translationX: 0
                        translationY: 0
                        imageSource: "asset:///images/arrow.png"
                        rightMargin: 10
                    }
                } // end of inner Container
            }//end of outer container
         } // end of ListItemComponent
    ]//end of listItemComponents
}//end of ListView

The output should be like the below image.

enter image description here

But the list is empty. The CategoryNameEn is not binding to the list. I don't know what is the wrong in my code. Please solve my issue.

possible duplicate of [How to bind the data to the list item of list view in cascades](http://stackoverflow.com/questions/17963643/how-to-bind-the-data-to-the-list-item-of-list-view-in-cascades) — Marc Plano-Lesay, Aug 07 '13 at 12:26
hi Kernald would you please help me to figure out what is the wrong in my code. Could you please use the above xml and listview and create simple project for figure out the error. Thanks — user2636874, Aug 07 '13 at 12:44
And I suggest your look at console. You get error immediately... — Bojan Kogoj, Aug 07 '13 at 17:31

score 0 · Answer 1 · answered Aug 07 '13 at 17:52

Here, I didn't fix your XML, just a small example how to fix it. XML:

 <model>
    <item CategoryNameEn="Banks &amp; Investments" CategoryId="12"  CategoryImageName="banks.png" DisplayOrder="1"/>
    <item CategoryNameEn="Banks &amp; Investments2" CategoryId="33"  CategoryImageName="banks2.png" DisplayOrder="2" />    
 </model>

QML:

ListView {
    dataModel: XmlDataModel {

        source: "asset:///categories.xml"
    }
    // The ListItemComponent defines how "listItem" items should appear.
    listItemComponents: [
        ListItemComponent {
            type: "item" //setting the node name
            Container {
                preferredWidth: 748
                preferredHeight: 50
                background: Color.Blue

                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }

                Label {
                    text: ListItemData.CategoryNameEn //setting the node
                    verticalAlignment: VerticalAlignment.Center
                    // Apply a text style to create a title-sized font
                    // with normal weight
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                        fontWeight: FontWeight.Normal
                    }
                }
                Container {
                    horizontalAlignment: HorizontalAlignment.Fill
                    verticalAlignment: VerticalAlignment.Center
                    preferredWidth: 50
                    preferredHeight: 50
                    //background: Color.Blue

                    layout: StackLayout {
                        orientation: LayoutOrientation.RightToLeft
                    }
                    // Arrow image
                    ImageView {
                        verticalAlignment: VerticalAlignment.Center
                        translationX: 0
                        translationY: 0
                        imageSource: "asset:///images/arrow.png"
                        rightMargin: 10
                    }
                } // end of inner Container
            } //end of outer container
        } // end of ListItemComponent
    ] //end of listItemComponents
}    //end of ListView

I've changed the model(categories.xml) like above. But now also I'm not getting the output. — user2636874, Aug 08 '13 at 07:09
I'm getting this message on the console. "Aug 08 05:28:13.331 com.example.STCDirectory.testDev_TCDirectorye0359adc.253837444 default 9000 NOTICE XmlDataModel: Cannot set 'asset:///models/categories.xml' as source, currently only file paths are supported." — user2636874, Aug 08 '13 at 10:33
I've removed the asset:/// from the path, then items are displaying but the CategoryIds are displaying instead of categoryNameEn. — user2636874, Aug 08 '13 at 11:44
It says text: `ListItemData.CategoryNameEn`, so that should be shown. You must have done something with your XML, check that it is correct naming — Bojan Kogoj, Aug 08 '13 at 21:07

Listview with the given xml model

1 Answers1