Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Highlighted
Visitor
Posts: 1
Registered: ‎01-24-2013
My Device: BlackBerry 10
My Carrier: orange

ListView in NavigationPane

Hello,

I'm new in developing on BlackBerry (developing at all), and I have problem

I was trying to make ListView in NavigationPane (when clicked on list item, then I get new page with details), but I have problems. At first - nothing is showed, whole app is working, but I can't see anything. Second - I don't know if I do it properly.
Can someone help me?

Thank you
 
import bb.cascades 1.0

 NavigationPane {
     id: navigationPane

     onPopTransitionEnded: page.destroy()

     // The main page
     Page {
         id: list

         Container{
             horizontalAlignment: HorizontalAlignment.Fill
             verticalAlignment: VerticalAlignment.Fill

             leftPadding: 30
             topPadding: 30
             rightPadding: 30
             bottomPadding: 30

             ListView {
                     id: listView
                     objectName: "listView"
                     dataModel: MyListModel {
                         id: myListModel
                     }

                     listItemComponents: [
                 ListItemComponent {
                     StandardListItem {
                         //title: "A"
                         title: ListItemData.text
                         description: ListItemData.description
                         status: ListItemData.status
                         imageSource: ListItemData.image
                     }
                 }
                 ]

                 onTriggered: {
                     clearSelection()
                     select(indexPath)

                     //==================
                     console.debug("pushing detail " + page)
                     navigationPane.push(pageDefinition.createObject());
                 }

                     onSelectionChanged: {
                         // slot called when ListView emits
selectionChanged signal
                         // A slot naming convention is used for automatic
 connection of list view signals to slots
                         console.log ("onSelectionChanged, selected: "
+ selected)
                         if (selected) {
                         var chosenItem = myListModel.data(indexPath);

                         if (chosenItem.text == undefined) {
                             chosenItem.text = "";
                         }

                         _contentView = chosenItem;
                     }
                     }
                     onActivationChanged: {
                         console.log ("onActivationChanged, active: " +
                         active)
                         if(active) listView.activeItem = indexPath[0]
                     }
             }
         }
     }



     attachedObjects: [

         Sheet {
                 id: addSheet
                 AddPage {
                     id: add
                     onAddPageClose: {
                         addSheet.close();
                     }
                 }
                 onClosed: {
                     add.newQuote();
                 }
             },
         ComponentDefinition {
             id: pageDefinition
             source: "DetailsPage.qml"
         }
         ]

     onTopChanged: {
         if (page == list) {
             listView.clearSelection();
         }
     }


     onCreationCompleted: {
         // this slot is called when declarative scene is created
         // write post creation initialization here
         console.log("NavigationPane - onCreationCompleted()");
         //myListModel.load("app/native/assets/mydata.json")

         // enable layout to adapt to the device rotation
         // don't forget to enable screen rotation in
 bar-bescriptor.xml (Application->Orientation->Auto-orient)
         OrientationSupport.supportedDisplayOrientation =
 SupportedDisplayOrientation.All;
         myListModel.load("app/native/assets/mydata.json")
     }
 }