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: 58
Registered: ‎02-13-2009
My Device: Not Specified
Accepted Solution

how to reset content when switching between tabs

My use case is I have multiple tabs all displayed in the side bar. The contents of the tabs each have a free form title bar which is expandable. If lets say on Tab 1, the title bar is expanded, then when you navigate to Tab 2, is there a way to collapse the expanded state of title bar in Tab 1. Or when you switch to Tab 1, is there a way to reset the state of the title bar - meaning collapsed.

 

I have tried all the possible alternatives such as resetExpanded() or making use of setting the expanded property to false dynamically but none works.

 

Only thing works is while I am in Tab 1, I expand the title bar and while in the same tab, if I perform any other action, I could execute resetExpanded() but thats it. Outside the Tab 1, like in the QML that has the tabbed pane, listening for side bar state changed events, active tab change events etc, none take effect.

 

There is no ID for the expandableArea so I could not get to the expanded property that I could create an Alias to.

 

Also the only ID that gets me to access the resetExpanded() is the ID of the 

FreeFormTitleBarKindProperties,  and thats how I am able to do the 

ID.expandableArea.resetExpanded() BUT I could not create a Alias for this FreeFormTitleBarKindProperties since it is not a valid qualifier to be aliased.

 

So I dont know how to solve this problem, unless there is a way to detroy the content of the tab everytime I switch to a different tab but that is very inefficeint and suffers poor performance.

 

Any ideas anyone how to solve this. Appreciate your help.

 

Developer
Posts: 58
Registered: ‎02-13-2009
My Device: Not Specified

Re: how to reset content when switching between tabs

Finally I was able to solve it!!

 

Originally I had the Tab content set statically at the beginning within the Tab as

 

Before:

 

Tab {

    somePage {

    }

}

 

After:

 

Now I have created somePage using ComponentDefinition and assigined the Tab content as 

 

tabbedPane.content = somePage,  followed by any customization properties I need to send to somePage

 

Now in TabbedPane, I listen for two events below

 

onActiveTabChanged: {

        resetTabContent();

}

 

onSidebarVisualStateChanged: {

        resetTabContent();

}

 

resetTabContent - invokes the function

 

function resetTabContent() {

        mainPane.activeTab.content.resetDropDown();

 }

 

The resetDropDown() function is at the global level on all the panes for the TabbedPane

 

functionresetAccountsDropDown() {

        contentArea.expandableArea.resetExpanded();

}

 

where contentArea is the ID of kindProperties of the titleBar as follows

 

Page {

    titleBar: TitleBar {

                id: pageTitle

                scrollBehavior: TitleBarScrollBehavior.Sticky

                kind: TitleBarKind.FreeForm

                kindProperties: FreeFormTitleBarKindProperties {

                          id: accountsArea

                         Container {

                         }

                         expandableArea {

                         }

               }

     }

}

 

Enjoy!!