Use Style for QtQuick.Controls from Resources file

fyDe

Hey,

I want to use al the components and stuff in my QT/QML application from the Resources file.

Everything worked but i have a am not able load the style of a QtQuick.Control Item from Recources

Here my Style File: (ButtonStylePercentage.qml)

@import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.2
import QtGraphicalEffects 1.0

ButtonStyle {
label: Component {
Text {
text: control.text
clip: true
wrapMode: Text.WordWrap
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
anchors.fill: parent
font.pixelSize: 18
font.bold: true
color: control.hovered ? "#026cce" : "#000000"
}
}
background: Item{
Item {
id: backgroundButton2
implicitWidth: control.width
implicitHeight: control.height

            visible: false

            Rectangle {
                id:buttBack2
                implicitWidth: control.width-2
                implicitHeight: control.height-2
                anchors.centerIn: backgroundButton2

                border.width: control.activeFocus ? 2 : 1
                border.color: "#888"
                radius: 100
                gradient: Gradient {
                    GradientStop { position: 0 ; color: control.pressed ? "#313131" : "#9f9f9f" }
                    GradientStop { position: 1 ; color: control.pressed ? "#4b4b4b" : "#afafaf" }
                }
            }
        }
            InnerShadow{
                source:backgroundButton2
                anchors.fill: backgroundButton2

                radius: 5
                samples: 32

                color: "#E0000000"

                spread: 0.15
            }
    }
}@

and here its usage without Resouces File:
This works fine

@ Button {
id:button50
text: "50 %"
x:100
y:25+titleBlock.height
width: 100
height: 50

        onClicked: {
            contSlider.value = 50
        }
        style: ButtonStylePercentage {}
}@

now i tried to use it from Recourcesfile like this
@ Button {
id:button50
text: "50 %"
x:100
y:25+titleBlock.height
width: 100
height: 50

        onClicked: {
            contSlider.value = 50
        }
        style: "qrc:///qmlFiles/qml/Komponenten/ButtonStylePercentage.qml"
}@

This throws error when executing:
qrc:///qmlFiles/qml/Komponenten/ContControl.qml:113:20: Invalid property assignment: unsupported type "QQmlComponent*"

How could this Problem be solved?

Thanks!

Greets Nico

p3c0

Hi,

I think you can't assign a QML file directly to the style since it requires a Component and not Url.

p3c0

If your intention is to keep things separate, you can do this instead.
Keep the ButtonStyle encapsulated in Component type in a separate file. So,

MyButtonStyle.qml
@
Component {
ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#888"
radius: 4
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
}
}
}
@

and in file where you want to use it, suppose main.qml
@
MyButtonStyle {
id: mystyle
}

Button {
text: "A button"
style: mystyle
}
@

fyDe

Thank you.
but this will not help me.

Yes i want to to things separately but i also want to access the Style of the Button fromm the Resouces File.

Nico

p3c0

Well you can put the MyButtonStyle.qml file in Resources and load it.

fyDe

I tried to but how is the syntax for doing this?

p3c0

No you can't do it in the way you have shown in the first post. Refer to the example i posted.

fyDe

Ok thanks,
unfortunately this does not help me.

fyDe

Could i load the component from the Resources URL and then attach it to the Style of the Button?

p3c0

That is what i explained in the 2 & 3 post :)
I'll try to explain again.
Consider MyButtonStyle.qml and main.qml are QML file's which are present in your Resources file.
MyButtonStyle.qml contains your style Component, it's contents are:
MyButtonStyle.qml
@
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Component {
    ButtonStyle {
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 25
            border.width: control.activeFocus ? 2 : 1
            border.color: "#888"
            radius: 4
            gradient: Gradient {
                GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
            }
        }
    }
}

@

and then main.qml is the file which gets loaded first and contains your button and also it loads MyButtonStyle.qml as a Component
main.qml. Afterwards it's id viz. mystyle is set to Button. Thus we have set the Style Component to the Button.
@
import QtQuick 2.2

MyButtonStyle {
    id: mystyle
}
 
 
Button {
   text: "A button"
   style: mystyle
}

@

Hope this helps...