From bfaf510408a95d95e1540be1a1f522a0ebfe0eff Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Wed, 29 Apr 2009 13:09:39 +1000
Subject: Fix plugin delayed loading. Allows settings from QML.

---
 src/declarative/fx/qfxwebview.cpp | 83 +++++++++++++++++++++++++++++++++++++--
 src/declarative/fx/qfxwebview.h   |  3 ++
 2 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/src/declarative/fx/qfxwebview.cpp b/src/declarative/fx/qfxwebview.cpp
index 293c72b..8af4158 100644
--- a/src/declarative/fx/qfxwebview.cpp
+++ b/src/declarative/fx/qfxwebview.cpp
@@ -75,6 +75,73 @@ QML_DEFINE_TYPE(QFxWebView,WebView);
 
 static const int MAX_DOUBLECLICK_TIME=500; // XXX need better gesture system
 
+class QFxWebSettings : public QObject {
+    Q_OBJECT
+    /*
+        StandardFont,
+        FixedFont,
+        SerifFont,
+        SansSerifFont,
+        CursiveFont,
+        FantasyFont
+
+        MinimumFontSize,
+        MinimumLogicalFontSize,
+        DefaultFontSize,
+        DefaultFixedFontSize
+    */
+
+    Q_PROPERTY(bool autoLoadImages READ autoLoadImages WRITE setAutoLoadImages)
+    Q_PROPERTY(bool javascriptEnabled READ javascriptEnabled WRITE setJavascriptEnabled)
+    Q_PROPERTY(bool javaEnabled READ javaEnabled WRITE setJavaEnabled)
+    Q_PROPERTY(bool pluginsEnabled READ pluginsEnabled WRITE setPluginsEnabled)
+    Q_PROPERTY(bool privateBrowsingEnabled READ privateBrowsingEnabled WRITE setPrivateBrowsingEnabled)
+    Q_PROPERTY(bool javascriptCanOpenWindows READ javascriptCanOpenWindows WRITE setJavascriptCanOpenWindows)
+    Q_PROPERTY(bool javascriptCanAccessClipboard READ javascriptCanAccessClipboard WRITE setJavascriptCanAccessClipboard)
+    Q_PROPERTY(bool developerExtrasEnabled READ developerExtrasEnabled WRITE setDeveloperExtrasEnabled)
+    Q_PROPERTY(bool linksIncludedInFocusChain READ linksIncludedInFocusChain WRITE setLinksIncludedInFocusChain)
+    Q_PROPERTY(bool zoomTextOnly READ zoomTextOnly WRITE setZoomTextOnly)
+    Q_PROPERTY(bool printElementBackgrounds READ printElementBackgrounds WRITE setPrintElementBackgrounds)
+    Q_PROPERTY(bool offlineStorageDatabaseEnabled READ offlineStorageDatabaseEnabled WRITE setOfflineStorageDatabaseEnabled)
+    Q_PROPERTY(bool offlineWebApplicationCacheEnabled READ offlineWebApplicationCacheEnabled WRITE setOfflineWebApplicationCacheEnabled)
+    Q_PROPERTY(bool localStorageDatabaseEnabled READ localStorageDatabaseEnabled WRITE setLocalStorageDatabaseEnabled)
+
+public:
+    QFxWebSettings() {}
+
+    bool autoLoadImages() const { return s->testAttribute(QWebSettings::AutoLoadImages); }
+    void setAutoLoadImages(bool on) { s->setAttribute(QWebSettings::AutoLoadImages, on); }
+    bool javascriptEnabled() const { return s->testAttribute(QWebSettings::JavascriptEnabled); }
+    void setJavascriptEnabled(bool on) { s->setAttribute(QWebSettings::JavascriptEnabled, on); }
+    bool javaEnabled() const { return s->testAttribute(QWebSettings::JavaEnabled); }
+    void setJavaEnabled(bool on) { s->setAttribute(QWebSettings::JavaEnabled, on); }
+    bool pluginsEnabled() const { return s->testAttribute(QWebSettings::PluginsEnabled); }
+    void setPluginsEnabled(bool on) { s->setAttribute(QWebSettings::PluginsEnabled, on); }
+    bool privateBrowsingEnabled() const { return s->testAttribute(QWebSettings::PrivateBrowsingEnabled); }
+    void setPrivateBrowsingEnabled(bool on) { s->setAttribute(QWebSettings::PrivateBrowsingEnabled, on); }
+    bool javascriptCanOpenWindows() const { return s->testAttribute(QWebSettings::JavascriptCanOpenWindows); }
+    void setJavascriptCanOpenWindows(bool on) { s->setAttribute(QWebSettings::JavascriptCanOpenWindows, on); }
+    bool javascriptCanAccessClipboard() const { return s->testAttribute(QWebSettings::JavascriptCanAccessClipboard); }
+    void setJavascriptCanAccessClipboard(bool on) { s->setAttribute(QWebSettings::JavascriptCanAccessClipboard, on); }
+    bool developerExtrasEnabled() const { return s->testAttribute(QWebSettings::DeveloperExtrasEnabled); }
+    void setDeveloperExtrasEnabled(bool on) { s->setAttribute(QWebSettings::DeveloperExtrasEnabled, on); }
+    bool linksIncludedInFocusChain() const { return s->testAttribute(QWebSettings::LinksIncludedInFocusChain); }
+    void setLinksIncludedInFocusChain(bool on) { s->setAttribute(QWebSettings::LinksIncludedInFocusChain, on); }
+    bool zoomTextOnly() const { return s->testAttribute(QWebSettings::ZoomTextOnly); }
+    void setZoomTextOnly(bool on) { s->setAttribute(QWebSettings::ZoomTextOnly, on); }
+    bool printElementBackgrounds() const { return s->testAttribute(QWebSettings::PrintElementBackgrounds); }
+    void setPrintElementBackgrounds(bool on) { s->setAttribute(QWebSettings::PrintElementBackgrounds, on); }
+    bool offlineStorageDatabaseEnabled() const { return s->testAttribute(QWebSettings::OfflineStorageDatabaseEnabled); }
+    void setOfflineStorageDatabaseEnabled(bool on) { s->setAttribute(QWebSettings::OfflineStorageDatabaseEnabled, on); }
+    bool offlineWebApplicationCacheEnabled() const { return s->testAttribute(QWebSettings::OfflineWebApplicationCacheEnabled); }
+    void setOfflineWebApplicationCacheEnabled(bool on) { s->setAttribute(QWebSettings::OfflineWebApplicationCacheEnabled, on); }
+    bool localStorageDatabaseEnabled() const { return s->testAttribute(QWebSettings::LocalStorageDatabaseEnabled); }
+    void setLocalStorageDatabaseEnabled(bool on) { s->setAttribute(QWebSettings::LocalStorageDatabaseEnabled, on); }
+
+    QWebSettings *s;
+};
+
+
 class QFxWebViewPrivate : public QFxItemPrivate
 {
     Q_DECLARE_PUBLIC(QFxWebView)
@@ -131,6 +198,7 @@ public:
     QUrl pending_url;
     QString pending_string;
     QByteArray pending_data;
+    mutable QFxWebSettings settings;
 };
 
 
@@ -866,9 +934,6 @@ QWebPage *QFxWebView::page() const
 
         wp->setNetworkAccessManager(qmlEngine(this)->networkAccessManager());
 
-        // XXX settable from QML?
-        wp->settings()->setAttribute(QWebSettings::PluginsEnabled, true);
-
         self->setPage(wp);
 
         return wp;
@@ -877,6 +942,13 @@ QWebPage *QFxWebView::page() const
     return d->page;
 }
 
+// The QObject interface to settings().
+QObject *QFxWebView::settingsObject() const
+{
+    Q_D(const QFxWebView);
+    d->settings.s = page()->settings();
+    return &d->settings;
+}
 
 void QFxWebView::setPage(QWebPage *page)
 {
@@ -1031,7 +1103,10 @@ public:
         QmlEngine *engine = qmlEngine(webview);
         component = new QmlComponent(engine, url, this);
         item = 0;
-        connect(engine, SIGNAL(statusChanged(Status)), this, SLOT(qmlLoaded()));
+        if (component->isReady())
+            qmlLoaded();
+        else
+            connect(component, SIGNAL(statusChanged(QmlComponent::Status)), this, SLOT(qmlLoaded()));
     }
 
 public Q_SLOTS:
diff --git a/src/declarative/fx/qfxwebview.h b/src/declarative/fx/qfxwebview.h
index 1eede52..6ba4601 100644
--- a/src/declarative/fx/qfxwebview.h
+++ b/src/declarative/fx/qfxwebview.h
@@ -103,6 +103,8 @@ class Q_DECLARATIVE_EXPORT QFxWebView : public QFxItem
     Q_PROPERTY(QObject* forward READ forwardAction)
     Q_PROPERTY(QObject* stop READ stopAction)
 
+    Q_PROPERTY(QObject* settings READ settingsObject)
+
 public:
     QFxWebView(QFxItem *parent=0);
     ~QFxWebView();
@@ -164,6 +166,7 @@ public:
 
     QWebHistory *history() const;
     QWebSettings *settings() const;
+    QObject *settingsObject() const;
 
     QString status() const;
 
-- 
cgit v0.12


From e50b584c8ca90eb7bbee69b92f47827d3d56df3e Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Wed, 29 Apr 2009 13:52:12 +1000
Subject: Phones info media, not movie info media.

---
 .../mediabrowser/content/MovieInfoContainer.qml    | 60 ----------------
 .../mediabrowser/content/MoviesPathView.qml        | 74 -------------------
 .../mediabrowser/content/PhoneInfoContainer.qml    | 66 +++++++++++++++++
 .../mediabrowser/content/PhonesPathView.qml        | 82 ++++++++++++++++++++++
 .../mediabrowser/dummydata/MoviesModel.qml         | 38 ----------
 demos/declarative/mediabrowser/mediabrowser.qml    | 10 +--
 6 files changed, 153 insertions(+), 177 deletions(-)
 delete mode 100644 demos/declarative/mediabrowser/content/MovieInfoContainer.qml
 delete mode 100644 demos/declarative/mediabrowser/content/MoviesPathView.qml
 create mode 100644 demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
 create mode 100644 demos/declarative/mediabrowser/content/PhonesPathView.qml
 delete mode 100644 demos/declarative/mediabrowser/dummydata/MoviesModel.qml

diff --git a/demos/declarative/mediabrowser/content/MovieInfoContainer.qml b/demos/declarative/mediabrowser/content/MovieInfoContainer.qml
deleted file mode 100644
index c53fab6..0000000
--- a/demos/declarative/mediabrowser/content/MovieInfoContainer.qml
+++ /dev/null
@@ -1,60 +0,0 @@
-<Flipable id="Container">
-    <properties>
-        <Property name="frontContainer" value="{ContainerFront}"/>
-        <Property name="flickableArea" value="{Flickable}"/>
-        <Property name="movieTitle" value="N/A"/>
-        <Property name="movieDescription" value="..."/>
-        <Property name="rating" value="2"/>
-    </properties>
-
-    <signals>
-        <Signal name="closed"/>
-    </signals>
-
-    <transform>
-        <Axis id="Axis" xStart="{Container.width / 2}" xEnd="{Container.width / 2}" yEnd="1" />
-    </transform>
-
-    <front>
-        <Item id="ContainerFront" anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-
-            <MediaButton id="BackButton" x="630" y="400" text="Back" onClicked="Container.closed.emit()"/>
-            <MediaButton id="MoreButton" x="530" y="400" text="More..." onClicked="Container.state='Back'"/>
-
-            <Text id="TitleText" style="Raised" styleColor="black" color="white" x="320" y="30" width="{parent.width}"
-                  text="{Container.movieTitle}" font.size="22"/>
-
-            <LikeOMeter x="320" y="75" rating="{Container.rating}"/>
-
-            <Flickable id="Flickable" x="320" width="380" height="260" y="120" clip="true" viewportWidth="380"
-                       viewportHeight="{DescriptionText.height}">
-                <Text id="DescriptionText"  wrap="true" color="white" width="{parent.width}"
-                      text="{Container.movieDescription}" font.size="12"/>
-            </Flickable>
-
-            <ScrollBar id="ScrollBar" x="720" y="{Flickable.y}" width="7" height="{Flickable.height}" opacity="0"
-                       flickableArea="{Flickable}" clip="true"/>
-        </Item>
-    </front>
-
-    <back>
-        <Item anchors.fill="{Container}">
-            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
-            <MediaButton id="BackButton2" x="630" y="400" text="Back" onClicked="Container.state=''"/>
-        </Item>
-    </back>
-
-    <states>
-        <State name="Back">
-            <SetProperty target="{Axis}" property="rotation" value="180"/>
-        </State>
-    </states>
-
-    <transitions>
-        <Transition>
-            <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/>
-        </Transition>
-    </transitions>
-
-</Flipable>
diff --git a/demos/declarative/mediabrowser/content/MoviesPathView.qml b/demos/declarative/mediabrowser/content/MoviesPathView.qml
deleted file mode 100644
index a13437a..0000000
--- a/demos/declarative/mediabrowser/content/MoviesPathView.qml
+++ /dev/null
@@ -1,74 +0,0 @@
-<PathView id="Container">
-
-    <path>
-        <Path startX="-50" startY="40">
-            <PathAttribute name="scale" value="0.4"/>
-            <PathCubic x="400" y="220" control1X="140" control1Y="40" control2X="210" control2Y="220"/>
-            <PathAttribute name="scale" value="0.7"/>
-            <PathCubic x="850" y="40" control2X="660" control2Y="40" control1X="590" control1Y="220"/>
-            <PathAttribute name="scale" value="0.4"/>
-        </Path>
-    </path>
-
-    <delegate>
-        <Component id="MovieDelegate">
-            <Item id="Wrapper" width="220" height="310" scale="{Wrapper.PathView.scale}">
-                <Connection sender="{MovieInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/>
-
-                <Script>
-                    function movieClicked() {
-                        if (MainWindow.minimized == true) {
-                            MainWindow.minimized = false;
-                        } else {
-                            MovieInfoContainer.movieTitle = title;
-                            MovieInfoContainer.flickableArea.yPosition = 0;
-                            MovieInfoContainer.movieDescription = description;
-                            MovieInfoContainer.rating = rating;
-                            Wrapper.state = "Details";
-                        }
-                    }
-                </Script>
-
-                <Rect id="Dvd" anchors.fill="{parent}" color="white">
-                    <Image src="{thumb}" width="215" height="305" anchors.centeredIn="{parent}" opaque="true"/>
-                    <Image src="pics/reflection.png" anchors.centeredIn="{parent}"/>
-                    <Image src="pics/shadow-right.png" x="220"/>
-                    <Image src="pics/shadow-bottom.png" y="310"/>
-                    <Image src="pics/shadow-corner.png" x="220" y="310"/>
-                </Rect>
-
-                <MouseRegion anchors.fill="{Wrapper}" onClicked="movieClicked()"/>
-
-                <states>
-                    <State name="Details">
-                        <ParentChange target="{Wrapper}" parent="{MovieInfoContainer.frontContainer}"/>
-                        <SetProperties target="{Wrapper}" x="50" y="60" scale="1"/>
-                        <SetProperties target="{MovieInfoContainer}" y="20"/>
-                        <SetProperties target="{Container}" y="-480"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                    <State name="Stacked" when="{MainWindow.minimized == true}">
-                        <ParentChange target="{Wrapper}" parent="{Stack}"/>
-                        <SetProperties target="{Wrapper}" x="0" y="0" scale="0.2"/>
-                        <SetProperties target="{CloseButton}" opacity="0"/>
-                        <SetProperties target="{CategoryText}" y="-50"/>
-                    </State>
-                </states>
-
-                <transitions>
-                    <Transition fromState="" toState="Details,Stacked">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                    <Transition fromState="Details,Stacked" toState="">
-                        <ParentChangeAction/>
-                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
-                    </Transition>
-                </transitions>
-
-            </Item>
-        </Component>
-    </delegate>
-
-</PathView>
diff --git a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml b/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
new file mode 100644
index 0000000..dbf25f5
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
@@ -0,0 +1,66 @@
+<Flipable id="Container">
+    <properties>
+        <Property name="frontContainer" value="{ContainerFront}"/>
+        <Property name="flickableArea" value="{Flickable}"/>
+        <Property name="phoneTitle" value="N/A"/>
+        <Property name="phoneDescription" value="..."/>
+        <Property name="phoneSpecifications" value=""/>
+        <Property name="phoneUrl" value=""/>
+        <Property name="rating" value="2"/>
+    </properties>
+
+    <signals>
+        <Signal name="closed"/>
+    </signals>
+
+    <transform>
+        <Axis id="Axis" xStart="{Container.width / 2}" xEnd="{Container.width / 2}" yEnd="1" />
+    </transform>
+
+    <front>
+        <Item id="ContainerFront" anchors.fill="{Container}">
+            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
+
+            <MediaButton id="BackButton" x="630" y="400" text="Back" onClicked="Container.closed.emit()"/>
+            <MediaButton id="MoreButton" x="530" y="400" text="More..." onClicked="Container.state='Back'"/>
+
+            <Text id="TitleText" style="Raised" styleColor="black" color="white" x="420" y="30" width="{parent.width}"
+                  text="{Container.phoneTitle}" font.size="22"/>
+
+            <LikeOMeter x="420" y="75" rating="{Container.rating}"/>
+
+            <Flickable id="Flickable" x="420" width="280" height="260" y="120" clip="true" viewportWidth="280"
+                       viewportHeight="{DescriptionText.height}">
+                <Text id="DescriptionText"  wrap="true" color="white" width="{parent.width}"
+                      text="{Container.phoneDescription}" font.size="12"/>
+            </Flickable>
+            <Text color="white" width="300" x="50" y="300" text="{Container.phoneSpecifications}"/>
+            <ScrollBar id="ScrollBar" x="720" y="{Flickable.y}" width="7" height="{Flickable.height}" opacity="0"
+                       flickableArea="{Flickable}" clip="true"/>
+        </Item>
+    </front>
+
+    <back>
+        <Item anchors.fill="{Container}">
+            <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/>
+            <Flickable x="10" width="{Container.width-20}" height="{Container.height-20}" y="10" clip="true"
+                    viewportWidth="{UrlView.width}" viewportHeight="{UrlView.height}">
+                <WebView id="UrlView" url="{Container.phoneUrl}" idealWidth="{parent.width}"/>
+            </Flickable>
+            <MediaButton id="BackButton2" x="630" y="400" text="Back" onClicked="Container.state=''"/>
+        </Item>
+    </back>
+
+    <states>
+        <State name="Back">
+            <SetProperty target="{Axis}" property="rotation" value="180"/>
+        </State>
+    </states>
+
+    <transitions>
+        <Transition>
+            <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/>
+        </Transition>
+    </transitions>
+
+</Flipable>
diff --git a/demos/declarative/mediabrowser/content/PhonesPathView.qml b/demos/declarative/mediabrowser/content/PhonesPathView.qml
new file mode 100644
index 0000000..e08e13f
--- /dev/null
+++ b/demos/declarative/mediabrowser/content/PhonesPathView.qml
@@ -0,0 +1,82 @@
+<PathView id="Container" pathItemCount="6">
+
+    <path>
+        <Path startX="-50" startY="40">
+            <PathAttribute name="scale" value="0.2"/>
+            <PathAttribute name="opacity" value="0"/>
+            <PathCubic x="400" y="220" control1X="140" control1Y="40" control2X="210" control2Y="220"/>
+            <PathAttribute name="scale" value="1.2"/>
+            <PathAttribute name="z" value="1"/>
+            <PathAttribute name="opacity" value="1"/>
+            <PathCubic x="850" y="40" control2X="660" control2Y="40" control1X="590" control1Y="220"/>
+            <PathAttribute name="scale" value="0.2"/>
+            <PathAttribute name="opacity" value="0"/>
+        </Path>
+    </path>
+
+    <delegate>
+        <Component id="PhoneDelegate">
+            <Item id="Wrapper" width="320" height="200" scale="{Wrapper.PathView.scale}" z="{Wrapper.PathView.z}" opacity="{Wrapper.PathView.opacity}">
+                <Connection sender="{PhoneInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/>
+
+                <Script>
+                    function phoneClicked() {
+                        if (MainWindow.minimized == true) {
+                            MainWindow.minimized = false;
+                        } else {
+                            PhoneInfoContainer.phoneTitle = title;
+                            PhoneInfoContainer.flickableArea.yPosition = 0;
+                            PhoneInfoContainer.phoneDescription = description;
+                            PhoneInfoContainer.phoneSpecifications = specifications;
+                            PhoneInfoContainer.phoneUrl = url;
+                            PhoneInfoContainer.rating = rating;
+                            Wrapper.state = "Details";
+                        }
+                    }
+                </Script>
+
+                <Rect id="Dvd" anchors.fill="{parent}" color="white">
+                    <Item x="{(parent.width-width)/2}" y="{(parent.height-height)/2}" width="{Thumb.width*Thumb.scale}" height="{Thumb.height*Thumb.scale}">
+                        <Image id="Thumb" src="{thumb}" scale="{0.95*Math.min(Dvd.height/height,Dvd.width/width)}"/>
+                    </Item>
+                    <!-- <Image src="pics/reflection.png" anchors.fill="{parent}"/> -->
+                    <Image src="pics/shadow-right.png" x="{Dvd.width}" height="{Dvd.height}"/>
+                    <Image src="pics/shadow-bottom.png" y="{Dvd.height}" width="{Dvd.width}"/>
+                    <Image id="Corner" src="pics/shadow-corner.png" x="{Dvd.width}" y="{Dvd.height}"/>
+                </Rect>
+
+                <MouseRegion anchors.fill="{Wrapper}" onClicked="phoneClicked()"/>
+
+                <states>
+                    <State name="Details">
+                        <ParentChange target="{Wrapper}" parent="{PhoneInfoContainer.frontContainer}"/>
+                        <SetProperties target="{Wrapper}" x="50" y="60" scale="1"/>
+                        <SetProperties target="{PhoneInfoContainer}" y="20"/>
+                        <SetProperties target="{Container}" y="-480"/>
+                        <SetProperties target="{CloseButton}" opacity="0"/>
+                        <SetProperties target="{CategoryText}" y="-50"/>
+                    </State>
+                    <State name="Stacked" when="{MainWindow.minimized == true}">
+                        <ParentChange target="{Wrapper}" parent="{Stack}"/>
+                        <SetProperties target="{Wrapper}" x="0" y="0" scale="0.2"/>
+                        <SetProperties target="{CloseButton}" opacity="0"/>
+                        <SetProperties target="{CategoryText}" y="-50"/>
+                    </State>
+                </states>
+
+                <transitions>
+                    <Transition fromState="" toState="Details,Stacked">
+                        <ParentChangeAction/>
+                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
+                    </Transition>
+                    <Transition fromState="Details,Stacked" toState="">
+                        <ParentChangeAction/>
+                        <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/>
+                    </Transition>
+                </transitions>
+
+            </Item>
+        </Component>
+    </delegate>
+
+</PathView>
diff --git a/demos/declarative/mediabrowser/dummydata/MoviesModel.qml b/demos/declarative/mediabrowser/dummydata/MoviesModel.qml
deleted file mode 100644
index 87bca37..0000000
--- a/demos/declarative/mediabrowser/dummydata/MoviesModel.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-<ListModel id="MoviesModel">
-    <Movie>
-        <title>Repoman</title>
-        <thumb>http://www.impawards.com/1984/posters/repo_man.jpg</thumb>
-        <description>Cult classic. Car repossession. Radiation. Plate O' Shrimp.</description>
-        <rating>2</rating>
-    </Movie>
-    <Movie>
-        <title>Monsters vs Aliens</title>
-        <thumb>http://www.impawards.com/2009/posters/monsters_vs_aliens_ver6.jpg</thumb>
-        <description>Love Monsters?  Love Aliens?  You're in luck.</description>
-        <rating>1</rating>
-    </Movie>
-    <Movie>
-        <title>Cruel Intentions</title>
-        <thumb>http://impawards.com/1999/posters/cruel_intentions_ver1.jpg</thumb>
-        <description>Modern-day update of Les Liaisons Dangereuses.  Better because it has nothing to do with the French.</description>
-        <rating>3</rating>
-    </Movie>
-    <Movie>
-        <title>Lord of War</title>
-        <thumb>http://www.impawards.com/2005/posters/lord_of_war_ver2.jpg</thumb>
-        <description>There are over 500 million fire arms in worldwide circulation.  That is one fire arm for every twelve people on the planet.  The only question is how do we arm the other eleven?</description>
-        <rating>4</rating>
-    </Movie>
-    <Movie>
-        <title>The Devil's Advocate</title>
-        <thumb>http://impawards.com/1997/posters/devils_advocate_ver1.jpg</thumb>
-        <description>An ambitious your district attorney joins a powerful New York law firm headed by the devil.</description>
-        <rating>4</rating>
-    </Movie>
-    <Movie>
-        <title>Team America: World Police</title>
-        <thumb>http://impawards.com/2004/posters/team_america_world_police.jpg</thumb>
-        <description>Hey terrorist, terrorize this.</description>
-        <rating>1</rating>
-    </Movie>
-</ListModel>
diff --git a/demos/declarative/mediabrowser/mediabrowser.qml b/demos/declarative/mediabrowser/mediabrowser.qml
index df7baa9..338aed2 100644
--- a/demos/declarative/mediabrowser/mediabrowser.qml
+++ b/demos/declarative/mediabrowser/mediabrowser.qml
@@ -8,12 +8,12 @@
         <Image src="content/pics/background.png" opaque="true"/>
 
         <Rect id="Menu" x="-150" width="150" height="480" color="#232323">
-            <Text id="IconText" x="30" y="122" font.bold="true" font.size="9" text="Coming Soon" color="white" style="Raised" styleColor="black"/>
+            <Text id="IconText" x="40" y="110" font.bold="true" font.size="9" text="Nokia Devices" color="white" style="Raised" styleColor="black"/>
             <Image src="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
         </Rect>
 
-        <MovieInfoContainer id="MovieInfoContainer" width="750" x="25" y="500" height="440"/>
-        <MoviesPathView id="MoviesPathView" model="{MoviesModel}" y="60" width="800" height="360"/>
+        <PhoneInfoContainer id="PhoneInfoContainer" width="750" x="25" y="500" height="440"/>
+        <PhonesPathView id="PhonesPathView" model="{PhonesModel}" y="60" width="800" height="360"/>
         <MediaButton id="CloseButton" x="680" y="440" text="Close" onClicked="MainWindow.minimized = true"/>
 
         <states>
@@ -29,8 +29,8 @@
         </transitions>
     </Item>
 
-    <Text id="CategoryText" x="300" y="15" text="Coming Soon" font.size="22" color="white" style="Raised" styleColor="black"/>
-    <Item id="Stack" x="50" y="50"/>
+    <Text id="CategoryText" x="300" y="15" text="Nokia Devices" font.size="22" color="white" style="Raised" styleColor="black"/>
+    <Item id="Stack" x="45" y="50"/>
 
 </Item>
 
-- 
cgit v0.12


From 14a5c8be6900c10dc6bc593e472b6a879db4dd2d Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Wed, 29 Apr 2009 14:21:27 +1000
Subject: Nicer order. Nicer order, but not perfect (no global Z)

---
 demos/declarative/mediabrowser/content/PhonesPathView.qml | 5 +----
 demos/declarative/mediabrowser/mediabrowser.qml           | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/demos/declarative/mediabrowser/content/PhonesPathView.qml b/demos/declarative/mediabrowser/content/PhonesPathView.qml
index e08e13f..8ec1938 100644
--- a/demos/declarative/mediabrowser/content/PhonesPathView.qml
+++ b/demos/declarative/mediabrowser/content/PhonesPathView.qml
@@ -3,20 +3,17 @@
     <path>
         <Path startX="-50" startY="40">
             <PathAttribute name="scale" value="0.2"/>
-            <PathAttribute name="opacity" value="0"/>
             <PathCubic x="400" y="220" control1X="140" control1Y="40" control2X="210" control2Y="220"/>
             <PathAttribute name="scale" value="1.2"/>
             <PathAttribute name="z" value="1"/>
-            <PathAttribute name="opacity" value="1"/>
             <PathCubic x="850" y="40" control2X="660" control2Y="40" control1X="590" control1Y="220"/>
             <PathAttribute name="scale" value="0.2"/>
-            <PathAttribute name="opacity" value="0"/>
         </Path>
     </path>
 
     <delegate>
         <Component id="PhoneDelegate">
-            <Item id="Wrapper" width="320" height="200" scale="{Wrapper.PathView.scale}" z="{Wrapper.PathView.z}" opacity="{Wrapper.PathView.opacity}">
+            <Item id="Wrapper" width="320" height="200" scale="{Wrapper.PathView.scale}" z="{Wrapper.PathView.z}">
                 <Connection sender="{PhoneInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/>
 
                 <Script>
diff --git a/demos/declarative/mediabrowser/mediabrowser.qml b/demos/declarative/mediabrowser/mediabrowser.qml
index 338aed2..bcdca56 100644
--- a/demos/declarative/mediabrowser/mediabrowser.qml
+++ b/demos/declarative/mediabrowser/mediabrowser.qml
@@ -12,8 +12,8 @@
             <Image src="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/>
         </Rect>
 
-        <PhoneInfoContainer id="PhoneInfoContainer" width="750" x="25" y="500" height="440"/>
         <PhonesPathView id="PhonesPathView" model="{PhonesModel}" y="60" width="800" height="360"/>
+        <PhoneInfoContainer id="PhoneInfoContainer" width="750" x="25" y="500" height="440"/>
         <MediaButton id="CloseButton" x="680" y="440" text="Close" onClicked="MainWindow.minimized = true"/>
 
         <states>
-- 
cgit v0.12


From bebc46c28a4e267c3b7bb590e6b66cce2359d878 Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Wed, 29 Apr 2009 14:32:58 +1000
Subject: Enable plugins They're no longer on by default, as per QWebPage.

---
 examples/declarative/webview/qml-in-html.qml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/declarative/webview/qml-in-html.qml b/examples/declarative/webview/qml-in-html.qml
index 2715788..8c1c06f 100644
--- a/examples/declarative/webview/qml-in-html.qml
+++ b/examples/declarative/webview/qml-in-html.qml
@@ -1,7 +1,7 @@
 <!-- The WebView supports QML data through the HTML OBJECT tag --> 
 <Flickable width="{250*.75}" height="240"
     viewportWidth="{Web.width*Web.scale}" viewportHeight="{Web.height*Web.scale}">
-<WebView id="Web" width="250" height="420" scale="0.75">
+<WebView id="Web" width="250" height="420" scale="0.75" settings.pluginsEnabled="true">
     <html><![CDATA[
         <html>
         <body bgcolor=white>
-- 
cgit v0.12


From f49f040660fd004ea6289cdc3a92a7ad42338237 Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Wed, 29 Apr 2009 14:33:32 +1000
Subject: doc

---
 doc/src/declarative/examples.qdoc | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc
index 17fda4d..e65808f 100644
--- a/doc/src/declarative/examples.qdoc
+++ b/doc/src/declarative/examples.qdoc
@@ -17,10 +17,14 @@ directory,
     bin/duiviewer $QT_SOURCE_DIR/examples/declarative/mediabrowser/mediabrowser.qml
 \endcode
 
-Many other simple demos can be found under the \c examples/declarative sub 
+Many other simple examples can be found under the \c examples/declarative sub 
 directory.  Some can be run directly using the viewer like those above, and 
 others require you to build and run an executable.
 
+More sophisticated demos of large applications can be found under the \c demos/declarative
+sub directory. These are intended to show more integrated functionality rather than
+to be instructive on specific elements.
+
 Finally, check out the \l {tutorial} to learn a little more about writing your
 own QML-based applications.
 
-- 
cgit v0.12


From 3acc614737ab2ac5d15c4d4f38066c417065a843 Mon Sep 17 00:00:00 2001
From: Warwick Allison <warwick.allison@nokia.com>
Date: Wed, 29 Apr 2009 14:46:55 +1000
Subject: model data

---
 .../mediabrowser/dummydata/PhonesModel.qml         | 137 +++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 demos/declarative/mediabrowser/dummydata/PhonesModel.qml

diff --git a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml b/demos/declarative/mediabrowser/dummydata/PhonesModel.qml
new file mode 100644
index 0000000..d4f6269
--- /dev/null
+++ b/demos/declarative/mediabrowser/dummydata/PhonesModel.qml
@@ -0,0 +1,137 @@
+<ListModel id="PhonesModel">
+    <Phone>
+        <title>Nokia N97</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/N97_main.jpg</thumb>
+        <description>
+        The Nokia N97 is a S60 5th Edition mobile computer with a large 3,5?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) TFT color display with resistive touch screen and tactile feedback. The device provides excellent user experience for internet and entertainment by combining qwerty keyboard with touch UI and Home screen functionality. Use the N97 to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include game titles with N-Gage, a 5 mega pixel camera with dual LED flash and automatic geotagging of images and videos.
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>360 x 640   
+            <tr><td>Color Depth    <td>24 bit  
+            <tr><td>Device Size    <td>117.2 x 55.3 x 15.9 mm
+            <tr><td>Volume         <td>88 cc   
+            <tr><td>Weight         <td>150 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/N97</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>Nokia 5800 XpressMusic</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/5800_main.jpg</thumb>
+        <description>
+        The Nokia 5800 XpressMusic is a S60 5th Edition device with a resistive touch screen and tactile feedback. The device has a large 3,2?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) color display. The device has variety of input methods: stylus, plectrum and finger touch support for text input and UI control (alphanumeric keypad, full and mini qwerty keyboard, handwriting recognition). Use the Nokia 5800 XpressMusic to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include a 3.2 megapixel camera with dual LED flash, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available. 
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>360 x 640   
+            <tr><td>Color Depth    <td>24 bit  
+            <tr><td>Device Size    <td>111 x 51.7 x 15.5 mm
+            <tr><td>Volume         <td>83 cc   
+            <tr><td>Weight         <td>109 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/5800_XpressMusic</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>E75</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/E75_main.jpg</thumb>
+        <description>The Nokia E75 is a GSM/WCDMA dual-mode business smartphone supporting WCDMA/HSDPA, EGSM, and WLAN. The device features a side slider qwerty keyboard for optimal email experience. Enjoy videos, music, and graphics on the 2.4? QVGA display and orientation sensor. Find directions and locations with the integrated A-GPS and included maps. Take photos with a 3.2-megapixel autofocus camera. Additional features include USB charging with simultaneous data transfer, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available.</description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>240 x 320   
+            <tr><td>Color Depth    <td>24 bit  
+            <tr><td>Device Size    <td>111.8 x 501 x 14.4 mm   
+            <tr><td>Volume         <td>69 cc   
+            <tr><td>Weight         <td>139 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/E75</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>Nokia N810</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/n810_main.jpg</thumb>
+        <description>
+        The Nokia N810 features include Voice-over-IP (VoIP) Internet and video calling, Instant Messaging, an integrated slide-out QWERTY keyboard and touch screen. The N810 lets you stay connected on the go with WLAN or Bluetooth 2.0 +EDR and a Bluetooth enabled mobile phone. The hi-resolution 4.13", 800 x 480 screen and the integrated web cam add to the internet experience. Use the Nokia N810 to play music and videos with the built-in stereo speakers or use the 3.5mm stereo plug with headphones. The Nokia N810 also has an integrated GPS receiver which allows you to pinpoint your position and find points-of-interests using pre-loaded maps. 
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>800 x 480   
+            <tr><td>Color Depth    <td>16 bit  
+            <tr><td>Device Size    <td>128 x 72 x 14 mm
+            <tr><td>Weight         <td>225 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/N810</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>Nokia 6260 slide</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/6260slide_main.jpg</thumb>
+        <description>
+        The Nokia 6260 slide is a Series 40 6th Edition phone, supporting quad-band GSM 850/900/1800/1900, triple-band WCDMA 900/1900/2100 and WLAN. Other key features include integrated A-GPS with included maps, a 5.0 megapixel camera with LED flash and Carl Zeiss optics, WebKit Open Source Browser, Flash Lite 3.0, Bluetooth 2.1 + EDR and MIDP Java 2.1 with additional Java APIs. Supported WCDMA frequencies depend on the region where the device is available. 
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>320 x 480   
+            <tr><td>Color Depth    <td>24 bit  
+            <tr><td>Device Size    <td>99.4 x 46.5 x 15.4 mm
+            <tr><td>Volume         <td>64.5 cc   
+            <tr><td>Weight         <td>114 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/6260_slide</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>Nokia 2330 classic</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/2330_main.jpg</thumb>
+        <description>
+        The Nokia 2330 classic is a Dual-band GPRS phone for EGSM 900/1800 or GSM 850/1900 (for some markets) that includes a VGA camera, Stereo FM radio with recording feature, Bluetooth 2.0, Mail on Ovi and MIDP 2.1 APIs for application creation. 
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>128 x 160   
+            <tr><td>Color Depth    <td>16 bit  
+            <tr><td>Device Size    <td>107 x 46 x 13.8 mm
+            <tr><td>Weight         <td>80 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/2330_classic</url>
+        <rating>5</rating>
+    </Phone>
+    <Phone>
+        <title>Nokia 2355</title>
+        <thumb>http://www.forum.nokia.com/devices/pics/2355_main.jpg</thumb>
+        <description>
+        The Nokia 2355 CDMA phone features a 64K color display, FM radio, integrated flashlight, WAP 2.0 browsing, MMS, Java(tm) and Brew. It's stylishly polished fold design will keep you in the spotlight. 
+        </description>
+        <specifications>
+        <![CDATA[
+            <table width=300>
+            <tr><td width=50%>Resolution     <td width=50%>128 x 128   
+            <tr><td>Color Depth    <td>16 bit  
+            <tr><td>Device Size    <td>81 x 43 x 22 mm
+            <tr><td>Weight         <td>78 g
+            </table>
+        ]]>
+        </specifications>
+        <url>http://www.forum.nokia.com/devices/2355</url>
+        <rating>5</rating>
+    </Phone>
+</ListModel>
-- 
cgit v0.12


From 012bf05b8c5e37bb102406d79023cb5d875deaac Mon Sep 17 00:00:00 2001
From: Michael Brasser <michael.brasser@nokia.com>
Date: Wed, 29 Apr 2009 15:09:07 +1000
Subject: API improvements for Flipable.

You can now specify an axis and rotation, rather than using transform.
The tranform behavior has been preserved, however, to allow for cases
where you want a more complex transform when rotating.
---
 .../mediabrowser/content/PhoneInfoContainer.qml    |  10 +-
 examples/declarative/minehunt/minehunt.qml         |  12 +-
 src/declarative/fx/qfxflipable.cpp                 | 133 +++++++++++++++++++--
 src/declarative/fx/qfxflipable.h                   |  10 ++
 src/declarative/fx/qfxtransform.cpp                |  25 +++-
 5 files changed, 171 insertions(+), 19 deletions(-)

diff --git a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml b/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
index 5e387dd..34fd889 100644
--- a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
+++ b/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
@@ -13,9 +13,9 @@
         <Signal name="closed"/>
     </signals>
 
-    <transform>
-        <AxisRotation id="Axis" axis.startX="{Container.width / 2}" axis.endX="{Container.width / 2}" axis.endY="1" />
-    </transform>
+    <axis>
+        <Axis startX="{Container.width / 2}" endX="{Container.width / 2}" endY="1" />
+    </axis>
 
     <front>
         <Item id="ContainerFront" anchors.fill="{Container}">
@@ -53,13 +53,13 @@
 
     <states>
         <State name="Back">
-            <SetProperty target="{Axis}" property="angle" value="180"/>
+            <SetProperty target="{Container}" property="rotation" value="180"/>
         </State>
     </states>
 
     <transitions>
         <Transition>
-            <NumericAnimation easing="easeInOutQuad" properties="angle" duration="500"/>
+            <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/>
         </Transition>
     </transitions>
 
diff --git a/examples/declarative/minehunt/minehunt.qml b/examples/declarative/minehunt/minehunt.qml
index 20c3874..5c1b071 100644
--- a/examples/declarative/minehunt/minehunt.qml
+++ b/examples/declarative/minehunt/minehunt.qml
@@ -6,9 +6,9 @@
     <resources>
         <Component id="tile">
             <Flipable id="flipable" width="40" height="40">
-                <transform>
-                    <AxisRotation id="axis" axis.startX="20" axis.endX="20" axis.startY="20" axis.endY="0" />
-                </transform>
+                <axis>
+                    <Axis startX="20" startY="20" endX="20" endY="0" />
+                </axis>
                 <front>
                     <Image src="pics/front.png" width="40" height="40">
                         <Image anchors.horizontalCenter="{parent.horizontalCenter}"
@@ -34,19 +34,19 @@
                 </back>
                 <states>
                     <State name="back" when="{modelData.flipped == true}">
-                        <SetProperty target="{axis}" property="angle" value="180" />
+                        <SetProperty target="{flipable}" property="rotation" value="180" />
                     </State>
                 </states>
                 <transitions>
                     <Transition>
                         <SequentialAnimation>
                             <PauseAnimation duration="{var ret = Math.abs(flipable.parent.x-field.clickx) + Math.abs(flipable.parent.y-field.clicky); if (ret > 0) {if(modelData.hasMine==true &amp;&amp; modelData.flipped==true){ret*3;}else{ret;}} else {0}}"/>
-                            <NumericAnimation easing="easeInOutQuad" properties="angle"/>
+                            <NumericAnimation easing="easeInOutQuad" properties="rotation"/>
                         </SequentialAnimation>
                     </Transition>
                 </transitions>
                 <MouseRegion anchors.fill="{parent}"
-                             onClicked="field.clickx = flipable.parent.x; field.clicky = flipable.parent.y; row = Math.floor(index/9); col = index - (Math.floor(index/9) * 9); if(mouseButton==undefined || mouseButton=='Right'){flag(row,col);}else{flip(row,col);}" />
+                             onClicked="field.clickx = flipable.parent.x; field.clicky = flipable.parent.y; row = Math.floor(index/9); col = index - (Math.floor(index/9) * 9); if(mouse.button==undefined || mouse.button==Qt.RightButton){flag(row,col);}else{flip(row,col);}" />
             </Flipable>
         </Component>
     </resources>
diff --git a/src/declarative/fx/qfxflipable.cpp b/src/declarative/fx/qfxflipable.cpp
index 9db0b57..1d15827 100644
--- a/src/declarative/fx/qfxflipable.cpp
+++ b/src/declarative/fx/qfxflipable.cpp
@@ -49,11 +49,17 @@ QML_DEFINE_TYPE(QFxFlipable,Flipable);
 class QFxFlipablePrivate : public QFxItemPrivate
 {
 public:
-    QFxFlipablePrivate() : current(QFxFlipable::Front), front(0), back(0) {}
+    QFxFlipablePrivate() : current(QFxFlipable::Front), front(0), back(0), axis(0), rotation(0) {}
+
+    void setBackTransform();
+    void _q_updateAxis();
 
     QFxFlipable::Side current;
     QFxItem *front;
     QFxItem *back;
+    QFxAxis *axis;
+    QFxRotation axisRotation;
+    qreal rotation;
 };
 
 /*!
@@ -65,18 +71,18 @@ public:
 
     \code
     <Flipable id="flipable" width="40" height="40">
-        <transform>
-            <Axis id="axis" xStart="20" xEnd="20" yStart="20" yEnd="0" />
-        </transform>
+        <axis>
+            <Axis startX="20" startY="0" endX="20" endY="40" />
+        </axis>
         <front>
-            <Image file="front.png"/>
+            <Image src="front.png"/>
         </front>
         <back>
-            <Image file="back.png"/>
+            <Image src="back.png"/>
         </back>
         <states>
             <State name="back">
-                <SetProperty target="{axis}" property="rotation" value="180" />
+                <SetProperty target="{flipable}" property="rotation" value="180" />
             </State>
         </states>
         <transitions>
@@ -153,6 +159,114 @@ void QFxFlipable::setBack(QFxItem *back)
     children()->append(d->back);
     if (Front == d->current)
         d->back->setOpacity(0.);
+    d->setBackTransform();
+}
+
+/*!
+    \qmlproperty Axis Flipable::axis
+
+    The axis to flip around. See the \l Axis documentation for more
+    information on specifying an axis.
+*/
+
+QFxAxis *QFxFlipable::axis()
+{
+    Q_D(QFxFlipable);
+    return d->axis;
+}
+
+void QFxFlipable::setAxis(QFxAxis *axis)
+{
+    Q_D(QFxFlipable);
+    //### disconnect if we are already connected?
+    if (d->axis)
+        disconnect(d->axis, SIGNAL(updated()), this, SLOT(_q_updateAxis()));
+    d->axis = axis;
+    connect(d->axis, SIGNAL(updated()), this, SLOT(_q_updateAxis()));
+    d->_q_updateAxis();
+}
+
+void QFxFlipablePrivate::_q_updateAxis()
+{
+    axisRotation.axis()->setStartX(axis->startX());
+    axisRotation.axis()->setStartY(axis->startY());
+    axisRotation.axis()->setEndX(axis->endX());
+    axisRotation.axis()->setEndY(axis->endY());
+    axisRotation.axis()->setEndZ(axis->endZ());
+
+    setBackTransform();
+}
+
+void QFxFlipablePrivate::setBackTransform()
+{
+    if (!back)
+        return;
+
+    QPointF p1(0, 0);
+    QPointF p2(1, 0);
+    QPointF p3(1, 1);
+
+    axisRotation.setAngle(180);
+    p1 = axisRotation.transform().map(p1);
+    p2 = axisRotation.transform().map(p2);
+    p3 = axisRotation.transform().map(p3);
+    axisRotation.setAngle(rotation);
+
+    QSimpleCanvas::Matrix mat;
+#ifdef QFX_RENDER_OPENGL
+    mat.translate(back->width()/2,back->height()/2, 0);
+    if (back->width() && p1.x() >= p2.x())
+        mat.rotate(180, 0, 1, 0);
+    if (back->height() && p2.y() >= p3.y())
+        mat.rotate(180, 1, 0, 0);
+    mat.translate(-back->width()/2,-back->height()/2, 0);
+#else
+    mat.translate(back->width()/2,back->height()/2);
+    if (back->width() && p1.x() >= p2.x())
+        mat.rotate(180, Qt::YAxis);
+    if (back->height() && p2.y() >= p3.y())
+        mat.rotate(180, Qt::XAxis);
+    mat.translate(-back->width()/2,-back->height()/2);
+#endif
+    back->setTransform(mat);
+}
+
+/*!
+    \qmlproperty real Flipable::rotation
+    The angle to rotate the flipable. For example, to show the back side of the flipable
+    you can set the rotation to 180.
+*/
+qreal QFxFlipable::rotation() const
+{
+    Q_D(const QFxFlipable);
+    return d->rotation;
+}
+
+void QFxFlipable::setRotation(qreal angle)
+{
+    Q_D(QFxFlipable);
+    d->rotation = angle;
+    d->axisRotation.setAngle(angle);
+    setTransform(d->axisRotation.transform());
+
+
+    int simpleAngle = int(angle) % 360;
+
+    Side newSide;
+    if (simpleAngle < 91 || simpleAngle > 270) {
+       newSide = Front;
+    } else {
+        newSide = Back;
+    }
+
+    if (newSide != d->current) {
+        d->current = newSide;
+        if (d->front)
+            d->front->setOpacity((d->current==Front)?1.:0.);
+        if (d->back)
+            d->back->setOpacity((d->current==Back)?1.:0.);
+        emit sideChanged();
+    }
 }
 
 /*!
@@ -167,6 +281,9 @@ QFxFlipable::Side QFxFlipable::side() const
     return d->current;
 }
 
+//in some cases the user may want to specify a more complex transformation.
+//in that case, we still allow the generic use of transform.
+//(the logic here should be kept in sync with setBackTransform and setRotation)
 void QFxFlipable::transformChanged(const QSimpleCanvas::Matrix &trans)
 {
     Q_D(QFxFlipable);
@@ -218,3 +335,5 @@ void QFxFlipable::transformChanged(const QSimpleCanvas::Matrix &trans)
 }
 
 QT_END_NAMESPACE
+
+#include "moc_qfxflipable.cpp"
diff --git a/src/declarative/fx/qfxflipable.h b/src/declarative/fx/qfxflipable.h
index 2c6c849..ef1832e 100644
--- a/src/declarative/fx/qfxflipable.h
+++ b/src/declarative/fx/qfxflipable.h
@@ -55,6 +55,7 @@ QT_BEGIN_NAMESPACE
 
 QT_MODULE(Declarative)
 
+class QFxAxis;
 class QFxFlipablePrivate;
 class Q_DECLARATIVE_EXPORT QFxFlipable : public QFxItem
 {
@@ -63,6 +64,8 @@ class Q_DECLARATIVE_EXPORT QFxFlipable : public QFxItem
     Q_ENUMS(Side);
     Q_PROPERTY(QFxItem *front READ front WRITE setFront)
     Q_PROPERTY(QFxItem *back READ back WRITE setBack)
+    Q_PROPERTY(QFxAxis *axis READ axis WRITE setAxis)
+    Q_PROPERTY(qreal rotation READ rotation WRITE setRotation)
     Q_PROPERTY(Side side READ side NOTIFY sideChanged)
 public:
     QFxFlipable(QFxItem *parent=0);
@@ -74,6 +77,12 @@ public:
     QFxItem *back();
     void setBack(QFxItem *);
 
+    QFxAxis *axis();
+    void setAxis(QFxAxis *axis);
+
+    qreal rotation() const;
+    void setRotation(qreal angle);
+
     enum Side { Front, Back };
     Side side() const;
 
@@ -84,6 +93,7 @@ Q_SIGNALS:
     void sideChanged();
 
 private:
+    Q_PRIVATE_SLOT(d_func(), void _q_updateAxis())
     Q_DISABLE_COPY(QFxFlipable)
     Q_DECLARE_PRIVATE(QFxFlipable)
 };
diff --git a/src/declarative/fx/qfxtransform.cpp b/src/declarative/fx/qfxtransform.cpp
index 9f18413..c355158 100644
--- a/src/declarative/fx/qfxtransform.cpp
+++ b/src/declarative/fx/qfxtransform.cpp
@@ -85,7 +85,16 @@ void QFxTransform::update()
 
 /*!
     \qmlclass Axis
-    \brief An axis that can be used for rotation or translation.
+    \brief The Axis element defines an axis that can be used for rotation or translation.
+
+    An axis is specified by 2 points in 3D space: a start point and
+    an end point. While technically the axis is the line running through these two points
+    (and thus many different sets of two points could define the same axis), the distance
+    between the points does matter for translation along an axis.
+
+    \code
+    <Axis startX="0" startY="0" endX="20" endY="30"/>
+    \endcode
 */
 
 QML_DEFINE_TYPE(QFxAxis, Axis);
@@ -99,6 +108,13 @@ QFxAxis::~QFxAxis()
 {
 }
 
+/*!
+    \qmlproperty real Axis::startX
+    \qmlproperty real Axis::startY
+
+    The start point of the axis. The z-position of the start point is assumed to be 0, and cannot
+    be changed.
+*/
 qreal QFxAxis::startX() const
 {
     return _startX;
@@ -121,6 +137,13 @@ void QFxAxis::setStartY(qreal y)
     emit updated();
 }
 
+/*!
+    \qmlproperty real Axis::endX
+    \qmlproperty real Axis::endY
+    \qmlproperty real Axis::endZ
+
+    The end point of the axis.
+*/
 qreal QFxAxis::endX() const
 {
     return _endX;
-- 
cgit v0.12