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
New Developer
Posts: 67
Registered: ‎07-12-2014
My Device: Z10

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

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
New Developer
Posts: 67
Registered: ‎07-12-2014
My Device: Z10

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

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?
New Developer
Posts: 67
Registered: ‎07-12-2014
My Device: Z10

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

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.
}

}

]

 

New Developer
Posts: 67
Registered: ‎07-12-2014
My Device: Z10

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

Thank you bmorr. I have done.
New Developer
Posts: 67
Registered: ‎07-12-2014
My Device: Z10

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: 569
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~

New Developer
Posts: 67
Registered: ‎07-12-2014
My Device: Z10

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