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. -
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.qmlYou 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.0import "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: truewidth: 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() }
}
@
- SwordNote0_1.qmlproject
-
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()":http://qt-project.org/doc/qt-5/qqmlengine.html#addImportPath
After everything is set, you can import the module in your QML file:
@
import MyControlsMyRectangle {
...
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.