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><...
Nächste SlideShare
Wird geladen in …5
×

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

5.720 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • 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>
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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>

×