Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved] Code editor using QML
Forum Updated to NodeBB v4.3 + New Features

[Solved] Code editor using QML

Scheduled Pinned Locked Moved QML and Qt Quick
8 Posts 3 Posters 6.5k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    Jmgr
    wrote on last edited by
    #1

    Hi !

    I'm currently trying to integrate a code editor within QML. Using Qt 5.1 and the TextArea I achieved some of my goals. Syntax highlighting works well, code completion should work but I saw no example of that.

    My next objective is to draw line numbers at the left of the TextArea. I have managed to draw static numbers of course, but how can I know how far the user has scrolled the TextArea, so that I can update the line numbers ?

    My plan B was to use QWidgets (QPlainTextEdit, etc.) to do this and insert it into QML. Sadly this seems to be impossible since QtQuick 2.

    So I'm a bit stuck here. I would prefer not do the whole interface in QWidgets since it is supposed to be drawn over an OpenGL scene.

    1 Reply Last reply
    0
    • J Offline
      J Offline
      Jens
      wrote on last edited by
      #2

      TextArea has a contentY property you can use to find the offset of the TextArea contentItem. You could create a stand alone Text item and simply bind its y-property to the contentY of the TextArea.

      1 Reply Last reply
      0
      • J Offline
        J Offline
        Jmgr
        wrote on last edited by
        #3

        I cannot find any property named contentY, there is a contentItem property but its y property does not change when I scroll down.

        onContentItemChanged is also never called when scrolling down.

        Could you give me some basic example on how to make an item "follow" the TextArea's scroll value ?

        1 Reply Last reply
        0
        • J Offline
          J Offline
          Jens
          wrote on last edited by
          #4

          Here is a nice attempt. Biggest issue is to get a reliable row height to match the TextArea. To get it proper I think you might have to use the C++ QQuickTextDocument API. Of course with rich text and variable sized fonts, it is going to be a bit difficutlt to match them up.
          @
          Item {
          anchors.fill: parent
          Rectangle {
          id: lineColumn
          property int rowHeight: textarea.font.pixelSize + 3
          color: "#f2f2f2"
          width: 50
          height: parent.height
          Rectangle {
          height: parent.height
          anchors.right: parent.right
          width: 1
          color: "#ddd"
          }
          Column {
          y: -textarea.flickableItem.contentY + 4
          width: parent.width
          Repeater {
          model: Math.max(textarea.lineCount + 2, (lineColumn.height/lineColumn.rowHeight) )
          delegate: Text {
          id: text
          color: "#666"
          font: textarea.font
          width: lineColumn.width
          horizontalAlignment: Text.AlignHCenter
          verticalAlignment: Text.AlignVCenter
          height: lineColumn.rowHeight
          renderType: Text.NativeRendering
          text: index
          }
          }
          }
          }
          TextArea {
          id: textarea
          anchors.left: lineColumn.right
          anchors.right: parent.right
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          wrapMode: TextEdit.NoWrap
          frameVisible: false
          }
          }
          @

          1 Reply Last reply
          0
          • J Offline
            J Offline
            Jmgr
            wrote on last edited by
            #5

            Works great, many thanks!

            1 Reply Last reply
            0
            • Q Offline
              Q Offline
              qttester5
              wrote on last edited by
              #6

              This is interesting, can you share how you did the code completion and syntax highlighting and maybe any automatic line indents as you would expect to have in a code editor?

              1 Reply Last reply
              0
              • J Offline
                J Offline
                Jmgr
                wrote on last edited by
                #7

                Sorry for the late reply.

                Actually I gave up with my idea of using QML for this project because I could not get all the features I wanted without re-coding the whole QML item from scratch. (As far as I know, you cannot "enhance" a built-in QML item)

                I managed to get syntax highlighting working by using a QSyntaxHighlighter on a QTextDocument that you can get from the QML item, if I remember correctly. (I don't have the sources of this old project anymore)

                As for the indentation problem, I posted in this forum but never got any answer so I suppose it is not possible: http://qt-project.org/forums/viewthread/29623/

                1 Reply Last reply
                0
                • Q Offline
                  Q Offline
                  qttester5
                  wrote on last edited by
                  #8

                  Thanks. That's all very interesting, appreciate the info.

                  1 Reply Last reply
                  0

                  • Login

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved