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
Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later
Accepted Solution

working with tabbed pane

QmlDocument *qml = QmlDocument::create("asset:///Tabs.qml").parent(this);

		    root = qml->createRootObject<AbstractPane>();

		    if (!qml->hasErrors())
		    {
		    	qml->setContextProperty("quote", this);
		    }
		    Application::instance()->setScene(root);

 

 

Tabs.qml

 

import bb.cascades 1.2

TabbedPane {
    showTabsOnActionBar: true
    
    Tab {
        title: "Home"
        Page {
            id: page1
            actions: [
                ActionItem {
                    title: "New"
                },
                ActionItem {
                    title: "Delete"
                }
            ]
        }
    }
    Tab {
        title: "Options"
        Page {
            id: page2
            actions: [
                ActionItem {
                    title: "Edit"
                },
                ActionItem {
                    title: "Save"
                }
            ]
        }
    }
    Tab {
        title: "Help"
        Page {
            id: page3
            actions: [
                ActionItem {
                    title: "Search"
                },
                ActionItem {
                    title: "Browse"
                }
            ]
        }
    }
}

 

 

on click of home , neither new or delete show up on the left side.

 on click of options neither edit or save show up

same for help

 

also automatically more button is added..where search and browse show up on click from left side.

 

i wanna remove more button...and have the 3 tabs take entire bottom space..plus functionalit work.

 

also can i write inside tabs.qml a header on top of the page ???

 

 

 

Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: working with tabbed pane

import bb.cascades 1.2

TabbedPane {
    showTabsOnActionBar: true
    id:tabPane
    Tab {
        title: "Home"
        id: tab1
        Page {
            id: page1
            
         
                ControlDelegate {
                    source: "Summary.qml"
                 //   delegateActive: (tabPane.activeTab == tab1)
                }
            actions: [
                ActionItem {
                    title: "New"
                },
                ActionItem {
                    title: "Delete"
                }
            ]
        }
    }
    Tab {
        title: "Options"
        Page {
            id: page2
            actions: [
                ActionItem {
                    title: "Edit"
                },
                ActionItem {
                    title: "Save"
                }
            ]
        }
    }
    Tab {
        title: "Help"
        Page {
            id: page3
            actions: [
                ActionItem {
                    title: "Search"
                },
                ActionItem {
                    title: "Browse"
                }
            ]
        }
    }
}

 

import bb.cascades 1.2

Page {
    
    Container {
        
       // background: style.bgColor   
        Container {
            preferredWidth: Infinity
           // background: style.black
         
            Button {
                text: "SUSUSUSU"
            }
            layoutProperties: StackLayoutProperties {
                spaceQuota: -1
            }
        }
    }
    actions: [
        ActionItem {
            id: action1
            title: "Batata"
            ActionBar.placement: ActionBarPlacement.InOverflow
            onTriggered: {
             	   
            }
        },
        ActionItem {
            id: action2
            title: "Taboule"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
            
            }
        },
        ActionItem {
            id: action3
            title: "Batikh"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
            
            }
        }
        ,
        ActionItem {
            id: action4
            title: "Hommos"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
            
            }
        }
        ,
        ActionItem {
            id: action5
            title: "Banadoura"
            ActionBar.placement: ActionBarPlacement.OnBar
            onTriggered: {
               // var page = utilitiesPageDefinition.createObject();
              //  nav.push(page);
            }
        }
    ]
    attachedObjects: [
        ComponentDefinition {
            id: detailsPageDefinition
            source: "DetailsPage.qml"
        },
        ComponentDefinition {
            id: utilitiesPageDefinition
            source: "Login.qml"
        }
    ]
}

 

summary.qml doesnt show up inside my screen...

 

How can i add pages n my tab?

 

also remove more button below

 

plus have a popup on left side if home button is clicked.. similar to how on click of more search and browse show up on right side.

Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: working with tabbed pane

I want similar to this

 

http://postimg.org/image/mnya6wn2t/

 

4 tabs below my page

 

first tab clicked i get this

 

http://postimg.org/image/wwqrcqb4l/

 

second tab clicked i open a new page..and implement cancel button to return previous page

 

third tabe same as seocnd tab

 

 

fourth tab wont name it more..but have options like this again

 

http://postimg.org/image/f9djs9ql1/

 

 

 

 

Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: working with tabbed pane

Here is what i have done

 

import bb.cascades 1.2

TabbedPane {
    showTabsOnActionBar: false
    id:tabPane
    Tab {

        title: "Home"
        id: tab1
        Page {
            titleBar: TitleBar {
                title: "Social Invocation"
               
            }
            Container
            {
                Button {
                    text: "ksdksksk"
                    onClicked: {
                        alkhaliji.invisible();
                    }
                }
            }
        }
       
    }
    Tab {
        title: "Options"
        Page {
            id: page2
            attachedObjects: [
                Sheet {
                    id: mySheet2
                    content: Page {
                        Button {
                            text: "Close Sheet"
                            onClicked: mySheet2.close()
                        }
                    }
                }
            ]
            actions: [
                
                ActionItem {
                    ActionBar.placement: ActionBarPlacement.OnBar
                    title: "Edit"
                },
                ActionItem {
                    ActionBar.placement: ActionBarPlacement.OnBar
                    title: "Save"
                },
                ActionItem {
                    ActionBar.placement: ActionBarPlacement.OnBar
                    title: "Save"
                    onTriggered: {
                        mySheet2.open();
                    }
                }
            ]
        }
    }
    Tab {
        title: "Help"
        Page {
            id: page3
            
            attachedObjects: [
                Sheet {
                    id: mySheet
                    content: Page {
                        Button {
                            text: "Close Sheet"
                            onClicked: mySheet.close()
                        }
                    }
                }
            ]
            actions: [
                ActionItem {
                    title: "Show Sheet"
                    ActionBar.placement: ActionBarPlacement.OnBar
                    onTriggered: {
                        mySheet.open();
                    }
                }
            ]
        }
    }
}

 

 

I have home below. on click of it, an overflow on left appears with home options help buttons..

on click of home i have button.

on click of options and help i have actionitems on bar

 

 

I want to keep the overflow on left...but i also want to add other tabs not overflowed..but besides the button..and on the right have overflow on right. how can this be done?

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: working with tabbed pane

@babakar I think the reason you haven't got an answer yet is that your use of wording is confusing.

 

Please use the proper terms, i.e. ActionItem, tabbedPane, NavigationPane, Tab to indicate what you want where.

 

Take a read of this if you are unsure what the correct nomenclature is and to learn the different elemets that make up a Cascades UI...

 

http://developer.blackberry.com/native/documentation/cascades/ui/navigation/index.html

 

Read the four further documentation links at the bottom of that page as well.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: working with tabbed pane

okey let me word better

 

I am working on tabbedpane.. as i need one below the page.

However, the way i want it... is have inoverflow both on left and right side of the tabs.

 

 showTabsOnActionBar: false

 

if i do this, i get overflow on left side

 

if i call it true..i have them on bar

 

i want to have inbetween..some on bar, someon right..and some on left overflow

 

 

PS However i can do showTabsOnActionBar: false and add actonitem for each tab..and have left overflow too.

 

 

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: working with tabbed pane

Ok please read the links I gave you there is no overflow to the left side this is where tabbedPane tabs are put and is under control by you.

If I can try and swipe through the confusion I believe what you want is a TabbedPane then in each Tab you can have a navigationPane that holds it's own Page which defines the ActionItems either on the bar or in the overflow.

If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: working with tabbed pane

I dont know what i want yet. I am trying.

But yes, say I hav 10 tabs

if i do them on bar..i get right overflow.
i do what i told u showTabsOnActionBar: false.. i get one tab on bar, and the others left over flow.


I was wondering if i have 10 tabs... to place 2 right over flow, 2 left over flow..4 on screen.


PS I am checking most app designs. the way 2 overflows happen. You have tabs left overflow...and then on bar u have actionitems..and u have right overflow on the actionitems. I think this is how I iwll suggest to work it.
Developer
Posts: 809
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: working with tabbed pane

Also in docs it suggests not to fill the actionbar for sake of filling..
but dont think it will look nice if i dont..
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: working with tabbed pane

This is something I've put together recently which does something similar...

 

TabbedPane {
    id: tabbedPane

    showTabsOnActionBar: false


    Tab {
        title: "Stats"
        Statistics { }
    }

    Tab {
        title: "History"
        imageSource: "asset:///images/ic_history.png"

        delegate: Delegate { source: "History.qml" }
        delegateActivationPolicy: TabDelegateActivationPolicy.Default
    }

    Tab {
        title: "Teams"
        imageSource: "asset:///images/ic_team.png"

        delegate: Delegate { source: "Teams.qml" }
        delegateActivationPolicy: TabDelegateActivationPolicy.Default
    }

 Note the use of showTabsOnActionBar which is controllable by you, within the Teams.qml I then define a navigationPane..

 

import bb.cascades 1.2
import "controls"

NavigationPane {
    id: teamNavPane

    onPopTransitionEnded: {
        page.destroy();
    }

    TeamListView { }

}

 Within TeamListView.qml I can then define what I wish to show in on the ActionBar or in the overflow...

 

import bb.cascades 1.2

Page {
    id: teamList

    actions: [
        ActionItem {
            ActionBar.placement: ActionBarPlacement.OnBar
            imageSource: "asset:///images/ic_team_add.png"
            title: "Add"

            onTriggered: {
            	addTeam();
            }
        }
    ]

 Is this what you are looking for?


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.