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. How to load custom QML controls into the QML Designer?
Forum Updated to NodeBB v4.3 + New Features

How to load custom QML controls into the QML Designer?

Scheduled Pinned Locked Moved QML and Qt Quick
qmlqmldesignercustomplugindrag and drop
2 Posts 1 Posters 4.2k Views 2 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.
  • C Offline
    C Offline
    Cybrum
    wrote on 9 Jul 2015, 10:03 last edited by Cybrum 7 Sept 2015, 10:12
    #1

    I am facing difficulty in importing my custom control into QML Designer. i.e. MyQMLControls 1.0 library has a BlueButton.
    I want that BlueButton in QML Designer when I import MyQMLControls 1.0 in MyTestApp Project so that I can drag and drop the control .
    Any help is appreciated.

    C 1 Reply Last reply 23 Jul 2015, 06:16
    0
    • C Cybrum
      9 Jul 2015, 10:03

      I am facing difficulty in importing my custom control into QML Designer. i.e. MyQMLControls 1.0 library has a BlueButton.
      I want that BlueButton in QML Designer when I import MyQMLControls 1.0 in MyTestApp Project so that I can drag and drop the control .
      Any help is appreciated.

      C Offline
      C Offline
      Cybrum
      wrote on 23 Jul 2015, 06:16 last edited by Cybrum
      #2

      I found a solution. I followed the below Steps:
      1.Created a QtCreator Extension Plugin
      2.In Pro file: Add
      uri = mycompany.qmlcomponents
      version =1.0

      3.Added my CustomControl QML file.
      4.Registered using qmlRegisterType
      5.In qml dir:
      module mycompany.qmlcomponents
      plugin MyExtensionPlugin
      classname MyExtensionPlugin
      typeinfo mycompany.qmlcomponents
      designersupported
      5.Wrote the MetaInfo file (myextensionplugin.metainfo):
      MetaInfo {
      Type {
      name: "mycompany.qmlcomponents.MyCustomItem"
      icon: "images/customitem-icon.png"

              ItemLibraryEntry {
                  name: "CustomItem"
                  category: "My Extension - Items"
                  libraryIcon: "images/customitem-icon.png"
                  version: "1.0"
                  requiredImport: "mycompany.qmlcomponents"
      
                  Property {
                      name: "itemItext"
                      type: "binding"
                      value: "qsTr(\"Button\")"
                  }
              }
          }
      }
      

      6.Create a designer folder
      7.Add following to designer.pri
      QML_FILES +=
      $$PWD/CustomItemSpecifics.qml
      QML_FILES += $$PWD/myextensionplugin.metainfo
      QML_FILES +=
      $$PWD/images/customitem-icon.png
      8.Build and install
      9.Generate qmltypes: [You can also do this during qmake]
      qmlplugindump mycompany.qmlcomponents1.0 > plugins.qmltypes
      10.The controls will be available in the qml designer.

      Check the unsupported properties for custom controls:
      http://doc.qt.io/qtcreator/creator-quick-ui-forms.html

      1 Reply Last reply
      1

      • Login

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