39e013bcedd42abed54b79751c63f1bcf4b81d29
[codereview/qtwebservice.git] / examples / webservice / official / root / examples / chat.qml
1 /* Copyright (c) 2012 QtWebService Project.
2  * All rights reserved.
3  * 
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions are met:
6  *     * Redistributions of source code must retain the above copyright
7  *       notice, this list of conditions and the following disclaimer.
8  *     * Redistributions in binary form must reproduce the above copyright
9  *       notice, this list of conditions and the following disclaimer in the
10  *       documentation and/or other materials provided with the distribution.
11  *     * Neither the name of the QtWebService nor the
12  *       names of its contributors may be used to endorse or promote products
13  *       derived from this software without specific prior written permission.
14  * 
15  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
16  * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
17  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
18  * DISCLAIMED. IN NO EVENT SHALL QTWEBSERVICE BE LIABLE FOR ANY
19  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
20  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
21  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
22  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
23  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
24  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
25  */
26
27 import QtQml 2.0
28 import QtWebService.HTML 5.0
29 import QtWebService.Utils 1.0
30 import "./components"
31
32 Html {
33     Client {
34         id: client
35         connectionName: 'websocketChatServer'
36         onRespond: messages.model = message.messages;
37     }
38
39     Component.onCompleted: {
40         client.request({"action": "messages"}, client);
41     }
42
43     WebServiceConfig {
44         id: config
45         property var websocket: {"host": http.host, "port": http.port }
46     }
47
48     Head {
49         Title { id: title; text: "chat" }
50         Script { type: "text/javascript"; src: "./chat.js" }
51     }
52
53     Body {
54         onload: "connect('ws://%1:%2/examples/chatserver.qml');".arg(config.websocket.host).arg(config.websocket.port)
55         H1 { text: title.text }
56
57         Form {
58             onsubmit: "post(); return false;"
59
60             Dl {
61                 _id: "dl"
62
63                 Dt { Input { _id: "name"; type: "text"; name: "name"; size: '10'; placeholder: "Name" } }
64                 Dd {
65                     _id: "input"
66                     Input { _id: "message"; type: "text"; name: "message"; size: '30'; placeholder: "Message..." }
67                     Input { type: "submit"; value: "Send" }
68                 }
69
70                 Repeater {
71                     id: messages
72                     model: []
73                     Component {
74                         Dt { text: model.user.replace(/&/g, '&') }
75                     }
76                     Component {
77                         Dd { text: model.message.replace(/&/g, '&') }
78                     }
79                 }
80             }
81         }
82     }
83 }