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 Knowledge Base

Display Width and Height in QML

by Developer on ‎10-10-2013 08:33 AM (2,270 Views)

Symptoms

 

DisplayInfo class does not provide Q-properties nor Q_INVOKABLE member functions to access display information directly from QML.

Diagnosis

 

We need to develop a new class called DisplayInformation which instance is created in C++ code and passed to QML file as a context property.

Solution

 

First, we need to add the following line to our .mpro file to support device API:

 

LIBS += -lbbdevice

 

In the next step, we have to define our class called DisplayInformation which will be passed to the QML file. We first define a header file (DisplayInformation.hpp) that defines our class:

 

#ifndef DisplayInformation_HPP_
#define DisplayInformation_HPP_

#include <QObject>
#include <QString>
#include <bb/device/DisplayInfo>

namespace si
{
	namespace blackberrydev
	{
	    class DisplayInformation: public QObject
	    {
	        Q_OBJECT

public:
	        DisplayInformation();
	        ~DisplayInformation();

	        Q_PROPERTY(int displayWidth READ getDisplayWidth WRITE setDisplayWidth NOTIFY displayWidthChanged)
	        Q_PROPERTY(int displayHeight READ getDisplayHeight WRITE setDisplayHeight NOTIFY displayHeightChanged)

	        Q_INVOKABLE	int getDisplayWidth();
	        Q_INVOKABLE void setDisplayWidth(int);

	        Q_INVOKABLE int getDisplayHeight();
	        Q_INVOKABLE void setDisplayHeight(int);

signals:
	        void displayWidthChanged();
	        void displayHeightChanged();

private:
	        int displayWidth;
	        int displayHeight;

	    };
	}
}

#endif

 

The class is extending QObject and has two data members that are accessed via their public setter and getter functions. Those member functions are Q_INVOKABLE to be able to be called from QML. Additionally, we define Q_PROPERTY properties connected to setters, getters and signals. The last one is needed for value changes.

 

When the header file is done, a class has to be defined inside the DisplayInformation.cpp file:

 

#include "DisplayInformation.hpp"

namespace si
{
    namespace blackberrydev
    {
        DisplayInformation::DisplayInformation()
        {
            bb::device::DisplayInfo display;
            displayWidth = display.pixelSize().width();
            displayHeight = display.pixelSize().height();
        }

        DisplayInformation::~DisplayInformation()
        {
        }

        int DisplayInformation::getDisplayWidth()
        {
            return displayWidth;
        }

        void DisplayInformation::setDisplayWidth(int _displayWidth)
        {
            displayWidth = _displayWidth;
        }

        int DisplayInformation::getDisplayHeight()
        {
            return displayHeight;
        }

        void DisplayInformation::setDisplayHeight(int _displayHeight)
        {
            displayHeight = _displayHeight;
        }
    }
}

 

The constructor uses the bb:device:: DisplayInfo object to retrieve needed information for our instance of the DisplayInformation class.

 

Now we need to use this class in our demo called SystemInformation2Qml.

 

When we created the new demo project, we used an IDE's wizard, which has generated several files:

  • main.cpp,
  • SystemInformation2Qml.hpp,
  • SystemInformation2Qml.cpp, and
  • main.qml.

In the header file of SystemInformation2Qml.hpp we include the required library, add a private pointer to the instance of our DisplayInformation class and make our destructor non-virtual:

 

...
#include "DisplayInformation.hpp"
...
private:
    si:blackberrydev::DisplayInformation *displayInformation;
...

 

In the SystemInformation2Qml.cpp file we create an instance of DisplayInformation class and set it to a context property:

 

    displayInformation = new si::blackberrydev::DisplayInformation;
...
    qml->setContextProperty("display", displayInformation);
...

 

In a destructor we call delete displayInformation; to properly clean afterwards.

 

Finally, we use the display context property in our QML file to access the display's width and height:

  

import bb.cascades 1.0

Page 
{
    Container 
    {
        Label 
        {
            id: firstLabel
            text: qsTr("Width: " + display.displayWidth)
            translationX: display.displayWidth
		    animations: 
		        [
		            TranslateTransition
		            {
		                id: firstLabelTransition
		                toX: 0
		                duration: 3000
		                easingCurve: StockCurve.BounceOut
		            }
		        ]
            onCreationCompleted:
                {
                    firstLabelTransition.play();
                }
        }
        Label 
        {
            text: qsTr("Width: " + display.displayHeight)
        }
    }
}

 

Comments
by Developer
on ‎01-22-2015 09:22 AM

i see several issues with this:

- it does not deal with orientation changes

- it does not take the space into account that is taken by a titlebar (if any)

 

my suggestion would be to attach a LayoutUpdateHandler on the outmost Container and use that to update properties that are initialized with the display values.

Users Online
Currently online: 40 members 799 guests
Please welcome our newest community members: