Scrollbars to a Text component ?

**StefanTh** · 2012-09-04, 10:55

Hi

I have searched all over the web trying to understand how a Text component gets it's scrollbars

I have a long text that I "add" to a Text component,
The Text component's attribute height and width is set to "parent", that is the sceen,
however neither on the N9 or on Windows 7 any scrollbar appear to the right side
which I expected it would.

When searching for ListView on the web I only see solutions including multiple qml files and ListElement "solutions".

Is there not an easier way to just place Text component on the screen and it will get scrollbar
to the right in case the string given to Text is to large to fit on the screen ?

Regards

**izinin** · 2012-09-04, 11:47

Hi

You shall use TextEdit or TextArea from QComponents. They support automatic content scrolling if the content does not to fit the component area.

Also use "readOnly" property if you need you text to be read-only

**StefanTh** · 2012-09-04, 12:46

Hi

SDK: Qt Creator 2.4.1

Well, something is missing becouse I have the last two days tried with Text, TextArea and TextEdit in various ways, like this

Code:

     TextEdit  {
        id: changeLogArea
        textFormat: Text.AutoText
        anchors.top: titleBackground.bottom
        wrapMode: TextEdit.Wrap
        readOnly: true
        font.pixelSize: 20; font.bold: false

        text: "1\n1\n1\n1\n2\n1\n1\n1\n1\n1\n3\n1\n1\n1\n4\n1\n1\n1\n1\n5\n1\n1\n1\n6\n1\n1\n1\n7\n1\n1\n1\n8"
    }

and there is no scrollbar, anywhere, neither on the Windows 7 or the N9 target device,
I can not swipe, press, put, use arrow keys or use verbal threats to make the text area to
scroll down to the "end" of the text

Regards

**izinin** · 2012-09-05, 06:57

Hi

Sorry, i was wrong about scrolling in TextEdit. Instead QComponents TextArea implements the horizontal and vertical scrolling but TextEdit does not. Please use the following snippet to have scrolling

Wrap TextEdit with Flickable:

Code:

    Flickable {
        id: flick

        width: 100
        height: 100
        contentWidth: changeLogArea.paintedWidth
        contentHeight: changeLogArea.paintedHeight

        TextEdit  {
                id: changeLogArea
                textFormat: Text.AutoText
                //anchors.top: titleBackground.bottom
                wrapMode: TextEdit.Wrap
                readOnly: true
                font.pixelSize: 20; font.bold: false

                text: "1\n1\n1\n1\n2\n1\n1\n1\n1\n1\n3\n1\n1\n1\n4\n1\n1\n1\n1\n5\n1\n1\n1\n6\n1\n1\n1\n7\n1\n1\n1\n8"
            }
    }

Now you can scroll the text but there is no scrollbars -- You can either adopt Scrollbar implementattion from QComponents to your project or try TextArea

Regards,
Igor

**StefanTh** · 2012-09-05, 07:41

Hi

No, it still does not work, does not matter if it is a TextArea or a TextEdit here is my whole code I use, I am trying it on a Nokia N9 and in the Qt Simulator (PC with Windows 7)

Code:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.meego 1.0

Page {
    id: myShowChangeLogPage


    Flickable {
            id: flick

            width: parent.width
            height: changeLogArea.height
            contentWidth: changeLogArea.paintedWidth
            contentHeight: changeLogArea.paintedHeight

            Rectangle {
                color: "Red"
                width: changeLogArea.width
                height: changeLogArea.height
            }


            TextEdit  {
                id: changeLogArea
                width: screen.width
                height: 300
                textFormat: Text.AutoText
                wrapMode: TextEdit.Wrap

                text: "1\n1\n1\n1\n2\n1\n1\n1\n1\n1\n3\n1\n1\n1\n4\n1\n1\n1\n1\n5\n1\n1\n1\n6\n1\n1\n1\n7\n1\n1\n1\n8\n1\n1\n1\n9\n1\n1\n1\n10"
            }
    }
}

I might expecting something that is not implemented or is a bug but in the above example I expect that

There will be a textarea 300 high and width equal of the screen (which is does)
There will be a red rectangle showing the outline of the TextEdit/TextArea (which is does)
Only those lines of the text that fits in the TextArea/TextEdit area is visible (which is does not)
A slider/scrollbar appear on one ofthe sides of the text area (which is does not)
It is possible to scroll up and down in the text within the text area to see line that is not visible (which does not work)

Becosue the text ccontain far more lines that fits into the area a scrollbar/slider should (natrually) appear
on the side or atleast the possibility to scroll "through" the text by dragging my finger on the N9 screen or turn the wheel on the mouse on the PC when running the Qt Simulator.

However, I feel that there is something wrong of two reasons

1. The text is "painted" from top of the screen down and below the edge of the bottom of the screen (far beyond the size of the TextArea/TextEdit )
2. It is not possible to scroll (finger on screen on N9 or mouse wheel in Qt simulator on PC) in the text to see what is "below" the bottom edge of the screen

Regards

**izinin** · 2012-09-06, 07:40

Hi

Even the documentation says TextArea supports scrolling , in fact it neither show scrollbars nor support it -- looks like incomplete implementation .

I found error that breaks scrolling in your code :

Flickable {
id: flick

width: parent.width
//height: changeLogArea.height ---- replace it with the line below
height: parent.height
............

the whole code would be like that :

Code:

import QtQuick 1.1
import com.nokia.meego 1.0

Page {
    id: myShowChangeLogPage


    Flickable {
            id: flick

            width: parent.width
            //height: changeLogArea.height
            height: parent.height
            contentWidth: changeLogArea.paintedWidth
            contentHeight: changeLogArea.paintedHeight

            Rectangle {
                color: "Red"
                width: changeLogArea.width
                height: changeLogArea.height
            }


            TextEdit  {
                id: changeLogArea
                width: screen.width
                height: 300
                textFormat: Text.AutoText
                wrapMode: TextEdit.Wrap

                text: "1\n1\n1\n1\n2\n1\n1\n1\n1\n1\n3\n1\n1\n1\n4\n1\n1\n1\n1\n5\n1\n1\n1\n6\n1\n1\n1\n7\n1\n1\n1\n8\n1\n1\n1\n9\n1\n1\n1\n10"
            }
    }

    ScrollBar {
            scrollArea: flick;
            width: 8
            anchors { right: parent.right; top: parent.top; bottom: parent.bottom }
         }
}

and you will need to create ScrollBar.qml in your project with content shown below (taken from Symbian QComponents gitorius repo):

Code:

import QtQuick 1.1

Item {
    id: container

    property variant scrollArea
    property variant orientation: Qt.Vertical

    opacity: 0

    function position()
    {
        var ny = 0;
        if (container.orientation == Qt.Vertical)
            ny = scrollArea.visibleArea.yPosition * container.height;
        else
            ny = scrollArea.visibleArea.xPosition * container.width;
        if (ny > 2) return ny; else return 2;
    }

    function size()
    {
        var nh, ny;

        if (container.orientation == Qt.Vertical)
            nh = scrollArea.visibleArea.heightRatio * container.height;
        else
            nh = scrollArea.visibleArea.widthRatio * container.width;

        if (container.orientation == Qt.Vertical)
            ny = scrollArea.visibleArea.yPosition * container.height;
        else
            ny = scrollArea.visibleArea.xPosition * container.width;

        if (ny > 3) {
            var t;
            if (container.orientation == Qt.Vertical)
                t = Math.ceil(container.height - 3 - ny);
            else
                t = Math.ceil(container.width - 3 - ny);
            if (nh > t) return t; else return nh;
        } else return nh + ny;
    }

    Rectangle { anchors.fill: parent; color: "Black"; opacity: 0.5 }

    BorderImage {
        source: "scrollbar.png"
        border { left: 1; right: 1; top: 1; bottom: 1 }
        x: container.orientation == Qt.Vertical ? 2 : position()
        width: container.orientation == Qt.Vertical ? container.width - 4 : size()
        y: container.orientation == Qt.Vertical ? position() : 2
        height: container.orientation == Qt.Vertical ? size() : container.height - 4
    }

    states: State {
        name: "visible"
        when: container.orientation == Qt.Vertical ? scrollArea.movingVertically : scrollArea.movingHorizontally
        PropertyChanges { target: container; opacity: 1.0 }
    }

    transitions: Transition {
        from: "visible"; to: ""
        NumberAnimation { properties: "opacity"; duration: 600 }
    }
}

also you will need "scrollbar.png" --- have just dummy collored bar picture in png format with dimetion 4X4 pixels -- i cannot attach the file to that forum.

i hope it will help --- that is working for me

**StefanTh** · 2012-09-06, 10:10

Hi

Thanks a lot for your help, with the tip from you I solved it without using the scrollbars in the end,

I noticed that it is important which order the elements are listed in the .qml file, if not in the right order the "later" will overwrite the earlier ones.

That was one of my problems, the Text component was "writing over" my Title,
by moving it down in the file it will not overwrite it.

Here is my solution

Some comments for those who are interested

Code:

boundsBehavior: Flickable.StopAtBounds

Means that the flicker will not "flick/bounce/slide" outside the size of the Text compnent.

The Flickable component only controls what area on the screen that can be affected by the "Scrolling"
However, the contentWidth of Flickable have to be as large as the component is "flicker/scroll" otherwise
you wont be able to "flick/scroll" all parts of the component that flicker is supposed to flick (changeLogArea in my example)

In the Qt simulator (running on Windows 7) you flick/scroll by pressing down the left mouse button on the screen and drag the mouse (took a while for me to understand it after trying to use the mouse wheel)

The Flickable component can flick/scroll in all 4 directions, hence the

Code:

boundsBehavior: Flickable.StopAtBounds

in my example, this prevent it from flick the text beoynd the left, top, right and bottom of the text.

It is unwise/impossible to "rezise/set a size" the Text component, it must be as large as the text drawn
as if the screen is infinite large.

If you want something below/above the Text component, add it after the text component in .qml file,
like the titleBackground component otherwise the flicker/Text component will be drawn ontop of the component.

Code:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.meego 1.0


Page {
    id: myShowChangeLogPage

    tools: myShowChangeLogPageToolBar



    Flickable  {
        id: flickable
        anchors.top: titleBackground.bottom
        anchors.bottom: parent.bottom
        boundsBehavior: Flickable.StopAtBounds
        width: parent.width;
        contentWidth: changeLogArea.width;
        contentHeight: changeLogArea.height

        Text  {

            id: changeLogArea
            text: "1dslkjhfsldkjhflkdshflkash__AA__Adlfkhaslkd__BB__fhlhdsflkhaslfla__CC__shdflk\n1\n1\n1\n2\n1\n1\n1\n1\n1\n3\n1\n1\n1\n4\n1\n1\n1\n1\n5\n1\n1\n1\n6\n1\n1\n1\n7\n1\n1\n1\n8\n\n\n\n\n9"
            font.pixelSize: 25
            wrapMode: TextEdit.WordWrap
        }

    }

    Rectangle {
        id: titleBackground
        color: "blue"
        anchors.top: parent.top
        width: parent.width
        height: title.height * 2

        Label {
            id: title
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 35; font.bold: false
            color: "white"
            text: qsTr("Change Log")
            visible: true
        }
    }



    ToolBarLayout {
        id: myShowChangeLogPageToolBar
        visible: true

        ToolIcon {
            platformIconId: "icon-m-toolbar-back"
            anchors.left: (parent === undefined) ? undefined : parent.left
            onClicked: {
                pageStack.pop()
            }
        }


        ToolIcon {
            platformIconId: "icon-m-toolbar-directory"
            onClicked: {
                pageStack.pop()
                pageStack.push(Qt.resolvedUrl("ShowServerListWindow.qml"))
            }
        }

        ToolIcon {
            platformIconId: "icon-m-toolbar-mediacontrol-play"
            onClicked: {
            }
        }

    }

}

I include my solution here for what it is worth

**izinin** · 2012-09-07, 07:02

Hi StefanTh

i am glad to hear your problem is solved. As for component order - you a referring to Z-order. If you do not specify it , components appears on the screen in order as they are created. To alter that behaviour use z component property. For example :

Code:

Item{
     id: topmost
....
      z: 100
....
}

will place topmost element on top of others that have z < 100 , by default z == 0

Regards,
Igor

Discussion Board

Thread: Scrollbars to a Text component ?

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

Text Field as a Component in Lwuit

GIFs in HyperText (or any other text component)

scrollable multiline text component

Cutomized List Box WIth Text and Dynamic Component...

Setting max string size of Text component

Posting Permissions