ubuntu-phone team mailing list archive

[Sam Segers <sam.sgrs@xxxxxxxxx>]

2013/7/30 <mrqtros@xxxxxxxxx>

> Sam, mb Qt.binding can be helpful for you?
>
> Sorry, if I didn't understood your problem well, but if can explain it on
> concrete examples - do it, I'll help!
>

If you have:

Label {

        id: label

        anchors.centerIn: parent

text: "Hello..."

}


You could use `text : myText.text` to bind it to myText.text.

But if you have a js library:


import "test.js" as Test

`text : Test.text` doesn't bind it to the js global variable cause QML
can't bind to js variables.


If you do `label.text = Qt.binding(function(){return Test.text})` in
Component.onComplete it doen't work neither.


Cause if you then do `text = "...world"` from js, it doesn't change.


You would want to do something like this if you have multiple QML
GUI's for multiple platforms and don't want to hard code an elements.


As Michael Zanetti said, you could use QtObject as a lightweight
container component:


QtObject {

    id: container

    property string label: "Hello..."

}


And then do:


Component.onCompleted: {

    label.text = Qt.binding(function(){return Test.text})

    Test.container = container;

}


And bind the GUI components to the container's properties.


In your JS file, you could then do:

comntainer.label = "...world"

And the UI will update.



> BR,
>
> Roman.
>
>
> P.S. API of desktop components is really cool, I think that guys from
> Ubuntu toolkit must gain done ideas and qml practice there =)
>
> 30.07.13 0:33 Michael Zanetti написал(а):
> On Monday 29 July 2013 18:02:07 Sam Segers wrote:
> > I have a problem with this QML/JS approach. You can make objects from C++
> > and bind to those signals and values to the UI. I tried to do something
> > similar with JavaScript but don't know how. Having all the logic, values
> > etc in an external JavaScript file and only the UI in QML.
>
>  Hmm... good point. Didn't think of that.
>
>  > I can't seem to find how to bind QML properties to values defined in
> > JavaScript, or how to update my UI from JavaScript transparently. All the
> > examples you find online let the js file set the values of qml objects
> and
> > read from them. I solved this by making my js file a library, let QML
> set a
> > js variable to a QML object and only set the values of this QML object
> and
> > bind the UI with these. So my js file sets these values instead of its
> own.
> > I end up with a QML object that has a lot of properties and signals. Do
> you
> > have a better way?
>
>  Hmm... You could perhaps use QtObject {} containers to store data. You
> can
> reference them directly from JavaScript and bind the layer of Component
> specific UI to that.
>
>  Haven't tried how feasible this really is in practice though.
>
>  Br,
> Michael
>
>  >
> > Sam
> >
> >
> > 2013/7/29 Michael Zanetti <michael.zanetti@xxxxxxxxxxxxx>
> >
> > > Hi
> > >
> > > On Monday 29 July 2013 15:53:52 Andreas Poulsen wrote:
> > > > I just wondered, if there is any plan to have a more general QML UI
> > > > toolkit. For now, there is Ubuntu.Components, Sailfish OS has some
> > > > components, and QtQuick is going to have some QtQuick.components.
> Could
> > > > you guys talk together about some standard components? It would be
> much
> > > > more easy, to develop one app for 2 or 3 platforms, than creating it
> for
> > > > 3 platforms using the same technology, but different toolkits. Just a
> > > > wish from an app developer :)
> > >
> > > Yes, this is really one of the bad things of the current state with
> QML in
> > > general.
> > >
> > > There are talks in progress to align APIs as close as possible.
> However, I
> > > think it won't be possible (at least not in the foreseeable future) to
> > > have
> > > the same components everywhere. The reason is that different platform
> look
> > > and
> > > behave differently. Even if most of the components could probably
> aligned,
> > > there will always be differences for some of them. For example if a
> > > platform
> > > doesn't have some UI pattern or a platform invents a new one. One
> example
> > > is
> > > the hiding Toolbar on Ubuntu. MeeGo's toolbar didn't do that so there
> is
> > > the
> > > need of a difference in the API.
> > >
> > > Also a different look of the same UI patterns introduces problems here.
> > > For
> > > example if one platform uses big round buttons with spaces in between
> > > while
> > > another one uses small square buttons without a space. That would allow
> > > you to
> > > place a different amount of items into one row. While the API might be
> > > compatible, your application would look quite bad one one of the
> > > platforms.
> > >
> > > The original idea for QML was to write the common stuff in Qt/C++ and
> then
> > > create a very thin UI layer with QML on top of it. That thin UI layer
> is
> > > easy
> > > and fast to write (just puttin some Buttons and Images into a layout
> and
> > > hook
> > > functionality up to the C++ business logic which is really cross
> > > platform).
> > > This works quite well for me having a bunch of apps running on Maemo,
> > > MeeGo,
> > > Symbian, KDE and Ubuntu Touch.
> > >
> > > Of course, if you write an app only in QML and smash your javaScript
> > > somewhere
> > > between the painting code, your app's portability will go towards 0.
> You
> > > can
> > > of course stick to JavaScript for the platform independent code too,
> but
> > > make
> > > sure to have JavaScript in separate files, and with a clean API, never
> > > accessing properties/elements from the QML code from within JavaScript.
> > > Then I
> > > guess you can create something somewhat portable without C++ too.
> > >
> > > Br,
> > > Michael
> > >
> > > --
> > > Mailing list: https://launchpad.net/~ubuntu-phone
> > > Post to : michael.zanetti@xxxxxxxxxxxxx
> > > Unsubscribe : https://launchpad.net/~ubuntu-phone
> > > More help : https://launchpad.net/~ubuntu-phone
>
>
> --
>  Mailing list: https://launchpad.net/~ubuntu-phone
> Post to : michael.zanetti@xxxxxxxxxxxxx
> Unsubscribe : https://launchpad.net/~ubuntu-phone
> More help : https://launchpad.net/~ubuntu-phone
>
>
>