<< Voltar Índice Próxima >>

NAVEGAÇÃO, MANIPULAÇÃO DE CONTEÚDO E USO DE FUNÇÕES DA PÁGINA

Navegação

A navegação na Navi é bastante simples, criaremos um exemplo em que pressionando o tecla "V" será aberta a página do google. 

case OIS::KC_V:
    naviMgr->getNavi("naviTeste")->navigateTo("http://www.google.com");
    back = false;
    break;

 

No método "keyReleased()" adiciona-se o código acima. Onde obtem-se a janela a qual iremos realizar a navegação, com a função "getNavi()" e passamos como parâmetro o nome da janela. E com "navigateTo()" indicamos o endereço o qual a janela deverá exibir.

Outras funções que também podem ser utilizadas são:

navigateBack() -> voltar uma página.
navigateForward() -> avançar uma página.
navigateStop() -> interromper o carregamento de uma página

Manipulação de Conteúdo

A Navi possibilita que acessemos os dados na página, como caixa de texto simples através de javascript. Ela também utiliza uma biblioteca chamada Mootools que possibilita que vários recursos dinâmicos possam ser acrescentados as páginas criadas. Veja nesta página demonstrações do que ela pode fazer. 

<html>
<head>
	<script type="text/javascript" src="Navi.js"></script>
</head>
<body>

	<div id="conteudo">
		<p>What is your name?</p>
		<input type="text" id="CaixaTexto" />
	</div>

        <br>

	<div id="recebeTexto">
	</div>

</body>
</html>

 

Abra o Bloco de Notas(Notepad) e coloque o código acima, e salve o arquivo como "paginaDinamica.html" no diretório do conteúdo da Navi. Na página primeiramente incluimos o arquivo "Navi.js" que contém as funções a serem usadas pela Navi. Criamos uma tag <div> com id(identificação do elemento HTML para acesso) de nome "conteudo". Essa div conterá uma caixa de texto de id "CaixaTexto" onde digitaremos um nome qualquer.

Nas páginas dinâmicas atuais, que usam AJAX por exemplo, não se usa mais tabelas para diagramação do layout, e sim a tag div. Pois atualiza-se apenas um elemento da página, normalmente algo contido na <div>. Dessa forma criamos uma tag <div> para receber o nome digitado na caixa de texto. 

naviMgr->createNavi("naviTeste", "local://paginaDinamica.html", NaviPosition(Center), 250, 250, 0);

 

Vá até o construtor da classe AplicationListener e mude a página a qual iremos acessar agora, e também as suas dimensões, como mostrado acima. 

case OIS::KC_RETURN:
    std::string nome = naviMgr->getNavi("naviTeste")->evaluateJS("$('CaixaTexto').getValue()");
    Ogre::LogManager::getSingleton().logMessage("User's name is: " + nome);
    naviMgr->getNavi("naviTeste")->evaluateJS("$('recebeTexto').setHTML('Hello ?')",
          NaviUtilities::Args(nome));
    break;

 

Coloque o trecho de código acima, no método "keyReleased()", para quando a tecla Enter for pressionada, ele obtenha o nome digitado, grave no arquivo de log da Ogre e escreva ele na tela.

Para termos acesso aos elementos que constituem a página usamos a função "evaluateJS()", apartir da janela desejada(getNavi("naviTeste")). Como parâmetro definimos qual elemento, e que propriedade queremos dele. No código acima, queremos da tag "CaixaTexto" que é onde digitamos o nome, o seu conteúdo através da função "getValue()" para ser atribuido a string "nome". A Mootools possui outras funções utilizadas para a manipulação dos elementos da página, elas estão listadas neste link.

O nome digitado é então gravado no arquivo de log da Ogre através da linha Ogre::LogManager::getSingleton().logMessage("User's name is: " + nome); .

Agora escreve-se o nome novamente na janela, usando o método "evaluateJS()" que acessa a tag <div> "recebeTexto" e com a função "setHTML()" definimos o texto que aparecerá. Onde a interrogação representa um parâmetro, um argumento que é definido usando NaviUtilities::Args(nome). Teste e verifique se o exemplo funcionou.

Uso de Funções da Página

Algumas ações que desejamos realizar na nossa interface podem ser realizadas apenas ou mais facilmente usando código de páginas javascript. Nesses casos deve-se usar funções na própria página da interface. Para mostrar como isso ocorre, crie um novo arquivo HTML com o código abaixo.

Salve na pasta onde estão as outras páginas da Navi, com o nome "paginFuncoes.html" e atualize ela no código fonte para que ela seja carregada durante a execução. 

<html>
<head>
	<script type="text/javascript" src="Navi.js"></script>

	<script type="text/javascript">
	function addChatMessage(nickname, message)
	{
		var chat = $('chatBox');

		// adiciona "(nickname): message" para a janela de chat
		chat.setHTML(chat.innerHTML + "<b>(" + nickname + ")</b>: " + message + "<br/>");

		// rola para baixo
		chat.scrollTo(0, chat.getSize().scrollSize.y);
	}
	</script>

	<style type="text/css">
	#chatBox {
		width: 350px;
		height: 250px;
		border: 2px solid grey;
		padding: 10px;
		font-family: sans-serif;
		overflow: auto;
	}
	</style>
</head>
<body>
	<div id="chatBox">
	</div>

</body>
</html>

 

A função que irá se comunicar com o nosso código em C/C++ é a "addChatMessage()". Basicamente ela receberá como parâmetros o nome do jogador(nickname) e a mensagem que serão adicionados a janela de chat. A página também contém um pequeno trecho de CSS em que modifica o layout da tag <div> de id "chatBox". 

case OIS::KC_RETURN:
    std::string nick = "Irado";
    std::string message = "Ola mundo !!!";
    naviMgr->getNavi("naviTeste")->evaluateJS("addChatMessage(?, ?)", NaviUtilities::Args(nick)(message));
    break;

 

O código acima deve ser colocado no método "keyReleased()", afim de que quando a tecla ENTER for pressionada, seja mandado o nick do jogador e a mensagem a serem enviados para a página. Usa-se a função "evaluateJS()" para ter acesso a "addChatMessage()" e para enviar os parâmetros. Compile e teste o programa.

Italo Mendes
italo.ribeiro@gmail.com

<< Voltar Índice Próxima >>