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: 116
Registered: ‎07-12-2014
My Device: Z10
My Carrier: AT & T
Accepted Solution

Help me, create a new page from the current page TabbedPane

I want when I touch the about tab will show a new page. Here is my source:

main.qml

import bb.cascades 1.0
TabbedPane {
    showTabsOnActionBar: false
    Tab { //First tab
        // Localized text with the dynamic translation and locale updates support
        title: qsTr("Blackberry") + Retranslate.onLocaleOrLanguageChanged
        imageSource: "asset:///pic/ic_bbm.png"
        ActionBar.placement: ActionBarPlacement.InOverflow
        Page {
            actions: [
                ActionItem {
                    id: action2
                    title: qsTr("About") + Retranslate.onLocaleOrLanguageChanged
                    imageSource: "asset:///pic/ic_info.png"
                    ActionBar.placement: ActionBarPlacement.InOverflow
                }
                ]
            titleBar: TitleBar {
                title: "Tab one"
            }
            Container {
                Label {
                    text: qsTr("First tab") + Retranslate.onLocaleOrLanguageChanged
                }
            }
        }
    } //End of first tab
    Tab { //Second tab
        title: qsTr("Search") + Retranslate.onLocaleOrLanguageChanged
        imageSource: "asset:///pic/ic_search.png"
        ActionBar.placement: ActionBarPlacement.InOverflow
        Page {
            titleBar: TitleBar {
                title: "Tab two"
            }
            Container {
                Label {
                    text: qsTr("Second tab") + Retranslate.onLocaleOrLanguageChanged
                }
            }
        }
    } //End of second tab
    Tab { //Three tab
        title: qsTr("Share") + Retranslate.onLocaleOrLanguageChanged
        imageSource: "asset:///pic/ic_share.png"
        ActionBar.placement: ActionBarPlacement.InOverflow
        Page {
            titleBar: TitleBar {
                title: "Tab three"
            }
            Container {
                Label {
                    text: qsTr("Second tab") + Retranslate.onLocaleOrLanguageChanged
                }
            }
        }
    } //End of Three tab
}

about.qml


import bb.cascades 1.0
Page {
    property variant person;
    Container {
        verticalAlignment: VerticalAlignment.Center
        horizontalAlignment: HorizontalAlignment.Center
        topPadding: 50
        background: Color.create("#000000")
        ImageView {
            horizontalAlignment: HorizontalAlignment.Center
            imageSource: "asset:///pic/ducdaubb.jpg"
            preferredWidth: 500
            preferredHeight: 500
        }
        Label {
            textStyle.base: SystemDefaults.TextStyles.BigText
            textStyle.fontWeight: FontWeight.Normal
            text: "Radio Indonesia"
            horizontalAlignment: HorizontalAlignment.Center
            textStyle.color: Color.White
        }
        Label {
            textStyle.base: SystemDefaults.TextStyles.BigText
            horizontalAlignment: HorizontalAlignment.Center
            textStyle.fontWeight: FontWeight.Default
            text: "Version 2014.1"
            textStyle.color: Color.White
            textStyle.fontSize: FontSize.XLarge
        }
        Label {
            textStyle.base: SystemDefaults.TextStyles.BodyText
            horizontalAlignment: HorizontalAlignment.Center
            textStyle.fontWeight: FontWeight.Normal
            textStyle.fontSize: FontSize.Large
            text: "Copyright 2014-2015"
            textStyle.color: Color.DarkGray
        }
        Label {
            textStyle.base: SystemDefaults.TextStyles.BodyText
            horizontalAlignment: HorizontalAlignment.Center
            textStyle.fontSize: FontSize.Large
            text: "Devoloper by 1Pro"
            textStyle.color: Color.LightGray
        }
        Label {
            textStyle.base: SystemDefaults.TextStyles.BigText
            horizontalAlignment: HorizontalAlignment.Center
            textStyle.fontSize: FontSize.XLarge
            textStyle.fontWeight: FontWeight.Normal
            text: qsTr("http://radio.com.id")
            textStyle.color: Color.create("#087099")
            multiline: false
        }
    } // Container
} // Page

 

Thank you

 

a1.png

a2.png

a3.png

Developer
Posts: 543
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: Telekom Slovakia

Re: Help me, create a new page from the current page TabbedPane

You need NavigationPane if you want to push new (about) page.

For example:

Tab { //First tab
    title: qsTr("Blackberry") + Retranslate.onLocaleOrLanguageChanged
    imageSource: "asset:///pic/ic_bbm.png"
    ActionBar.placement: ActionBarPlacement.InOverflow
    NavigationPane{
        Page {
            actions: [
                ActionItem {
                    id: action2
                    title: qsTr("About") + Retranslate.onLocaleOrLanguageChanged
                    imageSource: "asset:///pic/ic_info.png"
                    ActionBar.placement: ActionBarPlacement.InOverflow
                }
                ]
...................

 then in your page add ComponentDefinition to attachedObjects of the page

YourPage{
    
    attachedObjects: [
         ComponentDefinition {
             id: aboutPage
             source: "About.qml"
         }
     ]
}

 and finally push the new About page. 

ActionItem{
    title: qsTr("About")
    onTriggered:{
        activePane.push(aboutPage.createObject())
    }
}

 hope it helps

 

For more info check this

https://developer.blackberry.com/native/documentation/cascades/best_practices/dynamic_qml/



If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Highlighted
Developer
Posts: 116
Registered: ‎07-12-2014
My Device: Z10
My Carrier: AT & T

Re: Help me, create a new page from the current page TabbedPane

Thank you Benecore. I have done.