examples/quick/righttoleft/textalignment/textalignment.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/legal
   5 **
   6 ** This file is part of the examples of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:BSD$
   9 ** You may use this file under the terms of the BSD license as follows:
  10 **
  11 ** "Redistribution and use in source and binary forms, with or without
  12 ** modification, are permitted provided that the following conditions are
  13 ** met:
  14 **   * Redistributions of source code must retain the above copyright
  15 **     notice, this list of conditions and the following disclaimer.
  16 **   * Redistributions in binary form must reproduce the above copyright
  17 **     notice, this list of conditions and the following disclaimer in
  18 **     the documentation and/or other materials provided with the
  19 **     distribution.
  20 **   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
  21 **     of its contributors may be used to endorse or promote products derived
  22 **     from this software without specific prior written permission.
  23 **
  24 **
  25 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  26 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  27 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  28 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  29 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  30 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  31 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  32 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  33 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  34 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  35 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  36 **
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40
  41 import QtQuick 2.0
  42
  43 Rectangle {
  44     id: root
  45     color: "white"
  46     //width: containerColumn.width
  47     //height: containerColumn.height + containerColumn.anchors.topMargin
  48     width: 320
  49     height: 480
  50
  51     property bool mirror: false
  52     property int pxSz: 18
  53     property variant horizontalAlignment: undefined
  54
  55     property variant editorType: ["Plain Text", "Styled Text", "Plain Rich Text", "Italic Rich Text", "Plain TextEdit", "Italic TextEdit", "TextInput"]
  56     property variant text: ["", " ", "Hello world!", "مرحبا العالم!", "Hello world! Hello!\nHello world! Hello!", "مرحبا العالم! مرحبا! مرحبا العالم! مرحبا!" ,"مرحبا العالم! مرحبا! مرحبا Hello world!\nالعالم! مرحبا!"]
  57     property variant description: ["empty text", "white-space-only text", "left-to-right text", "right-to-left text", "multi-line left-to-right text", "multi-line right-to-left text", "multi-line bidi text"]
  58     property variant textComponents: [plainTextComponent, styledTextComponent, richTextComponent, italicRichTextComponent, plainTextEdit, italicTextEdit, textInput]
  59
  60     function shortText(horizontalAlignment) {
  61
  62         // all the different QML editors have
  63         // the same alignment values
  64         switch (horizontalAlignment) {
  65         case Text.AlignLeft:
  66             return "L";
  67         case Text.AlignRight:
  68             return "R";
  69         case Text.AlignHCenter:
  70             return "C";
  71         case Text.AlignJustify:
  72             return "J";
  73         default:
  74             return "Error";
  75         }
  76     }
  77     Column {
  78         id: containerColumn
  79         spacing: 10
  80         width: editorTypeRow.width
  81         anchors { top: parent.top; topMargin: 5 }
  82         ListView {
  83             width: 320
  84             height: 320
  85             id: editorTypeRow
  86             model: editorType.length
  87             orientation: ListView.Horizontal
  88             cacheBuffer: 1000//Load the really expensive ones async if possible
  89             delegate: Item {
  90                 width: editorColumn.width
  91                 height: editorColumn.height
  92                 Column {
  93                     id: editorColumn
  94                     spacing: 5
  95                     width: textColumn.width+10
  96                     Text {
  97                         text: root.editorType[index]
  98                         font.pixelSize: 16
  99                         anchors.horizontalCenter: parent.horizontalCenter
 100                     }
 101                     Column {
 102                         id: textColumn
 103                         spacing: 5
 104                         anchors.horizontalCenter: parent.horizontalCenter
 105                         Repeater {
 106                             model: textComponents.length
 107                             delegate: textComponents[index]
 108                         }
 109                     }
 110                 }
 111             }
 112         }
 113         Column {
 114             spacing: 2
 115             width: parent.width
 116             Rectangle {
 117                 // button
 118                 height: 50; width: parent.width
 119                 color: mouseArea.pressed ? "black" : "lightgray"
 120                 Column {
 121                     anchors.centerIn: parent
 122                     Text {
 123                         text: root.mirror ? "Mirrored" : "Not mirrored"
 124                         color: "white"
 125                         font.pixelSize: 16
 126                         anchors.horizontalCenter: parent.horizontalCenter
 127                     }
 128                     Text {
 129                         text: "(click here to toggle)"
 130                         color: "white"
 131                         font.pixelSize: 10
 132                         font.italic: true
 133                         anchors.horizontalCenter: parent.horizontalCenter
 134                     }
 135                 }
 136                 MouseArea {
 137                     id: mouseArea
 138                     property int index: 0
 139                     anchors.fill: parent
 140                     onClicked: root.mirror = !root.mirror
 141                 }
 142             }
 143             Rectangle {
 144                 // button
 145                 height: 50; width: parent.width
 146                 color: mouseArea2.pressed ? "black" : "gray"
 147                 Column {
 148                     anchors.centerIn: parent
 149                     Text {
 150                         text: {
 151                             if (root.horizontalAlignment == undefined)
 152                                 return "Implict alignment";
 153                             switch (root.horizontalAlignment) {
 154                             case Text.AlignLeft:
 155                                 return "Left alignment";
 156                             case Text.AlignRight:
 157                                 return "Right alignment";
 158                             case Text.AlignHCenter:
 159                                 return "Center alignment";
 160                             case Text.AlignJustify:
 161                                 return "Justify alignment";
 162                             }
 163                         }
 164                         color: "white"
 165                         font.pixelSize: 16
 166                         anchors.horizontalCenter: parent.horizontalCenter
 167                     }
 168                     Text {
 169                         text: "(click here to toggle)"
 170                         color: "white"
 171                         font.pixelSize: 10
 172                         font.italic: true
 173                         anchors.horizontalCenter: parent.horizontalCenter
 174                     }
 175                 }
 176                 MouseArea {
 177                     id: mouseArea2
 178                     property int index: 0
 179                     anchors.fill: parent
 180                     onClicked: {
 181                         if (index < 0) {
 182                             root.horizontalAlignment = undefined;
 183                         } else {
 184                             root.horizontalAlignment = Math.pow(2, index);
 185                         }
 186                         index = (index + 2) % 5 - 1;
 187                     }
 188                 }
 189             }
 190         }
 191     }
 192
 193     Component {
 194         id: plainTextComponent
 195         Text {
 196             width: 180
 197             text: root.text[index]
 198             font.pixelSize: pxSz
 199             wrapMode: Text.WordWrap
 200             horizontalAlignment: root.horizontalAlignment
 201             LayoutMirroring.enabled: root.mirror
 202             textFormat: Text.RichText
 203             Rectangle {
 204                 z: -1
 205                 color: Qt.rgba(0.8, 0.2, 0.2, 0.3)
 206                 anchors.fill: parent
 207             }
 208             Text {
 209                 text: root.description[index]
 210                 color: Qt.rgba(1,1,1,1.0)
 211                 anchors.centerIn: parent
 212                 font.pixelSize: pxSz - 2
 213                 Rectangle {
 214                     z: -1
 215                     color: Qt.rgba(0.3, 0, 0, 0.3)
 216                     anchors { fill: parent; margins: -3 }
 217                 }
 218             }
 219             Text {
 220                 color: "white"
 221                 text: shortText(parent.horizontalAlignment)
 222                 anchors { top: parent.top; right: parent.right; margins: 2 }
 223             }
 224         }
 225     }
 226
 227     Component {
 228         id: styledTextComponent
 229         Text {
 230             width: 180
 231             text: root.text[index]
 232             font.pixelSize: pxSz
 233             wrapMode: Text.WordWrap
 234             horizontalAlignment: root.horizontalAlignment
 235             LayoutMirroring.enabled: root.mirror
 236             textFormat: Text.RichText
 237             style: Text.Sunken
 238             styleColor: "white"
 239             Rectangle {
 240                 z: -1
 241                 color: Qt.rgba(0.8, 0.2, 0.2, 0.3)
 242                 anchors.fill: parent
 243             }
 244             Text {
 245                 text: root.description[index]
 246                 color: Qt.rgba(1,1,1,1.0)
 247                 anchors.centerIn: parent
 248                 font.pixelSize: pxSz - 2
 249                 Rectangle {
 250                     z: -1
 251                     color: Qt.rgba(0.3, 0, 0, 0.3)
 252                     anchors { fill: parent; margins: -3 }
 253                 }
 254             }
 255             Text {
 256                 color: "white"
 257                 text: shortText(parent.horizontalAlignment)
 258                 anchors { top: parent.top; right: parent.right; margins: 2 }
 259             }
 260         }
 261     }
 262
 263     Component {
 264         id: richTextComponent
 265         Text {
 266             width: 180
 267             text: root.text[index]
 268             font.pixelSize: pxSz
 269             wrapMode: Text.WordWrap
 270             horizontalAlignment: root.horizontalAlignment
 271             LayoutMirroring.enabled: root.mirror
 272             textFormat: Text.RichText
 273             Rectangle {
 274                 z: -1
 275                 color: Qt.rgba(0.8, 0.2, 0.2, 0.3)
 276                 anchors.fill: parent
 277             }
 278             Text {
 279                 text: root.description[index]
 280                 color: Qt.rgba(1,1,1,1.0)
 281                 anchors.centerIn: parent
 282                 font.pixelSize: pxSz - 2
 283                 Rectangle {
 284                     z: -1
 285                     color: Qt.rgba(0.3, 0, 0, 0.3)
 286                     anchors { fill: parent; margins: -3 }
 287                 }
 288             }
 289             Text {
 290                 color: "white"
 291                 text: shortText(parent.horizontalAlignment)
 292                 anchors { top: parent.top; right: parent.right; margins: 2 }
 293             }
 294         }
 295     }
 296
 297     Component {
 298         id: italicRichTextComponent
 299         Text {
 300             width: 180
 301             text: "<i>" + root.text[index] + "</i>"
 302             font.pixelSize: pxSz
 303             wrapMode: Text.WordWrap
 304             horizontalAlignment: root.horizontalAlignment
 305             LayoutMirroring.enabled: root.mirror
 306             textFormat: Text.RichText
 307             property variant backgroundColor: Qt.rgba(0.8, 0.2, 0.2, 0.3)
 308             Rectangle {
 309                 z: -1
 310                 color: parent.backgroundColor
 311                 anchors.fill: parent
 312             }
 313             Text {
 314                 text: root.description[index]
 315                 color: Qt.rgba(1,1,1,1.0)
 316                 anchors.centerIn: parent
 317                 font.pixelSize: pxSz - 2
 318                 Rectangle {
 319                     z: -1
 320                     color: Qt.rgba(0.3, 0, 0, 0.3)
 321                     anchors { fill: parent; margins: -3 }
 322                 }
 323             }
 324             Text {
 325                 color: "white"
 326                 text: shortText(parent.horizontalAlignment)
 327                 anchors { top: parent.top; right: parent.right; margins: 2 }
 328             }
 329         }
 330     }
 331
 332     Component {
 333         id: plainTextEdit
 334         TextEdit {
 335             width: 180
 336             text: root.text[index]
 337             font.pixelSize: pxSz
 338             cursorVisible: true
 339             wrapMode: TextEdit.WordWrap
 340             horizontalAlignment: root.horizontalAlignment
 341             LayoutMirroring.enabled: root.mirror
 342             Rectangle {
 343                 z: -1
 344                 color: Qt.rgba(0.5, 0.5, 0.2, 0.3)
 345                 anchors.fill: parent
 346             }
 347             Text {
 348                 text: root.description[index]
 349                 color: Qt.rgba(1,1,1,1.0)
 350                 anchors.centerIn: parent
 351                 font.pixelSize: pxSz - 2
 352                 Rectangle {
 353                     z: -1
 354                     color: Qt.rgba(0.3, 0, 0, 0.3)
 355                     anchors { fill: parent; margins: -3 }
 356                 }
 357             }
 358             Text {
 359                 color: "white"
 360                 text: shortText(parent.horizontalAlignment)
 361                 anchors { top: parent.top; right: parent.right; margins: 2 }
 362             }
 363         }
 364     }
 365
 366     Component {
 367         id: italicTextEdit
 368         TextEdit {
 369             width: 180
 370             text: "<i>" + root.text[index] + "<i>"
 371             font.pixelSize: pxSz
 372             cursorVisible: true
 373             wrapMode: TextEdit.WordWrap
 374             textFormat: TextEdit.RichText
 375             horizontalAlignment: root.horizontalAlignment
 376             LayoutMirroring.enabled: root.mirror
 377             Rectangle {
 378                 z: -1
 379                 color: Qt.rgba(0.5, 0.5, 0.2, 0.3)
 380                 anchors.fill: parent
 381             }
 382             Text {
 383                 text: root.description[index]
 384                 color: Qt.rgba(1,1,1,1.0)
 385                 anchors.centerIn: parent
 386                 font.pixelSize: pxSz - 2
 387                 Rectangle {
 388                     z: -1
 389                     color: Qt.rgba(0.3, 0, 0, 0.3)
 390                     anchors { fill: parent; margins: -3 }
 391                 }
 392             }
 393             Text {
 394                 color: "white"
 395                 text: shortText(parent.horizontalAlignment)
 396                 anchors { top: parent.top; right: parent.right; margins: 2 }
 397             }
 398         }
 399     }
 400
 401     Component {
 402         id: textInput
 403         Item {
 404             width: 180
 405             height: textInput.text.length > 20 ? 3*textInput.height : textInput.height
 406             TextInput {
 407                 id: textInput
 408                 width: 180
 409                 text: root.text[index]
 410                 font.pixelSize: pxSz
 411                 cursorVisible: true
 412                 horizontalAlignment: root.horizontalAlignment
 413                 LayoutMirroring.enabled: root.mirror
 414                 Rectangle {
 415                     z: -1
 416                     color: Qt.rgba(0.6, 0.4, 0.2, 0.3)
 417                     anchors.fill: parent
 418                 }
 419                 Text {
 420                     text: root.description[index]
 421                     color: Qt.rgba(1,1,1,1.0)
 422                     anchors.centerIn: parent
 423                     font.pixelSize: pxSz - 2
 424                     Rectangle {
 425                         z: -1
 426                         color: Qt.rgba(0.3, 0, 0, 0.3)
 427                         anchors { fill: parent; margins: -3 }
 428                     }
 429                 }
 430                 Text {
 431                     color: "white"
 432                     text: shortText(parent.horizontalAlignment)
 433                     anchors { top: parent.top; right: parent.right; margins: 2 }
 434                 }
 435             }
 436         }
 437     }
 438 }
 439