Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa...

Discover MaemoSanta Clara, CA Dec 09

Hybrid Application DevelopmentCreating HTML Apps with Qt Web technology

Rajesh LalSenior Engineer

Maemo Devices, Nokia Mountain View

Discover MaemoSanta Clara, CA Dec 09

Agenda

Discover MaemoSanta Clara, CA Dec 09

Development Choices

Discover MaemoSanta Clara, CA Dec 09

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

Discover MaemoSanta Clara, CA Dec 09

Hybrid Application

Hybrid Application

Discover MaemoSanta Clara, CA Dec 09

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

Discover MaemoSanta Clara, CA Dec 09

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

Discover MaemoSanta Clara, CA Dec 09

DEMO: # 1 HTML Application

Hello HTML Demo

Discover MaemoSanta Clara, CA Dec 09

Demo # 2: Hybrid Application

Accelerometer API Demo

Discover MaemoSanta Clara, CA Dec 09

Demo # 2: Hybrid Application

Accelerometer API Demo

Discover MaemoSanta Clara, CA Dec 09

Demo # 2: Hybrid Application

HTML Webmeter

Discover MaemoSanta Clara, CA Dec 09

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)};

Demo # 2: Hybrid Application

HTML Webmeter

Discover MaemoSanta Clara, CA Dec 09

Demo # 2: Hybrid Application

Qt Webmeter

Discover MaemoSanta Clara, CA Dec 09

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

Demo # 2: Hybrid Application

Qt Webmeter

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

Discover MaemoSanta Clara, CA Dec 09

What’s Next

Discover MaemoSanta Clara, CA Dec 09

Q & A

Thank You rajesh.lal@nokia.com

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