Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui

14 files changed, 129 insertions, 115 deletions

diff --git a/src/declarative/extra/qmlnumberformatter.cpp b/src/declarative/extra/qmlnumberformatter.cpp
index 8772305..1549525 100644
--- a/src/declarative/extra/qmlnumberformatter.cpp
+++ b/src/declarative/extra/qmlnumberformatter.cpp
@@ -72,8 +72,8 @@ public:
 
     In the following example, the text element will display the text "1,234.57".
     \code
-    <NumberFormatter id="Formatter" number="1234.5678" format="##,##0.##"/>
-    <Text text="{Formatter.text}"/>
+    NumberFormatter { id: Formatter; number: 1234.5678; format: "##,##0.##" }
+    Text { text: Formatter.text }
     \endcode
 
     */
diff --git a/src/declarative/extra/qmlxmllistmodel.cpp b/src/declarative/extra/qmlxmllistmodel.cpp
index 91c8139..badc6fb 100644
--- a/src/declarative/extra/qmlxmllistmodel.cpp
+++ b/src/declarative/extra/qmlxmllistmodel.cpp
@@ -74,11 +74,14 @@ QML_DEFINE_TYPE(QmlXmlListModel, XmlListModel);
 
     The following is an example of a model containing news from a Yahoo RSS feed:
     \qml
-    <XmlListModel id="FeedModel" src="http://rss.news.yahoo.com/rss/oceania" query="doc($src)/rss/channel/item">
-        <Role name="title" query="title/string()"/>
-        <Role name="link" query="link/string()"/>
-        <Role name="description" query="description/string()" isCData="true"/>
-    </XmlListModel>
+    XmlListModel {
+        id: FeedModel
+        source: "http://rss.news.yahoo.com/rss/oceania"
+        query: "doc($src)/rss/channel/item"
+        Role { name: "title"; query: "title/string()" }
+        Role { name: "link"; query: "link/string()" }
+        Role { name: "description"; query: "description/string()"; isCData: true }
+    }
     \endqml
     \note The model is currently static, so the above is really just a snapshot of an RSS feed.
 */
@@ -343,7 +346,7 @@ void QmlXmlListModel::doSubquery(int index) const
                     s.replace(QLatin1String("&gt;"), QLatin1String(">"));
                     s.replace(QLatin1String("&amp;"), QLatin1String("&"));
                 }
-                resultList << s;
+                resultList << s.trimmed();
                 //qDebug() << s;
             }
             b.seek(0);
diff --git a/src/declarative/fx/qfxanimatedimageitem.cpp b/src/declarative/fx/qfxanimatedimageitem.cpp
index 8f930d5..5a495e9 100644
--- a/src/declarative/fx/qfxanimatedimageitem.cpp
+++ b/src/declarative/fx/qfxanimatedimageitem.cpp
@@ -67,11 +67,13 @@ QT_BEGIN_NAMESPACE
     \o \image animatedimageitem.gif
     \o
     \code
-<Item width="{anim.width}" height="{anim.height+8}">
-    <AnimatedImage id="anim" file="pics/games-anim.gif"/>
-    <Rect color="red" width="4" height="8" y="{anim.height}"
-        x="{(anim.width-width)*anim.currentFrame/(anim.frameCount-1)}"/>
-</Item>
+Item {
+    width: anim.width; height: anim.height+8
+    AnimatedImage { id: anim; source: "pics/games-anim.gif" }
+    Rect { color: "red"; width: 4; height: 8; y: anim.height
+        x: (anim.width-width)*anim.currentFrame/(anim.frameCount-1)
+    }
+}
     \endcode
     \endtable
 */
diff --git a/src/declarative/fx/qfxcomponentinstance.cpp b/src/declarative/fx/qfxcomponentinstance.cpp
index 5343f7d..5fb5466 100644
--- a/src/declarative/fx/qfxcomponentinstance.cpp
+++ b/src/declarative/fx/qfxcomponentinstance.cpp
@@ -61,13 +61,14 @@ QML_DEFINE_TYPE(QFxComponentInstance,ComponentInstance);
     \brief The ComponentInstance element allows you to instantiate a \l{qml-component.html} {Component}.
 
     \code
-    <Item>
-        <Component id="RedSquare">
-            <Rect color="red" width="10" height="10"/>
-        </Component>
+    Item {
+        Component {
+            id: RedSquare
+            Rect { color: "red"; width: 10; height: 10 }
+        }
 
-        <ComponentInstance component="{RedSquare}"/>
-    </Item>
+        ComponentInstance { component: RedSquare }
+    }
     \endcode
 */
 QFxComponentInstance::QFxComponentInstance(QFxItem *parent)
diff --git a/src/declarative/fx/qfxflickable.cpp b/src/declarative/fx/qfxflickable.cpp
index 671d65d..17e44e1 100644
--- a/src/declarative/fx/qfxflickable.cpp
+++ b/src/declarative/fx/qfxflickable.cpp
@@ -232,9 +232,10 @@ QML_DEFINE_TYPE(QFxFlickable,Flickable);
     Flickable places its children on a surface that can be dragged and flicked.
 
     \code
-    <Flickable width="200" height="200" viewportWidth="{image.width}" viewportHeight="{image.height}">
-        <Image id="image" file="bigimage.png"/>
-    </Flickable>
+    Flickable {
+        width: 200; height: 200; viewportWidth: image.width; viewportHeight: image.height
+        Image { id: image; source: "bigimage.png" }
+    }
     \endcode
 
     \image flickable.gif
@@ -257,9 +258,10 @@ QML_DEFINE_TYPE(QFxFlickable,Flickable);
     QFxFlickable allows its children to be dragged and flicked.
     
 \code
-<Flickable width="320" height="480" viewportWidth="{image.width}" viewportHeight="{image.height}">
-    <Image id="image" file="bigimage.png"/>
-</Flickable>
+Flickable {
+    width: 320; height: 480; viewportWidth: image.width; viewportHeight: image.height
+    Image { id: image; source: "bigimage.png" }
+}
 \endcode
 
     Note that QFxFlickable does not automatically clip its contents. If
@@ -475,9 +477,11 @@ bool QFxFlickable::isAtYBeginning() const
 
     These properties are typically used to draw a scrollbar, for example:
     \code
-    <Rect opacity="0.5" anchors.right="{MyListView.right-2}" width="6"
-            y="{MyListView.pageYPosition * MyListView.height}"
-            height="{MyListView.pageHeight * MyListView.height}"/>
+    Rect {
+        opacity: 0.5; anchors.right: MyListView.right-2; width: 6
+        y: MyListView.pageYPosition * MyListView.height
+        height: MyListView.pageHeight * MyListView.height
+    }
     \endcode
 */
 qreal QFxFlickable::pageWidth() const
@@ -879,9 +883,10 @@ void QFxFlickable::setOverShoot(bool o)
     should be set to the combined size of the items placed in the Flickable.
 
     \code
-    <Flickable width="320" height="480" viewportWidth="{image.width}" viewportHeight="{image.height}">
-        <Image id="image" file="bigimage.png"/>
-    </Flickable>
+    Flickable {
+        width: 320; height: 480; viewportWidth: image.width; viewportHeight: image.height
+        Image { id: image; source: "bigimage.png" }
+    }
     \endcode
 */
 
diff --git a/src/declarative/fx/qfxkeyactions.cpp b/src/declarative/fx/qfxkeyactions.cpp
index d2739ea..52a013a 100644
--- a/src/declarative/fx/qfxkeyactions.cpp
+++ b/src/declarative/fx/qfxkeyactions.cpp
@@ -245,7 +245,7 @@ void QFxKeyActions::setEnabled(bool e)
 
     The following example sets actions for the 'c' and 'x' keys.
     \code
-    <KeyActions keyC="print('c is for cookie')" keyX="print('I like cookies')" />
+    KeyActions { keyC: "print('c is for cookie')"; keyX: "print('I like cookies')" }
     \endcode
 */
 QString QFxKeyActions::key_A() const
@@ -519,7 +519,7 @@ void QFxKeyActions::setKey_Z(const QString &s)
 
     The following example sets actions for the left and right arrow keys.
     \code
-    <KeyActions leftArrow="print('You pressed left')" rightArrow="print('You pressed right')" />
+    KeyActions { leftArrow: "print('You pressed left')"; rightArrow: "print('You pressed right')" }
     \endcode
 */
 
@@ -570,7 +570,7 @@ void QFxKeyActions::setKey_Down(const QString &s)
 
     The following example sets actions for the '5' and '6' keys.
     \code
-    <KeyActions digit5="print('5 is a prime number')" digit6="print('6 is a composite number')" />
+    KeyActions { digit5: "print('5 is a prime number')"; digit6: "print('6 is a composite number')"; focus: true }
     \endcode
 */
 
@@ -745,7 +745,7 @@ void QFxKeyActions::setKey_Space(const QString &s)
 
     The following example sets an action for the space key.
     \code
-    <KeyActions space="print('Space pressed')" />
+    KeyActions { space: "print('Space pressed')" }
     \endcode
 */
 
@@ -766,7 +766,7 @@ void QFxKeyActions::setKey_Space(const QString &s)
 
     The following example sets an action for the hangup key.
     \code
-    <KeyActions hangup="print('Go away now')" />
+    KeyActions { hangup: "print('Go away now')" }
     \endcode
 */
 
diff --git a/src/declarative/fx/qfxmouseregion.cpp b/src/declarative/fx/qfxmouseregion.cpp
index d197c9a..3b318e3 100644
--- a/src/declarative/fx/qfxmouseregion.cpp
+++ b/src/declarative/fx/qfxmouseregion.cpp
@@ -148,12 +148,11 @@ void QFxDrag::setYmax(int m)
     \brief The MouseRegion element enables simple mouse handling.
     \inherits Item
 
-    A MouseRegion is typically used in conjunction with a visible element, where the MouseRegion effectively 'proxies' mouse handling for that element. For example, we can put a MouseRegion in a Rect that changes the Rect color to red when clicked:
-    \code
-    <Rect width="100" height="100">
-        <MouseRegion anchors.fill="{parent}" onClick="parent.color = 'red';"/>
-    </Rect>
-    \endcode
+    A MouseRegion is typically used in conjunction with a visible element,
+    where the MouseRegion effectively 'proxies' mouse handling for that
+    element. For example, we can put a MouseRegion in a Rect that changes
+    the Rect color to red when clicked:
+    \snippet doc/src/snippets/declarative/mouseregion.qml 0
 
     Many MouseRegion signals pass a \l {MouseEvent}{mouse} parameter that contains
     additional information about the mouse event, such as the position, button,
@@ -161,11 +160,7 @@ void QFxDrag::setYmax(int m)
 
     Below we have the previous
     example extended so as to give a different color when you right click.
-    \code
-    <Rect width="100" height="100">
-        <MouseRegion anchors.fill="{parent}" onClick="if (mouse.button==Qt.RightButton) { parent.color='blue';} else { parent.color = 'red';}"/>
-    </Rect>
-    \endcode
+    \snippet doc/src/snippets/declarative/mouseregion.qml 1
 
     For basic key handling, see \l KeyActions.
 
@@ -578,19 +573,8 @@ QFxDrag *QFxMouseRegion::drag()
     \i the min and max properties limit how far the target can be dragged along the corresponding axes.
     \endlist
 
-    The following example uses drag to blur an image as it moves to the right:
-    \code
-    <Item id="blurtest" width="600" height="200">
-        <Image id="pic" file="pic.png" anchors.verticalCenter="{parent.verticalCenter}" >
-            <filter><Blur radius="{pic.x/10}"/></filter>
-            <MouseRegion anchors.fill="{parent}"
-                        drag.target="{pic}"
-                        drag.axis="x"
-                        drag.xmin="0"
-                        drag.xmax="{blurtest.width-pic.width}" />
-        </Image>
-    </Item>
-    \endcode
+    The following example uses drag to reduce the opacity of an image as it moves to the right:
+    \snippet doc/src/snippets/declarative/drag.qml 0
 */
 
 QT_END_NAMESPACE
diff --git a/src/declarative/fx/qfxrect.cpp b/src/declarative/fx/qfxrect.cpp
index 2bfc149..8aaddba 100644
--- a/src/declarative/fx/qfxrect.cpp
+++ b/src/declarative/fx/qfxrect.cpp
@@ -54,7 +54,7 @@ QML_DEFINE_TYPE(QFxPen,Pen);
 
     Example:
     \code
-    <Rect pen.width="2" pen.color="red".../>
+    Rect { pen.width: 2; pen.color: "red" ... }
     \endcode
 */
 
@@ -73,11 +73,11 @@ QML_DEFINE_TYPE(QFxPen,Pen);
     or as an \l {http://www.w3.org/TR/SVG/types.html#ColorKeywords}{SVG color keyword name}
      (as defined by the World Wide Web Consortium). For example:
     \code
-    <!-- rect with green border using hexidecimal notation -->
-    <Rect pen.color="#00FF00" .../>
+    // rect with green border using hexidecimal notation
+    Rect { pen.color: "#00FF00" }
 
-    <!-- rect with steelblue border using SVG color name-->
-    <Rect pen.color="steelblue" .../>
+    // rect with steelblue border using SVG color name
+    Rect { pen.color: "steelblue" }
     \endcode
 
     For the full set of ways to specify color, see Qt's QColor::setNamedColor documentation.
@@ -102,7 +102,7 @@ QML_DEFINE_TYPE(QFxRect,Rect);
     A Rect is painted having a solid fill (color) and an optional border (pen). You can also create rounded rectangles using the radius property.
 
     \code
-    <Rect width="100" height="100" color="red" pen.color="black" pen.width="5" radius="10"/>
+    Rect { width: 100; height: 100; color: "red"; pen.color: "black"; pen.width: 5; radius: 10 }
     \endcode
 
     \image declarative-rect.png
@@ -116,7 +116,7 @@ QML_DEFINE_TYPE(QFxRect,Rect);
     A Rect is painted having a solid fill (color) and an optional border (pen). You can also create rounded rectangles using the radius property.
 
     \code
-    <Rect width="100" height="100" color="red" pen.color="black" pen.width="5" radius="10"/>
+    Rect { width: 100; height: 100; color: "red"; pen.color: "black"; pen.width: 5; radius: 10 }
     \endcode
 
     \image declarative-rect.png
@@ -217,11 +217,11 @@ void QFxRect::dump(int depth)
     This property holds the color used to fill the rect.
 
     \code
-    <!-- green rect using hexidecimal notation -->
-    <Rect color="#00FF00" .../>
+    // green rect using hexidecimal notation
+    Rect { color: "#00FF00" }
 
-    <!-- steelblue rect using SVG color name-->
-    <Rect color="steelblue" .../>
+    // steelblue rect using SVG color name
+    Rect { color: "steelblue" }
     \endcode
 */
 
@@ -260,8 +260,8 @@ void QFxRect::setColor(const QColor &c)
     This color will be drawn over the rect's color when the rect is painted. The tint color should usually be mostly transparent, or you will not be able to see the underlying color. The below example provides a slight red tint by having the tint color be pure red which is only 1/16th opaque.
 
     \code
-    <Rect x="0" width="80" height="80" color="lightsteelblue"/>
-    <Rect x="100" width="80" height="80" color="lightsteelblue" tintColor="#10FF0000"/>
+    Rect { x: 0; width: 80; height: 80; color: "lightsteelblue" }
+    Rect { x: 100; width: 80; height: 80; color: "lightsteelblue"; tintColor: "#10FF0000" }
     \endcode
     \image declarative-rect_tint.png
 
@@ -321,11 +321,11 @@ QColor QFxRectPrivate::getColor()
     This property allows for the easy construction of simple horizontal gradients. Other gradients may by formed by adding rotation to the rect. The gradient will blend linearly from the rect's main color to the color specified for gradient color.
 
     \code
-    <Rect y="0" width="80" height="80" color="lightsteelblue"/>
-    <Rect y="100" width="80" height="80" color="lightsteelblue" gradientColor="blue"/>
-    <Rect rotation="90" x="80" y="200" width="80" height="80" color="lightsteelblue"
-        gradientColor="blue"/>
-    <!-- The x offset is needed because the rotation is from the top left corner -->
+    Rect { y: 0; width: 80; height: 80; color: "lightsteelblue" }
+    Rect { y: 100; width: 80; height: 80; color: "lightsteelblue"; gradientColor="blue" }
+    Rect { rotation: 90; x: 80; y: 200; width: 80; height: 80; color="lightsteelblue"
+            gradientColor: "blue" }
+    // The x offset is needed because the rotation is from the top left corner
     \endcode
     \image declarative-rect_gradient.png
 */
diff --git a/src/declarative/fx/qfxrepeater.cpp b/src/declarative/fx/qfxrepeater.cpp
index 7ee949d..f9fc878 100644
--- a/src/declarative/fx/qfxrepeater.cpp
+++ b/src/declarative/fx/qfxrepeater.cpp
@@ -99,14 +99,9 @@ QML_DEFINE_TYPE(QFxRepeater,Repeater);
     the instantiated items would visually appear stacked between the red and 
     blue rectangles.
 
-    \code
-    <Item>
-        <Rect width="100" height="100" color="red" />
-        <Repeater ...repeater arguments... />
-        <!-- Instantiated items would appear here -->
-        <Rect width="100" height="100" color="blue" />
-    </Item>
-    \endcode
+    \snippet doc/src/snippets/declarative/repeater.qml 0
+
+    \image repeater.png
 
     The repeater instance continues to own all items it instantiates, even
     if they are otherwise manipulated.  It is illegal to manually remove an item
@@ -144,14 +139,7 @@ QML_DEFINE_TYPE(QFxRepeater,Repeater);
     the instantiated items would visually appear stacked between the red and 
     blue rectangles.
 
-    \code
-    <Item>
-        <Rect width="100" height="100" color="red" />
-        <Repeater ...repeater arguments... />
-        <!-- Instantiated items would appear here -->
-        <Rect width="100" height="100" color="blue" />
-    </Item>
-    \endcode
+    \snippet doc/src/snippets/declarative/repeater.qml 0
 
     The QFxRepeater instance continues to own all items it instantiates, even
     if they are otherwise manipulated.  It is illegal to manually delete an item
@@ -191,6 +179,17 @@ QFxRepeater::~QFxRepeater()
     \qmlproperty any Repeater::dataSource
 
     The Repeater's data source.
+
+    The data source may be either an object list, a string list or a Qt model.
+    In each case, the data element and the index is exposed to each instantiated
+    component.  The index is always exposed as an accessible \c index property.
+    In the case of an object or string list, the data element (of type string
+    or object) is available as the \c modelData property.  In the case of a Qt model,
+    all roles are available as named properties just like in the view classes.
+
+    As a special case the data source can also be merely a number. In this case it will
+    create that many instances of the component. They will also be assigned an index
+    based on the order they are created.
 */
 
 /*!
diff --git a/src/declarative/fx/qfxwebview.cpp b/src/declarative/fx/qfxwebview.cpp
index fe694ea..eb2f7d2 100644
--- a/src/declarative/fx/qfxwebview.cpp
+++ b/src/declarative/fx/qfxwebview.cpp
@@ -106,6 +106,8 @@ class QFxWebSettings : public QObject {
     Q_PROPERTY(bool offlineWebApplicationCacheEnabled READ offlineWebApplicationCacheEnabled WRITE setOfflineWebApplicationCacheEnabled)
     Q_PROPERTY(bool localStorageDatabaseEnabled READ localStorageDatabaseEnabled WRITE setLocalStorageDatabaseEnabled)
 
+    Q_PROPERTY(QString userStyleSheetUrl READ userStyleSheetUrl WRITE setUserStyleSheetUrl)
+
 public:
     QFxWebSettings() {}
 
@@ -138,6 +140,9 @@ public:
     bool localStorageDatabaseEnabled() const { return s->testAttribute(QWebSettings::LocalStorageDatabaseEnabled); }
     void setLocalStorageDatabaseEnabled(bool on) { s->setAttribute(QWebSettings::LocalStorageDatabaseEnabled, on); }
 
+    QString userStyleSheetUrl() const { return s->userStyleSheetUrl(); }
+    void setUserStyleSheetUrl(const QString& url) { s->setUserStyleSheetUrl(url); }
+
     QWebSettings *s;
 };
 
@@ -951,6 +956,21 @@ QWebPage *QFxWebView::page() const
 }
 
 // The QObject interface to settings().
+/*!
+    \qmlproperty QWebSettings WebView::settings
+
+    This property gives access to the settings controlling the web view.
+
+    See QWebSettings for the list of sub-properties.
+
+    \code
+        WebView {
+            settings.pluginsEnabled: true
+            settings.userStyleSheetUrl: "mystyle.css"
+            ...
+        }
+    \endcode
+*/
 QObject *QFxWebView::settingsObject() const
 {
     Q_D(const QFxWebView);
diff --git a/src/declarative/util/qbindablemap.cpp b/src/declarative/util/qbindablemap.cpp
index 341dd31..c8c8ced 100644
--- a/src/declarative/util/qbindablemap.cpp
+++ b/src/declarative/util/qbindablemap.cpp
@@ -87,8 +87,8 @@ private:
 
     Then, in QML:
     \code
-    <Text text="{owner.name}"/>
-    <Text text="{owner.phone}"/>
+    Text { text: owner.name }
+    Text { text: owner.phone }
     \endcode
 
     The binding is dynamic - whenever a key's value is updated, anything bound to that
diff --git a/src/declarative/util/qmlbind.cpp b/src/declarative/util/qmlbind.cpp
index 3b51c6a..59bfd75 100644
--- a/src/declarative/util/qmlbind.cpp
+++ b/src/declarative/util/qmlbind.cpp
@@ -77,8 +77,8 @@ QML_DEFINE_TYPE(QmlBind,Bind);
     property into QML.  You could use Bind to update the enteredText property 
     like this.
     \code
-    <TextEdit id="myTextField" text="Please type here..." />
-    <Bind target="{app}" property="enteredText" value="{myTextField.text}" />
+    TextEdit { id: myTextField; text: "Please type here..." }
+    Bind { target: app; property: "enteredText"; value: myTextField.text />
     \endcode
     Whenever the text in the TextEdit is updated, the C++ property will be
     updated also.
diff --git a/src/declarative/util/qmldatetimeformatter.cpp b/src/declarative/util/qmldatetimeformatter.cpp
index efddd81..94b87ee 100644
--- a/src/declarative/util/qmldatetimeformatter.cpp
+++ b/src/declarative/util/qmldatetimeformatter.cpp
@@ -74,8 +74,8 @@ public:
     \brief The DateTimeFormatter allows you to control the format of a date string.
 
     \code
-    <DateTimeFormatter id="Formatter" date="{System.date}"/>
-    <Text text="{Formatter.dateText}"/>
+    DateTimeFormatter { id: Formatter; date: System.date }
+    Text { text: Formatter.dateText }
     \endcode
 
     By default, the text properties (dateText, timeText, and dateTimeText) will return the
@@ -110,18 +110,18 @@ QmlDateTimeFormatter::~QmlDateTimeFormatter()
     will use the system locale's default 'short' setting.
 
     \code
-    <!-- specify source date (assuming today is February 19, 2009) -->
-    <DateTimeFormatter id="formatter" dateTime="{Today.date}"/>
+    // specify source date (assuming today is February 19, 2009)
+    DateTimeFormatter { id: formatter; dateTime: Today.date }
 
-    <!-- display the full date and time -->
-    <Text text="{formatter.dateText}"/>
+    // display the full date and time
+    Text { text: formatter.dateText }
     \endcode
 
     Would be equivalent to the following for a US English locale:
 
     \code
-    <!-- display the date -->
-    <Text text="2/19/09"/>
+    // display the date
+    Text { text: "2/19/09" }
     \endcode
 */
 QString QmlDateTimeFormatter::dateTimeText() const
@@ -150,14 +150,14 @@ QString QmlDateTimeFormatter::timeText() const
     The source date and time to be used by the formatter.
 
     \code
-    <!-- setting the date and time -->
-    <DateTimeFormatter date="{System.date}" time="{System.time}"/>
+    // setting the date and time
+    DateTimeFormatter { date: System.date; time: System.time }
     \endcode
 
     For convienience it is possible to set the datetime property to set both the date and the time.
     \code
-    <!-- setting the datetime -->
-    <DateTimeFormatter dateTime="{System.dateTime}"/>
+    // setting the datetime
+    DateTimeFormatter { dateTime: System.dateTime }
     \endcode
 
     There can only be one instance of date and time per formatter; if date, time, and dateTime are all
@@ -208,8 +208,8 @@ QDateTime QmlDateTimeFormatter::dateTime() const
     Syntax for the format is based on the QDateTime::toString() formatting options.
 
     \code
-    <!-- Format the date such that the dateText is: '1997-12-12'>
-    <DateFormatter id="formatter" dateTime="{Today.dateTime}" formatDate="yyyy-MM-d"/>
+    // Format the date such that the dateText is: '1997-12-12'
+    DateTimeFormatter { id: formatter; dateTime: Today.dateTime; formatDate: "yyyy-MM-d" }
     \endcode
 
     Assigning an empty string to a particular format will reset it.
diff --git a/src/declarative/util/qmlscript.cpp b/src/declarative/util/qmlscript.cpp
index 757ae09..7e33502 100644
--- a/src/declarative/util/qmlscript.cpp
+++ b/src/declarative/util/qmlscript.cpp
@@ -85,13 +85,13 @@ public:
     within a QmlScript, it is best to limit yourself to defining functions.
 
     \qml
-    <Script>
+    Script {
         function debugMyComponent() {
             print(text.text);
             print(otherinterestingitem.property);
         }
-    </Script>
-    <MouseRegion onClicked="debugMyComponent()" />
+    }
+    MouseRegion { onClicked: debugMyComponent() }
     \endqml
 
     \note QmlScript executes JavaScript as soon as it is specified.