Ginga NCL: Criando um menú basico com navegação


Obviamente existe diversas outras maneiras de fazer um menu mais bem elaborado que este, mas esse é um exemplo bem simplificado do processo de criação de menus, posicionamento de imagens, troca de imagens quando houver foco, retirar a borda que destaca o item selecionado e ainda realizar a navegação por entre os itens do menu utilizando teclas de navegação, em nosso exemplos seta para cima e seta para baixo.

[source lang="xml"]

<?xml version="1.0" encoding="ISO-8859-1"?>
<!--
Author: Luiz Arão Araújo Carvalho
Site: www.redrails.com.br
Data: 07/12/2011
Contato: luizcarvalho@redrails.com.br / @LuizCarvalho

-->
<ncl id="main" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">
<head>
<transitionBase>
<transition id="transFade" type="fade"/>
</transitionBase>
<regionBase>
<region id="rgMainVideo" width="100%" height="100%" zIndex="0"/>
<region id="rgLogo" width="128" height="38" top="3%" right="3%" zIndex="0"/>
<region id="rgMenuGroup" width="22%" height="100%" left="5%" top="5%">
<region id="rgItem1" left="0" top="0" width="104" height="102"/>
<region id="rgItem2" left="0" top="109" width="104" height="102"/>
<region id="rgItem3" left="0" top="218" width="104" height="102"/>
<region id="rgItem4" left="0" top="327" width="104" height="102"/>
</region>
</regionBase>
<descriptorBase>
<descriptor id="descMainVideo" region="rgMainVideo"/>
<descriptor id="descLogo" region="rgLogo"/>
<descriptor id="descMenuI1" region="rgItem1" focusIndex="1" moveDown="2" moveUp="4"
focusSrc="media/menu/bt_0004_RED-PRESSED.png" focusBorderWidth="0"/>

<descriptor id="descMenuI2" region="rgItem2" focusIndex="2" moveDown="3" moveUp="1"
focusSrc="media/menu/bt_0005_BLUE-PRESSED.png" focusBorderWidth="0"/>

<descriptor id="descMenuI3" region="rgItem3" focusIndex="3" moveDown="4" moveUp="2"
focusSrc="media/menu/bt_0006_GREEN-PRESSED.png" focusBorderWidth="0"/>

<descriptor id="descMenuI4" region="rgItem4" focusIndex="4" moveDown="1" moveUp="3"
focusSrc="media/menu/bt_0007_YELLOW-PRESSED.png" focusBorderWidth="0"/>
</descriptorBase>
</head>
<body>
<port id="pMVideo" component="mMainvideo"/>
<port id="pLogo" component="mLogo"/>
<port id="pItem1" component="mItem1"/>
<port id="pItem2" component="mItem2"/>
<port id="pItem3" component="mItem3"/>
<port id="pItem4" component="mItem4"/>
<media id="mMainvideo" src="media/video.mp4" descriptor="descMainVideo"/>
<media id="mLogo" src="media/espn.png" descriptor="descLogo"/>
<media id="mItem1" src="media/menu/bt_0000_RED.png" descriptor="descMenuI1"/>
<media id="mItem2" src="media/menu/bt_0001_BLUE.png" descriptor="descMenuI2"/>
<media id="mItem3" src="media/menu/bt_0002_GREEN.png" descriptor="descMenuI3"/>
<media id="mItem4" src="media/menu/bt_0003_YELLOW.png" descriptor="descMenuI4"/>
</body>
</ncl>

[/source]

[download id="18"]