New QML editor features

Published Tuesday November 30th, 2010
6 Comments on New QML editor features
Posted in QtCreator | Tags: , , , ,

During the last weeks the QML and JavaScript editors in Qt Creator have gained several cool new features. Grab one of the recent snapshots of the master branch to give them a try.

JavaScript style checks

The editor now checks for common problems in JavaScript code, like

  • duplicate or conflicting var, function and formal parameter declarations
  • use of vars and functions before their declaration
  • == or != with 0, null, true, false, undefined and ”
  • comma expressions (outside of for statements)
  • expression statements (unless calls, assignments or delete)
  • assignments in a condition (like if (a = b))
  • case blocks in a switch that don’t end with return, break, continue or throw and are not empty
  • nested block statements
  • with statements
  • void expressions

You can find details and explanations of these warnings on the JSLint website.

Would you like to see more checks? Feel free to post your suggestions on http://bugreports.qt.nokia.com.

QML plugins

Working with QML plugins should now be easier. Simply set up the import path (importPaths in .qmlproject or QML_IMPORT_PATH in .pro) and import the plugin in your QML file. Note that the import path should be set to the folder containing your library’s directory chain. So if you want your import to be ‘import com.example.Foo 1.0’, set the import path to the ‘base’ part of base/com/example/Foo/ where Foo contains the qmldir file.

Creator will try to find the library and extract type information from the plugins referenced in the qmldir file. If all goes well, the editor will now recognize the library’s types and offer correct code completion.

A lot of magic is happening in the background, and it’s not entirely unlikely that the process will fail. In that case you’ll get an error marker on the import statement – mouse over it to see what went wrong.

What Creator is doing is

  1. Build ‘qmldump’, a tool to load a QML plugin and dump all the metainfo Creator needs to stdout.
  2. Run qmldump on the plugin.
  3. Parse the output and inject it into the code model.

Unfortunately, there are several points of failure: First off, building qmldump needs Qt’s private headers, so if you’re using an install of Qt that doesn’t have them and doesn’t ship a precompiled qmldump, you’re out of luck. Running qmldump can also fail, for instance if the plugin’s and qmldump’s Qt version don’t match or the plugin fails to load because it expects a specific environment.

To avoid these problems, plugin developers can run qmldump manually and ship the output with their plugin. If there’s a library.xml file next to the qmldir file, Creator will load it instead of running qmldump itself.

The sources of qmldump are located in share/qtcreator/qml/qmldump. Use ‘qmldump import/path Import.uri > library.xml’ to generate a dump.

Little extras

Small and convenient, yet too little to deserve their own heading:

  • There’s now a filter for JS functions and QML code bindings in the Locator. (defaults to ‘m’)
  • Added code completion and validation for file imports and url properties. (think Image { source: “file” })
  • Added code navigation and context help for properties.
Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in QtCreator | Tags: , , , ,

6 comments

Christophe Bismuth says:

Thank you for all this good work.
Is there any kind of “JavaScript Project” support in Qt Creator to provide content assist when used with Ext JS framework for instance?

Chris

nizeguy says:

Think about those who do not use .pro ; Plugin editiing should be acessible from cmakelists.

el2ro says:

Do you still need private headers for Qt to build QML stuff to creator?

ckamm says:

Christophe: While there is no dedicated “JavaScript Project”, you can use the generic project (New Project->Other project->Import existing) to have one that contains only JS files.
nizeguy: It’s not as convenient, but if you set the QML_IMPORT_PATH environment variable before starting Creator and it will look for libraries in these paths.
el2ro: Yes, you still need private headers to compile Creator’s graphical QML designer plugin. It’s not needed for compiling the QML text editor and project support though.

MySchizoBuddy says:

Is QML only for QtQuick, or can i use it for desktop as well.

ckamm says:

Yes, you can use Qt Quick when making applications for the desktop. Check out http://qt.nokia.com/products/qt-quick/ .

Commenting closed.

Get started today with Qt Download now