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 [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
Top Related