DevExpress NavBar

DevExpress NavBar

Adicionando diferença/melhoria nas aplicações

Para quem trabalha no desenvolvimento de sistemas, sabe que seu projeto/aplicação deve ter algo que o diferencie dos demais, como por exemplo: um layout bonito, componentes com o estilo XP, um relatório bem formatado etc. Isso tudo para garantir a satisfação do cliente, sem contar é claro com o pagamento do mesmo pelo seu serviço.

Existem componentes da empresa DevExpress (www.devexpress.com) que fazem essa diferença com muita qualidade. Encontramos ótimos componentes: Grids, barras de ferramentas, relatórios, enfim várias opções. Mostrarei neste artigo o NavBar para criar barras semelhantes a que temos na Pesquisa do Windows.

Infelizmente, a empresa não disponibiliza versões demos para testar os componentes, temos no site alguns demos (executáveis) de aplicações. O componente possui versão do Delphi 5 ao 2005 e CBuilder 5 e 6.

NavBar

Basicamente o componente é uma barra lateral, onde você adiciona itens dentro de grupos. Essa barra pode ter vários estilos: como do Office 2003, Windows XP, além de podermos customizar esses estilos. Veja na Figura 1 alguns estilos que podemos usar no componente.

Figura 1. Alguns estilos do NavBar

Para adicionar os grupos e itens, basta dar um duplo clique no componente para abrir o seu editor, onde também fazemos a “ligação” dos itens com os grupos.

Os itens podem ser “linkados” a Actions provenientes de um ActionList. Isso torna a criação muito mais rápida e simples, onde apenas precisamos indicar nessa propriedade a ação pré-definida. Sendo feita na action toda a codificação e configuração, como Caption, ImageIndex etc.

O componente possui duas propriedade para vincular a imagens, o LargeImagens e SmallImagens. Como o próprio nome diz serve para mostrar imagens pequenas e grandes. As imagens grandes servem para os grupos e as pequenas para os itens, obviamente.

Veja na Figura 2 um exemplo utilizando dois tamanhos de ícones e também com imagens em background no componente, disponível nos demos do NavBar (o link para baixar os demos está no final do artigo).

Figura 2. Componente configurado com dois tamanhos de ícones e imagem de fundo

O componente permite ainda utilizar a técnica de drag-drop nos itens (Figura 3).

Figura 3. Utilizando drag-drop com o NavBar

Temos a possibilidade de adicionar controles da VCL nos itens do componente. Ao criar um grupo, indicamos True na propriedade UseControl, depois basta “colar” no grupo o componente desejado. Na Figura 4 tem um exemplo utilizando TreeView, ListView e outros componentes nos grupos do NavBar.

Figura 4. Colocando componentes dentro de grupos do NavBar

Vimos neste artigo “apenas” algumas possibilidades desse maravilhoso componente da DevExpress. Temos muito mais possibilidades, principalmente na parte de customização de estilos. Temos mais componentes instalados com o NavBar, como: cxPropertiesStore, cxStyleRepository e cxLookAndFeelController. Dos quais falaremos em outra oportunidade.

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

Links

Demos

www.devexpress.com/Downloads/VCL/ExNavbar

Screen-shots das características do NavBar

www.devexpress.com/Products/VCL/ExNavbar/Features.xml