import Qt 4.7
 
Rectangle {
  width: 300
  height: 200
  Text {
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    text: "Hello World"
  }
}

Text {
  id: label
  anchors.horizontalCenter: pic.horizontalCenter
  anchors.top: pic.bottom
  anchors.topMargin: 5
  ...
}

Rectangle {
  opacity: 0.5
  color: "red"
  width: 100; height: 100
  Rectangle {
    color: "blue"
    x: 50; y: 50; width: 100; height: 100
  }
}

import Qt 4.7Rectangle {
  color: "#ff0000"
  width: 310
  height: 210
  MouseArea {
      anchors.fill: parent
      onClicked: {
        if (parent.color == "#ff0000") {
          parent.color = "#ff9900";
        } else {
          parent.color = "#ff0000";
        }
      }
  }
  Rectangle {
    width: 300
    height: 200
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
 
    Text {
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.verticalCenter: parent.verticalCenter
      text: "Hello World"
    }
  }
}

id: buttonRect;
 
state: "red"
states:
  State {
    name: "red"
    when: mouseArea.pressed == true
    PropertyChanges {
      target: buttonRect;
      color: "red";
      width: 80; height: 40
    }
  },
  State {
    name: "orange"
    when: mouseArea.pressed == false
    PropertyChanges {
      target: buttonRect;
      color: "#ff9900";
      width: 120; height: 80
    }
  }

MouseArea {
  anchors.fill: parent
  onClicked: {
    if (parent.state == "red") {
      parent.state = "orange"
    } else {
      parent.state = "red";
    }
  }
}

import Qt 4.7
 
Column {
  spacing: 10
 
  Button { text: "Apple" }
  Button { text: "Orange" }
  Button { text: "Pear" }
  Button { text: "Grape" }

import Qt 4.7
 
Rectangle {
  property alias text: textItem.text
 
  width: 100; height: 30
  border.width: 1
  radius: 5
  smooth: true
 
  gradient: Gradient {
    GradientStop { position: 0.0; color: "darkGray" }
    GradientStop { position: 0.5; color: "black" }
    GradientStop { position: 1.0; color: "darkGray" }
  }
 
  Text {
    id: textItem
    anchors.centerIn: parent
    font.pointSize: 20
    color: "white"
  }
 
}

import Qt 4.7
 
Rectangle {
  id: rect
  width: 100; height: 100
  color: "red"
 
  states: State {
    name: "moved"
    PropertyChanges { target: rect; x: 50; y: 50 }
  }
 
  transitions: Transition {
    PropertyAnimation {
      properties: "x,y";
      easing.type: Easing.InOutQuad
    }
  }
}

Item {
  ...
  transitions:
    Transition { ... }
    Transition { ... }
   
}

import Qt 4.7
 
ListModel {
  ListElement {
    name: "Bill Jones"
    number: "+1 800 555 1212"
    icon: "pics/qtlogo.png"
  }
  ListElement {
    name: "Jane Doe"
    number: "+1 800 555 3434"
    icon: "pics/qtlogo.png"
  }
  ListElement {
    name: "John Smith"
    number: "+1 800 555 5656"
    icon: "pics/qtlogo.png"
  }
}

import Qt 4.7
 
ListView {
  width: 180; height: 200
 
  model: ContactModel {}
  delegate: Text {
    text: name + ": " + number
  }
}

import Qt 4.7
 
Rectangle {
  width: 240; height: 200
 
  Component {
    id: delegate
    Column {
      Image { anchors.horizontalCenter:
          name.horizontalCenter;
          width: 64; height: 64;
          source: icon
      }
      Text { text: name; font.pointSize: 16 }
    }
  }
 
  PathView {
    anchors.fill: parent
    model: ContactModel {}
    delegate: delegate
    path: Path {
      startX: 120; startY: 100
      PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
      PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
    }
  }
}

QGraphicsScene *scene = ...;
 
QDeclarativeEngine *engine = new QDeclarativeEngine;
QDeclarativeComponent component(engine, QUrl::fromLocalFile(...));
QGraphicsObject *object =
  qobject_cast<QGraphicsObject*>(component.create());
 
scene->addItem(object);

qWarning() << component.errors();

QGraphicsView *view = ...;
 
view->setOptimizationFlags(QGraphicsView::DontSavePainterState);
view->setViewportUpdateMode(
  QGraphicsView::BoundingRectViewportUpdate);
view->setItemIndexMethod(QGraphicsScene::NoIndex);

QDeclarativeContext *context = ...;
context->setContextProperty("frameColor", QColor(Qt::red));

Rectangle {
  border.color: frameColor
}

class MyInterface : ... {
  ...
  Q_PROPERTY(QAbstractItemModel *myModel READ model NOTIFY modelChanged)
  ...
};
 
MyInterface *myInterface = new MyInterface;
QDeclarativeEngine engine;
QDeclarativeContext *context = new
  QDeclarativeContext(engine.rootContext());
context->setContextObject(myDataSet);
QDeclarativeComponent component(&engine;);
component.setData("import Qt 4.7\nListView { model: myModel }", QUrl());
component.create(context);

QAbstractItemModel *model = ...;
context->setContextProperty("dataModel", model);

class CallableClass : public QObject
{
  Q_OBJECT
  ...
public slots:
  void cppMethod() { qDebug("C++ method called!"); }
};
 
...
 
context->setContextProperty("cppObject", new CallableClass);

MouseArea {
  ...
  onClicked: {
    cppObject.cppMethod();
  }
}

class CallableClass : public QObject
{
  Q_OBJECT
  ...
signals:
  void cppSignal();
};

Connections {
  target: cppObject
  onCppSignal: { console.log("QML function called!"); }
}

class Person : public QObject
{
  Q_OBJECT
  Q_PROPERTY(QString name READ name WRITE setName)
  Q_PROPERTY(int shoeSize READ shoeSize WRITE setShoeSize)
 
public:
  Person(QObject *parent = 0);
 
  QString name() const;
  void setName(const QString &);
 
  int shoeSize() const;
  void setShoeSize(int);
 
private:
  QString m_name;
  int m_shoeSize;
};

Person::Person(QObject *parent)
: QObject(parent), m_shoeSize(0)
{
}
 
QString Person::name() const
{
  return m_name;
}
 
void Person::setName(const QString &n)
{
  m_name = n;
}
 
int Person::shoeSize() const
{
  return m_shoeSize;
}
 
void Person::setShoeSize(int s)
{
  m_shoeSize = s;
}

import People 1.0
 
Person {
  name: "Bob Jones"
  shoeSize: 12
}