Important: Please read the Qt Code of Conduct -

Example is a little difficult to follow

  • I'm tryingto follow the example for creating a an application for weather and a night clock. I'm at the part were I need to turn each of my files into modules and components. I'm not sure on how to turn to start the first procees and then create a qmldir. I tried going into the projects panel -> right click on the folder ->create a new file in the folder -> add the code and move it to another folder in my directory. After that I did the same thing but made the qmldir a text file. If anyone can explain to me were I misunderstood the instructions on how to do this it would be greatly apprieciated. Thanks. Here are the example instructions:

    bq. In order to create a component, you have to create a new file saved as
    <NameOfComponent>.qml with only one root element in it (the same as you would
    do with an ordinary Qt Quick application). It is important to underline that the name of the
    file has to start with a capital letter. From now on, the new component will be available under
    the name <NameOfComponent> to all other Qt Quick applications residing in the same
    directory. Generally, files with a qml extension are referred to as QML Documents 1 .
    When your work progresses, you will probably get many files in the application’s folder. Later
    on, you might even have the need to host components in different versions. This is where Qt
    Quick modules come to the rescue. The first step is to move all components (basically, files)
    which belong to the same group of functionality in a new folder. Then you need to create a
    qmldir file containing meta-information about these components in that folder.

  • Qt Champions 2017

    How are you planning to keep your qml files ? If you are component directory are with reference to the current directory, you don't have do anything. Just place them in different directory under your current directory. Import these directory.



    You can just import the directory module1 and module2 in main and start using the Weather.qml and Cloud.qml

    Hope this helps.

  • In the project window I have it like this
    Folder: SwordNote0_1

    • SwordNote0_1.qmlproject
      Folder: ModsComLib
      - NightClockApp.qml
      - WeatherApp.qml
      - WeatherModelApp.qml
    • SwordNote0_1.qml

    Note sure if this is what you mean. Here is the code in the main qml file SwordNote0_1.qml:
    @import QtQuick 2.2
    import QtQuick.Controls 1.1
    import QtQuick.Window 2.0

    import "File:/home/phoenix/SwordNote0_1/ModsComLib/NightClockApp.qml"
    import "File:/home/phoenix/SwordNote0_1/ModsComLib/WeatherApp.qml"

    Rectangle {
    id: root
    property string defaultLocation: "Munich"
    property int defaultInterval: 60 // in seconds
    property bool showSeconds: true
    property bool showDate: true

    width: 360
    height: 640
    Image {
        id: background
        source: "File:/home/phoenix/QtExamples/content/resources/light_background.png"
        fillMode: "Tile"
        anchors.fill: parent
        onStatusChanged: if (background.status == Image.Error)
                             console.log("Background image \"" +
                                         source +
                                         "\" cannot be loaded")
    WeatherModelItem {
        id: weatherModelItem
        location: root.defaultLocation
        interval: root.defaultInterval
    Component {
        id: weatherCurrentDelegate
        Weather {
            id: currentWeatherItem
            labelText: root.defaultLocation
            conditionText: model.condition
            tempText: model.temp_c + "C°"
    Component {
        id: weatherForecastDelegate
        Weather {
            id: forecastWeatherItem
            labelText: model.day_of_week
            conditionText: model.condition
            tempText: Logic.f2C (model.high) +
                      "C° / " +
                      Logic.f2C (model.low) +
    Column {
        id: clockAndWeatherScreen
        anchors.centerIn: root
        NightClock {
            id: clock
            height: 80
            width: 160
            showDate: root.showDate
            showSeconds: root.showSeconds
            textColor: Style.onlineClockTextColor
        Repeater {
            id: currentWeatherView
            model: weatherModelItem.currentModel
            delegate: weatherCurrentDelegate
        GridView {
            id: forecastWeatherView
            width: 300
            height: 300
            cellWidth: 150; cellHeight: 150
            model: weatherModelItem.forecastModel
            delegate: weatherForecastDelegate
    MouseArea {
        anchors.fill: parent
        onClicked: Qt.quit()



  • I don't think you can import a QML file directly, this should not be working:
    import "File:/home/phoenix/SwordNote0_1/ModsComLib/NightClockApp.qml"

    You should import the directory instead, and QML files inside that directory can then be used. Eg:
    import "File:/home/phoenix/SwordNote0_1/ModsComLib"

    Rectangle {
    NightClockApp {

  • qmldir is a file that defines your module name, components and their corresponding QML files. Here's an example of the directory structure of a module:
    /home/phoenix/MyControls <-- This is a directory
    /home/phoenix/MyControls/qmldir <-- qmldir is a plain text file. Note that it has no extension.
    /home/phoenix/MyControls/MyButton.qml <-- a component
    /home/phoenix/MyControls/MyRectangle.qml <-- another component

    The contents of qmldir can be like the following. This will create a module called MyControls that has two components:
    module MyControls
    MyButton 1.0 MyButton.qml
    MyRectangle 2.0 MyRectangle.qml

    Finally you need to tell QML engine how to locate MyControls module. Otherwise you will get this error when you import: module "MyControls" is not installed. One way is by using QML2_IMPORT_PATH environment variable. In our example, you set QML2_IMPORT_PATH=/home/phoenix/MyControls. The other way is to call "QQmlEngine::addImportPath()":

    After everything is set, you can import the module in your QML file:
    import MyControls

    MyRectangle {
    MyButton {

  • How do I go about creating the qmldir correctly? I tried to right click on the ModsComLib folder and choose a general template but that would add a txt extension and I know the qmldir shouldn't have any. I could just modify the example qmldir file in the example and move it to the ModsComLib but it feels kind of cheap without knowing how its done.

  • So I messed up some where and the whole entire file is gone. I'm just with SwordNote0_1.qmlproject file. Back to the drawing board.

  • [quote author="dev3060" date="1408435649"]How do I go about creating the qmldir correctly?[/quote]
    I am also puzzled by the inability to create qmldir elegantly within Qt Creator :) I usually create the file with another text editor, and may have to remove the extension by renaming it.

  • I did the same thing but poof everything just went away. I plan on just starting back at square one. Maybe, I'll discover what happened. I appreciate the help it did clear some things up.

Log in to reply