Pop up screen with State and Transition

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

Article Metadata

---

Code Example

Source file: Media:ListviewQtQuick.zip

---

Tested with

SDK: Qt SDK 1.1.3

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)

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: 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