Qt - How to create a library from an existing project?

Question

I am trying to create a library from this project: https://github.com/brexis/qml-bootstrap , in order to use all widgets in my Qt application in a bootstrap-like style. However, I don't understand how to do this. Should I use the "create new library" option in Qt Creator? How do I use the existing code in the repository to create a library and import it into my project? Is there any way to literally create specifically a QML library in Qt Creator? I am new to Qt and I'm trying to use these widgets before trying to create my own. Many thanks in advance!

Answer 1

Just to give you some tips:

• You do not need to use "create new library" project.
• If you work on Windows all of the qml plugins are placed in the following directory Qt_folder/Qt_version/Qt_Kit/qml - for example C:/Qt/Qt5.5/msvc_2013/qml . Please have a look at those folders.
• Each "library/plugin/module/you name it" has qmldir file . You need to name your module and describe what files are included with it. If you are not sure how to do it refer to the documentation link above or other plugins.
• When you successfuly create a plugin copy it to qml folder for each kit you have installed on your system.
• Restart Qt Creator so it loads new module and use it with "import" statement in qml
• Be extra careful when doing an deploy - when you want to copy your working application to another computer. If you use windeployqt.exe it should detect that the project uses your module and add it. In case it does not work you just need to copy a folder of you module (with qmldir and all other files) and place it next to the executable file

What you want to achieve is replacing these lines (from the example main.qml ):

import "src/lists"
import "src/bars"
import "src/buttons"
import "src/variables/fontawesome.js" as FontAwesome

with something like this:

import QmlBootstrap 1.0

I hope this helps. Just ask anything if you are still unsure.

---

It is really simple:

1. Find qml folder on your system. This should something like C:/Qt/5.5/msvc_2013/qml .
2. In the qml folder create directory QmlBootstrap . If you wish you can name it however you want. Then in code you will use it like this: import dir_name 1.0 .
3. Download the qml-bootstrap and copy all of the files in src folder to the new directory in qml folder.
4. Create new file in qml folder, name it qmldir and write this to the file:

# bars

Bar 1.0 bars/Bar.qml
ButtonBar 1.0 bars/ButtonBar.qml

# buttons

ButtonDefault 1.0 buttons/ButtonDefault.qml

# cards

Card 1.0 cards/Card.qml

# content

TextContent 1.0 content/TextContent.qml

# examples

AvatarListPage 1.0 examples/AvatarListPage.qml
ButtonBarPage 1.0 examples/ButtonBarPage.qml
ButtonPage 1.0 examples/ButtonPage.qml
CardPage 1.0 examples/CardPage.qml
DefaultListPage 1.0 examples/DefaultListPage.qml
IconListPage 1.0 examples/IconListPage.qml
ThumbnailListPage 1.0 examples/ThumbnailListPage.qml

# fonts

# fontawesome-webfont.ttf

# js

Helper 1.0 js/helper.js

# lists

AvatarListView 1.0 lists/AvatarListView.qml
DefaultListView 1.0 lists/DefaultListView.qml
IconListView 1.0 lists/IconListView.qml
List 1.0 lists/List.qml
ThumbnailListView 1.0 lists/ThumbnailListView.qml

# styles 

AvatarListViewStyle 1.0 styles/AvatarListViewStyle.qml
CardStyle 1.0 styles/CardStyle.qml
DefaulListViewStyle 1.0 styles/DefaulListViewStyle.qml
IconListViewStyle 1.0 styles/IconListViewStyle.qml
ListDividerStyle 1.0 styles/ListDividerStyle.qml
ThumbnailListViewStyle 1.0 styles/ThumbnailListViewStyle.qml
TouchClearStyle 1.0 styles/TouchClearStyle.qml
TouchOutlineStyle 1.0 styles/TouchOutlineStyle.qml
TouchStyle 1.0 styles/TouchStyle.qml

# variables

Badges 1.0 variables/badges.js
Bars 1.0 variables/bars.js
Base 1.0 variables/base.js
Buttons 1.0 variables/buttons.js
Colors 1.0 variables/colors.js
FontAwesome 1.0 variables/fontawesome.js
Items 1.0 variables/items.js

Now restart Qt Creator and you will be able to use all of the components of qml-bootstrap simply by writing import QmlBootstrap 1.0 . For example try creating new project, replace default main.qml with this main.qml , and change imports as I suggested above. If you want to use a custom font you need to add it by yourself to the project. It cannot be a part of the plugin. So you will get error trying to run this main.qml . To get this to work simply add any font you want to the project (add it to qrc file) and correct this line FontLoader{ source: "qrc:/src/fonts/fontawesome-webfont.ttf"} so the source property points to your font.

---

One more thing. main.qml will unfortunately not work just out of the box. Reason? It uses components specifically loaded from file. This will not work as you will not have access to the files in your project.

Here is modified main.qml that will work.

import QtQuick 2.3
import QtQuick.Controls 1.2
import QmlBootstrap 1.0

ApplicationWindow {
    visible: true
    width: 800
    height: 1280
//    FontLoader{ source: "qrc:/src/fonts/fontawesome-webfont.ttf"}
    Rectangle {
        anchors.fill: parent
    }
    toolBar: Bar{
        id: titleBar
        leftComponent: Component{
            ButtonDefault{
                class_name: "bar dark clear"
                text: "Back"
                icon: FontAwesome.icons.fa_angle_left
                opacity: stackView.depth > 1 ? 1 : 0
                visible: opacity ? true : false
                Behavior on opacity { NumberAnimation{} }
                onClicked: {
                    stackView.pop()
                    titleBar.title = "Qml Bootstrap Demo"
                }
            }
        }

        class_name: "header"
        title: "Qml Bootstrap Demo"
    }

    ListModel {
        id: pageModel
        ListElement {
            text: "Buttons Demo"
            componentIndex: 0
        }
        ListElement {
            text: "ListView Demo"
            componentIndex: 1
        }
        ListElement {
            text: "ListView with icon Demo"
            componentIndex: 2
        }
        ListElement {
            text: "Avatar ListView Demo"
            componentIndex: 3
        }
        ListElement {
            text: "Thumnail ListView Demo"
            componentIndex: 4
        }
        ListElement {
            text: "Button bar Demo"
            componentIndex: 5
        }
        ListElement {
            text: "Card"
            componentIndex: 6
        }
    }

    property var components: [
        buttonPage, defaultListPage, iconListPage,
        avatarListPage, thumbnailListPage, buttonBarPage,
        cardPage
    ]
    Component {id: buttonPage; ButtonPage{} }
    Component {id: defaultListPage; DefaultListPage{} }
    Component {id: iconListPage; IconListPage{} }
    Component {id: avatarListPage; AvatarListPage{} }
    Component {id: thumbnailListPage; ThumbnailListPage{} }
    Component {id: buttonBarPage; ButtonBarPage{} }
    Component {id: cardPage; CardPage{} }


    StackView {
        id: stackView
        anchors.fill: parent
        focus: true
        Keys.onReleased: if (event.key === Qt.Key_Back && stackView.depth > 1) {
                             stackView.pop();
                             event.accepted = true;
                         }

        initialItem: Item {
            width: parent.width
            height: parent.height
            DefaultListView{
                model: pageModel
                anchors.fill: parent
                onItemClicked: {
                    stackView.push(components[item.componentIndex])
                    titleBar.title = item.text
                }
            }
        }
    }

    statusBar: Bar{
        class_name: "footer calm"
        title: "Powered by Brexis and Kamhix"
    }
}

I know this is very bad design but it is just an attempt to make the main.qml work with our fresh plugin. The bottom line is that you CAN make qml-bootstrap a plugin and all of its components will be available to use.