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
Posts: 356
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK
Accepted Solution

Custom Active-frame

Hello, 

 

As some of you may know I've been developing an eBay application for BlackBerry 10 - originally with Webworks and now with Cascades. I want this to be the best option for BlackBerry 10 users when shopping on eBay so I am really dedicated to bringing features that customers have requested. 

 

There's two things that I want to include:

 

1) A custom active frame to display something like the user's most recent bids or their watch list

2) Using a QSetting to save the country option that has been selected from the titlebar. 

 

As I am using a webview to provide the main part of the application (as after research this seemed like the best option) I am not sure if I could have a custom active-frame to show a specific minimized page as it's just using a webview. 

 

In regards to saving the country that has been selected, here's my titlebar code:

 

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: au
                                    text: "Australia"
                                    value: "http://m.ebay.com.au"
                                    description: "$, AUD"
                                }
                                Option {
                                    id: ca
                                    text: "Canada"
                                    value: "http://m.ebay.ca"
                                    description: "$, CAD"
                                }
                                Option {
                                    id: de
                                    text: "Germany"
                                    value: "http://m.ebay.de"
                                    description: "€, EUR"
                                }
                                Option {
                                    id: fr
                                    text: "France"
                                    value: "http://m.ebay.fr"
                                    description: "€, EUR"
                                }
                                Option {
                                    id: it
                                    text: "Italy"
                                    value: "http://m.ebay.it"
                                    description: "€, EUR"
                                }
                                Option {
                                    id: uk
                                    text: "United Kingdom"
                                    value: "http://m.ebay.co.uk"
                                    selected: true
                                    description: "£, GBP"
                                }
                                Option {
                                    id: us
                                    text: "United States of America"
                                    value: "http://m.ebay.com"
                                    description: "$, USD"
                                }
                                onSelectedOptionChanged: {
                                    rt2.play()
                                    toggleExpanded.checked = false
                                    eBayUK.url = selectedValue
                                }
                                dividersVisible: true
                            }
                            indicatorVisibility: TitleBarExpandableAreaIndicatorVisibility.Hidden
                            expanded: toggleExpanded.checked
                            onExpandedChanged: {
                                toggleExpanded.checked = expanded
                                if (expanded) {
                                    page1.actionBarVisibility = ChromeVisibility.Hidden
                                } else {
                                    page1.actionBarVisibility = ChromeVisibility.Visible
                                }
                            }
                        }
                    }
                }

 Also, I'm not sure how this issue has arrisen, but the top two options (Australia & Canada) cannot been seen when using a Q device yet when using a Z device they appear just fine. 

 

I know I have to use QSettings to save the value for the country selector, but I'm not entirely sure how to implement it. 

 

So, if you could help with the active frame, as I'm currently using an image at the moment and that doesn't make it seem like a native application and using QSettings to save a value for the selected country then that'd be great! 

 

Thanks in advance Smiley Happy 

Developer
Posts: 16,842
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: Custom Active-frame

this should help:
https://developer.blackberry.com/native/documentation/cascades/ui/active_frames/

Basically you can create a qml file with whatever you like.

for qsettings you could check out this sample:
http://opensourcebb.com/help-resources/tutorials/item/377-simple-example-of-using-qsettings-in-casca...
you use it in c++, but you can expose custom methods to use it from qml as well.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Developer
Posts: 356
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Custom Active-frame

Thanks, but I'm still having difficulty working out the savevaluefor function on the titlebar dropdown. Also, I'm getting a thin black bar appear (where the progress indicator sits) even though I've set the opacity to 0, so I'm not sure what's going on there either 

Developer
Posts: 826
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: Custom Active-frame

for the progress indicator you could try setting the visibilty to false instead of changing the opacity

 

for the drop down something like this should save the chosen option

 

Page {
   TitleBar {
    id: titleBar
    onSelectedIndexChanged :{
        cpp.saveValueFor("titleBarSelection",selectedIndex)
    }
   }

   onCreationCompleted: {
      titleBar.selectedIndex = parseInt(cpp.getValueFor("titleBarSelection",""))
   }
}

 

Developer
Posts: 356
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Custom Active-frame

Setting visibility to false did get rid of the black line but also got rid of the progress indiactor itself. 

 

Also, I added the cpp.saveValueFor and the onCreationCompleted but it didn't seem to make any difference. So, then I removed the "selected: true" option on the UK option of the dropdown and ran it again, selected a different country, closed the app, re-opened it and it was still opening it as UK.

 

Not really sure what else to try out 

Highlighted
Developer
Posts: 16,842
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: Custom Active-frame

just to be sure: cpp refers to a c++ class, for example your main application or a class that is dedicated to storage.
See
https://developer.blackberry.com/native/documentation/cascades/dev/integrating_cpp_qml/

i would suggest that you add debugging code in your c++ method to see if it is called with the correct value and the value is stored in the QSettings.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Developer
Posts: 356
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Custom Active-frame

Hi Simon,

 

My cpp class is referring to the getValueFor function in my applicationui.cpp file - do I need to refer it to something else (a different cpp class)?

Developer
Posts: 826
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: Custom Active-frame

Simon meant you should add this to your c++ functions for getValueFor and saveValueFor

 

qDebug() << "Saving/Getting Value For " << value;

this will pop up in the console log whenever you run the function so you'll know if it worked.

 

you can also do this from qml to check what the return result was

 

myProperty = getValueFor("someValue","")
console.log("myProperty has value of: " + myProperty)
Developer
Posts: 356
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Custom Active-frame

I added that but nothing is coming up the log when I debug and when I run it. 

 

If it would be easier, I would just add a checkbox at the bottom of the list. If I was to do that, then it would just be a label saying "Save?" with a checkbox next to it; what would the code need to be to save the value of the option selected? As I can't get anything to work with just the titleBar dropdown itself 

Developer
Posts: 356
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Custom Active-frame

Jeremy Duke, from OSBB, helped me out and by adding this code it worked:

 

onSelectedOptionChanged: {
                                    rt2.play()
                                    toggleExpanded.checked = false
                                    eBayUK.url = selectedValue
                                    _app.saveValueFor("defaultUrl", radioGroup.selectedIndex)
                                }

                                onCreationCompleted: {
                                    radioGroup.selectedIndex = cpp.getValueFor("defaultUrl", 0)
                                    eBayUK.url = selectedValue
                                }
                            }