What is the Step by Step Guide to have Qt (QML) properly setted in Ubuntu 12.04 to start developping with QML?

Question

Before I start, here is my setup: Ubuntu 12.04.1 Default install of Qtcreator from Software Center.

For the rest, I' m doing all the thing from qtcreator

I wanted to try some examples from QT Assistant : Home > QtWebKit QML Module ;

the code is as simple as follow :

import QtWebKit 1.0

 WebView {
     url: "http://www.nokia.com"
     preferredWidth: 490
     preferredHeight: 400
     scale: 0.5
     smooth: false
 }

and the error I'm getting is the one below

Qml debugging is enabled. Only use this in a safe environment!
file:///home/cyrildz/Public/Programming/UbuntuQml/UbuntuQml.qml:1:1: module "QtWebKit" is not installed 
     import QtWebKit 1.0 
     ^

I got this error from qtcreator and this prevent me from running the example.

To set Qt5 on my desktop , I took the description from http://developer.ubuntu.com/get-started/gomobile/

that is :

sudo add-apt-repository ppa:canonical-qt5-edgers/qt5-beta1 && sudo apt-get update && sudo apt-get install qt5-meta-full && echo 'export PATH=/opt/qt5/bin:$PATH' >> ~/.bashrc

and then :

sudo add-apt-repository ppa:ubuntu-sdk-team/ppa && sudo apt-get update && sudo apt-get install qt-components-ubuntu qt-components-ubuntu-demos qt-components-ubuntu-examples qt-components-ubuntu-doc notepad-qml

For more info, I looked on the folder : /usr/lib/qt4/imports and i don't see anything relevant for the module QtWebkit1.0. Could someone please help with this issue ?

Solution

You need to make sure that you are naming QtWebKit by the right version

import QtQuick 1.0 
import QtWebKit 1.0 

That is great for Qt-Quick 1.0 But there have been some changes in version numbers in QtWebKit

import QtQuick 2.0 
import QtWebKit 3.0

You also need to make sure that you are using the correct import path with QtCreator

example if you are using qt5 BETA 1 form the canoinical qt edgers ppa(ppa:canonical-qt5-edgers/qt5-beta1) then under

/opt/qt5/imports/ 

has some imports in it. and is the default area for running qmlscene

But if you are using say Qt5 stable from there site ( http://qt-project.org/downloads ) then all imports should be under

/opt/qt5/5.0.0/gcc/qml

or you could place them under

/opt/qt5/5.0.0/gcc/imports

But then you need to set the path that qmlsceen is using like

 -I /opt/qt5/5.0.0/gcc/imports

you can also do this from Qt creator

Or from the command line

/opt/qt5/5.0.0/gcc/bin/qmlscene -I /opt/qt5/5.0.0/gcc/imports MyQmlfile.qml

I wrote more about this at this wiki

https://wiki.ubuntu.com/Qml-Phone-Alternitive

example of qtwebkit

import QtQuick 2.0
import QtWebKit 3.0

Rectangle{
    id: rootangel
    color:"black"
    width: 1280  //parent.width
    height: 720 //parent.height
//anchors.fill: parent

WebView {
    url: "http://www.hulu.com"
    width: rootangel.width
    height: rootangel.height
    scale: 1
    smooth: false
}
}

Comments

[David Planella]

Where exactly are you getting this error? What exact steps are you following to get this error? Does this error stop you from running the app with qmlscene?

[user3454005]

sash_ ,taking the word from Alan Pope : plus.google.com/u/0/109365858706205035322/posts/DeYvTd2evMx , the ppa is there to support the LTS, so I don't have to be on Quantal to have it working

[sash_]

Ah, ok. That is nice. I didn't know that. So I tried your tutorial in qtcreator and tried to start it with qmlscene. It told me to open it with qmlviewer. So I did that. See here: paste.ubuntu.com/1541542 Hope, that helps Edit: I mispasted some code and created the wrong file. I have the same problem here. I am a little dumb today ;-)

[sash_]

Ok, I looked around a little and found lists.webkit.org/pipermail/webkit-qt/2012-June/002864.html It seems like the documentation in qt4 assistant is very old and won't work with qt5. The example in this E-Mail works for me with qmlscene.

[user68186]

sash_ welcome to Ask Ubuntu. Please edit your answer to make it self standing and put the essential material there in addition to the comments. @cyrildz, similarly edit your question and include new information there. This helps other people who may be having similar problems later.