examples/declarative/righttoleft/textalignment/textalignment.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   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 Nokia Corporation and its Subsidiary(-ies) nor
  21 **     the names of its contributors may be used to endorse or promote
  22 **     products derived from this software without specific prior written
  23 **     permission.
  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
  49     property bool mirror: false
  50     property variant horizontalAlignment: undefined
  51
  52     property variant editorType: ["Plain Text", "Styled Text", "Plain Rich Text", "Italic Rich Text", "Plain TextEdit", "Italic TextEdit", "TextInput"]
  53     property variant text: ["", " ", "Hello world!", "مرحبا العالم!", "Hello world! Hello!\nHello world! Hello!", "مرحبا العالم! مرحبا! مرحبا العالم! مرحبا!" ,"مرحبا العالم! مرحبا! مرحبا Hello world!\nالعالم! مرحبا!"]
  54     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"]
  55     property variant textComponents: [plainTextComponent, styledTextComponent, richTextComponent, italicRichTextComponent, plainTextEdit, italicTextEdit, textInput]
  56
  57     function shortText(horizontalAlignment) {
  58
  59         // all the different QML editors have
  60         // the same alignment values
  61         switch (horizontalAlignment) {
  62         case Text.AlignLeft:
  63             return "L";
  64         case Text.AlignRight:
  65             return "R";
  66         case Text.AlignHCenter:
  67             return "C";
  68         case Text.AlignJustify:
  69             return "J";
  70         default:
  71             return "Error";
  72         }
  73     }
  74     Column {
  75         id: containerColumn
  76         spacing: 10
  77         width: editorTypeRow.width
  78         anchors { top: parent.top; topMargin: 5 }
  79         Row {
  80             id: editorTypeRow
  81             Repeater {
  82                 model: editorType.length
  83                 Item {
  84                     width: editorColumn.width
  85                     height: editorColumn.height
  86                     Column {
  87                         id: editorColumn
  88                         spacing: 5
  89                         width: textColumn.width+10
  90                         Text {
  91                             text: root.editorType[index]
  92                             font.pixelSize: 16
  93                             anchors.horizontalCenter: parent.horizontalCenter
  94                         }
  95                         Column {
  96                             id: textColumn
  97                             spacing: 5
  98                             anchors.horizontalCenter: parent.horizontalCenter
  99                             Repeater {
 100                                 model: textComponents.length
 101                                 delegate: textComponents[index]
 102                             }
 103                         }
 104                     }
 105                 }
 106             }
 107         }
 108         Column {
 109             spacing: 2
 110             width: parent.width
 111             Rectangle {
 112                 // button
 113                 height: 50; width: parent.width
 114                 color: mouseArea.pressed ? "black" : "lightgray"
 115                 Column {
 116                     anchors.centerIn: parent
 117                     Text {
 118                         text: root.mirror ? "Mirrored" : "Not mirrored"
 119                         color: "white"
 120                         font.pixelSize: 16
 121                         anchors.horizontalCenter: parent.horizontalCenter
 122                     }
 123                     Text {
 124                         text: "(click here to toggle)"
 125                         color: "white"
 126                         font.pixelSize: 10
 127                         font.italic: true
 128                         anchors.horizontalCenter: parent.horizontalCenter
 129                     }
 130                 }
 131                 MouseArea {
 132                     id: mouseArea
 133                     property int index: 0
 134                     anchors.fill: parent
 135                     onClicked: root.mirror = !root.mirror
 136                 }
 137             }
 138             Rectangle {
 139                 // button
 140                 height: 50; width: parent.width
 141                 color: mouseArea2.pressed ? "black" : "gray"
 142                 Column {
 143                     anchors.centerIn: parent
 144                     Text {
 145                         text: {
 146                             if (root.horizontalAlignment == undefined)
 147                                 return "Implict alignment";
 148                             switch (root.horizontalAlignment) {
 149                             case Text.AlignLeft:
 150                                 return "Left alignment";
 151                             case Text.AlignRight:
 152                                 return "Right alignment";
 153                             case Text.AlignHCenter:
 154                                 return "Center alignment";
 155                             case Text.AlignJustify:
 156                                 return "Justify alignment";
 157                             }
 158                         }
 159                         color: "white"
 160                         font.pixelSize: 16
 161                         anchors.horizontalCenter: parent.horizontalCenter
 162                     }
 163                     Text {
 164                         text: "(click here to toggle)"
 165                         color: "white"
 166                         font.pixelSize: 10
 167                         font.italic: true
 168                         anchors.horizontalCenter: parent.horizontalCenter
 169                     }
 170                 }
 171                 MouseArea {
 172                     id: mouseArea2
 173                     property int index: 0
 174                     anchors.fill: parent
 175                     onClicked: {
 176                         if (index < 0) {
 177                             root.horizontalAlignment = undefined;
 178                         } else {
 179                             root.horizontalAlignment = Math.pow(2, index);
 180                         }
 181                         index = (index + 2) % 5 - 1;
 182                     }
 183                 }
 184             }
 185         }
 186     }
 187
 188     Component {
 189         id: plainTextComponent
 190         Text {
 191             width: 180
 192             text: root.text[index]
 193             font.pixelSize: 24
 194             wrapMode: Text.WordWrap
 195             horizontalAlignment: root.horizontalAlignment
 196             LayoutMirroring.enabled: root.mirror
 197             textFormat: Text.RichText
 198             Rectangle {
 199                 z: -1
 200                 color: Qt.rgba(0.8, 0.2, 0.2, 0.3)
 201                 anchors.fill: parent
 202             }
 203             Text {
 204                 text: root.description[index]
 205                 color: Qt.rgba(1,1,1,1.0)
 206                 anchors.centerIn: parent
 207                 Rectangle {
 208                     z: -1
 209                     color: Qt.rgba(0.3, 0, 0, 0.3)
 210                     anchors { fill: parent; margins: -3 }
 211                 }
 212             }
 213             Text {
 214                 color: "white"
 215                 text: shortText(parent.horizontalAlignment)
 216                 anchors { top: parent.top; right: parent.right; margins: 2 }
 217             }
 218         }
 219     }
 220
 221     Component {
 222         id: styledTextComponent
 223         Text {
 224             width: 180
 225             text: root.text[index]
 226             font.pixelSize: 24
 227             wrapMode: Text.WordWrap
 228             horizontalAlignment: root.horizontalAlignment
 229             LayoutMirroring.enabled: root.mirror
 230             textFormat: Text.RichText
 231             style: Text.Sunken
 232             styleColor: "white"
 233             Rectangle {
 234                 z: -1
 235                 color: Qt.rgba(0.8, 0.2, 0.2, 0.3)
 236                 anchors.fill: parent
 237             }
 238             Text {
 239                 text: root.description[index]
 240                 color: Qt.rgba(1,1,1,1.0)
 241                 anchors.centerIn: parent
 242                 Rectangle {
 243                     z: -1
 244                     color: Qt.rgba(0.3, 0, 0, 0.3)
 245                     anchors { fill: parent; margins: -3 }
 246                 }
 247             }
 248             Text {
 249                 color: "white"
 250                 text: shortText(parent.horizontalAlignment)
 251                 anchors { top: parent.top; right: parent.right; margins: 2 }
 252             }
 253         }
 254     }
 255
 256     Component {
 257         id: richTextComponent
 258         Text {
 259             width: 180
 260             text: root.text[index]
 261             font.pixelSize: 24
 262             wrapMode: Text.WordWrap
 263             horizontalAlignment: root.horizontalAlignment
 264             LayoutMirroring.enabled: root.mirror
 265             textFormat: Text.RichText
 266             Rectangle {
 267                 z: -1
 268                 color: Qt.rgba(0.8, 0.2, 0.2, 0.3)
 269                 anchors.fill: parent
 270             }
 271             Text {
 272                 text: root.description[index]
 273                 color: Qt.rgba(1,1,1,1.0)
 274                 anchors.centerIn: parent
 275                 Rectangle {
 276                     z: -1
 277                     color: Qt.rgba(0.3, 0, 0, 0.3)
 278                     anchors { fill: parent; margins: -3 }
 279                 }
 280             }
 281             Text {
 282                 color: "white"
 283                 text: shortText(parent.horizontalAlignment)
 284                 anchors { top: parent.top; right: parent.right; margins: 2 }
 285             }
 286         }
 287     }
 288
 289     Component {
 290         id: italicRichTextComponent
 291         Text {
 292             width: 180
 293             text: "<i>" + root.text[index] + "</i>"
 294             font.pixelSize: 24
 295             wrapMode: Text.WordWrap
 296             horizontalAlignment: root.horizontalAlignment
 297             LayoutMirroring.enabled: root.mirror
 298             textFormat: Text.RichText
 299             property variant backgroundColor: Qt.rgba(0.8, 0.2, 0.2, 0.3)
 300             Rectangle {
 301                 z: -1
 302                 color: parent.backgroundColor
 303                 anchors.fill: parent
 304             }
 305             Text {
 306                 text: root.description[index]
 307                 color: Qt.rgba(1,1,1,1.0)
 308                 anchors.centerIn: parent
 309                 Rectangle {
 310                     z: -1
 311                     color: Qt.rgba(0.3, 0, 0, 0.3)
 312                     anchors { fill: parent; margins: -3 }
 313                 }
 314             }
 315             Text {
 316                 color: "white"
 317                 text: shortText(parent.horizontalAlignment)
 318                 anchors { top: parent.top; right: parent.right; margins: 2 }
 319             }
 320         }
 321     }
 322
 323     Component {
 324         id: plainTextEdit
 325         TextEdit {
 326             width: 180
 327             text: root.text[index]
 328             font.pixelSize: 24
 329             cursorVisible: true
 330             wrapMode: TextEdit.WordWrap
 331             horizontalAlignment: root.horizontalAlignment
 332             LayoutMirroring.enabled: root.mirror
 333             Rectangle {
 334                 z: -1
 335                 color: Qt.rgba(0.5, 0.5, 0.2, 0.3)
 336                 anchors.fill: parent
 337             }
 338             Text {
 339                 text: root.description[index]
 340                 color: Qt.rgba(1,1,1,1.0)
 341                 anchors.centerIn: parent
 342                 Rectangle {
 343                     z: -1
 344                     color: Qt.rgba(0.3, 0, 0, 0.3)
 345                     anchors { fill: parent; margins: -3 }
 346                 }
 347             }
 348             Text {
 349                 color: "white"
 350                 text: shortText(parent.horizontalAlignment)
 351                 anchors { top: parent.top; right: parent.right; margins: 2 }
 352             }
 353         }
 354     }
 355
 356     Component {
 357         id: italicTextEdit
 358         TextEdit {
 359             width: 180
 360             text: "<i>" + root.text[index] + "<i>"
 361             font.pixelSize: 24
 362             cursorVisible: true
 363             wrapMode: TextEdit.WordWrap
 364             textFormat: TextEdit.RichText
 365             horizontalAlignment: root.horizontalAlignment
 366             LayoutMirroring.enabled: root.mirror
 367             Rectangle {
 368                 z: -1
 369                 color: Qt.rgba(0.5, 0.5, 0.2, 0.3)
 370                 anchors.fill: parent
 371             }
 372             Text {
 373                 text: root.description[index]
 374                 color: Qt.rgba(1,1,1,1.0)
 375                 anchors.centerIn: parent
 376                 Rectangle {
 377                     z: -1
 378                     color: Qt.rgba(0.3, 0, 0, 0.3)
 379                     anchors { fill: parent; margins: -3 }
 380                 }
 381             }
 382             Text {
 383                 color: "white"
 384                 text: shortText(parent.horizontalAlignment)
 385                 anchors { top: parent.top; right: parent.right; margins: 2 }
 386             }
 387         }
 388     }
 389
 390     Component {
 391         id: textInput
 392         Item {
 393             width: 180
 394             height: textInput.text.length > 20 ? 3*textInput.height : textInput.height
 395             TextInput {
 396                 id: textInput
 397                 width: 180
 398                 text: root.text[index]
 399                 font.pixelSize: 24
 400                 cursorVisible: true
 401                 horizontalAlignment: root.horizontalAlignment
 402                 LayoutMirroring.enabled: root.mirror
 403                 Rectangle {
 404                     z: -1
 405                     color: Qt.rgba(0.6, 0.4, 0.2, 0.3)
 406                     anchors.fill: parent
 407                 }
 408                 Text {
 409                     text: root.description[index]
 410                     color: Qt.rgba(1,1,1,1.0)
 411                     anchors.centerIn: parent
 412                     Rectangle {
 413                         z: -1
 414                         color: Qt.rgba(0.3, 0, 0, 0.3)
 415                         anchors { fill: parent; margins: -3 }
 416                     }
 417                 }
 418                 Text {
 419                     color: "white"
 420                     text: shortText(parent.horizontalAlignment)
 421                     anchors { top: parent.top; right: parent.right; margins: 2 }
 422                 }
 423             }
 424         }
 425     }
 426 }
 427