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

Posted on : 08-12-2011 | By : Luiz Carvalho | In : Desenvolvimento, TVD

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.



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

Projeto Final em Lua (196)