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] Creating own components?
QtWS25 Last Chance

[solved] Creating own components?

Scheduled Pinned Locked Moved QML and Qt Quick
8 Posts 5 Posters 3.4k Views
  • 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.
  • P Offline
    P Offline
    pascal95abc
    wrote on last edited by
    #1

    Hello,

    I want to use buttons in QML.
    Therefor, I wrote this code
    @ Rectangle {
    id: rectangle1
    height: 50
    color: "#ffffff"
    radius: 5
    anchors.left: item1.right
    anchors.leftMargin: 0
    anchors.right: parent.right
    anchors.rightMargin: 0
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 0
    transformOrigin: Item.BottomRight
    border.width: 2
    border.color: "#000000"

            Text {
                id: text2
                text: qsTr("button's caption")
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                transformOrigin: Item.Center
                font.bold: true
                font.pixelSize: 20
            }
    
            MouseArea {
                id: mouse_area1
                z: 1
                hoverEnabled: true
                anchors.fill: parent
                anchors.bottom: page.top
                anchors.top: page.bottom
                onClicked: {
                    // button's function
                }
            }
        }@
    

    and because I don't want to rewrite this or copy it always when needed, I want to create a component that includes the code above.
    !http://i46.img-up.net/Screenshotq3f3.png(Qt Quick, Elements)!

    Thank you

    Qt 4.7.3
    Symbian OS v9.4 / Symbian^1, S60 5th Edition
    on N97

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mikealfa
      wrote on last edited by
      #2

      you can write this code in a separate file say Button.qml and it will be automatically available to you just like the available built-in components

      1 Reply Last reply
      0
      • P Offline
        P Offline
        pascal95abc
        wrote on last edited by
        #3

        Oh, and where should I save the file, so that it is available from all my projects?
        (my project directory is c:\qtsdk\projects)

        What should I write in the file in addition ?

        Qt 4.7.3
        Symbian OS v9.4 / Symbian^1, S60 5th Edition
        on N97

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mikealfa
          wrote on last edited by
          #4

          you ll have to save the file in the folder in which you have the .pro file of ur project...
          you ll have to do so for all the projects for which u need the button element...

          1 Reply Last reply
          0
          • P Offline
            P Offline
            pascal95abc
            wrote on last edited by
            #5

            Ok, I saved the file and added it to my project.
            !http://e96.img-up.net/Screenshota8zh.png(Button.qml)!

            But I can't load it via the menu with the elements like "Border Image", "Image", "Item", "Rectangle".

            Qt 4.7.3
            Symbian OS v9.4 / Symbian^1, S60 5th Edition
            on N97

            1 Reply Last reply
            0
            • J Offline
              J Offline
              jackyang
              wrote on last edited by
              #6

              You should write a qmldir for that .qml file.
              "Modules":http://doc.qt.nokia.com/main-snapshot/qdeclarativemodules.html

              1 Reply Last reply
              0
              • K Offline
                K Offline
                kahon
                wrote on last edited by
                #7

                To access to component created. You have to be sure that you import dir of this.

                for example:

                thinking in an order, you could create a folder named myComponents inside: c:\qtsdk\projects

                so: c:\qtsdk\projects\myComponents\Button.qml exists.

                At first in your main.qml you type: "import myComponents" then you can write Button{} an it will work fine.

                Best,
                Fernando.

                1 Reply Last reply
                0
                • D Offline
                  D Offline
                  DiegoBR
                  wrote on last edited by
                  #8

                  Good! iam learning QML too, and it's so very helpfull. Sorry for my poor english.

                  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