[Livro] NCL: Nested Context Language

Capítulo
6
NCL – Nested Context Language
Elaine Cecília Gatto
Abstract
NCL, Nested Context Language is the programming language used for developing
interactive applications for the Brazilian Digital TV system. Created in the laboratory
at PUC-RIO Telemedia, NCL is a simple, declarative, based on a conceptual model,
much like HTML, XHTML, and other languages of any kind. NCL should be supported
by all devices of digital TV reception of the current system nipo-Brazilian, and
applications for mobile devices must necessarily be implemented in NCL. This chapter
is dedicated to the presentation, orientation and introduction to software development
with NCL, covering the basic steps that are fundamental and essential to a successful
creation of interactive applications for digital TV in Brazil.
Resumo
NCL, Nested Context Language, é a linguagem de programação utilizada para o
desenvolvimento de aplicações interativas para o sistema brasileiro de TV Digital.
Criada na PUC-RIO pelo laboratório TELEMIDIA, NCL é uma linguagem simples,
declarativa, baseada em um modelo conceitual, muito parecida com HTML, XHTML, e
outras linguagens do tipo. NCL deve ser suportada por todos os dispositivos de
recepção de TV Digital do atual sistema nipo-brasileiro, e aplicativos para dispositivos
portáteis devem obrigatoriamente ser implementados em NCL. Este capítulo se dedica à
apresentação, orientação e iniciação ao desenvolvimento de software com NCL,
abordando os passos básicos, fundamentais e essenciais para uma criação bem
sucedida de aplicações interativas para a TV Digital brasileira.
6.1. Introdução
NCL – Nested Context Language ou Linguagem de Contextos Aninhados – é uma
linguagem declarativa baseada no modelo conceitual NCM – Nested Context Model ou
Modelo de Contextos Aninhados – ambas criadas pela PUC-RIO (Pontifícia
Universidade Católica do Rio de Janeiro). NCM representa conceitos estruturais,

eventos e relacionamentos entre os dados, definindo as regras estruturais e operações
sobre os dados para manipulação e atualização das estruturas. A NCL define como os
objetos de mídia são estruturados e relacionados, no tempo e no espaço, é uma
linguagem de contexto aninhado, uma linguagem de marcação, tipo XHTML –
eXtensible Hypertext Markup Language ou Linguagem de Marcação de Hipertexto
Extensível – e utiliza conceitos de nós e elos, aplicados em documentos hipermídia.
6.1.1 Perfis Ncl
Cada perfil NCL é composto por um conjunto de módulos da linguagem NCL,
permitindo a criação de linguagens de acordo com as necessidades dos usuários. O
objetivo deste capítulo não é apresentar com detalhes como essa construção é feita,
entretanto, mais informações sobre o assunto podem ser obtidas em SOARES (2009),
ABNT NBR 15606-2 (2007) e ITU-T H.761 (2009). A linguagem NCL para TV Digital
é dividida em três perfis diferentes: EDTV, BDTV e CausalConnector. As aplicações
desenvolvidas aqui utilizam o perfil EDTV.
6.1.2 Ferramentas Necessárias
1. Eclipse IDE: Esta ferramenta pode ser obtida gratuitamente no link abaixo. É
fundamental para a construção do código NCL, juntamente com o plugin, item 2.
http://www.eclipse.org/downloads/packages/eclipse-ide-cc-developers-includes-incubating-
components/indigor
2. NCL Eclipse: O plugin NCL para a IDE Eclipse, pode ser obtido gratuitamente
no link abaixo e permite que códigos NCL sejam escritos mais facilmente. A
instalação e configuração do plugin também se encontram no link.
http://laws.deinf.ufma.br/ncleclipse/installation.html
3. VMWare Player: É necessário para executar a máquina virtual Ginga-NCL e
pode ser obtido gratuitamente no link abaixo.
http://www.vmware.com/br/products/desktop_virtualization/player/overview.html
4. Ginga-NCL Virtual Set-top Box: É a máquina virtual Ginga-NCL, uma
implementação de referência para testes de aplicações. Cada fabricante pode
implementar a sua versão do Ginga-NCL, basta seguir as orientações contidas
nas normas brasileiras, ABNT, para TV Digital. Pode ser obtido gratuitamente
no link abaixo – é necessário apenas que seja feito o cadastro no site.
http://www.softwarepublico.gov.br/ver-comunidade?community_id=1101545
5. SSH Secure File Transfer: É utilizado para transferir os arquivos – códigos
NCL – do seu desktop ou notebook para dentro da máquina virtual Ginga-NCL e
pode ser obtido gratuitamente no link abaixo.
http://www.baixaki.com.br/download/ssh-secure-shell.htm
6. Scite – Compilador Lua: Pode ser obtido gratuitamente no link abaixo. É
utilizado para escrever os códigos LUA que é a linguagem de script padrão para
a NCL.
http://www.scintilla.org/SciTE.html

6.1.3. Estrutura Completa de um Documento NCL
1 <?xml version="1.0" encoding="ISO-8859-1"?>
2
3 <ncl id="teste" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">
4
5 
6 <head>
7
8 
11 <importedDocumentBase> </importedDocumentBase>
12
13 
17 <ruleBase> </ruleBase>
18
19 
22 <transitionBase> </transitionBase>
23
24 
28 <connectorBase> </connectorBase>
29
30 
34 <regionBase> </regionBase>
35
36 
38 <descriptorBase> </descriptorBase>
39
40 
41 <meta content="" name=""/>
42 <metadata/>
43
44 
45 </head>
46
47 
48 <body>
49
50 
52 <port id="" component=""/>
53
54 
55 <media id=""></media>
56
57 
58 <context id="">
59 <port id="" component="" />

60 </context>
61
62 
64 <switch id=""> </switch>
65
66 
68 <property name=""/>
69
70 
71 <meta content="" name=""/>
72 <metadata/>
73
74 
76 <link xconnector=""></link>
77
78 
79 </body>
80
81 
82 </ncl>
Listagem 6.1: Estrutura completa de um documento NCL.
Nesta linha de código
<ncl id="main" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">
está sendo definido o nome do documento NCL como main e o perfil que será
utilizado como o perfil EDTV. Normalmente, o NCL Eclipse, gera esta linha
automaticamente, assim como a linha:
<?xml version="1.0" encoding="ISO-8859-1"?>
Os outros elementos, o desenvolvedor insere conforme a necessidade do
documento que está sendo desenvolvido. Cada um dos itens na estrutura completa do
documento NCL, apresentados acima, é basicamente um conceito da linguagem NCL.
6.1.4 Executando o primeiro documento NCL
O código abaixo mostra como executar um vídeo em NCL. Observe que, para tocar um
vídeo, é necessário utilizar quatro conceitos básicos de NCL: regiões, descritores, portas
e mídias.
2 
3 <ncl id="main" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">
5 <head>
6 <regionBase>
7 <region id="rgTV" zIndex="1">
8 <region id="rgVideo" top="10" left="10"
width="600" height="480" zIndex="2"/>
9 </region>
10 </regionBase>
11 <descriptorBase>
12 <descriptor id="dVideo" region="rgVideo"/>
13 </descriptorBase>

14 </head>
15 <body>
16 <port id="p" component="Video"/>
17 <media id="Video" src="media/videos/video.mpg"
descriptor="dVideo"/>
18 </body>
19 </ncl>
Listagem 6.2: Código NCL para executar um vídeo.
No cabeçalho são definidas duas regiões em <regionBase>, uma para a tela da
TV e outra para a exibição do vídeo – nem sempre o vídeo vai ocupar toda a tela de TV,
por isso duas regiões. A região destinada à TV possui os atributos id, para identificação
da região e zIndex, que será melhor explicado na seção de regiões. A região destinada à
apresentação do vídeo, além dos atributos id e zIndex, possui também os atributos para
definição do tamanho do vídeo, width e height, e também do eixo x e y, left e top,
para indicar em que ponto da tela o vídeo será apresentado.
É definido também no cabeçalho apenas uma descrição de mídia em
<descriptorBase>, pois apenas um objeto de mídia, no caso o vídeo, será apresentado
na tela. Observe que o elemento <descriptor> possui dois atributos: id que é a
identificação do vídeo, e region que é a região em que o vídeo será apresentado.
No corpo do código tem-se os elementos <port> e <media>, ambos com seus
respectivos atributos. <port> permite que o video seja incializado e possui o atributo
id, que é a identificação da porta, e o atributo component, que é o componente que será
inicializado, no caso, o Video, que por sua vez é definido em <media>.
<media> possui o atributo id, que é a sua identificação, e o atribuito src, o qual
contém o caminho, o local, em que o objeto de mídia está salvo e a partir do qual, o
NCL irá buscar a mídia. Nota-se então que NCL não é muito diferente de HTML e
XHTML. Assim como essas linguagens, NCL possui elementos, tags e seus respectivos
atributos.
Para executar este código, primeiro deve-se ter instalados e configurados no
computador, os softwares relacionados em Ferramentas Necessárias. Este código foi
escrito na IDE Eclipse com o plugin NCL Eclipse, conforme pode ser verificado na
Figura 6.1. No lado esquerdo da Figura 6.1, encontra-se a estrutura da aplicação NCL,
em Project Explorer, que normalmente contém uma pasta com o projeto e dentro, outras
pastas com as mídias que serão utilizadas.
Além disso, contém um projeto principal, chamado main.ncl e um outro arquivo
.ncl chamado ConnectorBase.ncl, que será explicado com maiores detalhes nas
próximas seções. Em seguida, basta seguir os passos apresentados no portal do software
público no seguinte link:
http://www.softwarepublico.gov.br/dotlrn/clubs/ginga/gingancl/xowiki/gingancl_vm.html
Se o computador estiver conectado a uma rede Wi-Fi, provavelmente haverá
problemas em relação ao acesso remoto. Para resolver isto, basta entrar em Painel de
ControleRede e InternetConexões de Rede, selecionar VMware Network Adapter
Vmnet e alterar o IPV4 para IP Dinâmico. O código NCL da Listagem 6.2, executando, é
apresentado na Figura 6.2.

Figura 6.1. Código NCL na IDE Eclipse
Figura 6.2. Código NCL executando na máquina virtual Ginga
6.2. Regiões
É o local que deve ser definido para exibição das mídias. Primeiro deve-se definir a
região da tela de TV, e em seguida, definir as regiões de cada objeto de mídia (vídeo,
figura, legenda, etc). É importante, antes de programar, fazer a prototipação das telas
que a aplicação terá. Regiões possuem atributos que podem ser modificados e são

listados a seguir. A Figura 6.3 ilustra esses atributos. O código da Listagem 6.3 mostra a
utilização dos atributos da Região e a Figura 6.4 apresenta o código executando.
1. id: identificador da região;
2. device: classe de dispositivo (tv fixa, portátil ou móvel);
3. left: coordenada x do lado esquerdo;
4. right: coordenada x do lado direito;
5. top: coordenada y do lado superior;
6. bottom: coordenada y do lado inferior;
7. height: altura;
8. width: largura;
9. zindex: número entre 0 e 25 que define a camada da região no eixo z. As
camadas se sobrepõem, assim a camada com o maior número, é aquela que
estará “por cima” das outras.
10. title: título da região.
Figura 6.3. Representação gráfica de regiões
5 <head>
6 <regionBase>
8 <region id="rgVideo" top="0" left="0" height="480"
width="600" zIndex="2"/>
9 <region id="rgMenu" top="50" left="50" height="250"
width="150" zIndex="3">
10 <region id="rgBotao1" top="0" height="50"

width="100"/>
width="100"/>
width="100"/>
width="100"/>
14 </region>
15 </region>
16 </regionBase>
17 <descriptorBase>
19 <descriptor id="dMenu" region="rgMenu"/>
20 <descriptor id="dBotao1" region="rgBotao1"/>
25 </head>
26 <body>
27 <port id="pVideo" component="Video"/>
28 <port id="pBotao1" component="Botao1"/>
29 <port id="pBotao2" component="Botao2"/
33 <media id="Botao1" src="media/imagens/botao_amarelo.png"
descriptor="dBotao1"/>
34 <media id="Botao2" src="media/imagens/botao_vermelho.png"
35 <media id="Botao3" src="media/imagens/botao_azul.png"
36 <media id="Botao4" src="media/imagens/botao_verde.png"
37 </body>
38 </ncl>
Listagem 6.3: Colocando um menu junto ao vídeo
Na listagem 6.3, são inseridos ao projeto, 4 imagens do tamanho 100x50 pixels,
do tipo .png, cada uma com uma cor dos botões padrões de TV Digital: amarelo,
vermelho, azul e verde. Como trata-se de um menu, este poderá ser utilizado para
interatividade, de acordo com as cores.
Observe que para cada botão foi definido um elemento <region>,
<descriptor>, <media> e <port>. Neste exemplo, ainda não está sendo utilizado o
conceito de elos, por este motivo foi necessário criar uma porta para cada mídia. Isto
permite que as imagens e os vídeos sejam inicializados ao mesmo tempo, assim que a
aplicação é startada. Nas próximas seções veremos como inicializar objetos de mídia
sem a necessidade de uma porta para cada uma.
Conforme pode ser visulizado na Figura 6.4, os botões estão “em cima” do
vídeo. No código temos zIndex=“1” para a região da TV, zIndex=“2” para o vídeo e
zIndex=“3” para o menu, e por isso, os botões estão “por cima” do vídeo. Se essa
ordem for alterada, os botões não aparecerão pois o vídeo estará na camada acima deles.

Figura 6.4. Vídeo com Menu, execução da Listagem 6.3
6.3. Objetos de mídia
Uma mídia é sempre uma imagem, um vídeo, um html, etc. Um objeto de mídia também
pode ser chamado de nó de mídia. Mídias também possuem atributos:
1. id: identificador único;
2. src: endereço do local onde a mídia está armazenada (arquivos locais, remotos
ou streaming);
3. type: tipo MIME da mídia;
4. descriptor: identificador do descritor (descriptor);
5. refer: referência a um outro nó de mídia (reúso);
6. instance: usado apenas quando refer é utilizado, valores: new, instSame,
gradSame.
NCL utiliza MimeTypes, que é uma cadeia de caracteres que define a classe da mídia e
o tipo de codificação. Exemplos:
1. Áudio: audio/mpeg: .mp1, .mp2, .mp3;
2. Vídeo: video/mpeg: .mp2, .mpeg, .mpg, .mpe;
3. Imagem: image/png: .png;
4. Texto: text/html: .htm, .html, .xhtml.
6.4. Descritores
São responsáveis pela configuração de como os objetos de mídia deverão ser
apresentados. Os atributos dos descritores são:
1. id: identificador do descritor;

2. region: identificador da região a ser utilizada por esta mídia;
3. explicitDur: define a duração do objeto de mídia em segundos;
4. freeze: identifica o que acontece ao final da apresentação do objeto de mídia
associado ao descritor (true/false);
5. player: identifica a ferramenta de apresentação a ser utilizada para exibir o
objeto de mídia.
6.4.1 Parâmetros reservados para áudio:
1. soundLevel: “0” = mute; “0,5” ou “50%” = metade; “1” ou “100%”= máximo;
2. balanceLevel: valores entre 0 e 1 ou entre 0% e 100%;
3. trebleLevel: valores entre 0 e 1 ou entre 0% e 100%;
4. bassLevel: valores entre 0 e 1 ou entre 0% e 100%.
6.4.2 Parâmetros reservados para mídia visual:
1. top: topo, valores % ou pixels;
2. bottom: base, valores % ou pixels;
3. left: esquerda, valores % ou pixels;
4. right: direita, valores % ou pixels;
5. width: largura, valores % ou pixels;
6. height: altura, valores % ou pixels.
1. location: posição do objeto de mídia em left e top, valores: % ou pixels;
2. size: dimensões do objeto de mídia em width e height, valores: % ou pixels;
3. bounds: posição e dimensões do objeto de mídia em left, top, width e height,
valores: % ou pixels;
4. zIndex: posição da região no eixo z (sobreposições de regiões);
5. background: cor de fundo (white, black, silver, gray, red, maroon, fuchsia,
purple, lime, green, yellow, olive, blue, navy, aqua, teal ou transparent);
6. visible: true ou false (visível ou invisível);
7. transparency: grau de tranparência, valores entre 0 e 1 ou %.
1. fit: recebe como valor fill, hidden, meet, meetBest ou slice;
2. fill: redimensiona o conteúdo do objeto de mídia para que toque todas as
bordas da região, distorce se necessário;

3. hidden: se a mídia for maior ou menor que a região, a área restante é preenchida
com a cor de fundo;
4. meet: redimensiona o conteúdo do objeto de mídia mantendo suas proporções
até atingir uma das bordas da região. Espaços vazios são preenchidos com a cor
de fundo;
5. meetBest: o objeto é redimensionado até o dobro do seu tamanho original;
6. slice: redimensiona o conteúdo do objeto de mídia mantendo suas proporções
até que toda a região seja preenchida. Corta partes do objeto se necessário.
6.4.5 Parâmetros reservados para mídia textual:
1. scroll: barras de rolagem. Valores: none, horizontal, vertical, both, automatic;
2. style: folha de estilo;
3. fontColor: cor da fonte;
4. fontFamily: família da fonte;
5. fontSize: tamanho da fonte em pontos;
6. fontVariant: variação de fonte, valores: normal ou small-caps (letras
maiúsculas pequenas);
7. fontWeight: valores normal ou bold (negrito).
6.5. Elos e Conectores
Os elos, ou links, associam nós através de conectores, que definem a semântica da
associação entre os nós, o relacionamento de sincronismo propriamento dito entre
interfaces de objetos de uma aplicação NCL e o seu comportamento é definido pelo
conector que o elo utiliza.
O conector é aquele que define a ação: iniciar, parar, repetir, ir para outro ponto
do vídeo, setar variáveis, etc. Uma condição sempre deve ser satisfeita para que ações
possam ser disparadas.
Exemplificando, podemos ler e entender da seguinte forma: “Quando
condição/evento, então ação;Quando algum objeto ligado ao papel onBegin iniciar,
inicia também algum objeto ligado ao papel start”. Para esta ação acontecer, além do
elo, é necessário o conector. Abaixo são listados os atributos do elemento link (elo –
elemento <link>):
1. id: identificação;
2. xconnector: conector, da base de conectores, que será utilizado.
6.6. Tocando um vídeo com menu utilizando conectores
A Listagem 6.3 é reapresentada na Listagem 6.4. Desta vez, os botões serão
inicializados usando um elo ao invés de portas. Os elos se comunicam com os
conectores da base de conectores, arquivo ConnectorBase.ncl. Por este motivo, sempre
ao criar um novo projeto NCL na IDE Eclipse, esse arquivo é gerado automaticamente.

O arquivo ConnectorBase.ncl contém vários conectores prontos para ser utilizados em
diversas ações, entretanto os desenvolvedores podem criar os seus próprios conectores.
A Listagem 6.4 utilizará a ação start e stop: “ao iniciar o vídeo, inicie também os quatro
botões, e ao parar o vídeo, pare também os quatro botões”.
5 <head>
6 <regionBase>
8 <region id="rgVideo" top="0" left="0" height="480"
9 <region id="rgMenu" top="50" left="50" height="250"
width="100"/>
width="100"/>
width="100"/>
width="100"/>
14 </region>
15 </region>
16 </regionBase>
17 <descriptorBase>
19 <descriptor id="dMenu" region="rgMenu"/>
25 <connectorBase>
26 <importBase documentURI="ConnectorBase.ncl" alias="cb"/>
27 </connectorBase>
28 </head>
29 <body>
30 <port id="pVideo" component="Video"/>
32 <media id="Botao1" src="media/imagens/botao_vermelho.png"
33 <media id="Botao2" src="media/imagens/botao_verde.png"
34 <media id="Botao3" src="media/imagens/botao_amarelo.png"
35 <media id="Botao4" src="media/imagens/botao_azul.png"
36 <link id="inicio" xconnector="cb#onBeginStartN">
37 <bind role="onBegin" component="Video"/>
38 <bind role="start" component="Botao1"/>
42 </link>
43 <link id="fim" xconnector="cb#onEndStopN">

44 <bind role="onEnd" component="Video"/>
45 <bind role="stop" component="Botao1"/>
49 </link>
50 </body>
51 </ncl>
Listagem 6.4: Iniciando um video e quatro imagens usando elos e conectores
Observe no código que existem dois elos, um para iniciar as mídias e outro para
parar a exibição das mídias. Os conectores da base de conectores que forem utilizados,
são apresentados no trecho de código abaixo:
<causalConnector id="onBeginStartN">
<simpleCondition role="onBegin"/>
<simpleAction role="start" max="unbounded" qualifier="par"/>
</causalConnector>
<causalConnector id="onEndStopN">
<simpleCondition role="onEnd"/>
<simpleAction role="stop" max="unbounded" qualifier="par"/>
</causalConnector>
Ambos os conectores acima são do tipo causais de 1 para N – uma mídia para
várias mídias. onBegin é ativado por um nó de contexto, de alternativa, de mídia ou
âncora de um nó de mídia. A ação resultante é a inicialização dos N nós a partir do
primeiro. onEnd é idêntico a onBegin, a diferença é que ao invés de iniciar, os nós serão
finalizados.
Observe que o id do elemento <causalConnector> é usado no <xconnector>
do elemento link: <link id="fim" xconnector="cb#onEndStopN"> e
<causalConnector id="onEndStopN">. É dessa forma que elos e conectores se
comunicam. Os elos dizem que ao iniciar (onBegin) o vídeo, incie também as imagens
(start), e ao parar o video (onEnd) pare também as imagens (stop).
<simpleCondition role="onBegin"/> é uma condição simples em que a
regra (role) é começar o nó. <simpleAction role="start" max="unbounded"
qualifier="par"/> é uma ação simples em que a regra (role) é iniciar o nó. max é a
cardinalidade, o número máximo de objetos que podem ser associados, e o valor
unbounded é quando não há limite. qualifier define se as ações devem ser disparadas
em paralelo (par) ou em sequência (seq).
Existem ainda mais atributos e elementos filhos para os conectores e elos que
podem ser conferidos em SOARES.
6.7. Interatividade e navegação de teclas
Será inserido no código NCL da Listagem 6.4, a navegação por teclas e a interatividade.
Quando o usuário selecionar um dos botões, o seguinte irá ocorrer:

1. Botão vermelho (F1): redimensiona o vídeo para um tamanho menor e em outra
região da tela;
2. Botão verde (F2): apresenta uma legenda;
3. Botão amarelo (F3): pára a legenda e volta o video ao normal;
4. Botão azul (F4): pára a exibição dos botões coloridos e mostra um botão preto;
5. Botão preto (ENTER): volta a exibição dos botões coloridos.
Para redimensionar o vídeo, é necessário definir as propriedades da mídia na
declaração da mídia. As propriedades do vídeo são na verdade o tamanho e o ponto x e
y da tela onde o video começa. O trecho de código a seguir mostra como isso deve ser
feito. Para o topo, a esquerda, a altura e largura, são definidas as propriedades com o
elemento filho do elemento <media>, <property> que possui o atributo name. Dessa
forma, os valores dessas propriedades poderão ser alterados no programa, no momento
em que o usuário selecionar o botão vermelho.
<media id="Video" src="media/videos/video.mpg" descriptor="dVideo">
<property name="top"/>
<property name="left"/>
<property name="width"/>
<property name="height"/>
</media>
Para a navegação de teclas, será necessário adicionar atributos ao elemento
<descriptor> de cada botão, como apresentado no trecho de código abaixo:
<descriptorBase>
<descriptor id="dVideo" region="rgVideo"/>
<descriptor id="dMenu" region="rgMenu"/>
<descriptor id="dBotao1" region="rgBotao1" focusIndex="1"
moveUp="4" moveDown="2" focusBorderColor="aqua"
focusBorderWidth="3" selBorderColor="white"/>
</descriptorBase>
Os atributos são descritos abaixo:
1. focusIndex: índice de navegação do elemento;
2. focusBorderColor: cor da borda;
3. focusBorderWidth: espessura da borda;

4. moveUp: índide de navegação do elemento. Quando a tecla para cima for
pressionada, quem estará com o foco? O elemento cujo índice for indicado aqui;
5. moveDown: índide de navegação do elemento. Quando a tecla para baixo for
pressionada, quem estará com o foco? O elemento cujo índice for indicado aqui;
6. selBorderColor: cor de borda quando enter for pressionado.
A Figura 6.5 ilustra como focusIndex deve ser usado junto à moveUp e moveDown
quando se tem quatro itens no menu.
moveUp = 4
focusIndex = 1
moveDown = 2
Botão 1
Vermelho
moveUp = 1
focusIndex = 2
moveDown = 3
Botão 2
Verde
moveUp = 2
focusIndex = 3
moveDown = 4
Botão 3
Amarelo
moveUp = 3
focusIndex = 4
moveDown = 1
Botão 4
Azul
Figura 6.5. Navegação de teclas para quatro itens de menu
No código da Listagem 6.4 será adicionado o seguinte trecho de código para
permitir que, quando o usuário aperte o botão vermelho, o vídeo seja redimensionado:
<link id="vermelho" xconnector="cb#onKeySelectionSetN">
<bind role="onSelection" component="Botao1">
<bindParam name="keyCode" value="RED"/>
</bind>
<bind role="set" component="Video" interface="top">
<bindParam name="var" value="100"/>
</bind>
<bind role="set" component="Video" interface="left">
</bind>
<bind role="set" component="Video" interface="width">
</bind>
<bind role="set" component="Video" interface="height">
</bind>
</link>
onKeySelectionSetN permitirá que, ao pressionar uma tecla, uma ou mais
propriedades de uma mídia sejam setadas: onKey = na tecla, Selection = seleção, SetN
= setar uma ou mais propriedades, keyCode = código da tecla, value = valor. No código
verifica-se que para o Video são alterados os valores das propriedades top, left, width
e height usando o atributo interface, e que foram definidos na declaração da mídia.
Pode-se ler da seguinte forma: ao selecionar o Botão 1 que tem o código de tecla F1

(correspondente à cor vermelha), altere os valores de x, y, altura e largura do vídeo. O
connector para este elo é apresentado abaixo:
Figura 6.6. Vídeo com Menu, execução da Listagem 6.4
<causalConnector id="onKeySelectionSetN">
<connectorParam name="keyCode"/>
<connectorParam name="var"/>
<simpleCondition role="onSelection" key="$keyCode"/>
<simpleAction role="set" value="$var" max="unbounded"
qualifier="par"/>
</causalConnector>
Figura 6.7. Video redimensionado após usuário apertar a tecla vermelha
Note que <connectorParam> tem o atributo name que coincide com o utilizado
em <bindParam> no elemento <link>, esses são os parâmetros do código que serão

utilizados e modificados (a tecla pressionada e o valor da posição e tamanho do video).
O símbolo $ indica que var e keyCode são variáveis. A Figura 6.6 apresenta os botões
do menu com o focusIndex e a Figura 6.7 apresenta o que acontece na tela da TV
quando o usuário aperta a tecla vermelha.
Para apresentar uma legenda devemos inserir esta mídia no código, assim como
o seu descritor e região que será apresentada, conforme códigos abaixo:
<region id="rgLegenda" bottom="50" left="50" height="80" width="300"
zIndex="4"/>
<descriptor id="dLegenda" region="rgLegenda"/>
<media id="Legenda" src="media/legendas/legenda.html"
descriptor="dLegenda"/>
Feito isto, é preciso agora linkar as ações, isto é, quando o usuário apertar a tecla
verde (F2), a legenda deverá ser inicializada e apresentada na região destinada. Portanto,
um link com uma ação de tecla deve ser criado, conforme mostra o código abaixo. Este
link é mais simples que o apresentado anteriormente, para fazer as alterações no vídeo:
onKey = na tecla, Selection = selecionada, Start = inicie, component = o componente
botao 2 , value = com o valor verde, start = então inicie, component = o componente
de mídia Legenda. O resultado pode ser verificado na Figura 6.8.
<link id="verde" xconnector="cb#onKeySelectionStart">
<bindParam name="keyCode" value="GREEN"/>
</bind>
<bind role="start" component="Legenda"/>
</link>
Figura 6.8. Ao aperter a tecla verde, a legenda aparece
É importante lembrar que esses arquivos de mídia devem estar nas pastas do
projeto. O botão amarelo vai parar a legenda e voltar o vídeo ao normal. Este item dará
mais trabalho, pois é necessário alterar os valores das propriedades do vídeo e ao

mesmo tempo parar a exibição da legenda. Portanto, será necessário usar um conector e
um elo mais elaborados. Não será necessário adicionar nenhuma mídia, então,
basicamente, só será adicionado o código para fazer esta ação:
<link id="amarelo" xconnector="cb#onKeySelectionStopSetN">
<bindParam name="keyCode" value="YELLOW"/>
</bind>
</bind>
</bind>
</bind>
</bind>
<bind role="stop" component="Legenda"/>
</link>
O link utiliza o conector onKeySelectionStopSetN, que pode ser traduzido
como “na tecla selecionada, pare um objeto de mídia e altere as N configurações do
outro objeto de mídia”. Para top, left, width e height, que são as propriedades da
mídia Video, é utilizada a regra (role) set e para a mídia Legenda é utilizada a regra
stop (parar). Os valores são passados para as propriedades pelo atributo value, e o
atributo interface, permite que o elemento <media> e o elemento <link>
comuniquem-se.
O botão azul, ao ser pressionado, parará a exibição dos botões coloridos e
apresentará um botão preto que, ao ser pressionado (tecla enter) voltará a exibição
normal dos botões coloridos. Para que isso ocorra, serão adicionados a região, o
descritor, a mídia para o botão preto e o elo, como a seguir:
<region id="rgBotao5" top="50" left="50" height="250" width="150"
zIndex="4"/>
focusBorderColor="aqua" focusBorderWidth="3" selBorderColor="white"/>
<media id="Botao5" src="media/imagens/botao_preto.png"
<link id="azul" xconnector="cb#onKeySelectionStopNStartN">
<bindParam name="keyCode" value="BLUE"/>
</bind>
<bind role="stop" component="Botao1"/>
<bind role="start" component="Botao5"/>
</link>

O elo onKeySelectionStopNStartN pode ser lido como “na tecla selecionada,
pare N mídias e inicie N mídias”, que é a situação do botão azul. A Figura 6.9 apresenta
o resultado:
Figura 6.9. Ao aperter a tecla azul, o botão preto é exibido.
Agora será feito processo inverso, quando pressionar o botão preto, os botões
coloridos voltam a ser exibidos. O elo a ser utilizado é muito parecido com o anterior,
onkeySelectionStartNStopN. Será colocado como regra stop o botão preto e regra
start os botões coloridos. Além disso, o código da tecla agora será o ENTER, pois não
há mapeamento para outras cores além das pré-definidas (vermelho, verde, amarelo e
azul). Abaixo é apresentadoo código para o elo:
<link id="preto" xconnector="cb#onKeySelectionStartNStopN">
<bindParam name="keyCode" value="ENTER"/>
</bind>
</link>
Pronto, a aplicação interativa com a utilização de teclas está pronta. Com isto,
foi possível demonstrar os conceitos básicos da linguagem NCL. Existem muitos
recursos avançados que não são abordados aqui, mas podem ser encontrados na
referências deste capítulo. A Listagem 6.5 mostra o código completo da aplicação.
<?xml version="1.0" encoding="ISO-8859-1"?>

<ncl id="main" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">

<head>

<regionBase>
<region id="rgTV" zIndex="1">
<region id="rgVideo" top="0" left="0" height="480"
<region id="rgMenu" top="50" left="50" height="250"
<region id="rgBotao1" top="0" height="50" width="100"/>
<region id="rgBotao2" top="60" height="50" width="100"/>
<region id="rgBotao3" top="120" height="50"
width="100"/>
<region id="rgBotao4" top="180" height="50"
width="100"/>
</region>
<region id="rgLegenda" bottom="50" left="50" height="80"
<region id="rgBotao5" top="50" left="50" height="50"
</region>
</regionBase>

<descriptorBase>
<descriptor id="dVideo" region="rgVideo"/>
<descriptor id="dMenu" region="rgMenu"/>
focusBorderColor="aqua" focusBorderWidth="3"/>
<descriptor id="dLegenda" region="rgLegenda"/>
</descriptorBase>

<connectorBase>
<importBase documentURI="ConnectorBase.ncl" alias="cb"/>
</connectorBase>
</head>

<body>

<port id="pVideo" component="Video"/>

<media id="Video" src="media/videos/video.mpg" descriptor="dVideo">
<property name="top"/>
<property name="left"/>
<property name="width"/>

<bindParam name="keyCode" value="YELLOW"/>
</bind>
</bind>
</bind>
</bind>
</bind>
<bind role="stop" component="Legenda"/>
</link>

<link id="azul" xconnector="cb#onKeySelectionStopNStartN">
<bindParam name="keyCode" value="BLUE"/>
</bind>
</link>

<link id="preto" xconnector="cb#onKeySelectionStartNStopN">
<bindParam name="keyCode" value="ENTER"/>
</bind>
</link>
</body>
</ncl>
Listagem 6.5: Código completo da aplicação
Conclusão
O mercado de trabalho para desenvolvedores de aplicações interativas destinadas ao
sistema brasileiro de TV Digital está começando a despontar. Em breve, faltará mão de
obra qualificada nesta área, não somente no Brasil, mas em todos os países que
adotaram, e irão adotar, o sistema nipo-brasileiro de TV Digital. Agora é o momento de
se qualificar e preparar para as oportunidades que estão por vir. Agências de
publicidade, emissoras de TV e empresas são alguns dos locais que estes
desenvolvedores poderão trabalhar.
Este capítulo introduziu a linguagem NCL aos interessados em investir nesta
área. Os elementos básicos da linguagem foram apresentados conforme o
desenvolvimento da aplicação foi sendo apresentado: <region>, <descriptor>,

<media>, <link>, <port>. Somente com este conhecimento é possível desenvolver
várias aplicações, entretanto, é necessário aprofundar no estudo da linguagem e incluir
nas aplicações, LUA, a linguagem de scripts que permite construir aplicações mais
interessantes e otimizadas. O vídeo da aplicação funcionando pode ser conferido no
youtube:
Referências
SOARES, Luiz Fernando Gomes; BARBOSA, Simone Diniz Junqueira. Programando
em NCL 3.0: desenvolvimento de aplicações para middleware Ginga, TV Digital e
Web. Rio de Janeiro: Elsevier, 2009.
SOARES, Luiz Fernando Gomes; RODRIGUES, Rogério Ferreira; BARBOSA, Simone
Diniz Junqueira. Manual de Construção de Programas Audiovisuais Interativos
Utilizando a NCL 2.3 – Perfil Básico. 1ª edição, Rio de Janeiro: PUC-RIO,
Telemidia, 2006.
ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS. Televisão digital terrestre –
Codificação de dados e especificações de transmissão para radiodifusão digital Parte
2: Ginga-NCL para receptores fixos e móveis – Linguagem de aplicação XML para
codificação de aplicações. ABNT NBR 15606-2:2007. 2ª ed. 27/05/2011.
Codificação de dados e especificações de transmissão para radiodifusão digital Parte
5: Ginga-NCL para receptores portáteis – Linguagem de aplicação XML para
codificação de aplicações. ABNT NBR 15606-5:2008. 2ª ed. 19/04/2011.
Codificação de dados e especificações de transmissão para radiofusão digital Parte 7:
Ginga-NCL – Diretrizes operacionais para as ABNT NBR 15606-2 e ABNT NBR
15606-5. ABNT NBR 15606-7:2011. 1ª ed. 21/03/2011.
GINGA. Disponível em: <http://www.ginga.org.br/>, acessado em 13/10/2011, 14:00
GINGA-NCL. Disponível em <http://www.gingancl.org.br/>, acessado em 13/10/2011,
14:00
NCL. Disponível em <http://www.ncl.org.br/>, acessado em 13/10/2011, 14:00
CLUBE NCL. Disponível em <http://clube.ncl.org.br/>, acessado em 13/10/2011, 14:00
FORUM SBTVD. Disponível em: <http://www.forumsbtvd.org.br/>, acessado em
13/10/2011, 14:00
DTV. Disponível em <http://www.dtv.org.br/>, acessado em 13/10/2011, 14:00.
Sobre a Autora
Bacharel em Engenharia de Computação pelo Centro Universitário de Votuporanga -
UNIFEV. Mestre em Ciência da Computação pela UFSCar - Linha de pesquisa:
Sistemas Distribuídos e Redes - Sistemas Multimídia e Internet - Personalização e

Privacidade em ambiente de TV Digital. Coordenadora do curso de Engenharia de
Computação na USC - Universidade do Sagrado Coração - Bauru/SP. Fundadora e
Coordenadora Geral da comunidade GarotasCPBr – Garotas Campus Party Brasil.
Coordenadora da comunidade Java Noroeste na região de Bauru. Adepta de
comunidades de Software Livre: Java – SOU JAVA – e Linux – FEDORA. Áreas de
Interesse: Mulheres na TI, Redes de Computadores, Java, Redes Sociais,
Desenvolvimento de Software para TV Digital, Web e Dispositivos Portáteis/Móveis.
Lattes: http://lattes.cnpq.br/8559022477811603.

[Livro] NCL: Nested Context Language

Mais conteúdo relacionado

Semelhante a [Livro] NCL: Nested Context Language

Mais de Elaine Cecília Gatto

Último

[Livro] NCL: Nested Context Language