====== Layout basics ======

===== Element =====

  * Structures in the QML markup language are called **elements**.
  * Some elements are //visual// (e.g., images, shapes).
    * A visual element is an **Item**.
  * Some elements are //non-visual// (e.g., animations).

===== Item =====
  * The **Item** is the basis of all //visual// elements in Qt Quick.
  * Has no visual appearance itself.
  * Has definitions for properties that are common across visual items:
    * ''anchors'', ''clip'', ''width'', ''height'', ''opacity'', ''x'', ''y'', ''rotation'', ''scale'', ...
  * The following creates an Item of size 100 pixels by 100 pixels (but it shows nothing):
<file javascript item-example.qml>
import QtQuick 1.0

Item {
   width: 100
   height: 100
}
</file>
  * ''width'' and ''height'' are **properties**.
  * You can place multiple properties on the same line if you separate them with semicolons:
<code javascript>
Item {
   width: 100; height: 100
}
</code>

===== Rectangle =====
  * A **Rectangle** is an Item that is painted using a solid color and an optional border.
  * You can use the ''radius'' property to create rounded borders.
<file javascript rectangle-example.qml>
import QtQuick 1.0

Rectangle {
   width: 100
   height: 100
   color: "red"
   border.color: "black"
   border.width: 5
   radius: 10
}
</file>

===== Nesting Items =====
  * You can put Items inside other Items.
  * In the example below, a Rectangle is placed inside a regular (invisible) Item.
  * The ''anchors.fill: parent'' line says that the Rectangle should fill its parent (i.e., the Item).

<file javascript item-nested-example.qml>
import QtQuick 1.0 

Item {
   width: 100
   height: 100

   Rectangle {
      anchors.fill: parent
      color: "red"
      border.color: "black"
      border.width: 5
      radius: 10
   }
}</file>

===== Image =====
  * The **Image** element allows you to add a bitmap to a scene.
  * It is a good practice not to hardcode the image width and height. (Qt Quick will automatically do this job.)

<file javascript image-example-abs.qml>
import QtQuick 1.0

Item {
   width: 300
   height: 300

   Image {
       x: 30
       y: 40
       source:"images/spaceship.png"
   }
}</file>

  * The following is identical to the above except it uses //anchors// to place the image in the dead center of the enclosing Item:

<file javascript image-example.qml>
import QtQuick 1.0

Item {
   width: 300
   height: 300

   Image {
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter
       source:"images/spaceship.png"
   }
}</file>

===== Text and TextInput =====
  * **Text** and **TextInput** items allow you to add formatted texts to a scene.
  * Getting user input from TextInput will be covered later

<file javascript text-example.qml>
import QtQuick 1.0 

Item {
   width: 100
   height: 100

   Text {
      text: "Hello World!"
      font.family: "Helvetica"
      font.pixelSize: 14
      color: "blue"
      x: 0
      y: 0
   }
}</file>

<file javascript textinput-example.qml>
import QtQuick 1.0 

Item {
   width: 200
   height: 100

   Text {
      text: "Enter your name:"
      font.family: "Helvetica"
      font.pixelSize: 14
      color: "blue"
      x: 0
      y: 0
   }

   TextInput {
      text: "Default Text"
      font.family: "Helvetica"
      font.pixelSize: 14
      color: "red"
      x: 10
      y: 20
      focus: true
   }
}</file>

===== Naming things =====
  * Elements can be named using the ''id'' property.
  * You often need to name an element so you can refer to it from outside itself.

<code javascript>
...
   Text {
      id: myMessage
      text: "Hello World!"
      font.family: "Helvetica"
      font.pixelSize: 14
      color: "blue"
      x: 0
      y: 0
   }
   
   Image {
       id: spaceshipImage
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter
       source:"images/spaceship.png"
   }
...
</code>

--------------------------------------------------------------
====== Resources ======
  * {{:qt-quick-for-designers-1:images.zip|}}
  * All source code is subject to this [[copyright header|copyright]].