×
Namespaces

Variants
Actions

Screen QML Component for MeeGo Harmattan

From Nokia Developer Wiki
Jump to: navigation, search

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

Article Metadata
Tested with
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)

Contents

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.

Meego screen 01.png Meego screen 02.png

This page was last modified on 13 June 2012, at 13:58.
43 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×