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. Example is a little difficult to follow
Forum Updated to NodeBB v4.3 + New Features

Example is a little difficult to follow

Scheduled Pinned Locked Moved QML and Qt Quick
9 Posts 3 Posters 2.8k 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.
  • D Offline
    D Offline
    dev3060
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
    • dheerendraD Offline
      dheerendraD Offline
      dheerendra
      Qt Champions 2022
      wrote on last edited by
      #2

      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.

      e.g

      dev3036>main.qml
      dev3060/module1/Weather.qml
      dev3060/module2/Cloud.qml

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

      Hope this helps.

      Dheerendra
      @Community Service
      Certified Qt Specialist
      http://www.pthinks.com

      1 Reply Last reply
      0
      • D Offline
        D Offline
        dev3060
        wrote on last edited by
        #3

        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) +
                          "C°"
            }
        }
        
        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()
        }
        

        }

        @

        1 Reply Last reply
        0
        • F Offline
          F Offline
          fxam
          wrote on last edited by
          #4

          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 {
          ...
          }
          ...
          }
          @

          1 Reply Last reply
          0
          • F Offline
            F Offline
            fxam
            wrote on last edited by
            #5

            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()":http://qt-project.org/doc/qt-5/qqmlengine.html#addImportPath

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

            MyRectangle {
            ...
            MyButton {
            ...
            }
            }
            @

            1 Reply Last reply
            0
            • D Offline
              D Offline
              dev3060
              wrote on last edited by
              #6

              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.

              1 Reply Last reply
              0
              • D Offline
                D Offline
                dev3060
                wrote on last edited by
                #7

                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.

                1 Reply Last reply
                0
                • F Offline
                  F Offline
                  fxam
                  wrote on last edited by
                  #8

                  [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.

                  1 Reply Last reply
                  0
                  • D Offline
                    D Offline
                    dev3060
                    wrote on last edited by
                    #9

                    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.

                    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