So that would say that there is no chance of applying skinning via QSS files. Correct me if I am wrong. -Srikanth
> > ---------- Forwarded message ---------- > From: Srikanth <[email protected]> > To: [email protected] > Date: Mon, 25 Apr 2011 21:34:36 +0530 > Subject: [Qt-qml] How to do skinning in QML > Hi, > > I have a simple qml item like > > Rectangle { > > id: myRect > > width: 360; height: 80 > > color: "white" // this color should be skinned dynamically using qss > > //... > > } > > My requirement is that for different clients the color of the rect changes. > This can be perfectly done using qss in a QWidget based approach, where we > generate a qss specific to the client's requirement. Is there a way in which > I can use qss or css to do styling in QML. I hope there should be one, but I > need the best practice to achieve this. > > Thanks, > Srikanth > > > > > ---------- Forwarded message ---------- > From: Girish Ramakrishnan <[email protected]> > To: Srikanth <[email protected]> > Date: Mon, 25 Apr 2011 21:54:24 +0530 > Subject: Re: [Qt-qml] How to do skinning in QML > Hi Srikanth, > > On Mon, Apr 25, 2011 at 9:34 PM, Srikanth <[email protected]> > wrote: > > Hi, > > > > I have a simple qml item like > > > > Rectangle { > > > > id: myRect > > > > width: 360; height: 80 > > > > color: "white" // this color should be skinned dynamically using qss > > > > //... > > > > } > > > > My requirement is that for different clients the color of the rect > changes. > > This can be perfectly done using qss in a QWidget based approach, where > we > > generate a qss specific to the client's requirement. Is there a way in > which > > I can use qss or css to do styling in QML. I hope there should be one, > but I > > need the best practice to achieve this. > > > > If your skin is simply about switching colors and images, you can > expose a "Skin" QObject using QDeclarativeEngine::setContextProperty. > The Skin class can contain various properties that QML can bind to. > See QDeclarativePropertyMap that might help you create this "Skin" > Object. > > (eg) Rectangle { id: myRect; color: skin.myRectColor } // skin is C++ > object with property myRectColor > > For more complex skins, you can just create a separate qml for each client. > > Girish > > > > ---------- Forwarded message ---------- > From: Owen Zhao <[email protected]> > To: [email protected] > Date: Tue, 26 Apr 2011 09:55:36 +0800 > Subject: [Qt-qml] The two transitions have the same result. But I think it > shouldn't. > Hi all, > I am learning the Qt Essentials(QML Version) by myself. And something in > transitions is confusing me. > In the pdf I download from nokia website, it says. > >> transitions: [ >> Transition { >> from: "stop"; to: "go" >> PropertyAnimation { >> target: stop_light >> properties: "color"; duration: 1000 >> } >> }, >> Transition { >> from: "go"; to: "stop" >> PropertyAnimation { >> target: go_light >> properties: "color"; duration: 1000 >> } >> } ] >> > is the same as > >> transitions: [ >> Transition { >> from: "*"; to: "*" >> PropertyAnimation { >> target: stop_light >> properties: "color"; duration: 1000 >> } >> PropertyAnimation { >> target: go_light >> properties: "color"; duration: 1000 >> } >> } ] >> > And when I run the code in qmlviewer, they do do the same thing.(full code > is provided at the bottom of this email) However, I believe they shouldn't > be the same. As in the first code when transitioning from the "stop" to "go" > state, the target is only the "stop_light", and in the second code when > transition accurs, both the "stop_light" and "go_light" are targets. > > Am I wrong or there is something I misunderstood? > > The full qml file code here: > >> import QtQuick 1.0 >> >> Rectangle { >> width: 150; height: 250 >> >> Rectangle { >> id: stopLight >> x: 25; y: 15; width: 100; height: 100 >> } >> Rectangle { >> id: goLight >> x: 25; y: 135; width: 100; height: 100 >> } >> >> states: [ >> State { >> name: "stop" >> PropertyChanges { target: stopLight; color: "red" } >> PropertyChanges { target: goLight; color: "black" } >> }, >> State { >> name: "go" >> PropertyChanges { target: stopLight; color: "black" } >> PropertyChanges { target: goLight; color: "green" } >> } >> ] >> >> state: "stop" >> >> MouseArea { >> anchors.fill: parent >> onClicked: parent.state == "stop" ? >> parent.state = "go" : parent.state = "stop" >> } >> >> transitions: [ >> Transition { >> from: "*"; to: "*" >> PropertyAnimation { >> target: stopLight >> properties: "color"; duration: 1000 >> } >> PropertyAnimation { >> target: goLight >> properties: "color"; duration: 1000 >> } >> } ] >> >> >> } >> >> -- > Owen Zhao > > > > ---------- Forwarded message ---------- > From: <[email protected]> > To: <[email protected]>, <[email protected]> > Date: Tue, 26 Apr 2011 03:49:05 +0000 > Subject: Re: [Qt-qml] The two transitions have the same result. But I think > it shouldn't. > > They actually turn on (red/blue) immediately. Only when the reversible is > set it will be the same. > > > > --Kuifei > > > > import QtQuick 1.0 > > Rectangle { > > width: 150; height: 250 > > Rectangle { > > id: stopLight > > x: 25; y: 15; width: 100; height: 100 > > } > > Rectangle { > > id: goLight > > x: 25; y: 135; width: 100; height: 100 > > } > > states: [ > > State { > > name: "stop" > > PropertyChanges { target: stopLight; color: "red" } > > PropertyChanges { target: goLight; color: "black" } > > }, > > State { > > name: "go" > > PropertyChanges { target: stopLight; color: "black" } > > PropertyChanges { target: goLight; color: "green" } > > } > > ] > > MouseArea { > > anchors.fill: parent > > onClicked: parent.state == "stop" ? > > parent.state = "go" : parent.state = "stop" > > } > > // transitions: [ > > // Transition { > > // from: "*"; to: "*" > > // PropertyAnimation { > > // target: stopLight > > // properties: "color"; duration: 5000 > > // } > > // PropertyAnimation { > > // target: goLight > > // properties: "color"; duration: 5000 > > // } > > // } ] > > transitions: [ > > Transition { > > from: "stop"; to: "go" > > reversible: true > > PropertyAnimation { > > target: stopLight > > properties: "color"; duration: 5000 > > } > > }, > > Transition { > > from: "go"; to: "stop" > > reversible: true > > PropertyAnimation { > > target: goLight > > properties: "color"; duration: 5000 > > } > > } > > ] > > } > > > > > > *From:* [email protected] [mailto: > [email protected]] *On Behalf Of *ext Owen > Zhao > *Sent:* 2011年4月26日 9:56 > *To:* [email protected] > *Subject:* [Qt-qml] The two transitions have the same result. But I think > it shouldn't. > > > > Hi all, > I am learning the Qt Essentials(QML Version) by myself. And something in > transitions is confusing me. > In the pdf I download from nokia website, it says. > > transitions: [ > Transition { > from: "stop"; to: "go" > PropertyAnimation { > target: stop_light > properties: "color"; duration: 1000 > } > }, > Transition { > from: "go"; to: "stop" > PropertyAnimation { > target: go_light > properties: "color"; duration: 1000 > } > } ] > > is the same as > > transitions: [ > Transition { > from: "*"; to: "*" > PropertyAnimation { > target: stop_light > properties: "color"; duration: 1000 > } > PropertyAnimation { > target: go_light > properties: "color"; duration: 1000 > } > } ] > > And when I run the code in qmlviewer, they do do the same thing.(full code > is provided at the bottom of this email) However, I believe they shouldn't > be the same. As in the first code when transitioning from the "stop" to "go" > state, the target is only the "stop_light", and in the second code when > transition accurs, both the "stop_light" and "go_light" are targets. > > Am I wrong or there is something I misunderstood? > > The full qml file code here: > > import QtQuick 1.0 > > Rectangle { > width: 150; height: 250 > > Rectangle { > id: stopLight > x: 25; y: 15; width: 100; height: 100 > } > Rectangle { > id: goLight > x: 25; y: 135; width: 100; height: 100 > } > > states: [ > State { > name: "stop" > PropertyChanges { target: stopLight; color: "red" } > PropertyChanges { target: goLight; color: "black" } > }, > State { > name: "go" > PropertyChanges { target: stopLight; color: "black" } > PropertyChanges { target: goLight; color: "green" } > } > ] > > state: "stop" > > MouseArea { > anchors.fill: parent > onClicked: parent.state == "stop" ? > parent.state = "go" : parent.state = "stop" > } > > transitions: [ > Transition { > from: "*"; to: "*" > PropertyAnimation { > target: stopLight > properties: "color"; duration: 1000 > } > PropertyAnimation { > target: goLight > properties: "color"; duration: 1000 > } > } ] > > > } > > -- > Owen Zhao > > _______________________________________________ > Qt-qml mailing list > [email protected] > http://lists.qt.nokia.com/mailman/listinfo/qt-qml > >
_______________________________________________ Qt-qml mailing list [email protected] http://lists.qt.nokia.com/mailman/listinfo/qt-qml
