Nenhum comentário


Criando aplicações com o Ribbon

Ribbon é um estilo incorporado pela Microsoft na suíte Office a partir da versão 2007. A ideia era agrupar várias funcionalidades em uma mesma barra de ferramenta para facilitar a vida do usuário. Além disso, possui um menu para concentrar as funcionalidades mais acessadas da aplicação.

O Delphi possui suporte ao Ribbon a partir da versão 2009. Vou mostrar neste artigo como usar das facilidades do Ribbon no Delphi. Veja na Figura 1 os controles que compõem a paleta Ribbon Controls da Tool Palete.

Figura 1. Ribbon Controls

Crie um novo projeto VCL. O trabalho principal esta concentrado no ActionManager, que irá disponibilizar as ações (itens), para adicionarmos no Ribbon. Adicione o controle em tela, assim como um ImageList. Escolha as imagens de sua preferencia.

Configure o ImageList com a propriedade Images do ActionManager. Adicione um Ribbon ao formulário (Figura 2).

 

Figura 2. Ribbon adicionado no formulário

Para criar um grupo (RibbonPage), basta clicar com o botão direito e escolher Add Tab. Na aba, temos as propriedades para sua configuração (Caption, Hint etc), semelhante ao TabSheet do PageControl. Dentro da aba, podemos adicionar os grupos (RibbonGroup), para isso, clique com o botão direito e escolha Add Group.

Dentro desses grupos, teremos os itens (botões) que vamos usar. Agora, precisamos configurar as actions do ActionManager. Dê um duplo clique no ActionManager e acesse a aba Actions (Figura 3).

 

Figura 3. Editor de actions no ActionManager

Para quem já trabalhou com ActionList, a tela é bastante familiar. Após, vamos configurar essas actions para o Ribbon. Acesse a propriedade ActionBars do ActionManager e adicione um ActionBarItem. No ActionBarItem, vamos vincular com cada grupo que criamos anteriormente, ou seja, cada grupo terá um ActionBarItem vinculado.

Acesse a propriedade Items do ActionBarItem e para cada item que deseja adicionar, você pode vincular para com uma ação (propriedade Action). Pronto, cada item (action) deve ser colocado em um grupo (ActioBarItem) e um ou mais grupos podem estar dentro de um aba (RibbonPage). Veja na Figura 4.

Figura 4. Ribbon configurado 

Podemos adicionar Action pré-definidas, basta clicar na propriedade Action e escolher New Standar Action, onde temos uma lista das actions que podemos configurar para o item.

Nota: Caso a imagem não fique proporcional no botão (isso depende do tamanho da imagem usada), altere para bsLarge a propriedade CommandProperties>ButtonSize.

Controles no Ribbon

A propriedade CommandProperties do ActionClientItem (o botão adicionado com o Action), possui muitas sub-propriedades interessantes para sua configuração. ButtonSize indica o tamanho do botão. Em ButtonType temos as seguintes opções:

·         btNone: botão normal;

·         btDropDow: uma seta indica que temos um menu ao clicar no botão (para configurar os itens do menu, acesse a propriedade Items e adicione os menus que deseja);

·         btGallery: exibe uma galeria suspensa;

·         btSplit: Uma seta indica um menu, mas o botão também possui a funcionalidade em seu clique. 

Outra propriedade interessante é o CommandStyle onde podemos mudar o botão para um CheckBox, RadioButton, ComboBox por exemplo.

Configurando controles

Para criar um CheckBox ou RadioButton, basta escolher a opção no CommandStyle. Caso deseje criar um Combobox, arraste um RibbonComboBox da Tool Palette para dentro de um grupo. Preenche o combo, usando a propriedades Items do controle recém adicionado. 

Veja na Figura 5 um Ribbon contendo botões, CheckBox, RadioButton, menus e ComboBox.

Figura 5. Várias possibilidades do Ribbon

Usamos a mesma facilidade para usarmos o SpinEdit. Basta adicionar um RibbonSpinEdit diretamente no grupo.

Menu de acesso rápido

Como comentei anteriormente, o Ribbon trouxe a funcionalidade de um menu com acesso rápido a documentos adicionados, funcionalidades de impressão, salvar etc. Clique com o botão direito no Ribbon e escolha Add Application Menu. 

Será adicionado um botão na parte superior esquerda das abas. Ao clicar nele (mesmo em tempo de design) um menu é mostrado. Podemos adicionar funcionalidades nesse menu, acessando a propriedade OptionsItems.

Cada item representa uma Action e cada item adicionado será mostrado na parte inferior do menu do Application Menu (Figura 6). Ideal para comandos de fechar a aplicação, configurações etc.

Figura 6. Adicionando botões no menu

Para adicionar itens no menu, clique no botão e acesse a propriedade Items. Para cada funcionalidade adicione um item, atribuindo uma Action (semelhante ao que fizemos com os itens dos grupos do Ribbon). Veja na Figura 7, o itens adicionados ao menu.

Figura 7. Itens no Application Menu do Ribbon 

Para alterar o ícone, clique no Ribbon e acesse a propriedade ApplicationMenu>Icon. Agora, vamos adicionar um menu de acesso rápido. Clique com o botão direito no Ribbon e escolha Add Quick Access Toolbar. Será adicionado um controle ao lado do botão. Se rodar a aplicação, teremos algumas configurações do próprio Ribbon (Figura 8).

 

Figura 8. Menu de acesso rápido

Nota: o ActionManager possui quatro propriedades para imagens (DisabledImages, Images, LargeDisabledImages e LargeImages). Para que possamos trabalhar com imagens pequenas e grandes, temos que configurar as quatro propriedades (usando o mesmo índice para a imagem nos quatro ImageLists). Para mostrar a imagem grande, usamos a propriedade CommandProperties>ButtonSize.

Para adicionar itens, acesse a propriedade ActionBars do ActionManager. No editor, selecione o ActionBar do Quick Access Tolbar. Na propriedade Items, adicionamos os itens que queremos. Veja o resultado na Figura 9.

Figura 9. Ribbon configurado com a Quick Access Toolbar

Conclusões

Vimos nessa dica rápida, como usar o Ribbon para criar aplicações com visual moderno, com o Delphi. Já tive a experiência de usar o controle em uma aplicação e o resultado foi muito bom, sendo que o usuário da aplicação achou o visual mais limpo e organizado. 

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