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


Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums Device Forums on April 1st (Developers, see below)

BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com

Developers, for more information about the BlackBerry Developer Community please review Join the Conversation on the BlackBerry Developer Community Forums found on Inside BlackBerry.


Reply
Developer
Posts: 117
Registered: ‎07-12-2014
My Device: Z10
My Carrier: AT & T

Help me, How to create a search tab next to my home tab?

Hi all. I want to create a search tab from my list, this tab is located next to the home tab on actionbar. Here is my source code:

import bb.cascades 1.2
TabbedPane {
    Tab {
        id: tab1
        title: qsTr("Home") + Retranslate.onLocaleOrLanguageChanged
        imageSource: "asset:///pic2/ic_home.png"
        delegate: Delegate {
            id: tabDelegate1
            source: "danhsach.qml"
        }
        delegateActivationPolicy: TabDelegateActivationPolicy.None

    }
    Tab {
        id: tab2
        title: qsTr("Share") + Retranslate.onLocaleOrLanguageChanged
        imageSource: "asset:///pic2/ic_share.png"
        delegate: Delegate {
            id: tabDelegate2
            source: "share.qml"
        }
        delegateActivationPolicy: TabDelegateActivationPolicy.None
    }
    Tab {
        id: tab3
        title: qsTr("About me") + Retranslate.onLocaleOrLanguageChanged
        imageSource: "asset:///pic2/ic_info.png"
        delegate: Delegate {
            id: tabDelegate3
            source: "about.qml"
        }
        delegateActivationPolicy: TabDelegateActivationPolicy.None
    }
    Tab {
        id: tab4
        title: qsTr("Setting") + Retranslate.onLocaleOrLanguageChanged
        imageSource: "asset:///pic2/ic_settings.png"
        delegate: Delegate {
            id: tabDelegate4
            source: "setting.qml"
        }
        delegateActivationPolicy: TabDelegateActivationPolicy.None
    }
    onActiveTabChanged: {
        if (activeTab == tab1) {
            tabDelegate1.active = true;
            tabDelegate2.active = false;
            tabDelegate3.active = false;
            tabDelegate4.active = false;
        }
        if (activeTab == tab2) {
            tabDelegate1.active = false;
            tabDelegate2.active = true;
            tabDelegate3.active = false;
            tabDelegate4.active = false;
        }
        if (activeTab == tab3) {
            tabDelegate1.active = false;
            tabDelegate2.active = false;
            tabDelegate3.active = true;
            tabDelegate4.active = false;
        }
        if (activeTab == tab4) {
            tabDelegate1.active = false;
            tabDelegate2.active = false;
            tabDelegate3.active = false;
            tabDelegate4.active = true;
        }
    }

    onCreationCompleted: {
        tabDelegate1.active = true;
    }
}

Thank you

a4.png

Developer
Posts: 358
Registered: ‎04-13-2013
My Device: Z10
My Carrier: Telus

Re: Help me, How to create a search tab next to my home tab?

Just place the SearchTab as your first or second tab option
Developer
Posts: 117
Registered: ‎07-12-2014
My Device: Z10
My Carrier: AT & T

Re: Help me, How to create a search tab next to my home tab?

You can better guide for me? thank you
Developer
Posts: 358
Registered: ‎04-13-2013
My Device: Z10
My Carrier: Telus

Re: Help me, How to create a search tab next to my home tab?

I think i'm a bit confused about what you are asking. Do you want to have a tabbedpane and then in one of the tabs have a search icon show up on the bottom action bar? Or do you want to add a tab that is a search?
Developer
Posts: 117
Registered: ‎07-12-2014
My Device: Z10
My Carrier: AT & T

Re: Help me, How to create a search tab next to my home tab?

I want to add a tab that is a search. Search all data on main home.
Developer
Posts: 358
Registered: ‎04-13-2013
My Device: Z10
My Carrier: Telus

Re: Help me, How to create a search tab next to my home tab?

Ah ok gotcha

 

Add the following code in the root of your tab page:

 

actions:[

ActionItem{
title: "Search"

onTriggered{
//add your search function here, probably to make a search textbox visible.
}

}

]

 

Developer
Posts: 117
Registered: ‎07-12-2014
My Device: Z10
My Carrier: AT & T

Re: Help me, How to create a search tab next to my home tab?

Thank you bmorr. I have done.
Developer
Posts: 117
Registered: ‎07-12-2014
My Device: Z10
My Carrier: AT & T

Re: Help me, How to create a search tab next to my home tab?

How to operate the search function. it will search all the data available to search. I need source code. Thanks
Developer
Posts: 614
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: Help me, How to create a search tab next to my home tab?

To achieve the desired effect, simply add the following code to your TabbedPane

 

attachedObjects: [
 
   SomeDialog{
      id: searchComponent
   }
]
onCreationCompleted: {
  searchComponent.open()
}

 

Create a new QML file and place it in the /assets directory

 

SomeDialog.qml

 

Dialog {
    Container {
        id: searchComponentContainer
        preferredWidth: Infinity
        preferredHeight: maxHeight
        layout: DockLayout {
        }
        opacity: 1.0
        background: Color.Transparent
        Container{
            translationX: 100
            translationY: -40
            opacity: 0.7
            verticalAlignment: VerticalAlignment.Bottom //align searchcomponent at the bottom
            horizontalAlignment: HorizontalAlignment.Left
            preferredHeight: 128
            preferredWidth: maxWidth
            
            background: Color.Transparent
layout: DockLayout{}


            TextField{
                id: searchField
                text: ""
            }
        }
        
        onTouch: {
            if(event.isDown()){
                searchComponent.close();
            }
        }
}
}

 

 Enjoy~

Highlighted
Developer
Posts: 117
Registered: ‎07-12-2014
My Device: Z10
My Carrier: AT & T

Re: Help me, How to create a search tab next to my home tab?

[ Edited ]

I did as your guide, but I want to touch the search tab, the dialog box will appear.

I want the search dialog box appears when I touch the search tab, it's not like the picture below

a6.png