| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <title>Vídeo Usando KnockoutJS em uma Aplicação HTML5</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > |
| <meta name="description" content="A screencast that introduces the basics of using jQuery and KnockougJS in an HTML5 application in NetBeans IDE"> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| </head> |
| <body> |
| |
| <!-- |
| Copyright (c) 2013, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <h1>Vídeo Usando KnockoutJS em uma Aplicação HTML5</h1> |
| <p>Nesta série de tutoriais em vídeo, verificaremos como criar uma aplicação HTML5 do cliente com jQuery e KnockoutJS. Verificaremos a vinculação de elementos DOM em um modelo de dados, definição de handlers de evento e extração de dados dos serviços JSON e REST.</p> |
| <p>Autor: John Jullion-Ceccarelli</p> |
| <table> |
| <tr> |
| <td class="valign-top"> |
| |
| |
| |
| |
| |
| |
| <h3>Download/Veja em tamanho completo:</h3> |
| <ul> |
| <li><a href="http://bits.netbeans.org/media/knockout1-basic-bindings.mp4">Knockout Parte 1 - Vinculações Básicas</a> (15 MB)</li> |
| <li><a href="http://bits.netbeans.org/media/knockout2-json.mp4">Knockout Parte 2 - JSON</a> (12 MB)</li> |
| <li><a href="http://bits.netbeans.org/media/knockout3-click-handler.mp4">Knockout Parte 3 - Handler de Clique </a> (19 MB)</li> |
| </ul> |
| |
| |
| |
| </td> |
| |
| <td width="486" class="valign-top align-center"> |
| <h2>Knockout Parte 1 - Vinculações Básicas</h2> |
| <script src="/images_www/js/mediaplayer-5.9/jwplayer.js" type="text/javascript"></script> |
| <div id="player1" > |
| <center> |
| <div id="flashContent1"></div> |
| </center> |
| </div> |
| <script type="text/javascript"> |
| $(function(){ |
| var targetFile='http://bits.netbeans.org/media/knockout1-basic-bindings.mp4'; |
| jwplayer('flashContent1').setup({ |
| 'id': 'flashContentId', |
| 'width': '530', |
| 'height': '340', |
| 'autostart': 'true', |
| 'file': targetFile, |
| 'controlbar':{position:'bottom'}, |
| 'modes': [ |
| {type: 'html5'}, |
| {type: 'flash', src: '/images_www/js/mediaplayer-5.9/player.swf'}, |
| {type: 'download'} |
| ] |
| }); |
| }); |
| </script> |
| |
| <h2>Knockout Parte 2 - JSON</h2> |
| <script src="/images_www/js/mediaplayer-5.9/jwplayer.js" type="text/javascript"></script> |
| <div id="player2" > |
| <center> |
| <div id="flashContent2"></div> |
| </center> |
| </div> |
| <script type="text/javascript"> |
| $(function(){ |
| var targetFile='http://bits.netbeans.org/media/knockout2-json.mp4'; |
| jwplayer('flashContent2').setup({ |
| 'id': 'flashContentId', |
| 'width': '530', |
| 'height': '340', |
| 'autostart': 'false', |
| 'file': targetFile, |
| 'controlbar':{position:'bottom'}, |
| 'modes': [ |
| {type: 'html5'}, |
| {type: 'flash', src: '/images_www/js/mediaplayer-5.9/player.swf'}, |
| {type: 'download'} |
| ] |
| }); |
| }); |
| </script> |
| <h2>Knockout Parte 3 - Handler de Clique</h2> |
| <script src="/images_www/js/mediaplayer-5.9/jwplayer.js" type="text/javascript"></script> |
| <div id="player3" > |
| <center> |
| <div id="flashContent3"></div> |
| </center> |
| </div> |
| <script type="text/javascript"> |
| $(function(){ |
| var targetFile='http://bits.netbeans.org/media/knockout3-click-handler.mp4'; |
| jwplayer('flashContent3').setup({ |
| 'id': 'flashContentId', |
| 'width': '530', |
| 'height': '340', |
| 'autostart': 'false', |
| 'file': targetFile, |
| 'controlbar':{position:'bottom'}, |
| 'modes': [ |
| {type: 'html5'}, |
| {type: 'flash', src: '/images_www/js/mediaplayer-5.9/player.swf'}, |
| {type: 'download'} |
| ] |
| }); |
| }); |
| </script> |
| |
| |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| |
| |
| <br style="clear:both;"> |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Video%20of%20Using%20KnockoutJS%20in%20an%20HTML5%20Application">Enviar Feedback neste Tutorial</a> |
| </div> |
| <br style="clear:both;"> |
| </td> |
| </tr> |
| </table> |
| <h2>Links relacionados</h2> |
| |
| <ul> |
| <li><a href="html5-gettingstarted.html">Conceitos Básicos sobre Aplicações em HTML5</a></li> |
| <li>Blog <a href="https://blogs.oracle.com/netbeanswebclient/">NetBeans Web Client (Cliente Web do NetBeans)</a></li> |
| <li><a href="../../trails/php.html">Trilha de Aprendizado de PHP e HTML5</a></li> |
| |
| </ul> |
| </body> |
| </html> |
