examples/declarative/xmldata/yahoonews.qml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

Rect {
    gradient: Gradient {
        GradientStop { position: 0; color: "black" }
        GradientStop { position: 1.0; color: "#AAAAAA" }
    }
    width: 600
    height: 600
    resources: [
        XmlListModel {
            id: feedModel
            source: "http://rss.news.yahoo.com/rss/oceania"
            query: "doc($src)/rss/channel/item"
            Role {
                name: "title"
                query: "title/string()"
            }
            Role {
                name: "link"
                query: "link/string()"
            }
            Role {
                name: "description"
                query: "description/string()"
            }
        },
        Component {
            id: feedDelegate
            Item {
                id: Delegate
                height: Wrapper.height + 10
                MouseRegion {
                    anchors.fill: Wrapper
                    onPressed: { Delegate.ListView.list.currentIndex = index; }
                    onClicked: { if (Wrapper.state == 'Details') { Wrapper.state = '';} else {Wrapper.state = 'Details';} }
                }
                Rect {
                    id: Wrapper
                    y: 5
                    height: TitleText.height + 10
                    width: 580
                    color: "#F0F0F0"
                    radius: 5
                    Text {
                        x: 10
                        y: 5
                        id: TitleText
                        text: '<a href=\'' + link + '\'>' + title + '</a>'
                        font.bold: true
                        font.family: "Helvetica"
                        font.size: 14
                        onLinkActivated: { print('link clicked: ' + link) }
                    }
                    Text {
                        x: 10
                        id: Description
                        text: description
                        width: 560
                        wrap: true
                        font.family: "Helvetica"
                        anchors.top: TitleText.bottom
                        anchors.topMargin: 5
                        opacity: 0
                    }
                    states: [
                        State {
                            name: "Details"
                            SetProperties { target: Wrapper; height: contents.height + 10 }
                            SetProperties { target: Description; opacity: 1 } 
                        }
                    ]
                    transitions: [
                        Transition {
                            fromState: "*"
                            toState: "Details"
                            reversible: true
                            SequentialAnimation {
                                NumberAnimation {
                                    duration: 200
                                    properties: "height"
                                    easing: "easeOutQuad"
                                }
                                NumberAnimation {
                                    duration: 200
                                    properties: "opacity"
                                }
                            }
                        }
                    ]
                }
            }
        }
    ]
    ListView {
        id: list
        x: 10
        y: 10
        width: parent.width - 20
        height: parent.height - 20
        clip: true
        model: feedModel
        delegate: feedDelegate
        currentItemPositioning: "Snap"
    }
}