Facilitar o acesso a funções do sistema é um fator de extrema importância atualmente, principalmente quando se fala de aplicativos de uso “intenso e rápido”. Como exemplo, tomemos uma loja que está, diariamente, cadastrando vários clientes, produtos e efetuando vendas através de um sistema informatizado. Sempre existirão aqueles itens no menu que são pouco utilizados e que não custa muito para o operador procurar sempre que necessitar, mas imagine que para acessar as funções mais frequentemente utilizadas (como as citadas acima), o usuário precise expandir vários níveis de menu, clicar várias vezes até chegar à tela que deseja. Nada bom, não é mesmo?

Uma das soluções para esse tipo de situação é utilizar atalhos nos principais ambientes do sistema, e uma das formas mais comuns de se fazer isso é utilizando barras laterais de navegação. Neste artigo, conheceremos o componente dxNavBar da biblioteca DevExpress, que nos permite fazer uma barra de navegação lateral de forma prática, além de garantir um visual agradável, característico dos componentes deste fabricante.

Obs.: é importa lembrar que este componente não serve unicamente para fazer barras de atalhos, este contexto foi comentado para facilitar a visualização de uma das principais aplicações do dxNavBar.

Para iniciar, podemos criar uma aplicação VCL e adicionar ao form principal um componente dxNavBar a alinhá-lo a um dos lados (Align = alLeft ou alRight).

Imediatamente após criado, o controle não passa de uma barra vazia, é preciso clicar com a direita sobre ele e, no menu popup que surge, clicar em “Express NavBar Editor...”. Surgirá uma tela como a da Figura 1.

Express NavBar Editor

Figura 1: Express NavBar Editor

A estrutura do dxNavBar é simples: criamos grupos, itens e depois ligamos os itens aos grupos. Então vamos à parte prática.

Começaremos por clicar em “Groups” e criar alguns grupos, usando o botão “+” no topo, conforme ilustra a Figura 2.

Criados três grupos

Figura 2: Criados três grupos

No meu caso, alterei o caption dos grupos para “Cadastros”, “Vendas” e “Estoque”.

Passando ao próximo passo, clicamos em “Items” e adicionamos alguns itens (também usando o botão “+”). O resultado deve ser semelhante ao da Figura 3.

Itens criados

Figura 3: Itens criados

Aqui, optei por criar seis itens (serão dois para cada grupo) com caption “Clientes”, “Fornecedores”, “Nova venda”, “Consultar vendas”, “Entrada” e “Saída”.

É possível perceber que os grupos apareceram no NavBar, mas os itens continuam ausentes. É necessário ligar os itens aos seus devidos grupos, o que fazemos clicando no menu “Link designer”. Serão exibidos os grupos à esquerda e os itens à direita, basta arrastar cada item para seu grupo. Feito essa configuração, a janela deve estar como na Figura 4.

Itens e grupos devidamente ligados

Figura 4: Itens e grupos devidamente ligados

Executando a aplicação, já é possível testar o que foi feito. A aparência, porém, não é tão agradável, como vemos na Figura 5. É aí que entra o item “Views” do menu, veremos que existem várias configurações possíveis para o layout.

Aparência inicial da aplicação em execução

Figura 5: Aparência inicial da aplicação em execução

Clicando em “Views”, podemos escolher entre os vários estilos disponíveis, por exemplo, a Figura 6 mostra o estilo “Office12NavigationPaneView”.

É possível, ainda definir ícones tanto para os grupos como para os itens individualmente. Para isso, deve-se criar um ImageList, adicionar as imagens que se deseja usar e, na propriedade OptionsImage>SmallImages ou OptionsImage>LargeImages do NavBar, selecionar a lista que acabou de ser criada. Feito isso, basta selecionar o índice da imagem na propriedade SmallImageIndex ou LargeImageIndex dos itens ou grupos.

A Figura 6 ilustra um exemplo completo (view e imagens).

NavBar com estilo e imagens defindidas

Figura 6: NavBar com estilo e imagens defindidas

Como vimos, não é difícil criar esse tipo menu usando o dxNavBar. Como a maioria dos componentes desta biblioteca, este nos garante praticidade e estilo no desenvolvimento de nossas aplicações. Como dica, sugiro adicionar um componente dxSkinController ao form, selecionar alguns skins e ver como fica o layout do NavBar.

Ficamos por aqui com mais este artigo, o qual eu espero que tenha sido útil.

Um abraço e até a próxima oportunidade.