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: 1080
  11     height: 1487
  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
  23     Label {
  24         id: title
  25         width: parent.width
  26         height: 40
  27         text: "OnScreen Test App"
  28         font.pixelSize: 40
  29         font.bold: true
  30         color: "white"
  31     }
  32
  33     ColumnLayout {
  34         spacing: 20
  35         anchors.top: title.bottom
  36         anchors.topMargin: 40
  37         anchors.horizontalCenter: title.horizontalCenter
  38
  39         // show received reply information area
  40         Flickable {
  41              id: flickable
  42              width: 800
  43              height: 320
  44              Layout.alignment: Qt.AlignCenter
  45              flickableDirection: Flickable.VerticalFlick
  46              boundsBehavior: Flickable.StopAtBounds
  47
  48              TextArea.flickable: TextArea {
  49                  id: output
  50                  text: "show received reply information area\n...\n...\n...\n...\n"
  51                  font.pixelSize: 24
  52                  wrapMode: TextArea.Wrap
  53                  color: '#00ADDC'
  54              }
  55
  56              ScrollBar.vertical: ScrollBar { }
  57          }
  58
  59         // select onscreen type area
  60         GroupBox {
  61             label: Label {
  62                 text: qsTr("Please select send OnScreen Message")
  63                 font.pixelSize: 32
  64                 font.bold: true
  65                 color: "white"
  66             }
  67
  68             width: 800
  69             height: 100
  70             Layout.alignment: Qt.AlignLeft
  71
  72             RowLayout {
  73                 anchors.fill: parent
  74                 RadioButton {
  75                     text: qsTr("One Button")
  76                     font.pixelSize: 20
  77                     checked: true
  78                     onClicked: {
  79                         selectOneButton();
  80                     }
  81                 }
  82                 RadioButton {
  83                     text: qsTr("Two Buttons")
  84                     font.pixelSize: 20
  85                     onClicked: {
  86                         selectTwoButtons();
  87                     }
  88                 }
  89                 RadioButton {
  90                     text: qsTr("Three Buttons")
  91                     font.pixelSize: 20
  92                     onClicked: {
  93                         selectThreeButtons();
  94                     }
  95                 }
  96                 RadioButton {
  97                     text: qsTr("No Button")
  98                     font.pixelSize: 20
  99                     onClicked: {
 100                         selectNoButton();
 101                     }
 102                 }
 103             }
 104         }
 105
 106         // edit post message area
 107         GroupBox {
 108             label: Label {
 109                 text: qsTr("Post Infomations")
 110                 font.pixelSize: 32
 111                 font.bold: true
 112                 color: "white"
 113             }
 114             width: 800
 115             height: 400
 116             Layout.alignment: Qt.AlignLeft
 117             Layout.maximumWidth: 800
 118             Layout.maximumHeight: 400
 119
 120             ColumnLayout {
 121                 spacing:  20
 122                 RowLayout {
 123                     spacing: 20
 124                     Label {
 125                         id: ons_title
 126                         anchors.left: parent.left
 127                         anchors.leftMargin: 30
 128                         text: qsTr("ons_title:")
 129                         font.pixelSize: 20
 130                         font.italic: true
 131                         color: '#00ADDC'
 132                     }
 133
 134                     Label {
 135                         id: ons_title_data
 136                         text: onsTitle
 137                         font.pixelSize: 20
 138                         font.italic: true
 139                         anchors.left: ons_title.right
 140                         anchors.leftMargin: 20
 141                         color: '#00ADDC'
 142                         Layout.maximumWidth: 600
 143                         Layout.maximumHeight: 40
 144                         maximumLineCount: 1
 145                         wrapMode: Text.Wrap
 146                         elide: Text.ElideRight
 147                         horizontalAlignment: Label.AlignHCenter
 148                         verticalAlignment: Label.AlignVCenter
 149                     }
 150                 }
 151                 RowLayout {
 152                     spacing: 20
 153                     Label {
 154                         id: ons_type
 155                         anchors.left: parent.left
 156                         anchors.leftMargin: 30
 157                         text: qsTr("type:")
 158                         font.pixelSize: 20
 159                         font.italic: true
 160                         color: '#00ADDC'
 161                     }
 162
 163                     Label {
 164                         id: ons_type_data
 165                         text: onsType
 166                         font.pixelSize: 20
 167                         font.italic: true
 168                         anchors.left: ons_type.right
 169                         anchors.leftMargin: 20
 170                         color: '#00ADDC'
 171                     }
 172                 }
 173                 RowLayout {
 174                     spacing: 20
 175                     Label {
 176                         id: ons_contents
 177                         anchors.left: parent.left
 178                         anchors.leftMargin: 30
 179                         text: qsTr("contents:")
 180                         font.pixelSize: 20
 181                         font.italic: true
 182                         color: '#00ADDC'
 183                     }
 184                     Label {
 185                         id: ons_contents_data
 186                         text: onsContents
 187                         font.pixelSize: 20
 188                         font.italic: true
 189                         anchors.left: ons_contents.right
 190                         anchors.leftMargin: 20
 191                         color: '#00ADDC'
 192                         Layout.maximumWidth: 600
 193                         Layout.maximumHeight: 200
 194                         maximumLineCount: 4
 195                         wrapMode: Text.Wrap
 196                         elide: Text.ElideRight
 197                         horizontalAlignment: Label.AlignLeft
 198                         verticalAlignment: Label.AlignVCenter
 199                     }
 200                 }
 201                 RowLayout {
 202                     spacing: 20
 203                     Label {
 204                         id: btn1
 205                         anchors.left: parent.left
 206                         anchors.leftMargin: 30
 207                         text: qsTr("Button1")
 208                         font.pixelSize: 20
 209                         font.italic: true
 210                         color: '#00ADDC'
 211                     }
 212
 213                     Label {
 214                         id: btn1_data
 215                         text: onsButton1
 216                         font.pixelSize: 20
 217                         font.italic: true
 218                         anchors.left: btn1.right
 219                         anchors.leftMargin: 20
 220                         color: '#00ADDC'
 221                     }
 222                 }
 223                 RowLayout {
 224                     spacing: 20
 225                     Label {
 226                         id: btn2
 227                         anchors.left: parent.left
 228                         anchors.leftMargin: 30
 229                         text: qsTr("Button2")
 230                         font.pixelSize: 20
 231                         font.italic: true
 232                         color: '#00ADDC'
 233                     }
 234                     Label {
 235                         id: btn2_data
 236                         text: onsButton2
 237                         font.pixelSize: 20
 238                         font.italic: true
 239                         anchors.left: btn2.right
 240                         anchors.leftMargin: 20
 241                         color: '#00ADDC'
 242                     }
 243                 }
 244                 RowLayout {
 245                     spacing: 20
 246                     Label {
 247                         id: btn3
 248                         anchors.left: parent.left
 249                         anchors.leftMargin: 30
 250                         text: qsTr("Button3")
 251                         font.pixelSize: 20
 252                         font.italic: true
 253                         color: '#00ADDC'
 254                     }
 255                     Label {
 256                         id: btn3_data
 257                         text: onsButton3
 258                         font.pixelSize: 20
 259                         font.italic: true
 260                         anchors.left: btn3.right
 261                         anchors.leftMargin: 20
 262                         color: '#00ADDC'
 263                     }
 264                 }
 265             }
 266         }
 267
 268         // post button
 269         Button {
 270             id: poster
 271             text: "Post"
 272             Layout.alignment: Qt.AlignCenter
 273             onClicked: {
 274                 postMessage();
 275             }
 276         }
 277     }
 278
 279     function selectOneButton() {
 280         console.log("select one button!")
 281         onsTitle = qsTr("One Button title")
 282         onsType = qsTr("critical")
 283         onsContents = qsTr("An operating system is a program that manages a computer’s hardware.")
 284         onsButton1 = qsTr("Yes")
 285         onsButton2 = qsTr("")
 286         onsButton3 = qsTr("")
 287     }
 288
 289     function selectTwoButtons() {
 290         console.log("select two buttons!")
 291         onsTitle = qsTr("Two Buttons title")
 292         onsType = qsTr("exclamation")
 293         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.")
 294         onsButton1 = qsTr("Yes")
 295         onsButton2 = qsTr("No")
 296         onsButton3 = qsTr("")
 297     }
 298
 299     function selectThreeButtons() {
 300         console.log("select three buttons!")
 301         onsTitle = qsTr("Three Buttons title")
 302         onsType = qsTr("information")
 303         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.")
 304         onsButton1 = qsTr("Yes")
 305         onsButton2 = qsTr("Abort")
 306         onsButton3 = qsTr("No")
 307     }
 308
 309     function selectNoButton() {
 310         console.log("select no button!")
 311         onsTitle = qsTr("No Button title,very long title beyond screen wide which will show ellipsis at the end")
 312         onsType = qsTr("question")
 313         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.")
 314         onsButton1 = qsTr("")
 315         onsButton2 = qsTr("")
 316         onsButton3 = qsTr("")
 317     }
 318
 319     function postMessage() {
 320         console.log("poster pressed")
 321         btndata = ""
 322         postmsg = "{\"title\": \"" + onsTitle + "\"," + "\"type\": \"" + onsType + "\"," + "\"contents\": \"" + onsContents + "\"";
 323         if (onsButton1 != "") {
 324             btndata = "\"" + onsButton1 + "\"";
 325         }
 326         if (onsButton2 != "") {
 327             if (btndata != "")
 328                 btndata += ",";
 329             btndata += "\"" + onsButton2 + "\"";
 330         }
 331         if (onsButton3 != "") {
 332             if (btndata != "")
 333                 btndata += ",";
 334             btndata += "\"" + onsButton3 + "\"";
 335         }
 336
 337         if(btndata != "")
 338             postmsg += ",\"buttons\":[" + btndata + "]}"
 339         else
 340             postmsg += "}"
 341
 342         eventHandler.showWindow(onsId, postmsg);
 343     }
 344
 345     function qmlOnReplyShowWindow(text) {
 346         console.log("onstestapp received:",text);
 347         output.text = text;
 348     }
 349 }