×
Namespaces

Variants
Actions

Pop up screen with State and Transition

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to create a pop up screen with State and Transition .

Article Metadata
Code ExampleTested with
Devices(s): N950/N9
Compatibility
Platform(s): MeeGo/Qt 4.7
Article
Keywords: Pop up window
Created: somnathbanik (22 Sep 2011)
Last edited: hamishwillee (11 Oct 2012)

Contents

Introduction

The State element of an object defines the configuration and property of the object. All item has a default state that defines the default configuration of objects and property values. On the other hand the Transition element defines animated transitions that occur on state changes. A Transition defines the animations to be applied when a State change occurs.

Basic Idea

In this article first we will display the Flickr content in a list view from Flickr API. Once user clicks on the any of the Flickr item it will display the image details in a pop up window. This pop up screen has an initial scale value to 0 and state to false. When user clicks on the list item, it changes its state to true and scale value to 1 with an easing effect of 500 millisecond. Thus user can see a pop up window emerged from the middle of the screen with image details.

Flickr List View
Flickr Detail in Pop up screen

Note.pngNote: Here we will not discuss how to create the List View with the Flickr API, its pretty similar like the other list view. For more information you can refer to the source code. We will straight way jump on to the Click Even to display the pop up screen.

Implementation

  • We parse the Flickr API and display the content in List View.
  • In main.qml we create an Item (stepsNewWindow) of scale: 0.0 and assign a boolean property (inStepNewWindow) to false as its state.
property bool inStepNewWindow: false
  • Item(stepsNewWindow) changes its property to scale: 1 when its state (inStepNewWindow) is true , with an easing effect of 500 millisecond duration
states:
State {
name: "Rectangle"; when: mainwindow.inStepNewWindow == true
PropertyChanges { target: stepsNewWindowRect; x: 0 }
PropertyChanges { target: stepsNewWindow; scale: 1 }
}
transitions: Transition {
NumberAnimation { properties: "x,scale"; duration: 500; easing.type: Easing.InOutQuad }
}
  • In NewsDelegate.qml when user clicks on any of the Flickr item, it passes the Flickr details to the pop up screen variables and makes the state to true, which changes the property of the Item(stepsNewWindow) to scale 1. And thus a pop up window comes up with the content detail.
MouseArea {
anchors.fill: parent
onClicked:{
mainwindow.inStepNewWindow = true;
stepsNewWindowRect.visible = true;
stepsNewWindowText.text = "Title:" +title + "\n"+ "Author:"+photoAuthor + "\n" + "Date:"+photoDate + "\n" +"Type:"+ photoType;
imageDetail.source = imagePath;
imageDescription.text = description;
}
}


Source Code

The full source code of the example is available here: File:ListviewQtQuick.zip

This page was last modified on 11 October 2012, at 04:20.
55 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.

×