Fundamentos e Padrões
3.5 Adicionando o Uso de Contextos
<bindParam name="varSet" value="0,0,100%,100%"/>
</bind>
</link>
</body>
</ncl>
Listagem 3.20 O Primeiro João com sincronismo por interação.
A Figura 3.6 ilustra mais dois momentos da exibição, o início do aparecimento do ícone e o momento da apresentação da propaganda, obtidos durante a execução da aplicação na implementação de referência do middleware Ginga-NCL.
Figura 3.6 Cenas da aplicação O Primeiro João com interatividade.
onBegin Start
Stop onBegin
Start
onBegin
Start
Start
onEnd Set Stop
size
Start Setsize onBegin
Start
Stop
onEnd
onSelection onSelection
Figura 3.7 Cenas da aplicação O Primeiro João usando contextos.
Note, na Figura 3.7, que não é possível acessar diretamente objetos de mídia dentro de um contexto. Como visto no Capítulo 2, o acesso deve ser feito passando pelas portas, que são responsáveis por exportar o que é visível dentro de um contexto por relacionamentos externos. Portanto, nós devemos não só incluir os elementos <media> “icon” e “shoes” dentro de um elemento
<context>, como também redefinir os três relacionamentos definidos na seção anterior. Mais ainda, note que um dos relacionamentos pode ser definido dentro do próprio contexto, uma vez que só envolve elementos que são seus filhos. Assim, a definição do contexto fica como ilustrado na Listagem 3.21.
<context id="advert">
<port id="pIcon" component="icon"/>
<port id="pShoes" component="shoes"/>
<media id="icon" src="../media/icon.png"
descriptor="iconDesc"/>
<media id="shoes" src="../media/shoes.mp4"
descriptor="shoesDesc"/>
<link id="lBeginShoes"
xconnector="conEx#onKeySelectionStopStart">
<bind role="onSelection" component="icon">
<bindParam name="keyCode" value="RED"/>
</bind>
<bind role="start" component="shoes"/>
<bind role="stop" component="icon"/>
</link>
</context>
Listagem 3.21 Uso do elemento <context> na definição da propaganda da chuteira.
Note que o contexto oferece duas portas para o mundo exterior: uma para seu componente “icon”, que será usada como entrada no comando de início da apresentação do ícone e como saída no comando para o redimensionamento do vídeo da animação; e uma porta para o componente
“shoes”, que será usada como saída no comando para restaurar o vídeo da animação em suas dimensões originais.
Os três relacionamentos definidos na seção anterior foram desmembrados em quatro, para que um relacionamento seja definido dentro do contexto. Esse relacionamento, identificado como “lBeginShoes” na Listagem 3.21, especifica que ao ser selecionado (condição “onSelection”) o ícone da chuteira, por meio do botão vermelho do controle remoto, a propaganda deve iniciar (ação “start” sobre o componente “shoes”) e a figura do ícone deve findar sua exibição (ação “stop” sobre o componente “icon”).
Os outros três relacionamentos restantes são especificados como filhos do elemento <body>, substituindo os três relacionamentos definidos na seção anterior, como ilustra a Listagem 3.22, que apresenta o novo programa para essa nova versão. Note os novos relacionamentos “lIcon”, “lAdvert”,
“lEndAdvert”.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Exemplo de uso de contexto -->
<ncl id="contextExample"
xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">
<head>
<regionBase>
<region id="backgroundReg" width="100%" height="100%"
zIndex="1"/>
<region id="screenReg" width="100%" height="100%"
zIndex="2">
<region id="frameReg" left="5%" top="6.7%" width="18.5%"
height="18.5%" zIndex="3"/>
<region id="iconReg" left="87.5%" top="11.7%"
width="8.45%" height="6.7%" zIndex="3"/>
<region id="shoesReg" left="15%" top="60%" width="25%"
height="25%" zIndex="3"/>
</region>
</regionBase>
<descriptorBase>
<descriptor id="backgroundDesc" region="backgroundReg"/>
<descriptor id="screenDesc" region="screenReg"/>
<descriptor id="photoDesc" region="frameReg"
explicitDur="5s">
</descriptor>
<descriptor id="audioDesc"/>
<descriptor id="dribleDesc" region="frameReg"/>
<descriptor id="iconDesc" region="iconReg"
explicitDur="6s"/>
<descriptor id="shoesDesc" region="shoesReg"/>
</descriptorBase>
<connectorBase>
<importBase documentURI="../causalConnBase.ncl"
alias="conEx"/>
</connectorBase>
</head>
<body>
<port id="entry" component="animation"/>
<media id="background" src="../media/background.png"
descriptor="backgroundDesc"/>
<media id="animation" src="../media/animGar.mp4"
descriptor="screenDesc">
<area id="segDrible" begin="12s"/>
<area id="segPhoto" begin="41s"/>
<area id="segIcon" begin="45s" end="51s"/>
<property name="bounds"/>
</media>
<media id="choro" src="../media/choro.mp4"
descriptor="audioDesc"/>
<media id="drible" src="../media/drible.mp4"
descriptor="dribleDesc"/>
<media id="photo" src="../media/photo.png"
descriptor="photoDesc"/>
<context id="advert">
<port id="pIcon" component="icon"/>
<port id="pShoes" component="shoes"/>
<media id="icon" src="../media/icon.png"
descriptor="iconDesc"/>
<media id="shoes" src="../media/shoes.mp4"
descriptor="shoesDesc"/>
<link id="lBeginShoes"
xconnector="conEx#onKeySelectionStopStart">
<bind role="onSelection" component="icon">
<bindParam name="keyCode" value="RED"/>
</bind>
<bind role="start" component="shoes"/>
<bind role="stop" component="icon"/>
</link>
</context>
<link id="lMusic" xconnector="conEx#onBeginStart_delay">
<bind role="onBegin" component="animation"/>
<bind role="start" component="background">
<bindParam name="delay" value="5s"/>
</bind>
<bind role="start" component="choro">
<bindParam name="delay" value="5s"/>
</bind>
</link>
<link id="lDrible" xconnector="conEx#onBeginStart">
<bind role="onBegin" component="animation"
interface="segDrible"/>
<bind role="start" component="drible"/>
</link>
<link id="lPhoto" xconnector="conEx#onBeginStart">
<bind role="onBegin" component="animation"
interface="segPhoto"/>
<bind role="start" component="photo"/>
</link>
<link id="lEnd" xconnector="conEx#onEndStop">
<bind role="onEnd" component="animation"/>
<bind role="stop" component="background"/>
<bind role="stop" component="choro"/>
</link>
<link id="lIcon" xconnector="conEx#onBeginStart">
<bind role="onBegin" component="animation"
interface="segIcon"/>
<bind role="start" component="advert" interface="pIcon"/>
</link>
<link id="lAdvert" xconnector="conEx#onKeySelectionSet_var">
<bind role="onSelection" component="advert"
interface="pIcon">
<bindParam name="keyCode" value="RED"/>
</bind>
<bind role="set" component="animation" interface="bounds">
<bindParam name="var" value="5%,6.67%,45%,45%"/>
</bind>
</link>
<link id="lEndAdvert" xconnector="conEx#onEndSet_var">
<bind role="onEnd" component="advert" interface="pShoes"/>
<bind role="set" component="animation" interface="bounds">
</bind>
</link>
</body>
</ncl>
Listagem 3.22 O Primeiro João com uso de contextos.