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.654 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
1 Kommentar
6 Gefällt mir
Statistik
Notizen
  • 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
Keine Downloads
Aufrufe
Aufrufe insgesamt
5.654
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
712
Aktionen
Geteilt
0
Downloads
54
Kommentare
1
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • 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>

    ×