×

Discussion Board

Results 1 to 8 of 8

Hybrid View

  1. #1
    Registered User
    Join Date
    Sep 2012
    Posts
    23

    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

  2. #2
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: Scrollbars to a Text component ?

    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

  3. #3
    Registered User
    Join Date
    Sep 2012
    Posts
    23

    Re: Scrollbars to a Text component ?

    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

  4. #4
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: Scrollbars to a Text component ?

    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

  5. #5
    Registered User
    Join Date
    Sep 2012
    Posts
    23

    Re: Scrollbars to a Text component ?

    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
    Last edited by StefanTh; 2012-09-05 at 07:48.

  6. #6
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: Scrollbars to a Text component ?

    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

  7. #7
    Registered User
    Join Date
    Sep 2012
    Posts
    23

    Re: Scrollbars to a Text component ?

    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
    Last edited by StefanTh; 2012-09-06 at 10:43.

  8. #8
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: Scrollbars to a Text component ?

    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

Similar Threads

  1. Text Field as a Component in Lwuit
    By kumarv75 in forum Mobile Java General
    Replies: 3
    Last Post: 2010-10-18, 18:25
  2. GIFs in HyperText (or any other text component)
    By junam in forum Widsets Development
    Replies: 1
    Last Post: 2009-03-20, 11:07
  3. scrollable multiline text component
    By junam in forum Widsets Development
    Replies: 1
    Last Post: 2009-03-05, 10:47
  4. Replies: 6
    Last Post: 2008-09-25, 20:52
  5. Setting max string size of Text component
    By bercobeute in forum Symbian
    Replies: 0
    Last Post: 2005-12-30, 17:34

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×