PySide QML Tutorial Basic 1: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
=PySide <span class="caps">QML</span> Basic Tutorial 1: Basic Types=
[[Category:LanguageBindings::PySide]]


This tutorial gives an introduction to <span class="caps">QML</span>, the mark up language for Qt Quick. It doesn’t cover everything; the emphasis is on teaching the key principles, and features are introduced as needed. Through the different steps of this tutorial we will learn about <span class="caps">QML</span> basic types, we will create our own <span class="caps">QML</span> component with properties and signals, and we will create a simple animation with the help of states and transitions.
= PySide QML Basic Tutorial 1: Basic Types =


This first program is a very simple “Hello world” example that introduces some basic <span class="caps">QML</span> concepts. The picture below is a screenshot of this program.
This tutorial gives an introduction to QML, the mark up language for Qt Quick. It doesn’t cover everything; the emphasis is on teaching the key principles, and features are introduced as needed. Through the different steps of this tutorial we will learn about QML basic types, we will create our own QML component with properties and signals, and we will create a simple animation with the help of states and transitions.


Here is the <span class="caps">QML</span> code for the application:
This first program is a very simple “Hello world” example that introduces some basic QML concepts. The picture below is a screenshot of this program.


==Walkthrough==
Here is the QML code for the application:


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


First, we need to import the types that we need for this example. Most <span class="caps">QML</span> files will import the built-in <span class="caps">QML</span> types (like Rectangle, Image, …) that come with Qt, using:
Rectangle {<br /> id: page<br /> width: 500; height: 200<br /> color: &quot;lightgray&amp;quot;


We declare a root element of type Rectangle. It is one of the basic building blocks you can use to create an application in <span class="caps">QML</span>. We give it an id to be able to refer to it later. In this case, we call it “page”. We also set the width, height and color properties. The Rectangle element contains many other properties (such as x and y), but these are left at their default values.
Text {<br /> id: helloText<br /> text: &quot;Hello world!&quot;<br /> y: 30<br /> anchors.horizontalCenter: page.horizontalCenter<br /> font.pointSize: 24; font.bold: true<br /> }<br />}<br /></code>


===Text element===
== Walkthrough ==
 
=== Import ===
 
First, we need to import the types that we need for this example. Most QML files will import the built-in QML types (like Rectangle, Image, …) that come with Qt, using:
 
<code><br />import QtQuick 1.0<br />Rectangle element
 
Rectangle {<br /> id: page<br /> width: 500; height: 200<br /> color: &quot;lightgray&amp;quot;<br /></code>
 
We declare a root element of type Rectangle. It is one of the basic building blocks you can use to create an application in QML. We give it an id to be able to refer to it later. In this case, we call it “page”. We also set the width, height and color properties. The Rectangle element contains many other properties (such as x and y), but these are left at their default values.
 
=== Text element ===


We add a Text element as a child of the root Rectangle element that displays the text ‘Hello world!’.
We add a Text element as a child of the root Rectangle element that displays the text ‘Hello world!’.
Line 25: Line 37:
The font.pointSize and font.bold properties are related to fonts and use the dot notation.
The font.pointSize and font.bold properties are related to fonts and use the dot notation.


===Viewing the example===
=== Viewing the example ===
 
To view what you have created, run the <span class="caps">QML</span> Viewer tool (located in the bin directory of your Qt installation) with your filename as the first argument. For example, to run the provided completed Tutorial 1 example from the install location, you would type:
 
===Categories:===


* [[:Category:LanguageBindings|LanguageBindings]]
To view what you have created, run the QML Viewer tool (located in the bin directory of your Qt installation) with your filename as the first argument. For example, to run the provided completed Tutorial 1 example from the install location, you would type:
** [[:Category:LanguageBindings::PySide|PySide]]

Revision as of 08:58, 24 February 2015


PySide QML Basic Tutorial 1: Basic Types

This tutorial gives an introduction to QML, the mark up language for Qt Quick. It doesn’t cover everything; the emphasis is on teaching the key principles, and features are introduced as needed. Through the different steps of this tutorial we will learn about QML basic types, we will create our own QML component with properties and signals, and we will create a simple animation with the help of states and transitions.

This first program is a very simple “Hello world” example that introduces some basic QML concepts. The picture below is a screenshot of this program.

Here is the QML code for the application: 

<br />import QtQuick 1.0

Rectangle {<br /> id: page<br /> width: 500; height: 200<br /> color: &quot;lightgray&amp;quot;

Text {<br /> id: helloText<br /> text: &quot;Hello world!&quot;<br /> y: 30<br /> anchors.horizontalCenter: page.horizontalCenter<br /> font.pointSize: 24; font.bold: true<br /> }<br />}<br />

Walkthrough

Import

First, we need to import the types that we need for this example. Most QML files will import the built-in QML types (like Rectangle, Image, …) that come with Qt, using: 

<br />import QtQuick 1.0<br />Rectangle element

Rectangle {<br /> id: page<br /> width: 500; height: 200<br /> color: &quot;lightgray&amp;quot;<br />

We declare a root element of type Rectangle. It is one of the basic building blocks you can use to create an application in QML. We give it an id to be able to refer to it later. In this case, we call it “page”. We also set the width, height and color properties. The Rectangle element contains many other properties (such as x and y), but these are left at their default values.

Text element

We add a Text element as a child of the root Rectangle element that displays the text ‘Hello world!’.

The y property is used to position the text vertically at 30 pixels from the top of its parent.

The anchors.horizontalCenter property refers to the horizontal center of an element. In this case, we specify that our text element should be horizontally centered in the page element.

The font.pointSize and font.bold properties are related to fonts and use the dot notation.

Viewing the example

To view what you have created, run the QML Viewer tool (located in the bin directory of your Qt installation) with your filename as the first argument. For example, to run the provided completed Tutorial 1 example from the install location, you would type:

Retrieved from "https://wiki.qt.io/index.php?title=PySide_QML_Tutorial_Basic_1&oldid=4078"