The document discusses hybrid application development using HTML and Qt web technology. It provides an overview of hybrid applications, which combine web technologies like HTML, CSS, and JavaScript with native device APIs. This allows developing applications with rapid web development while also accessing powerful device features. The document demonstrates a hybrid app that uses the accelerometer API and rotates images based on device orientation values passed from JavaScript to Qt. It shows how to create the HTML, integrate it into a Qt application using a webview widget, and call JavaScript functions to access native APIs.

1. Hybrid Application Development Creating HTML Apps with Qt Web technology Rajesh Lal Senior Engineer Maemo Devices, Nokia Mountain View

2. Agenda

3. Development Choices

4. 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 = Hybrid HTML Qt

5. Hybrid Application Hybrid Application

6. 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

7. DEMO: # 1 HTML Application 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

8. DEMO: # 1 HTML Application Hello HTML Demo

9. Demo # 2: Hybrid Application Accelerometer API Demo

10. Demo # 2: Hybrid Application Accelerometer API Demo

11. Demo # 2: Hybrid Application HTML Webmeter

12. 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

13. Demo # 2: Hybrid Application Qt Webmeter

14. 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 + ")")

15. What’s Next

16. Q & A Thank You [email_address] Discover Maemo Maemo http://maemo.nokia.com Qt SDK http://qt.nokia.com/downloads Debian Packaging http://wiki.maemo.org/Packaging_a_Qt_application Aptana Studio http://www.aptana.org/ Maemo FAQs http://wiki.maemo.org/Frequently_asked_questions QML http://labs.trolltech.com/blogs/author/qtdeclarative