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

Posts: 41
Registered: ‎10-16-2012
My Device: Bold 9000
My Carrier: Telus
Accepted Solution

Background colour.

I created at least 10 custom components and several screens before I realized my black background colour didn't look to great with the cascades stock components.  When I needed to change my background colour I had to change it 20 times for each individual component and screen.  Is there a way to set a global custom colour I can reference from a qml? 

Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: Background colour.

There are several options, including a simple one. Just specify a color property on your root component, and reference it in the others.  Something like this should work:

// root component:

TabbedPane {  // or whatever
    id: root
    property variant myBackground: Color.create("#123456")

// in other components, e.g. MyCoolComponent.qml
Container {
    background: root.myBackground

// and so on...

There are restrictions on this approach, but you could start by trying it to see if it works for you.


Another fairly obvious approach would be to expose the value from C++ using a setContextProperty() call.  There should be dozens of examples of doing something like that, at least for other types of data.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Posts: 71
Registered: ‎09-19-2012
My Device: Z10 very soon
My Carrier: Play

Re: Background colour.


1. create a class in C++ and implement some Q_PROPERTY to get/set the backgorund color

2. register the class in main.cpp


qmlRegisterType<MyClass>("my.library", 1, 0, "MyClass");


3. attach object


import my.library 1.0





attachedObjects: [

                id: myclass
4. use in QML
background: myclass.getBackround()