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óxima SlideShare
Cargando en…5
×

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

5.629 visualizaciones

Publicado el

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

Publicado en: Tecnología
1 comentario
6 recomendaciones
Estadísticas
Notas
  • 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 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
Sin descargas
Visualizaciones
Visualizaciones totales
5.629
En SlideShare
0
De insertados
0
Número de insertados
712
Acciones
Compartido
0
Descargas
54
Comentarios
1
Recomendaciones
6
Insertados 0
No insertados

No hay notas en la diapositiva.
  • 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>

    ×