Desenvolvimento para tv digital interativa [ dia 3]
1. GingaMS
Dia 3
Desenvolvimento para TV Digital Interativa
Diemesleno Souza Carvalho
Campo Grande - MS
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. 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. 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. 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.
9. Aplicação NCL Pura
2 - Crie um novo projeto do tipo ‘General/Project’ e dê o nome
de ‘NCL-Pura’.
10. Aplicação NCL Pura
3 - Clique com o botão direito no projeto e crie um novo
diretório chamado ‘media’
11. 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’.
12. 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.
13. Aplicação NCL Pura
3 - Dentro do cabeçalho ‘<head>’, defina uma regionBase:
<regionBase>
<region id="rgFundo" width="100%" height="100%" />
</regionBase>
14. Aplicação NCL Pura
4 - Ainda dentro do cabeçalho, defina um descriptorBase:
<descriptorBase>
<descriptor id="descVideo" region="rgFundo" />
</descriptorBase>
15. 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" />
16. Aplicação NCL Pura
6 - Crie um port para indicar o componente que inicia:
<port id="pEntrada" component="video" />
51. Aplicação Ginga-NCL
33 - 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. 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>
53. Aplicação Ginga-NCL
35 - 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. Aplicação Ginga-NCL
36 - 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. 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
de ‘clicks.lua’.
56. Aplicação Ginga-NCL
38 - Dentro de ‘clicks.lua’ crie uma variável do
tipo local e inicie ela com ‘0’.
local counter = 0
57. Aplicação Ginga-NCL
39 - Declare os atributos para a variável.
local counterEvt = {
class = 'ncl',
type = 'attribution',
name = 'counter',
}
58. 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
59. Aplicação Ginga-NCL
41 - Set os stributos para o post do evento.
event.post {
class = 'ncl',
type = 'attribution',
name = 'inc',
action = 'stop',
value = counter,
}
86. Aplicação Ginga-J
18 - Clique no ‘problema’ para resolver as
dependências.
import org.havi.ui.HScene;
import org.havi.ui.HStaticText;
87. Aplicação Ginga-J
19 - Crie o método construtor da classe.
public GingaMSXlet(){
//vazio
}
88. Aplicação Ginga-J
20 - Configure o método destroyXlet.
public void destroyXlet(boolean arg0) throws XletStateChangeException {
this.contexto.notifyDestroyed();
}
89. 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();
}
90. Aplicação Ginga-J
22 - Adicione a variável ‘contexto’ no método
initXlet.
public void initXlet(XletContext contexto) throws XletStateChangeException {
}
91. Aplicação Ginga-J
23 - Dentro do método initXlet adicione:
public void initXlet(XletContext contexto) throws XletStateChangeException {
this.contexto = contexto;
}
92. 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());
}
93. Aplicação Ginga-J
25 - Clique no ‘problema’ para resolver a
dependência.
import org.havi.ui.HScreen;
import org.havi.ui.HSceneFactory;
94. 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));
}
95. Aplicação Ginga-J
27 - Clique no ‘problema’ para tratar a
dependência.
import java.awt.Color;
import java.awt.Font;
96. 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);
}
97. Aplicação Ginga-J
29 - 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. Aplicação Ginga-J
30 - 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. Aplicação Ginga-J
31 - No método do startXlet adicione:
public void startXlet() throws XletStateChangeException {
this.scene.setVisible(true);
}
100. Aplicação Ginga-J
32 - Clique no menu ‘Project’->‘Clean’ para
compilar nossa aplicação.
101. Aplicação Ginga-J
33 - Abra o promp de comando e inicie o
XletView.
java -jar xletview.jar
103. Aplicação Ginga-J
35 - Clique em ‘Defaul Group’ e no menu lateral
clique em ‘New Application’.
104. 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
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.