Introdu˘c~ao as Linguagens NCL e Lua ... - midiacom.uff.br · Esta apostila apresenta o middleware...

78
Universidade Federeal Fluminense Semana de Engenharia 2009 Introdu¸ ao ` as Linguagens NCL e Lua: Desenvolvendo Aplica¸ c˜oesInterativaspara TV Digital Autores: Rafael Carvalho 1 Joel Andr´ e Ferreira dos Santos 2 Jean Ribeiro Damasceno 3 Julia Varanda da Silva 4 ebora Christina Muchaluat Saade 5 E-mails: [email protected], (joel, damascon, julia, debora)@midiacom.uff.br 19 de outubro de 2009 1 Peta5 2 Laborat´orioM´ ıdiaCom, Peta5, Departamento de Engenharia de Telecomunica¸ oes 3 Laborat´orioM´ ıdiaCom, Departamento de Engenharia de Telecomunica¸ oes 4 Peta5, Laborat´ orio M´ ıdiaCom, Instituto de Computa¸c˜ ao 5 Laborat´orioM´ ıdiacom, Instituto de Computa¸ ao

Transcript of Introdu˘c~ao as Linguagens NCL e Lua ... - midiacom.uff.br · Esta apostila apresenta o middleware...

Universidade Federeal Fluminense

Semana de Engenharia 2009

Introducao as Linguagens NCL e Lua:Desenvolvendo Aplicacoes Interativas para

TV Digital

Autores:Rafael Carvalho1

Joel Andre Ferreira dos Santos2

Jean Ribeiro Damasceno3

Julia Varanda da Silva4

Debora Christina Muchaluat Saade 5

E-mails: [email protected], (joel, damascon, julia, debora)@midiacom.uff.br

19 de outubro de 2009

1Peta52Laboratorio MıdiaCom, Peta5, Departamento de Engenharia de Telecomunicacoes3Laboratorio MıdiaCom, Departamento de Engenharia de Telecomunicacoes4Peta5, Laboratorio MıdiaCom, Instituto de Computacao5Laboratorio Mıdiacom, Instituto de Computacao

Sumario

1 Introducao 3

2 Middleware 62.1 Linguagem Declarativa X Linguagem Procedural . . . . . . . . . . . . . . . . . . 7

2.1.1 Linguagens Declarativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.1.2 Linguagens Procedurais . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.1.3 Aplicacoes Hıbridas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3 Linguagem NCL 103.1 Introducao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.1.1 Nested Context Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103.1.2 Onde . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103.1.3 Como . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.1.4 O que . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.1.5 Quando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.2 Extensible Markup Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.3 Estrutura de um documento NCL . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.3.1 Cabecalho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.3.2 Corpo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3.4 Definindo a apresentacao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.4.1 Regioes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.4.2 Descritores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.4.3 Pratica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.5 Inserindo os elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.5.1 Mıdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.5.2 Ancoras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.5.3 Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.5.4 Pratica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.6 Organizando o documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.6.1 Contexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.6.2 Portas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.6.3 Pratica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.7 Sincronizando os elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.7.1 Conectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223.7.2 Elos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243.7.3 Pratica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.8 Definindo alternativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283.8.1 Regras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

1

3.8.2 Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4 Linguagem Lua 314.1 Introducao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

4.1.1 Pequeno historico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.1.2 Convencoes Lexicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.1.3 O interpretador de linha de comando . . . . . . . . . . . . . . . . . . . . . 324.1.4 Pratica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.2 Tipos e variaveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334.2.1 Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344.2.2 Variaveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354.2.3 Pratica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

4.3 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.3.1 Aritimeticos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.3.2 Relacionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.3.3 Logicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374.3.4 Concatenacao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384.3.5 Pratica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

4.4 Estruturas de controle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394.4.1 if then else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394.4.2 while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.4.3 repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.4.4 for numerico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.4.5 for generico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

4.5 Saindo de um bloco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.6 Funcoes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

4.6.1 Declaracao e execucao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434.6.2 Numero variavel de argumentos . . . . . . . . . . . . . . . . . . . . . . . . 434.6.3 Retorno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444.6.4 Pratica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

4.7 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454.7.1 Criacao de tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454.7.2 Tamanho de tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464.7.3 Pratica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

5 Integracao NCL-Lua 495.1 Introducao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495.2 Scripts NCLua . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495.3 Modulos NCLua . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

5.3.1 Modulo event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505.3.2 Modulo canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535.3.3 Modulo settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605.3.4 Modulo persistent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

A Exemplos da Apostila 62

B Ferramentas 71B.1 Composer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71B.2 NCL Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

2

Capıtulo 1

Introducao

A TV digital interativa traz inumeras facilidades e oportunidades para os programas de televisao.Com o uso deste sistema, os telespectadores podem ter acesso a jogos e programas interativoscujo conteudo pode ser moldado de acordo com a sua escolha.

O recente sistema brasileiro de TV digital [1] foi definido de forma a possibilitar a criacaode programas com as caracterısticas citadas.

O sistema brasileiro de TV digital possui uma arquitetura em camadas, onde cada camadaoferece servicos para a camada imediatamente superior e usa os servicos da camada imediata-mente inferior, como ilustrado na Figura 2.1.

Figura 1.1: Arquitetura do Sistema Brasileiro de TV Digital.

As camadas sao caracterizadas da seguinte forma:

• Servicos, aplicacoes e conteudo: camada responsavel pela captura e formatacao dos sinaisde audio e vıdeo, bem como a implementacao de servicos interativos na forma de softwarepare serem executadas em uma ou mais entidades de hardware [2].

• Middleware: camada de software que realiza a integracao de todas as subcamadas do sis-tema. O middleware permite que os aplicativos gerados pelas emissoras sejam compatıveiscom todas as plataformas de recepcao desenvolvidas para o padrao de TV digital [3].

• Compressao: camada responsavel pela remocao de redundancias nos sinais de audio evıdeo, reduzindo assim a taxa de bits necessaria para transmitir essas informacoes [2]. Noreceptor, essa camada decodifica os fluxos de audio e vıdeo recebidos. O sistema brasileiro

3

adotou o padrao MPEG-4 HE AAC para compressao de audio e o padrao H.264 paracompressao de vıdeo.

• Multiplexacao: camada responsavel por gerar um unico fluxo de dados contendo o vıdeo,audio e aplicacoes dos diversos programas a serem transmitidos, baseada no padrao MPEG-2 Systems [2].

• Transmissao/Recepcao: tambem denominada de camada fısica, e a camada responsavelpor levar as informacoes digitais da emissora ate a casa do telespectador [4]. O sistemabrasileiro adotou a mesma tecnologia utilizada no sistema japones de TV digital, baseadaem BST-OFDM.

Os programas, ou aplicacoes, para o ambiente de TV digital podem ser criados com o uso dedois paradigmas de programacao distintos: declarativo e procedural. O middleware Ginga [5],adotado como padrao no sistema brasileiro, e subdivido em Ginga-NCL [3, 6], que da suporte asaplicacoes declarativas e Ginga-J [8], que oferece suporte as aplicacoes que utilizam o paradigmaprocedural.

Esta apostila apresenta o middleware Ginga, focando em sua parte declarativa Ginga-NCL,que permite o uso das linguagens NCL (Nested Context Language) [6] e Lua [7] para autoria deaplicacoes para o ambiente de TV digital.

O Capıtulo 2 apresenta uma introducao ao middleware Ginga e discute diferencas entre osparadigmas de programacao declarativo e procedural.

O Capıtulo 3 introduz a linguagem NCL apresentando os principais elementos da linguagematraves de exemplos praticos.

O Capıtulo 4 aborda a linguagem Lua e tambem utiliza exemplos para discutir suas principaiscaracterısticas.

O Capıtulo 5 discute a integracao entre as linguagens NCL e Lua em uma mesma aplicacaopara TV digital.

Os Apendices A e B apresentam os codigos fonte dos exemplos completos discutidos aolongo do texto e tambem abordam as principais ferramentas de autoria de aplicacoes para oGinga-NCL.

4

Referencias

[1] Norma ABNT 15606-2:2007. Televisao digital terrestre - Codificacao de dados e especificacoesde transmissao para radiodifusao digital - Parte 2: Ginga-NCL para receptores fixos e moveis -Linguagem de aplicacao XML para codificacao de aplicacoes.

[2] Marcelo Sampaio de Alencar. Televisao Digital. Editora Erica. Edicao1.[3] Soares, L.F.G; Rodrigues, R.F; Moreno, M.F. Ginga-NCL: The Declarative Environment

of the Brazilian Digital TV System. Journal of the Brazilian Computer Society. Marco, 2007.[4] Mendes, L. L. SBTVD - Uma visao sobre a TV Digital no Brasil. Outubro, 2007. TC

Amazonia, Ano V, Numero 12.[5] Ginga, Brazilian’s Digital TV Middleware. (http://www.ginga.org.br). Acessado em

Outubro de 2009.[6] ITU International Telecommunication Union. Nested Context Language (NCL) and

Ginga-NCL for IPTV services. ITU-T Recommendation H.761. 2009. (http://www.itu.int/rec/T-REC-H.761-200904-P).

[7] R. Ierusalimschy, L. H. de Figueiredo, W. Celes. The evolution of Lua. Proceedings ofACM HOPL III (2007) 2-1–2-26.

[8] G. Souza Filho, L. Leite, C. Batista. Ginga-J: The Procedural Middleware for the Bra-zilian Digital TV System. Journal of the Brazilian Computer Society. Marco, 2007.

5

Capıtulo 2

Middleware

Ginga e o nome do Middleware aberto do Sistema Brasileiro de TV Digital [1]. A arquiteturae as facilidades Ginga foram projetadas para serem aplicadas a sistemas de radiodifusao e re-ceptores de radiodifusao terrestre e a sistemas IPTV [2]. Adicionalmente, a mesma arquiteturae facilidades podem ser aplicadas a sistemas que utilizam outros mecanismos de transporte dedados (como sistema de televisao via satelite ou a cabo).

A finalidade da camada de middleware e oferecer um servico padronizado para as aplicacoes,escondendo as peculiaridades e heterogeneidades das camadas inferiores, tais como, tecnicas decompressao de mıdias, de transporte e de modulacao. Um middleware padronizado facilita aportabilidade das aplicacoes, permitindo que sejam executadas em qualquer receptor digital (ouset-top box) que suporte o middleware adotado. Essa portabilidade e primordial em sistemas deTV digital, pois e impossıvel considerar como premissa que todos os receptores digitais sejamexatamente iguais.

A arquitetura da implementacao de referencia do middleware Ginga, ilustrada na Figuras 2.1,pode ser dividida em tres grandes modulos: Ginga-CC (Common Core) que concentra servicosnecessarios tanto para a maquina de apresentacao quanto para a maquina de execucao; o am-biente de apresentacao Ginga-NCL (declarativo), que suporta o desenvolvimento de aplicacoesdeclarativas; e o ambiente de execucao Ginga-J (procedural), que suporta o desenvolvimentode aplicacoes procedurais. Dependendo das funcionalidades requeridas no projeto de cadaaplicacao, um ambiente de desenvolvimento de aplicacoes sera mais adequado que o outro.

Figura 2.1: Arquitetura do middleware Ginga.

6

Uma aplicacao de TV Digital pode ser declarativa, procedural ou hıbrida. As secoes a seguirapresentam esses conceitos.

2.1 Linguagem Declarativa X Linguagem Procedural

2.1.1 Linguagens Declarativas

As linguagens declarativas sao mais intuitivas (de mais alto nıvel) e, por isso, mais faceis deusar. Elas normalmente nao exigem um perito em programacao. O programador fornece apenaso conjunto de tarefas a serem realizadas, nao estando preocupado com os detalhes de como o exe-cutor da linguagem (interpretador, compilador ou a propria maquina real ou virtual de execucao)realmente implementara essas tarefas. Em outras palavras, a linguagem enfatiza a declaracaodescritiva de um problema ao inves de sua decomposicao em implementacoes algorıtmicas, naonecessitando, em geral, de tantas linhas de codigo para definir certa tarefa. Contudo, as lingua-gens declarativas tem de ser definidas com um foco especıfico. Quando o foco da aplicacao naocasa com o da linguagem, o uso de uma linguagem procedural nao e apenas vantajoso, mas sefaz necessario.

No padrao Brasileiro, o ambiente declarativo Ginga-NCL adotou NCL (Nested Context Lan-guage) [3], uma aplicacao XML, para a autoria de conteudo multimıdia interativo. NCL ebaseada no NCM (Nested Context Model) [4], modelo conceitual para especificacao de docu-mentos hipermıdia com sincronizacao temporal e espacial entre seus objetos de mıdia. NCLpermite ao autor descrever o comportamento espacial e temporal de uma apresentacao mul-timıdia, associar hyperlinks (interacao do usuario) a objetos de mıdia, definir alternativas paraapresentacao (adaptacao) e descrever o leiaute da apresentacao em multiplos dispositivos.

2.1.2 Linguagens Procedurais

O uso de linguagens procedurais (imperativas) usualmente requer um perito em programacao.O programador deve informar ao computador cada passo a ser executado. Pode-se afirmar que,em linguagens procedurais, o programador possui um maior controle do codigo, sendo capaz deestabelecer todo o fluxo de controle e execucao de seu programa. Entretanto, para isso, ele deveser bem qualificado e conhecer bem os recursos de implementacao.

Linguagens procedurais para sistemas de TV digital sao frequentemente usadas em tarefas,como processamento matematico, manipulacao sobre textos, uso do canal de interatividade,controle fino do teclado, animacoes e colisoes para objetos graficos e, de maneira geral, tarefasque necessitem da especificacao de algoritmos e estruturas de dados. Por outro lado, lingua-gens procedurais, apesar de genericas, introduzem uma maior complexidade de programacao edependem de uma base logica que autores de conteudo audio-visual nem sempre possuem.

O ambiente procedural Ginga-J [5] adota a linguagem Java [6], como uma ferramenta paraa criacao de conteudo interativo, tal como os sistemas de TV digital Americano, Europeu eJapones o fizeram.

2.1.3 Aplicacoes Hıbridas

Uma aplicacao de TV digital pode ser declarativa, procedural ou hıbrida. Uma aplicacao hıbridae aquela cujo conjunto de entidades possui tanto conteudo do tipo declarativo quanto procedural.Em particular, as aplicacoes declarativas frequentemente fazem uso de scripts, cujo conteudo ede natureza procedural. Alem disso, uma aplicacao declarativa pode fazer referencia a um codigoJava TV Xlet embutido. Da mesma forma, uma aplicacao procedural pode fazer referencia a

7

uma aplicacao declarativa, contendo, por exemplo, conteudo grafico, ou pode construir e iniciara apresentacao de aplicacoes com conteudo declarativo. Portanto, ambos os tipos de aplicacaono middleware Ginga podem utilizar as facilidades dos ambientes de aplicacao declarativo eprocedural.

O ambiente Ginga-NCL tambem permite o uso de Lua [7], uma linguagem de script, dentrode aplicacoes NCL.

O poder de uma linguagem declarativa e elevado quando integrada com uma linguagemprocedural, passando a ter acesso a recursos computacionais genericos. Essa integracao deveseguir criterios que nao afetem os princıpios da linguagem declarativa, mantendo uma separacaobem definida entre os dois ambientes. O autor da aplicacao usa a forma declarativa sempre quepossıvel e lanca mao da forma procedural somente quando necessario.

A criacao da nova classe de objetos de mıdia Lua, os quais sao chamados de NCLua, e aprincipal via de integracao de NCL a um ambiente procedural, conforme definido em seu perfilpara TV Digital. Por meio de elementos de mıdia, scripts NCLua podem ser inseridos emdocumentos NCL, trazendo poder computacional adicional as aplicacoes declarativas.

8

Referencias

[1] Norma ABNT 15606-2:2007. Televisao digital terrestre - Codificacao de dados e especificacoesde transmissao para radiodifusao digital - Parte 2: Ginga-NCL para receptores fixos e moveis -Linguagem de aplicacao XML para codificacao de aplicacoes.

[2] ITU International Telecommunication Union. Nested Context Language (NCL) andGinga-NCL for IPTV services. ITU-T Recommendation H.761. 2009. (http://www.itu.int/rec/T-REC-H.761-200904-P).

[3] H. Silva, D. Saade, R. Rodrigues, and L. Soares. Ncl 2.0: Integrating new concepts toxml modular languages. ACM DocEng 2004, 2004. Wisconsin.

[4] L. Soares and R. Rodrigues. ”Nested context model 3.0 part 1 – NCM Core”. Monografiasem Ciencia da Computacao do Departamento de Informatica. PUC-Rio, No. 18/05. Rio deJaneiro, Maio 2005. ISSN 0103-9741.

[5] G. Souza Filho, L. Leite, and C. Batista. Ginga-J: The Procedural Middleware for theBrazilian Digital TV System. Journal of the Brazilian Computer Society, 12(4), March 2007.

[6] H. M. Deitel e P.J. Deitel. (2006) ”Java Como Programar”. Pearson Prentice Hall, 6o

edicao.[7] F. SantAnna, R. Cerqueira, and L. Soares. NCLua - Objetos Imperativos Lua na Lin-

guagem Declarativa NCL. XIV Brazilian Symposium on Multimedia and the Web (WebMedia2008), pages 83–90, 2008. Porto Alegre, RS, Brazil.

9

Capıtulo 3

Linguagem NCL

3.1 Introducao

Este capıtulo descreve a linguagem NCL (Nested Context Language) [1] em sua versao 3.0. NCLe uma linguagem baseada em XML [2], destinada a autoria de documentos hipermıdia. Por seruma linguagem de colagem, NCL e utilizada para reunir objetos de mıdia em uma apresentacaomultimıdia. Estes objetos de mıdia podem ser de qualquer tipo, audio, vıdeo, um documentoHTML ou mesmo um objeto procedural. Para entender a linguagem NCL, bem como seu uso,se faz necessario um estudo sobre o modelo que a gerou. As secoes a seguir apresentam o modeloNCM (Nested Context Model), no qual NCL e baseada.

3.1.1 Nested Context Model

Um documento hipermıdia, de uma forma generica, e composto por nos e elos. Os nos represen-tam abstracoes das mıdias utilizadas no documento alem de trazerem informacoes adicionais,como por exemplo informacoes sobre a sua apresentacao. Os elos fazem a sincronizacao espacialou temporal entre os nos que compoem o documento.

O modelo NCM (Nested Context Model) [3], Modelo de Contextos Aninhados, estende osconceitos acima aumentando o poder e flexibilidade de um documento hipermıdia. NCM estendea definicao de nos em dois tipos, nos de conteudo e nos de composicao. Um no de conteudotraz informacoes sobre uma mıdia utilizada pelo documento, enquanto um no de composicaopossui um conjunto de nos de conteudo e/ou outros nos de composicao e conjunto de elos, sendoutilizado para dar estrutura e organizacao a um documento hipermıdia.

Na construcao de um documento hipermıdia, algumas informacoes basicas sao necessarias,indicando o que deve ser apresentado, como, quando e onde deve ser apresentado. As proximassecoes discutem as entidades do modelo NCM utilizadas para especificar essas informacoes.

3.1.2 Onde

Para que um no em um documento hipermıdia seja apresentado, e necessaria a definicao deuma area para a exibicao do mesmo. O modelo NCM define elementos especıficos para este fim,denominados regioes. Estes elementos indicam a posicao e o tamanho da area onde nos poderaoser apresentados, sem se preocupar com a definicao dos nos que efetivamente serao apresentadosnesta area. A Figura 3.1, demonstra uma regiao.

10

Figura 3.1: Representacao de uma regiao.

3.1.3 Como

A definicao de uma regiao precisa ser complementada com outras informacoes que indicamcomo cada no sera apresentado. Esta descricao completa das caracterısticas de apresentacao decada no e feita atraves de elementos denominados descritores. Um descritor pode descreverparametros sobre a apresentacao dos nos, incluindo a regiao onde sera apresentado, seu volume,sua transparencia, a duracao de sua apresentacao, entre outros. A Figura 3.2, demonstra umdescritor.

Figura 3.2: Representacao de um descritor.

3.1.4 O que

O conteudo de um documento hipermıdia e representado atraves de elementos denominadosmıdia. Uma mıdia representa cada no de um documento, informando o descritor ao qual estarelacionado. De acordo com o modelo NCM, uma mıdia deve estar necessariamente dentro deum no de composicao, denominado contexto, que e utilizado para representar um documentocompleto ou parte dele. A Figura 3.3, demonstra o conceito de mıdias e contextos.

3.1.5 Quando

Uma vez tendo escolhido os nos que farao parte do documento hipermıdia, torna-se necessariodefinir qual sera o primeiro no a ser apresentado e a ordem de apresentacao dos demais nos. Essadefinicao e feita com o uso de elementos chamados portas e elos (links). As portas definem osnos a serem apresentados quando um no de contexto e iniciado e os links definem os relaciona-mentos de sincronizacao entre os nos e a interatividade do programa. Um link, entretanto, naodefine todo o comportamento de um relacionamento por si so, para isso e necessario o uso deconectores. A Figura 3.4, demonstra o uso de portas e elos.

11

Figura 3.3: Representacao de mıdias e contextos.

Figura 3.4: Representacao de portas e elos.

3.2 Extensible Markup Language

Criada pelo World Wide Web Consortium (W3C) [4] em meados da decada de 1990, a linguagemXML (Extensible Markup Language) [2] e um formato textual simples e bastante flexıvel criadopara estruturar, armazenar e representar informacao. Como XML nao foi projetada para umaaplicacao especıfica, ela pode ser usada como base (metalinguagem) para a criacao de linguagensde marcacao.

Em XML os documentos sao organizados de forma hierarquica em uma arvore onde cadaelemento possui um elemento pai e elementos filhos. Essa organizacao se assemelha a da arvoregenealogica de uma famılia onde cada indivıduo seria um elemento XML. Assim como no exemploda arvore genealogica, onde cada indivıduo possui um nome e atributos (cor de cabelo, altura,etc) que o definem, um elemento em XML tambem possui uma identificacao e atributos. Umexemplo pode ser visto na Figura 3.7.

No padrao textual XML a definicao de um elemento e iniciada pelo sımbolo ”<” e terminadopelos sımbolos ”/>”. Entre esses dois sımbolos sao definidos o nome do elemento e os atributosdo mesmo. Os atributos de um elemento XML sao definidos por uma dupla (nome, valor). AFigura 3.5 demonstra a definicao de um elemento usado para identificar um livro.

No exemplo acima o elemento possui o nome livro e os atributos autor, titulo e subtitulo.Pode-se notar que o valor de cada atributo e indicado apos o sımbolo ”=”e entre aspas. Pode-se notar tambem que o nome do elemento, assim como os seus atributos, nao possuem letras

12

<livro autor="J. R. R. Tolkien" titulo="Senhor do Aneis"subtitulo="O Retorno do Rei"/>

Figura 3.5: Definicao de um elemento.

maiusculas nem acentos, essa e uma boa pratica para evitar o surgimento de erros na utilizacaodo documento criado, ja que XML e case sensitive.

Um elemento, como dito anteriormente, pode possuir outros elementos como filhos. No casodo exemplo acima, podemos estender o elemento livro definindo os elementos filhos capitulo,como pode ser visto na Figura 3.6. A Figura 3.7 demostra graficamente a arvore do elementolivro.

<livro autor="J. R. R. Tolkien" titulo="Senhor do Aneis"subtitulo="O Retorno do Rei">

<capıtulo numero="1" nome="Minas Tirith" inicio="5"/><capıtulo numero="4" nome="O cerco de Gondor" inicio="69"/>

</livro>

Figura 3.6: Representacao em codigo do elemento livro.

Figura 3.7: Representacao grafica do elemento livro.

Neste segundo exemplo, pode-se perceber uma segunda notacao para um elemento. O ele-mento nao e terminado por ”/>”, como apresentado anteriormente, mas pela repeticao do nomedo elemento entre os sımbolos ”</”e ”>”, como visto no exemplo em </livro>. Outro pontoa ser observado e que os elementos capitulo filhos de livro sao definidos dentro deste ultimo,mantendo uma organizacao e hierarquia entre os elementos.

3.3 Estrutura de um documento NCL

Para possibilitar a criacao de documentos hipermıdia seguindo o modelo NCM apresentadoanteriormente, foi desenvolvida a linguagem NCL. NCL e uma linguagem baseada em XML.

13

Todo o conteudo de um documento NCL e definido dentro do elemento <ncl> sendo sua estruturadividida em duas grandes partes, o cabecalho e o corpo do documento.

3.3.1 Cabecalho

No cabecalho do documento NCL sao definidas as caracterısticas de apresentacao do documento,atraves das regioes e descritores, os relacionamentos que serao utilizados para a sincronizacaodos nos, atraves dos conectores, entre outras facilidades.

3.3.2 Corpo

Uma vez tendo sido definido o cabecalho do documento NCL, e necessaria definicao dos elemen-tos e a sincronizacao entre eles. O corpo do documento NCL fica entao responsavel por estadefinicao. Alem da definicao dos nos e elos, o corpo de um documento NCL pode tambem defi-nir composicoes, como visto na introducao sobre o modelo NCM, para melhorar sua estrutura eorganizacao. Vale ressaltar que o corpo do documento NCL e considerado um tipo especial decomposicao e como toda composicao deve possuir pelo menos uma porta para que seu conteudoseja exibido.

Apos esta introducao sobre a linguagem NCL, podemos passar para o aprendizado da lin-guagem. As secoes seguintes apresentarao gradativamente as facilidades da linguagem NCLexplicando os elementos que as proveem. Alem das explicacoes serao propostos exercıcios paraa fixacao dos conceitos apresentados e promover desde o princıpio um maior contato com alinguagem. Ao final deste capıtulo, seguindo os complementos gradativos dos exemplos, o leitortera criado um programa em NCL que exibe um botao em quatro momentos diferentes e contao numero de vezes que esse botao e selecionado.

3.4 Definindo a apresentacao

Nesta secao, definiremos como serao apresentados os elementos que compoem o programa sendocriado. Como visto anteriormente, essas definicoes sao feitas atraves das regioes e descritores.

3.4.1 Regioes

As regioes indicam as areas da tela onde os elementos do programa (vıdeo, texto, imagem, etc)poderao ser apresentados. Com isso o documento NCL define a posicao inicial de um elemento.Para que um documento seja apresentado, ao menos uma regiao devera ser definida, sendo essaa regiao que definira a dimensao da tela onde o documento NCL sera apresentado.

As regioes sao definidas no cabecalho do documento NCL na base de regioes, elemento<regionBase> e sao definidas pelo elemento <region>. Uma regiao pode tambem conter outrasregioes para permitir uma maior organizacao do documento NCL. O exemplo da Figura 3.8demonstra a criacao de duas regioes (rgFundo e rgVideo).

<region id="rgFundo" width="640" height="480"><region id="rgVideo" left="320" top="0"

width="320" height="240"/></region>

Figura 3.8: Criacao de duas regioes.

14

A regiao rgFundo define o tamanho total do dispositivo onde o documento sera apresentado,neste caso o tamanho sera de 640 por 480 pixels. A regiao rgFundo possui uma regiao internargVideo. Essa regiao define o local onde, provavelmente, um vıdeo sera apresentado, neste casono canto superior direito da tela e tendo o tamanho de 1/4 do tamanho total da tela.

Pode-se observar que como a regiao rgVideo esta contida na regiao rgFundo, seu posicio-namento e tamanho (caso este fosse representado de forma percentual) tem como referencia aregiao rgFundo.

Note que toda regiao possui um identificador unico representado pelo atributo id. Esteidentificador sera utilizado por outros elementos do documento NCL sempre que uma referenciaa regiao for necessaria. Uma regiao pode possuir os atributos listados abaixo. Destes atributos,apenas o atributo id e obrigatorio.

• id: identificador da regiao. Este valor, que deve ser unico, sera utilizado sempre que umareferencia a regiao for necessaria.

• left: Define a coordenada horizontal a esquerda da regiao. Esta coordenada pode serindicada em valores absolutos (sem a necessidade de indicar a unidade de medida usada)ou percentuais. Este valor tera como referencia a regiao pai ou, no caso de a regiao emquestao nao estar contida em outra, a tela do dispositivo de exibicao.

• top: Define a coordenada vertical superior da regiao. Esta coordenada pode ser indicadaem valores absolutos (sem a necessidade de indicar a unidade de medida usada) ou per-centuais. Este valor tera como referencia a regiao pai ou, no caso de a regiao em questaonao estar contida em outra, a tela do dispositivo de exibicao.

• right: Define a coordenada horizontal a direita da regiao. Esta coordenada pode serindicada em valores absolutos (sem a necessidade de indicar a unidade de medida usada)ou percentuais. Este valor tera como referencia a regiao pai ou, no caso de a regiao emquestao nao estar contida em outra, a tela do dispositivo de exibicao.

• bottom: Define a coordenada vertical inferior da regiao. Esta coordenada pode ser in-dicada em valores absolutos (sem a necessidade de indicar a unidade de medida usada)ou percentuais. Este valor tera como referencia a regiao pai ou, no caso de a regiao emquestao nao estar contida em outra, a tela do dispositivo de exibicao.

• width: Define a dimensao horizontal da regiao. Vale observar que esta dimensao tambempoderia ser definida com o uso dos atributos left e right. A escolha de como definir adimensao da regiao fica a cargo do programador. Entretanto, no caso dos atributos left ewidth serem definidos, o valor do atributo right nao e considerado.

• height: Define a dimensao vertical da regiao. Vale observar que esta dimensao tambempoderia ser definida com o uso dos atributos top e bottom. A escolha de como definir adimensao da regiao fica a cargo do programador. Entretanto, no caso dos atributos top eheight serem definidos, o valor do atributo bottom nao e considerado.

• zIndex: Define a sobreposicao das camadas. De acordo com o valor contido neste atributo,uma regiao sera apresentada “acima” de outras regioes com zIndex menor e “abaixo”de outras regioes com zIndex maior. Caso duas regioes com mesmo valor de zIndexsejam definidas, no caso de uma mıdia ser apresentada em cada regiao, existem duaspossibilidades de ordenacao das regioes: a mıdia apresentada por ultimo sera apresentada“acima” da anterior; caso as duas sejam apresentadas ao mesmo tempo, a ordem e escolhidapelo formatador (executor).

15

3.4.2 Descritores

Os descritores definem como os elementos serao apresentados nas areas da tela. Para isso, umdescritor deve indicar a regiao a qual esta relacionado e definir especificidades de sua apre-sentacao.

Os descritores sao definidos no cabecalho do documento NCL na base de descritores, elemento<descriptorBase> e definido pelo elemento <descriptor>. O exemplo da Figura 3.9 demonstraa criacao de dois descritores (dpFundo e dpVideo).

<descriptor id="dpFundo" region="rgFundo"/><descriptor id="dpVideo" region="rgVideo"/>

Figura 3.9: Criacao de dois descritores.

Note que um descritor tambem define um identificador unico. Alem disso, um descritor definea regiao a qual este esta associado atraves do atributo region. Um descritor nao e utilizadosomente para relacionar um elemento com uma regiao da tela. Alem disso, o descritor podeser utilizado para definir como sera feita a navegacao pela tela, atraves dos botoes do controleremoto, bem como mudar a forma como um elemento e apresentado, mudando seu tempo deexibicao ou sua caracterıstica de transparencia.

Um descritor possui os seguintes atributos:

• id: Identificador do descritor. Este atributo contem um valor unico que sera utilizado emreferencias ao descritor.

• region: Identifica a regiao a qual o descritor esta relacionado. Caso o elemento nao possuaconteudo visual, nao e necessario definir uma regiao.

• explicitDur: Define a duracao da apresentacao do elemento associado ao descritor. Casouma duracao nao seja especificada neste atributo, sera considerada a duracao padrao decada elemento. Se o elemento for um texto ou imagem, o tempo padrao de apresentacaoe infinito. Nos casos onde os elementos possuem uma duracao, esta sera considerada suaduracao padrao. O valor definido neste atributo deve estar em segundos (considerando aunidade ”s”).

• focusIndex: Define um ındice a ser utilizado na navegacao entre os elementos apresenta-dos na tela. Se um descritor nao definir um ındice, o elemento a ele associado nao receberafoco na navegacao. No inıcio da execucao do documento, o foco e passado para o elementoassociado ao descritor de menor ındice. Uma observacao a ser feita e que o valor do ındicepode nao ser numerico, nesse caso sera escolhido o ındice lexicograficamente menor.

• moveLeft: Define o descrito, atraves do seu ındice, que recebera foco quando o botao ”setapara esquerda”do controle remoto for pressionado. Esse mapeamento so sera realizadoquando o descritor que o define estiver com o foco.

• moveRight: Define o descritor, atraves do seu ındice, que recebera foco quando o botao”seta para direita”do controle remoto for pressionado. Esse mapeamento so sera realizadoquando o descritor que o define estiver com o foco.

• moveUp: Define o descritor, atraves do seu ındice, que recebera foco quando o botao”seta para cima”do controle remoto for pressionado. Esse mapeamento so sera realizadoquando o descritor que o define estiver com o foco.

16

• moveDown: Define o descritor, atraves do seu ındice, que recebera foco quando o botao”seta para baixo”do controle remoto for pressionado. Esse mapeamento so sera realizadoquando o descritor que o define estiver com o foco.

• focusBorderColor: Define a cor da borda da regiao associada ao descritor quando oelemento utilizando o descritor recebe foco. O atributo pode assumir um dos seguintesvalores: white, black, silver, gray, red, maroon, fuchsia, purple, lime, green, yellow, olive,blue, navy, aqua, ou teal.

• focusBorderWidth: Define a espessura da borda apresentada em pixels. A espessurapode assumir valores positivos e negativos. No caso de um valor positivo ser atribuıdo, aborda sera apresentada fora da regiao, caso negativo, a borda sera apresentada dentro daregiao.

3.4.3 Pratica

Agora que aprendemos como criar regioes e descritores, podemos comecar a criacao da nossaaplicacao NCL. Comecaremos definindo as regioes e descritores onde serao apresentados osseguintes elementos:

• vıdeo: vıdeo principal apresentado durante todo o programa;

• botao: botao apresentado em alguns momentos.

A Figura 3.10 demonstra a criacao da base de regioes, enquanto a Figura 3.11 demonstra acriacao da base de descritores.

<regionBase><region id="rg_video" left="0" top="0" width="100%"

height="100%" zIndex="1"><region id="rg_button" left="40%" top="40%" width="20%"

height="20%" zIndex="3"/></region>

</regionBase>

Figura 3.10: Base de regioes.

<descriptorBase><descriptor id="dp_video" region="rg_video"/><descriptor id="dp_button" region="rg_button" focusIndex="0"/>

</descriptorBase>

Figura 3.11: Base de descritores.

3.5 Inserindo os elementos

Para que um documento NCL tenha algo a apresentar, e necessaria a definicao dos conteudosque serao apresentados. Estes conteudos sao definidos pelas mıdias de NCL como veremos aseguir. Os elementos definidos nesta secao pertencem ao corpo do documento NCL.

17

Tabela 3.1: MIME Types utilizados por NCL.MIME Type Significadotext/html .htm, .htmltext/css .csstext/xml .xmlimage/bmp .bmpimage/png .pngimage/gif .gifimage/jpeg .jpgaudio/basic .wavaudio/mp3 .mp3audio/mp2 .mp2audio/mpeg4 .mp4, .mpg4video/mpeg .mpeg, .mpgapplication/x-ginga-NCLua

.lua

3.5.1 Mıdias

Uma mıdia, ou seja, a representacao do objeto que sera apresentado pelo documento, e definidapelo elemento <media> de NCL.

Na Figura 3.12 podemos ver como e feita a criacao de um elemento <media>.

<media id="video" src="video.avi" descriptor="dpVideo"/>

Figura 3.12: Criacao de um elemento media.

Uma mıdia possui os seguintes atributos:

• id: Identificador da mıdia sera utilizado, assim como os demais identificadores, em re-ferencias a esta mıdia.

• src: Define a localizacao do conteudo objeto de mıdia representado (URI).

• descriptor: Define o descritor que controla a apresentacao da mıdia. O valor desseatributo devera ser o identificador do descritor.

• type: Define o tipo da mıdia (audio, video, text, etc). O valor desse atributo sera um dosMIME Types definidos pela IANA (Internet Assigned Numbers Authority) [?].

A Tabela 3.1 demonstra os MIME Types utilizados por NCL.

3.5.2 Ancoras

As ancoras definem uma parte do conteudo de uma mıdia. Por parte do conteudo de uma mıdia,pode-se entender como um subconjunto dos elementos que compoem uma mıdia. Por exemplo,digamos que queremos definir ancoras de um vıdeo. Nesse caso o vıdeo em si seria a mıdiaenquanto as ancoras seriam trechos desse vıdeo.

As ancoras sao utilizadas para permitir a sincronizacao de objetos de mıdia (musicas, vıdeos,textos, etc) com outros objetos de mıdia. Imagine o exemplo de um filme legendado. Este filme

18

possui diversas cenas, sendo que cada cena possui um dialogo. Neste caso o filme devera possuiruma ancora para cada cena, possibilitando assim que as legendas (dialogos) sejam apresentadasno tempo correto.

Uma ancora e definida pelo elemento <area>, sendo este um elemento filho de uma mıdia.O exemplo da Figura 3.13 demonstra a criacao de um vıdeo com ancoras.

<media id="video" src="video.avi" descriptor="dpVideo"><area id="cena01" begin="2s" end="5s"/><area id="cena02" begin="5s" end="6s"/>

</media>

Figura 3.13: Criacao de um vıdeo com ancoras.

Uma ancora possui os seguintes atributos:

• id: Identificador unico da ancora. Este atributo e usado em referencias feitas a esteelemento.

• begin: Inıcio da ancora. Este atributo e usado quando e definida uma ancora de umobjeto de mıdia contınuo. O valor desse atributo pode ser no formato ”segundo.fracao”ou”hora:minuto:segundo.fracao”.

• end: Fim da ancora. Este atributo e usado em conjunto com o atributo begin, de formaa definir o final da ancora. Seu valor possui o mesmo formato do atributo begin. Casoeste atributo (end) nao seja definido, o final da ancora e considerado como sendo o finalda mıdia que a contem.

• label: Define um identificador para a ancora. Um label e usado em ancoras de objetosprocedurais, podendo ser usado para identificar um conjunto de ancoras, como sera vistomas adiante.

Uma ancora pode possuir outros atributos a serem usados com outros tipos de mıdias, comomıdias nao contınuas, por exemplo. Por ser esta uma apostila basica de NCL, esses atributosnao serao apresentados neste texto.

3.5.3 Propriedades

As propriedades definem, como o proprio nome indica, uma propriedade de uma mıdia. Umapropriedade e usada quando a manipulacao de algum atributo de uma mıdia e necessaria.

Uma propriedade e definida pelo elemento <property> sendo este um elemento filho damıdia. O elemento <property> contem apenas os atributos name e value.

O atributo name indica o nome da propriedade da mıdia que sera manipulada. O atributovalue, por sua vez, indica o valor desta propriedade. O exemplo da Figura 3.14 demonstra ouso de propriedades.

Note que uma propriedade nem sempre e definida com um valor. Outro ponto a se notar eque, no caso de uma propriedade ser definida com um valor, este sera o valor inicial do referidoatributo.

19

<media id="video" src="video.avi" descriptor="dpVideo"/><property name="descriptor"/><property name="explicitDur" value="60s"/>

</media>

Figura 3.14: Uso de propriedades.

3.5.4 Pratica

Agora que aprendemos como criar mıdias, suas ancoras e propriedades, podemos continuar acriacao da nossa aplicacao NCL. Precisamos definir os seguintes elementos:

• vıdeo: vıdeo principal apresentado durante todo o programa;

• botao: botao apresentado em alguns momentos;

• contador: responsavel por armazenar o numero de vezes que o botao foi selecionado.

A Figura 3.15 demonstra a criacao das mıdias.

<media id="video" src="video.mpg" type="video/mpeg" descriptor="dp_video"><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"/></media>

<media id="button" descriptor="dp_button" src="button.jpg" type="image/jpeg"/>

<media id="clicks" src="clicks.lua"><property name="inc"/><property name="counter"/>

</media>

Figura 3.15: Mıdias do documento.

3.6 Organizando o documento

Como visto na secao 3.1.1, o modelo NCM define, alem de nos de conteudo, nos de composicao.Estes nos sao usados para organizar e estruturar um documento seguindo o modelo. Nesta secaoveremos como estruturar um documento NCL usando composicoes.

3.6.1 Contexto

Em NCL, um no de composicao e representado pelo elemento <context>. Este elemento podeter outros elementos, inclusive outros contextos, como elementos filhos.

Um contexto permanece ativo enquanto um de seus elementos filhos estiver ativo e, casouma interface especıfica do contexto nao seja especificada em um elo, um contexto inicia todos

20

os seus elementos filhos quanto ele e iniciado. A criacao de interfaces para contextos sera vistamais a frente.

Um contexto define tambem um atributo id para identifica-lo em relacionamentos que venhaa participar. O exemplo da Figura 3.16 demonstra a criacao de um contexto.

<context id="context01">... elementos ...

</context>

Figura 3.16: Criacao de um contexto.

3.6.2 Portas

Uma porta define uma interface para um contexto. Como o modelo NCM nao permite que umelemento dentro de um contexto seja acessado diretamente de fora do contexto, e necessario ouso de portas sempre que tal acao seja necessaria.

Uma porta contem os seguintes atributos:

• id: Identificador unico permitindo que esta seja referenciada por outro elemento do docu-mento NCL.

• component: no componente sendo mapeado pela porta.

• interface: Interface do no componente sendo mapeado. Podem ser ancoras ou propri-edades, caso o elemento mapeado seja uma mıdia, ou outras portas, caso o elementomapeado seja um contexto.

O corpo do documento NCL, elemento <body>, e considerado um tipo especial de contexto.Logo o corpo do documento NCL deve conter pelo menos uma porta, mapeando um no definidodentro dele, para que o documento possa ser apresentado.

3.6.3 Pratica

Agora que aprendemos como estruturar nosso documento, podemos continuar com nosso apli-cativo. Precisamos definir os seguintes elementos:

• corpo do documento ncl;

• uma porta para o primeiro elemento a ser apresentado.

A Figura 3.17 demonstra a criacao dos contextos e suas portas. Os elementos apresentadossao os mesmos criados na Secao 3.5.4.

3.7 Sincronizando os elementos

Ate agora aprendemos como criar elementos, organizar o documento NCL e definir quais elemen-tos serao exibidos no inıcio do documento. Alem disso, necessitamos definir como os elementosse relacionam durante a apresentacao e ao receber a interacao do usuario. Os conectores e linkssao utilizados para esse proposito.

21

<body>

<port component="video" id="inicio"/>

<media id="video" src="video.mpg" type="video/mpeg" descriptor="dp_video">

<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"/>

</media>

<media id="button" descriptor="dp_button" src="button.jpg" type="image/jpeg"/>

<media id="clicks" src="clicks.lua">

<property name="inc"/>

<property name="counter"/>

</media>

</body>

Figura 3.17: Corpo do documento e contexto da tela.

3.7.1 Conectores

Os conectores definem relacoes genericas que serao utilizadas pelos elementos de um documentoNCL. Durante essa definicao nao sao indicados os participantes de um relacionamento especıfico.

Imagine, por exemplo, a relacao ”ensina a”. Esta relacao define que alguem ensina a alguem,porem nao define que ensina e quem aprende, ou seja, os participantes.

Um conector e definido numa base de conectores, elemento <connectorBase> pelo elemento<causalConnector>. Este elemento define uma relacao de causa e efeito, como seu proprio nomeja indica, atraves de papeis de condicao e papeis de acao. Um papel pode ser compreendidocomo uma interface de um conector e e este que indica qual a participacao que um no tem narelacao.

Voltando ao exemplo citado anteriormente, a relacao ”ensina a”possui dois papeis, o de quemensina e o de quem aprende. O exemplo da Figura 3.18 demonstra a criacao de um conector.

<causalConnector id="onBeginStart"><simpleCondition role="onBegin"/><simpleAction role="start" max="unbounded" qualifier="par"/>

</causalConnector>

Figura 3.18: Criacao de um conector.

Pode-se reparar no exemplo acima que a condicao e dada pelo papel ”onBegin”, indicandoque a condicao espera pelo inıcio da apresentacao de um elemento, enquanto a acao e dada pelopapel ”start”, indicando que a apresentacao de um elemento sera iniciada.

Condicoes Simples

O elemento <simpleCondition> define uma condicao que devera ser satisfeita para que o conec-tor seja ativado. Este elemento define, atraves do atributo role o nome do papel de condicao.NCL possui um conjunto de nomes reservados para papeis de condicao. Estes nomes identificamuma condicao, ou acao, sem a necessidade de mais informacoes. Os nomes e seus significadossao listados abaixo:

• onBegin: E ativado quando a apresentacao do elemento ligado a esse papel e iniciada.

22

• onEnd: E ativado quando a apresentacao do elemento ligado a esse papel e terminada.

• onAbort: E ativado quando a apresentacao do elemento ligado a esse papel e abortado.

• onPause: E ativado quando a apresentacao do elemento ligado a esse papel e pausada.

• onResume: E ativado quando a apresentacao do elemento ligado a esse papel e retomadaapos um pause.

• onSelection: E ativado quando uma tecla a ser especificada for pressionada durante aapresentacao do elemento ligado a esse papel ou quando a tecla ENTER for pressionadaenquanto o elemento estiver com foco.

• onBeginAttribution: E ativado logo antes de um valor ser atribuıdo a uma propriedadedo elemento ligado a esse papel.

• onEndAttribution: E ativado logo apos um valor ser atribuıdo a uma propriedade doelemento ligado a esse papel.

Quando a condicao ”onSelection”e utilizada, torna-se necessario definir o atributo key doelemento <simpleCondition>. Este valor indica qual a tecla que devera ser pressionada para queo conector seja ativado. Os valores possıveis sao: ”0”a ”9”, ”A”a ”Z”, ”*”, ”#”, ”MENU”, ”INFO”,”GUIDE”, ”CURSOR_DOWN”, ”CURSOR_LEFT”, ”CURSOR_RIGHT”, ”CURSOR_UP”, ”CHANNEL_DOWN”,”CHANNEL_UP”, ”VOLUME_DOWN”, ”VOLUME_UP”, ”ENTER”, ”RED”, ”GREEN”, ”YELLOW”, ”BLUE”,”BACK”, ”EXIT”, ”POWER”, ”REWIND”, ”STOP”, ”EJECT”, ”PLAY”, ”RECORD”e ”PAUSE”. Este valorpode ser estabelecido com o uso de parametros do conector como sera visto mais adiante.

O elemento <simpleCondition> pode definir outros tipos de condicoes diferentes das condicoespadrao apresentadas acima. Esta facilidade, entretanto, nao sera apresentada neste texto.

Condicoes Compostas

Alem de uma condicao simples, um conector pode definir uma condicao composta. Uma condicaocomposta e definida pelo elemento <compoundCondition>. Este elemento possui duas ou maiscondicoes simples como filhas. Quando utilizado, este elemento deve definir um atributo ope-rator que recebe os valores ”and”ou ”or”, indicando se todas ou pelo menos uma condicao deveser satisfeita para que o conector seja ativado.

Acoes Simples

O elemento <simpleAction> define uma acao a ser executada quando o conector e ativado. Esteelemento define, atraves do atributo role o nome do papel de acao. Alem do nome do papel, esteelemento define atraves do atributo max o numero maximo de elementos que poderao utilizareste papel. O valor ”unbounded”define um numero maximo ilimitado. Caso o atributo maxseja definido, e necessaria a definicao de outro atributo chamado qualifier, este define se asacoes serao executadas em paralelo ou sequencialmente, valores ”par”e ”seq”respectivamente.

NCL tambem possui um conjunto de nomes reservados para papeis de acao. Os nomes eseus significados sao listados abaixo:

• start: Inicia a apresentacao do elemento ligado a esse papel.

• stop: Termina a apresentacao do elemento ligado a esse papel.

• abort: Aborta a apresentacao do elemento ligado a esse papel.

23

• pause: Pausa a apresentacao do elemento ligado a esse papel.

• resume: Retoma a apresentacao do elemento ligado a esse papel.

• set: Estabelece um valor a uma propriedade de um elemento associado a esse papel.

Quando o papel ”set”e usado, a condicao que o define deve tambem declarar o atributovalue. Este atributo e responsavel por indicar o valor a ser recebido pela propriedade. Estevalor pode ser estabelecido com o uso de parametros do conector como sera visto mais adiante.

O elemento <simpleAction> pode definir outros tipos de acoes diferentes das acoes padraoapresentadas acima. Esta facilidade, entretanto, nao sera apresentada neste texto.

Acoes compostas

Alem de uma acao simples, um conector pode definir uma acao composta. Uma acao com-posta e definida pelo elemento <compoundAction>. Uma acao composta possui outras acoessimples como filhas. Quando utilizado, este elemento deve definir um atributo operator querecebe os valores ”par”ou ”seq”, indicando se as acoes deverao ser executadas em paralelo ousequencialmente.

Parametros

Um conector tambem pode definir parametros. Esses parametros sao definidos pelo elemento<connectorParam> e utilizados para que o valor a ser avaliado, ou estabelecido, possa ser indi-cado no momento do uso do conector. O exemplo da Figura 3.19 ilustra esse conceito.

<causalConnector id="onKeySelectionStart"><connectorParam name="keyCode"/><simpleCondition role="onSelection" key="$keyCode"/><simpleAction role="start" max="unbounded" qualifier="par"/>

</causalConnector>

Figura 3.19: Definicao de parametro em conector.

Note que o parametro define apenas o seu nome, deixando a definicao do seu valor parao momento do seu uso. Os locais onde o valor desse parametro for utilizado indicam estafuncionalidade atraves do valor ”$nome_do_parametro.

3.7.2 Elos

Um elo e utilizado para identificar os elementos participantes de uma relacao. Seguindo oexemplo de relacao ”ensina a”apresentada na secao anterior, um elo que utilizasse essa relacaoidentificaria os elementos ”professor”e ”aluno”. O relacionamento completo, especificado peloelo, ficaria entao ”o professor ensina ao aluno”.

Um elo e definido pelo elemento <link>. Este elemento define a relacao sendo utilizadaatraves do seu atributo xconnector.

Para a criacao de ligacoes entre os elementos e os papeis, um elo define elementos filhos<bind>. Um <bind> define os atributos:

• role: Identifica o papel sendo utilizado.

24

• component: Identifica, atraves do seu id, o elemento participando da relacao.

• interface: Identifica uma ancora ou propriedade do elemento, caso este seja uma mıdia,ou uma porta de um elemento, caso este seja uma composicao, atraves do seu id.

O exemplo da Figura 3.20 demonstra a criacao de um elo.

<link id="link1" xconnector="onKeySelectionStart"><bind component="video" role="onSelection">

<bindParam name="keyCode" value="YELLOW"/></bind><bind component="bkg" role="start"/><bind component="screen" role="start"/>

</link>

Figura 3.20: Criacao de elo.

No exemplo acima podemos notar a existencia do elemento <bindParam>. Este elementoe utilizado em casos onde a passagem de parametros e necessaria. Este elemento define osatributos name e value, onde o primeiro identifica o parametro e o segundo o seu valor.

3.7.3 Pratica

Agora que aprendemos como criar relacionamentos em nosso documento, podemos continuar acriacao do nosso programa. Precisamos definir as seguintes relacoes:

• quando um elemento comecar, comecar outro elemento;

• quando um elemento terminar, terminar outro elemento;

• quando um elemento for selecionado, definir o valor de um outro elemento.

e os elos que utilizam essas relacoes (conectores).A Figura 3.21 demonstra a criacao dos conectores que serao usados pelo documento NCL.

Enquanto a Figura 3.22 demonstra a utilizacao dos mesmos.

25

<causalConnector id="onBeginStart"><simpleCondition role="onBegin"/><simpleAction role="start"/>

</causalConnector>

<causalConnector id="onEndStop"><simpleCondition role="onEnd"/><simpleAction role="stop" max="unbounded"/>

</causalConnector>

<causalConnector id="onSelectionSet"><simpleCondition role="onSelection"/><connectorParam name="var"/><simpleAction role="set" value="$var"/>

</causalConnector>

Figura 3.21: Conectores da base de conectores.

26

<link xconnector="onBeginStart"><bind role="onBegin" component="video"/><bind role="start" component="clicks"/>

</link>

<link xconnector="onBeginStart"><bind role="onBegin" component="video" interface="area01"/><bind role="start" component="button"/>

</link><link xconnector="onBeginStart">

<bind role="onBegin" component="video" interface="area02"/><bind role="start" component="button"/>

</link><link xconnector="onBeginStart">

<bind role="onBegin" component="video" interface="area03"/><bind role="start" component="button"/>

</link><link xconnector="onBeginStart">

<bind role="onBegin" component="video" interface="area04"/><bind role="start" component="button"/>

</link>

<link xconnector="onEndStop"><bind role="onEnd" component="video" interface="area01"/><bind role="stop" component="button"/>

</link><link xconnector="onEndStop">

<bind role="onEnd" component="video" interface="area02"/><bind role="stop" component="button"/>

</link><link xconnector="onEndStop">

<bind role="onEnd" component="video" interface="area03"/><bind role="stop" component="button"/>

</link><link xconnector="onEndStop">

<bind role="onEnd" component="video" interface="area04"/><bind role="stop" component="button"/>

</link>

<link xconnector="onSelectionStopSet"><bind role="onSelection" component="button"/><bind role="set" component="clicks" interface="inc">

<bindParam name="var" value="1"/></bind>

</link>

Figura 3.22: Links utilizados no programa.

27

Tabela 3.2: Comparadores utilizados em regras NCL.eq igual ane diferente degt maior quege maior ou igual alt menor quele menor ou igual a

3.8 Definindo alternativas

Ate agora, vimos como criar um programa NCL, definindo como seus elementos serao apresen-tados, que elementos serao apresentados e a ordem em que serao apresentados. A este tipo deordem de apresentacao podemos chamar de fluxo temporal do programa NCL.

Alem das facilidades apresentadas, NCL tambem permite que um programa possa ter seufluxo temporal modificado durante sua apresentacao. Essa modificacao e feita atraves da de-finicao de alternativas de conteudo. Uma alternativa define, para um determinado momento daapresentacao do programa NCL, possıveis caminhos a serem seguidos. A escolha de um caminhoe dada pela avaliacao de condicoes, chamadas regras.

3.8.1 Regras

As regras representam condicoes que podem ser usadas em um documento NCL. Uma regra,basicamente, compara uma propriedade de um elemento NCL com um valor, retornando oresultado dessa comparacao. Uma regra e definida pelo elemento <rule>.

Uma regra define os seguintes atributos:

• id: Identificador da regra, e referenciado quando o uso da mesma for necessario;

• var: Indica que propriedade estara sendo testada. O valor desse atributo sera o identifi-cador de uma propriedade;

• comparator: Indica que tipo de comparacao sera feita pela regra;

• value: Indica o valor que sera comparado com a propriedade.

A Tabela 3.2 demonstra os possıveis comparadores utilizados em uma regra.O exemplo da Figura 3.23 demonstra a criacao de uma regra.

<rule id="rule_pt" var="idioma" comparator="eq" value="pt"/>

Figura 3.23: Criacao de uma regra.

Uma regra e definida na base de regras, representada pelo elemento <ruleBase>, no cabecalhodo documento NCL.

3.8.2 Switch

Um switch e um elemento que apresenta as alternativas de conteudo que um programa NCL podetomar em um determinado momento. Este elemento avalia uma serie de regras e, dependendoda regra avaliada verdadeira, ativa um dos elementos definidos dentro dele.

28

Um switch e ativado da mesma forma como um elemento qualquer de NCL, seu identificadorpode ser utilizado em elos tornando possıvel que este seja ativado, parado ou mesmo participede alguma condicao de disparo. O exemplo da Figura 3.24 demonstra a criacao de um switch.

<switch id="escolhe_audio"><bindRule rule="rule_en" constituent="audio_en"/><bindRule rule="rule_pt" constituent="audio_pt"/>

<media id="audio_en" ... /><media id="audio_pt" ... />

</switch>

Figura 3.24: Criacao de um switch.

Para que um switch escolha um elemento para ser apresentado, e necessaria a definicaode mapeamentos. Esses mapeamentos sao definidos pelo elemento <bindRule> como visto noexemplo acima. Um mapeamento define a regra que deve ser avaliada e, caso esta seja verdadeira,o elemento que devera ser ativado.

Vale ressaltar, que as regras sao avaliadas de forma sequencial, sendo a primeira regraavaliada como verdadeira a que ira definir qual elemento sera apresentado. Com isso, mesmoque mais de uma regra seja verdadeira em um determinado momento, somente um elementosera exibido.

Caso um switch possua elementos do tipo context, e necessario tambem se indicar a portade destino de cada mapeamento. Essa indicacao e feita pelo elemento <switchPort> comomostrado no exemplo da Figura 3.25.

<switch id="escolhe_audio"><switchPort id="mapeamento">

<mapping component="context_en" interface="port_en" /><mapping component="context_pt" interface="port_pt" />

</switchPort>

<bindRule rule="rule_en" constituent="context_en" /><bindRule rule="rule_pt" constituent="context_pt" />

<context id="context_en"><port id="port_en" ... />...

</context>

<context id="context_pt"><port id="port_pt" ... />...

</context></switch>

Figura 3.25: Porta em switch.

29

Referencias

[1] Soares, L.F.G., Barbosa, S.D.J. Programando em NCL: desenvolvimento de aplicacoes paramiddleware Ginga, TV digital e Web. Editora Elsevier. Rio de Janeiro, 2009. ISBN 978-85-352-3457-2.

[2] W3C World-Wide Web Consortium. XML Schema Part 0: Primer Second Edition. W3CRecommendation. 2004. (http://www.w3.org/TR/xmlschema-0/).

[3] Soares L.F.G, Rodrigues R.F. Nested Context Model 3.0: Part 1 – NCM Core. TechnicalReport, Departamento de Informatica PUC-Rio. 2005.

[4] W3C World-Wide Web Consortium. (http://www.w3.org/)

30

Capıtulo 4

Linguagem Lua

4.1 Introducao

4.1.1 Pequeno historico

A linguagem Lua [1] foi criada em 1993 dentro do Tecgraf [2] na PUC-Rio pelos professoresRoberto Ierusalimschy, Luiz Henrique de Figueiredo e Waldemar Celes.

Um dos grandes parceiros do Tecgraf era a Petrobras, que demandava por programas paraengenharia com interacao grafica. Em 1993 foram desenvolvidas duas linguagens para atenderessa demanda, estas linguagens foram batizadas de DEL, coordenada pelo professor Luiz, e SOL,coordenada pelo professor Roberto.

Em meados de 1993, os professores Roberto, Luiz e Waldemar se reuniram para discutir SOLe DEL e concluıram que as duas linguagens poderiam ser substituıdas por apenas uma. Assimnasceu a equipe dos desenvolvedores de Lua.

Lua foi parcialmente inspirada em SOL, por isso um amigo do Tecgraf, Carlos HenriqueLevy, sugeriu o nome ’Lua’. Assim nasceu Lua.

4.1.2 Convencoes Lexicas

Na linguagem Lua, nomes - ou identificadores - podem ser qualquer cadeia de letras, dıgitos esublinhados, porem nao podem comecar com um dıgito. Os identificadores sao utilizados paranomear funcoes, variaveis e campos de tabelas.

Algumas palavras sao reservadas e nao podem ser utilizadas como nomes. A Figura 4.1mostra a lista das palavras reservadas pela linguagem.

and break do else elseifend false for function ifin local nil not orrepeat return then true until while

Figura 4.1: Palavras reservadas.

Lua diferencia maiusculas de minusculas. Portanto for sera interpretado diferente de For oufOr ou foR ou FOR ou FOr ou FoR.

Uma string (cadeia de caracteres) pode ser delimitada com o uso de aspas simples ou aspasduplas e podem conter sequencias de escape no estilo de C. A Figura 4.2 exibe uma lista comos caracteres de escape:

31

’\a’ (campainha)’\b’ (backspace)’\f’ (alimentac~ao de formulario)’\n’ (quebra de linha)’\r’ (retorno de carro)’\t’ (tabulac~ao horizontal)’\v’ (tabulac~ao vertical)’\\’ (barra invertida)’\"’ (citac~ao [aspa dupla])’\’’ (apostrofo [aspa simples])

Figura 4.2: Caracteres de escape.

4.1.3 O interpretador de linha de comando

Apesar de Lua ter sido originalmente projetada como uma linguagem de extensao, ela e fre-quentemente utilizada como linguagem principal. Um interpretador para Lua, chamado lua, edisponibilizado com a distribuicao padrao da linguagem. O interpretador inclui todas as bibli-otecas padrao.

A sintaxe para uso e: lua [options] [script [args]].As opcoes sao:

• -e stat : executa a cadeia stat;

• -l mod : ”requisita”mod;

• -i: entra em modo interativo apos executar script;

• -v: imprime informacao de versao;

• –: para de tratar opcoes;

• -: executa stdin como um arquivo e para de tratar opcoes.

Apos tratar as opcoes passadas, lua executa o script fornecido, passando para ele os argu-mentos. Quando e chamado sem argumentos, lua comporta-se como lua -v -i, entrando no modointerativo. Na Figura 4.3 e possıvel observar a tela do interpretador lua em modo interativo.

Em sistemas Unix, scripts Lua podem ser usados como programas executaveis. Para issobasta inserir na primeira linha do script uma chamada com o caminho para o interpretador lua,como pode-se observar na Figura 4.4.

Para tornar o script executavel: chmod +x nome-do-script.lua

4.1.4 Pratica

Vamos iniciar nossa aventura pelo mundo da Lua.Primeiro iremos instalar o interpretador Lua. Se voce ja tem o interpretador instalado em

seu computador, sinta-se livre para pular esta parte.Alguns sistemas Unix-like disponibilizam pacotes pre-compilados do interpretador. Em sis-

temas Debian-like, com os repositorios atualizados, digite: aptitude search lua para verificarse existe um pacote do interpretador Lua disponıvel.

Para instalar: aptitude install nome-do-pacote-lua.

32

Figura 4.3: Interpretador Lua em modo interativo.

#!/usr/local/bin/lua

Figura 4.4: Chamada com caminho do interpretador Lua.

Para instalar no Slackware, entre no site http://www.linuxpackages.net e procure pelo pacotemais adequado para sua versao. Voce pode baixar a versao mais nova diretamente deste link:

http://mirror.slackwarebrasil.org/linuxpackages//Slackware/Slackware-12.1/Library/Lua/lua-5.1.4-i486-1gds.tgz

Para instalar, logado como root, digite: installpkg nome-do-pacote-lua.tgz.Apos instalar o interpretador Lua, abra o terminal e digite: lua.Se tudo ocorreu bem, voce entrara no modo interativo do interpretador. A tela sera seme-

lhante a da Figura 4.3.Usuarios do Microsoft Windows, nao desanimem! Existe esperanca para os que ainda nao

alcancaram a luz! O interpretador Lua tambem foi portado para esse sistema. Maiores in-formacoes podem ser encontradas neste site: http://luaforwindows.luaforge.net.

4.2 Tipos e variaveis

Para uma melhor compreensao desta secao, segue uma definicao formal para o termo variavel :

Variavel e um objeto (uma posicao, frequentemente localizada na memoria) capazde reter e representar um valor ou expressao. Enquanto as variaveis so ”existem”emtempo de execucao, elas sao associadas a ”nomes”, chamados identificadores, duranteo tempo de desenvolvimento.

Quando nos referimos a variavel, do ponto de vista da programacao de computa-dores, estamos tratando de uma “regiao de memoria (do computador) previamenteidentificada cuja finalidade e armazenar os dados ou informacoes de um programapor um determinado espaco de tempo”.

33

4.2.1 Tipos

Lua e uma linguagem de tipagem dinamica. Isso significa que nao e necessario declarar o tipode uma variavel; ele e determinado dinamicamente dependendo do valor que a variavel estaarmazenando.

Existem oito tipos basicos em Lua: nil, boolean, number, string, userdata, function, thread,e table. Observe a Figura 4.5.

print(type("Hello world")) --> stringprint(type(10.4*3)) --> numberprint(type(print)) --> functionprint(type(type)) --> functionprint(type(true)) --> booleanprint(type(nil)) --> nilprint(type(type(X))) --> string

Figura 4.5: Tipos.

A funcao print imprime, a princıpio, um conjunto de caracteres na tela.A funcao type retorna uma string com o nome do tipo do valor recebido. Repare que, na

ultima linha, a saıda da funcao print e uma string ; isso nao e causado pelo valor de ”X”, massim porque a funcao type retorna uma string.

• nil : e utilizado para indicar a ausencia de um valor; se uma variavel for criada e nenhumvalor for atribuıdo, seu valor sera igual a nil, por exemplo;

• boolean: representa os valores booleanos true e false. Se uma expressao for igual a nil oufalse sera considerada falsa, sendo verdadeira caso contrario (inclusive quando ela for 0);

• number : Lua possui apenas um tipo numerico basico, number, que e ponto flutuante porpadrao;

• string : representa cadeias de caracteres, que podem ser delimitadas por aspas duplas ousimples. Se desejar escrever uma cadeia que se estende por varias linhas, deve-se usar anotacao [[ para abrir a cadeia e ]] para fechar a cadeia;

• userdata: e usado para armazenar dados C em variaveis Lua. Valores deste tipo somentepodem ser criados ou modificados atraves da API de Lua com C. Nesta apostila naoabordaremos a API de Lua com C, se desejar obter maiores informacoes sobre esse assunto:google is your friend ;

• function: tipo que representa funcoes. Em Lua, funcoes sao valores de primeira classe,isso significa que um valor do tipo funcao nao requer nenhum tratamento especial. Assim,a mesma variavel pode ser utilizada para armazenar um valor numerico ou uma funcao;

• thread : representam fluxos de execucao independentes. O tipo thread da suporte ao usode co-rotinas. O uso de co-rotinas nao sera abordado nesta versao da apostila;

• table: representa uma tabela Lua. Tabelas sao o unico mecanismo de estruturacao dedados de Lua. Com tabelas podemos representar arrays, tabelas de sımbolos, conjuntos,grafos, registros, etc;

34

4.2.2 Variaveis

Para declarar uma variavel basta escrever seu nome. Em Lua os nomes de variaveis devemcomecar com letras ou sublinhado.

Para atribuir um valor a uma variavel, utiliza-se o operador de atribuicao =. Operadoresserao melhor estudados na secao 4.3. Um pequeno exemplo pode ser visto na Figura 4.6.

a = 10 -- a e declarada e recebe o valor 10.b, c = "oi", 20 -- b recebe a string "oi" e c recebe 20.d -- o valor de d e nilprint(b,d) --> oi nil

Figura 4.6: Exemplo de atribuicao.

Numa operacao de atribuicao, os valores do lado direito sao avaliados e, posteriormente,atribuıdos as variaveis do lado esquerdo. E possıvel efetuar atribuicao de mais de um valor paramais de uma variavel com um unico comando, como visto na Figura 4.7.

a, b = "ola", "lua"print(a, b) --> oi lua

Figura 4.7: Mais um exemplo de atribuicao.

Se existirem mais valores do que variaveis, os valores extra sao descartados. Caso contrario,as variaveis extras recebem nil.

a, b = "ola", "mundo", "da lua"print(a, b) --> ola mundo

a, b, c = "ola", "mundo"print(a, b, c) --> ola mundo nil

Em Lua as variaveis, por padrao, sao consideradas globais. Para restringirmos o escopo deuma variavel precisamos utilizar a palavra chave local, sendo que o escopo de uma variavel locale determinado pelo bloco de codigo onde ela foi declarada.

Se uma variavel e declarada como local fora de qualquer bloco de codigo, ela sera visıvel emtodo o arquivo. Blocos de codigo serao abordados na secao 4.4.

4.2.3 Pratica

Vamos trabalhar um pouco nossos conhecimentos sobre variaveis.Abra o terminal e execute o interpretador lua em modo interativo. Em seguida execute

alguns exemplos que foram dados nesta secao, sua saıda devera ser semelhante a da Figura 4.8.Reparem na mensagem de erro: stdin:1: ’=’ expected near ’lua’.Ela e causada, propositalmente, por nao fecharmos, com aspas dupla, a declaracao da string

ola.Ao apertar o cursor para cima o interpretador lua exibe os comandos que foram digitados,

assim como o shell do Linux. Portanto para corrigir este erro, basta retornar para o comandoque o causou e fechar a declaracao da string.

35

Figura 4.8: Saıda esperada para os exemplos.

4.3 Operadores

4.3.1 Aritimeticos

Lua oferece suporte para os operadores aritmeticos mais utilizados:

• + Adicao;

• - subtracao;

• * multiplicacao;

• / divisao;

• ^ exponenciacao;

• - negacao.

Na Figura 4.9 e possıvel observar o uso de alguns destes operadores.Se deseja obter maiores informacoes sobre operacoes matematicas com Lua, consulte o ma-

nual de referencia em:http://www.lua.org/manual/5.1/pt/

4.3.2 Relacionais

Lua suporta os seguintes operadores relacionais:

• < Menor que;

36

a = 5 + 2print(a) --> 7

a = 5 - 2print(a) --> 3

b = 3 * 2print(b) --> 6

b = 6 / 2print(b) --> 3

c = 2^(2)print(c) --> 4

d = 4 * -3print(d) --> -12

Figura 4.9: Operadores.

• > maior que;

• <= menor ou igual a;

• >= maior ou igual a;

• == igual a;

• ~= negacao da igualdade (diferente).

Os operadores relacionais sempre retornam true ou false.Lua compara os tipos table, userdata e function por referencia. Dois valores serao conside-

rados iguais apenas se forem exatamente o mesmo objeto.Apos a execucao deste codigo:

a = {}; a.x = 1; a.y = 0b = {}; b.x = 1; b.y = 0c = a

Temos a igual a c, porem diferente de b.

4.3.3 Logicos

Os operadores logicos sao:

• and;

• or;

• not.

37

Em Lua os operadores logicos consideram false e nil como falso e qualquer outra coisa comoverdadeiro.

O operador and retorna o primeiro argumento se ele for falso, caso contrario retorna osegundo. O operador or retorna o primeiro argumento se ele nao for falso, caso contrarioretorna o segundo argumento. Os dois operadores so avaliam o segundo argumento quandonecessario.

Para um melhor entendimento observe o exemplo abaixo:

print(2 and 3) --> 3print(nil and 1) --> nilprint(false and 1) --> falseprint(2 or 3) --> 3print(false or 3) --> 3

O operador not retorna true ou false:

print(not nil) --> trueprint(not false) --> trueprint(not 0) --> falseprint(not not nil) --> false

4.3.4 Concatenacao

Lua permite concatenacao de strings e para isso disponibiliza o operador .. (dois pontos segui-dos). Se na operacao de concatenacao um dos operandos for um numero, este sera convertidopara string.

A operacao de concatenacao cria uma nova string, sem alterar os operandos originais.Exemplo:

print("Ola " .. "mundo " .. "da Lua.") --> Ola mundo da Lua.a = 0 .. 1print(type(a)) --> string

a = "Ola"print(a .. " mundo da Lua.") --> Ola mundo da Lua.print(a) --> Ola

4.3.5 Pratica

Para fixacao dos conceitos apresentados nesta secao iremos escrever um codigo Lua para calculara media ponderada entre dois valores.

Vamos construir nosso primeiro script Lua. Escolha seu editor de textos preferido (sugestoes:gedit ou Vim) e digite o codigo apresentado na Figura 4.10.

Agora salve com um nome especıfico (por exemplo: script.lua).Torne seu script executavel: chmod +x script.luaPara ver o resultado entre no diretorio onde salvou seu script e digite:./script.lua.

38

1 #!/usr/bin/lua

2

3 print("\n\n")

4

5 print("Digite o primeiro valor:")

6 valor1 = io.stdin:read’*l’

7

8 print("Digite o peso:")

9 peso_valor1 = io.stdin:read’*l’

10

11 print("Digite o segundo valor:")

12 valor2 = io.stdin:read’*l’

13

14 print("Digite o peso:")

15 peso_valor2 = io.stdin:read’*l’

16

17 media = ((valor1 * peso_valor1) + (valor2 * peso_valor2))

media = media / (peso_valor1 + peso_valor2)

18

19 print("A media ponderada eh: " .. media .. "\n\n")

Figura 4.10: Mao na massa.

Repare que na linha 6 utilizamos uma funcao da biblioteca de E/S padrao de Lua. Paramaiores detalhes consulte o manual de referencia [3].

Outra observacao importante e que nosso script nao valida os dados digitados, logo umusuario desavisado poderia nao digitar um numero ou mesmo digitar uma string, isso faria seuprograma ”quebrar”.

4.4 Estruturas de controle

Em Lua pode-se utilizar um conjunto, nao tao extenso porem suficiente, de estruturas de con-trole. if e/ou else para condicionais e while, repeat e for para interacao.

Todo bloco de codigo de uma estrutura de controle deve ter um terminador explıcito. Paraif, for, e while o terminador e o end; para o repeat o terminador e o until.

4.4.1 if then else

A estrutura if testa se uma condicao e verdadeira ou falsa. Se a condicao for verdadeira a partethen e executada, senao else e executada. A parte else e opcional.

Veja alguns exemplos na Figura 4.11.

if a < 6 then a = 0 end

if a < b then return a else return b end

if line > MAXLINES thenshowpage()line = 0

end

Figura 4.11: Exemplo de estrutura de controle.

39

Em Lua nao existe a estrutura switch-case. Se voce deseja construir uma estrutura deifs aninhados podera utilizar elseif que e similar a um else seguido por um if. Veja algunsexemplos:

if casa == "azul" thendono = "jose"

elseif casa == "verde" thendono = "manoel"

elseif casa == "amarela" thendono = "maria"

elseif casa == "vermelha" thendono = "madalena"

elseerror("Casa sem dono")

end

4.4.2 while

O while e uma das estruturas de repeticao de Lua. Primeiramente a condicao e testada, sefor falsa nao entra no loop; caso contrario, Lua executa o bloco do loop e avalia novamente acondicao.

Segue um exemplo:

local i = 1while a[i] do

print(a[i])i = i + 1

end

4.4.3 repeat

A estrutura repeat-until repete o que esta em seu bloco de codigo ate a condicao (testada pelountil) ser verdadeira. O exemplo abaixo escreve na tela a primeira linha nao-vazia.

repeatline = os.read()

until line ~= ""print(line)

Repare que a condicao so e testada no final da estrutura, portanto o bloco de codigo e sempreexecutado ao menos uma vez.

4.4.4 for numerico

Essa estrutura poderia ser conhecida como o for tradicional, quem ja programou em C ou Java,por exemplo, observara que sua sintaxe e bem familiar.

40

for var=exp1,exp2,exp3 dobloco de codigo

end

Temos que exp1 e o valor inicial de var. O bloco de codigo sera executado enquanto varfor menor ou igual exp2, no caso de um passo positivo, ou maior ou igual a exp2, no caso deum passo negativo. A exp3 representa o passo do laco (valor incrementado), quando nao eespecificada assume-se que seu valor e 1. Observe alguns exemplos:

for i=1,f(x) do print(i) end

for i=10,1,-1 do print(i) end

A variavel var (no exemplo acima i) e visıvel apenas no corpo da estrutura e nao deve seralterada. Um erro tıpico e presumir que a variavel var existira depois que o loop terminar.

for i=1,100 do print(i) endtest = i -- errado! ‘i’ aqui e global

A construcao correta deveria ser como a apresentada na Figura 4.12.

-- encontrar um valor em uma listalocal found = nilfor i=1,a.n do

if a[i] == value thenfound = i -- salvar o indice do valor (‘i’)break

endendprint(found)

Figura 4.12: for numerico: construcao correta.

4.4.5 for generico

O for generico e utilizado para percorrer os valores retornados por uma funcao iteradora. Osprincipais iteradores oferecidos por Lua sao:

• pairs: percorre as chaves de uma tabela;

• ipairs: percorre os ındices de um array ;

• io.lines: percorre as linhas de um arquivo;

• string.gfind : percorre palavras de uma string ;

Ainda e possıvel escrevermos nossos proprios iteradores, porem isso nao sera abordado nestaapostila.

41

No exemplo da Figura 4.13 a e um array. Para imprimirmos todos os seus valores podemosutilizar um iterador.

for i, v in ipairs (a) do -- i armazena o ındice, v o valorprint (v)

end

Figura 4.13: for generico: exemplo.

Para imprimir todas as chaves de uma tabela t (em qualquer ordem), podemos procedercomo exibido na Figura 4.14.

for k, v in pairs (t) do -- k armazena a chave, v o valorprint (k, v)

end

Figura 4.14: for generico: mais um exemplo.

4.5 Saindo de um bloco

Para sair de um bloco de programas podemos utilizar os comandos break e return. O co-mando break e muito utilizado em estruturas de controle, pois permite terminar e execucao daestrutura.

Com o comando return e possıvel retornar valores de uma funcao ou simplesmente terminarsua execucao. Funcoes serao abordadas na Secao 4.6.

Na utilizacao destes comandos deve-se atentar para o fato de que eles devem ser os ultimoscomandos do bloco de codigo. Observe o exemplo da Figura 4.15.

i = 5while i < 10 do

break -- Erro!i = i + 1

end

Figura 4.15: Exemplo de saıda de bloco.

O codigo da Figura 4.15 nao sera executado corretamente. Existem duas formas para solu-cionar este problema. Podemos reordenar o codigo, para deixar o comando break ou returncomo ultimo comando do bloco, ou criar um novo bloco do-end ao redor do comando. NaFigura 4.16 pode-se observar um exemplo com a segunda abordagem.

4.6 Funcoes

Segue uma pequena definicao.

Em ciencia da computacao, mais especificamente no contexto da programacao,uma funcao (subrotina, procedimento ou mesmo subprograma) consiste numa porcao

42

i = 5while i < 10 do

dobreak -- Ok! break como ultimo comando do bloco

endi = i + 1 -- Atribuic~ao como ultimo comando do bloco ’while’

end

Figura 4.16: Correcao do exemplo de saıda de bloco.

de codigo que resolve um problema muito especıfico, parte de um problema maior (aaplicacao final). [4]

Em Lua as funcoes sao o principal mecanismo para abstracao e expressao. Podem executartanto uma tarefa (conhecido como procedimento ou subrotina) como computar e retornar valores.

4.6.1 Declaracao e execucao

Uma funcao pode ser declarada da forma mostrada na Figura 4.17.

function nome_da_funcao (arg_1, arg_2, ..., arg_n)corpo_da_funcao

end

Figura 4.17: Declaracao de funcao.

As variaveis arg-N sao os parametros da funcao. Em Lua uma funcao pode ter multiplosargumentos, assim como pode nao ter nenhum.

Como exemplo (Figura 4.18), vamos definir uma funcao que recebe dois parametros e retornaa soma deles.

function soma (a, b)local x = a or 1 -- x = 1 se a e falsolocal y = b or 1 -- y = 1 se b e falsoreturn x + y

end

Figura 4.18: Funcoes: exemplo 1.

Repare que existe uma falha nesta funcao. Sabe a resposta? Continue no caminho da luz...A funcao soma possui dois parametros, porem e possıvel chama-la com um numero diferente

de parametros. Se chamarmos a funcao soma com mais parametros do que ele espera, os valoresextras serao descartados. Se a funcao for chamada com um numero menor de parametros, ovalor dos parametros que nao foram fornecidos sera nil. Observe o exemplo da Figura 4.19.

4.6.2 Numero variavel de argumentos

Lua permite a declaracao de funcoes com um numero variavel de argumentos. Para isso bastautilizar tres pontos (...) como argumento da funcao.

43

s = soma(2, 3) -- a = 2, b = 3print(s) --> 5

s = soma(2) -- a = 2, b = nil, y = 1print(s) --> 3

Figura 4.19: Funcoes: exemplo 2.

Para acessar os argumentos que foram passados, utilizamos a notacao ..., para criar umarray onde o primeiro argumento da funcao esta na posicao 1, o segundo na posicao 2 e assimconsecutivamente. Observe o exemplo (Figura 4.20) que mostra uma funcao que recebe umastring e imprime aquelas com tamanho maior que 4.

function maior_que_4 (...)for i, t in ipairs {...} do -- percorre a lista de argumentosif #t > 4 then -- # e o operador de tamanho para cadeia de arrays

print (t)end

endendmaior_que_4 ("abobora", "sol", "lua", "balao") -- Imprime "abobora" e "balao"

Figura 4.20: Funcoes: exemplo 3.

4.6.3 Retorno

Uma funcao pode nao retornar nenhum valor, retornar apenas um valor ou retornar multiplosvalores. Contudo, nem sempre e possıvel obter todos os valores retornados por uma funcao.

Para um melhor entendimento, observe a funcao da Figura 4.21.

function soma_multiplica (a, b)local x = a or 1 -- x = 1 se a e falsolocal y = b or 1 -- y = 1 se b e falsoreturn x + y, x * y

end

Figura 4.21: Exemplo de retorno em funao.

4.6.4 Pratica

Vamos criar uma funcao para testar se uma variavel e do tipo string.Se o valor recebido for do tipo desejado ela deve retornar true, senao retorna false.A definicao da funcao pode ser vista na Figura 4.22.Essa funcao pode ser utilizada em outra parte de seu programa, como mostrado na figura

4.23.

44

function verifica_string(var)if (type(var) == "string") then

return trueelse

return falseend

end

Figura 4.22: Pratica: definicao da funcao....

if(verifica_string(teste)) thenprint "A variavel teste eh do tipo string"

elseprint "A variavel teste NAO eh do tipo string"

end

...

Figura 4.23: Pratica: programa utilizando funcao.

4.7 Tabelas

Em Lua, tabelas sao o unico mecanismo de estrutura de dados existente. Elas implementamarrays, matrizes, conjuntos e diversas outras estruturas. Nesta apostila nao exploraremos todaa potencialidade das tabelas. Para maiores detalhes, consulte o manual [3].

4.7.1 Criacao de tabelas

Tabelas sao criadas utilizando o construtor {} e podem ser criadas de varias formas diferentes.Para criar um tabela vazia basta fazer: tabela = {}.Pode-se tambem criar a tabela ja iniciando alguns valores, como pode ser visto na Figura

4.24.

tabela = {"semana","engenharia",2009}

Figura 4.24: Criando tabela com valores.

Com a execucao do codigo da Figura 4.24, tabela[1] tera a string ”semana”, tabela[2] a string”engenharia”e tabela[3] o valor 2009.

Uma outra forma de inicializar tabelas e como array, neste caso devemos informar o valor ea chave. A Figura 4.25 exemplifica este uso.

tabela = {p="semana",e="engenharia",t=2009,a="UFF"}print(tabela["e"], tabela.t) --> engenharia 2009

Figura 4.25: Criando tabela como array.

45

Apos a execucao do codigo appresentado na Figura 4.25, a tabela tabela possui quatro chaves.Para inserir um novo valor nesta tabela, basta fazer uma nova atrubuicao: tabela.cinco = "peta5".

Ainda podemos inserir valores em uma tabela utilizando a funcao table.insert. Para maioresdetalhes sobre a funcao table.insert consulte o manual [3].

Uma tabela tambem pode conter outras tabelas. A Figura 4.26 exeplifica este uso.

tabela = {peta={cinco=5}}print (tabela.peta.cinco) --> 5

Figura 4.26: Criando tabela que contem outra tabela.

4.7.2 Tamanho de tabelas

E possıvel saber o tamanho de uma tabela, que esta sendo utilizada como array, utilizando ooperador #.

Este operador retorna um ındice n do array onde o valor da posicao n e diferente de nil e ovalor da posicao n + 1 e nil. Evite o uso deste operador em arrays que possam conter valoresnil no meio deles.

E possıvel ver um exemplo de uso do operador # na Figura 4.27.

tabela = {p="semana",e="engenharia",t=2009,a="UFF"}print(#tabela) --> 4table.insert(tabela,"cinco")print(#tabela) --> 5

Figura 4.27: Exemplo de uso do operador #.

4.7.3 Pratica

Nosso objetivo nesta pratica e criar uma funcao que testa alguns valores de uma determinadatabela. Isso sera muito utilizado no restante da apostila.

Primeiro vamos criar nossa tabela (Figura 4.28).

event = {}event.post = {

class = ’ncl’,type = ’attribution’,property = ’myProp’,action = ’start’,value = ’10’

}

Figura 4.28: Pratica: criacao da tabela.

Agora criaremos a funcao que recebera nossa tabela e testara os valores de alguns campos.Pode ser visto na Figura 4.29.

46

function handler(evt)if evt.class ~= ’ncl’ then return endif evt.type ~= ’attribution’ then return endif evt.property ~= ’myProp’ then return end

print("Acao: ", evt.action)print("Valor: ", evt.value)

returnend

Figura 4.29: Pratica: criacao da funcao que testara a tabela.

Na funcao apresentada na Figura 4.29 os campos class, type e property sao testados. Se naocontiverem os valores desejados, a funcao e finalizada. Se os valores desejados forem encontrados,imprime o conteudo dos campos action e value.

A Figura 4.30 exibe o codigo completo.

--tabelaevent = {}event.post = {

class = ’ncl’,type = ’attribution’,property = ’myProp’,action = ’start’,value = ’10’

}

--funcao verificadorafunction handler(evt)

if evt.class ~= ’ncl’ then return endif evt.type ~= ’attribution’ then return endif evt.property ~= ’myProp’ then return end

print("Acao: ", evt.action)print("Valor: ", evt.value)

returnend

--uso da funcaohandler(event) --> start 10

Figura 4.30: Pratica: codigo completo.

O codigo da Figura 4.30 pode parecer nao ter muito sentido neste momento. Nas proximassecoes ele ficara mais claro.

47

Referencias

[1] R. Ierusalimschy, L. H. de Figueiredo, W. Celes. The evolution of Lua. Proceedings of ACMHOPL III (2007) 2-1–2-26.

[2] Grupo de Tecnologia em Computacao Grafica. http://www.tecgraf.puc-rio.br/[3] Manual de Referencia de Lua 5.1. http://www.lua.org/manual/5.1/pt/[4] Wikipedia. http://pt.wikipedia.org/wiki/Subrotina

48

Capıtulo 5

Integracao NCL-Lua

5.1 Introducao

A importancia da integracao entre as linguagens NCL e Lua [1] se deve principalmente ao fatode NCL se tratar de uma linguagem declarativa, pecando, portanto, pela falta de um maiorcontrole das informacoes processadas, o que ja nao acontece com uma linguagem proceduralcomo Lua. Por exemplo, nao e de facil implementacao permitir a entrada de dados por partedo telespectador utilizando apenas NCL. Este capıtulo descreve como e feita essa integracao, aqual permite um aumento do potencial dos programas para a televisao digital.

5.2 Scripts NCLua

Os scripts NCLua usam a mesma abstracao para objetos de mıdia utilizada para imagens, vıdeose outras mıdias. Em outras palavras, um documento NCL apenas relaciona objetos de mıdia,nao importando qual o tipo de seu conteudo. Esses scripts seguem sintaxe identica a de Lua epossuem um conjunto de bibliotecas similar. Ou seja, a linguagem Lua possui adaptacoes parafuncionar embutida em documentos NCL. O arquivo Lua deve ser escrito em um arquivo (comextensao .lua) separado do documento NCL, que apenas o referencia, como qualquer outro node mıdia.

A principal peculiaridade do NCLua esta no fato de que o seu ciclo de vida e controladopelo documento NCL que o referencia, ou seja, fica definido no documento NCL em que instanteo programa Lua se inicia. As funcoes podem receber um valor de tempo como um parametroopcional que pode ser usado para especificar o exato momento que o comando deve ser executado.

O modelo de execucao de um no NCLua e orientado a eventos, isto e, o fluxo da aplicacaoe guiado por eventos externos oriundos do formatador NCL. O acionamento desses eventos orae feito pelo formatador NCL, ora e feito pelo NCLua que sinaliza ao formatador uma mudancainterna. Esse comportamento caracteriza uma ponte de comunicacao bidirecional entre o for-matador e o NCLua.

5.3 Modulos NCLua

As bibliotecas disponıveis para o NCLua estao divididas em quatro modulos essenciais ondecada um exporta um conjunto de funcoes. Esses modulos sao:

• Modulo event: Permite a comunicacao do NCLua com o formatador NCL atraves deeventos.

49

• Modulo canvas: Oferece uma API para desenhar primitivas graficas e imagens.

• Modulo settings: Exporta a tabela settings com variaveis definidas pelo autor do do-cumento NCL e variaveis de ambiente reservadas, contidas no no application/x-ginga-settings.

• Modulo persistent: Oferece uma API para exportar a tabela persistent com variaveisdefinidas em uma area reservada, restrita do middleware.

5.3.1 Modulo event

O modulo event e o modulo mais importante por fazer a ponte entre o documento NCL e oscript NCLua. Para que o NCLua receba um evento do formatador, o script deve registrar pelomenos uma funcao de tratamento de eventos. A partir de entao, qualquer acao tomada pelaaplicacao e apenas em resposta ao evento recebido.

A funcao event.register e usada conforme mostrado na Figura 5.1.

function handler (evt)... -- codigo para tratar os eventosend

event.register(handler) -- registro do tratador

Figura 5.1: Uso da funcao event.register.

Um NCLua tambem pode enviar eventos para se comunicar com o ambiente. Para isso,utiliza-se a funcao event.post, como exibido na fiura 5.2.

event.post (dst; evt)

Figura 5.2: Uso da funcao event.post.

Os eventos sao tabelas Lua simples sendo o campo class responsavel por identificar a classedo evento. Podemos definir cinco classes distintas:

• ncl: Um NCLua se comunica com o documento no qual esta inserido atraves desta classede eventos.

Por exemplo, consideremos que o NCLua recebeu um evento conforme a Figura 5.3.

{class=’ncl’, type=’presentation’, action=’start’}

Figura 5.3: NCLua recebendo evento.

Isso indica que a mıdia .lua ira iniciar sua apresentacao. E para o NCLua postar umevento ao formator, ele pode, por exemplo, proceder conforme exibido na Figura 5.4.

Isso indica que a mıdia .lua ira parar sua apresentacao.

Os campos type e action serao explicados mais adiante.

• key: utilizada para representar o uso do controle remoto pelo usuario.

50

event.post {class=’ncl’, type=’presentation’, action=’stop’}

Figura 5.4: NCLua postando evento.

• tcp: O uso do canal de interatividade e realizado por meio desta classe de eventos.

• sms: envio e recebimento de mensagens de texto.

• user: permite a criacao de eventos proprios. Como eventos desta classe sao para usointerno, nao faz sentido a postagem de seus eventos com o destino igual a ’out’.

Na norma da ABNT [2], pode-se encontrar outros tipos de classes, no entanto estas naoforam aqui mencionadas por ainda nao estarem implementadas na ultima versao do Ginga.

Para a classe de eventos ncl, utilizamos os seguintes campos:

• type: Pode ser do tipo presentation, do tipo attribution ou do tipo selection.

• action: Pode assumir os seguintes valores: start, stop, pause, resume ou abort.

• area ou property: Eventos podem ser direcionados a ancoras especıficas ou ao no comoum todo. Quando ausente, assume o no inteiro.

• value: Recebe o valor da propriedade definida no campo property, no caso onde type e dotipo attribution.

A Figura 5.5 mostra um modelo:

event.post {class = ’ncl’,type = ’attribution’,property = ’myProp’,action = ’start’,value = ’10’,

}

Figura 5.5: NCLua postando evento de atribuicao.

Para a classe de eventos key, utilizamos os seguintes campos:

• type: Deve ser do tipo press ou do tipo release.

• key: Valor da tecla em questao.

Para a classe de eventos user nenhum campo da tabela representando o evento esta definido(alem, claro, do campo class).

51

Funcoes do modulo event

• event.register (pos, f, class): registra a funcao passada como um tratador de eventos.

pos: [number] Posicao de insercao da funcao de tratamento (opcional).

f: [funcao] Funcao de tratamento.

class: [string] Filtro de classe (opcional).

O parametro pos indica a posicao em que f e registrada. Caso nao seja passado, a funcaoregistrada sera a ultima a receber eventos.

A funcao f e a funcao de tratamento de eventos.

O parametro class indica que classe de eventos a funcao deve receber.

A assinatura de f deve ser como mostrado na Figura 5.6.

function f (evt)-- returns boolean

end

Figura 5.6: Funcao de tratamento de eventos.

Onde evt e o evento que, ao ocorrer, ativa a funcao f.

• event.unregister (f): cancela o registro da funcao passada como um tratador de eventos.

f: [funcao] Funcao de tratamento.

Novos eventos nao serao mais passados a f.

• event.post (dst, evt): posta (gera) um evento.

Onde: dst: [string] E o destino do evento.

evt: [table] Evento a ser postado.

O parametro dst pode assumir os valores ’in’ (envio para a propria aplicacao) e ’out’ (enviopara o formatador). Caso seja omitido, assume o valor ’out’.

Retorna:

sent: [boolean] Se o evento foi enviado com sucesso.

err msg: [string] Mensagem em caso de erro.

• event.timer (time, f): cria um timer de time milissegundos e, ao fim deste, chama afuncao f.

Onde:

time: [number] Tempo em milissegundos.

f: [func~ao] Funcao de retomada.

Retorna:

unreg: [func~ao] Funcao que, quando chamada, cancela o timer.

A assinatura de f deve ser:

function f () end

O valor de zero milissegundos e valido.

52

• event.uptimer (time): retorna o numero de milissegundos decorridos desde o inıcio daaplicacao.

Onde:

time: [number] Tempo em milissegundos.

5.3.2 Modulo canvas

Um NCLua tem a possibilidade de fazer operacoes graficas durante a apresentacao de umaaplicacao, tais como desenho de linhas, cırculos, imagens, etc. Tudo isso e possıvel, pois omodulo canvas oferece uma API grafica para ser usada por aplicacoes NCLua.

Quando um objeto de mıdia NCLua e iniciado, a regiao do elemento <media> correspondente(do tipo application/x-ginga-NCLua) fica disponıvel como a variavel global canvas para o scriptLua. Se o elemento de <media> nao tiver nenhuma regiao especificada (propriedades left, right,top and bottom), entao o valor para canvas deve ser estabelecido como ”nil”.

Funcoes do modulo canvas

• canvas:new(width, height): criacao de novo objeto grafico com tamanho especificado.

Onde:

width: [number] Largura do canvas.

height: [number] Altura do canvas.

• canvas:new(image path): uma imagem e passada como parametro.

Onde:

image path: [string] Caminho da imagem.

• canvas:attrSize(): retorna as dimensoes do canvas.

Retorna width e height, nessa ordem. Nao e possıvel alterar as dimensoes de um canvasinstanciado.

• canvas:attrColor(R, G, B ,A): altera a cor do canvas.

As cores sao passadas em RGB.

O argumento A varia de 0 (totalmente transparente) a 255 (totalmente opaco).

As primitivas sao desenhadas com a cor desse atributo e o seu valor inicial e ’0, 0, 0, 255’.

Tambem e possıvel passar diretamente o nome da cor: canvas:attrColor(color_name, A).

Onde ’color_name’ pode assumir os seguintes valores: ’white’, ’aqua’, ’lime’, ’yellow’,’red’, ’fuchsia’, ’purple’, ’maroon’, ’blue’, ’navy’, ’teal’, ’green’, ’olive’, ’silver’, ’gray’ e’black’.

• canvas:attrColor(): retorna as cores do canvas.

Retorna R, G, B e A, nessa ordem.

• canvas:attrClip(x, y, width, height): limita a area do canvas para desenho.

Onde:

x: [number] Coordenada x da area limitada.

53

y: [number] Coordenada y da area limitada.

width: [number] Largura da area limitada.

height: [number] Altura da area limitada.

O valor inicial e o canvas inteiro.

• canvas:attrClip(): retorna as dimensoes da area limitada.

Retorna na ordem: x, y, width e height.

• canvas:attrCrop(x, y, width, height): atributo de corte do canvas.

Onde:

x: [number] Coordenada x da area limitada.

y: [number] Coordenada y da area limitada.

width: [number] Largura da area limitada.

height: [number] Altura da area limitada.

Quando o canvas e composto sobre outro, apenas a regiao de recorte e copiada para ocanvas de destino. O valor inicial e o canvas inteiro.

• canvas:attrCrop(): retorna as dimensoes de corte do canvas.

Retorna na ordem: x, y, width e height.

• canvas:attrFont(face, size, style): altera a fonte do canvas.

Onde:

face: [string] Nome da fonte size: [number] Tamanho da fonte style: [string] Estiloda fonte

As seguintes fontes devem obrigatoriamente estar disponıveis: ’Tiresias’, ’Verdana’.

O tamanho e em pixels e representa a altura maxima de uma linha escrita com a fonteescolhida.

Os estilos possıveis sao: ’bold’, ’italic’ ou ’bold-italic’.

O valor nil assume que nenhum dos estilos sera usado.

• canvas:attrFont(): retorna a fonte do canvas.

Retorna na ordem: face, size e style.

• canvas:attrFlip (horiz, vert): espelhamento do canvas usado em funcoes de composicao.

Onde:

horiz: [boolean] Se o espelhamento for horizontal.

vert: [boolean] Se o espelhamento for vertical.

• canvas:attrFlip (horiz, vert): retorna a configuracao de espelhamento do canvas.

Retorna horiz se for horizontal e vert se for vertical.

• canvas:attrOpacity (opacity): altera a opacidade do canvas.

Onde:

opacity: [number] Novo valor de opacidade do canvas.

54

• canvas:attrOpacity (): retorna a opacidade do canvas.

• canvas:attrRotation (degrees): configura o atributo de rotacao do canvas.

Onde:

degree: [number] Rotacao do canvas em graus (deve ser multiplo de 90).

• canvas:attrRotation (degrees): retorna o atributo de rotacao do canvas.

• canvas:attrScale (w, h): escalona o canvas com nova largura e altura.

Onde:

w: [number] Largura de escalonamento do canvas.

h: [number] Altura de escalonamento do canvas.

Um dos valores pode ser true, indicando que a proporcao do canvas deve ser mantida.

O atributo de escalonamento e independente do atributo de tamanho, ou seja, o tamanhodo canvas e mantido.

• canvas:attrScale (): retorna os valores de escalonamento do canvas.

Retorna na ordem: w e h.

• canvas:drawLine (x1, y1, x2, y2): desenha uma linha.

A linha tem extremidades em (x1,y1) e (x2,y2).

Utiliza a cor especificada em attrColor.

• canvas:drawRect (mode, x, y, width, height): desenha um retangulo.

Onde:

mode: [string] Modo de desenho

x: [numero] Coordenada do retangulo

y: [numero] Coordenada do retangulo

width: [numero] Largura do retangulo

height: [numero] Altura do retangulo

O parametro mode pode receber frame para desenhar a moldura ou fill para preenche-lo.

• canvas:drawRoundRect(mode, x, y, width, height, arcWidth, arcHeight): dese-nha um retangulo com bordas arredondadas.

Onde:

arcWidth: [numero] Largura do arco do canto arredondado

arcHeight: [numero] Altura do arco do canto arredondado

Os outros parametros funcionam da mesma forma que em canvas:drawRect.

• canvas:drawPolygon(mode): desenha um polinomio.

O parametro mode pode receber:

open: para desenhar o polıgono sem ligar o ultimo ponto ao primeiro;

close: para desenhar o polıgono ligando o ultimo ponto ao primeiro;

fill : para desenhar o polıgono ligando o ultimo ponto ao primeiro e colorir a regiao interior.

55

• canvas:drawEllipse (mode, xc, yc, width, height, ang start, ang end): desenhauma elipse.

Onde:

mode: [string] Modo de desenho

xc: [numero] Centro da elipse

yc: [numero] Centro da elipse

width: [numero] Largura da elipse

height: [numero] Altura da elipse

ang start: [numero] Angulo de inıcio

ang end: [numero] Angulo de fim

O parametro mode pode receber arc para desenhar apenas a circunferencia ou fill parapreenchimento interno.

• canvas:drawText (x, y, text): desenha um texto.

Onde:

x: [numero] Coordenada do texto

y: [numero] Coordenada do texto

text: [string] Texto a ser desenhado

Desenha o texto utilizando a fonte configurada em canvas:attrFont().

• canvas:clear (x, y, w, h): limpa o canvas com a cor configurada em attrColor.

Onde:

x: [numero] Coordenada da area de clear

y: [numero] Coordenada da area de clear

w: [numero] Largura da area de clear

h: [numero] Altura da area de clear

Caso nao sejam passados os parametros de area, assume-se que o canvas inteiro sera limpo.

• canvas:flush (): atualiza o canvas apos operacoes de desenho e de composicao.

E suficiente chama-lo apenas uma vez apos uma sequencia de operacoes.

• canvas:compose (x, y, src, [src x, src y, src width, src height]): faz sobre o canvas(canvas de destino), em sua posicao (x,y), a composicao pixel a pixel com src (canvas deorigem).

Onde:

x: [numero] Posicao da composicao

y: [numero] Posicao da composicao

src: [canvas] Canvas a ser composto

src x: [numero] Posicao da composicao no canvas src

src y: [numero] Posicao da composicao no canvas src

src width: [numero] Largura da composicao no canvas src

56

src height: [numero] Altura da composicao no canvas src

Os outros parametros entre colchetes sao opcionais e indicam que parte do canvas srccompor. Quando ausentes, o canvas inteiro e composto.

Essa operacao chama src:flush() automaticamente antes da composicao. E apos a operacao,o canvas de destino possui o resultado da composicao e src nao sofre qualquer alteracao.

• canvas:pixel (x, y, R, G, B, A): altera a cor de um pixel do canvas.

Onde:

x: [numero] Posicao do pixel

y: [numero] Posicao do pixel

R: [numero] Componente vermelha da cor

G: [numero] Componente verde da cor

B: [numero] Componente azul da cor

A: [numero] Componente alpha da cor

• canvas:pixel (x, y): retorna a cor de um pixel do canvas.

Onde os parametros x e y funcionam como em canvas:pixel.

Retorna os valores R, G, B e A, nesta ordem.

• canvas:measureText (text): retorna as coordenadas para o texto passado.

Onde:

text: [string] Texto a ser medido

Retorna dx e dy, largura e altura do texto respectivamente.

Pratica

Vamos fazer um exemplo bem simples para melhor entendermos a utilizacao do modulo event.O nosso exemplo ira mostrar na tela um botao, mas este so aparece por alguns instantes e

depois some. Este botao ira aparecer quatro vezes e o objetivo e clicar nele. Se clicarmos nelepelo menos tres vezes, sera desenhado na tela um retangulo verde e a frase ”You win”, casocontrario sera desenhado um x vermelho e a frase ”You lose”.

No nosso documento NCL, ja criado no Capıtulo 3, precisamos declarar nosso no NCLua eeste deve incluir duas propriedades conforme a figura 5.7.

<media id="clicks" src="clicks.lua"><area id="counter"/><property name="inc"/>

</media>

Figura 5.7: No NCLua com duas propriedades.

A ancora counter, ao ser inicializada, fara o codigo Lua contar quantas vezes o botao foipressionado. A propriedade inc e um incrementador e sera responsavel por somar um ao valorde counter.

O elo para incrementar o contador e acionado na selecao do botao, que deve desaparecer(Figura 5.8).

57

<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>

Figura 5.8: Elo para incrementar o contador.

Conforme mostrado acima, o incremento e acionado por uma simpleAction de set. A acao deset e um apelido para uma acao de start em um evento do tipo attribution, portanto, o eventogerado e apresentado na Figura 5.9.

evt = {class = ’ncl’,type = ’attribution’,property = ’inc’,action = ’start’,value = ’1’,

}

Figura 5.9: Evento gerado pelo link.

Um novo conector foi criado (Figura 5.10).

<causalConnector id="onEndStopStart"><simpleCondition role="onEnd"/><compoundAction operator="seq"><simpleAction role="stop" max="unbounded"/><simpleAction role="start" max="unbounded"/></compoundAction></causalConnector>

Figura 5.10: Novo conector criado.

Ele e responsavel por fazer o elo entre o fim de area04 da mıdia timere o inıcio de counterda mıdia clicks.

Na Figura 5.11 podemos ver como ficou esse elo.

<link xconnector="onEndStopStart"><bind role="onEnd" component="timer" interface="area04"/>

<bind role="stop" component="button"/><bind role="start" component="clicks" interface="counter"/></link>

Figura 5.11: Novo elo.

58

Nosso codigo Lua pode ser visualizado na Figura 5.12.

counter = 0

local counterEvt = {class = ’ncl’,type = ’attribution’,name = ’counter’,}

function handler (evt)if((evt.class == ’ncl’) and (evt.type == ’attribution’)) thenif (evt.name == ’inc’) thencounter = counter + evt.valueevent.post{class = ’ncl’,type = ’attribution’,name = ’inc’,action = ’stop’,value = counter,}end

elseif(evt.label == ’counter’) thenif (counter >= 3) thencanvas:attrFont(’vera’, 20)canvas:attrColor(’green’)canvas:drawText(280, 200, "You win")canvas:drawRect (’frame’, 270, 230, 90, 70)canvas:flush()elsecanvas:attrFont(’vera’, 20)canvas:attrColor(’red’)canvas:drawText(280, 200, "You lose")canvas:drawLine(270, 230, 360, 300)canvas:drawLine(270, 300, 360, 230)canvas:flush()endendend

event.register(handler)

Figura 5.12: Codigo Lua alterado.

59

5.3.3 Modulo settings

Propriedades de um no settings so podem ser modificadas por meio de elos NCL. Nao e permitidoatribuir valores aos campos representando variaveis nos nos settings.

A tabela settings particiona seus grupos em varias subtabelas, correspondendo a cada grupodo no application/x-ginga-settings. Por exemplo, em um objeto NCLua, a variavel do no settings”system.CPU”e referida como settings.system.CPU.

Exemplos de uso (Figura 5.13).

lang = settings.system.languageage = settings.user.ageval = settings.default.selBorderColorsettings.user.age = 18 --> ERRO!

Figura 5.13: Exemplo: modulo settings.

5.3.4 Modulo persistent

Aplicacoes NCLua permitem que dados sejam salvos em uma area restrita do middleware e recu-perados entre execucoes. O exibidor Lua define uma area reservada, inaccessıvel a objetos NCLnao procedurais. Nao existe nenhuma variavel pre-definida ou reservada e objetos proceduraispodem atribuir valores a essas variaveis diretamente.

O uso da tabela persistent e semelhante ao uso da tabela settings, exceto pelo fato de que,neste caso, o codigo procedural pode mudar os valores dos campos.

Exemplos de uso (Figura 5.14).

persistent.service.total = 10color = persistent.shared.color

Figura 5.14: Exemplo: modulo persistent.

60

Referencias

[1] F. Sant’Anna, R. Cerqueira, L.F.G. Soares. NCLua - Objetos Imperativos Lua na LinguagemDeclarativa NCL.

[2] ABNT NBR 15606-5. Televisao digital terrestre - Codificacao de dados e especificacoesde transmissao para radiodifusao digital. Parte 5: Ginga-NCL para receptores portateis - Lin-guagem de aplicacao XML para codificacao de aplicacoes.

61

Apendice A

Exemplos da Apostila

62

<?xml version="1.0" encoding="ISO-8859-1"?><ncl id="exemplo01" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">

<head>

<regionBase><region id="rg_video" left="0" top="0" width="100%"

height="100%" zIndex="1"><region id="rg_button" left="40%" top="40%" width="20%"

height="20%" zIndex="3"/></region>

</regionBase>

<descriptorBase><descriptor id="dp_video" region="rg_video"/><descriptor id="dp_button" region="rg_button" focusIndex="0"/>

</descriptorBase>

<connectorBase><causalConnector id="onBeginStart">

<simpleCondition role="onBegin"/><simpleAction role="start"/>

</causalConnector>

<causalConnector id="onEndStop"><simpleCondition role="onEnd"/><simpleAction role="stop" max="unbounded"/>

</causalConnector>

<causalConnector id="onSelectionSet"><simpleCondition role="onSelection"/><connectorParam name="var"/><simpleAction role="set" value="$var"/>

</causalConnector></connectorBase>

</head>

Figura A.1: Parte 1 do exemplo completo do Capıtulo 3.

63

<body><port component="video" id="inicio"/>

<media id="video" src="video.mpg" type="video/mpeg" descriptor="dp_video"><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"/>

</media>

<media id="button" descriptor="dp_button" src="button.jpg" type="image/jpeg"/>

<media id="clicks" src="clicks.lua"><property name="inc"/><property name="counter"/>

</media>

<link xconnector="onBeginStart"><bind role="onBegin" component="video"/><bind role="start" component="clicks"/>

</link>

<link xconnector="onBeginStart"><bind role="onBegin" component="video" interface="area01"/><bind role="start" component="button"/>

</link><link xconnector="onBeginStart">

<bind role="onBegin" component="video" interface="area02"/><bind role="start" component="button"/>

</link><link xconnector="onBeginStart">

<bind role="onBegin" component="video" interface="area03"/><bind role="start" component="button"/>

</link><link xconnector="onBeginStart">

<bind role="onBegin" component="video" interface="area04"/><bind role="start" component="button"/>

</link>

Figura A.2: Parte 2 do exemplo completo do Capıtulo 3.

64

<link xconnector="onEndStop"><bind role="onEnd" component="video" interface="area01"/><bind role="stop" component="button"/>

</link><link xconnector="onEndStop">

<bind role="onEnd" component="video" interface="area02"/><bind role="stop" component="button"/>

</link><link xconnector="onEndStop">

<bind role="onEnd" component="video" interface="area03"/><bind role="stop" component="button"/>

</link><link xconnector="onEndStop">

<bind role="onEnd" component="video" interface="area04"/><bind role="stop" component="button"/>

</link>

<link xconnector="onSelectionStopSet"><bind role="onSelection" component="button"/><bind role="set" component="clicks" interface="inc">

<bindParam name="var" value="1"/></bind>

</link>

</body></ncl>

Figura A.3: Parte 3 do exemplo completo do Capıtulo 3.

65

--tabelaevent = {}event.post = {

class = ’ncl’,type = ’attribution’,property = ’myProp’,action = ’start’,value = ’10’

}

--funcao verificadorafunction handler(evt)

if evt.class ~= ’ncl’ then return endif evt.type ~= ’attribution’ then return endif evt.property ~= ’myProp’ then return end

print("Acao: ", evt.action)print("Valor: ", evt.value)

returnend

--uso da funcaohandler(event) --> start 10

Figura A.4: Exemplo completo do Capıtulo 4.

66

<?xml version="1.0" encoding="ISO-8859-1"?><ncl id="exemplo01" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile"><head>

<regionBase><region id="rg_video" left="0" top="0" width="100%"

height="100%" zIndex="1"><region id="rg_button" left="40%" top="40%" width="20%"

height="20%" zIndex="3"/></region>

</regionBase>

<descriptorBase><descriptor id="dp_video" region="rg_video"/><descriptor id="dp_button" region="rg_button" focusIndex="0"/>

</descriptorBase>

<connectorBase><causalConnector id="onBeginStart">

<simpleCondition role="onBegin"/><simpleAction role="start"/>

</causalConnector>

<causalConnector id="onEndStop"><simpleCondition role="onEnd"/><simpleAction role="stop" max="unbounded"/>

</causalConnector>

<causalConnector id="onSelectionStopSet"><simpleCondition role="onSelection"/><connectorParam name="var"/><compoundAction operator="seq">

<simpleAction role="stop" max="unbounded"/><simpleAction role="set" value="$var"/>

</compoundAction></causalConnector>

<causalConnector id="onEndStopStart"><simpleCondition role="onEnd"/>

<compoundAction operator="seq"><simpleAction role="stop" max="unbounded"/><simpleAction role="start" max="unbounded"/></compoundAction></causalConnector>

</connectorBase>

</head>

Figura A.5: Parte 1 do exemplo completo do Capıtulo 5.

67

<body><port component="video" id="inicio"/>

<media id="video" src="video.mpg" type="video/mpeg" descriptor="dp_video"><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"/>

</media>

<media id="button" descriptor="dp_button" src="button.jpg" type="image/jpeg"/>

<media id="clicks" src="clicks.lua"><area id="counter"/><property name="inc"/>

</media>

<link xconnector="onBeginStart"><bind role="onBegin" component="video"/><bind role="start" component="clicks"/>

</link>

<link xconnector="onBeginStart"><bind role="onBegin" component="video" interface="area01"/><bind role="start" component="button"/>

</link><link xconnector="onBeginStart">

<bind role="onBegin" component="video" interface="area02"/><bind role="start" component="button"/>

</link><link xconnector="onBeginStart">

<bind role="onBegin" component="video" interface="area03"/><bind role="start" component="button"/>

</link><link xconnector="onBeginStart">

<bind role="onBegin" component="video" interface="area04"/><bind role="start" component="button"/>

</link>

Figura A.6: Parte 2 do exemplo completo do Capıtulo 5.

68

<link xconnector="onEndStop"><bind role="onEnd" component="video" interface="area01"/><bind role="stop" component="button"/>

</link><link xconnector="onEndStop">

<bind role="onEnd" component="video" interface="area02"/><bind role="stop" component="button"/>

</link><link xconnector="onEndStop">

<bind role="onEnd" component="video" interface="area03"/><bind role="stop" component="button"/>

</link><link xconnector="onEndStopStart">

<bind role="onEnd" component="video" interface="area04"/><bind role="stop" component="button"/><bind role="start" component="clicks" interface="counter"/></link>

<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>

</body></ncl>

Figura A.7: Parte 3 do exemplo completo do Capıtulo 5.

69

counter = 0

local counterEvt = {class = ’ncl’,type = ’attribution’,name = ’counter’,}

function handler (evt)if((evt.class == ’ncl’) and (evt.type == ’attribution’)) thenif (evt.name == ’inc’) thencounter = counter + evt.valueevent.post{class = ’ncl’,type = ’attribution’,name = ’inc’,action = ’stop’,value = counter,}end

elseif(evt.label == ’counter’) thenif (counter >= 3) thencanvas:attrFont(’vera’, 20)canvas:attrColor(’green’)canvas:drawText(280, 200, "You win")canvas:drawRect (’frame’, 270, 230, 90, 70)canvas:flush()elsecanvas:attrFont(’vera’, 20)canvas:attrColor(’red’)canvas:drawText(280, 200, "You lose")canvas:drawLine(270, 230, 360, 300)canvas:drawLine(270, 300, 360, 230)canvas:flush()endendend

event.register(handler)

Figura A.8: Parte 4 do exemplo completo do Capıtulo 5.

70

Apendice B

Ferramentas

B.1 Composer

O Composer [1] e uma ferramenta de autoria hipermıdia desenvolvida pelo Laboratorio Te-leMıdia [2] do Departamento de Informatica da PUC-Rio. Ele e um editor grafico que fornecevarias visoes integradas para a criacao de documentos NCL. As diversas visoes facilitam aedicao de documentos NCL por programadores com pouco conhecimento da linguagem NCL.A apresentacao de um documento em diversas visoes fornece ao usuario uma maior intuicao nodesenvolvimento de suas aplicacoes. A Figura B.1 apresenta o Composer e as diversas visoesque o usuario pode trabalhar.

Figura B.1: Ferramenta de autoria Composer.

A versao atual do Composer permite ao usuario trabalhar com visoes Estrutural 1, Temporal2, Textual 3 e de Leiaute 4.

A Visao Estrutural (Structural View) apresenta os nos e os elos entre os nos. A Figura B.2apresenta a visao estrutural de um documento NCL. Um no de mıdia e ilustrado por um ıconerepresentando seu conteudo. Uma composicao e desenhada como uma caixa (cubo) e, quandoela e aberta (expanded), como um retangulo, com nos filhos e links dentro.

71

Nessa visao um autor pode graficamente criar, editar e remover nos de mıdia, contextos eelos, bem como definir suas propriedades. Ele pode tambem expandir e fechar composicoes.

Figura B.2: Visao estrutural da ferramenta Composer.

A Visao Temporal (Temporal View) ilustra o sincronismo temporal entre os nos de mıdia, e asoportunidades de interatividade. A visao temporal preserva tanto quanto possıvel o paradigmade linha de tempo. Usando essa visao, a autoria pode ser feita colocando objetos de mıdiasobre um eixo de tempo, mas preservando os relacionamentos relativos entre eles. A Figura B.3apresenta a visao temporal de um documento hipermıdia que exibe uma imagem iconeInteracaodurante um determinado segmento de apresentacao da mıdia videoPrinc.

72

Figura B.3: Visao temporal da ferramenta Composer.

A Visao de Leiaute (Layout View) exibe as regioes da tela onde as mıdias do documentopoderao ser apresentadas. Ela e dividida em duas partes. Considerando que uma regiao podeser especificada como filha de outra regiao, do lado esquerdo da visao de leiaute e mostrado aorganizacao hierarquica de regioes. Do lado direito e exibido a representacao espacial. Quandoa regiao pai e movida, todas as regioes filhas tambem sao movidas, preservando suas posicoesrelativas. A Figura B.4 apresenta a visao de leiaute de um documento hipermıdia que contemtres regioes: a tela inteira (rgTV ), uma area para exibir vıdeos (rgVideo) e uma area que exibeum logo (rgLogo).

Figura B.4: Visao de leiaute da ferramenta Composer.

A Visao Textual (Textual View) faz a apresentacao textual do codigo NCL. Nessa visao, ousuario pode editar diretamente o codigo NCL como em um editor de texto. Ela oferece algumasfuncionalidades para a edicao de documentos NCL, como visao em arvore do codigo, coloracao

73

de palavras reservadas da linguagem. A figura B.5 apresenta a visao textual.

Figura B.5: Visao textual da ferramenta Composer.

As visoes do Composer sao integradas, pois sempre que sao feitas alteracoes em uma visao,elas sao refletidas nas demais visoes da ferramenta.

B.2 NCL Eclipse

NCL Eclipse e um editor XML/NCL desenvolvido como um plug-in para a plataforma Eclipse[3] que oferece diversas funcionalidades centradas nas necessidades de autores de aplicacoesNCL, tais como a sugestao de codigo automatica e contextual, validacao de documentos NCL,coloracao de elementos XML e de palavras reservadas da linguagem.

Ao ser desenvolvido como um plug-in para o Eclipse o NCL Eclipse permite que todo esseambiente, ja bem conhecido dos programadores, seja reutilizado e facilita a integracao comoutras ferramentas de desenvolvimento para a TV Digital, como, por exemplo, o Lua Eclipse[4].

Uma das funcionalidades interessantes no desenvolvimento de programas com o NCL Eclipsee a identificacao e marcacao de erros no momento da autoria, permitindo que o autor identifiqueo erro de forma rapida, visto que diminui a necessidade de executar o documento para evidenciarque o mesmo possui erros sintaticos e/ou semanticos. O NCL Eclipse reusa o NCL Validatorcom o objetivo de identificar e marcar erros em documentos NCL, em tempo de autoria.

O processo de instalacao do NCL Eclipse e muito simples e segue o padrao da instalacao deplug-ins para o Eclipse. No site http://laws.deinf.ufma.br/ ncleclipse/documentacao.htm existeum tutorial basico sobre como instalar e usar o NCL Eclipse.

A Figura B.6 apresenta uma visao geral do NCL Eclipse com um documento NCL recemcriado.

74

Figura B.6: Visao geral do NCL Eclipse: a) visao textual; b) visao de problemas; c) visaooutline.

A Figura B.7 apresenta um documento com um erro, a linha do erro e sublinhada e umadescricao pode ser visualizada na Problem View .

Na autoria de documentos o autor pode utilizar a opcao de autocomplete. O programadorprecisa apenas colocar o cursor em um trecho de texto interno ao conteudo de um determinadoelemento e teclar “Ctrl + espaco” para visualizar uma sugestao dos possıveis elementos filhos.A Figura B.8 apresenta a opcao de autocomplete.

75

Figura B.7: Identificacao e marcacao de erros em documentos NCL.

Figura B.8: Sugestao de codigo contextual automatica (Autocomplete).

Referencias

[1] Construindo Programas Audiovisuais Interativos Utilizando a NCL 3.0 e a Ferramenta Com-poser - 2a. edicao (versao 3.0), PUC-Rio, 31/07/2007.

76

[2] TeleMıdia (http://www.telemidia.puc-rio.br). Acessado em 14 de outubro de 2009.[3] Eclipse (http://www.eclipse.org). Acessado em 19 de outubro de 2009.[4] LuaEclipse (http://luaeclipse.luaforge.net). Acessado em 19 de outubro de 2009.

77