O slideshow foi denunciado.
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><...
Próximos SlideShares
Carregando em…5
×

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

5.734 visualizações

Publicada em

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

Publicada em: Tecnologia
  • 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>
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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>

×