Qt WebKit – How to Get HTML Content in QML

application-developmentqmlubuntu-sdk

My application is built with QML (Ubuntu SDK), and I need to get the HTML content from a page loaded with a Qt WebView after the page is loaded. Based on some initial research, it would appear that this used to be directly supported, but not anymore. I'm using Qt 5/QtWebKit 3. How can I get the source from the page with JavaScript?

Edit: I found out about the experimental object, but I've still not found what I need. More here: http://rschroll.github.io/beru/2013/08/21/qtwebview.experimental.html

Edit: just a broader perspective on what I'm trying to do. My application attaches to a user's Freshbooks account through OAuth. After they've entered their credentials, I need to be able to access the OAuth verifier code from the content of the page. Via the OAuth protocol, I don't know of any other way to get this code. I can't even have the user copy-paste it over, because you can't select text in the WebView 🙁

Best Answer

For your first question, you should be able to do this by running some Javascript inside the WebView with WebView.experimental.evaluateJavaScript(). This Javascript could get the page source (or better yet, just the content you want, since it'll be better at parsing HTML than the Javascript-in-QML) and report it back via the document title. For example,

webview.experimental.evaluateJavaScript(
    "document.title = document.getElementById('id').innerHTML")

I'll admit that I don't know much about OAuth, but I can't help but feel you're doing something wrong if you need to do this. Have you checked out Online Accounts or this OAuth plugin?

Related Solutions

Ubuntu App Developer Website Not Showing Desktop Development Content

As part of the process of making Ubuntu a truly convergent platform, where the apps that you develop can run on any device or form factor, we've started the process of focusing the content on the App developer site to be about the Ubuntu SDK.

While Quickly will still be available and open to community participation and maintenance, the recommended way to develop apps for Ubuntu is the Ubuntu SDK.

This has been discussed at the last two virtual UDSs and you can track the progress and provide feedback on this blueprint

Ubuntu – Ubuntu SDK: Having difficulty getting images to work in ‘QML only app’ when deploying to armhf device

This is what I did to embed an image in the "binary":

I'm using a qmake project with the default folder structure in Ubuntu SDK. I made a directory to store my images: project_name/backend/your_click/images. With the backend folder I created a new resource file resource_file.qrc that contains the following:

<!DOCTYPE RCC><RCC version="1.0">
<qresource>
    <file>images/bigredbutton.png</file>
</qresource>
</RCC>

To create the qrc file I think you can right-click, Add New ..., Qt, Qt Resource File and manually edit the file, or manually create it from scratch. I don't remember which one worked for me, try them out and let me know, I will edit the answer for others that may run into the same problem in the future.

In my Main.qml file I use the image like this:

Image {
    id: btn
    width: 250; height: 250
    fillMode: Image.PreserveAspectFit
    source: "qrc:images/bigredbutton.png"
    MouseArea {
    ...
    }

Here's a screenshot of my project structure, it might help.

Best Answer

Related Solutions

Ubuntu App Developer Website Not Showing Desktop Development Content

Ubuntu – Ubuntu SDK: Having difficulty getting images to work in ‘QML only app’ when deploying to armhf device

Related Question