Example is a little difficult to follow

[dev3060]

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.

[dheerendra]

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.

[dev3060]

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()
}

}

@

[fxam]

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

[fxam]

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

[dev3060]

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.

[dev3060]

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.

[fxam]

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

[dev3060]

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.