sample/app/main.qml

   1 import QtQuick 2.7
   2 import QtQuick.Window 2.2
   3 import QtQuick.Controls 2.0
   4 import QtQuick.Layouts 1.0
   5 import AGL.Demo.Controls 1.0
   6
   7 ApplicationWindow {
   8     id: root
   9     visible: true
  10     width: Screen.width
  11     height: Screen.height
  12
  13     property string onsId: qsTr("onscreenapp")
  14     property string onsTitle: qsTr("One Button title")
  15     property string onsType: "critical"
  16     property string onsContents: qsTr("An operating system is a program that manages a computer’s hardware.")
  17     property string onsButton1: qsTr("Yes")
  18     property string onsButton2: qsTr("")
  19     property string onsButton3: qsTr("")
  20     property string postmsg: qsTr("")
  21     property string btndata: qsTr("")
  22     property int pid: -1
  23
  24     Label {
  25         id: title
  26         width: parent.width
  27         height: 40
  28         text: "OnScreen Test App"
  29         font.pixelSize: 40
  30         font.bold: true
  31         color: "white"
  32     }
  33
  34     ColumnLayout {
  35         spacing: 20
  36         anchors.top: title.bottom
  37         anchors.topMargin: 40
  38         anchors.horizontalCenter: title.horizontalCenter
  39
  40         // show received reply information area
  41         Flickable {
  42              id: flickable
  43              width: 800
  44              height: 320
  45              Layout.alignment: Qt.AlignCenter
  46              flickableDirection: Flickable.VerticalFlick
  47              boundsBehavior: Flickable.StopAtBounds
  48
  49              TextArea.flickable: TextArea {
  50                  id: output
  51                  text: "show received reply information area\n...\n...\n...\n...\n"
  52                  font.pixelSize: 24
  53                  wrapMode: TextArea.Wrap
  54                  color: '#00ADDC'
  55              }
  56
  57              ScrollBar.vertical: ScrollBar { }
  58          }
  59
  60         // select onscreen type area
  61         GroupBox {
  62             label: Label {
  63                 text: qsTr("Please select send OnScreen Message")
  64                 font.pixelSize: 32
  65                 font.bold: true
  66                 color: "white"
  67             }
  68
  69             width: 800
  70             height: 100
  71             Layout.alignment: Qt.AlignLeft
  72
  73             RowLayout {
  74                 anchors.fill: parent
  75                 RadioButton {
  76                     text: qsTr("One Button")
  77                     font.pixelSize: 20
  78                     checked: true
  79                     onClicked: {
  80                         selectOneButton();
  81                     }
  82                 }
  83                 RadioButton {
  84                     text: qsTr("Two Buttons")
  85                     font.pixelSize: 20
  86                     onClicked: {
  87                         selectTwoButtons();
  88                     }
  89                 }
  90                 RadioButton {
  91                     text: qsTr("Three Buttons")
  92                     font.pixelSize: 20
  93                     onClicked: {
  94                         selectThreeButtons();
  95                     }
  96                 }
  97                 RadioButton {
  98                     text: qsTr("No Button")
  99                     font.pixelSize: 20
 100                     onClicked: {
 101                         selectNoButton();
 102                     }
 103                 }
 104             }
 105         }
 106
 107         // edit post message area
 108         GroupBox {
 109             label: Label {
 110                 text: qsTr("Post Infomations")
 111                 font.pixelSize: 32
 112                 font.bold: true
 113                 color: "white"
 114             }
 115             width: 800
 116             height: 400
 117             Layout.alignment: Qt.AlignLeft
 118             Layout.maximumWidth: 800
 119             Layout.maximumHeight: 400
 120
 121             ColumnLayout {
 122                 spacing:  20
 123                 RowLayout {
 124                     spacing: 20
 125                     Label {
 126                         id: ons_title
 127                         anchors.left: parent.left
 128                         anchors.leftMargin: 30
 129                         text: qsTr("ons_title:")
 130                         font.pixelSize: 20
 131                         font.italic: true
 132                         color: '#00ADDC'
 133                     }
 134
 135                     Label {
 136                         id: ons_title_data
 137                         text: onsTitle
 138                         font.pixelSize: 20
 139                         font.italic: true
 140                         anchors.left: ons_title.right
 141                         anchors.leftMargin: 20
 142                         color: '#00ADDC'
 143                         Layout.maximumWidth: 600
 144                         Layout.maximumHeight: 40
 145                         maximumLineCount: 1
 146                         wrapMode: Text.Wrap
 147                         elide: Text.ElideRight
 148                         horizontalAlignment: Label.AlignHCenter
 149                         verticalAlignment: Label.AlignVCenter
 150                     }
 151                 }
 152                 RowLayout {
 153                     spacing: 20
 154                     Label {
 155                         id: ons_type
 156                         anchors.left: parent.left
 157                         anchors.leftMargin: 30
 158                         text: qsTr("type:")
 159                         font.pixelSize: 20
 160                         font.italic: true
 161                         color: '#00ADDC'
 162                     }
 163
 164                     Label {
 165                         id: ons_type_data
 166                         text: onsType
 167                         font.pixelSize: 20
 168                         font.italic: true
 169                         anchors.left: ons_type.right
 170                         anchors.leftMargin: 20
 171                         color: '#00ADDC'
 172                     }
 173                 }
 174                 RowLayout {
 175                     spacing: 20
 176                     Label {
 177                         id: ons_contents
 178                         anchors.left: parent.left
 179                         anchors.leftMargin: 30
 180                         text: qsTr("contents:")
 181                         font.pixelSize: 20
 182                         font.italic: true
 183                         color: '#00ADDC'
 184                     }
 185                     Label {
 186                         id: ons_contents_data
 187                         text: onsContents
 188                         font.pixelSize: 20
 189                         font.italic: true
 190                         anchors.left: ons_contents.right
 191                         anchors.leftMargin: 20
 192                         color: '#00ADDC'
 193                         Layout.maximumWidth: 600
 194                         Layout.maximumHeight: 200
 195                         maximumLineCount: 4
 196                         wrapMode: Text.Wrap
 197                         elide: Text.ElideRight
 198                         horizontalAlignment: Label.AlignLeft
 199                         verticalAlignment: Label.AlignVCenter
 200                     }
 201                 }
 202                 RowLayout {
 203                     spacing: 20
 204                     Label {
 205                         id: btn1
 206                         anchors.left: parent.left
 207                         anchors.leftMargin: 30
 208                         text: qsTr("Button1")
 209                         font.pixelSize: 20
 210                         font.italic: true
 211                         color: '#00ADDC'
 212                     }
 213
 214                     Label {
 215                         id: btn1_data
 216                         text: onsButton1
 217                         font.pixelSize: 20
 218                         font.italic: true
 219                         anchors.left: btn1.right
 220                         anchors.leftMargin: 20
 221                         color: '#00ADDC'
 222                     }
 223                 }
 224                 RowLayout {
 225                     spacing: 20
 226                     Label {
 227                         id: btn2
 228                         anchors.left: parent.left
 229                         anchors.leftMargin: 30
 230                         text: qsTr("Button2")
 231                         font.pixelSize: 20
 232                         font.italic: true
 233                         color: '#00ADDC'
 234                     }
 235                     Label {
 236                         id: btn2_data
 237                         text: onsButton2
 238                         font.pixelSize: 20
 239                         font.italic: true
 240                         anchors.left: btn2.right
 241                         anchors.leftMargin: 20
 242                         color: '#00ADDC'
 243                     }
 244                 }
 245                 RowLayout {
 246                     spacing: 20
 247                     Label {
 248                         id: btn3
 249                         anchors.left: parent.left
 250                         anchors.leftMargin: 30
 251                         text: qsTr("Button3")
 252                         font.pixelSize: 20
 253                         font.italic: true
 254                         color: '#00ADDC'
 255                     }
 256                     Label {
 257                         id: btn3_data
 258                         text: onsButton3
 259                         font.pixelSize: 20
 260                         font.italic: true
 261                         anchors.left: btn3.right
 262                         anchors.leftMargin: 20
 263                         color: '#00ADDC'
 264                     }
 265                 }
 266             }
 267         }
 268
 269         // post button
 270         Button {
 271             id: poster
 272             text: "Post"
 273             Layout.alignment: Qt.AlignCenter
 274             onClicked: {
 275                 postMessage();
 276             }
 277         }
 278     }
 279
 280     function selectOneButton() {
 281         console.log("select one button!")
 282         onsTitle = qsTr("One Button title")
 283         onsType = qsTr("critical")
 284         onsContents = qsTr("An operating system is a program that manages a computer’s hardware.")
 285         onsButton1 = qsTr("Yes")
 286         onsButton2 = qsTr("")
 287         onsButton3 = qsTr("")
 288     }
 289
 290     function selectTwoButtons() {
 291         console.log("select two buttons!")
 292         onsTitle = qsTr("Two Buttons title")
 293         onsType = qsTr("exclamation")
 294         onsContents = qsTr("Beforewe can explore the details of computer system operation, we need to know something about system structure. We thus discuss the basic functions of system startup, I/O, and storage early in this chapter. We also describe the basic computer architecture that makes it possible to write a functional operating system.")
 295         onsButton1 = qsTr("Yes")
 296         onsButton2 = qsTr("No")
 297         onsButton3 = qsTr("")
 298     }
 299
 300     function selectThreeButtons() {
 301         console.log("select three buttons!")
 302         onsTitle = qsTr("Three Buttons title")
 303         onsType = qsTr("information")
 304         onsContents = qsTr("We can also view a computer system as consisting of hardware, software,and data. The operating system provides the means for proper use of these resources in the operation of the computer system.")
 305         onsButton1 = qsTr("Yes")
 306         onsButton2 = qsTr("Abort")
 307         onsButton3 = qsTr("No")
 308     }
 309
 310     function selectNoButton() {
 311         console.log("select no button!")
 312         onsTitle = qsTr("No Button title,very long title beyond screen wide which will show ellipsis at the end")
 313         onsType = qsTr("question")
 314         onsContents = qsTr("Recently, many varieties of mobile computers, such as smartphones and tablets, have come into fashion. Most mobile computers are standalone units for individual users. Quite often, they are connected to networks through cellular or other wireless technologies. Increasingly, these mobile devices are replacing desktop and laptop computers for people who are primarily interested in using computers for e-mail and web browsing. The user interface for mobile computers generally features a touch screen, where the user interacts with the system by pressing and swiping fingers across the screen rather than using a physical keyboard and mouse.")
 315         onsButton1 = qsTr("")
 316         onsButton2 = qsTr("")
 317         onsButton3 = qsTr("")
 318     }
 319
 320     function postMessage() {
 321         console.log("poster pressed")
 322         btndata = ""
 323         postmsg = "{\"title\": \"" + onsTitle + "\"," + "\"type\": \"" + onsType + "\"," + "\"contents\": \"" + onsContents + "\"";
 324         if (onsButton1 != "") {
 325             btndata = "\"" + onsButton1 + "\"";
 326         }
 327         if (onsButton2 != "") {
 328             if (btndata != "")
 329                 btndata += ",";
 330             btndata += "\"" + onsButton2 + "\"";
 331         }
 332         if (onsButton3 != "") {
 333             if (btndata != "")
 334                 btndata += ",";
 335             btndata += "\"" + onsButton3 + "\"";
 336         }
 337
 338         if(btndata != "")
 339             postmsg += ",\"buttons\":[" + btndata + "]}"
 340         else
 341             postmsg += "}"
 342
 343         // if the application is not already started, start it
 344         if (pid == -1) {
 345                 // if the application is not started, then the first time
 346                 // we start we also display it using the default policy engine
 347                 pid = eventHandler.start(onsId, postmsg)
 348         } else {
 349                 // we just need to display it
 350                 eventHandler.showWindow(onsId, postmsg)
 351         }
 352     }
 353
 354     function qmlOnReplyShowWindow(text) {
 355         console.log("onstestapp received:",text);
 356         output.text = text;
 357     }
 358 }