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 Contributor
Posts: 7
Registered: ‎11-22-2010
My Device: Not Specified

Re: Correct way to get display width/height in QML?

Ah yes... you are correct - here's another post on from their site, confirming what you are saying... 

 

http://devblog.blackberry.com/2012/08/blackberry-10-screen-resolutions/

 

Chris

Developer
Posts: 296
Registered: ‎02-14-2012
My Device: BlackBerry Passport / Nokia N950
My Carrier: -

Re: Correct way to get display width/height in QML?


TheRain wrote:

Hi guys, appologies if this has been answered elsewhere, or if there is another better solution for this.  The solution I'm using is to get DisplayInfo via C++, grab the screen dimensions from that, and pass them in to my QML document.   Here's how to do that:

 

C++ Code:

 

#include <bb/device/DisplayInfo>
using namespace bb::device;

 

QmlDocument *qml = QmlDocument::create("asset:///main.qml");
qml->setParent(this);
	
DisplayInfo display;
int width = display.pixelSize().width();
int height = display.pixelSize().height();

QDeclarativePropertyMap* displayProperties = new QDeclarativePropertyMap;
displayProperties->insert("width", QVariant(width));
displayProperties->insert("height", QVariant(height));
	
qml->setContextProperty("DisplayInfo", displayProperties);

 Now a DisplayInfo object is accessible from QML like so:

 

ImageView{
    imageSource: "asset:///images/my_awesome_full_screen_image.png"
    preferredHeight: DisplayInfo.height
    preferredWidth: DisplayInfo.width
    scalingMethod: ScalingMethod.AspectFill
}

 


And don't forget to add LIBS += -lbbdevice in the .pro file Smiley Happy

 

Developer
Posts: 889
Registered: ‎08-31-2009
My Device: 9530, 9630, 9800, 8530, 9900, 9810, 9930, PlayBook, Dev Alpha
My Carrier: Verizon

Re: Correct way to get display width/height in QML?

that is an awful lot of code to write, just in order to get the screen height...


Read my thoughts on BlackBerry Development at news.ebscer.com
New Contributor
Posts: 9
Registered: ‎09-26-2012
My Device: Dev Alpha
My Carrier: Verizon

Re: Correct way to get display width/height in QML?

Exposing anything in QML that's not already exposed will take at least a similar amount of code.   I think it's likely some method will be added to Cascades to do this that won't require C++ in the future- if it's not already there and simply undocumented.

 

I heard a few complaints while at BB Jam about code examples having hard coded screen size values- I think it will likely be addressed eventually.

Highlighted
Developer
Posts: 284
Registered: ‎07-25-2008
My Device: Passport

Re: Correct way to get display width/height in QML?

I was one of the people making those complains.  Simply passing display info values like this isn't really a good solution either.  What we need is a way of doing property binding like everything else in QML, so that anything affected by those values will automatically update when they change.  (and they can change, due to rotation and sometimes virtual keyboard display)

 

Oh, and it should be built in, and referenced from any and all examples that have a reason to care.

New Contributor
Posts: 9
Registered: ‎09-26-2012
My Device: Dev Alpha
My Carrier: Verizon

Re: Correct way to get display width/height in QML?

Yah, agreed and I think you're right for seeing red flags in your head around this one. The solution I provided is just a hold over (hopefully). It could fairly easily be extended to take in to account orientation change though.
Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: Correct way to get display width/height in QML?

I take it nobody here has noticed the LayoutUpdateHandler yet?

 

import bb.cascades 1.0

Page {
    Container {
        Label {
            id: theLabel
        }

        attachedObjects: LayoutUpdateHandler {
            onLayoutFrameChanged: {
                theLabel.text = 'size ' + layoutFrame.width + " x " +
                    layoutFrame.height;
            }
        }
    }
}

 

Imagine a screenshot that reads: "size 768 x 1280" posted here...

 


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!
Developer
Posts: 889
Registered: ‎08-31-2009
My Device: 9530, 9630, 9800, 8530, 9900, 9810, 9930, PlayBook, Dev Alpha
My Carrier: Verizon

Re: Correct way to get display width/height in QML?

Using LayoutUpdateHandler is still a bit of a hack. (Although it has the advantage of being a hack that doesn't involve c++).

import bb.cascades 1.0 NavigationPane { id: navigationPane Page { id: mainPage Container { layout: DockLayout {} attachedObjects: [ LayoutUpdateHandler { id: layout } ] Label { id: textLabel setTextLabel() onTouch: { setTextLabel() } function setTextLabel() { textLabel.text = handler.layoutFrame.width } } } }
Also the above code will work for me once you touch the element, but instead displays '0' when you launch the app...

Read my thoughts on BlackBerry Development at news.ebscer.com
Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: Correct way to get display width/height in QML?

It's not working when you launch the app because initially the sizes are 0. Then the component gets laid out (layouted?) and the layoutFrameChanged signal is emitted, and if you pick that up you'll get the new size as soon as it's available.

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!
Developer
Posts: 281
Registered: ‎05-31-2012
My Device: Playbook
My Carrier: o2

Re: Correct way to get display width/height in QML?


peter9477 wrote:

I take it nobody here has noticed the LayoutUpdateHandler yet?

 

import bb.cascades 1.0

Page {
    Container {
        Label {
            id: theLabel
        }

        attachedObjects: LayoutUpdateHandler {
            onLayoutFrameChanged: {
                theLabel.text = 'size ' + layoutFrame.width + " x " +
                    layoutFrame.height;
            }
        }
    }
}

 

Imagine a screenshot that reads: "size 768 x 1280" posted here...

 


I think this is actually the best solution/hack until we get (maybe) some updates from BB

Plase "+Like" my post if it was helpful.