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

BlackBerry® Q10

Reply
Contributor
Posts: 18
Registered: ‎07-24-2013
My Device: BLackberry 10

BB 10 Cascades navigation On List Item Button Click

Hi All,

 

Please Observe this Qml Code:

 

Tab {
        title: "Tab 1"
        imageSource: "asset:///images/share_icon.png"
        NavigationPane {
            id: navTab
            Page {
                id:sharePage
                ScrollView {
                 Container {
                    layout: StackLayout {
                        orientation: LayoutOrientation.TopToBottom
                    }
                    Container {
                            layout: DockLayout {
                            }
                            leftPadding: 15.0
                            rightPadding: 15.0
                            horizontalAlignment: HorizontalAlignment.Fill
                            background: Color.create("#f9393b30")
                            ImageView {
                            imageSource: "asset:///images/title.png"
                                horizontalAlignment: HorizontalAlignment.Center
                                maxHeight: 250
                            	maxWidth: 300
                                scaleX: 0.5
                                scaleY: 0.5
                            }
                            Button {
                                horizontalAlignment: HorizontalAlignment.Right
                                imageSource: "asset:///images/settings_button_icon.png"
                                scaleX: 0.5
                                scaleY: 0.5
                                leftPadding: 100
                                contextActions: [
                                    ActionSet {
                                        title: "Share Settings"
                                        actions: [
                                            ActionItem {
                                                title: "Add/Delete Symbols"
                                                
                                                onTriggered: {

                                                    var add_Delete = addOrDelete.createObject();
                                                    add_Delete.appPage_ID = 
                                                    { 'id': navTab ,'title': 'Share'};
                                        
                                                    navTab.push(add_Delete);
                                                    //navTab.push(addOrDelete.createObject());
                                                }
                                                imageSource: "asset:///images/add_button.png"
                                            },
                                            ActionItem {
                                                title: "Alerts"
                                                onTriggered: {
                                                    var alerts = alertsPage.createObject();
                                                    alerts.alerts_ID = {
                                                        'id': navTab
                                                    };
                                                    navTab.push(alerts);
                                                    //navTab.push(alertsPage.createObject());
                                                }
                                                imageSource: "asset:///images/alert_title_icon.png"
                                            },
                                            ActionItem {
                                                title: "Portfolio"
                                                onTriggered: {
                                                    var port_page= portfolio.createObject();
                                                    port_page.data_ID={'id':navTab};
                                                    navTab.push(port_page);
                                                }
                                                imageSource: "asset:///images/portfolio_title_icon.png"

                                            },
                                            ActionItem {
                                                title: "News Feeds"
                                                onTriggered: {
                                                    var feeds= newsFeeds.createObject();
                                                    feeds.navId={
                                                        'id': navTab
                                                    }
                                                    navTab.push(feeds);
                                                }
                                                imageSource: "asset:///images/news_feed_icon.png"

                                            },
                                            ActionItem {
                                                title: "Exit Application"
                                                onTriggered: {
                                                    _app.exitApp();
                                                }

                                                imageSource: "asset:///images/exit_icon.png"
                                            }

                                        ]
                                    } // end of ActionSet
                                ]
                            }
                    }
                        
                    Container {
                        
                        layout: StackLayout {

                        }
                        leftPadding: 15.0
                        rightPadding: 15.0
                        background: Color.create("#00a3b8")
                        horizontalAlignment: HorizontalAlignment.Fill
                        
                        Label {
                            text: "Share"
                        }

                    }
                        Container {
                            leftPadding: 15.0
                            rightPadding: 15.0
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }
                            topPadding: 20.0

                            Label {
                                id: symbolTop
                                text: "Symbol"
                       
                                // Text Style and size etc
                                textStyle.base: SystemDefaults.TextStyles.SmallText
                                textStyle.fontSizeValue: 30.0
                                layoutProperties: StackLayoutProperties {
                                    spaceQuota: 1.0
                                }
                                verticalAlignment: VerticalAlignment.Center
                                horizontalAlignment: HorizontalAlignment.Center
                            }
                            Label {
                                id: changePer
                                text: "Change %"
                                textStyle.base: SystemDefaults.TextStyles.SmallText
                                textStyle.fontSizeValue: 30.0
                               
                                layoutProperties: StackLayoutProperties {
                                    spaceQuota: 1.0
                                }
                                verticalAlignment: VerticalAlignment.Center
                                horizontalAlignment: HorizontalAlignment.Center

                            }
                            Label {
                                id: ltpTop
                                text: "LTP"
                                textStyle.base: SystemDefaults.TextStyles.SmallText
                                textStyle.fontSizeValue: 30.0
                                layoutProperties: StackLayoutProperties {
                                    spaceQuota: 2.0
                                }
                                verticalAlignment: VerticalAlignment.Center
                                horizontalAlignment: HorizontalAlignment.Center
                            }
                           
                        }

                        
                    //Integrating
                        Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }

                            ListView {
                                id: tradeList
                                objectName: "tradeList"
                                dataModel: _app.dataModel
                                listItemComponents: [
                                    ListItemComponent {
                                        type: "header"
                                        Header {
                                            title: {
                                                ListItemData
                                            }
                                        }
                                    },

                                    // The tradeList Item
                                    ListItemComponent {
                                        type: "item"
                                        //  StandardListItem {
                                        //  title: ListItemData.Symbol + '   ' + ListItemData.PerChange +'   '+
                                        //  ListItemData.LTP
                                        // }

                                        Container {
                                            leftPadding: 15.0
                                            rightPadding: 15.0
                                            layout: StackLayout {
                                                orientation: LayoutOrientation.LeftToRight
                                            }
                                            topPadding: 20.0

                                            Label {
                                                id: symbol
                                                text: ListItemData.Symbol_En

                                                // Text Style and size etc
                                                textStyle.base: SystemDefaults.TextStyles.SmallText
                                                textStyle.fontSizeValue: 30.0
                                                layoutProperties: StackLayoutProperties {
                                                    spaceQuota: 1
                                                }
                                                verticalAlignment: VerticalAlignment.Center
                                                horizontalAlignment: HorizontalAlignment.Center
                                            }
                                            Label {
                                                id: change
                                                text: ListItemData.PerChange
                                                textStyle.base: SystemDefaults.TextStyles.SmallText
                                                textStyle.fontSizeValue: 30.0
                                                layoutProperties: StackLayoutProperties {
                                                    spaceQuota: 1
                                                }
                                                verticalAlignment: VerticalAlignment.Center
                                                horizontalAlignment: HorizontalAlignment.Center

                                            }
                                            Label {
                                                id: ltp
                                                text: ListItemData.LTP
                                                textStyle.base: SystemDefaults.TextStyles.SmallText
                                                textStyle.fontSizeValue: 30.0
                                                layoutProperties: StackLayoutProperties {
                                                    spaceQuota: 1
                                                }
                                                verticalAlignment: VerticalAlignment.Center
                                                horizontalAlignment: HorizontalAlignment.Center
                                            }
                                            Button {
                                                horizontalAlignment: HorizontalAlignment.Center
                                                imageSource: "asset:///images/graph_button_icon.png"

                                                onClicked: {
                                                    var quick_chart = quickView.createObject();
                                                    quick_chart.chart_ID = {
                                                        'id': navTab
                                                    };
                                                    navTab.push(quick_chart);
                                                }
                                                scaleY: 0.5
                                                scaleX: 0.5
                                                verticalAlignment: VerticalAlignment.Center
                                            }
                                        }
                                    }
                                ]
                               
                            }
                            Timer {
                                id: lightTimer
                                // Specify a timeout interval of 1 second
                                interval: 1000
                                onTimeout: {
                                    // call method Qinvikable to load records
                                    _app.readRecords();
                                    //_app.showToast("  Timer 1 readRecords called in Qml ");
                                    // listItems.addColor();
                                } // end of onTimeout signal handler

                            } // end of Timer
                    }
                    
                   }
                  }
                }
            onCreationCompleted: {
                lightTimer.start();
                _app.reqForSymbols(1);
            }
            
        }
        onTriggered: {

            _app.dropSymbols(2);
            _app.clearModel();
           // lightTimer2.stop();
            _app.reqForSymbols(1);

            lightTimer.start();

        }
        attachedObjects: [
                ComponentDefinition {
                    id: quickView
                    source: "QuickORChartview.qml"
                },
            ComponentDefinition {
                id: alertsPage
                source: "AlertsPage.qml"
            },
            ComponentDefinition {
                id: portfolio
                source: "portfolio.qml"
            },
            ComponentDefinition {
                id: addOrDelete
                source: "AddOrDelete.qml"
            },
            ComponentDefinition {
                id: newsFeeds
                source: "FeedsHome.qml"
            },
            ComponentDefinition {
                id: exitApp
               
            }
        ]
            
    }

 now I have ListView. Each List Item with Three Lables and One Button.When i Click  on List Item Button ,I want to Navigate to corresponding page.

 

For more Clarity of Listview of above Qml Code ,Please find this...(Apart os above Qml Code).

Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }

                            ListView {
                                id: tradeList
                                objectName: "tradeList"
                                dataModel: _app.dataModel
                                listItemComponents: [
                                    ListItemComponent {
                                        type: "header"
                                        Header {
                                            title: {
                                                ListItemData
                                            }
                                        }
                                    },

                                    // The tradeList Item
                                    ListItemComponent {
                                        type: "item"
                                        //  StandardListItem {
                                        //  title: ListItemData.Symbol + '   ' + ListItemData.PerChange +'   '+
                                        //  ListItemData.LTP
                                        // }

                                        Container {
                                            leftPadding: 15.0
                                            rightPadding: 15.0
                                            layout: StackLayout {
                                                orientation: LayoutOrientation.LeftToRight
                                            }
                                            topPadding: 20.0

                                            Label {
                                                id: symbol
                                                text: ListItemData.Symbol_En

                                                // Text Style and size etc
                                                textStyle.base: SystemDefaults.TextStyles.SmallText
                                                textStyle.fontSizeValue: 30.0
                                                layoutProperties: StackLayoutProperties {
                                                    spaceQuota: 1
                                                }
                                                verticalAlignment: VerticalAlignment.Center
                                                horizontalAlignment: HorizontalAlignment.Center
                                            }
                                            Label {
                                                id: change
                                                text: ListItemData.PerChange
                                                textStyle.base: SystemDefaults.TextStyles.SmallText
                                                textStyle.fontSizeValue: 30.0
                                                layoutProperties: StackLayoutProperties {
                                                    spaceQuota: 1
                                                }
                                                verticalAlignment: VerticalAlignment.Center
                                                horizontalAlignment: HorizontalAlignment.Center

                                            }
                                            Label {
                                                id: ltp
                                                text: ListItemData.LTP
                                                textStyle.base: SystemDefaults.TextStyles.SmallText
                                                textStyle.fontSizeValue: 30.0
                                                layoutProperties: StackLayoutProperties {
                                                    spaceQuota: 1
                                                }
                                                verticalAlignment: VerticalAlignment.Center
                                                horizontalAlignment: HorizontalAlignment.Center
                                            }
                                            Button {
                                                horizontalAlignment: HorizontalAlignment.Center
                                                imageSource: "asset:///images/graph_button_icon.png"

                                                onClicked: {
                                                    var quick_chart = quickView.createObject();
                                                    quick_chart.chart_ID = {
                                                        'id': navTab
                                                    };
                                                    navTab.push(quick_chart);
                                                }
                                                scaleY: 0.5
                                                scaleX: 0.5
                                                verticalAlignment: VerticalAlignment.Center
                                            }
                                        }
                                    }
                                ]
                               
                            }
                            Timer {
                                id: lightTimer
                                // Specify a timeout interval of 1 second
                                interval: 1000
                                onTimeout: {
                                    // call method Qinvikable to load records
                                    _app.readRecords();
                                    //_app.showToast("  Timer 1 readRecords called in Qml ");
                                    // listItems.addColor();
                                } // end of onTimeout signal handler

                            } // end of Timer
                    }

 I tried like this to Achive so, but i didn't get that navigation On  List Item Button Click.Where I am Wrong!!! Please Help!!! waiting for Reply,

 

Thanks All !!!

 

Developer
Posts: 123
Registered: ‎01-11-2013
My Device: BlackBerry z10

Re: BB 10 Cascades navigation On List Item Button Click

Is there any error in device log??

Contributor
Posts: 18
Registered: ‎07-24-2013
My Device: BLackberry 10

Re: BB 10 Cascades navigation On List Item Button Click

No