Scrollbars to a Text component ?

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

Hi

You shall use [URL="http://doc.qt.nokia.com/4.7-snapshot/qml-textedit.html"]TextEdit[/URL] or TextArea from QComponents. They support automatic content scrolling if the content does not to fit the component area.

Also use [URL="http://doc.qt.nokia.com/4.7-snapshot/qml-textedit.html#readOnly-prop"]"readOnly"[/URL] property if you need you text to be read-only

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


[INDENT][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"
}[/CODE][/INDENT]

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

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"
}
}
[/CODE]

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

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][INDENT]// 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"
}
}
}[/INDENT][/CODE]


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

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 : [QUOTE]Flickable {
id: flick

width: parent.width
[B]//height: changeLogArea.height ---- replace it with the line below[/B]
height: parent.height
............
[/QUOTE]

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 }
}
}

[/CODE]

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 }
}
}
[/CODE]

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

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[/CODE]
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[/CODE] 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.






[INDENT][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: {
}
}

}

}[/CODE][/INDENT]



I include my solution here for what it is worth

Hi StefanTh

i am glad to hear your problem is solved. As for component order - you a referring to[B] Z-order[/B]. If you do not specify it , components appears on the screen in order as they are created. To alter that behaviour use [B]z [/B]component property. For example :
[CODE]
Item{
id: topmost
....
z: 100
....
}
[/CODE]
will place [B]topmost[/B] element on top of others that have z < 100 , by default z == 0

Regards,
Igor