GingaMS                   Dia 3Desenvolvimento para TV Digital Interativa      Diemesleno Souza Carvalho          Campo Gr...
Sobre o palestrante.•   Tecnólogo em Sistemas para Internet.•   Pós-graduando MBA em Gestão de Projetos.•   Trabalho com T...
Sobre o GingaMS.•   Grupo novo, mas com grandes perspectivas.•   Estimular e difundir as tecnologias TVDi.•   Tendências d...
Sobre o Mini-curso.•   Nivelamento sobre TVDi.•   Entender as tecnologias envolvidas.•   Desafios do mercado.•   Principai...
Terceiro Dia• Criação de uma Aplicação NCL Pura.• Criação de uma Aplicação Ginga-NCL.• Criação de uma Aplicação Ginga-J.
PráticaAplicação NCL Pura
Aplicação NCL Pura« Criaremos uma aplicação NCL Pura passo a  passo. »
Aplicação NCL Pura1 - Abra o eclipse.
Aplicação NCL Pura2 - Crie um novo projeto do tipo ‘General/Project’ e dê o nome   de ‘NCL-Pura’.
Aplicação NCL Pura3 - Clique com o botão direito no projeto e crie um novo   diretório chamado ‘media’
Aplicação NCL Pura4 - Clique com o botão direito no diretório ‘media’ e selecione a   opção ‘import->File System’ e seleci...
Aplicação NCL Pura5 - Clique com o botão direito do projeto e crie um novo arquivo   do tipo ‘NCL Document’ e digite ‘main...
Aplicação NCL Pura3 - Dentro do cabeçalho ‘<head>’, defina uma regionBase:<regionBase>   <region id="rgFundo" width="100%"...
Aplicação NCL Pura4 - Ainda dentro do cabeçalho, defina um descriptorBase:<descriptorBase>    <descriptor id="descVideo" r...
Aplicação NCL Pura5 - Dentro do corpo do programa ‘<body>’, Indique a mídia que   aparecerá na tela:<media id="video" src=...
Aplicação NCL Pura6 - Crie um port para indicar o componente que inicia:<port id="pEntrada" component="video" />
Aplicação NCL PuraAbra o Ginga Player e teste o programa!
PráticaAplicação Ginga-NCL
Aplicação Ginga-NCL1 - Com o Eclipse aberto, crie um novo projeto  do tipo ‘General/Project’ chamado ‘Ginga-  NCL’.
Aplicação Ginga-NCL2 - Dentro de Ginga-NCL crie outro diretório  chamado ‘media’ e importe as imagens para  dentro.
Aplicação Ginga-NCL3 - Ainda dentro de Ginga-NCL crie um arquivo  do tipo ‘NCL Document’ e digite ‘main’ para o  id.
Aplicação Ginga-NCL4 - Dentro do cabeçalho ‘<head>’ adicione um  regionBase.<regionBase>   <region width="40%" height="40%...
Aplicação Ginga-NCL5 - Adicione um descriptorBase<descriptorBase>     <descriptor id="dsButton" region="rgButton" focusInd...
Aplicação Ginga-NCL6 - Abra um connectorBase<connectorBase>
Aplicação Ginga-NCL7 - Adicione um causalConnector<causalConnector id="onBeginStart">   <simpleCondition role="onBegin"/> ...
Aplicação Ginga-NCL8 - Adicione outro causalConnector<causalConnector id="onEndStop">   <simpleCondition role="onEnd"/>   ...
Aplicação Ginga-NCL9 - Adicione outro causalConnector<causalConnector id="onSelectionStopSet">     <simpleCondition role="...
Aplicação Ginga-NCL10 - Adicione outro causalConnector<causalConnector id="onCondGteBeginStart">     <connectorParam name=...
Aplicação Ginga-NCL11 - Adicione outro causalConnector<causalConnector id="onCondLtBeginStart">       <connectorParam name...
Aplicação Ginga-NCL12 - Caso o eclipse não tenha fechado o  ‘connectorBase’ faça isso.</connectorBase>
Aplicação Ginga-NCL13 - Dentro de ‘<body>’ adicione um port<port id="entryPoint" component="timer"/>
Aplicação Ginga-NCL14 - Abra uma media para gerenciar o timer.<media id="timer" explicitDur="4s">
Aplicação Ginga-NCL15 - Adicione as âncoras.<area id="area01" begin="3s" end="6s"/><area id="area02" begin="10s" end="13s"...
Aplicação Ginga-NCL16 - Feche a media caso o eclipse já não tenha  feito.</media>
Aplicação Ginga-NCL17 - Adicione outra media para o arquivo lua.<media id="clicks" src=“scripts/clicks.lua">
Aplicação Ginga-NCL18 - Adicione a função que usaremos.<property name="inc"/>
Aplicação Ginga-NCL19 - Adicione a variável que usaremos.<property name="counter"/>
Aplicação Ginga-NCL20 - Feche a media do arquivo lua.</media>
Aplicação Ginga-NCL21 - Adicione a imagem do personagem.<media id="button" descriptor="dsButton" src="media/smile2.png"/>
Aplicação Ginga-NCL22 - Adicione a imagem de vitoria.<media id="win" descriptor="dsButton" src="media/win.gif"/>
Aplicação Ginga-NCL23 - Adicione a imagem de derrota.<media id="lose" descriptor="dsButton" src="media/lose.jpg"/>
Aplicação Ginga-NCL24 - Inicializando o componente Lua.<link xconnector="onBeginStart">    <bind role="onBegin" component=...
Aplicação Ginga-NCL25 - Exibindo o personagem após 6 seg.<link xconnector="onBeginStart">      <bind role="onBegin" compon...
Aplicação Ginga-NCL26 - Adicionando a interface 2.<link xconnector="onBeginStart">      <bind role="onBegin" component="ti...
Aplicação Ginga-NCL27 - Adicionando a interface 3.<link xconnector="onBeginStart">      <bind role="onBegin" component="ti...
Aplicação Ginga-NCL28 - Adicionando a interface 4.<link xconnector="onBeginStart">      <bind role="onBegin" component="ti...
Aplicação Ginga-NCL29 - Parando o personagem após 6 seg.<link xconnector="onEndStop">    <bind role="onEnd" component="tim...
Aplicação Ginga-NCL30 - Adicionando interface 2.<link xconnector="onEndStop">      <bind role="onEnd" component="timer" in...
Aplicação Ginga-NCL31 - Adicionando interface 3.<link xconnector="onEndStop">      <bind role="onEnd" component="timer" in...
Aplicação Ginga-NCL32 - Adicionando interface 4.<link xconnector="onEndStop">     <bind role="onEnd" component="timer" int...
Aplicação Ginga-NCL33 - Aplicando as regras a cada componente.<link xconnector="onEndStop">      <bind role="onEnd" compon...
Aplicação Ginga-NCL34 - Chamada a funcao ‘inc’ quando o botão é  pressionado.<link xconnector="onSelectionStopSet">      <...
Aplicação Ginga-NCL35 - Exibindo o resultado se o user vencer.<link xconnector="onCondGteBeginStart">       <linkParam nam...
Aplicação Ginga-NCL36 - Exibindo o resultado se o user perder.<link xconnector="onCondLtBeginStart">      <linkParam name=...
Aplicação Ginga-NCL37 - Dentro de Ginga-NCL crie um diretório  chamado ‘scripts’ e dentro desse diretório crie  um arquivo...
Aplicação Ginga-NCL38 - Dentro de ‘clicks.lua’ crie uma variável do  tipo local e inicie ela com ‘0’.local counter = 0
Aplicação Ginga-NCL39 - Declare os atributos para a variável.local counterEvt = {           class = ncl,           type = ...
Aplicação Ginga-NCL40 - Crie a funcao para verificar os atributos e  some o contador.function handler (evt)     if evt.cla...
Aplicação Ginga-NCL41 - Set os stributos para o post do evento.event.post {     class = ncl,     type = attribution,     n...
Aplicação Ginga-NCL42 - Escute os métodos start e stop.counterEvt.value = countercounterEvt.action = start; event.post(cou...
Aplicação Ginga-NCL43 - Feche a função e registre o evento.endevent.register(handler)
Aplicação Ginga-NCL44 - Start o Set-top-Box Ginga.
Aplicação Ginga-NCL45 - Copie o projeto para o diretório ‘misc/ncl30’  usando o winSCP ou outro cliente.
Aplicação Ginga-NCL46 - Abra o putty e logue no set-top-box.
Aplicação Ginga-NCL47 - Dentro de ‘misc’, execute a aplicação com o  comando:     ./launcher.sh ncl30/Ginga-NCL/main.ncl
Aplicação Ginga-NCL48 - GingaMS Game
Aplicação Ginga-NCL49 - You win?
PráticaAplicação Ginga-J
Aplicação Ginga-J1 - Abra o eclipse e crie um novo projeto Java  com o nome Ginga-J.
Aplicação Ginga-J2 - Clique com o botão direito no projeto e vá  para ‘propriedades’.
Aplicação Ginga-J3 - Clique em ‘Java Build Path’ e na aba ‘library’  clique no botão ‘Add External Jars’.
Aplicação Ginga-J4 - Adicione o jar do xletview.
Aplicação Ginga-J5 - Adicione o jar do JavaTV.
Aplicação Ginga-J6 - Clique no botão ‘Add External Class Folder’ e  adicione o diretório ‘lib’ do JavaTV.
Aplicação Ginga-J7 - Clique no botão ‘Ok’.
Aplicação Ginga-J8 - Clique com o botão direito no projeto e  adicione um novo pacote com o nome  ‘br.com.gingams’.
Aplicação Ginga-J9 - No pacote criado, clique com o botão direito  e crie uma nova classe chamada  ‘GingaMSXlet’.
Aplicação Ginga-J10 - Implemente a classe Xlet na nossa classe  criada.public class GingaMSXlet implements Xlet {}
Aplicação Ginga-J11 - Clique no ‘problema’ para resolver a  dependência.import javax.tv.xlet
Aplicação Ginga-J12 - Clique no ‘problema’ para implementar os  métodos da Xlet.
Aplicação Ginga-J13 - Método destroyXletpublic void destroyXlet(boolean arg0) throws XletStateChangeException {}
Aplicação Ginga-J14 - Método initXletpublic void initXlet(XletContext arg0) throws XletStateChangeException {}
Aplicação Ginga-J15 - Método pauseXletpublic void pauseXlet() {}
Aplicação Ginga-J16 - Método startXletpublic void startXlet() throws XletStateChangeException {}
Aplicação Ginga-J17 - Declarar os objetos que serão utilizados.private XletContext contexto;private HStaticText labelAcima...
Aplicação Ginga-J18 - Clique no ‘problema’ para resolver as  dependências.import org.havi.ui.HScene;import org.havi.ui.HSt...
Aplicação Ginga-J19 - Crie o método construtor da classe.public GingaMSXlet(){  //vazio}
Aplicação Ginga-J20 - Configure o método destroyXlet.public void destroyXlet(boolean arg0) throws XletStateChangeException...
Aplicação Ginga-J21 - Adicione a notificação do contexto ao  método destroyXlet.public void destroyXlet(boolean arg0) thro...
Aplicação Ginga-J22 - Adicione a variável ‘contexto’ no método  initXlet.public void initXlet(XletContext contexto) throws...
Aplicação Ginga-J23 - Dentro do método initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChange...
Aplicação Ginga-J24 - Dentro do método initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChange...
Aplicação Ginga-J25 - Clique no ‘problema’ para resolver a  dependência.import org.havi.ui.HScreen;import org.havi.ui.HSce...
Aplicação Ginga-J26 - Ainda dentro do initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeE...
Aplicação Ginga-J27 - Clique no ‘problema’ para tratar a  dependência.import java.awt.Color;import java.awt.Font;
Aplicação Ginga-J28 - Ainda dentro do initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeE...
Aplicação Ginga-J29 - Ainda dentro do initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeE...
Aplicação Ginga-J30 - Ainda dentro do initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeE...
Aplicação Ginga-J31 - No método do startXlet adicione:public void startXlet() throws XletStateChangeException {        thi...
Aplicação Ginga-J32 - Clique no menu ‘Project’->‘Clean’ para  compilar nossa aplicação.
Aplicação Ginga-J33 - Abra o promp de comando e inicie o  XletView.java -jar xletview.jar
Aplicação Ginga-J34 - Clique no menu ‘Applications->Manage  Applications’.
Aplicação Ginga-J35 - Clique em ‘Defaul Group’ e no menu lateral  clique em ‘New Application’.
Aplicação Ginga-J36 - Clique em ‘new app 1’ e no formulário  especifique os seguintes dados:Name: GingaMSPath: Pasta ‘bin’...
Aplicação Ginga-J37 - Deverá ficar desta forma:
Aplicação Ginga-J38 - Clique em ‘Save & Close’
Aplicação Ginga-J39 - Volte no menu ‘Applications’ e clique na  aplicação ‘GingaMS’ criada.
Aplicação Ginga-J40 - Se estiver tudo ok a aplicação irá rodar.
Conclusão.•   Mercado altamente promissor.•   Diversos nichos a serem explorados.•   Hora de se capacitar.•   Levar a idei...
Referências.•   Livro: Programando em NCL 3.0•   www.itvbr.com.br•   www.ginga.org.br•   www.gingancl.org.br•   www.grupog...
Dúvidas.
Obrigado• Contato:  – www.diemesleno.com.br  – diemesleno@gmail.com  – @diemesleno
Fim do 3 dia  GingaMS
Upcoming SlideShare
Loading in...5
×

Desenvolvimento para tv digital interativa [ dia 3]

1,561

Published on

Slides do terceiro dia do mini curso de Desenvolvimento para TV Digital Interativa oferecido pelo grupo GingaMS.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,561
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desenvolvimento para tv digital interativa [ dia 3]

  1. 1. GingaMS Dia 3Desenvolvimento para TV Digital Interativa Diemesleno Souza Carvalho Campo Grande - MS
  2. 2. Sobre o palestrante.• Tecnólogo em Sistemas para Internet.• Pós-graduando MBA em Gestão de Projetos.• Trabalho com T.I. Desde 1998.• Palestrante em diversos eventos regionais.• Ex-estagiário TRE/MS e Dataprev/MS.• 2 anos na Sefaz/MS Analista/Programador.• Analista de Sistemas Pleno na Sanesul/MS.
  3. 3. Sobre o GingaMS.• Grupo novo, mas com grandes perspectivas.• Estimular e difundir as tecnologias TVDi.• Tendências do mercado de TVDi.• Capacitar novos membros gradativamente.• Incentivar produções independentes.• Promover eventos e divulgação do grupo.
  4. 4. Sobre o Mini-curso.• Nivelamento sobre TVDi.• Entender as tecnologias envolvidas.• Desafios do mercado.• Principais dificuldades hoje.• Montar ambiente de desenvolvimento e teste.• Criar algumas aplicações de exemplo.
  5. 5. Terceiro Dia• Criação de uma Aplicação NCL Pura.• Criação de uma Aplicação Ginga-NCL.• Criação de uma Aplicação Ginga-J.
  6. 6. PráticaAplicação NCL Pura
  7. 7. Aplicação NCL Pura« Criaremos uma aplicação NCL Pura passo a passo. »
  8. 8. Aplicação NCL Pura1 - Abra o eclipse.
  9. 9. Aplicação NCL Pura2 - Crie um novo projeto do tipo ‘General/Project’ e dê o nome de ‘NCL-Pura’.
  10. 10. Aplicação NCL Pura3 - Clique com o botão direito no projeto e crie um novo diretório chamado ‘media’
  11. 11. Aplicação NCL Pura4 - Clique com o botão direito no diretório ‘media’ e selecione a opção ‘import->File System’ e selecione o arquivo ‘video.mp4’.
  12. 12. Aplicação NCL Pura5 - Clique com o botão direito do projeto e crie um novo arquivo do tipo ‘NCL Document’ e digite ‘main’ para o id do arquivo.
  13. 13. Aplicação NCL Pura3 - Dentro do cabeçalho ‘<head>’, defina uma regionBase:<regionBase> <region id="rgFundo" width="100%" height="100%" /></regionBase>
  14. 14. Aplicação NCL Pura4 - Ainda dentro do cabeçalho, defina um descriptorBase:<descriptorBase> <descriptor id="descVideo" region="rgFundo" /></descriptorBase>
  15. 15. Aplicação NCL Pura5 - Dentro do corpo do programa ‘<body>’, Indique a mídia que aparecerá na tela:<media id="video" src="media/video.mp4" descriptor="descVideo" />
  16. 16. Aplicação NCL Pura6 - Crie um port para indicar o componente que inicia:<port id="pEntrada" component="video" />
  17. 17. Aplicação NCL PuraAbra o Ginga Player e teste o programa!
  18. 18. PráticaAplicação Ginga-NCL
  19. 19. Aplicação Ginga-NCL1 - Com o Eclipse aberto, crie um novo projeto do tipo ‘General/Project’ chamado ‘Ginga- NCL’.
  20. 20. Aplicação Ginga-NCL2 - Dentro de Ginga-NCL crie outro diretório chamado ‘media’ e importe as imagens para dentro.
  21. 21. Aplicação Ginga-NCL3 - Ainda dentro de Ginga-NCL crie um arquivo do tipo ‘NCL Document’ e digite ‘main’ para o id.
  22. 22. Aplicação Ginga-NCL4 - Dentro do cabeçalho ‘<head>’ adicione um regionBase.<regionBase> <region width="40%" height="40%" left="30%" top="30%” id="rgButton"/></regionBase>
  23. 23. Aplicação Ginga-NCL5 - Adicione um descriptorBase<descriptorBase> <descriptor id="dsButton" region="rgButton" focusIndex="0"/></descriptorBase>
  24. 24. Aplicação Ginga-NCL6 - Abra um connectorBase<connectorBase>
  25. 25. Aplicação Ginga-NCL7 - Adicione um causalConnector<causalConnector id="onBeginStart"> <simpleCondition role="onBegin"/> <simpleAction role="start"/></causalConnector>
  26. 26. Aplicação Ginga-NCL8 - Adicione outro causalConnector<causalConnector id="onEndStop"> <simpleCondition role="onEnd"/> <simpleAction role="stop" max="unbounded"/></causalConnector>
  27. 27. Aplicação Ginga-NCL9 - Adicione outro causalConnector<causalConnector id="onSelectionStopSet"> <simpleCondition role="onSelection"/> <connectorParam name="var"/> <compoundAction operator="seq"> <simpleAction role="stop"/> <simpleAction role="set" value="$var"/> </compoundAction></causalConnector>
  28. 28. Aplicação Ginga-NCL10 - Adicione outro causalConnector<causalConnector id="onCondGteBeginStart"> <connectorParam name="var"/> <compoundCondition operator="and"> <simpleCondition role="onBegin" /> <assessmentStatement comparator="gte"> <attributeAssessment role="attNodeTest" eventType="attribution" . attributeType="nodeProperty"/> <valueAssessment value="$var"/> </assessmentStatement> </compoundCondition> <simpleAction role="start"/></causalConnector>
  29. 29. Aplicação Ginga-NCL11 - Adicione outro causalConnector<causalConnector id="onCondLtBeginStart"> <connectorParam name="var"/> <compoundCondition operator="and"> <simpleCondition role="onBegin" /> <assessmentStatement comparator="lt"> <attributeAssessment role="attNodeTest" eventType="attribution" . . … attributeType="nodeProperty"/> <valueAssessment value="$var"/> </assessmentStatement> </compoundCondition> <simpleAction role="start"/></causalConnector>
  30. 30. Aplicação Ginga-NCL12 - Caso o eclipse não tenha fechado o ‘connectorBase’ faça isso.</connectorBase>
  31. 31. Aplicação Ginga-NCL13 - Dentro de ‘<body>’ adicione um port<port id="entryPoint" component="timer"/>
  32. 32. Aplicação Ginga-NCL14 - Abra uma media para gerenciar o timer.<media id="timer" explicitDur="4s">
  33. 33. Aplicação Ginga-NCL15 - Adicione as âncoras.<area id="area01" begin="3s" end="6s"/><area id="area02" begin="10s" end="13s"/><area id="area03" begin="17s" end="20s"/><area id="area04" begin="24s" end="27s"/><area id="areaTotal" begin="35s"/>
  34. 34. Aplicação Ginga-NCL16 - Feche a media caso o eclipse já não tenha feito.</media>
  35. 35. Aplicação Ginga-NCL17 - Adicione outra media para o arquivo lua.<media id="clicks" src=“scripts/clicks.lua">
  36. 36. Aplicação Ginga-NCL18 - Adicione a função que usaremos.<property name="inc"/>
  37. 37. Aplicação Ginga-NCL19 - Adicione a variável que usaremos.<property name="counter"/>
  38. 38. Aplicação Ginga-NCL20 - Feche a media do arquivo lua.</media>
  39. 39. Aplicação Ginga-NCL21 - Adicione a imagem do personagem.<media id="button" descriptor="dsButton" src="media/smile2.png"/>
  40. 40. Aplicação Ginga-NCL22 - Adicione a imagem de vitoria.<media id="win" descriptor="dsButton" src="media/win.gif"/>
  41. 41. Aplicação Ginga-NCL23 - Adicione a imagem de derrota.<media id="lose" descriptor="dsButton" src="media/lose.jpg"/>
  42. 42. Aplicação Ginga-NCL24 - Inicializando o componente Lua.<link xconnector="onBeginStart"> <bind role="onBegin" component="timer"/> <bind role="start" component="clicks"/></link>
  43. 43. Aplicação Ginga-NCL25 - Exibindo o personagem após 6 seg.<link xconnector="onBeginStart"> <bind role="onBegin" component="timer" interface="area01"/> <bind role="start" component="button"/></link>
  44. 44. Aplicação Ginga-NCL26 - Adicionando a interface 2.<link xconnector="onBeginStart"> <bind role="onBegin" component="timer" interface="area02"/> <bind role="start" component="button"/></link>
  45. 45. Aplicação Ginga-NCL27 - Adicionando a interface 3.<link xconnector="onBeginStart"> <bind role="onBegin" component="timer" interface="area03"/> <bind role="start" component="button"/></link>
  46. 46. Aplicação Ginga-NCL28 - Adicionando a interface 4.<link xconnector="onBeginStart"> <bind role="onBegin" component="timer" interface="area04"/> <bind role="start" component="button"/></link>
  47. 47. Aplicação Ginga-NCL29 - Parando o personagem após 6 seg.<link xconnector="onEndStop"> <bind role="onEnd" component="timer" interface="area01"/> <bind role="stop" component="button"/></link>
  48. 48. Aplicação Ginga-NCL30 - Adicionando interface 2.<link xconnector="onEndStop"> <bind role="onEnd" component="timer" interface="area02"/> <bind role="stop" component="button"/></link>
  49. 49. Aplicação Ginga-NCL31 - Adicionando interface 3.<link xconnector="onEndStop"> <bind role="onEnd" component="timer" interface="area03"/> <bind role="stop" component="button"/></link>
  50. 50. Aplicação Ginga-NCL32 - Adicionando interface 4.<link xconnector="onEndStop"> <bind role="onEnd" component="timer" interface="area04"/> <bind role="stop" component="button"/></link>
  51. 51. Aplicação Ginga-NCL33 - Aplicando as regras a cada componente.<link xconnector="onEndStop"> <bind role="onEnd" component="timer"/> <bind role="stop" component="button"/> <bind role="stop" component="win"/> <bind role="stop" component="lose"/> <bind role="stop" component="clicks"/></link>
  52. 52. Aplicação Ginga-NCL34 - Chamada a funcao ‘inc’ quando o botão é pressionado.<link xconnector="onSelectionStopSet"> <bind role="onSelection" component="button"/> <bind role="stop" component="button"/> <bind role="set" component="clicks" interface="inc"> <bindParam name="var" value="1"/> </bind></link>
  53. 53. Aplicação Ginga-NCL35 - Exibindo o resultado se o user vencer.<link xconnector="onCondGteBeginStart"> <linkParam name="var" value="3"/> <bind role="onBegin" component="timer" interface="areaTotal"/> <bind role="attNodeTest" component="clicks" interface="counter"/> <bind role="start" component="win"/></link>
  54. 54. Aplicação Ginga-NCL36 - Exibindo o resultado se o user perder.<link xconnector="onCondLtBeginStart"> <linkParam name="var" value="3"/> <bind role="onBegin" component="timer" interface="areaTotal"/> <bind role="attNodeTest" component="clicks" interface="counter"/> <bind role="start" component="lose"/></link>
  55. 55. Aplicação Ginga-NCL37 - Dentro de Ginga-NCL crie um diretório chamado ‘scripts’ e dentro desse diretório crie um arquivo do tipo ‘New Lua File’ com o nome de ‘clicks.lua’.
  56. 56. Aplicação Ginga-NCL38 - Dentro de ‘clicks.lua’ crie uma variável do tipo local e inicie ela com ‘0’.local counter = 0
  57. 57. Aplicação Ginga-NCL39 - Declare os atributos para a variável.local counterEvt = { class = ncl, type = attribution, name = counter,}
  58. 58. Aplicação Ginga-NCL40 - Crie a funcao para verificar os atributos e some o contador.function handler (evt) if evt.class ~= ncl then return end if evt.type ~= attribution then return end if evt.name ~= inc then return end counter = counter + evt.value
  59. 59. Aplicação Ginga-NCL41 - Set os stributos para o post do evento.event.post { class = ncl, type = attribution, name = inc, action = stop, value = counter,}
  60. 60. Aplicação Ginga-NCL42 - Escute os métodos start e stop.counterEvt.value = countercounterEvt.action = start; event.post(counterEvt)counterEvt.action = stop; event.post(counterEvt)
  61. 61. Aplicação Ginga-NCL43 - Feche a função e registre o evento.endevent.register(handler)
  62. 62. Aplicação Ginga-NCL44 - Start o Set-top-Box Ginga.
  63. 63. Aplicação Ginga-NCL45 - Copie o projeto para o diretório ‘misc/ncl30’ usando o winSCP ou outro cliente.
  64. 64. Aplicação Ginga-NCL46 - Abra o putty e logue no set-top-box.
  65. 65. Aplicação Ginga-NCL47 - Dentro de ‘misc’, execute a aplicação com o comando: ./launcher.sh ncl30/Ginga-NCL/main.ncl
  66. 66. Aplicação Ginga-NCL48 - GingaMS Game
  67. 67. Aplicação Ginga-NCL49 - You win?
  68. 68. PráticaAplicação Ginga-J
  69. 69. Aplicação Ginga-J1 - Abra o eclipse e crie um novo projeto Java com o nome Ginga-J.
  70. 70. Aplicação Ginga-J2 - Clique com o botão direito no projeto e vá para ‘propriedades’.
  71. 71. Aplicação Ginga-J3 - Clique em ‘Java Build Path’ e na aba ‘library’ clique no botão ‘Add External Jars’.
  72. 72. Aplicação Ginga-J4 - Adicione o jar do xletview.
  73. 73. Aplicação Ginga-J5 - Adicione o jar do JavaTV.
  74. 74. Aplicação Ginga-J6 - Clique no botão ‘Add External Class Folder’ e adicione o diretório ‘lib’ do JavaTV.
  75. 75. Aplicação Ginga-J7 - Clique no botão ‘Ok’.
  76. 76. Aplicação Ginga-J8 - Clique com o botão direito no projeto e adicione um novo pacote com o nome ‘br.com.gingams’.
  77. 77. Aplicação Ginga-J9 - No pacote criado, clique com o botão direito e crie uma nova classe chamada ‘GingaMSXlet’.
  78. 78. Aplicação Ginga-J10 - Implemente a classe Xlet na nossa classe criada.public class GingaMSXlet implements Xlet {}
  79. 79. Aplicação Ginga-J11 - Clique no ‘problema’ para resolver a dependência.import javax.tv.xlet
  80. 80. Aplicação Ginga-J12 - Clique no ‘problema’ para implementar os métodos da Xlet.
  81. 81. Aplicação Ginga-J13 - Método destroyXletpublic void destroyXlet(boolean arg0) throws XletStateChangeException {}
  82. 82. Aplicação Ginga-J14 - Método initXletpublic void initXlet(XletContext arg0) throws XletStateChangeException {}
  83. 83. Aplicação Ginga-J15 - Método pauseXletpublic void pauseXlet() {}
  84. 84. Aplicação Ginga-J16 - Método startXletpublic void startXlet() throws XletStateChangeException {}
  85. 85. Aplicação Ginga-J17 - Declarar os objetos que serão utilizados.private XletContext contexto;private HStaticText labelAcima;private HStaticText labelMeio;private HStaticText labelAbaixo;private HScene scene;
  86. 86. Aplicação Ginga-J18 - Clique no ‘problema’ para resolver as dependências.import org.havi.ui.HScene;import org.havi.ui.HStaticText;
  87. 87. Aplicação Ginga-J19 - Crie o método construtor da classe.public GingaMSXlet(){ //vazio}
  88. 88. Aplicação Ginga-J20 - Configure o método destroyXlet.public void destroyXlet(boolean arg0) throws XletStateChangeException { this.contexto.notifyDestroyed();}
  89. 89. Aplicação Ginga-J21 - Adicione a notificação do contexto ao método destroyXlet.public void destroyXlet(boolean arg0) throws XletStateChangeException { this.contexto.notifyDestroyed();}
  90. 90. Aplicação Ginga-J22 - Adicione a variável ‘contexto’ no método initXlet.public void initXlet(XletContext contexto) throws XletStateChangeException {}
  91. 91. Aplicação Ginga-J23 - Dentro do método initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeException { this.contexto = contexto;}
  92. 92. Aplicação Ginga-J24 - Dentro do método initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeException { this.contexto = contexto; this.scene = HSceneFactory.getInstance() .getFullScreenScene(HScreen.getDefaultHScreen() .getDefaultHGraphicsDevice());}
  93. 93. Aplicação Ginga-J25 - Clique no ‘problema’ para resolver a dependência.import org.havi.ui.HScreen;import org.havi.ui.HSceneFactory;
  94. 94. Aplicação Ginga-J26 - Ainda dentro do initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeException { ... this.labelAcima = new HStaticText("Grupo Ginga MS"); this.labelAcima.setFont(new Font("Arial", Font.BOLD, 90)); this.labelAcima.setBounds(10, 10, 700, 200); this.labelAcima.setForeground(Color.white); this.labelAcima.setBackground(new Color(0,100,0));}
  95. 95. Aplicação Ginga-J27 - Clique no ‘problema’ para tratar a dependência.import java.awt.Color;import java.awt.Font;
  96. 96. Aplicação Ginga-J28 - Ainda dentro do initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeException { ... this.labelMeio = new HStaticText("TV Digital se faz com Ginga!"); this.labelMeio.setFont(new Font("Arial", Font.BOLD, 40)); this.labelMeio.setBounds(10, 200, 700, 200); this.labelMeio.setForeground(new Color(0,0,139)); this.labelMeio.setBackground(Color.white);}
  97. 97. Aplicação Ginga-J29 - Ainda dentro do initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeException { ... this.labelAbaixo = new HStaticText("www.gingams.com.br"); this.labelAbaixo.setFont(new Font("Arial", Font.BOLD, 60)); this.labelAbaixo.setBounds(10, 370, 700, 200); this.labelAbaixo.setForeground(Color.yellow); this.labelAbaixo.setBackground(new Color(50,153,204));}
  98. 98. Aplicação Ginga-J30 - Ainda dentro do initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeException { ... this.scene.add(this.labelAcima); this.scene.add(this.labelMeio); this.scene.add(this.labelAbaixo);}
  99. 99. Aplicação Ginga-J31 - No método do startXlet adicione:public void startXlet() throws XletStateChangeException { this.scene.setVisible(true); }
  100. 100. Aplicação Ginga-J32 - Clique no menu ‘Project’->‘Clean’ para compilar nossa aplicação.
  101. 101. Aplicação Ginga-J33 - Abra o promp de comando e inicie o XletView.java -jar xletview.jar
  102. 102. Aplicação Ginga-J34 - Clique no menu ‘Applications->Manage Applications’.
  103. 103. Aplicação Ginga-J35 - Clique em ‘Defaul Group’ e no menu lateral clique em ‘New Application’.
  104. 104. Aplicação Ginga-J36 - Clique em ‘new app 1’ e no formulário especifique os seguintes dados:Name: GingaMSPath: Pasta ‘bin’ do projeto Ginga-JXlet: br.com.gingams.GingaMSXlet
  105. 105. Aplicação Ginga-J37 - Deverá ficar desta forma:
  106. 106. Aplicação Ginga-J38 - Clique em ‘Save & Close’
  107. 107. Aplicação Ginga-J39 - Volte no menu ‘Applications’ e clique na aplicação ‘GingaMS’ criada.
  108. 108. Aplicação Ginga-J40 - Se estiver tudo ok a aplicação irá rodar.
  109. 109. Conclusão.• Mercado altamente promissor.• Diversos nichos a serem explorados.• Hora de se capacitar.• Levar a ideia para as universidades.• Promover eventos.• Se divertir.
  110. 110. Referências.• Livro: Programando em NCL 3.0• www.itvbr.com.br• www.ginga.org.br• www.gingancl.org.br• www.grupogingagoias.com.br• www.gingadf.com.br• www.google.com.br
  111. 111. Dúvidas.
  112. 112. Obrigado• Contato: – www.diemesleno.com.br – diemesleno@gmail.com – @diemesleno
  113. 113. Fim do 3 dia GingaMS
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×