desenvolvimento para tv digital interativa [ dia 3]
DESCRIPTION
Slides do terceiro dia do mini curso de Desenvolvimento para TV Digital Interativa oferecido pelo grupo GingaMS.TRANSCRIPT
![Page 1: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/1.jpg)
GingaMSDia 3
Desenvolvimento para TV Digital Interativa
Diemesleno Souza Carvalho
Campo Grande - MS
![Page 2: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/2.jpg)
Sobre o palestrante.
• Tecnólogo em Sistemas para Internet.
• Pós-graduando MBA em Gestão de Projetos.
• Trabalho com T.I. Desde 1998.• 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.
![Page 3: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/3.jpg)
Sobre o GingaMS.
• Grupo novo, mas com grandes perspectivas.
• Estimular e difundir as tecnologias TVDi.
• Tendências do mercado de TVDi.• Tendências do mercado de TVDi.
• Capacitar novos membros gradativamente.
• Incentivar produções independentes.
• Promover eventos e divulgação do grupo.
![Page 4: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/4.jpg)
Sobre o Mini-curso.
• Nivelamento sobre TVDi.
• Entender as tecnologias envolvidas.
• Desafios do mercado.• Desafios do mercado.
• Principais dificuldades hoje.
• Montar ambiente de desenvolvimento e teste.
• Criar algumas aplicações de exemplo.
![Page 5: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/5.jpg)
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.
![Page 6: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/6.jpg)
Prática
Aplicação NCL Pura
![Page 7: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/7.jpg)
Aplicação NCL Pura
« Criaremos uma aplicação NCL Pura passo a
passo. »
![Page 8: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/8.jpg)
Aplicação NCL Pura
1 - Abra o eclipse.
![Page 9: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/9.jpg)
Aplicação NCL Pura
2 - Crie um novo projeto do tipo ‘General/Project’ e dê o nome
de ‘NCL-Pura’.
![Page 10: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/10.jpg)
Aplicação NCL Pura
3 - Clique com o botão direito no projeto e crie um novo
diretório chamado ‘media’
![Page 11: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/11.jpg)
Aplicação NCL Pura
4 - Clique com o botão direito no diretório ‘media’ e selecione a
opção ‘import->File System’ e selecione o arquivo
‘video.mp4’.
![Page 12: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/12.jpg)
Aplicação NCL Pura
5 - 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.
![Page 13: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/13.jpg)
Aplicação NCL Pura
3 - Dentro do cabeçalho ‘<head>’, defina uma regionBase:
<regionBase><regionBase>
<region id="rgFundo" width="100%" height="100%" />
</regionBase>
![Page 14: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/14.jpg)
Aplicação NCL Pura
4 - Ainda dentro do cabeçalho, defina um descriptorBase:
<descriptorBase><descriptorBase>
<descriptor id="descVideo" region="rgFundo" />
</descriptorBase>
![Page 15: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/15.jpg)
Aplicação NCL Pura
5 - Dentro do corpo do programa ‘<body>’, Indique a mídia que
aparecerá na tela:
<media id="video" src="media/video.mp4" descriptor="descVideo" />
![Page 16: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/16.jpg)
Aplicação NCL Pura
6 - Crie um port para indicar o componente que inicia:
<port id="pEntrada" component="video" /> <port id="pEntrada" component="video" />
![Page 17: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/17.jpg)
Aplicação NCL Pura
Abra o Ginga Player e teste o programa!
![Page 18: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/18.jpg)
Prática
Aplicação Ginga-NCL
![Page 19: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/19.jpg)
Aplicação Ginga-NCL
1 - Com o Eclipse aberto, crie um novo projeto
do tipo ‘General/Project’ chamado ‘Ginga-
NCL’.NCL’.
![Page 20: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/20.jpg)
Aplicação Ginga-NCL
2 - Dentro de Ginga-NCL crie outro diretório
chamado ‘media’ e importe as imagens para
dentro.dentro.
![Page 21: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/21.jpg)
Aplicação Ginga-NCL
3 - Ainda dentro de Ginga-NCL crie um arquivo
do tipo ‘NCL Document’ e digite ‘main’ para o
id.id.
![Page 22: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/22.jpg)
Aplicação Ginga-NCL
4 - Dentro do cabeçalho ‘<head>’ adicione um
regionBase.
<regionBase>
<region width="40%" height="40%" left="30%" top="30%” id="rgButton"/>
</regionBase>
![Page 23: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/23.jpg)
Aplicação Ginga-NCL
5 - Adicione um descriptorBase
<descriptorBase> <descriptorBase>
<descriptor id="dsButton" region="rgButton" focusIndex="0"/>
</descriptorBase>
![Page 24: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/24.jpg)
Aplicação Ginga-NCL
6 - Abra um connectorBase
<connectorBase><connectorBase>
![Page 25: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/25.jpg)
Aplicação Ginga-NCL
7 - Adicione um causalConnector
<causalConnector id="onBeginStart"><causalConnector id="onBeginStart">
<simpleCondition role="onBegin"/>
<simpleAction role="start"/>
</causalConnector>
![Page 26: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/26.jpg)
Aplicação Ginga-NCL
8 - Adicione outro causalConnector
<causalConnector id="onEndStop"><causalConnector id="onEndStop">
<simpleCondition role="onEnd"/>
<simpleAction role="stop" max="unbounded"/>
</causalConnector>
![Page 27: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/27.jpg)
Aplicação Ginga-NCL
9 - Adicione outro causalConnector
<causalConnector id="onSelectionStopSet"><causalConnector id="onSelectionStopSet">
<simpleCondition role="onSelection"/>
<connectorParam name="var"/>
<compoundAction operator="seq">
<simpleAction role="stop"/>
<simpleAction role="set" value="$var"/>
</compoundAction>
</causalConnector>
![Page 28: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/28.jpg)
Aplicação Ginga-NCL
10 - Adicione outro causalConnector<causalConnector id="onCondGteBeginStart">
<connectorParam name="var"/>
<compoundCondition operator="and"><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>
![Page 29: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/29.jpg)
Aplicação Ginga-NCL
11 - Adicione outro causalConnector<causalConnector id="onCondLtBeginStart">
<connectorParam name="var"/>
<compoundCondition operator="and"><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>
![Page 30: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/30.jpg)
Aplicação Ginga-NCL
12 - Caso o eclipse não tenha fechado o
‘connectorBase’ faça isso.
</connectorBase>
![Page 31: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/31.jpg)
Aplicação Ginga-NCL
13 - Dentro de ‘<body>’ adicione um port
<port id="entryPoint" component="timer"/>
![Page 32: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/32.jpg)
Aplicação Ginga-NCL
14 - Abra uma media para gerenciar o timer.
<media id="timer" explicitDur="4s">
![Page 33: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/33.jpg)
Aplicação Ginga-NCL
15 - Adicione as âncoras.
<area id="area01" begin="3s" end="6s"/>
<area id="area02" begin="10s" end="13s"/><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"/>
![Page 34: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/34.jpg)
Aplicação Ginga-NCL
16 - Feche a media caso o eclipse já não tenha
feito.
</media>
![Page 35: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/35.jpg)
Aplicação Ginga-NCL
17 - Adicione outra media para o arquivo lua.
<media id="clicks" src=“scripts/clicks.lua">
![Page 36: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/36.jpg)
Aplicação Ginga-NCL
18 - Adicione a função que usaremos.
<property name="inc"/>
![Page 37: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/37.jpg)
Aplicação Ginga-NCL
19 - Adicione a variável que usaremos.
<property name="counter"/>
![Page 38: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/38.jpg)
Aplicação Ginga-NCL
20 - Feche a media do arquivo lua.
</media>
![Page 39: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/39.jpg)
Aplicação Ginga-NCL
21 - Adicione a imagem do personagem.
<media id="button" descriptor="dsButton" src="media/smile2.png"/>
![Page 40: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/40.jpg)
Aplicação Ginga-NCL
22 - Adicione a imagem de vitoria.
<media id="win" descriptor="dsButton" src="media/win.gif"/>
![Page 41: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/41.jpg)
Aplicação Ginga-NCL
23 - Adicione a imagem de derrota.
<media id="lose" descriptor="dsButton" src="media/lose.jpg"/>
![Page 42: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/42.jpg)
Aplicação Ginga-NCL
24 - Inicializando o componente Lua.
<link xconnector="onBeginStart">
<bind role="onBegin" component="timer"/> <bind role="onBegin" component="timer"/>
<bind role="start" component="clicks"/>
</link>
![Page 43: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/43.jpg)
Aplicação Ginga-NCL
25 - Exibindo o personagem após 6 seg.
<link xconnector="onBeginStart">
<bind role="onBegin" component="timer" interface="area01"/><bind role="onBegin" component="timer" interface="area01"/>
<bind role="start" component="button"/>
</link>
![Page 44: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/44.jpg)
Aplicação Ginga-NCL
26 - Adicionando a interface 2.
<link xconnector="onBeginStart">
<bind role="onBegin" component="timer" interface="area02"/><bind role="onBegin" component="timer" interface="area02"/>
<bind role="start" component="button"/>
</link>
![Page 45: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/45.jpg)
Aplicação Ginga-NCL
27 - Adicionando a interface 3.
<link xconnector="onBeginStart">
<bind role="onBegin" component="timer" interface="area03"/><bind role="onBegin" component="timer" interface="area03"/>
<bind role="start" component="button"/>
</link>
![Page 46: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/46.jpg)
Aplicação Ginga-NCL
28 - Adicionando a interface 4.
<link xconnector="onBeginStart">
<bind role="onBegin" component="timer" interface="area04"/><bind role="onBegin" component="timer" interface="area04"/>
<bind role="start" component="button"/>
</link>
![Page 47: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/47.jpg)
Aplicação Ginga-NCL
29 - Parando o personagem após 6 seg.
<link xconnector="onEndStop">
<bind role="onEnd" component="timer" interface="area01"/><bind role="onEnd" component="timer" interface="area01"/>
<bind role="stop" component="button"/>
</link>
![Page 48: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/48.jpg)
Aplicação Ginga-NCL
30 - Adicionando interface 2.
<link xconnector="onEndStop">
<bind role="onEnd" component="timer" interface="area02"/><bind role="onEnd" component="timer" interface="area02"/>
<bind role="stop" component="button"/>
</link>
![Page 49: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/49.jpg)
Aplicação Ginga-NCL
31 - Adicionando interface 3.
<link xconnector="onEndStop">
<bind role="onEnd" component="timer" interface="area03"/><bind role="onEnd" component="timer" interface="area03"/>
<bind role="stop" component="button"/>
</link>
![Page 50: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/50.jpg)
Aplicação Ginga-NCL
32 - Adicionando interface 4.
<link xconnector="onEndStop">
<bind role="onEnd" component="timer" interface="area04"/><bind role="onEnd" component="timer" interface="area04"/>
<bind role="stop" component="button"/>
</link>
![Page 51: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/51.jpg)
Aplicação Ginga-NCL
33 - Aplicando as regras a cada componente.
<link xconnector="onEndStop">
<bind role="onEnd" component="timer"/><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>
![Page 52: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/52.jpg)
Aplicação Ginga-NCL
34 - 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>
![Page 53: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/53.jpg)
Aplicação Ginga-NCL
35 - Exibindo o resultado se o user vencer.
<link xconnector="onCondGteBeginStart">
<linkParam name="var" value="3"/> <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>
![Page 54: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/54.jpg)
Aplicação Ginga-NCL
36 - Exibindo o resultado se o user perder.
<link xconnector="onCondLtBeginStart">
<linkParam name="var" value="3"/> <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>
![Page 55: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/55.jpg)
Aplicação Ginga-NCL
37 - 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 um arquivo do tipo ‘New Lua File’ com o nome
de ‘clicks.lua’.
![Page 56: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/56.jpg)
Aplicação Ginga-NCL
38 - Dentro de ‘clicks.lua’ crie uma variável do
tipo local e inicie ela com ‘0’.
local counter = 0
![Page 57: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/57.jpg)
Aplicação Ginga-NCL
39 - Declare os atributos para a variável.
local counterEvt = { local counterEvt = {
class = 'ncl',
type = 'attribution',
name = 'counter',
}
![Page 58: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/58.jpg)
Aplicação Ginga-NCL
40 - 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
![Page 59: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/59.jpg)
Aplicação Ginga-NCL
41 - Set os stributos para o post do evento.
event.post {
class = 'ncl', class = 'ncl',
type = 'attribution',
name = 'inc',
action = 'stop',
value = counter,
}
![Page 60: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/60.jpg)
Aplicação Ginga-NCL
42 - Escute os métodos start e stop.
counterEvt.value = counter
counterEvt.action = 'start'; event.post(counterEvt) counterEvt.action = 'start'; event.post(counterEvt)
counterEvt.action = 'stop'; event.post(counterEvt)
![Page 61: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/61.jpg)
Aplicação Ginga-NCL
43 - Feche a função e registre o evento.
end
event.register(handler)
![Page 62: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/62.jpg)
Aplicação Ginga-NCL
44 - Start o Set-top-Box Ginga.
![Page 63: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/63.jpg)
Aplicação Ginga-NCL
45 - Copie o projeto para o diretório ‘misc/ncl30’
usando o winSCP ou outro cliente.
![Page 64: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/64.jpg)
Aplicação Ginga-NCL
46 - Abra o putty e logue no set-top-box.
![Page 65: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/65.jpg)
Aplicação Ginga-NCL
47 - Dentro de ‘misc’, execute a aplicação com o
comando:
./launcher.sh ncl30/Ginga-NCL/main.ncl
![Page 66: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/66.jpg)
Aplicação Ginga-NCL
48 - GingaMS Game
![Page 67: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/67.jpg)
Aplicação Ginga-NCL
49 - You win?
![Page 68: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/68.jpg)
Prática
Aplicação Ginga-J
![Page 69: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/69.jpg)
Aplicação Ginga-J
1 - Abra o eclipse e crie um novo projeto Java
com o nome Ginga-J.
![Page 70: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/70.jpg)
Aplicação Ginga-J
2 - Clique com o botão direito no projeto e vá
para ‘propriedades’.
![Page 71: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/71.jpg)
Aplicação Ginga-J
3 - Clique em ‘Java Build Path’ e na aba ‘library’
clique no botão ‘Add External Jars’.
![Page 72: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/72.jpg)
Aplicação Ginga-J
4 - Adicione o jar do xletview.
![Page 73: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/73.jpg)
Aplicação Ginga-J
5 - Adicione o jar do JavaTV.
![Page 74: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/74.jpg)
Aplicação Ginga-J
6 - Clique no botão ‘Add External Class Folder’ e
adicione o diretório ‘lib’ do JavaTV.
![Page 75: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/75.jpg)
Aplicação Ginga-J
7 - Clique no botão ‘Ok’.
![Page 76: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/76.jpg)
Aplicação Ginga-J
8 - Clique com o botão direito no projeto e
adicione um novo pacote com o nome
‘br.com.gingams’. ‘br.com.gingams’.
![Page 77: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/77.jpg)
Aplicação Ginga-J
9 - No pacote criado, clique com o botão direito
e crie uma nova classe chamada
‘GingaMSXlet’. ‘GingaMSXlet’.
![Page 78: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/78.jpg)
Aplicação Ginga-J
10 - Implemente a classe Xlet na nossa classe
criada.
public class GingaMSXlet implements Xlet {
}
![Page 79: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/79.jpg)
Aplicação Ginga-J
11 - Clique no ‘problema’ para resolver a
dependência.
import javax.tv.xlet
![Page 80: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/80.jpg)
Aplicação Ginga-J
12 - Clique no ‘problema’ para implementar os
métodos da Xlet.
![Page 81: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/81.jpg)
Aplicação Ginga-J
13 - Método destroyXlet
public void destroyXlet(boolean arg0) throws XletStateChangeException {public void destroyXlet(boolean arg0) throws XletStateChangeException {
}
![Page 82: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/82.jpg)
Aplicação Ginga-J
14 - Método initXlet
public void initXlet(XletContext arg0) throws XletStateChangeException {public void initXlet(XletContext arg0) throws XletStateChangeException {
}
![Page 83: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/83.jpg)
Aplicação Ginga-J
15 - Método pauseXlet
public void pauseXlet() {public void pauseXlet() {
}
![Page 84: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/84.jpg)
Aplicação Ginga-J
16 - Método startXlet
public void startXlet() throws XletStateChangeException {public void startXlet() throws XletStateChangeException {
}
![Page 85: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/85.jpg)
Aplicação Ginga-J
17 - Declarar os objetos que serão utilizados.
private XletContext contexto;private XletContext contexto;
private HStaticText labelAcima;
private HStaticText labelMeio;
private HStaticText labelAbaixo;
private HScene scene;
![Page 86: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/86.jpg)
Aplicação Ginga-J
18 - Clique no ‘problema’ para resolver as
dependências.
import org.havi.ui.HScene;
import org.havi.ui.HStaticText;
![Page 87: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/87.jpg)
Aplicação Ginga-J
19 - Crie o método construtor da classe.
public GingaMSXlet(){public GingaMSXlet(){
//vazio
}
![Page 88: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/88.jpg)
Aplicação Ginga-J
20 - Configure o método destroyXlet.
public void destroyXlet(boolean arg0) throws XletStateChangeException {public void destroyXlet(boolean arg0) throws XletStateChangeException {
this.contexto.notifyDestroyed();
}
![Page 89: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/89.jpg)
Aplicação Ginga-J
21 - Adicione a notificação do contexto ao
método destroyXlet.
public void destroyXlet(boolean arg0) throws XletStateChangeException {
this.contexto.notifyDestroyed();
}
![Page 90: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/90.jpg)
Aplicação Ginga-J
22 - Adicione a variável ‘contexto’ no método
initXlet.
public void initXlet(XletContext contexto) throws XletStateChangeException {
}
![Page 91: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/91.jpg)
Aplicação Ginga-J
23 - Dentro do método initXlet adicione:
public void initXlet(XletContext contexto) throws XletStateChangeException {public void initXlet(XletContext contexto) throws XletStateChangeException {
this.contexto = contexto;
}
![Page 92: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/92.jpg)
Aplicação Ginga-J
24 - Dentro do método initXlet adicione:
public void initXlet(XletContext contexto) throws XletStateChangeException {
this.contexto = contexto;
this.scene = HSceneFactory.getInstance()
.getFullScreenScene(HScreen.getDefaultHScreen()
.getDefaultHGraphicsDevice());
}
![Page 93: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/93.jpg)
Aplicação Ginga-J
25 - Clique no ‘problema’ para resolver a
dependência.
import org.havi.ui.HScreen;
import org.havi.ui.HSceneFactory;
![Page 94: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/94.jpg)
Aplicação Ginga-J
26 - 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));
}
![Page 95: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/95.jpg)
Aplicação Ginga-J
27 - Clique no ‘problema’ para tratar a
dependência.
import java.awt.Color;
import java.awt.Font;
![Page 96: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/96.jpg)
Aplicação Ginga-J
28 - 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);
}
![Page 97: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/97.jpg)
Aplicação Ginga-J
29 - Ainda dentro do initXlet adicione:
public void initXlet(XletContext contexto) throws XletStateChangeException {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));
}
![Page 98: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/98.jpg)
Aplicação Ginga-J
30 - Ainda dentro do initXlet adicione:
public void initXlet(XletContext contexto) throws XletStateChangeException {public void initXlet(XletContext contexto) throws XletStateChangeException {
...
this.scene.add(this.labelAcima);
this.scene.add(this.labelMeio);
this.scene.add(this.labelAbaixo);
}
![Page 99: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/99.jpg)
Aplicação Ginga-J
31 - No método do startXlet adicione:
public void startXlet() throws XletStateChangeException {public void startXlet() throws XletStateChangeException {
this.scene.setVisible(true);
}
![Page 100: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/100.jpg)
Aplicação Ginga-J
32 - Clique no menu ‘Project’->‘Clean’ para
compilar nossa aplicação.
![Page 101: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/101.jpg)
Aplicação Ginga-J
33 - Abra o promp de comando e inicie o
XletView.
java -jar xletview.jar
![Page 102: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/102.jpg)
Aplicação Ginga-J
34 - Clique no menu ‘Applications->Manage
Applications’.
![Page 103: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/103.jpg)
Aplicação Ginga-J
35 - Clique em ‘Defaul Group’ e no menu lateral
clique em ‘New Application’.
![Page 104: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/104.jpg)
Aplicação Ginga-J
36 - Clique em ‘new app 1’ e no formulário
especifique os seguintes dados:
Name: GingaMS
Path: Pasta ‘bin’ do projeto Ginga-J
Xlet: br.com.gingams.GingaMSXlet
![Page 105: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/105.jpg)
Aplicação Ginga-J
37 - Deverá ficar desta forma:
![Page 106: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/106.jpg)
Aplicação Ginga-J
38 - Clique em ‘Save & Close’
![Page 107: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/107.jpg)
Aplicação Ginga-J
39 - Volte no menu ‘Applications’ e clique na
aplicação ‘GingaMS’ criada.
![Page 108: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/108.jpg)
Aplicação Ginga-J
40 - Se estiver tudo ok a aplicação irá rodar.
![Page 109: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/109.jpg)
Conclusão.
• Mercado altamente promissor.
• Diversos nichos a serem explorados.
• Hora de se capacitar.• Hora de se capacitar.
• Levar a ideia para as universidades.
• Promover eventos.
• Se divertir.
![Page 110: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/110.jpg)
Referências.
• Livro: Programando em NCL 3.0
• www.itvbr.com.br
• www.ginga.org.br• www.ginga.org.br
• www.gingancl.org.br
• www.grupogingagoias.com.br
• www.gingadf.com.br
• www.google.com.br
![Page 111: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/111.jpg)
Dúvidas.
![Page 113: Desenvolvimento para tv digital interativa [ dia 3]](https://reader034.vdocuments.mx/reader034/viewer/2022051514/5498b251b47959424d8b5545/html5/thumbnails/113.jpg)
Fim do 3 dia
GingaMS