Doc: Added QML Syntax overview page. Modified landing page.

QML Syntax is to provide essential QML and JavaScript language info.

Task-number:#QTBUG-16071

2 files changed, 174 insertions, 13 deletions

diff --git a/doc/src/declarative/declarativeui.qdoc b/doc/src/declarative/declarativeui.qdoc
index b17d178..771a421 100644
--- a/doc/src/declarative/declarativeui.qdoc
+++ b/doc/src/declarative/declarativeui.qdoc
@@ -65,15 +65,17 @@ QML and the Qt Declarative Module separate the frontend UI logic from the backen
 
 \list
 \o \l{Intro to Qt Quick}{Introduction to Qt Quick}
-\o \l{Introduction to the QML language}{Introduction to the QML Language}
 \o \l{QML for Qt Programmers}{QML Programming for Qt Programmers}
 \o \l{Getting Started Programming with QML}
+
 \o \l{What's new in Qt Quick}{What's New in the Qt Quick Release}
+\o \l{QML Examples and Demos}
 \endlist
 
 \section1 QML Features
 
 \list
+\o \l{QML Syntax}
 \o \l{Property Binding}
 \o \l{Using QML Positioner and Repeater Items}{Component Layouts}
 \o \l{Anchor-based Layout in QML}{Anchor Layout}
@@ -113,6 +115,19 @@ QML and the Qt Declarative Module separate the frontend UI logic from the backen
 \o \l{Developing Qt Quick Applications}{Developing with Qt Creator}
 \endlist
 
+\section1 Reference
+
+\list
+\o \l{Introduction to the QML language}{QML Syntax}
+\o \l{QML Elements}
+\o \l{Qt Declarative Module}
+\o \l{QML Basic Types}{QML Data Types}
+\o \l{QML Coding Conventions}
+\o \l{Qt Creator Manual}
+\o \l{Programming with Qt}
+\o \l{http://doc.qt.nokia.com/qtmobility-1.1.0/index.html}{Qt Mobility Documentation}
+\endlist
+
 \section1 Architecture
 
 \list
@@ -126,18 +141,6 @@ QML and the Qt Declarative Module separate the frontend UI logic from the backen
 \o \l{Qt Declarative Module}
 \endlist
 
-\section1 Reference
-
-\list
-\o \l{QML Elements}
-\o \l{Qt Declarative Module}
-\o \l{QML Basic Types}{QML Data Types}
-\o \l{QML Coding Conventions}
-\o \l{Qt Creator Manual}
-\o \l{Programming with Qt}
-\o \l{http://doc.qt.nokia.com/qtmobility-1.1.0/index.html}{Qt Mobility Documentation}
-\endlist
-
 \section1 Examples
 
 \list
diff --git a/doc/src/declarative/qmlsyntax.qdoc b/doc/src/declarative/qmlsyntax.qdoc
new file mode 100644
index 0000000..4ff2437
--- /dev/null
+++ b/doc/src/declarative/qmlsyntax.qdoc
@@ -0,0 +1,158 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of this
+** file.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+\page qmlsyntax.html
+\title QML Syntax
+\ingroup QML Features
+\previouspage QML Features
+\contentspage QML Features
+
+\tableofcontents
+
+QML is a declarative language designed to describe the user interface of a
+program: both what it looks like, and how it behaves. In QML, a user
+interface is specified as a tree of objects with properties.
+
+This introduction is meant for those with little or no programming
+experience. JavaScript is used as a scripting language in QML, so you may want
+to learn a bit more about it (\l{Javascript Guide}) before diving
+deeper into QML. It's also helpful to have a basic understanding of other web
+technologies like HTML and CSS, but it's not required.
+
+\section1 Basic QML Syntax
+
+QML looks like this:
+
+\code
+import QtQuick 1.0
+
+Rectangle {
+    width: 200
+    height: 200
+    color: "blue"
+
+    Image {
+        source: "pics/logo.png"
+        anchors.centerIn: parent
+    }
+}
+\endcode
+
+Objects are specified by their type, followed by a pair of braces. Object
+types always begin with a capital letter. In the above example, there are
+two objects, a \l Rectangle, and an \l Image. Between the braces, we can specify
+information about the object, such as its properties.
+
+Properties are specified as \c {property: value}. In the above example, we
+can see the Image has a property named \c source, which has been assigned the
+value \c "pics/logo.png". The property and its value are separated by a colon.
+
+Properties can be specified one-per-line:
+
+\code
+Rectangle {
+    width: 100
+    height: 100
+}
+\endcode
+
+or you can put multiple properties on a single line:
+
+\code
+Rectangle { width: 100; height: 100 }
+\endcode
+
+When multiple property/value pairs are specified on a single line, they
+must be separated by a semicolon.
+
+The \c import statement imports the \c Qt \l{QML Modules}{module}, which contains all of the
+standard \l {QML Elements}. Without this import statement, the \l Rectangle
+and \l Image elements would not be available.
+
+\section1 Expressions
+
+In addition to assigning values to properties, you can also assign
+expressions written in JavaScript.
+
+\code
+Rotation {
+    angle: 360 * 3
+}
+\endcode
+
+These expressions can include references to other objects and properties, in which case
+a \e binding is established: when the value of the expression changes, the property the
+expression has been assigned to is automatically updated to that value.
+
+\code
+Item {
+    Text {
+        id: text1
+        text: "Hello World"
+    }
+    Text {
+        id: text2
+        text: text1.text
+    }
+}
+\endcode
+
+In the example above, the \c text2 object will display the same text as \c text1. If \c text1 is changed,
+\c text2 is automatically changed to the same value.
+
+Note that to refer to other objects, we use their \e id values. (See below for more
+information on the \e id property.)
+
+\section1 QML Comments
+
+Commenting in QML is similar to JavaScript.
+\list
+\o Single line comments start with // and finish at the end of the line.
+\o Multiline comments start with /* and finish with *\/
+\endlist
+
+\snippet doc/src/snippets/declarative/comments.qml 0
+
+Comments are ignored by the engine. They are useful for explaining what you
+are doing; for referring back to at a later date, or for others reading
+your QML files.
+
+Comments can also be used to prevent the execution of code, which is
+sometimes useful for tracking down problems.
+
+\code
+Text {
+    text: "Hello world!"
+    //opacity: 0.5
+}
+\endcode
+
+In the above example, the Text object will have normal opacity, since the
+line opacity: 0.5 has been turned into a comment.
+
+*/