Componente Navigator em Javascript
Autor: Leandro Peçanha Scardua | Publicado: 2012-11-03T23:25:00-02:00

Estou desenvolvendo um sistema que possui uma tela com vários botões primeiro, próximo, anterior e último. Eu queria uma funcionalidade parecida com a das telas em access, em que os registros podem ser navegados por um array de objetos. Assim, aproveitando as características de orientação à objeto do javascript e padrão de projeto observer, eu desenvolvi o seguinte código:

//-------------------------------&nbsp; inicio do codigo javascript --------------------------------------------
// obj é um array de objetos. Pode ser array de array. Mas o método atualizar que será definido fora da //classe deve conhecer o objeto que corresponderá a cada item do array
function Navegador( obj )
{
&nbsp;&nbsp;&nbsp; this.lst = obj;
&nbsp;&nbsp;&nbsp; this.ptr;
&nbsp;&nbsp;&nbsp; this.ind_ptr ;

&nbsp;&nbsp;&nbsp; this.primeiro = function(){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.ind_ptr = 0;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.ptr = this.lst[this.ind_ptr];
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.atualizar(this.ptr); // imprime um objeto de cada vez
&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; this.anterior = function(){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (!this.ind_ptr == 0){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.ind_ptr--;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.ptr = this.lst[this.ind_ptr];
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.atualizar(this.ptr); // imprime um objeto de cada vez
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; this.goto = function(indice){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var qde = len(this.lst);

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if(indice &lt; 0 || indice &gt;= qde)
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; alert('Indice Inválido!');
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; else{
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.ind_ptr = indice;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.ptr = this.lst[this.ind_ptr];
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.atualizar(this.ptr);&nbsp; // imprime um objeto de cada vez
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; this.proximo = function(){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var qde = len(this.lst_questao_prova);

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if(!this.ind_ptr == qde -1){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.ind_ptr++;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.ptr = this.lst[this.ind_ptr];
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.atualizar(this.ptr);&nbsp; // imprime um objeto de cada vez
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; this.ultimo = function(){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var qde = len(this.lst);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.ind_ptr = qde -1;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.ptr = this.lst[this.ind_ptr];
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; this.atualizar(this.ptr);&nbsp; // imprime um objeto de cada vez
&nbsp;&nbsp;&nbsp; }

&nbsp;&nbsp;&nbsp; this.atualizar ; // esqueleto da funcao que exibe um objeto de cada vez. Será definido na criação
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // do objeto Navegador
}

// -------------------------------- fim do codigo javascript ---------------------------------------------

No código acima, a função atualizar não está implementada. Isso porque os compnentes a serem atualizados (textox, radiobutton, texto) não são conhecidos de dentro do componente. Essa função deve ser implementada quando for utilizada p ex:

// -------------------------- codigo javascript de exemplo&nbsp; ----------------------------------------------

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function atual( obj_questao )
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; alert('deu certo!');
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // define a implementacao do metodo atualizar
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Navegador.prototype.atualizar = atual;

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var c = new Questao('a','b','c','d','e',2);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var arr = new Array();
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; arr[0] = c;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var n = new Navegador(arr);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //dentro do metodo primeiro ocorre uma chamada ao metodo atualizar
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; n.primeiro();
//------------------------------------fim do exemplo -----------------------------------------------------

Como poder ser visto, a implementação ficou simples, estável e show de bolice pura!!!!!