Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal

Discover MaemoSanta Clara, CA Dec 09

Hybrid Application DevelopmentCreating HTML Apps with Qt Web technology

Rajesh LalSenior Engineer

Maemo Devices, Nokia Mountain View


Agenda


Development Choices


Hybrid Overview

• C++ Development• Rich set of Widgets• Access Device APIs• Reusable Libraries

• HTML, CSS, JavaScript• Rapid Development• Broader Reach• JavaScript Libraries

+

• Rich + Reach• Powerful + Rapid• Device API + Web• Reusable libraries

= HybridHTMLQt


Hybrid Application

Hybrid Application


Qt Web Technology

• Qt Webkit• HTML 5 • CSS 3 Animation• JavaScript libraries like JQuery• AJAX

• Webview widget • Embeddable browser object• Map with an HTML page• Allows communication between Qt and HTML• Allow access to Native data

• DOM Manipulation


DEMO: # 1 HTML Application

1. Aptana Studio - Hello World HTML• HTML, CSS, and JavaScript

2. Qt Creator - Container• Qt libraries 4.5.3• GUI app with webview widget

3. Debian packaging to deploy

Hello HTML World in Qt in 3 Steps


DEMO: # 1 HTML Application

Hello HTML Demo


Demo # 2: Hybrid Application

Accelerometer API Demo



Accelerometer API Demo



HTML Webmeter


function RotateImageXYZ(x,y,z) { $('#Img1').animate({ rotate: '+=' + x }, 0); $('#Img2').animate({ rotate: '+=' + y }, 0); $('#Img3').animate({ rotate: '+=' + z }, 0); return true; };

function DeviceOrientation(x, y, z) { return RotateImageXYZ(x,y,z)};


HTML Webmeter



Qt Webmeter


ui->setupUi(this);ui->webView->load(QUrl("qrc:/html/index.htm"));


Qt Webmeter

QVariant flag = ui->webView->page()->mainFrame()->evaluateJavaScript(“DeviceOrientation(" + x + ", " + y + ", " + z + ")")


What’s Next


Q & A

Thank You [email protected]

Discover Maemo Maemo http://maemo.nokia.com Qt SDK http://qt.nokia.com/downloads Debian Packaging http://wiki.maemo.org/Packaging_a_Qt_applicationAptana Studio http://www.aptana.org/ Maemo FAQs http://wiki.maemo.org/Frequently_asked_questions QML http://labs.trolltech.com/blogs/author/qtdeclarative