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

23 files changed, 1020 insertions, 0 deletions

diff --git a/demos/declarative/minehunt/Description.qml b/demos/declarative/minehunt/Description.qml
new file mode 100644
index 0000000..df4881c
--- /dev/null
+++ b/demos/declarative/minehunt/Description.qml
@@ -0,0 +1,34 @@
+import Qt 4.6
+
+Item {
+    id: Page
+    height: MyText.height + 20
+    property var text
+    MouseRegion {
+        anchors.fill: parent
+        drag.target: Page
+        drag.axis: "XandYAxis"
+        drag.minimumX: 0
+        drag.maximumX: 1000
+        drag.minimumY: 0
+        drag.maximumY: 1000
+    }
+    Rectangle {
+        radius: 10
+        anchors.fill: parent
+        color: "lightsteelblue"
+    }
+    Item {
+        x: 10
+        y: 10
+        width: parent.width - 20
+        height: parent.height - 20
+        Text {
+            id: MyText
+            text: Page.text
+            width: parent.width
+            clip: true
+            wrap: true
+        }
+    }
+}
diff --git a/demos/declarative/minehunt/Explosion.qml b/demos/declarative/minehunt/Explosion.qml
new file mode 100644
index 0000000..a997048
--- /dev/null
+++ b/demos/declarative/minehunt/Explosion.qml
@@ -0,0 +1,29 @@
+import Qt 4.6
+
+Item {
+    property bool explode : false
+
+    Particles {
+        id: particles
+        width: 40
+        height: 40
+        lifeSpan: 1000
+        lifeSpanDeviation: 0
+        source: "pics/star.png"
+        count: 0
+        angle: 270
+        angleDeviation: 360
+        velocity: 100
+        velocityDeviation: 20
+        z: 100
+        opacity: 0
+        streamIn: false
+    }
+    states: [ State { name: "exploding"; when: explode == true
+            PropertyChanges { target: particles; count: 200 }
+            PropertyChanges { target: particles; opacity: 1 }
+            PropertyChanges { target: particles; emitting: false } // i.e. emit only once
+        }
+    ]
+
+}
diff --git a/demos/declarative/minehunt/main.cpp b/demos/declarative/minehunt/main.cpp
new file mode 100644
index 0000000..20f7492
--- /dev/null
+++ b/demos/declarative/minehunt/main.cpp
@@ -0,0 +1,309 @@
+#include "qmlengine.h"
+#include "qmlcontext.h"
+#include "qml.h"
+#include <qfxitem.h>
+#include <qfxview.h>
+
+#include <QWidget>
+#include <QApplication>
+#include <QFile>
+#include <QTime>
+#include <QTimer>
+#include <QVBoxLayout>
+#include <QFileInfo>
+
+QString fileName = "minehunt.qml";
+
+class Tile : public QObject
+{
+    Q_OBJECT
+public:
+    Tile() : _hasFlag(false), _hasMine(false), _hint(-1), _flipped(false) {}
+
+    Q_PROPERTY(bool hasFlag READ hasFlag WRITE setHasFlag NOTIFY hasFlagChanged);
+    bool hasFlag() const { return _hasFlag; }
+
+    Q_PROPERTY(bool hasMine READ hasMine NOTIFY hasMineChanged);
+    bool hasMine() const { return _hasMine; }
+
+    Q_PROPERTY(int hint READ hint NOTIFY hintChanged);
+    int hint() const { return _hint; }
+
+    Q_PROPERTY(bool flipped READ flipped NOTIFY flippedChanged());
+    bool flipped() const { return _flipped; }
+
+    void setHasFlag(bool flag) {if(flag==_hasFlag) return; _hasFlag = flag; emit hasFlagChanged();}
+    void setHasMine(bool mine) {if(mine==_hasMine) return; _hasMine = mine; emit hasMineChanged();}
+    void setHint(int hint) { if(hint == _hint) return; _hint = hint; emit hintChanged(); }
+    void flip() { if (_flipped) return; _flipped = true; emit flippedChanged(); }
+    void unflip() { if(!_flipped) return; _flipped = false; emit flippedChanged(); }
+
+signals:
+    void flippedChanged();
+    void hasFlagChanged();
+    void hintChanged();
+    void hasMineChanged();
+
+private:
+    bool _hasFlag;
+    bool _hasMine;
+    int _hint;
+    bool _flipped;
+};
+
+QML_DECLARE_TYPE(Tile);
+QML_DEFINE_TYPE(0,0,0,0,Tile,Tile);
+
+class MyWidget : public QWidget
+{
+Q_OBJECT
+public:
+    MyWidget(int = 370, int = 480, QWidget *parent=0, Qt::WindowFlags flags=0);
+    ~MyWidget();
+
+    Q_PROPERTY(QList<Tile *> *tiles READ tiles CONSTANT);
+    QList<Tile *> *tiles() { return &_tiles; }
+
+    Q_PROPERTY(bool isPlaying READ isPlaying NOTIFY isPlayingChanged);
+    bool isPlaying() {return playing;}
+
+    Q_PROPERTY(bool hasWon READ hasWon NOTIFY hasWonChanged);
+    bool hasWon() {return won;}
+
+    Q_PROPERTY(int numMines READ numMines NOTIFY numMinesChanged);
+    int numMines() const{return nMines;}
+
+    Q_PROPERTY(int numFlags READ numFlags NOTIFY numFlagsChanged);
+    int numFlags() const{return nFlags;}
+
+public slots:
+    Q_INVOKABLE void flip(int row, int col);
+    Q_INVOKABLE void flag(int row, int col);
+    void setBoard();
+    void reset();
+
+signals:
+    void isPlayingChanged();
+    void hasWonChanged();
+    void numMinesChanged();
+    void numFlagsChanged();
+
+private:
+    bool onBoard( int r, int c ) const { return r >= 0 && r < numRows && c >= 0 && c < numCols; }
+    Tile *tile( int row, int col ) { return onBoard(row, col) ? _tiles[col+numRows*row] : 0; }
+    int getHint(int row, int col);
+    void setPlaying(bool b){if(b==playing) return; playing=b; emit isPlayingChanged();}
+
+    QFxView *canvas;
+
+    QList<Tile *> _tiles;
+    int numCols;
+    int numRows;
+    bool playing;
+    bool won;
+    int remaining;
+    int nMines;
+    int nFlags;
+};
+
+MyWidget::MyWidget(int width, int height, QWidget *parent, Qt::WindowFlags flags)
+: QWidget(parent, flags), canvas(0), numCols(9), numRows(9), playing(true), won(false)
+{
+    setObjectName("mainWidget");
+    srand(QTime(0,0,0).secsTo(QTime::currentTime()));
+
+    //initialize array
+    for(int ii = 0; ii < numRows * numCols; ++ii) {
+        _tiles << new Tile;
+    }
+
+    reset();
+
+    QVBoxLayout *vbox = new QVBoxLayout;
+    vbox->setMargin(0);
+    setLayout(vbox);
+
+    canvas = new QFxView(this);
+    canvas->setFixedSize(width, height);
+    vbox->addWidget(canvas);
+
+    QFile file(fileName);
+    file.open(QFile::ReadOnly);
+    QString qml = file.readAll();
+    canvas->setQml(qml, fileName);
+
+    QmlContext *ctxt = canvas->rootContext();
+    ctxt->addDefaultObject(this);
+
+    canvas->execute();
+}
+
+MyWidget::~MyWidget()
+{
+}
+
+void MyWidget::setBoard()
+{
+    foreach(Tile* t, _tiles){
+        t->setHasMine(false);
+        t->setHint(-1);
+    }
+    //place mines
+    int mines = nMines;
+    remaining = numRows*numCols-mines;
+    while ( mines ) {
+        int col = int((double(rand()) / double(RAND_MAX)) * numCols);
+        int row = int((double(rand()) / double(RAND_MAX)) * numRows);
+
+        Tile* t = tile( row, col );
+
+        if (t && !t->hasMine()) {
+            t->setHasMine( true );
+            mines--;
+        }
+    }
+
+    //set hints
+    for (int r = 0; r < numRows; r++)
+        for (int c = 0; c < numCols; c++) {
+            Tile* t = tile(r, c);
+            if (t && !t->hasMine()) {
+                int hint = getHint(r,c);
+                t->setHint(hint);
+            }
+        }
+
+    setPlaying(true);
+}
+
+void MyWidget::reset()
+{
+    foreach(Tile* t, _tiles){
+        t->unflip();
+        t->setHasFlag(false);
+    }
+    nMines = 12;
+    nFlags = 0;
+    setPlaying(false);
+    QTimer::singleShot(900,this, SLOT(setBoard()));
+}
+
+int MyWidget::getHint(int row, int col)
+{
+    int hint = 0;
+    for (int c = col-1; c <= col+1; c++)
+        for (int r = row-1; r <= row+1; r++) {
+            Tile* t = tile(r, c);
+            if (t && t->hasMine())
+                hint++;
+        }
+    return hint;
+}
+
+void MyWidget::flip(int row, int col)
+{
+    if(!playing)
+        return;
+
+    Tile *t = tile(row, col);
+    if (!t || t->hasFlag())
+        return;
+
+    if(t->flipped()){
+        int flags = 0;
+        for (int c = col-1; c <= col+1; c++)
+            for (int r = row-1; r <= row+1; r++) {
+                Tile *nearT = tile(r, c);
+                if(!nearT || nearT == t)
+                    continue;
+                if(nearT->hasFlag())
+                    flags++;
+            }
+        if(!t->hint() || t->hint() != flags)
+            return;
+        for (int c = col-1; c <= col+1; c++)
+            for (int r = row-1; r <= row+1; r++) {
+                Tile *nearT = tile(r, c);
+                if (nearT && !nearT->flipped() && !nearT->hasFlag()) {
+                    flip( r, c );
+                }
+            }
+        return;
+    }
+
+    t->flip();
+
+    if (t->hint() == 0) {
+        for (int c = col-1; c <= col+1; c++)
+            for (int r = row-1; r <= row+1; r++) {
+                Tile* t = tile(r, c);
+                if (t && !t->flipped()) {
+                    flip( r, c );
+                }
+            }
+    }
+
+    if(t->hasMine()){
+        for (int r = 0; r < numRows; r++)//Flip all other mines
+            for (int c = 0; c < numCols; c++) {
+                Tile* t = tile(r, c);
+                if (t && t->hasMine()) {
+                    flip(r, c);
+                }
+            }
+        won = false;
+        hasWonChanged();
+        setPlaying(false);
+    }
+
+    remaining--;
+    if(!remaining){
+        won = true;
+        hasWonChanged();
+        setPlaying(false);
+    }
+}
+
+void MyWidget::flag(int row, int col)
+{
+    Tile *t = tile(row, col);
+    if(!t)
+        return;
+
+    t->setHasFlag(!t->hasFlag());
+    nFlags += (t->hasFlag()?1:-1);
+    emit numFlagsChanged();
+}
+/////////////////////////////////////////////////////////
+
+int main(int argc, char ** argv)
+{
+    QApplication app(argc, argv);
+
+    bool frameless = false;
+
+    int width = 370;
+    int height = 480;
+
+    for (int i = 1; i < argc; ++i) {
+        QString arg = argv[i];
+        if (arg == "-frameless") {
+            frameless = true;
+        } else if(arg == "-width" && i < (argc - 1)) {
+            ++i;
+            width = ::atoi(argv[i]);
+        } else if(arg == "-height" && i < (argc - 1)) {
+            ++i;
+            height = ::atoi(argv[i]);
+        } else if (arg[0] != '-') {
+            fileName = arg;
+        }
+    }
+
+    MyWidget wid(width, height, 0, frameless ? Qt::FramelessWindowHint : Qt::Widget);
+    wid.show();
+
+    return app.exec();
+}
+
+#include "main.moc"
diff --git a/demos/declarative/minehunt/minehunt.pro b/demos/declarative/minehunt/minehunt.pro
new file mode 100644
index 0000000..01791b1
--- /dev/null
+++ b/demos/declarative/minehunt/minehunt.pro
@@ -0,0 +1,9 @@
+SOURCES = main.cpp
+
+QT += script declarative
+contains(QT_CONFIG, opengles2)|contains(QT_CONFIG, opengles1): QT += opengl
+
+target.path = $$[QT_INSTALL_EXAMPLES]/declarative/minehunt
+sources.files = $$SOURCES $$HEADERS $$RESOURCES $$FORMS minehunt.pro
+sources.path = $$[QT_INSTALL_EXAMPLES]/declarative/minehunt
+INSTALLS += target sources
diff --git a/demos/declarative/minehunt/minehunt.qml b/demos/declarative/minehunt/minehunt.qml
new file mode 100644
index 0000000..fa169aa
--- /dev/null
+++ b/demos/declarative/minehunt/minehunt.qml
@@ -0,0 +1,195 @@
+import Qt 4.6
+
+Item {
+    id: field
+    width: 370
+    height: 480
+
+    property int clickx : 0
+    property int clicky : 0
+
+    resources: [
+        Component {
+            id: tile
+            Flipable {
+                id: flipable
+                width: 40
+                height: 40
+                property int angle: 0;
+                transform: Rotation {
+                    origin.x: 20
+                    origin.y: 20
+                    axis.x: 1
+                    axis.z: 0
+                    angle: flipable.angle;
+                }
+                front: Image {
+                    source: "pics/front.png"
+                    width: 40
+                    height: 40
+                    Image {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        source: "pics/flag.png"
+                        opacity: modelData.hasFlag
+                        opacity: Behavior {
+                            NumberAnimation {
+                                property: "opacity"
+                                duration: 250
+                            }
+                        }
+                    }
+                }
+                back: Image {
+                    source: "pics/back.png"
+                    width: 40
+                    height: 40
+                    Text {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: modelData.hint
+                        color: "white"
+                        font.bold: true
+                        opacity: !modelData.hasMine && modelData.hint > 0
+                    }
+                    Image {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        source: "pics/bomb.png"
+                        opacity: modelData.hasMine
+                    }
+                    Explosion {
+                        id: expl
+                    }
+                }
+                states: [
+                    State {
+                        name: "back"
+                        when: modelData.flipped
+                        PropertyChanges { target: flipable; angle: 180 }
+                    }
+                ]
+                transitions: [
+                    Transition {
+                        SequentialAnimation {
+                            PauseAnimation {
+                                duration: {
+                                    var ret;
+                                    if(flipable.parent != null)
+                                        ret = Math.abs(flipable.parent.x-field.clickx)
+                                            + Math.abs(flipable.parent.y-field.clicky);
+                                    else
+                                        ret = 0;
+                                    if (ret > 0) {
+                                        if (modelData.hasMine && modelData.flipped) {
+                                            ret*3;
+                                        } else {
+                                            ret;
+                                        }
+                                    } else {
+                                        0;
+                                    }
+                                }
+                            }
+                            NumberAnimation {
+                                easing: "easeInOutQuad"
+                                properties: "angle"
+                            }
+                            ScriptAction{
+                                script: "if(modelData.hasMine && modelData.flipped){expl.explode = true;}"
+                            }
+                        }
+                    }
+                ]
+                MouseRegion {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.LeftButton | Qt.RightButton
+                    onPressed: {
+                        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);
+                        }
+                    }
+                }
+            }
+        }
+    ]
+    Image {
+        source: "pics/No-Ones-Laughing-3.jpg"
+        fillMode: "Tile"
+    }
+    Description {
+        text: "Use the 'minehunt' executable to run this demo!"
+        width: 300
+        opacity: tiles?0:1
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    Repeater {
+        model: tiles
+        x: 1
+        y: 1
+        Component {
+            ComponentInstance {
+                component: tile
+                x: (index - (Math.floor(index/9) * 9)) * 41
+                y: Math.floor(index/9) * 41
+            }
+        }
+    }
+    Row {
+        id: gamedata
+       // width: 370
+       // height: 100
+        y: 400
+        x: 20
+        spacing: 20
+        Column {
+            spacing: 2
+            width: childrenRect.width
+            Image {
+         //       x: 100
+         //       y: 20
+                source: "pics/bomb-color.png"
+            }
+            Text {
+         //       x: 100
+         //       y: 60
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "white"
+                text: numMines
+            }
+        }
+        Column {
+            spacing: 2
+            width: childrenRect.width
+            Image {
+         //       x: 140
+         //       y: 20
+                source: "pics/flag-color.png"
+            }
+            Text {
+         //       x: 140
+         //       y: 60
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "white"
+                text: numFlags
+            }
+        }
+    }
+    Image {
+        y: 390
+        anchors.right: field.right
+        anchors.rightMargin: 20
+        source: isPlaying ? 'pics/face-smile.png' : hasWon ? 'pics/face-smile-big.png': 'pics/face-sad.png'
+        MouseRegion {
+            anchors.fill: parent
+            onPressed: { reset() }
+        }
+    }
+}
diff --git a/demos/declarative/minehunt/pics/No-Ones-Laughing-3.jpg b/demos/declarative/minehunt/pics/No-Ones-Laughing-3.jpg
new file mode 100644
index 0000000..445567f
--- /dev/null
+++ b/demos/declarative/minehunt/pics/No-Ones-Laughing-3.jpg
diff --git a/demos/declarative/minehunt/pics/back.png b/demos/declarative/minehunt/pics/back.png
new file mode 100644
index 0000000..f6b3f0b
--- /dev/null
+++ b/demos/declarative/minehunt/pics/back.png
diff --git a/demos/declarative/minehunt/pics/bomb-color.png b/demos/declarative/minehunt/pics/bomb-color.png
new file mode 100644
index 0000000..61ad0a9
--- /dev/null
+++ b/demos/declarative/minehunt/pics/bomb-color.png
diff --git a/demos/declarative/minehunt/pics/bomb.png b/demos/declarative/minehunt/pics/bomb.png
new file mode 100644
index 0000000..a992575
--- /dev/null
+++ b/demos/declarative/minehunt/pics/bomb.png
diff --git a/demos/declarative/minehunt/pics/face-sad.png b/demos/declarative/minehunt/pics/face-sad.png
new file mode 100644
index 0000000..cf00aaf
--- /dev/null
+++ b/demos/declarative/minehunt/pics/face-sad.png
diff --git a/demos/declarative/minehunt/pics/face-smile-big.png b/demos/declarative/minehunt/pics/face-smile-big.png
new file mode 100644
index 0000000..f9c2335
--- /dev/null
+++ b/demos/declarative/minehunt/pics/face-smile-big.png
diff --git a/demos/declarative/minehunt/pics/face-smile.png b/demos/declarative/minehunt/pics/face-smile.png
new file mode 100644
index 0000000..3d66d72
--- /dev/null
+++ b/demos/declarative/minehunt/pics/face-smile.png
diff --git a/demos/declarative/minehunt/pics/flag-color.png b/demos/declarative/minehunt/pics/flag-color.png
new file mode 100644
index 0000000..aadad0f
--- /dev/null
+++ b/demos/declarative/minehunt/pics/flag-color.png
diff --git a/demos/declarative/minehunt/pics/flag.png b/demos/declarative/minehunt/pics/flag.png
new file mode 100644
index 0000000..39cde4d
--- /dev/null
+++ b/demos/declarative/minehunt/pics/flag.png
diff --git a/demos/declarative/minehunt/pics/front.png b/demos/declarative/minehunt/pics/front.png
new file mode 100644
index 0000000..834331b
--- /dev/null
+++ b/demos/declarative/minehunt/pics/front.png
diff --git a/demos/declarative/minehunt/pics/star.png b/demos/declarative/minehunt/pics/star.png
new file mode 100644
index 0000000..3772359
--- /dev/null
+++ b/demos/declarative/minehunt/pics/star.png
diff --git a/demos/declarative/twitter/content/AuthView.qml b/demos/declarative/twitter/content/AuthView.qml
new file mode 100644
index 0000000..6bd98b9
--- /dev/null
+++ b/demos/declarative/twitter/content/AuthView.qml
@@ -0,0 +1,92 @@
+import Qt 4.6
+import "../../flickr/common"
+import "../../flickr/mobile" 
+
+Item {
+    id: wrapper
+    Column {
+        width: childrenRect.width; height:childrenRect.height; anchors.centerIn: parent
+        spacing: 20
+        Row{
+            width: childrenRect.width; height:childrenRect.height;
+            spacing: 4
+            Text { 
+                width: 100
+                text: "Screen name:"
+                font.pointSize: 10; font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
+                anchors.verticalCenter: parent.verticalCenter
+                horizontalAlignment: Qt.AlignRight
+            }
+            Item {
+                width: 160
+                height: 28
+                BorderImage { source: "../../flickr/mobile/images/lineedit.sci"; anchors.fill: parent }
+                TextInput{
+                    id: nameIn
+                    width: parent.width - 8
+                    height: parent.height - 12
+                    anchors.centerIn: parent
+                    maximumLength:21
+                    font.bold: true
+                    color: "#151515"; highlightColor: "green"
+                    KeyProxy {
+                        id: Proxy
+                        targets: [(tabber), (nameIn)]
+                        focus: true
+                    }
+                    Item { 
+                        id: tabber
+                        //Note: it's not working yet
+                        Keys.onPressed: {if(event.key == Qt.Key_Tab){print('Tab works!'); passIn.focus = true; accept(); }}
+                    }
+                }
+            }
+        }
+        Row{
+            width: childrenRect.width; height:childrenRect.height;
+            spacing: 4
+            Text { 
+                width: 100
+                text: "Password:"
+                font.pointSize: 10; font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
+                anchors.verticalCenter: parent.verticalCenter
+                horizontalAlignment: Qt.AlignRight
+            }
+            Item {
+                width: 160
+                height: 28
+                BorderImage { source: "../../flickr/mobile/images/lineedit.sci"; anchors.fill: parent }
+                TextInput{
+                    id: passIn
+                    width: parent.width - 8
+                    height: parent.height - 12
+                    anchors.centerIn: parent
+                    maximumLength:21
+                    echoMode: 2
+                    font.bold: true
+                    color: "#151515"; highlightColor: "green"
+                }
+            }
+        }
+        Item{
+            width: childrenRect.width; anchors.horizontalCenter: parent.horizontalCenter
+            height: childrenRect.height
+            Button {
+                x: 10
+                width: 100
+                height: 32
+                id: login
+                text: "Log in"
+                onClicked: {RssModel.authName=nameIn.text; RssModel.authPass=passIn.text; RssModel.tags='my timeline';}
+            }
+            Button {
+                x: 120
+                width: 100
+                height: 32
+                id: guest
+                text: "Guest"
+                onClicked: RssModel.authName='inv'
+            }
+        }
+    }
+}
diff --git a/demos/declarative/twitter/content/FatDelegate.qml b/demos/declarative/twitter/content/FatDelegate.qml
new file mode 100644
index 0000000..a2e9c39
--- /dev/null
+++ b/demos/declarative/twitter/content/FatDelegate.qml
@@ -0,0 +1,47 @@
+import Qt 4.6
+import "../../flickr/common"
+
+Component {
+    id: ListDelegate
+    Item {
+        id: Wrapper; width: Wrapper.ListView.view.width; height: if(txt.height > 58){txt.height+8}else{58}//50+4+4
+        Script {
+            function handleLink(link){
+                if(link.slice(0,3) == 'app'){
+                    setUser(link.slice(7));
+                    Screen.setMode(true);
+                }else if(link.slice(0,4) == 'http'){
+                    Qt.DesktopServices.openUrl(link);
+                }
+            }
+            function addTags(str){
+                ret = str.replace(/@[a-zA-Z0-9_]+/g, '<a href="app://$&">$&</a>');//click to jump to user?
+                ret2 = ret.replace(/http:\/\/[^ \n\t]+/g, '<a href="$&">$&</a>');//surrounds http links with html link tags
+                return ret2;
+            }
+        }
+        Item {
+            id: MoveMe; height: parent.height
+            Rectangle { 
+                id: BlackRect
+                color: "black"; opacity: Wrapper.ListView.index % 2 ? 0.2 : 0.3; height: Wrapper.height-2; width: Wrapper.width; y: 1 
+            }
+            Rectangle {
+                id: WhiteRect; x: 6; width: 50; height: 50; color: "white"; smooth: true
+                anchors.verticalCenter: parent.verticalCenter
+
+                Loading { x: 1; y: 1; width: 48; height: 48; visible: RealImage.status != 1 } 
+                Image { id: RealImage; source: userImage; x: 1; y: 1; width:48; height:48 }
+            }
+            Text { id:txt; y:4; x: 56
+                text: '<html><style type="text/css">a:link {color:"#aaccaa"}; a:visited {color:"#336633"}</style>'
+                    + '<a href="app://@'+userScreenName+'"><b>'+userScreenName + "</b></a>  from " +source
+                    + "<br /><b>" + addTags(statusText) + "</b></html>";
+                textFormat: Qt.RichText
+                color: "white"; color: "#cccccc"; style: "Raised"; styleColor: "black"; wrap: true
+                anchors.left: WhiteRect.right; anchors.right: BlackRect.right; anchors.leftMargin: 6; anchors.rightMargin: 6
+                onLinkActivated: handleLink(link)
+            }
+        }
+    }
+}
diff --git a/demos/declarative/twitter/content/HomeTitleBar.qml b/demos/declarative/twitter/content/HomeTitleBar.qml
new file mode 100644
index 0000000..878a83e
--- /dev/null
+++ b/demos/declarative/twitter/content/HomeTitleBar.qml
@@ -0,0 +1,125 @@
+import Qt 4.6
+import "../../flickr/mobile"
+import "../../flickr/common"
+
+Item {
+    id: TitleBar
+
+    signal update()
+    onYChanged: state="" //When switching titlebars
+
+    BorderImage { source: "../../flickr/mobile/images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+    Item {
+        id: Container
+        width: (parent.width * 2) - 55 ; height: parent.height
+
+        Script {
+            function accept() {
+                if(RssModel.authName == '' || RssModel.authPass == '')
+                    return false;//Can't login like that
+
+                var postData = "status=" + Editor.text;
+                var postman = new XMLHttpRequest();
+                postman.open("POST", "http://twitter.com/statuses/update.xml", true, RssModel.authName,  RssModel.authPass);
+                postman.onreadystatechange = function() { 
+                    if (postman.readyState == postman.DONE) {
+                        TitleBar.update();
+                    }
+                }
+                postman.send(postData);
+
+                TitleBar.state = ""
+            }
+        }
+
+        Rectangle {
+            id: WhiteRect; x: 6; width: 50; height: 50; color: "white"; smooth: true
+            anchors.verticalCenter: parent.verticalCenter
+
+            UserModel { user: RssModel.authName; id: userModel }
+            Component { id: imgDelegate; 
+                Item { id: Wrapper
+                    Loading { width:48; height:48; visible: realImage.status != 1 } 
+                    Image { source: image; width:48; height:48; id: realImage } 
+                }
+            } 
+            ListView { model: userModel.model; x:1; y:1; delegate: imgDelegate }
+        }
+
+        Text {
+            id: CategoryText
+            anchors.left: parent.left; anchors.right: TagButton.left
+            anchors.leftMargin: 58; anchors.rightMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            elide: "ElideLeft"
+            text: "Timeline for " + RssModel.authName
+            font.pointSize: 10; font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
+        }
+
+        Button {
+            id: TagButton; x: TitleBar.width - 90; width: 85; height: 32; text: "New Post..."
+            anchors.verticalCenter: parent.verticalCenter;
+            onClicked: if (TitleBar.state == "Posting") accept(); else TitleBar.state = "Posting"
+        }
+
+        Text {
+            id: charsLeftText; anchors.horizontalCenter: TagButton.horizontalCenter;
+            anchors.top: TagButton.bottom; anchors.topMargin: 2
+            text: {140 - Editor.text.length;} visible: TitleBar.state == "Posting"
+            font.pointSize: 10; font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
+        }
+        Item {
+            id: txtEdit;
+            anchors.left: TagButton.right; anchors.leftMargin: 5; y: 4
+            anchors.right: parent.right; anchors.rightMargin: 40; height: parent.height - 9
+            BorderImage { source: "../../flickr/mobile/images/lineedit.sci"; anchors.fill: parent }
+
+            Binding {//TODO: Can this be a function, which also resets the cursor? And flashes?
+                when: Editor.text.length > 140
+                target: Editor
+                property: "text"
+                value: Editor.text.slice(0,140)
+            }
+            TextEdit {
+                id: Editor
+                anchors.left: parent.left; 
+                anchors.leftMargin: 8;
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 4;
+                cursorVisible: true; font.bold: true
+                width: parent.width - 12
+                height: parent.height - 8
+                font.pointSize: 10
+                wrap:true
+                color: "#151515"; highlightColor: "green"
+            }
+            KeyProxy {
+                id: Proxy
+                anchors.fill: parent
+                targets: [(ReturnKey), (Editor)]
+            }
+            Item {
+                id: ReturnKey
+                Keys.onReturnPressed: accept()
+                Keys.onEscapePressed: TitleBar.state = ""
+            }
+        }
+    }
+    states: [
+        State {
+            name: "Posting"
+            PropertyChanges { target: Container; x: -TagButton.x + 5 }
+            PropertyChanges { target: TitleBar; height: 80 }
+            PropertyChanges { target: TagButton; text: "OK" }
+            PropertyChanges { target: TagButton; width: 28 }
+            PropertyChanges { target: TagButton; height: 24 }
+            PropertyChanges { target: Proxy; focus: true }
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "*"; to: "*"
+            NumberAnimation { properties: "x,y,width,height"; easing: "easeInOutQuad" }
+        }
+    ]
+}
diff --git a/demos/declarative/twitter/content/MultiTitleBar.qml b/demos/declarative/twitter/content/MultiTitleBar.qml
new file mode 100644
index 0000000..6a6a28f
--- /dev/null
+++ b/demos/declarative/twitter/content/MultiTitleBar.qml
@@ -0,0 +1,25 @@
+import Qt 4.6
+import "../../flickr/mobile"
+
+Item {
+    height: HomeBar.height
+    HomeTitleBar { id: HomeBar; width: parent.width; height: 60; 
+        onUpdate: RssModel.reload()
+    }
+    TitleBar { id: TitleBar; width: parent.width; height: 60;
+        y: -80
+        untaggedString: "Latest tweets from everyone"
+        taggedString: "Latest tweets from "
+    }
+    states: [
+        State {
+            name: "search"; when: Screen.userView
+            PropertyChanges { target: TitleBar; y: 0 }
+            PropertyChanges { target: HomeBar; y: -80 }
+        }
+    ]
+    transitions: [
+        Transition { NumberAnimation { properties: "x,y"; duration: 500; easing: "easeInOutQuad" } }
+    ]
+}
+
diff --git a/demos/declarative/twitter/content/RssModel.qml b/demos/declarative/twitter/content/RssModel.qml
new file mode 100644
index 0000000..144d7af
--- /dev/null
+++ b/demos/declarative/twitter/content/RssModel.qml
@@ -0,0 +1,42 @@
+import Qt 4.6
+
+Item { id: wrapper
+    property var model: xmlModel
+    property string tags : ""
+    property string authName : ""
+    property string authPass : ""
+    property string mode : "everyone"
+    property int status: xmlModel.status
+    function reload() { xmlModel.reload(); }
+XmlListModel {
+    id: xmlModel
+
+    source: if (wrapper.authName == ""){
+                ""; //Avoid worthless calls to twitter servers
+            }else if(wrapper.mode == 'user'){
+                "https://"+ ((wrapper.authName!="" && wrapper.authPass!="")? (wrapper.authName+":"+wrapper.authPass+"@") : "" )+"twitter.com/statuses/user_timeline.xml?screen_name="+wrapper.tags;
+            }else if(wrapper.mode == 'self'){
+                "https://"+ ((wrapper.authName!="" && wrapper.authPass!="")? (wrapper.authName+":"+wrapper.authPass+"@") : "" )+"twitter.com/statuses/friends_timeline.xml";
+            }else{//everyone/public
+                "http://twitter.com/statuses/public_timeline.xml";
+            }
+    query: "/statuses/status"
+
+    XmlRole { name: "statusText"; query: "text/string()" }
+    XmlRole { name: "timestamp"; query: "created_at/string()" }
+    XmlRole { name: "source"; query: "source/string()" }
+    XmlRole { name: "userName"; query: "user/name/string()" }
+    XmlRole { name: "userScreenName"; query: "user/screen_name/string()" }
+    XmlRole { name: "userImage"; query: "user/profile_image_url/string()" }
+    XmlRole { name: "userLocation"; query: "user/location/string()" }
+    XmlRole { name: "userDescription"; query: "user/description/string()" }
+    XmlRole { name: "userFollowers"; query: "user/followers_count/string()" }
+    XmlRole { name: "userStatuses"; query: "user/statuses_count/string()" }
+    //TODO: Could also get the user's color scheme, timezone and a few other things
+}
+Binding {
+    property: "mode"
+    target: wrapper
+    value: {if(wrapper.tags==''){"everyone";}else if(wrapper.tags=='my timeline'){"self";}else{"user";}}
+}
+}
diff --git a/demos/declarative/twitter/content/UserModel.qml b/demos/declarative/twitter/content/UserModel.qml
new file mode 100644
index 0000000..c146b84
--- /dev/null
+++ b/demos/declarative/twitter/content/UserModel.qml
@@ -0,0 +1,26 @@
+import Qt 4.6
+
+//This "model" gets the user information about the searched user. Mainly for the icon.
+//Copied from RssModel
+
+Item { id: wrapper
+    property var model: xmlModel
+    property string user : ""
+    property int status: xmlModel.status
+    function reload() { xmlModel.reload(); }
+XmlListModel {
+    id: xmlModel
+
+    source: {if(user!="") {"http://twitter.com/users/show.xml?screen_name="+user;}else{"";}}
+    query: "/user"
+
+    XmlRole { name: "name"; query: "name/string()" }
+    XmlRole { name: "screenName"; query: "screen_name/string()" }
+    XmlRole { name: "image"; query: "profile_image_url/string()" }
+    XmlRole { name: "location"; query: "location/string()" }
+    XmlRole { name: "description"; query: "description/string()" }
+    XmlRole { name: "followers"; query: "followers_count/string()" }
+    //XmlRole { name: "protected"; query: "protected/bool()" }
+    //TODO: Could also get the user's color scheme, timezone and a few other things
+}
+}
diff --git a/demos/declarative/twitter/twitter.qml b/demos/declarative/twitter/twitter.qml
new file mode 100644
index 0000000..566832b
--- /dev/null
+++ b/demos/declarative/twitter/twitter.qml
@@ -0,0 +1,87 @@
+import Qt 4.6
+import "content" as Twitter
+import "../flickr/common" as Common
+import "../flickr/mobile" as Mobile
+
+Item {
+    id: Screen; width: 320; height: 480
+    property bool userView : false 
+    function setMode(m){
+        Screen.userView = m;
+        if(m == false){ 
+            RssModel.tags='my timeline';
+            RssModel.reload();
+            ToolBar.button2Label = "View others";
+        } else {
+            ToolBar.button2Label = "Return home";
+        }
+    }
+    //Workaround for bug 260266
+    Timer{ interval: 1; running: false; repeat: false; onTriggered: reallySetUser(); id:hack }
+    Script{
+        var tmpStr;
+        function setUser(str){hack.running = true; tmpStr = str}
+        function reallySetUser(){RssModel.tags = tmpStr;}
+    }
+
+    Rectangle {
+        id: Background
+        anchors.fill: parent; color: "#343434";
+
+        Image { source: "mobile/images/stripes.png"; fillMode: "Tile"; anchors.fill: parent; opacity: 0.3 }
+
+        Twitter.RssModel { id: RssModel }
+        Common.Loading { anchors.centerIn: parent; visible: RssModel.status && state!='unauthed'}
+
+        Item {
+            id: Views
+            x: 2; width: parent.width - 4
+            y:60 //Below the title bars
+            height: 320
+
+            Twitter.AuthView{
+                id: authView
+                anchors.verticalCenter: parent.verticalCenter
+                width: parent.width; height: parent.height-60; 
+                x: -(Screen.width * 1.5)
+            }
+
+            Twitter.FatDelegate { id: FatDelegate }
+            ListView {
+                id: MainView; model: RssModel.model; delegate: FatDelegate;
+                width: parent.width; height: parent.height; x: 0; cacheBuffer: 100;
+            }
+        }
+
+        Twitter.MultiTitleBar { id: TitleBar; width: parent.width }
+        Mobile.ToolBar { id: ToolBar; height: 40; 
+            //anchors.bottom: parent.bottom; 
+            //TODO: Use anchor changes instead of hard coding
+            y: 440
+            width: parent.width; opacity: 0.9 
+            button1Label: "Update"
+            button2Label: "View others"
+            onButton2Clicked: 
+            {
+                if(Screen.userView == true){
+                    Screen.setMode(false);
+                }else{
+                    Screen.setMode(true);
+                }
+            }
+        }
+
+        states: [
+            State {
+                name: "unauthed"; when: RssModel.authName==""
+                PropertyChanges { target: authView; x: 0 }
+                PropertyChanges { target: MainView; x: -(parent.width * 1.5) }
+                PropertyChanges { target: TitleBar; y: -80 }
+                PropertyChanges { target: ToolBar; y: Screen.height + 80 }
+            }
+        ]
+        transitions: [
+            Transition { NumberAnimation { properties: "x,y"; duration: 500; easing: "easeInOutQuad" } }
+        ]
+    }
+}