Desenvolvimento de
Aplicações para TV Digital em
Ginga-NCL
Carlos de Salles Soares Neto
JIM 2010 – Jornada de Informática do Maranhão
Agenda
• Ambiente declarativo Ginga-NCL
– ~ 90 minutos
• Linguagem Lua
– ~ 90 minutos
• Aplicações NCLua
– ~ 60 minutos
JIM 2010 – Jornada de Informática do Maranhão
Ambiente Declarativo Ginga-NCL
JIM 2010 – Jornada de Informática do Maranhão
Arquitetura Básica do
Middleware Ginga
Sistema Operacional
Ginga – Núcleo Comum
JVM
Ginga – Serviços Específicos
Ponte
Máquina de Apresentação
(Ginga-NCL)
Máquina de Execução
(Ginga-J)
JIM 2010 – Jornada de Informática do Maranhão
Paradigmas de Programação
• Declarativo
ex: NCL, HTML, SQL
“o que fazer”
linguagens de domínio específico
• Imperativo
ex: Lua, C++, Java
“como fazer” (algoritmo)
relação direta com a CPU
JIM 2010 – Jornada de Informática do Maranhão
Paradigma Imperativo
• valor
• variável
• expressão
• função
• comando
JIM 2010 – Jornada de Informática do Maranhão
Como definir um documento
hipermídia? “Quero tocar...”
o quê? nós
onde? regiões
como? descritores
quando? elos e conectores
JIM 2010 – Jornada de Informática do Maranhão
7
O quê? Nós
áudio
vídeo
imagem
JIM 2010 – Jornada de Informática do Maranhão
8
Onde? Regiões
rgVideo1
JIM 2010 – Jornada de Informática do Maranhão
9
Como? Descritores
dVideo1
JIM 2010 – Jornada de Informática do Maranhão
10
video1
dVideo1
rgVideo1
JIM 2010 – Jornada de Informática do Maranhão
11
Quando? Elos e conectores
video1
audio1
Quando video1
terminar, inicia audio1
Quando audio1 iniciar,
inicia imagem1
elo
imagem1
JIM 2010 – Jornada de Informática do Maranhão
12
Quando? Elos e conectores
video1
C
onEnd
A
Start
audio1
C
Quando video1
terminar, inicia audio1
Quando audio1 iniciar,
inicia imagem1
elo
onBeginS
tart
A
conector
C
papel de condição
A
papel de ação
imagem1
JIM 2010 – Jornada de Informática do Maranhão
13
Estrutura: contextos
body
ctx1
audio1
video1
abertura
imagem1
JIM 2010 – Jornada de Informática do Maranhão
14
Como acessar uma mídia num contexto?
(Como entrar/sair de um contexto?)
ctx1
pVideo1
O vídeo video1 do
contexto ctx1 é
acessível através
da porta pVideo1
video1
audio1
imagem1
JIM 2010 – Jornada de Informática do Maranhão
15
Visões de um documento –
Estrutural
• portas, nós e elos
lBeginVideo1StartTitulo1
(onBeginStart )
pInicio
video1
body
titulo1
lEndVideo 1StopTitulo1
(onEndStop)
JIM 2010 – Jornada de Informática do Maranhão
16
Visões de um documento –
Leiaute
• posicionamento e dimensões iniciais dos
objetos de mídia
rgTV: 0, 0 (100 % x 100 %)
rgTitulo 1: 25%,5%( 50%x15%)
rgVideo 1:
25%, 25%( 50%x50%)
JIM 2010 – Jornada de Informática do Maranhão
17
Visões de um documento –
Temporal
• objetos de mídia dispostos no tempo
pInicio
rgVideo1
video 1
onBeginStart
onEndStop
rgTitulo1
titulo1
JIM 2010 – Jornada de Informática do Maranhão
18
Visões de um documento –
Espacial
• retratos do documento em certos instantes
de tempo
1
2
3
video 1 @
rgVideo 1
video 1 @ rgVideo 1
video 1 @ rgVideo 1
imagem 1 @
rgImagem 1
JIM 2010 – Jornada de Informática do Maranhão
19
Ferramenta de autoria
Composer
JIM 2010 – Jornada de Informática do Maranhão
20
Ferramenta de autoria Composer
• Visão Estrutural
pVideo1
ctx1
video1
audio1
imagem1
JIM 2010 – Jornada de Informática do Maranhão
21
Estrutura de um documento NCL –
Perfil TV digital
<?xml version="1.0" encoding="ISO-8859-1"?>
<ncl id="exemplo01"
xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">
<head>
</head>
<body>
cabeçalho do documento
1
corpo do documento
2
</body>
</ncl>
JIM 2010 – Jornada de Informática do Maranhão
22
<head>
<regionBase>
...
</regionBase>
cabeçalho
regiões - onde
<descriptorBase>
...
</descriptorBase>
<connectorBase>
...
</connectorBase>
d1
d2
d3
descritores - como
conectores - quando
</head>
<body>
corpo
<port id="pInicio" component="video1" />
<!-- contextos e nós de mídia --> contextos e mídias – o quê
<!-- elos -->
1
E
onEnd
S
Start
onEnd
E
E
Start
onEnd
Start
S
S
2
audio1
video1
imagem1
elos - quando
</body>
JIM 2010 – Jornada de Informática do Maranhão
23
Meu primeiro documento
hipermídia
• reprodução de um vídeo simples
– sem elos de sincronismo
– sem elos de interatividade
exemplo01.ncl
JIM 2010 – Jornada de Informática do Maranhão
24
Meu primeiro documento hipermídia
• reprodução de um vídeo simples
– sem elos de sincronismo
– sem elos de interatividade
body
pInicio
video1
dVideo1
rgVideo1
JIM 2010 – Jornada de Informática do Maranhão
25
Planejando um documento NCL
• visões
– estrutural
– de leiaute
– temporal
JIM 2010 – Jornada de Informática do Maranhão
26
Exemplo 1 – Visão estrutural
pInicio
video1
body
JIM 2010 – Jornada de Informática do Maranhão
27
Exemplo 1 – Visão de leiaute
rgTV: 0, 0 (100%x100%)
rgVideo1:
25%,25% (50% x 50%)
JIM 2010 – Jornada de Informática do Maranhão
28
Exemplo 1 – Visão temporal
video01
JIM 2010 – Jornada de Informática do Maranhão
29
Construindo um documento NCL
<?xml ...?>
<ncl ...>
cabeçalho
</regionBase>
<descriptorBase>
d1
d2
d3
audio1
video1
imagem1
E
onEnd
S
Start
onEnd
E
E
</connectorBase>
</head>
2
<body>
<head>
<regionBase>
</descriptorBase>
<connectorBase>
corpo
1
Start
onEnd
Start
S
S
</body>
</ncl>
JIM 2010 – Jornada de Informática do Maranhão
30
Sobre o atributo id
• Todo elemento NCL deve possuir um
identificador único em todo o documento
(independente do seu tipo)
• O id deve começar sempre por uma letra
• Isto é inválido:
– <region id=“video1” .../> ( … )
– <media id=“video1” ... />
– <region id=“rgVideo1” .../> ( ... )
• Isto é válido:
– <media id=“video1” ... />
JIM 2010 – Jornada de Informática do Maranhão
31
Como definir um documento
hipermídia?
o quê
“tocar”?
nós
quando? elos e conectores
onde? regiões
como? descritores
JIM 2010 – Jornada de Informática do Maranhão
32
Exemplo 1 – região
<regionBase>
<region id="rgVideo1" left="25%" top=“25%" width=“50%"
height=“50%" />
</regionBase>
25%
25%
rgVideo1
(50% x 50%)
JIM 2010 – Jornada de Informática do Maranhão
33
Regiões
(onde?)
25%
<head>
25%
regiaoFundo
...
<regionBase>
<!-- regiões da tela onde as mídias
regiaoCentro
(50% x 50%)
são apresentadas -->
<region id=“regiaoFundo”>
<region id=“regiaoCentro”
left=“25%” top=“25%” width=“50%”
height=“50%” />
</region>
</regionBase>
...
</head>
JIM 2010 – Jornada de Informática do Maranhão
35
Regiões: Posição e dimensão
• posição (relativa à região-pai):
– left, top
– right, bottom
rgPai
top
• dimensões
– width, height
rgFilho
• unidades
height
– pixel (default), %
left
right
width
bottom
JIM 2010 – Jornada de Informática do Maranhão
36
Regiões: Sobreposição
• zIndex
– quanto maior, mais no topo
– quando não é definido assume o valor default 0 (zero)
zIndex = 1
zIndex = 2
zIndex = 3
JIM 2010 – Jornada de Informática do Maranhão
37
Como definir um documento
hipermídia?
o quê
“tocar”?
nós
quando? elos e conectores
onde? regiões
como? descritores
JIM 2010 – Jornada de Informática do Maranhão
d1
d2
d3
38
Exemplo 1 – descritor
<descriptorBase>
<descriptor id="dVideo1" region="rgVideo1" />
</descriptorBase>
dVideo1
rgVideo1
JIM 2010 – Jornada de Informática do Maranhão
39
Descritores
(como?)
• Definem:
– como um nó vai ser inicialmente apresentado
• e.g. volume de áudio (soundLevel),
borda de uma mídia de texto (border)
– em que região o nó será apresentado
JIM 2010 – Jornada de Informática do Maranhão
40
Descritores
(como?)
<head>
...
<descriptorBase>
<!--descritores que definem como as mídias são apresentadas->
<descriptor id=“dImagem1” region=“rgImagem1” />
<descriptor id="dVideo1" region="rgVideo1">
<descriptorParam name="soundLevel"
value=“70%" />
</descriptor>
</descriptorBase>
...
</head>
JIM 2010 – Jornada de Informática do Maranhão
41
Descritores: atributos
• id
• region
– onde?
• explicitDur
– formato: 9.9s
• freeze
– true/false
• player
– e.g. sintetizador de voz; texto simples; texto
formatado
JIM 2010 – Jornada de Informática do Maranhão
42
Descritores: parâmetros
• parâmetros que são usados pelo exibidor
da mídia
• definidos pelo elemento descriptorParam
dentro de um descriptor
• formato:
<descriptorParam
name="nome_do_parametro"
value="valor_do_parametro" />
JIM 2010 – Jornada de Informática do Maranhão
43
Descritores: parâmetros
• left, top, width, height, bottom, right
– mesma definição das regiões: esquerda, topo, altura,
largura, margem inferior, margem direita
• location
– par de valores para left e top, separados por vírgula
• valores absolutos: “300,300” (em pixels)
• valores relativos à região pai: “10%,35%”
• size
– par de valores para width e height
• bounds
– quatro valores para left, top, width e height
JIM 2010 – Jornada de Informática do Maranhão
44
Descritores: parâmetros
• background
– cor de fundo (ex.: white, black etc)
• visible
– “true” para visível e “false” para não-visível
• transparency
– valor real entre 0 e 1 ou inteiro entre 0 e 100%, onde:
• 0 é totalmente opaco
• 0.5 é 50% transparente
• 1 é totalmente transparente
• fit
– define opções de preenchimento da região da mídia
JIM 2010 – Jornada de Informática do Maranhão
45
Descritores: parâmetros
• scroll
– “none”, “horizontal”, “vertical”, “both”, “automatic”
• style
– localizador de um stylesheet
• soundLevel: volume de som
– número real no intervalo de 0 a 1 (ou de 0 a 100%)
• 0 para mudo
• 0.5 ou 50% para metade do volume
• 1 ou 100% para volume original
• balanceLevel, trebleLevel e bassLevel
– número real no intervalo de 0 a 1 (ou de 0 a 100%)
JIM 2010 – Jornada de Informática do Maranhão
48
Como definir um documento
body
hipermídia?
o quê? nós
video1
quando? elos e conectores
onde? regiões
como? descritores
JIM 2010 – Jornada de Informática do Maranhão
49
Exemplo 1 – nó de mídia
<body>
...
<media id="video1" src="media/video1.mpg”
descriptor="dVideo1“ />
</body>
video1
dVideo1
JIM 2010 – Jornada de Informática do Maranhão
50
O quê?
Nós de mídia (ou conteúdo)
• definem um objeto de
mídia a ser
apresentado
• vídeo, áudio, texto,
imagem, nclet, lua,
settings
<media id="video1"
type="video/mpeg"
src="media/video1.mpg"
descriptor="dVideo1“ />
video1
dVideo1
<media ...>
video1
JIM 2010 – Jornada de Informática do Maranhão
51
•
Nós de mídia – atributos
id
– Identificador único do nó
•
type
– vídeo, áudio, texto, imagem, settings, nclet, lua
•
src
– caminho para o arquivo de mídia
• relativo ao diretório do arquivo NCL
• absoluto, através de URI
•
descriptor
– id do descritor que controla a apresentação deste objeto de mídia
•
refer
– referência a outro nó previamente definido (re-uso)
<media id=“video1” type=“video/mpeg”
src=“http://server.com/media/v1a35aZ97.mpg”
descriptor=“dVideo1” />
<media id=“btVolta” refer=“btAzul” />
JIM 2010 – Jornada de Informática do Maranhão
52
Tipos de nós de mídia
Tipo de mídia
Extensão
Tipo de mídia
Extensão
text/html
htm, html
audio/ac3
text/plain
txt
audio/mp3
mp3
text/css
css
audio/mp2
mp2
text/xml
xml
audio/mpeg
mpeg, mpg
image/bmp
bmp
audio/mpeg4
mp4, mpg4
image/png
png
video/mpeg
mpeg, mpg
image/gif
gif
application/x-ginga-NCLua
lua
image/jpeg
jpg, jpeg
application/x-ginga-NCLet
xlt, xlet, class
image/mpeg
audio/basic
application/x-ginga-settings sem arquivo
wav
application/x-ginga-time
JIM 2010 – Jornada de Informática do Maranhão
sem arquivo
53
Exemplo 1 – contexto body e porta
<body>
<port id="pInicio" component="video1“ />
...
</body>
body
pInicio
video1
JIM 2010 – Jornada de Informática do Maranhão
54
Nós de contexto
<body id=“doc01”>
• estruturam o documento
• compostos de nós de
contexto, mídia e/ou
escolha (switch)
<context...>
<context id=“quizz01”> ... </context>
doc01
quizz01
• a seção body também
representa um contexto
<body...>
JIM 2010 – Jornada de Informática do Maranhão
55
Nós de contexto – atributos
• atributos
– id, refer
• todo nó de contexto precisa definir uma ou mais
portas (port) para acesso externo
• o elemento body de um documento NCL é um nó de
contexto
body
pInicio
video1
JIM 2010 – Jornada de Informática do Maranhão
56
Porta
• define os acessos aos componentes de um
contexto
• formato:
pInicio
– <port id=“id_da_porta”
component=“id_do_componente_mapeado“
interface=“interface_do_componente" />
body
video1
• ponto de interface
– uma porta de um outro contexto ou
– uma âncora de um nó de conteúdo
• exemplos:
– <port id="pInicio1" component="video1" />
– <port id=“pInicio3” component=“video1” interface=“aCena2” />
– <port id=“pInicio2” component=“ctxCapitulo1” interface=“pSecao3 />
JIM 2010 – Jornada de Informática do Maranhão
57
Exemplo 1 – Código NCL
<?xml version="1.0" encoding="ISO-8859-1"?>
<ncl id="exemplo01" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">
<head>
<regionBase>
<region id="rgTV">
<region id="rgVideo1" left="25%" top="25%" width="50%" height="50%" />
</region>
</regionBase>
<descriptorBase>
<descriptor id="dVideo1" region="rgVideo1" />
</descriptorBase>
</head>
<body>
<port id="pInicio" component="video1“ />
<media id="video1" src="media/video1.mpg" descriptor="dVideo1“ />
</body>
</ncl>
JIM 2010 – Jornada de Informática do Maranhão
58
Exemplo 1 – Dúvidas?
visão temporal
pInicio
pInicio
rgVideo1
video 1
video1
body
visão espacial
rgTV: 0, 0 (100%x100%)
rgVideo1:
25%,25% (50% x 50%)
JIM 2010 – Jornada de Informática do Maranhão
video 1 @ rgVideo1
59
Exemplo 2 – Sincronizando dois
objetos de mídia (vídeo e texto)
• exemplo02.ncl
JIM 2010 – Jornada de Informática do Maranhão
60
Exemplo 2 – Sincronizando dois
objetos de mídia (vídeo e texto)
• Quando o vídeo começar, exibe o título
• Quando o vídeo terminar, esconde o título
JIM 2010 – Jornada de Informática do Maranhão
61
Exemplo 2 – Sincronizando dois
objetos de mídia (vídeo e texto)
lBeginVideo1StartTitulo1
(onBeginStart )
pInicio
video1
body
titulo1
lEndVideo 1StopTitulo1
(onEndStop)
JIM 2010 – Jornada de Informática do Maranhão
62
Exemplo 2 – Sincronizando dois objetos de
mídia (vídeo e texto)
pInicio
rgVideo1
video 1
onBeginStart
onEndStop
rgTitulo1
titulo 1
elos de sincronism o:
conectores
onBeginStart e
onEndStop
titulo 1 @ rgTitulo1
video1 @ rgVideo1
JIM 2010 – Jornada de Informática do Maranhão
63
Exemplo 2 – Mudanças nas regiões
<region id=“regiaoFundo”>
pInicio left=“25%” top=“5%” width=“50%”
<region id=“rgTitulo1”
height=“15%” /> rgTitulo1
titulo1
<region id=“rgVideo1” left=“25%” top=“25%” width=“50%”
height=“50%” />
onBegin1StartN
onEnd1StopN
</region>
rgVideo1
video 1
elos de sincronism o:
conectores
onBegin1StartN e
onEnd1StopN
visão temporal
visão espacial
titulo 1 @ rgTitulo1
video 1 @ rgVideo1
JIM 2010 – Jornada de Informática do Maranhão
64
Exemplo 2 – Mudanças nos
<descriptorBase>
descritores
<descriptor id="dVideo1" region="rgVideo1" />
•<descriptor
acrescentar
descritor
id=“dTitulo1” region=“rgTitulo1” />
• acrescentar mídia do título
</descriptorBase>
dTitulo1
rgTitulo1
JIM 2010 – Jornada de Informática do Maranhão
65
Exemplo 2 – Acrescentando
mídia
<body>
...
<media id="video1" src="media/video1.mpg"
descriptor="dVideo1“ />
<media id=“titulo1” src=“media/titulo1.png” descriptor=“dTitulo1” />
</body>
titulo1
dTitulo1
JIM 2010 – Jornada de Informática do Maranhão
66
Como definir um documento
hipermídia?
o quê
“tocar”?
nós
quando? elos e conectores
E
onEnd
S
Start
onEnd
E
E
Start
onEnd
Start
onde? regiões
como? descritores
JIM 2010 – Jornada de Informática do Maranhão
67
S
S
Relacionamento entre os nós
video1
?
titulo1
JIM 2010 – Jornada de Informática do Maranhão
68
Conector onBeginStart
...inicia também a
exibição do titulo1
video1
titulo1
Quando
iniciar a
exibição do
video1
JIM 2010 – Jornada de Informática do Maranhão
69
Conector onBeginStart
video1
...inicia também a
exibição do objeto
de mídia mapeado
no papel start.
conector
onBegin
bind
C
onBeginStart
start
A
bind
titulo1
Quando iniciar a
exibição do objeto
de mídia mapeado
no papel onBegin...
JIM 2010 – Jornada de Informática do Maranhão
70
Elo lVideo1Titulo1Start: Iniciando um texto
junto com o vídeo
<link
id=“lVideo1Titulo1Start”xconnector=“connectors#onBeginStart”>
<bind component=“video1” role=“onBegin”>
<bind component=“titulo1” role=“start”>
</link>
video1
conector
onBegin
bind
C
onBeginStart
start
A
bind
titulo1
JIM 2010 – Jornada de Informática do Maranhão
71
Relacionamento entre os nós
video1
onBeginStart
?
titulo1
JIM 2010 – Jornada de Informática do Maranhão
72
Elo lVideo1Titulo1Stop: Terminando o texto
junto com o vídeo
<link id=“lVideo1Titulo1Stop” xconnector=“connectors#onEndStop”>
<bind component=“video1” role=“onEnd”>
<bind component=“titulo1” role=“stop”>
</link>
video1
conector
onEnd
bind
C
onEndStop
stop
A
bind
titulo1
JIM 2010 – Jornada de Informática do Maranhão
73
Relacionamento entre os nós
onBeginStart
video1
onEndStop
titulo1
JIM 2010 – Jornada de Informática do Maranhão
74
Bases de Conectores
<connectorBase>
<importBase alias=“connectors”
documentURI=“conectores.conn" />
</connectorBase>
onBegin
C
conector
conector
onBeginStart
onEndStop
start
A
onEnd
C
JIM 2010 – Jornada de Informática do Maranhão
stop
A
75
Elos
na seção head
<connectorBase>
<importBase alias=“alias_base” documentURI="connectorBase.conn" />
</connectorBase>
<link id=“id_elo” xconnector=“alias_base#id_conector”>
na seção body
<bind component=“id_c1” role=“papel_1”/>
...
conector
<bind component=“id_cn” role=“papel_n”/>
id_c1
bind
id_conector
papel_1
C
papel_2
A
...
</link>
A
JIM 2010 – Jornada de Informática
bind
id_c2
• Aplicações em Ginga-NCL paraATV Digital
do• Maranhão
papel_n
76
Elos
<connectorBase>
<importBase alias=“alias_base”
documentURI="connectorBase.ncl" />
</connectorBase>
<link id=“id_elo” xconnector=“alias_base#id_conector”>
<bind component=“id_c1” role=“papel_1”/>
...
<bind component=“id_cn” role=“papel_n”/>
id_c1
bind
id_conector
papel_1
C
papel_2
A
...
</link>
conector
A
JIM 2010 – Jornada de Informática
bind
id_c2
• Aplicações em Ginga-NCL paraATV Digital
do• Maranhão
papel_n
77
xconnector pode ser
•id_conector (mesmo documento)
•alias_base#id_conector (base é importada)
Elos
<connectorBase>
<importBase alias=“alias_base” documentURI=“exemplo02.conn" />
</connectorBase>
<link id=“id_elo” xconnector=“alias_base#id_conector”>
<bind component=“id_c1” role=“papel_1”/>
...
<bind component=“id_cn” role=“papel_n”/>
id_c1
bind
id_conector
papel_1
C
papel_2
A
...
</link>
conector
A
JIM 2010 – Jornada de Informática
bind
id_c2
• Aplicações em Ginga-NCL paraATV Digital
do• Maranhão
papel_n
78
Elos e conectores
(quando?)
• elo (link)
– associa nós através de conectores
Legenda :
N1
M1 (R3)
N3
Ci
M1 (R1)
nó de contexto
porta (ponto de
interface)
Con1
M1(R2)
C1
Ni
nó de mídia ou
conteúdo
âncora ou atributo
mapeamento Mi
(papel Ri)
N2
Coni
conector
papel de cada nó
relacionado
JIM 2010 – Jornada de Informática do Maranhão
79
Que eventos podemos utilizar nos
conectores?
stop |
abort
paused
start |
resume
pause
only
start
prepared
stop (natural end)
occurring
natural e
abort
JIM 2010 – Jornada de Informática do Maranhão
80
Exercício: criar exemplo 2 a partir do exemplo
<?xml version="1.0" encoding="ISO-8859-1"?> 1
<ncl id="exemplo02" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">
<head>
<regionBase>
<region id="rgTV">
<region id="rgVideo1" left="25%" top="25%“ width="50%" height="50%" />
____________________________________________________________
</region>
</regionBase>
<connectorBase>
<importBase alias=“connectors” documentURI=“exemplo02.conn" />
</connectorBase>
<descriptorBase>
<descriptor id="dVideo1" region="rgVideo1" />
____________________________________________________________
</descriptorBase>
</head>
<body>
<port id="pInicio" component="video1“ />
<media id="video1" src="media/video1.mpg" descriptor="dVideo1“ />
____________________________________________________________
____________________________________________________________
</body>
</ncl>
JIM 2010 – Jornada de Informática do Maranhão
81
Exemplo 2 – Dúvidas?
pInicio
rgVideo1
video 1
onBeginStart
onEndStop
rgTitulo1
titulo 1
elos de sincronism o:
conectores
onBeginStart e
onEndStop
titulo1 @ rgTitulo1
video1 @ rgVideo1
JIM 2010 – Jornada de Informática do Maranhão
82
Nó de Mídia NCLua
<media id=“meuCodigoLua”
src=“luaFile.lua
descriptor=“luaDesc”>
<area id=“myId” label=“myLabel”/>
<property name=“myName”/>
</media>
• Como NCL se comunica com Lua e viceversa?
JIM 2010 – Jornada de Informática do Maranhão
www.lua.org
JIM 2010 – Jornada de Informática do Maranhão
NCLua
• Módulos adicionais
• Comunicação NCL <-> Lua
• Modelo de execução
• Exemplos
JIM 2010 – Jornada de Informática do Maranhão
Módulos Adicionais
• e ve n t
– comunicação bidirecional
• c a nv a s
– primitivas gráficas
• s e tt in g s , pe rs is t e n t
– acesso a variáveis persistentes
• n c le dit
– edição do documento NCL
JIM 2010 – Jornada de Informática do Maranhão
Comunicação NCL-Lua
JIM 2010 – Jornada de Informática do Maranhão
Paradigma de Eventos
•
•
•
•
Multiplexador
Apenas um evento é tratado por vez
Processamento deve ser rápido
Lua é bastante apropriada:
– tabelas
– closures
– corotinas
JIM 2010 – Jornada de Informática do Maranhão
Paradigma de Eventos
•
•
•
•
•
•
Loop
M
princial (Main loop)
Fila
)
de eventos (Event queue)
Entregador
)
(Dispatcher)
Tratador
)
(Handler)
Gerador de eventos
Eventos
JIM 2010 – Jornada de Informática do Maranhão
Xlet vs NCLua
public interface Xlet
{
public
p void initXlet(XletContext ctx)
f
throws XletStateChangeException;
public
p void startXlet()
throws XletStateChangeException;
public void pauseXlet();
public
p void destroyXlet(boolean unc)
throws XletStateChangeException;
}
e
-- initialization
...
function hdlr (evt)
-- NCL events
if evt.action == 'start' then
...
end
-- key events
if key.value == '1' then
...
end
end
event.register(hdrl)
• Application Manager
• Formatador NCL
• multi-threaded
• event-driven
JIM 2010 – Jornada de Informática do Maranhão
Módulo de Eventos
• event.register(hdlr)
e
• event.post(dst,
e
evt)
• Eventos são tabelas comuns
• event.unregister(hdlr)
e
• event.timer(time,
e
func)
• event.uptime()
e
JIM 2010 – Jornada de Informática do Maranhão
Classes de Eventos
• Comunicação NCL
– c la s s : 'n c l'
– ty pe : 'pre s e n ta tio n ', 'a ttrib u tio n '
– a c tio n: 's ta rt', 's to p', 's e t', 'pa u s e ',
's e t'
– la b e l: '', 'fi m ', 'fa s e 1 ', ...
{ class='ncl', type='presentation', action='start',
label=‘anchorLabel' }
JIM 2010 – Jornada de Informática do Maranhão
Registrando um tratador
...
function tratador(evt)
...
end
event.register(tratador)
JIM 2010 – Jornada de Informática do Maranhão
Representação de evento em
NCLua
evt = {
class = ‘key’,
type = ‘press’,
key = ‘RED’
}
JIM 2010 – Jornada de Informática do Maranhão
Evento postado por um NCLua para
sinalizar a um documento seu fim natural
event.post {
class = ‘ncl’,
type = ‘presentation’,
action = ‘stop’
}
JIM 2010 – Jornada de Informática do Maranhão
Máquina de Estado de NCL
paused
stop |
abort
pause
start
start |
resume
stop | natural endoccurring
sleeping
prepared
abort
JIM 2010 – Jornada de Informática do Maranhão
Classes de Eventos
• Classe ncl:
– Usada na comunicação entre um NCLua e o
documento NCL que contém o objeto de mídia.
• Classe key:
– Representa o pressionamento de teclas do controle
remoto pelo usuário.
• Classe tcp:
– Permite acesso ao canal de interatividade por meio
do protocolo TCP.
• Classe sms:
– Usada para envio e recebimento de mensagens SMS
em dispositivos móveis.
JIM 2010 – Jornada de Informática do Maranhão
Classes de Eventos
• Classe edit:
– Permite que os comandos de edição ao vivo sejam
disparados a partir de scripts NCLua.
• Classe si:
– Fornece acesso a um conjunto de informações
multiplexadas em um fluxo de transporte e
transmitidas periodicamente por difusão.
• Classe user:
– Através dessa classe, aplicações podem estender
sua funcionalidade criando seus próprios eventos.
JIM 2010 – Jornada de Informática do Maranhão
Classes de Eventos - detalhes
• Teclas do controle
– c la s s : 'ke y '
– ty pe : 'pre s s ' e 're le a s e '
– ke y : 'R E D', 'A ', '1 ', ...
– {c la s s ='ke y ', t y pe ='pre s s ', ke y ='R E D'}
• Eventos internos
– c la s s : 'u s e r'
– any : any
– { c la s s ='u s e r', da t a ={k 1 =v 1 ,k 2 =v 2 } }
JIM 2010 – Jornada de Informática do Maranhão
Recebimento de eventos pelo
NCLua
<link xconnector="onBeginStart">
<bind role="onBegin" component="videoId"/>
<bind role="start"
component="luaId"/>
</link>
Arquivo NCL que contém o objeto NCLua
-- Evento recebido pelo tratador do NCLua no
-disparo do elo:
evt = {
class = 'ncl',
type
= 'presentation',
action = 'start'
}
Arquivo NCLua
JIM 2010 – Jornada de Informática do Maranhão
Envio de eventos pelo NCLua
<link xconnector="onBeginStart">
<bind role="onEnd" component="luaId"/>
<bind role="start" component="imagemId"/>
</link>
Arquivo NCL que contém o objeto NCLua
-- O elo acima será disparado quando o evento a seguir
-- for postado pelo NCLua 'luaId':
event.post {
class = 'ncl',
type
= 'presentation',
action = 'stop'
}
Arquivo NCLua
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 1 - Ciclo de Vida de
Objetos NCLua
• Três nós NCLua são disparados:
– O primeiro NCLua executa indefinidamente.
– O segundo NCLua termina a si próprio assim
que é iniciado.
– O terceiro NCLua termina a si próprio três
segundos após ser iniciado.
• Botões identificam os estados dos nós
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 1 – Visão Temporal e
Espacial
lua1
∞
verde1
∞
lua2
∞
vermelho2
lua3
visão temporal
verde3
vermelho3
∞
3 segundos
visão espacial
verde1
vermelho2
verde3
verde1
vermelho2
JIM 2010 – Jornada de Informática do Maranhão
vermelho3
Exemplo 1 – Visão Estrutural
pInicio
start
onBegin
start
lua1
onBegin
lua3
onBegin
onEnd
onEnd
lua2
start
stop
verde1
start
onBegin
onEnd
start
verm elho1
start
stop
verde3
stop
verde2
start
verm elho2
JIM 2010 – Jornada de Informática do Maranhão
start
verm elho3
Exemplo 1 - Execução
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 2 – Contador de
cliques
• Botão “Clique aqui” em quatro momentos
diferentes durante a execução da
aplicação.
– Se o usuário selecioná-lo com o controle
remoto por pelo menos três vezes é exibida a
mensagem: “Você ganhou”.
– Caso contrário, é exibida a mensagem: “Você
perdeu”.
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 2 – Visão Temporal e
Espacial
cliques
area01
area02
aqui
aqui
∞
temp area03
∞
area04 resultado
aqui
aqui
ganhou ∞
perdeu
visão temporal
visão espacial
aqui
ganhou
OU
perdeu
JIM 2010 – Jornada de Informática do Maranhão
∞
Exemplo 2 – Visão Estrutural
pInicio
resultado
temp
onEnd
area01
onBegin
area02
onBegin
area03 area04
onBegin
onEnd
onEnd
( ... )
start
stop
start
stop
onBegin
and
and
test
contador < 3
stop
test
contador >= 3
aqui
onSelection
contador
inc
start
cliques
stop
stop
onBegin
start
start
start
ganhou
stop
stop
perdeu
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 2 – Integração NCL e
NCLua
<media id="cliques" src="cliques.lua">
<area label="inc"/>
<property name="contador"/>
</media>
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 2 – Integração NCL e
NCLua
local contador = 0
function tratador (evt)
contador = contador + 1
local evtContador = { class = 'ncl‘, type = 'attribution',
name = 'contador‘, value = contador
}
evtContador.action = 'start'
event.post(evtContador)
…
end
event.register(tratador)
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 2 – Em Execução
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 2 - Lições
• Em NCL puro:
– explosão de elos
• Em Lua:
– uma variável e um método
• Uso de uma propriedade para
comunicação NCL e NCLua
• Lua é mais simples e concisa para fazer
operações matemáticas!
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 3 – Gráficos e
Controle Remote
• Jogo com interação pelo controle remoto.
• São apresentadas duas imagens:
– Logo NCL
– Logo LUA
• Objetivo: levar o logo LUA até o Logo
NCL.
• Uso do pacote canvas e event
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 3 – Visão Espacial e
Temporal
∞
lua
visão tem poral
visão espacial
chegou
ganhou
∞
tem po do m ovim ento que o usuário
faz do logotipo NCL
lua
ganhou
JIM 2010 – Jornada de Informática do Maranhão
lua
Exemplo 3 – Visão Estrutural
pInicio
chegou
lua
onBegin
start
ganhou
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 3 – Em Execução
JIM 2010 – Jornada de Informática do Maranhão
Exemplo 4 – Animações
•
•
•
•
Animação de um cavalo correndo
Uso de frames
Eventos da classe 'user‘
Três abordagens:
– Função sleep()
– Temporizadores
– Corrotinas
JIM 2010 – Jornada de Informática do Maranhão
Conclusão
•
•
•
•
•
•
•
API minimalista, primitivas básicas
Especificação é pequena e sucinta
Implementação pequena
Mecanismos x Política
Não define um modelo fixo de uso
Abstrações/Frameworks 100% em Lua
Players e aplicações nativas em Lua
JIM 2010 – Jornada de Informática do Maranhão
www.lua.org
JIM 2010 – Jornada de Informática do Maranhão
Download
