Hybrid Application Development Creating HTML Apps with Qt Web technology Rajesh Lal Senior  Engineer  Maemo Devices, Nokia...
Agenda
Development Choices
Hybrid Overview <ul><ul><li>C++ Development </li></ul></ul><ul><ul><li>Rich set of Widgets </li></ul></ul><ul><ul><li>Acce...
Hybrid Application Hybrid Application
Qt Web Technology <ul><li>Qt Webkit </li></ul><ul><ul><li>HTML 5  </li></ul></ul><ul><ul><li>CSS 3 Animation </li></ul></u...
DEMO: # 1 HTML Application <ul><ul><li>Aptana Studio - Hello World HTML </li></ul></ul><ul><ul><ul><li>HTML,  CSS, and Jav...
DEMO: # 1 HTML Application Hello HTML Demo
Demo # 2: Hybrid Application Accelerometer API Demo
Demo # 2: Hybrid Application Accelerometer API Demo
Demo # 2: Hybrid Application HTML Webmeter
function RotateImageXYZ(x,y,z)  { $('#Img1').animate({ rotate: '+=' + x }, 0); $('#Img2').animate({ rotate: '+=' + y }, 0)...
Demo # 2: Hybrid Application Qt Webmeter
ui->setupUi(this); ui->webView->load(QUrl(&quot;qrc:/html/index.htm&quot;)); Demo # 2: Hybrid Application Qt Webmeter QVar...
What’s Next
Q & A Thank You  [email_address] <ul><li>Discover Maemo  </li></ul><ul><ul><li>Maemo  http://maemo.nokia.com   </li></ul><...
Upcoming SlideShare
Loading in …5
×

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

5,534 views

Published on

Creating HTML applications for Maemo N900 device using Qt Web Technology - Rajesh Lal

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
  • Here is the video

    Hybrid Application Development for Maemo N900 Device using Qt Webkit from rajesh lal on Vimeo.<br /><object type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=9034487&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" width="350" height="288"><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9034487&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1"></param><embed src="http://vimeo.com/moogaloop.swf?clip_id=9034487&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,534
On SlideShare
0
From Embeds
0
Number of Embeds
713
Actions
Shares
0
Downloads
53
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide
  • Add Flow Communication from Qt -&gt; Webview -&gt; HTML page Communication back from HTML page to Qt
  • Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discover Maemo Event Santa Clara CA Dec 2009 @iRajLal

    1. 1. Hybrid Application Development Creating HTML Apps with Qt Web technology Rajesh Lal Senior Engineer Maemo Devices, Nokia Mountain View
    2. 2. Agenda
    3. 3. Development Choices
    4. 4. Hybrid Overview <ul><ul><li>C++ Development </li></ul></ul><ul><ul><li>Rich set of Widgets </li></ul></ul><ul><ul><li>Access Device APIs </li></ul></ul><ul><ul><li>Reusable Libraries </li></ul></ul><ul><ul><li>HTML, CSS, JavaScript </li></ul></ul><ul><ul><li>Rapid Development </li></ul></ul><ul><ul><li>Broader Reach </li></ul></ul><ul><ul><li>JavaScript Libraries </li></ul></ul>+ <ul><ul><li>Rich + Reach </li></ul></ul><ul><ul><li>Powerful + Rapid </li></ul></ul><ul><ul><li>Device API + Web </li></ul></ul><ul><ul><li>Reusable libraries </li></ul></ul>= Hybrid HTML Qt
    5. 5. Hybrid Application Hybrid Application
    6. 6. Qt Web Technology <ul><li>Qt Webkit </li></ul><ul><ul><li>HTML 5 </li></ul></ul><ul><ul><li>CSS 3 Animation </li></ul></ul><ul><ul><li>JavaScript libraries like JQuery </li></ul></ul><ul><ul><li>AJAX </li></ul></ul><ul><li>Webview widget </li></ul><ul><ul><li>Embeddable browser object </li></ul></ul><ul><ul><li>Map with an HTML page </li></ul></ul><ul><ul><li>Allows communication between Qt and HTML </li></ul></ul><ul><ul><li>Allow access to Native data </li></ul></ul><ul><li>DOM Manipulation </li></ul>
    7. 7. DEMO: # 1 HTML Application <ul><ul><li>Aptana Studio - Hello World HTML </li></ul></ul><ul><ul><ul><li>HTML, CSS, and JavaScript </li></ul></ul></ul><ul><ul><li>2. Qt Creator - Container </li></ul></ul><ul><ul><ul><li>Qt libraries 4.5.3 </li></ul></ul></ul><ul><ul><ul><li>GUI app with webview widget </li></ul></ul></ul><ul><ul><li>3. Debian packaging to deploy </li></ul></ul>Hello HTML World in Qt in 3 Steps
    8. 8. DEMO: # 1 HTML Application Hello HTML Demo
    9. 9. Demo # 2: Hybrid Application Accelerometer API Demo
    10. 10. Demo # 2: Hybrid Application Accelerometer API Demo
    11. 11. Demo # 2: Hybrid Application HTML Webmeter
    12. 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. 13. Demo # 2: Hybrid Application Qt Webmeter
    14. 14. ui->setupUi(this); ui->webView->load(QUrl(&quot;qrc:/html/index.htm&quot;)); Demo # 2: Hybrid Application Qt Webmeter QVariant flag = ui->webView->page()->mainFrame()->evaluateJavaScript (“DeviceOrientation(&quot; + x + &quot;, &quot; + y + &quot;, &quot; + z + &quot;)&quot;)
    15. 15. What’s Next
    16. 16. Q & A Thank You [email_address] <ul><li>Discover Maemo </li></ul><ul><ul><li>Maemo http://maemo.nokia.com </li></ul></ul><ul><ul><li>Qt SDK http://qt.nokia.com/downloads </li></ul></ul><ul><ul><li>Debian Packaging http://wiki.maemo.org/Packaging_a_Qt_application </li></ul></ul><ul><ul><li>Aptana Studio http://www.aptana.org/ </li></ul></ul><ul><ul><li>Maemo FAQs http://wiki.maemo.org/Frequently_asked_questions </li></ul></ul><ul><ul><li>QML http://labs.trolltech.com/blogs/author/qtdeclarative </li></ul></ul>

    ×