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
Tobster_
Posts: 270
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

Cascades Radio Button, Title Bar, Drop Down Help

Hi, 

I am currently re-building my app, originally created in Webworks, but due to reviews critsizing the user interface I realized it was time to switch to Cascades and I must admit the app runs and feels a lot better in Cascades than Webworks (I should have changed ages ago)! Anyway, onto the problem I would like some help with...

I followed a tutorial on OSBB, Easing into Cascades Animations, and I have managed to successfully integrate that into my app but what I am trying to achieve is, is by selecting a radio button it loads a different page. For example, my title bar currently looks like this, 

 

IMG_00000666_edit.png

 

and I was wondering if it is possible to load a different qml page when a different radio button is selected, is that possible?

Here's the code, for the title bar, from my main.qml file,

 

 

import bb.cascades 1.2

TabbedPane {
    showTabsOnActionBar: false
    Tab { //First tab
        // Localized text with the dynamic translation and locale updates support
        title: qsTr("Home") + Retranslate.onLocaleOrLanguageChanged
        imageSource : "IMG/101.Home.png"
        Page {
            actions: [
                ActionItem {
                    id: action1
                    title: "Previous"
                    imageSource: "asset:///IMG/ic_previous.png"
                    ActionBar.placement: ActionBarPlacement.OnBar
                    onTriggered: {
                        menu.goBack();
                    }
                },
                ActionItem {
                    id: action2
                    title: "Next"
                    imageSource: "asset:///IMG/ic_next.png"
                    ActionBar.placement: ActionBarPlacement.OnBar
                    onTriggered: {
                        menu.goForward()
                    }
                },
                InvokeActionItem {
                    ActionBar.placement: ActionBarPlacement.OnBar
                    title: "Share"
                    imageSource: "asset:///IMG/ic_share.png"
                    query {
                        mimeType: "text/plain"
                        invokeActionId: "bb.action.SHARE"
                    }
                    onTriggered: {
                        data = "Check out this item on eBay" + menu.url + "Shared using the share button!";
                    }
                },
                ActionItem {
                    id: action4
                    title: "Invite"
                    imageSource: "asset:///IMG/163.BBM_invite.png"
                    ActionBar.placement: ActionBarPlacement.Default
                    onTriggered: {
                        _app.inviteUserToDownloadViaBBM()
                    }
                },
                ActionItem {
                    id: action5
                    title: "Refresh"
                    imageSource: "asset:///IMG/206.Refresh1.png"
                    ActionBar.placement: ActionBarPlacement.Default
                    onTriggered: {
                        eBayUK.reload();
                    }
                }
            ]
            titleBar: TitleBar {
                kind: TitleBarKind.FreeForm
                kindProperties: FreeFormTitleBarKindProperties {
                    Container {
                        layout: StackLayout {
                            orientation: LayoutOrientation.LeftToRight
                        }
                        leftPadding: 10.0
                        rightPadding: 10.0
                        Label {
                            text: radioGroup.selectedOption.text
                            textStyle {
                                color: Color.White
                            }
                            verticalAlignment: VerticalAlignment.Center
                            layoutProperties: StackLayoutProperties {
                                spaceQuota: 1
                            }
                        }
                        ImageView {
                            id: toggleExpanded
                            property bool checked: false
                            
                            onTouch: {
                                if (checked == false) {
                                    if (event.touchType == TouchType.Down) {
                                    
                                    } else if (event.touchType == TouchType.Move) {
                                    
                                    } else if (event.touchType == TouchType.Up) {
                                        rt1.play()
                                        checked = true
                                    }
                                } else {
                                    if (event.touchType == TouchType.Down) {
                                    
                                    } else if (event.touchType == TouchType.Move) {
                                    
                                    } else if (event.touchType == TouchType.Up) {
                                        rt2.play()
                                        checked = false
                                    }
                                }
                            }
                            
                            animations: [
                                RotateTransition {
                                    id: rt1
                                    duration: 150
                                    toAngleZ: -180.0
                                    fromAngleZ: 0.0
                                    easingCurve: StockCurve.CubicIn
                                
                                },
                                RotateTransition {
                                    id: rt2
                                    duration: 150
                                    toAngleZ: 0
                                    fromAngleZ: -180.0
                                    easingCurve: StockCurve.CubicIn
                                
                                }
                            ]
                            imageSource: "asset:///IMG/ic_to_bottom.png"
                            verticalAlignment: VerticalAlignment.Center
                            horizontalAlignment: HorizontalAlignment.Center
                        }
                    }
                    expandableArea {
                        content: RadioGroup {
                            id: radioGroup
                            Option {
                                id: uk
                                text: "United Kingdom"
                                selected: true
                            }
                            Option {
                                id: us
                                text: "United States of America"
                            }
                            Option {
                                id: ca
                                text: "Canada"
                            }
                            Option {
                                id: de
                                text: "Germany"
                            }
                            Option {
                                id: it
                                text: "Italy"
                            }
                            Option {
                                id: au
                                text: "Australia"
                            }
                            onSelectedOptionChanged: {
                                rt2.play()
                                toggleExpanded.checked = false
                            }
                        }
                        indicatorVisibility: TitleBarExpandableAreaIndicatorVisibility.Hidden
                        expanded: toggleExpanded.checked
                        onExpandedChanged: {
                            toggleExpanded.checked = expanded
                        }
                    }
                }
            }

 Also, it would be a great help if anyone could find a tutorial or document on how to create an application menu (about, settings, info - dropdown from the top of the screen) in Cascades as I haven't been able to find out how to create one yet as it wasn't really explained in the Cascades cookbook app.

Finally, if somebody could explain to me why my share function won't share the current URL then that would be great! As it allows me to click the share button it then attempts to open a share card but then closes it and doesn't allow me to share the current URL. Any help with any of these things would be great as I have only been developing with Cascades for less than a week and it's great to learn how to do things so thanks 

 

InvokeActionItem {
                    ActionBar.placement: ActionBarPlacement.OnBar
                    title: "Share"
                    imageSource: "asset:///IMG/ic_share.png"
                    query {
                        mimeType: "text/plain"
                        invokeActionId: "bb.action.SHARE"
                    }
                    onTriggered: {
                        data = "Check out this item" + menuUK.url + "Shared using the share button!";
                    }
                },

 Thanks in advance 

Developer
slashkyle
Posts: 820
Registered: ‎10-16-2012
My Device: Red Z10

Re: Cascades Radio Button, Title Bar, Drop Down Help

For you're first question i'm not 100% posotive if you can progomatticaly cange tabs without using the tab menu.

 

I can answer your other 2

 

for a menu definition simply do this in your tabbed pane

 

    Menu.definition: MenuDefinition {
        onEnabledChanged: {
            console.log("Menu Enabled - " + enabled)
        }
        settingsAction: SettingsActionItem {
            onTriggered : {
            }
        }
        helpAction: HelpActionItem {
            onTriggered: {
        }
actions: [
ActionItem {
id: customAction
title: "Custom Action
onTriggered: {

}
}
] }

 

For invocations they're currently and intermittently broken in qml your best bet is with c++

heres an example i previously posted

http://supportforums.blackberry.com/t5/Native-Development/InvokeActionItem-10-2/m-p/2646357/highligh...

 

Developer
Tobster_
Posts: 270
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

Re: Cascades Radio Button, Title Bar, Drop Down Help

Thanks for replying :smileyhappy: 

 

I have now added the application menu (help & settings) to my app, but what do I put inside the onTriggered: {} to push a help qml page and a settings qml page? Also, thanks for sharing your example of invoking, but what I'm trying to do is copy the current URL on the screen and use a share card to share that URL as I am using webview and it would take the current URL that the user is on and share it. 

 

Thanks

Developer
slashkyle
Posts: 820
Registered: ‎10-16-2012
My Device: Red Z10

Re: Cascades Radio Button, Title Bar, Drop Down Help

you'll need to wrap each page in your tabbed pane into a navigation pane

 

Tab {
   NavigationPane {
       id: navigationPane0
      Page {
         
       }
   }

},
Tab {
NavigationPane {
id: navigationPane1
Page {
}
}
}

You'll need to keep track of which tab you're on so you know which navigationPane to call onTriggered

 then in the onTriggered portion of the action this is how you open a new page

onTriggered {
   if (indexOf(activeTab) == 0){
                        navigationPane0.push(settingsPageDefinition.createObject());
                    } else if (indexOf(activeTab) == 1){
                        navigationPane1.push(settingsPageDefinition.createObject());
                    }

}

 

you'll need to have the new page setup as a component definition in attached objects

 

attachedObjects: [
     ComponentDefinition: {
          id: settingsPageDefinition
          source: "SettingsPage.qml"
     }
]

 .

 

What you want to do with the url is an invocation, just pass the url (or any text) to the c++ invocation like this

 

.pro

LIBS += -lbb

 

applicationUI.cpp

#include <bb/cascades/InvokeQuery>
#include <bb/cascades/Invocation>

 

void ApplicationUI::share(QString text)
{
	InvokeQuery *query = InvokeQuery::create()
		.mimeType("text/plain")
		.data(text.toUtf8());
	Invocation *invocation = Invocation::create(query);
	query->setParent(invocation); // destroy query with invocation
	invocation->setParent(this); // app can be destroyed before onFinished() is called

	connect(invocation, SIGNAL(armed()), this, SLOT(onArmed()));
	connect(invocation, SIGNAL(finished()), this, SLOT(onFinished()));
}

 

void ApplicationUI::onArmed() {
	Invocation *invocation = qobject_cast<Invocation *>(sender());
	invocation->trigger("bb.action.SHARE");
}

void ApplicationUI::onFinished() {
	Invocation *invocation = qobject_cast<Invocation *>(sender());
	invocation->deleteLater();
}

 

 

applicationUI.hpp

 

namespace bb
{
    namespace cascades
    {
        class Application;
        class Invocation;
    }
}

 

public:
    ApplicationUI(bb::cascades::Application *app);
    virtual ~ApplicationUI() { }
Q_INVOKABLE void share(QString text);

 

public slots:
	Q_INVOKABLE void onFinished();
	Q_INVOKABLE void onArmed();

 

.qml

(this is where the context property gets used)

Button {
   text: "Share URL"
   onClicked: {
      cpp.share(myWebview.url);
   }
}

 

Developer
Tobster_
Posts: 270
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

Re: Cascades Radio Button, Title Bar, Drop Down Help

[ Edited ]

Thanks for sharing this! 

 

I'm wondering, where do I need to add this code, 

 

onTriggered {
   if (indexOf(activeTab) == 0){
                        navigationPane0.push(settingsPageDefinition.createObject());
                    } else if (indexOf(activeTab) == 1){
                        navigationPane1.push(settingsPageDefinition.createObject());
                    }

}

 Also, I have put everything in the correct files, but wherever I try to implement cpp.share(myWebview.url); a lightbulb appears in the sidebar saying "Unknown symbol 'cpp'" and that therefore prevents the share function from working, any ideas on where to go from this? 

 

Thanks again :smileyhappy:

Developer
slashkyle
Posts: 820
Registered: ‎10-16-2012
My Device: Red Z10

Re: Cascades Radio Button, Title Bar, Drop Down Help

you asked how to open a new page onTriggered in an action item (Menu)

 

for the cpp, you'll need a context property 

 

in your applicationUI.cpp look for where your qml document is created like this

 

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

 then add this on the next line

 

qml->setContextProperty("cpp", this);

 

 

Developer
Tobster_
Posts: 270
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

Re: Cascades Radio Button, Title Bar, Drop Down Help

Okay, so I have added all of that and the share function still doesn't work, it allows me to open the share card and then doesn't do anything afterwards. Also, I added this,

 

settingsAction: SettingsActionItem {
            onTriggered : if (indexOf(activeTab) == 0){
                navigationPane0.push(settingsPageDefinition.createObject());
            } else if (indexOf(activeTab) == 1){
                navigationPane1.push(settingsPageDefinition.createObject());
            }
        }

 and a lightbulb notification appears saying, "Unknown symbol 'settingspgaedefinition'", is there something else that I need to add to a file for the settings page to work? Thanks again :smileyhappy:

Developer
slashkyle
Posts: 820
Registered: ‎10-16-2012
My Device: Red Z10

Re: Cascades Radio Button, Title Bar, Drop Down Help

if the share function doesn't have any text this means you didn't properly link your webviews active url to what is being sent the c++ function.

 

you need the id of your webview + .url then insert it into the c++ function on a buttons onClicked or something

 

onClicked: {
   cpp.share(myWebView.url)
}

onClicked: {
     var currentURL = myWebView.url
     cpp.share(currentURL)
}

 If the first mehtod still doesnt work the second should 

 

settingspagedefnition is a ComponentDefintion which is an attached object as I demonstrated in my post above

Developer
Tobster_
Posts: 270
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C

Re: Cascades Radio Button, Title Bar, Drop Down Help

Okay, so the settings dropdown should look like this,

 

settingsAction: SettingsActionItem {
            onTriggered : if (indexOf(activeTab) == 0){
                navigationPane0.push(settingsPageDefinition.createObject());
            } else if (indexOf(activeTab) == 1){
                navigationPane1.push(settingsPageDefinition.createObject());
            }
            attachedObjects: [
            ComponentDefinition {
            id: settingsPageDefinition
            source: "eBayUS.qml"
            }
            ]
        }

 & the share function, like this,

 

InvokeActionItem {
                    ActionBar.placement: ActionBarPlacement.OnBar
                    title: "Share"
                    imageSource: "asset:///IMG/ic_share.png"
                    query {
                        mimeType: "text/plain"
                        invokeActionId: "bb.action.SHARE"
                    }
                    onTriggered: {
                        data = "Check out this item" + cpp.share(myid.url); + "Shared using the share button!";
                    }
                },

 Is that correct?

Developer
slashkyle
Posts: 820
Registered: ‎10-16-2012
My Device: Red Z10

Re: Cascades Radio Button, Title Bar, Drop Down Help

[ Edited ]

take attached objects out of the action item and put it in your tabbed pane.

 

just use an ActionItem, since c++ handles the invocation you just need to pass your url to it

 

actions: [
  ActionItem {
      id: shareAction
      title: "Share"
      onTriggered: {
           var textToShare = myid.url + "\nShared using the share button!"
           cpp.share(myid.url)
      }
   }
]

 the \n will simply put the following text on a new line for a cleaner look