Navegando na treeview do ASP.Net com setas do teclado

Palavras-chaves

TreeView, ASP.Net, Teclado, Setas, Javascript

Introdu��o

A treeview serve para navegar entre n�s em uma estrutura de �rvore divididos entre pais e filhos, essa estrutura � muito usada quando n�o se sabe a dimens�o dos n�s. Essa navega��o s� � dispon�vel com o mouse no componente nativo do ASP.Net a partir da vers�o 2.0. O artigo mostra uma forma de adaptar a navega��o em uma treeview do ASP.Net utilizando as setas do teclado e a tecla enter para ativar ou expandir o item atrav�s dos eventos Javascript, o que exige um trabalho maior para adaptar aos diversos browsers existentes.

Exemplo

O exemplo ser� feito no Visual Studio Team System 2008 e a linguagem C#. O exemplo tamb�m se aplica ao Visual Studio 2005 e VB.Net. Vamos aos passos para criar o projeto:

Passo 1

Abra o Visual Studio 2008, clique no menu Novo / Projeto, seleciona o tipo de projeto WEB e o template ASP.NET Web Application e chame sua aplica��o de TesteTreeView. como mostra na Figura 1.

Figura 1 � Criando o projeto web

Passo 2

Na p�gina default, que � aberta quando o projeto web � criado, acrescente os atributos ID e RUNAT na tag div com os respectivos valores divTree e Server, o resultado deve ficar como mostra a Figura 2. No exemplo tam��em mudei a t�tulo da p�gina para TesteTreeview.

Figura 2 � Adicionando o componente treeView na p�gina Default.aspx

Passo 3

Na aba lateral esquerda ToolBox dentro na subdivis�o Navigator arraste o controle TreeView para sua p�gina Default.aspx entre as tags DIV. Somente para efeitos visuais escolhi um visual para a treeview, para selecionar um visual v� ao modo Design, localizado na parte inferior esquerda do Visual Studio 2008, seleciona a treeview e escolha um AutoFormat. Eu escolhi o modelo Simple. Ao final o c�digo HTML deve estar como a Figura 3.

Figura 3 � HTML da p�gina default com a treeview com o Autoformat Simple

Passo 4

Vamos adicionar uma pasta e criar o arquivo JavaScript que controlar� os eventos na treeview. Na Solution Explorer do Visual Studio 2008, clique com o bot�o inverso no projeto, no menu Add clique em New Folder, como mostra a Figura 4.

Figura 4 � Adicionando nova pasta

D� o nome da pasta de js, clique com o bot�o inverso na pasta js no menu Add clique em New Item, como mostra a Figura 5.

Figura 5 � Adicionando um novo arquivo a pasta js

Escolha o template JScript File e o nome do arquivo como EventosTree.js

Figura 6 � Criando o arquivo EventosTree.js dentro da pasta js

Adicione o c�digo do Quadro 1 no arquivo criado.

function ClicouSetas(evt,tvNome)
{
    evt = getEvent(evt);
    var tecla = getKeyCode(evt);
    if (document.activeElement == null)
        return true;
    if (document.activeElement.tagName.toLowerCase() != 'a') //se n�o for o link
        return true;
    if (tecla != 37 && tecla != 38 && tecla != 39 && tecla != 40 && tecla != 13) //se as teclas n�o forem as SETAS e n�o for o ENTER sai do m�todo
        return true;

    //TreeView_ToggleNode
    if (tecla == 13)//enter
        acionaItem(document.activeElement);
    else if (tecla == 39)//direita
    {
        var proximoItem = document.activeElement;
        var div_atual = proximoItem.parentNode.parentNode.parentNode.parentNode.parentNode.id;
        proximoItem = document.getElementById(tvNome + 't' + (parseInt(proximoItem.id.replace(tvNome + 't', '')) + 1).toString());
        if (proximoItem)
        {
            if (document.activeElement.href.indexOf('focus') != -1 || document.activeElement.href.indexOf('TreeView_ToggleNode') != -1)//se existe a fun��o para expandir
            {
                if (proximoItem.parentNode.parentNode.parentNode.parentNode.parentNode.tagName.toLowerCase() == 'div'
                    && proximoItem.parentNode.parentNode.parentNode.parentNode.parentNode.style.display != 'none'
                    && proximoItem.parentNode.parentNode.parentNode.parentNode.parentNode.id != div_atual)
                {
                    proximoItem.focus();
                    //document.getElementById('ultimoFoco').value = proximoItem.id;
                }
                else
                    acionaItem(document.activeElement);
            }
        }
    }
    else if (tecla == 37)//esquerda
    {
        var proximoItem = document.activeElement;
        var div_atual = proximoItem;
        while (div_atual.tagName.toLowerCase()!='div')
            div_atual = div_atual.parentNode; //busca o div atual
        div_atual = div_atual.parentNode;
        while (div_atual.tagName.toLowerCase() != 'div')
            div_atual = div_atual.parentNode;//busca o div do pai
        if (proximoItem.href.indexOf('focus') != -1 || proximoItem.href.indexOf('TreeView_ToggleNode') != -1)//se o n� est� expandido fechar
        {
            var dvp = proximoItem.href.split(',')[proximoItem.href.split(',').length - 1].replace('\'', '').replace('\'', '').replace('document.getElementById(', '').replace(')', '').replace(')', '');
            var proximo_div = document.getElementById(dvp); //qual o div que ele aciona
            if (proximo_div && proximo_div.style.display != 'none')
            {
                acionaItem(document.activeElement);
                return false;
            }
        }

        while (proximoItem != null)
        {
            proximoItem = document.getElementById(tvNome + 't' + (parseInt(proximoItem.id.replace(tvNome + 't', '')) - 1).toString());
            if (proximoItem
                && proximoItem.parentNode.parentNode.parentNode.parentNode.parentNode.style.display != 'none'
                && proximoItem.parentNode.parentNode.parentNode.parentNode.parentNode.id == div_atual.id)
            {
                try
                {
                    proximoItem.focus();
                    //document.getElementById('ultimoFoco').value = proximoItem.id;
                    break;
                } catch (ex) { continue; }
            }
        }
    }
    else if (tecla == 40)//baixo
    {
        var proximoItem = document.activeElement;
        while (proximoItem != null)
        {
            proximoItem = document.getElementById(tvNome + 't' + (parseInt(proximoItem.id.replace(tvNome + 't', '')) + 1).toString());
            if (proximoItem && proximoItem.parentNode.parentNode.parentNode.parentNode.parentNode.tagName.toLowerCase() == 'div' && proximoItem.parentNode.parentNode.parentNode.parentNode.parentNode.style.display != 'none')
            {
                try
                {
                    proximoItem.focus();
                    //document.getElementById('ultimoFoco').value = proximoItem.id;
                    break;
                } catch (ex) { continue; }
            }
        }
    }
    else if (tecla == 38)//cima
    {
        var proximoItem = document.activeElement;
        while (proximoItem != null)
        {
            proximoItem = document.getElementById(tvNome + 't' + (parseInt(proximoItem.id.replace(tvNome + 't', '')) - 1).toString());
            if (proximoItem && proximoItem.parentNode.parentNode.parentNode.parentNode.parentNode.tagName.toLowerCase() == 'div' && proximoItem.parentNode.parentNode.parentNode.parentNode.parentNode.style.display != 'none')
            {
                try
                {
                    proximoItem.focus();
                    //document.getElementById('ultimoFoco').value = proximoItem.id;
                    break;
                } catch (ex) { continue; }
            }
        }
    }
    return false;
}
function acionaItem(item)
{
    item.setAttribute('onclick', item.href);
    if (typeof (item.onclick) == 'function')
        item.onclick();
    else
        item.click();
    item.setAttribute('onclick', '');
    //document.getElementById('ultimoFoco').value = item.id;
}

//Recupera o c�digo da tecla que foi pressionado
function getKeyCode(evt)
{
    var code;
    if (typeof (evt.keyCode) == 'number')
        code = evt.keyCode;
    else if (typeof (evt.which) == 'number')
        code = evt.which;
    else if (typeof (evt.charCode) == 'number')
        code = evt.charCode;
    else
        return 0;

    return code;
}
// recupera o evento do form
function getEvent(evt)
{
    if (!evt) evt = window.event; //IE
    return evt;
}

Quadro 1 � C�digo do arquivo EventosTree.js

Passo 5

Vamos adicionar a refer�ncia do arquivo javascript na p�gina default.aspx. Para isso v� a p�gina e acrescente a linha de c�dgio do Quadro 2 entre as tags HEAD e o resultado deve ficar como na Figura 7.

Quadro 2 � Referencia do arquivo javascript na p�gina Default.apsx

Figura 7 � Refer�ncia do arquivo EventosTree.js na p�gina Defulta.aspx

Passo 6

Agora vamos adicionar um c�digo somente para preencher a treeview e setar o foco no primeiro elemento, voc� pode usar qualquer outro c�digo ou banco de dados para preencher a sua treeview.
Na p�gina Default.aspx, v� ao c�digo da p�gina apertando a tecla F7 e adicione o seguinte m�todo do Quadro 3. Esse evento deve estar dentor da classe e fora do m�todo Page_Load

        private void CarregarTV()
        {
            TreeView1.Nodes.Clear();
            TreeNode tr = new TreeNode();
            for (int i = 0; i < 3; i++)
            {
                tr = new TreeNode("Pai_" + i.ToString(), i.ToString());
                tr.SelectAction = TreeNodeSelectAction.Expand;
                for (int j = 0; j < 3; j++)
                    tr.ChildNodes.Add(new TreeNode("Filho_" + i.ToString() + "_" + j.ToString(), i.ToString() + "_" + j.ToString()));
                TreeView1.Nodes.Add(tr);
            }
            //Focus no primeiro elemento
            ClientScript.RegisterStartupScript(this.GetType(), "focoTreeView", "if(document.getElementById('" + TreeView1.ClientID + "t0'))document.getElementById('" + TreeView1.ClientID + "t0').focus();", true);
        }

Quadro 3 � M�todo em C# para preencher a treeview e setar o foco no primeiro elemento

Destaquei a linha do Quadro 3 que � um ponto interessante, nesse exemplo quando clicar com o mouse sobre um n� pai ele ser� expandido. A ultima linha do c�digo seta o foco no primeiro elemento da treeview.

Passo 7

O �ltimo passo � ligar o div ao evento do js e chamar o m�todo para carregar a treeview ao abrir a p�gina. Para isso altere o evento Page_Load no c�digo da p�gina default como mostra o Quadro 4.

        protected void Page_Load(object sender, EventArgs e)
        {
            divTree.Attributes.Remove("onkeydown");
            divTree.Attributes.Add("onkeydown", "return ClicouSetas(event,'" + TreeView1.ClientID + "');");
            if (!IsPostBack)
                CarregarTV();
        }

Quadro 4 � C�digo do evento Page_Load da p�gina default.aspx

Conclus�o

O exemplo mostra uma forma de melhorar a forma de acesso �s informa��es da p�gina, melhorando a usabilidade para seus usu�rios. Isso � somente um passo, que faz grande diferen�a para seu produto. O resultado final � mostrado na Figura 8, ao abrir a p�gina o foco inicial fica no primeiro elemento da treeview e as setas para baixo, cima, esquerda e direita j� funcionam e a tecla enter aciona o item ou expande.

Figura 8 � Resultado final com a treeview navegada pelo teclado

Quem tiver alguma d�vida pode me mandar no e-mail tiago@grupodias.com.br
Fonte do exemplo no endere�o http://cid-f8d073fe4fb32051.skydrive.live.com/self.aspx/P%c3%bablico/artigos/TesteTreeView.zip

Um grande abra�o,
Tiago Silva Dantas Franco
Especialista em gest�o da tecnologia da informa��o

Confira outros conte�dos:

Teste unit�rio com NUnit

Como migrar projetos do ASP.NET MVC...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Tiago Em 2010

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Navegando na treeview do ASP.Net com setas do teclado

O artigo mostra uma forma de adaptar a navega��o em uma treeview do ASP.Net utilizando as setas do teclado e a tecla enter para ativar ou expandir o item atrav�s dos eventos Javascript.

Palavras-chaves

Introdu��o

Exemplo

Passo 1

Passo 2

Passo 3

Passo 4

Passo 5

Passo 6

Passo 7

Conclus�o

Confira outros conte�dos:

Teste unit�rio com NUnit

Teste unit�rio com NUnit

Como migrar projetos do ASP.NET MVC...

Perguntas frequentes

Nossos casos de sucesso