Installing Qt Quick Components for Desktop for use with Qt Creator

Question

I'm trying to use Qt Quick Components for Desktop from http://labs.qt.nokia.com/2011/03/10/qml-components-for-desktop/

I can build and install it just fine into it's own folder, and view the qmls with qmlviewer, but how do I use these qml components from my other projects in Qt Creator?

For example, I'd like to be able to use Dial.qml from the Qt Quick Components for Desktop to make a Dial element in a qml file in my project.

Answer 1

I used the instructions from the answer for this question: Qt How to make and install plugins? and was able to successfully use the qt quick desktop components within qt creator qml files. Here are more detailed instructions that I made:

1. Download the tar.gz from http://qt.gitorious.org/qt-components/desktop/trees/master
2. Extract the components anywhere (e.g. C:\qt-components-desktop).
3. Open command prompt.
4. run vcvars32.bat from "your Visual Studio"\VC\bin\ directory ... (usually C:\Program Files\Microsoft Visual Studio 9.0\VC\bin) in command prompt. e.g. "C:\Program Files\Microsoft Visual Studio 9.0\VC\bin\vcvars32.bat" You should receive a message similar to: "Setting environment for using Microsoft Visual Studio 2008 x86 tools"
5. Set command prompt to use Qt Creator's bin path ... (usually C:\Qt\qtcreator-2.1.0\bin). e.g. SET PATH=%PATH%;C:\Qt\qtcreator-2.1.0\bin
6. Set command prompt to use Qt's bin path ... (usually C:\Qt\4.7.2\bin). e.g. SET PATH=%PATH%;C:\Qt\4.7.2\bin
7. Navigate in command prompt to the folder where you extracted the qt desktop components.
8. Run the following commands: qmake jom debug jom install
9. Copy the "components" folder from where you extracted the qt desktop components.
10. Place it in "your Qt directory"\imports\Qt\labs ... (usually C:\Qt\4.7.2\imports\Qt\labs)
11. Open the qmldir file inside the components folder in any text editor and observe the version number on each line (e.g. 0.1)
12. Place the following import statement in any qml file to use Qt desktop components: import Qt.labs.components #.# where #.# is your version number (e.g. 0.1)

Answer 2

1. Download the tar.gz from http://qt.gitorious.org/qt-components/desktop/trees/master
2. unpack
3. launch vcvars32.bat, then go to qt-components-desktop\ folder
4. go to qt-components-desktop\components\ folder (cd components), type "qmake && nmake install"
5. go to qt-components-desktop\src\ folder, type "qmake && nmake install"

Answer 3

These are alternative steps using a windows system and mingw which comes with Qt. For this example, I installed the Qt SDK to C:\QtSDK. For these instructions, I used Qt 4.8.1.

1. Download the tar.gz from http://qt.gitorious.org/qt-components/desktop/trees/master
2. Unpack the components
3. Add Qt's Desktop mingw bin path and Qt's mingw bin path to the PATH system variable with one of the two options:
   • Option 1: (persistent) Using the control panel. (http://www.computerhope.com/issues/ch000549.htm)
     1. Navigate to "Control Panel" -> "System" -> "Advanced system settings"
     2. Select the "Advanced" tab
     3. Press the "Environment Variables..." button, located below the third groupbox and above the OK/Cancel button
     4. Under the "System variables" groupbox, scroll through the list and find the "Path" variable
     5. Double click or select the "Path" variable and press "Edit..."
     6. Go to the right-most end of the "Variable value:" field by either clicking within the field and pressing END on your keyboard or scrolling to the end with your mouse.
     7. Add a semicolon ; then the path to Qt's mingw bin directory, in this case it is C:\QtSDK\mingw\bin
     8. Add another semicolon to the end and then Qt's Desktop mingw bin directory located in the version of Qt you are using, in this case it is 4.8.1: ;C:\QtSDK\Desktop\Qt\4.8.1\mingw\bin
     9. In the end, the addition to the path variable should look like this: ;C:\QtSDK\mingw\bin;C:\QtSDK\Desktop\Qt\4.8.1\mingw\bin. Note that these paths could also be added anywhere and whichever order within the path variable.
     10. Press "OK" to all opened windows to close and save your changes.
   • Option 2: (temporary) Using the SET command. This method only lasts within the command prompt window it was executed. If the command prompt window is closed, the SET commands must be re-entered.
     1. Add Qt's Desktop mingw bin directory with SET PATH=%PATH%;C:\QtSDK\Desktop\Qt\4.8.1\mingw\bin
     2. Add Qt's mingw bin directory with SET PATH=%PATH%;C:\QtSDK\mingw\bin
     3. Continue the steps below with this same command prompt window. The SET commands are only set for the specific command prompt window you executed them in.
4. If option 1 was used, open a new command prompt and navigate to where the qt desktop components are extracted. If option 2 was used, use the same command prompt to navigate to the qt desktop components folder
5. Run the following command: qmake && mingw-make install
6. This command will automatically copy the compiled component files to C:\QtSDK\Desktop\Qt\4.8.1\mingw\imports\QtDesktop so there is no need to manually move or create any folders.
7. Make a new Qt Desktop project, and select the mingw which matches the Qt version as the toolchain.

8. Attempt to compile and run the following code:

   import QtQuick 1.1
   import QtDesktop 0.1
   
   Rectangle {
       width: 100
       height: 100
       Button {
           id: button
           text: "Push me"
           onClicked: button.text = "Pressed"
       }
   }
   

9. Done

At the time of these instructions, the latest version of the QtDesktop components is 0.1. To check the version you installed, navigate to C:\QtSDK\Desktop\Qt\4.8.1\mingw\imports\QtDesktop and open the file qmldir with a text editor and notice the version number on each line.