hybrid application development for maemo n900 device using qt webkit - discover maemo event santa...
DESCRIPTION
Creating HTML applications for Maemo N900 device using Qt Web Technology - Rajesh LalTRANSCRIPT
![Page 1: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/1.jpg)
Discover MaemoSanta Clara, CA Dec 09
Hybrid Application DevelopmentCreating HTML Apps with Qt Web technology
Rajesh LalSenior Engineer
Maemo Devices, Nokia Mountain View
![Page 2: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/2.jpg)
Discover MaemoSanta Clara, CA Dec 09
Agenda
![Page 3: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/3.jpg)
Discover MaemoSanta Clara, CA Dec 09
Development Choices
![Page 4: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/4.jpg)
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
![Page 5: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/5.jpg)
Discover MaemoSanta Clara, CA Dec 09
Hybrid Application
Hybrid Application
![Page 6: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/6.jpg)
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
![Page 7: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/7.jpg)
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
![Page 8: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/8.jpg)
Discover MaemoSanta Clara, CA Dec 09
DEMO: # 1 HTML Application
Hello HTML Demo
![Page 9: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/9.jpg)
Discover MaemoSanta Clara, CA Dec 09
Demo # 2: Hybrid Application
Accelerometer API Demo
![Page 10: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/10.jpg)
Discover MaemoSanta Clara, CA Dec 09
Demo # 2: Hybrid Application
Accelerometer API Demo
![Page 11: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/11.jpg)
Discover MaemoSanta Clara, CA Dec 09
Demo # 2: Hybrid Application
HTML Webmeter
![Page 12: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/12.jpg)
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
![Page 13: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/13.jpg)
Discover MaemoSanta Clara, CA Dec 09
Demo # 2: Hybrid Application
Qt Webmeter
![Page 14: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/14.jpg)
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 + ")")
![Page 15: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/15.jpg)
Discover MaemoSanta Clara, CA Dec 09
What’s Next
![Page 16: Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal](https://reader035.vdocument.in/reader035/viewer/2022062703/5551d88bb4c90501638b45d4/html5/thumbnails/16.jpg)
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