Meego Wiki
Views

QtWorkshop/TeamSirloin

From MeeGo wiki
Jump to: navigation, search

Contents

Team Sirloin

Our goal

Write an application to show in real time tweets tagged with #MeeGoConf

Our result

It worked!

The code

import QtQuick 1.0

Rectangle {
    width:  520
    height: 360

    Component {
        id : listComponent

        Rectangle {
            height: 80
            width: parent.width

            Image {
                id: avatar
                source: image_url
                width: parent.height-6
                height:  parent.height-6
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.margins: 3
            }

            Rectangle {
                anchors.left:  avatar.right
                anchors.right: parent.right
                height:  parent.height - 6
                anchors.margins: 3
                color: index % 2
                    ? "grey"
                    : "lightgrey"

                Text {
                    id: msg
                    height: 60
                    text: from + ": " + tweet
                    horizontalAlignment:Text.AlignLeft
                    anchors.top: parent.top
                    width:  parent.width
                    wrapMode: Text.WordWrap
                }

                Text {
                    text: posted
                    width:  parent.width
                    height:  parent.height-msg.height
                    anchors.top: msg.bottom
                    horizontalAlignment: Text.AlignRight
                    verticalAlignment: Text.AlignBottom
                }
            }
        }
    }

    ListModel {
        id: tweetModel
    }

    Timer {
        interval: 1000
        running: true
        repeat: true
        onTriggered: { loadData() }
    }

    function loadData() {
        var xhr = new XMLHttpRequest;
        xhr.onreadystatechange = function() {
            if (xhr.readyState == XMLHttpRequest.DONE) {
                var data = JSON.parse(xhr.responseText);
                var o
                tweetModel.clear()
                for (var i=0; (o = data['results'][i]); i++) {
                    tweetModel.append({posted: o.created_at,
                                      from: o.from_user,
                                      tweet: o.text,
                                      image_url: o.profile_image_url})
                }
            }
        }
        xhr.open("GET", "http://search.twitter.com/search.json?q=%23MeeGoConf&result_type=recent")
        xhr.send()
    }

    ListView {
         width: parent.width;
         height: count * 20
         anchors.centerIn: parent
         model: tweetModel
         delegate: listComponent
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}
Personal tools