Upcoming QtCreator support for Qml (or: what is Bauhaus?)

Published Wednesday January 27th, 2010
58 Comments on Upcoming QtCreator support for Qml (or: what is Bauhaus?)
Posted in Kinetic, Qt Quick, QtCreator

Declarative UI is one of the big things on the Qt Roadmap for Qt 4.7 and 4.6.x. I already enjoyed working with the Qml language and the developers behind it for quite some time – and believe me, this one will fundamentally change the way slick Qt UIs are designed and look like! If you have not checked it out yet, do so … although it is not yet part of the Qt package, it is very mature, and just fun to experiment with 🙂

Anyhow, a technology like this of course does not come out of the blue, neither do the tools to support it – I think the first discussions about a Visual Editor for a language yet-to-be-invented on the basis of the QGraphicsView framework started in summer 2008! In early 2009 I first heard about the name “Qml”, and was soon the lead of a development project, with right now 5 people working full time in this project. One of the most important decisions we had to make early on was for a cool project name – we eventually settled for “Bauhaus”, as a reminiscence to the famous German school for design.

Back to the facts: What I want to share with you today are our plans for supporting Declarative UI / Qml in QtCreator. This is an important one, because with Declarative UI we target not only the traditional Qt/C++ developers, but also more design centric people – the goal is to let both share the same language, from early prototyping until the final product. We can only achieve this with good tools in place.

Here are the things we are currently working on for the next major version of QtCreator:

Qml Text Editor – We already have some basic syntax highlighting / formatting support in QtCreator 1.3, but in the QtCreator master branch we are right now working on really mature Qml/JavaScript support. This will include all the goodies you kind of expect these days: Code completion, context sensitive help, …

Visual Qml Editor – After all, we are talking about graphical user interfaces, and you will not make UI designers happy just with a text editor 😉 . Here we decided for a fresh start and developed the components for the Visual Editor from the ground up. Interestingly, we are using Qml heavily ourselves here – e.g. in the Property Editor and States View.

Seamless Integration – It is no either text, or visual editing: You want to use both, and quickly switch between both. This is why we deeply integrate the Visual Editor into QtCreator, share the same Undo/Redo history and are also preserving the Qml file formatting as much as possible when doing file changes.

Debugging – We integrate the Qml debugger, which allows you to inspect the qml item tree and its properties at runtime, to check framerates, to evaluate JavaScript expressions and so on inside QtCreator.

Enough said – Nigel recorded a nice video showing you how the support currently looks like:

If you want to try it out yourself, we also packaged a technical preview of creator, qmlviewer/qmldebugger and the declarative examples & demos in one installer:

qt-creator-win-opensource-1.3.80-qml-tp1.exe (Windows 32 bit)
qt-creator-linux-x86-opensource-1.3.80-qml–tp1.bin (Linux 32 bit)
qt-creator-mac-opensource-1.3.80-qml-tp1.dmg (Mac OS X)

Disclaimer: The binaries are unsupported, and are only meant for early testing. In fact they are based on an untested snapshot of Qt, and an (almost) untested version of QtCreator! If you want to use qml for production work, stay with QtCreator 1.3.1.

Of course we are interested in all kind of feedback, preferably via the bug tracker or on the qt-creator mailing list.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Kinetic, Qt Quick, QtCreator

58 comments

Kaitsu says:

Yes, QML is revolutionary and I like where we are going here… =)

Jeff says:

so QML is like JavaFx. Very cool!

panzi says:

This all looks VERY promising! 🙂

Tim says:

Looks awesome. Google would disaprove, but I wonder how hard it would be to get this running on Android…

ruysch says:

Might be nice; but come on when do you guys start solving some of there more fundamental issues with Qt Creator?

Even good old Visual Studio 2005 is a good mile a head of you – and with the Free Visual Studio Express version I think a more professional effort is required.

TheBootroo says:

Hey !

The QML designer looks better than UI one, and this is BAD : you must give the same interface to UI designer that i use every day !!!!

PLEASE !!

And insted of integrating QML (that i don’t use), please integrate Linguist to allow simple internationalization !

Very usefull idea IMHO, no ?

but however, great job , doing that, you’re showing Qt superiority over other frameworks ….

Daniel Molkentin says:

@TheBootroo I doubt integrating Linguist is that useful, let alone important. It’s rare that developer and translator are the same person, and creator already gives a form preview wherever possible. What immediate value would you have by forcing it into the Creator umbrella?

TheBootroo says:

@Daniel Molkentin : i’m designer, developper and translator (i make my programs in French and English) and i really want to have :

– seamless integration of Linguist in QtCreator to not have to install Qt linguist linux package, which install a bunch of thing i don’t need (as QtDesigner, QtAssistant : they’re already in QtCreator)
– have a why in QtCreator to generate files needed by Linguist instead of having to type terminal commands. …
– have all my tool integrated in one really useful and powerfull tool
– and i think that if linguist would be integrated in qtcreator, it will receive many improvations quickly, as direct preview in designer, HTML text edition with a rich control as in designer …

zchydem says:

Looks great! This is exactly the direction where declarative UI should go. Good work Trolls:)

Henrik Hartz says:

@ruysch can you be more specific? Such critique warrants a bit more detail on your part 😉

Adam says:

Love the dog food on Visual Qml Editor. That was one thing that always bothered me with MS, they pushed .NET and then WPF while they still used MFC! Does this mean the old widget based interface editor is not going to get any love? I still miss things like too bars and status bars not being editable.

Jukka says:

Would be so awesome if you guys could also release 64bit version for Linux.
Git & compiling from sources is a bit painful operation to do when we’re talking about builds like these (sneak peeks to upcoming versions).

kkoehne says:

@Jukka: I’ve been looking into getting a Linux-64 bit installer last night, without luck. I’ll further investigate, but don’t hold your breath. We are (mis-)using our internal test farm for generating the installers, so it might be just too much hassle.

To cheer you up: You will get already some improvements compared to binary version if you clone from creator/master today 🙂

Zuck says:

Great job! Anyway, I’m waiting for better “find & replace” options (like “case-sensitive flag” and “find in selection”)… 😛

Dom says:

Great! I can’t wait to start using it.
By the way, will there be any QML support in for the mouse wheel soon?

boulabiar says:

Nice job.
Spending such efforts on QML allow Qt to compete with Microsoft WPF.

What really lacks is a real movie item support in QMovieItem for QGraphicsView.
Using gif images is from the past.
Adding movie support in Qt with accelerated manipulation, then building some abstraction wrapper to physics libs will place it on top of all available frameworks even commercial ones.

Thats only what lacks in Qt. We have multitouch and gesture detection modules, so movies items are needed to be used in Surface Computing.

Hunger says:

@Zuck: Qt Creator does do “Find/Replace” (OK, search != find, but I am sure you did not mean that:-) as well as “find in selection”. Case sensitivity etc. does of course work, too.

So what exactly do you want to see improved?

Zuck says:

@Hunger: Hmmm…You’re right on case sensitivity (Wow, I’ve found it only now :D), thanks! But where is the “find in selection” option?

Anyway, for QML support: I’ve noticed the editor registers (for Undo/Redo) every single rotation step during rotations of a QML item even if I don’t release the mouse…Is it necessary?

ZekeComa says:

Now just got to wait for the QML 4.6.1 sources :(. Is there a way to post the documentation of Qml to view it with the browser like you can of http://doc.qt.nokia.com/4.6 ?

Bruno says:

I gave QML a try and I think it is useless in the current state.

It is good at animating simple components like rectangles and images. But this is the only thing QML does right. There is not a single useful component, no widgets (not even QPushButton!). The language is quite complicated.

The demos and examples of QML also shows the problem: none of them are doing anything useful. Doing animations is not doing software, it is just a little eye-candy on top.

Disappointed says:

@Bruno:I could not agree more, eye-candy seems to be what it’s all about these days, even “behind the scenes” for tools for developers, that should focus on productivity.

@TheBootroo: QML designer *looks* better than Qt Designer? Oh my bad … since when do developers choose their tools by which has the most colorful icons and most gradients in the UI?

kkoehne says:

@Bruno: Well, eye-candy is what Qml is all about! If you don’t need this, it’s probably not very interesting for you, agreed. Maybe the examples & demos misguided you a bit: You can do quite a lot in pure qml (e.g. writing complete games!), but you can also have your “backend” in C++, and in fact Qml makes this really easy.

About the missing “PushButton”: The ‘philosophy’ behind this is that instead of us creating the ueber-button that fits all purposes (QPushButton has right now 73 properties!), Qml let you specify exactly the button with style & behavior you need in just a few lines of code. + You can reuse it wherever you like it.

Das says:

Can we expect a Javascript library that loads qml files and creates the corresponding UI without the need for any plug-in (other than the javascript lib)?

albert says:

@kkoehne: And how does one get style consistency with the system you are being deployed on? Or you just decided that looking native in all the platform Qt supports is no longer a worthwhile thing?

Henrik Hartz says:

@Bruno, @albert; QML is about creating fluid and animated UIs that are visually differentiated. Think of full-screen Apps or Applets (e.g. Dashboard Widgets on Mac OS X). For instance, you typically create your own button by combining a border image, text label and mouse region. We will look into integrating with standard components, but on the other hand it’s very easy to expose QGraphicsObject components to QML. Maybe it’s helpful to check out the videos posted under QtDeclarative to see the capabilities of QML:

http://labs.trolltech.com/blogs/author/QtDeclarative/

kkoehne says:

@Zuck: Thanks a lot for the bug report about the rotation / undo history! By coincidence we already ‘fixed’ this issue in master by removing the dial 😉

Dom says:

I think QML is more than just eye candy.
First, it allows people that do not know C++ to specify more than just the placement of graphical user interface items, but also its behavior. With “.ui”, non-c++ people were more limited. Second, and more importantly, the “property binding” feature of QML is more powerful than we can think if we just overlook it. Note that “Property binding” does NOT mean “having QML names for C++ properties”, it means “expressing a property value in terms of other properties, with any JavaScript expression, and having it **generating a dynamic link automatically updating the values when needed**. Experimenting a lot with that since a few weeks has made me think it makes almost any event handler useless!

Thanks to property binding and above all to the way QML allows it to be done, i.e. with simple JavaScript expressions; instead of having to state that on some event, properties X and Y must be updated, we can omit that code and just directly express the property values in terms of others. One could think it is just syntactic sugar, but in the experiments I have made up to now, this happened to make the QML code very, very much more clear and concise than any traditional way of doing so I know of.

As far as I know, other languages allowing property bindings I know of oblige us to be very explicit about those links between properties, and that makes the code too big for nothing.

boulabiar says:

I affirm what Dom said.
The beauty of Qt is that it keeps the mail C++ code clean.
Adding features is like using or “wearing” aspects for components.
And then let robots generate code for you if you select an option.

Each aspect can be tested alone, and adding other feature will be easier for the library developers in the future.
Does Qt developers have any whitepapers or global design recommandations guiding them to such way of coding ?
I am curious to know the in behinds of the global design, and how do you take decisions.

Hunger says:

@Zuck: Just select some text and press CTRL-F.

Zuck says:

@Hunger: thanks a lot! 🙂

@kkoehne: Great!

ZekeComa says:

I ran that Qml isn’t suggested really to blend a lot in to a C++ app or Python, etc. But will this likely change in the near future hopefully and Qml become as versatile as WPF is in C#?

I don’t think Qml is just for Eye Candy. In my opinion it would make it much easier to achieve effects and more extensive widgets in applications just like you would see in WPF. Though Qml is very much still beginning just like QtCreator is. In the near feature we should see it become a lot better than what it is as a preview right now.

@ZekeComa: A snapshot of the QML documentation is available at http://doc.qt.nokia.com/qml-snapshot/ (updated daily)

Danny77uk says:

Nice but I can’t understand why you guys spend so much time introducing features like this to Creator that no-one is likely to use in real production code while at the same time claiming that basic features like the ability to rename files or organize projects properly are not important.

Please make Qt Creator relevant to real developers before pushing stuff like this.

njeisecke says:

@Danny77uk. I’m a real developer and Qt Creator is relevant to me even in its current state. This is the first IDE that made me convert from the good old vim/emacs/shell. I don’t want IDEs to mess around too much with my project management. git cl and some cmake magic is fine for me. With code navigation as good as it is in Qt creator I hardly ever need the project window at all.

And btw “stuff like this” is actually the future for Nokia, so I guess it is of some importance for them.

Romk says:

I’ve tested Qt Creator on Windows 7 64-bit (6 Gb memory) and noticed that Qt Declarative UI Viewer works very very slowly and it looks like that it hangs but not really (after 20-30 sec it loads stuff). At least it happens with Flickr demo. On WinXP this demo works fine.

ZekeComa says:

@Michael Brasser Thank you. Just waiting for release now 🙂

rikrd says:

This is really great. I have been trying it out for a bit, and it is really quick to create really nice interfaces.
I have a few questions:
– Is there a way to add Path elements that get drawn in the scene? At least simple lines or beziers? I saw there is the Path, PathCubic, PathLine and PathQuad elements but they don’t get drawn, they are only useful to set the path of a PathView. I’m making a small app that draws connections between two ListView elements (by using drag and drop) and I therefore need paths that get drawn from one to the other.

– Will it be posible to have properties of type Item? For example having a custom component Edge that will have two properties (oneEnd and otherEnd) of type Item. I would be using this in my previous example.

– Last, where is the best place to give feedback on QML now that it is still evolving?

Thanks, and thanks again for this it is really fantastic and I’m enjoying a lot working with it.
rikrd

Mathias says:

If I now could figure out how to use QtCreator on a 1280×800 notebook screen. Even the screencast demonstrates how QtCreator is barly useable for anything but showcase applications with such a screen.

Hunger says:

@Mathias: I am using Qt Creator on a 1024x600pixel netbook screen. That does work fine for general programing. Of course when developing a UI (with QML or Designer) such a small screen is no fun:-)

Palmik says:

Hi,
I read the comments in this discussion and a lot of people mentioned that you can use QML as frontend fro your C++ backend. Well, I also read the ‘Same game’ tutorial which made me think – is it really possible? If so, please, let me know how, because I’m clueless in this case.
How would you hook (looking at the second page of the tutorial http://qt.nokia.com/doc/qml-snapshot/advtutorial2.html) C++ version of the initBoard() function (in JavaScript there) to the QML?
Or how would you hook (looking at the third page of the turorial http://qt.nokia.com/doc/qml-snapshot/advtutorial3.html) C++ version of the handleClick(int, int) function to the QML?

Because I really do not know how to connect QML and C++. It would be really wonderful to be able to code the looks & animations in QML and JavaScript and then use them in QGraphicsView framework. (You would write the look n’ feel in QML + JS then somehow hook it to your QGraphicsItem subclass and then easily just add the instance of your subclassed item to the scene).

Thomas says:

@Palmik:

If you expose any C++ object to the Qml Context by setting it as a context property (QmlContext::setContextProperty()) you can access all properties, connect signals/slots and directly invoke slots() from the C++ Object.

Palmik says:

@Thomas:
Thanks – that is great then, I will look into it and definitely try it 🙂

anton says:

Nice idea,

but personally I would prefer to be able to script
in *python* instead of javascript.

I use javascript, but I prefer python since its:
– more elegant
– more powerful
– even easier to understand

faldzip says:

Is it possible to compile qt-creator master from git now? If yes, then how? (“qml.h” is missing and I can’t find it in qt master also).

kkoehne says:

@rikrd: The qt4-preview-feedback mailing list is the best place to give feedback/ask questions about qml: http://lists.trolltech.com/qt4-preview-feedback/ .

kkoehne says:

faldzip: You have to compile against kinetic-declarativeui branch in the kinetic repo: http://qt.gitorious.org/+qt-kinetic-developers/qt/kinetic/commits/kinetic-declarativeui . Also, the QmlDesigner right now depends on some private headers from QtDeclarative, which are not installed by default on Linux: You have to run e.g. “QTDIR=$PWD ./bin/syncqt -outdir /usr/local/Trolltech/Qt-4.6.2”, or compile Qt with “-developer-build”.

kkoehne says:

@anton: Programming Languages are everyones bikeshed. Anyhow, aside from personal taste there are good reasons why Qml is based on JavaScript: JavaScript is already part of Qt, and within Webkit we have a powerful and highly optimized engine for it. Furthermore, a lot of web-developers and designers know JavaScript somewhat.

antx says:

Thanks for this great release, already tested on win32 (because I am unable to set it up in Linux x86_64, and that’s what this post is about).

I went to http://qt.gitorious.org/qt-creator/qt-creator/commits/master (master branch of qt-creator), cloned and compiled it because I thought I would get exactly an equivalent build for my Linux x86_64 with all this awesome visual QML/Qt Kinetic editor, instead I’ve got an stable qt-creator without this stuff.

I do not want to install Qt4-32bit libraries, I want it for native 64bit Linux, as Linux was the first to support x86_64 architecture I think many folks here will agree that a 64 bit build is now an standard for Linux developers.

I am using Qt 4.6.2, but I cannot find qmlviewer in PATH (got this from openSUSE KDE4 factory Qt 4.6 repo), so maybe I should build Qt 4.6.2 with some compile switch to enable Kinetic/QML, et.al.

It would be great if you point me to a gitorious/trolltech/nokia url where I can grab the source of this branch of QtCreator, and/or something I might be missing.

Thanks in advance!!!

LonghornGT says:

OMG, it’s look like.. Copy of Expression Blend! Awesome!

Max L. says:

Most of the time i develope for embedded systems (round about ARM 9 with 300 Mhz). First to the positiv experience i made in QML. It’s a really nice why to seperate “viewing code” and “working code”. Like using a template engine in php for example. (I made a lot of websuff in earlier times)
The programm code is more clean and readable. One of my major problemes is to use more the one QML file. Qt Creator 1.3 doesn’t finde the other needed files. But this is another story.

Back to embedded systems. My experience is that QML is a slower if then i write the same in C++ with Animationen Framework etc. Could that be? I thinik i could, because isn’t QML interpretated during runtime?! So i load the file and interpretate it. But what i have to say is, that i use the QMLVIEW class to make me the life easier.

So my question is. Is QML not made for “slow” (300 MHz for embedded is not damn slow) embedded systems. And how can i effiecent connect QML and C++? Always about Qmlcomponents?!

Best regards and good job!
Max

vseryakov says:

How about exposing QtScriptEngine in QmlEngine or QmlContext so Js objects can be returned and more control how javascript is used inside Qml? Current way works but it requies to trck all object pointers in C++.

Or this is the wrong place for suggestions?

kkoehne says:

@antx: QtDeclarative isn’t in the 4.6 sources You need an up to date master from http://qt.gitorious.org/qt .

@Max L: In contrast, we are striving for the embedded area! Though there will be always ways to make things “faster” in pure C++, but then again assembler might be even faster … 🙂 Anyway, if you are hitting specific problems we would love to hear about them.

@ALL: Please use the qt4-preview-feedback mailing list if you have further ideas/questions about QtDeclarative. Otherwise you risk not getting an answer (or an answer after weeks 😉

@Mathias: I’ve been using Creator as a debugger under Qt/E, and until recently the screen size was fixed at 1024×768. It’s not great – but it’s certainly usable. I’ve not been doing serious development in that environment, but I’d hazard that if you’re running in that limited a screen size, you’re going to be hurting with anything that has a more complicated screen layout than vim or emacs (or a GUI tool running in an emulation mode thereof; CodeWright was perfectly usable as such, if you’re into that kind of thing).

(For the record… I’m running Creator in Qt/E, not just the target app!)

Also as a sidenote… I have Declarative pulled from the Qt git master building under Qt as pulled from the 4.6.2 tag. It was actually really easy to get it to go (I think I’ve remembered everything):

* git clone git://gitorious.org/qt/qt.git
* git checkout v4.6.2
* for f in demos/declarative examples/declarative src/declarative src/gui/text/qzip* tests/auto/declarative tools/qmlviewer tools/qmldebugger; do git checkout master $f; done
* sed -i -r -e ‘s@Q(Double|RegExp)Validator(QObject * parent);@Q1Validator(QObject * parent = 0);@’ src/gui/widgets/qvalidator.h
* If you want, make the modifications to the .pro files in demos, examples, and tests/auto to add in the new “declarative” subdirectory. See tools/tools.pro for an example.
* configure … -declarative … && make

Presto!

Kai Volde says:

Hi,
great work – I really like it.

I tested the Creator preview: qt-creator-win-opensource-1.3.80-qml-tp1.exe (Windows 32 bit)
Unfortunatelly my virus-scanner (avira antivir) detects a virus in the file fxplugin.dll!
It is a TR/Crypt.ZPACK.Gen.

Maybe you can provide a version without a virus?

ionutz says:

Hi,

QtCreator is cool, but where is the class browser?

Cheers,

Ionutz

Kai: “Crypt.ZPACK” means “it’s compressed or looks like it might perhaps be encrypted, and it’s not an MSI/InstallShield/whatever”. Avira is generally great – I use it myself – but it is… shall we say, overanxious to label things as viruses that really aren’t.

Mario says:

This will able customizable UI right?
Im interested in “customizable” GUI for embedded systems running Linux.

If I understand it right, Im just excited to see more from this!

Commenting closed.

Get started today with Qt Download now