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
Developer
Posts: 262
Registered: ‎07-13-2012
My Device: PlayBook, DA B, DA C, LE Z10 #102, Q10, Z30

"Details" Page from a ListView

Running through the ListView portions of the webcast tutorial project (Webinar2SampleApp) I noticed nothing happened when the user selected an item on the list (using List2 specifically for my example).  Often times the user would expect when the select an item on the list it should bring them to a "Details" page of that item.  So below I have an example of code using Navigation view to push and pop between a list and a "Details" page:

 

Main.qml:

import bb.cascades 1.0
import "lists"
 
NavigationPane {
    id: navPane
    List{
        
        } // end of Page
     
    attachedObjects: [

        Page {
            id: infopage
            content: Container {
                background: Color.create(0.1, 0.1, 0.1)
                
               Label{
                    text: "Hello World"
                    }

            }
             
            paneProperties: NavigationPaneProperties {
                backButton: ActionItem {
                    onTriggered: {
                        navPane.pop ();
                    }
                }
            }
        } // end of Page
    ] // end of attachedObjects list
} // end of NavigationPane

List.qml:

import bb.cascades 1.0

Page {
    content: Container {
        background: Color.create(0.1, 0.1, 0.1)
        ListView {
//Insert all of your List component stuff here

            onSelectionChanged: {
                navPane.push (infopage); //infopage is the id of the attached object inside of the navigation pane of the main.qml
            }
        }
    }
}

 

Here you will see that whenever a user selects an item from the list they will be taken to the info page that is simply a label with "Hello World" and a default back button that takes the user back to the ListView. 

 

However, I can't figure out how to make the "Details Page" also pull information from the XML just the same as the ListView does.  I tried calling it the same way saying:"ListItemData.title" inside my label but that doesn't work so I assumed that call only works inside of a StandardListItem{}.  Also tried some other things that didn't work...  So at this point I'm stuck, any help would be appreciated.

 

Thanks.

 

 

 

 

---
Check out my BB10 Cascades Coding site: BBcascades.com & Cascades Blog: bbcascadescode.tumblr.com

My Built for BlackBerry app: The Dive Plan
BlackBerry Development Advisor (Retired)
Posts: 60
Registered: ‎05-10-2012
My Device: Blackberry 10 Alpha

Re: "Details" Page from a ListView

Hello,

 

To achieve what you want, you would need to save the data associated with the item that was clicked on in the c++ code,  load the next qml and populate it with the saved code.

 

An example of this is the StampCollector App. https://github.com/blackberry/Cascades-Samples/tree/master/stampcollector

 

Cheers

Selom

Developer
Posts: 262
Registered: ‎07-13-2012
My Device: PlayBook, DA B, DA C, LE Z10 #102, Q10, Z30

Re: "Details" Page from a ListView

Thanks, I knew of that example but couldn't figure out how it was doing it.  One quick follow up question, does that mean I need a json and an xml file that have essentially the same info?

---
Check out my BB10 Cascades Coding site: BBcascades.com & Cascades Blog: bbcascadescode.tumblr.com

My Built for BlackBerry app: The Dive Plan
BlackBerry Development Advisor (Retired)
Posts: 60
Registered: ‎05-10-2012
My Device: Blackberry 10 Alpha

Re: "Details" Page from a ListView

No you don't need to use the JSON or the same info. The "info" you store is totally dependent on the data your app is displaying in the listview, and what you want to carry on to the next one.

 

You will notice in the constructor it installs a slot handler for OnSelectionChanged event of the list

 

 ListView *stampList = mNav->findChild<ListView*>("stampList");
    setUpStampListModel(stampList);
    QObject::connect(stampList, SIGNAL(selectionChanged(const QVariantList, bool)), this,
            SLOT(onSelectionChanged(const QVariantList, bool)));

 

then in the onselection method it updates the mQmlContext with whatever was selected.

 

void StampCollectorApp::onSelectionChanged(const QVariantList indexPath, bool selected)
{
    if (selected) {
        // We use the sender to get the list view for accessing the data model and then the actual data.
        if(sender()) {
            ListView* stampList = dynamic_cast<ListView*>(sender());
            DataModel* stampModel = stampList->dataModel();

            // Update the content view context property so that it corresponds to
            // the selected item and navigate to the page.
            QVariantMap map = stampModel->data(indexPath).toMap();
            mQmlContext->setContextProperty("_contentView", map);
            mNav->push(mContentPage);
        }
    }
}

 and updates the contextProperty with the selected item. In the ContentPage.qml, the "_contentView" now has the data needed to show the details of the selected item from the previous page. For example "text: _contentView.infoText"

 

TextArea {                
                topMargin: 30
                preferredHeight: 200
                text: _contentView.infoText
                editable: false;
                textStyle {
                    base: SystemDefaults.TextStyles.BodyText
 	                color: Color.LightGray
                    alignment: TextAlignment.Center
                }

 you can use a similar pattern to implement in your code without having go copy the data or use json.

 

Selom