Desenvolvimento para tv digital interativa [ dia 3]
Upcoming SlideShare
Loading in...5
×
 

Desenvolvimento para tv digital interativa [ dia 3]

on

  • 1,742 views

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

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

Statistics

Views

Total Views
1,742
Views on SlideShare
1,379
Embed Views
363

Actions

Likes
0
Downloads
40
Comments
0

2 Embeds 363

http://www.diemesleno.com.br 362
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Desenvolvimento para tv digital interativa [ dia 3] Desenvolvimento para tv digital interativa [ dia 3] Presentation Transcript

  • GingaMS Dia 3Desenvolvimento para TV Digital Interativa Diemesleno Souza Carvalho Campo Grande - MS
  • 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.
  • 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.
  • 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.
  • 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 selecione o arquivo ‘video.mp4’.
  • 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.
  • Aplicação NCL Pura3 - Dentro do cabeçalho ‘<head>’, defina uma regionBase:<regionBase> <region id="rgFundo" width="100%" height="100%" /></regionBase>
  • Aplicação NCL Pura4 - Ainda dentro do cabeçalho, defina um descriptorBase:<descriptorBase> <descriptor id="descVideo" region="rgFundo" /></descriptorBase>
  • 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" />
  • 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%" left="30%" top="30%” id="rgButton"/></regionBase>
  • Aplicação Ginga-NCL5 - Adicione um descriptorBase<descriptorBase> <descriptor id="dsButton" region="rgButton" focusIndex="0"/></descriptorBase>
  • Aplicação Ginga-NCL6 - Abra um connectorBase<connectorBase>
  • Aplicação Ginga-NCL7 - Adicione um causalConnector<causalConnector id="onBeginStart"> <simpleCondition role="onBegin"/> <simpleAction role="start"/></causalConnector>
  • Aplicação Ginga-NCL8 - Adicione outro causalConnector<causalConnector id="onEndStop"> <simpleCondition role="onEnd"/> <simpleAction role="stop" max="unbounded"/></causalConnector>
  • 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>
  • 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>
  • 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>
  • 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"/><area id="area03" begin="17s" end="20s"/><area id="area04" begin="24s" end="27s"/><area id="areaTotal" begin="35s"/>
  • 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="timer"/> <bind role="start" component="clicks"/></link>
  • 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>
  • Aplicação Ginga-NCL26 - Adicionando a interface 2.<link xconnector="onBeginStart"> <bind role="onBegin" component="timer" interface="area02"/> <bind role="start" component="button"/></link>
  • Aplicação Ginga-NCL27 - Adicionando a interface 3.<link xconnector="onBeginStart"> <bind role="onBegin" component="timer" interface="area03"/> <bind role="start" component="button"/></link>
  • Aplicação Ginga-NCL28 - Adicionando a interface 4.<link xconnector="onBeginStart"> <bind role="onBegin" component="timer" interface="area04"/> <bind role="start" component="button"/></link>
  • 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>
  • Aplicação Ginga-NCL30 - Adicionando interface 2.<link xconnector="onEndStop"> <bind role="onEnd" component="timer" interface="area02"/> <bind role="stop" component="button"/></link>
  • Aplicação Ginga-NCL31 - Adicionando interface 3.<link xconnector="onEndStop"> <bind role="onEnd" component="timer" interface="area03"/> <bind role="stop" component="button"/></link>
  • Aplicação Ginga-NCL32 - Adicionando interface 4.<link xconnector="onEndStop"> <bind role="onEnd" component="timer" interface="area04"/> <bind role="stop" component="button"/></link>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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’.
  • 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 = attribution, name = counter,}
  • 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
  • Aplicação Ginga-NCL41 - Set os stributos para o post do evento.event.post { class = ncl, type = attribution, name = inc, action = stop, value = counter,}
  • 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)
  • 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;private HStaticText labelMeio;private HStaticText labelAbaixo;private HScene scene;
  • Aplicação Ginga-J18 - Clique no ‘problema’ para resolver as dependências.import org.havi.ui.HScene;import org.havi.ui.HStaticText;
  • 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 { this.contexto.notifyDestroyed();}
  • Aplicação Ginga-J21 - Adicione a notificação do contexto ao método destroyXlet.public void destroyXlet(boolean arg0) throws XletStateChangeException { this.contexto.notifyDestroyed();}
  • Aplicação Ginga-J22 - Adicione a variável ‘contexto’ no método initXlet.public void initXlet(XletContext contexto) throws XletStateChangeException {}
  • Aplicação Ginga-J23 - Dentro do método initXlet adicione:public void initXlet(XletContext contexto) throws XletStateChangeException { this.contexto = contexto;}
  • 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());}
  • Aplicação Ginga-J25 - Clique no ‘problema’ para resolver a dependência.import org.havi.ui.HScreen;import org.havi.ui.HSceneFactory;
  • 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));}
  • 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 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);}
  • 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));}
  • 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);}
  • Aplicação Ginga-J31 - No método do startXlet adicione:public void startXlet() throws XletStateChangeException { this.scene.setVisible(true); }
  • 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’ do projeto Ginga-JXlet: br.com.gingams.GingaMSXlet
  • 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 ideia para as universidades.• Promover eventos.• Se divertir.
  • 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
  • Dúvidas.
  • Obrigado• Contato: – www.diemesleno.com.br – diemesleno@gmail.com – @diemesleno
  • Fim do 3 dia GingaMS