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: 193
Registered: ‎12-29-2010
My Device: Bold 9900
Accepted Solution

background color not working in the same file

I created a background property variant in my main.qml file and am trying to access it within the same file, but cannot. However i can access that property variant in OTHER qml files. What gives, any ideas? Here is my simplified main.qml file.

 

The error I get when declaring the background is: "Type mismatch of value of the 'background' property. Expecting Paint and found null"

 

However i can access that property variant in OTHER qml files.

 

TabbedPane {
    id: mainTabPage
    property variant appBackground: Color.create("#D2D5D5")
    
    Tab {
        id: tab1
        NavigationPane {
            id: navPane1
            Page {
                id: page1
                Container {
                    background: mainTabPage.appBackground // ERROR HERE
                }
            }
        }
    }

    Tab {
        id: tab2
        ....
    }
}

 

Developer
Posts: 193
Registered: ‎12-29-2010
My Device: Bold 9900

Re: background color not working in the same file

Never mind. Found the solution on my own. It's a good workaround, and less headache. You define the propertry varaint just for the HTML color hex as a string.

 

And then in your background, just create the color with that hex string as the parameter. Here is how :smileyvery-happy:

 

And then you can use that property variant hex string and change it in other sheets, like your Settings page.

 

Hope that helps.

 

TabbedPane {
    id: mainTabPage
    property variant appColorBackground: "#D2D5D5"
    
    Tab {
        id: tab1
        NavigationPane {
            id: navPane1
            Page {
                id: page1
                Container {
                    background: Color.create(appColorBackground)
                }
            }
        }
    }

    Tab {
        id: tab2
        ....
    }
}