PySide QML Tutorial Advanced 1: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 17: Line 17:
This is defined by the main application file, ''samegame.qml'', which looks like this:
This is defined by the main application file, ''samegame.qml'', which looks like this:


<code><br />import QtQuick 1.0
<code>
import QtQuick 1.0


Rectangle {<br /> id: screen
Rectangle {
id: screen


width: 490; height: 720
width: 490; height: 720
Line 25: Line 27:
SystemPalette { id: activePalette }
SystemPalette { id: activePalette }


Item {<br /> width: parent.width<br /> anchors { top: parent.top; bottom: toolBar.top }
Item {
width: parent.width
anchors { top: parent.top; bottom: toolBar.top }


Image {<br /> id: background<br /> anchors.fill: parent<br /> source: &quot;../shared/pics/background.jpg&amp;quot;<br /> fillMode: Image.PreserveAspectCrop<br /> }<br /> }
Image {
id: background
anchors.fill: parent
source: "../shared/pics/background.jpg"
fillMode: Image.PreserveAspectCrop
}
}


Rectangle {<br /> id: toolBar<br /> width: parent.width; height: 30<br /> color: activePalette.window<br /> anchors.bottom: screen.bottom
Rectangle {
id: toolBar
width: parent.width; height: 30
color: activePalette.window
anchors.bottom: screen.bottom


Button {<br /> anchors { left: parent.left; verticalCenter: parent.verticalCenter }<br /> text: &quot;New Game&amp;quot;<br /> onClicked: console.log(&quot;This doesn't do anything yet…&quot;)<br /> }
Button {
anchors { left: parent.left; verticalCenter: parent.verticalCenter }
text: "New Game"
onClicked: console.log("This doesn't do anything yet…")
}


Text {<br /> id: score<br /> anchors { right: parent.right; verticalCenter: parent.verticalCenter }<br /> text: &quot;Score: Who knows?&quot;<br /> }<br /> }<br />}<br /></code>
Text {
id: score
anchors { right: parent.right; verticalCenter: parent.verticalCenter }
text: "Score: Who knows?"
}
}
}
</code>


This gives you a basic game window that includes the main canvas for the blocks, a “New Game” button and a score display.
This gives you a basic game window that includes the main canvas for the blocks, a “New Game” button and a score display.
Line 45: Line 70:
The ''Button'' item in the code above is defined in a separate component file named ''Button.qml''. To create a functional button, we use the QML elements Text and MouseArea inside a Rectangle. Here is the ''Button.qml'' code:
The ''Button'' item in the code above is defined in a separate component file named ''Button.qml''. To create a functional button, we use the QML elements Text and MouseArea inside a Rectangle. Here is the ''Button.qml'' code:


<code><br />import QtQuick 1.0
<code>
import QtQuick 1.0


Rectangle {<br /> id: container
Rectangle {
id: container


property string text: &quot;Button&amp;quot;
property string text: "Button"


signal clicked
signal clicked


width: buttonLabel.width + 20; height: buttonLabel.height + 5<br /> border { width: 1; color: Qt.darker(activePalette.button) }<br /> smooth: true<br /> radius: 8
width: buttonLabel.width + 20; height: buttonLabel.height + 5
border { width: 1; color: Qt.darker(activePalette.button) }
smooth: true
radius: 8


// color the button with a gradient<br /> gradient: Gradient {<br /> GradientStop {<br /> position: 0.0<br /> color: {<br /> if (mouseArea.pressed)<br /> return activePalette.dark<br /> else<br /> return activePalette.light<br /> }<br /> }<br /> GradientStop { position: 1.0; color: activePalette.button }<br /> }
// color the button with a gradient
gradient: Gradient {
GradientStop {
position: 0.0
color: {
if (mouseArea.pressed)
return activePalette.dark
else
return activePalette.light
}
}
GradientStop { position: 1.0; color: activePalette.button }
}


MouseArea {<br /> id: mouseArea<br /> anchors.fill: parent<br /> onClicked: container.clicked();<br /> }
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: container.clicked();
}


Text {<br /> id: buttonLabel<br /> anchors.centerIn: container<br /> color: activePalette.buttonText<br /> text: container.text<br /> }<br />}<br /></code>
Text {
id: buttonLabel
anchors.centerIn: container
color: activePalette.buttonText
text: container.text
}
}
</code>


This essentially defines a rectangle that contains text and can be clicked. The MouseArea has an ''onClicked()'' handler that is implemented to emit the ''clicked()'' signal of the ''container'' when the area is clicked.
This essentially defines a rectangle that contains text and can be clicked. The MouseArea has an ''onClicked()'' handler that is implemented to emit the ''clicked()'' signal of the ''container'' when the area is clicked.
Line 65: Line 118:
In ''Same Game'', the screen is filled with small blocks when the game begins. Each block is just an item that contains an image. The block code is defined in a separate ''Block.qml'' file:
In ''Same Game'', the screen is filled with small blocks when the game begins. Each block is just an item that contains an image. The block code is defined in a separate ''Block.qml'' file:


<code><br />import QtQuick 1.0
<code>
import QtQuick 1.0


Item {<br /> id: block
Item {
id: block


Image {<br /> id: img<br /> anchors.fill: parent<br /> source: &quot;../shared/pics/redStone.png&amp;quot;<br /> }<br />}<br /></code>
Image {
id: img
anchors.fill: parent
source: "../shared/pics/redStone.png"
}
}
</code>


At the moment, the block doesn’t do anything; it is just an image. As the tutorial progresses we will animate and give behaviors to the blocks. We have not added any code yet to create the blocks; we will do this in the next chapter.
At the moment, the block doesn’t do anything; it is just an image. As the tutorial progresses we will animate and give behaviors to the blocks. We have not added any code yet to create the blocks; we will do this in the next chapter.

Revision as of 09:50, 25 February 2015


PySide QML Advanced Tutorial 1: Creating the Game Canvas and Blocks

This tutorial walks step-by-step through the creation of a full application using QML. It assumes that you already know the basics of QML (for example, from reading the QML Basic Tutorial. In this tutorial we write a game, Same Game, based on the Same Game application included in the declarative demos directory, which looks like this:

We will cover concepts for producing a fully functioning application, including JavaScript integration, using QML States and Behaviors to manage components and enhance your interface, and storing persistent application data.

An understanding of JavaScript is helpful to understand parts of this tutorial, but if you don’t know JavaScript you can still get a feel for how you can integrate backend logic to create and control QML elements.

Creating the application screen

The first step is to create the basic QML items in your application.

To begin with, we create our Same Game application with a main screen like this:

This is defined by the main application file, samegame.qml, which looks like this:

import QtQuick 1.0

Rectangle {
 id: screen

width: 490; height: 720

SystemPalette { id: activePalette }

Item {
 width: parent.width
 anchors { top: parent.top; bottom: toolBar.top }

Image {
 id: background
 anchors.fill: parent
 source: "../shared/pics/background.jpg"
 fillMode: Image.PreserveAspectCrop
 }
 }

Rectangle {
 id: toolBar
 width: parent.width; height: 30
 color: activePalette.window
 anchors.bottom: screen.bottom

Button {
 anchors { left: parent.left; verticalCenter: parent.verticalCenter }
 text: "New Game"
 onClicked: console.log("This doesn't do anything yet…")
 }

Text {
 id: score
 anchors { right: parent.right; verticalCenter: parent.verticalCenter }
 text: "Score: Who knows?"
 }
 }
}

This gives you a basic game window that includes the main canvas for the blocks, a “New Game” button and a score display.

One item you may not recognize here is the SystemPalette item. This provides access to the Qt system palette and is used to give the button a more native look-and-feel.

Notice the anchors for the Item, Button and Text elements are set using group notation for readability.

Adding Button and Block components

The Button item in the code above is defined in a separate component file named Button.qml. To create a functional button, we use the QML elements Text and MouseArea inside a Rectangle. Here is the Button.qml code:

import QtQuick 1.0

Rectangle {
 id: container

property string text: "Button"

signal clicked

width: buttonLabel.width + 20; height: buttonLabel.height + 5
 border { width: 1; color: Qt.darker(activePalette.button) }
 smooth: true
 radius: 8

// color the button with a gradient
 gradient: Gradient {
 GradientStop {
 position: 0.0
 color: {
 if (mouseArea.pressed)
 return activePalette.dark
 else
 return activePalette.light
 }
 }
 GradientStop { position: 1.0; color: activePalette.button }
 }

MouseArea {
 id: mouseArea
 anchors.fill: parent
 onClicked: container.clicked();
 }

Text {
 id: buttonLabel
 anchors.centerIn: container
 color: activePalette.buttonText
 text: container.text
 }
}

This essentially defines a rectangle that contains text and can be clicked. The MouseArea has an onClicked() handler that is implemented to emit the clicked() signal of the container when the area is clicked.

In Same Game, the screen is filled with small blocks when the game begins. Each block is just an item that contains an image. The block code is defined in a separate Block.qml file:

import QtQuick 1.0

Item {
 id: block

Image {
 id: img
 anchors.fill: parent
 source: "../shared/pics/redStone.png"
 }
}

At the moment, the block doesn’t do anything; it is just an image. As the tutorial progresses we will animate and give behaviors to the blocks. We have not added any code yet to create the blocks; we will do this in the next chapter.

We have set the image to be the size of its parent Item using anchors.fill: parent. This means that when we dynamically create and resize the block items later on in the tutorial, the image will be scaled automatically to the correct size.

Notice the relative path for the Image element’s source property. This path is relative to the location of the file that contains the Image element. Alternatively, you could set the Image source to an absolute file path or a URL that contains an image.