Entering Text with Split-view Input

Qt Quick Components 1.1 for Symbian replaces the full screen input panel with a split-view input. The split-view input covers roughly half of the screen and appears at the bottom of the screen. When designing the application layout using version 1.1, the designer should take into account the screen orientation and the split-view input visibility. Version 1.1 introduces the InputContext properties to provide the application with additional hints and properties related to the split-view input. Creating four states may be suitable to handle the split-view input property and anchors changes. Adding relevant states to affected items give users a flexible way to initiate needed changes. Use animations to make changes look smooth. Also, when using TextArea or TextField component near the top of the screen, consider leaving space for the magnifier to appear. The magnifier's size is platformStyle.graphicSizeMedium * 2.

Files:

• Notepad Example File

Example application is a notepad.

The notepad example's layout is not affected by the screen orientation. The example's TextArea is anchored from top and bottom to make it flexible. The bottom is anchored to the Item that represent split-view input's geometry.

     TextArea {
         id: textArea

         anchors {
             top: filler.bottom; bottom: splitViewInput.top
             left: parent.left; right: parent.right;
         }

         placeholderText: "Tap to write"

         Behavior on height { PropertyAnimation { duration: 200 } }
     }

     Item {
         id: splitViewInput

         anchors { bottom: parent.bottom; left: parent.left; right: parent.right }

         Behavior on height { PropertyAnimation { duration: 200 } }

         states: [
             State {
                 name: "Visible"; when: inputContext.visible
                 PropertyChanges { target: splitViewInput; height: inputContext.height }
             },

             State {
                 name: "Hidden"; when: !inputContext.visible
                 PropertyChanges { target: splitViewInput; height: toolBar.height }
             }
         ]
     }

The StatusBar and ToolBar components are hidden when the split-view input appears.

     StatusBar {
         id: statusBar

         Behavior on opacity { PropertyAnimation { duration: 200 } }

         states: [
             State {
                 name: "Visible"; when: !inputContext.visible
                 PropertyChanges { target: statusBar; y: 0; opacity: 1}
             },

             State {
                 name: "Hidden"; when: inputContext.visible
                 PropertyChanges { target: statusBar; y: -height; opacity: 0 }
             }
         ]

         transitions: [
             Transition {
                 from: "Hidden"; to: "Visible"
                 NumberAnimation { target: statusBar; properties: "y"; duration: 200; easing.type: Easing.OutQuad }
             },

             Transition {
                 from: "Visible"; to: "Hidden"
                 NumberAnimation { target: statusBar; properties: "y"; duration: 200; easing.type: Easing.Linear }
             }
         ]
     }

     ToolBar {
         id: toolBar

         anchors { bottom: parent.bottom }

         opacity: !inputContext.visible

         Behavior on opacity { PropertyAnimation { duration: 200 } }

         tools: ToolBarLayout {

             ToolButton { iconSource: "toolbar-back"; onClicked: Qt.quit() }

             ButtonRow {
                 exclusive: false
                 ToolButton { iconSource: "toolbar-previous" }
                 ToolButton { iconSource: "toolbar-share" }
                 ToolButton { iconSource: "toolbar-delete" }
                 ToolButton { iconSource: "toolbar-next" }
             }
         }
     }

Presenting the split-view input as an item is just one way to go. If you are using an x,y-based layout or items such as when using a Column or Row, use the inputContext.height property directly as part of the layout calculation.