1

I'm developing Blackberry 10 application with cascades framework. I want to display all the categories in list view when user clicks on a button. So I've created one qml page with list view.

Categories.qml

import bb.cascades 1.0

Page {
Container {
    background: backgroundPaint.imagePaint
    //preferredWidth: 768
    //preferredHeight: 1280
    attachedObjects: [
        ImagePaintDefinition {
            id: backgroundPaint
            imageSource: "asset:///images/list_bg.png"
        }
    ]

    //start of row 1
    Container {
        preferredWidth: 748
        preferredHeight: 145
        //background: Color.Blue;
        /*layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight                
        }*/

        // Page Header
        Label {
            objectName: "categoriesHeaderLabel"
            text: "Categories"
            translationX: 0
            translationY: 40
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center                
        }
    }

    //start of row 2
    // Create a ListView that uses an XML data model
    ListView {
        dataModel: XmlDataModel {
            source: "asset:///categories.xml"
        }
        // The ListItemComponent defines how "listItem" items
        // should appear. These items use a Container that includes a
        // CheckBox and a Label.
        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
}//end of container

}

I'm providing the xml data model for the list. (assets:///categories.xml)

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>
</MasterData>

After that I bound the data to be displayed in List. i.e category name only. But the list is not displaying i.e it is showing empty page only.

I don't know what was the wrong in the code.

Thanks

user2636874
  • 889
  • 4
  • 15
  • 36
  • Have you any error in the logs? – Marc Plano-Lesay Jul 31 '13 at 13:52
  • nope, i didn't find any error in the console. – user2636874 Aug 02 '13 at 08:01
  • Hi I didn't get any response for this question. Guys please solve my issue. I'm unable to load the data in list view. Please read my question once again. I didn't understand what is the wrong in my approach. – user2636874 Aug 07 '13 at 10:54
  • 1
    Reading this answer (http://stackoverflow.com/a/12116474/775894), it looks like the XML header (````) may be problematic. Also, I would try without the ``MasterData`` element (root being ``CategoryList``). Maybe having the list in an inner element confuses the ``XmlDataModel``. – Marc Plano-Lesay Aug 07 '13 at 12:36

1 Answers1

0

You need to use a groupdatamodel to load an XML like this.

    dataModel: theModel // This is the name of your groupdatamodel

    attachedObjects: [ // Attach these to the listview
        GroupDataModel {
            id: theModel
            grouping: ItemGrouping.None
            sortedAscending: true
            sortingKeys: [""] // Set this to the key you want to sort by
        },
        DataSource {
            id: theSource
            source: "" // Set this to your XML file name
            query: "/root/Category" // You'll need to add a root node to you file
            onDataLoaded: {
                theModel.insertList(data);
                console.log("List filled...")
            }
        }
    ]

This should work, if it doesn't then you have a problem with your XML file. Right now I know it is missing a root node.