Screen QML Component for MeeGo Harmattan

Comments

(no comments yet)

Log in or Join to leave comments.

This article explains all the details about the new Screen Qt Quick Component for MeeGo-Harmattan

Article Metadata

---

Tested with

SDK: Qt SDK 1.1.3

Devices(s): N950

---

Compatibility

Platform(s): MeeGo Harmattan

---

Article

Keywords: Qt Quick Component for MeeGo Harmattan

Created: gaba88 (29 Sep 2011)

Last edited: hamishwillee (13 Jun 2012)

Introduction

This article introduces the new Screen Component for MeeGo-Harmattan Devices.

Screen is a very small but can be very important component. Screen simply gives user access to some device screen specific data like deviceHeight and deviceWidth.

Many more important properties are provided by Screen Element which are mentioned in section below.

Important Note :

Developer cannot use Screen Element Directly in their QML files, instead Screen QML Component can be used as screen context property.

Screen Properties

Following are the important properties provided by Screen Component:

• allowedOrientations
• Covered
• currentOrientation
• density
• displayCategory
• displayWidth
• displayHeight
• dpi
• keyboardOpen
• minimize
• orientationString
• rotation
• windowState

All the above mentioned properties are read only based on the value of these properties some action can be taken.

Possible Use Cases

• Screen has two important properties names displayHeight and displayWidth, which we can use to draw size of our UI components based on the screen size.

• second most important use case of Screen Component is with regard to making application more scalable, like if we want to show two different UI's to user based on the screen orientation we can use currentOrientation and allowedOrientation property to achieve this.

• Screen also has a property named covered, if your screen is covered this property will be true and developer can take certain actions based on the covered state.

• One more important property will the keyboardOpen property which can utilized for lots of use cases.

There can be many more use cases of this application but i have listed the important ones.

Simple Code Snippet to Show Use cases

Following is a simple qml code snippet which shows how we can read various values from this component.

import QtQuick 1.1 
import com.nokia.meego 1.0
Page {
    id:mainpage
    function forceOrientationLandScape(){
        if(screen.currentOrientation == Screen.Portrait){
            screen.allowedOrientations = Screen.Landscape
        }else if(screen.currentOrientation == Screen.Landscape){
            screen.allowedOrientations = Screen.Portrait
        }
    }
    Flickable{
        id:mainFlickable
        contentHeight: displayLabel.height+propertyButtonColumn.height+20
        contentWidth: mainpage.width
        flickableDirection: Flickable.VerticalFlick
        Label{
            id:displayLabel
            x:mainpage.x+40; y:mainpage.y+20
            width: mainpage.width; height: mainpage.height/10
            font.pixelSize: 30
         }
        ButtonColumn{
            id:propertyButtonColumn
            y:displayLabel.y+displayLabel.paintedHeight+30
            width: mainpage.width
            Button{
                text: "Screen Orientations"
                onClicked: {
                    displayLabel.text = screen.allowedOrientations
                }
            }
            Button{
                text:"Covered State"
                onClicked: {
                    displayLabel.text = screen.covered
                }
            }
            Button{
                text:"Current Orientation"
                onClicked: {
                    displayLabel.text = screen.currentOrientation
                }
            }
            Button{
                text:"Screen Density"
                onClicked: {
                    displayLabel.text = screen.density
                }
            }
            Button{
                text:"Display Category"
                onClicked: {
                    displayLabel.text = screen.displayCategory
                }
            }
            Button{
                text:"Display Height"
                onClicked: {
                    displayLabel.text = screen.displayHeight
                }
            }
            Button{
                text:"Display Width"
                onClicked: {
                    displayLabel.text = screen.displayWidth
                }
            }
            Button{
                text:"Display dpi"
                onClicked: {
                    displayLabel.text = screen.dpi
                }
            }
            Button{
                text:"Keyboard Open State"
                onClicked: {
                    displayLabel.text = screen.keyboardOpen
                }
            }
            Button{
                text:"Screen Minimize State"
                onClicked: {
                    displayLabel.text = screen.minimized
                }
            }
            Button{
                text:"Screen Orientation string"
                onClicked: {
                    displayLabel.text = screen.orientationString
                }
            }
            Button{
                text:"Screen Rotation State"
                onClicked: {
                    displayLabel.text = screen.rotation
                }
            }
            Button{
                text:"Screen WindowState"
                onClicked: {
                    displayLabel.text = screen.windowState
                }
            }
            Button{
                text:"Change Screen Orientation"
                onClicked: mainpage.forceOrientationLandScape()
            }
        }
    }
}

Screenshots

Below Screen Shots illustrates the component in a much better way.