Neste tópico veremos como trabalhar com listas suspensas (dropdown ou combobox) e galerias. Uma lista suspensa pode conter os mais variados tipos de itens. A figura abaixo mostra a lista suspensa para escolha de fontes:

Figura 9‑1 Lista suspensa para escolha de fonte

Uma galeria, por outro lado, pode ser utilizada para mostrar imagens como a da figura do exemplo que desenvolveremos mais adiante:

Figura 9‑2 Criando galerias de imagens/fotos

Iniciarei pela criação de uma galeria de imagens conforme mostrado acima.

Criando galerias de imagens

Nossa primeira parada é a criação de uma galeria conforme já demonstrado. É possível adicionar uma galeria em qualquer ponto da Faixa de Opções já existente, porém, criaremos nossa própria guia e grupo onde ela será inserida.

A parte crítica da galeria é o tag de abertura, denominado <gallery>. Ao abrirmos o tag para a galeria, precisaremos definir alguns atributos antes de continuar. Alguns atributos (como id e label) nós já vimos em outros tags. Aqui, nós estaremos interessados em alguns novos atributos. Um deles é o atributo columns. Este atributo determina quantas colunas a nossa galeria terá. No exemplo anterior temos duas colunas, já a figura abaixo mostra apenas uma coluna:

Figura 9‑3 Galeria de uma coluna apenas

Podemos também determinar quantas linhas serão visíveis inicialmente modificando o atributo rows. Ao clicar na galeria, nos exemplos anteriores, temos duas linhas de imagens visíveis. Porém, poderíamos aumentar ou reduzir tal valor.

Vejamos, portanto, como construir o XML para gerar o exemplo deste tópico:

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
    <ribbon startFromScratch="false">
     <tabs>
      <tab
      id="idTab1"
      insertBeforeMso="TabHome"
      label="Minha Guia">
     
      <group
       id="idGrp1"
       label="Galeria de Fotos">

         <!-- Início da definicao de nossa galeria -->
         <gallery
           id="gal1"
           label="Minhas Fotos"
           image="img1"
            onAction="idImagem"
            columns="2"
           rows="2"
           itemWidth="200"
           itemHeight="150"
           showItemLabel="false"
              size="large">

         <!-- Insere uma galeria de fotos -->
         <!-- Primeiro importe as fotos que deseja utilizar -->
         <item id="img1" label="Cobham" image="img1" />
         <item id="img2" label="Canada Square" image="img2" />
         <item id="img3" label="Canary Warf" image="img3" />
         <item id="img4" label="Homen deitado" image="img4" />
         <item id="img5" label="Greenwich" image="img5" />

         <!-- Insere um botao ao final da galeria -->
         <button id="btn1"
           imageMso="RefreshStatus"
              label="Visite meu blog..."
           onAction="irBlog"/>       
          </gallery>

      </group>

      </tab>
     </tabs>
    </ribbon>
</customUI>

Note o atributo onAction que defini para a galeria . Este atributo gera um callback que retorna atributos relacionados à imagem clicada. Sendo assim, podemos adicionar código no VBA para executar alguma tarefa:

Figura 9‑4 Mensagem retornada pelo callback da galeria

Criando uma lista suspensa (combobox e dropdown)

Uma lista suspensa é similar à criação de uma galeria. Aqui, falo de dois tipos de controle distintos: combobox e dropdown. Novamente, embora os controles sejam distintos, os mesmos são bastante similares. Digo “bastante similares” porque não são exatamente iguais. Uma diferença crítica entre os dois controles diz respeito ao atributo do callback. Para a caixa de combinação nós utilizamos o atributo onChange. Já para o dropDown nós utilizamos o atributo onAction.

O nosso objetivo é criar as caixas como mostradas na figura:

Figura 9‑5 Criando uma combobox e dropdown

Podemos atingir tal objetivo como segue:

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
   <ribbon>
    <tabs>
     <tab id="idTab1"
      label="Minha Guia"
      insertBeforeMso="TabHome">
     
      <group
       id="idGrp1"
       label="Meu Grupo">

      <comboBox
       id="Grp1Cbo1"
       label="Combobox"
       screentip="Clique aqui para selecionar um item"
       onChange="onChgIdITem">
     
        <item id="idItem1" label="Meu primeiro item" />
        <item id="idItem2" label="Meu segundo item" />
        <item id="idItem3" label="Meu terceiro item" />
        <item id="idItem4" label="Meu quarto item" />

      </comboBox>

<!-- Note que a combobox utiliza o atributo "onChange" ou passo que -->
<!-- o DropDown utiliza o atributo "onActioin" -->

      <dropDown
       id="Grap1DD1"
       label="DropDown"
       screentip="Clique aqui para selecionar um item"
       onAction="onActIdItem">
     
        <item id="idItem5" label="Meu primeiro item" />
        <item id="idItem6" label="Meu segundo item" />
        <item id="idItem7" label="Meu terceiro item" />
        <item id="idItem8" label="Meu quarto item" />

      </dropDown>
                             
      </group>

     </tab>
    </tabs>
   </ribbon>
</customUI>