Conhecendo o componente RibbonControl da DevExpress para .NET

Contextualizando

O menu do tipo Ribbon foi uma das maiores inovaç�es visuais desenvolvidas para aplicaç�es desktop (e posteriormente adaptada para aplicaç�es web). At� ent�o, costumava-se utilizar uma estrutura bastante simples para o menu principal das janelas, que consistia em uma barra superior sem muitos detalhes gr�ficos da qual derivavam barras verticais com itens que n�o passavam de texto com, �s vezes, uma pequena imagem no canto.

A Figura 1 mostra um exemplo deste menu, com o primeiro elemento em destaque.

Figura 1: Estrutura comum do Main Menu

No menu estilo ribbon, os itens passaram a ser a grupados em abas que cont�m grupos nos quais podem ser inseridos v�rios tipos de elemento como bot�es e caixas de texto. O exemplo mais conhecido de uso dessa modelo � o Microsoft Office, como vemos na Figura 2.

Figura 2: Office 2007 com menu ribbon

Rapidamente esse tornou-se um dos layouts de menu mais �desejados� no meio da programaç�o, e os desenvolvedores passaram a adot�-lo em suas aplicaç�es novas e a migrar as antigas.

O RibbonControl da DevExpress

Nesse contexto, alguns fabricantes de componentes começaram a desenvolver suas soluç�es para as v�rias plataformas e comercializ�-las (ou distribu�-las gratuitamente). Enquanto os IDEs n�o forneciam um componente nativo para atender essa nova �onda�, empresas como a DevExpress inclu�ram este componente em suas bibliotecas, tornando mais f�cil o acesso a esse modelo de interface.

Aqui ser� apresentado este componente da DevExpress para o Visual Studio, destacando suas principais funcionalidades e dando o embasamento necess�rio para que qualquer desenvolvedor com conhecimento da ferramenta possa inclu�-lo em suas aplicaç�es.

Ent�o, para iniciar, criemos uma aplicaç�o Windows Forms no Visual Studio (aqui ser� usada a vers�o 2010, mas outras podem ser igualmente aplicadas nesse caso, considerando por�m que podem existir diferenças devido as v�rias vers�es da biblioteca).

No form principal, adicionemos um RibbonControl a partir da guia �Navigation & Layout� da DevExpress na toolbox.

A apar�ncia inicial � mostrada na figura a seguir, onde s�o destacados alguns elementos do ribbon.

Figura 3: RibbonControl no form com elementos em destaque

Os elementos destacados s�o:

Barra de acesso r�pido: nela � poss�vel inserir itens que s�o acessados com maior frequ�ncia, facilitando seu acesso por parte do usu�rio. Mais adiante ser� explicado como adicionar elementos � �Quick Access Toolbar� (barra de acesso r�pido).
Ribbon Page: a estrutura principal do ribbon � dividida em p�ginas com abas (ribbon pages), nas quais s�o inseridos grupos com elementos diversos. Fazendo uma alus�o aquele menu anteriormente utilizado, as p�ginas poderiam representar os itens do n�vel mais alto do menu (aqueles que ficam vis�veis sempre no topo da janela).
Ribbon Page Group: dentro das ribbon pages ficam os ficam os ribbon page groups, dentro dos quais s�o inseridos os elementos do menu propriamente ditos (bot�es, submenus, caixas de texto, etc). Apenas fazendo uma r�pida refer�ncia a aplicaç�es comerciais, poder�amos imaginar que a p�gina fosse de �Cadastros�, enquanto os grupos a subdividiram em �Estoque�, �Pessoas�, �Segurança�, etc. Ao longo desde artigo o ribbon ser� incrementado, facilitando o entendimento dos conceitos.

Estilo do ribbon e �mescla� com o form

Executando o projeto, teremos um resultado semelhante � Figura 4, onde vemos que o ribbon encontra-se no interior do form. Por�m, se compararmos com aplicaç�es como Word e Excel, nesses casos o ribbon est� �mesclado� com o formul�rio.

Figura 4: Form em execuç�o com ribbon interno

Para se obter o efeito de �mescla� com o form, dando a impress�o que ele faz parte da estrutura ��ntima� da janela, � preciso utilizar um formul�rio do tipo RibbonForm, que encontra-se no namespace DevExpress.XtraBars.Ribbon.

Para isso basta alterar a classe do form principal da aplicaç�o. Visualizando o c�digo do formul�rio, alteramos a declaraç�o da classe da seguinte forma:

Listagem 1: Alterando o formul�rio para RibbonForm

public partial class Form1 : DevExpress.XtraBars.Ribbon.RibbonForm
{
public Form1()
       {
       	InitializeComponent();
}
}

Executando novamente o projeto, o resultado � diferente, conforme vemos na figura a seguir. Em tempo de design j� � poss�vel ver as mudanças est�ticas.

Figura 5: RibbonForm com ribbon mesclado

� poss�vel ainda alterar o layout geral do ribbon para um dos tr�s modelos dispon�veis: Office 2007, Office 2010 e Mac Office. Para fazer essa configuraç�o, basta alterar a propriedade RibbonStyle do ribbon. Os resultados obtidos s�o os seguintes:

Figura 6: RibbonStyle Office2010

Figura 7: RibbonStyle MacOffice

Os estilo Office2007 � o padr�o, que pode ser visto na Figura 5.

Nas figuras 6 e 7 percebemos a exist�ncia de uma seta para cima no canto superior direito do ribbon. Esse pequeno bot�o pode ser usado para ocultar a �rea principal do ribbon (onde ficam os grupos). O mesmo efeito pode ser obtido dando dois cliques sobre as abas.

Adicionando p�ginas, grupos e itens de forma r�pida

Para incrementar o ribbon, utilizamos os seguintes processos:

Para adicionar p�ginas: clicar com a direita sobre a aba de uma das p�ginas e selecionar a opç�o �Add Page�.
Para adicionar grupos: clicar com a direita sobre a aba da p�gina na qual se deseja adicionar o grupo e selecionar a opç�o �Add PageGroup�.
Para adicionar itens: clicar com a direita dentro do grupo onde se quer adicionar itens e escolher uma das v�rias opç�es dispon�veis.

Esses s�o os principais procedimentos na estruturaç�o do ribbon, pois formam �d�o forma� ao menu de forma r�pida.

Para exemplificar, criaremos duas p�ginas com alguns grupos, conforme a Figura 8..

Tanto as pages quanto os groups possuem a propriedade Text, que representa o texto exibido no ribbon.

Figura 8: Ribbon com p�ginas e grupos adicionados

Em seguida, adicionaremos alguns bot�es dentro dos grupos. Os bot�es possuem v�rias propriedades, dentre as quais vale a pena destacar nesse ponto:

Caption: texto exibido no bot�o.
Glyph: imagem pequena, exibida ao lado do texto.
LargeGlyph: image grande, exibida sobre o texto para tornar o bot�o um �Large button�.

Na imagem a seguir foram definidos dois bot�es com Large Glyph, um com Glyph e um sem nenhuma imagem.

Figura 9: Bot�es com e sem imagens

Uma vez adicionados, os bot�es funcionam como outro bot�o qualquer em termos interaç�o do usu�rio. Para acionar o evento click, basta dar dois cliques sobre cada um.

Adicionando itens � barra de acesso r�pido e ao menu da aplicaç�o

Para adicionar itens � barra de acesso r�pido � preciso utilizar a janela de ediç�o do design do ribbon, o que pode ser feito a partir da �Smart Tag� (pequena seta que surge no canto superior direito do componente, ao selecion�-lo), selecionando a opç�o �Run Design�.

Na janela que se abrir�, deve-se acessar o item �Quick Access Toolbar� no lado esquerdo, como mostra a figura a seguir.

Figura 10: Janela de ediç�o do design do ribbon

Como podemos ver, no lado direito est�o os itens j� criados no ribbon (no caso, apenas bot�es). Para adicionar um deles � barra de acesso r�pido, basta arrast�-lo para a regi�o em branco no centro da tela.

Para exemplificar, vamos arrasta o bot�o �Produtos� e fechar a janela de ediç�o do design. Em seguida, compilamos o projeto e obtemos o seguinte resultado.

Figura 11: Item adicionado � �Quick Access Toolbar�

� poss�vel ainda inserir itens no cabeçalho do ribbon, na regi�o onde ficam as abas das p�ginas. Para isso, novamente na janela de ediç�o do design, selecionamos a opç�o �Ribbon PageHeader Items� e, assim como no caso da barra de acesso r�pido, arrastamos os itens para a regi�o central. Nesse caso, inserimos tamb�m o bot�o �Produtos�, como mostra a Figura 1.

Figura 12: Adicionando itens ao cabeçalho do ribbon

Agora o bot�o surge no canto superior direito, conforme a figura a seguir.

Figura 13: Bot�o no cabeçalho do ribbon

Por fim, para concluir a customizaç�o b�sica do ribbon, podemos inserir itens no menu da aplicaç�o, aquele que � exibido ao clicar sobre o �cone esf�rico no canto superior esquerdo.

Para isso, devemos adicionar um componente ApplicationMenu da toolbox no form e clicar em sua smart tag, selecionando a opç�o �Run Design�. Ser� aberta a janela de ediç�o do ribbon, por n�s j� conhecida, e basta arrastar alguns itens para a regi�o central, como nos casos anterior. No exemplo, foram inseridos arrastados dois dos bot�es previamente criados e o resultado � apresentado a seguir.

Figura 14: Itens no menu da aplicaç�o

Conclus�o

As propriedades, m�todos e possibilidades de customizaç�o do RibbonControl s�o muitas e seriam necess�rios alguns artigos para explica-las detalhadamente. Nessa publicaç�o, por�m, o objetivo foi dar uma vis�o geral do componente, permitindo aos leitores iniciarem o uso do mesmo em suas aplicaç�es.

Com as informaç�es aqui apresentadas � poss�vel montar uma estrutura razo�vel com o ribbon para formar o menu principal de formul�rios, com divis�es em p�ginas e grupos, contendo v�rios itens.

Espero que o conte�do deste artigo possa ser �til. At� a pr�xima.