Revista MSDN Magazine Edição 01 - Trabalhe com o Controle Toolbar do Internet Explorer

Clique aqui para ler todos os artigos desta edição

Trabalhe com o Controle Toolbar do Internet Explorer

por George Shepherd

Neste artigo analisarei um dos Web Controls — o Toolbar. O controle Toolbar já vêm sendo usado há algum tempo e fornece atalhos para acessar os recursos dos programas. O controle Toolbar do Internet Explorer lhe permite incluir uma barra de ferramentas na sua página Web em ASP.NET, e é responsável por fornecer as tags corretas e gerenciar o estado da barra de ferramentas. Assim como outros controles no lado servidor, as barras de ferramentas são representadas por tags dentro de uma página em ASP.NET e derivam da classe Microsoft.Web.UI.WebControls.Toolbar. O Web Control Toolbar do Internet Explorer lhe permite disponibilizar muitos dos recursos da barra de ferramentas do Windows® dentro de uma página da Web. Se estiver procurando esses Web Controls, você poderá obter o código-fonte completo em http://www.asp.net/Default.aspx?tabindex=7&tabid=41.

Exemplo do controle Toolbar

Para demonstrar como funciona o controle Toolbar do Internet Explorer, o exemplo exibe uma string em diversas fontes e configurações. Por exemplo, o texto pode aparecer em uma das várias cores, estilos (negrito, itálico ou sublinhado) e tamanhos (grande, médio ou pequeno). Cada um desses recursos pode ser selecionado na barra de ferramentas por meio dos vários botões, listas suspensas (dropdown) e controles de texto oferecidos na própria barra de ferramentas. A Figura 1 mostra um exemplo do programa em execução. O controle Toolbar na Figura 1 mostra todos os itens de barra de ferramentas fornecidos pelo controle Toolbar do Internet Explorer. À esquerda da barra de ferramentas, há uma caixa de edição para inclusão do texto. Os três botões imediatamente à direita da caixa de texto funcionam como botões de opção e lhe permitem selecionar uma das várias opções exclusivas (a fonte grande, média ou pequena). À direita desses botões, você vê um grupo de três botões de estilo “caixa de seleção”, que permitem selecionar até três operações (os estilos de fonte negrito, itálico e sublinhado). À direita dos botões estilo “caixa de seleção”, há uma caixa de listagem suspensa. Por fim, existe um botão regular que permite avançar para a próxima página.

Figura 1. Alterando Estilos de Fonte com o Controle Toolbar do Internet Explorer

A barra de ferramentas no lado servidor do Internet Explorer é composta de vários itens, e cada um deles executa uma função específica. Os itens nessa barra de ferramentas são semelhantes aos seus correspondentes independentes (por exemplo, a classe Button, a classe Label, a classe Textbox e a classe DropDownList). A Tabela 1 lista os itens da barra de ferramentas e as propriedades por eles expostas.

Tabela 1. Itens do Controle Toolbar e Suas Propriedades

Exemplo do controle Toolbar

A maneira mais fácil e objetiva de usar o controle Toolbar é através do form designer (criador de formulários) em ASP.NET do Visual Studio® .NET. O controle Toolbar do Internet Explorer oferece suporte a design explícito. Para usar o Toolbar em um Web Form (formulário da Web), arraste-o para dentro do formulário, como faria com qualquer outro controle. Ele será inicialmente exibido como uma caixa cinza (com algumas instruções sobre a inclusão de itens por meio do painel de propriedades). A Figura 2 mostra um controle Toolbar recém-criado em um Web Form.

Figura 2. Controle Toolbar posicionado em um Web Form

O objeto Toolbar propriamente dito contém várias propriedades, como cor de plano de fundo, estilos de borda e fontes. Modificar a aparência da barra de ferramentas é fácil: basta apenas modificar cada uma dessas propriedades. Como ocorre com a maioria dos Web Controls, o controle Toolbar expõe uma propriedade AutoPostback. Quando AutoPostback for true, todos os itens emitirão um Postback para o servidor (ou seja, a página será transmitida de volta ao servidor, alterada e depois restaurada de volta ao cliente). Quando essa propriedade estiver definida como False, os itens poderão ser adaptados para Postback (ou não). Quando o Toolbar estiver posicionado no formulário, você poderá usar a propriedade Items para adicionar itens da barra de ferramentas a ele. A caixa de diálogo é bastante objetiva, e não há nada nela com que você precise se preocupar.

Eventos do controle Toolbar

O Toolbar propriamente dito expõe dois eventos principais, que podem ser vinculados através do designer. O controle Toolbar do Internet Explorer é composto de botões e de outros controles que normalmente possuem eventos vinculados a eles. Os controles que fazem parte de um conjunto não podem ser conectados através do designer, mas podem ser vinculados manualmente. Vou descrever as duas técnicas.
Os dois eventos expostos pelo controle Toolbar (acima e além do complemento normal de Disposed, Load, Init, Prerender, Unload e DataBinding) são os eventos ButtonClick e CheckChange. O evento ButtonClick ocorre sempre que um dos botões na barra de ferramentas é pressionado. O evento CheckChange ocorre sempre que um dos botões de estilo de caixa de seleção é alterado. Você pode fazer com que o designer escreva o código de manipulação de eventos para você; para fazer isso, realce a barra de ferramentas no formulário, escolha o botão de evento na caixa de diálogo Propriedades (o botão de evento é representado pelo pequeno raio) e clique duas vezes na caixa do evento ButtonClick. O designer criará um manipulador de eventos de clique de botão na sua página de Codebehind (editor de código). Você poderá então interrogar o objeto (o primeiro argumento) a respeito do evento que acabou de ocorrer, conforme mostrado no código a seguir:

Listagem 1. Interrogando o objeto para saber qual evento ocorreu

private void OptionsToolbar_ButtonClick(object sender,

System.EventArgs e)

{

   // one way to respond to a button press:

   ToolbarButton tbbtn;

   tbbtn = ((ToolbarButton)sender);

   if(tbbtn.ID == "GoToMainPage")

   {

Server.Transfer("mainpage.aspx");

   }

}

Se preferir, você pode responder aos eventos de clique de botão escrevendo um manipulador de eventos e anexando-o manualmente ao botão quando a página for inicializada, conforme mostrado na Listagem 2. O código na Listagem 2 mostra o método OnInit da página da fonte, que vincula o manipulador de eventos MainPageClick ao décimo primeiro item da barra de ferramentas (que vem a ser o botão da página principal, ou MainPageButton). Observe a assinatura do manipulador — ela é definida pelo delegate Microsoft.Web.UI.WebControls.ToolbarItemEventHandler a partir da assembly de Web Controls do Internet Explorer. Ela retorna um boolean (no lugar do tipo void retornado pela maioria dos manipuladores de evento). Você deve retornar true se quiser que o evento seja bem-sucedido e false se quiser que o manipulador de eventos interrompa neste ponto. Responder diretamente aos cliques do botão resulta em um código mais curto, mas, por outro lado, você precisará escrever os manipuladores por conta própria.

Listagem 2. Respondendo diretamente a um botão

// OnInit called when page is created

override protected void OnInit(EventArgs e)

{

   //

   // CODEGEN: This call is required by the ASP.NET Web Form Designer.

   //

   InitializeComponent();

   ToolbarButton MainPageButton;

   MainPageButton =

(ToolbarButton)this.OptionsToolbar.Items[11];

   MainPageButton.ButtonClick += new

ToolbarItemEventHandler(OptionsToolbar_MainPageClick);

   base.OnInit(e);

}

private bool OptionsToolbar_MainPageClick(object sender,

   System.EventArgs e)

{

   Server.Transfer("mainpage.aspx");

   return true;

}

Examinando o Estado do controle Toolbar

Neste exemplo, o controle Toolbar tem sua propriedade AutoPostback definida como true. Sempre que um botão é pressionado ou um controle é alterado, o controle Toolbar causa um Postback. Uma vez dentro do Postback, você pode facilmente examinar o estado dos botões de opção e da caixa de seleção. O código de download referente a este artigo contém o código de processamento da página de fonte, que verifica cada um dos botões de estilo de fonte a fim de fornecer as tags corretas. Nele, cada controle é extraído da coleção Items por meio do índice numérico do controle. Ele é extremamente objetivo. No entanto, isso significa que você precisará atualizar esse código se decidir inserir um controle na barra de ferramentas e alterar a posição dos subcontroles existentes. Antes de escrever sobre como criar barras de ferramentas por meio de programação, vou esclarecer alguns pontos a respeito do método Render. Muitas páginas ASP.NET regulares são exibidas percorrendo-se a lista de controles no lado servidor na página e pedindo a cada um deles que se apresente (chamando Control.Render). Algumas vezes, também é possível gerar as páginas chamando diretamente Response.Write. Response.Write coloca o texto diretamente no fluxo de saída da página, e a página de fonte no exemplo poderia facilmente ter sido gerada com esse método, embora ele não seja recomendado para controles. No entanto, como System.Web.UI.Page deriva de System.Web.UI.Control, é possível usar a classe HtmlTextWriter para gerenciar as tags HTML (substituindo Render), o que você verá quando observar o código de download. O parâmetro HtmlTextWriter que é passado ao método Render gerenciará as tags HTML corretamente, independentemente do navegador que fez a solicitação. Embora ele não faça nenhuma diferença nessa aplicação (que apenas gerencia estilos de fonte), o uso de HtmlTextWriter é bastante útil para processar tabelas e outros elementos HTML, cujas sintaxes variam de acordo com as versões HTML.

Usando Controles Toolbars por meio de Programação

Além de desenvolver barras de ferramentas com o designer, você também pode desenvolvê-las por meio de programação. Imagine uma situação em que uma barra de ferramentas precise ser processada de forma diferente, dependendo da identidade ou autorização do usuário. Quando essas condições são determinadas em tempo de execução, é claramente recomendado manipular a barra de ferramentas por meio de programação.

Para demonstrar a manipulação da barra de ferramentas em tempo de execução, meu exemplo registra os usuários com autenticação baseada em formulário e, em seguida, atribui esses usuários a uma função de administrador e/ou usuário. (Observe os arquivos Web.Config, Login.ASPX e Global.ASAX no download do código para ver como funcionam as credenciais e funções.) Quando um usuário é registrado, o exemplo mostra a página principal da aplicação, com as barras de ferramentas apropriadas. A Figura 3 mostra a página principal da aplicação com as duas barras de ferramentas exibidas (aparentemente, existe um usuário conectado com ambas as funções, ou seja, usuário e de administrador).

Figura 3. Página Principal da Aplicação com duas Barras de Ferramentas

A página principal é iniciada com as barras de ferramentas (AdministratorsToolbar e UsersToolbar) adicionadas por meio do designer. A visibilidade de cada uma dessas barras de ferramentas está definida como False, o que significa que elas não serão processadas. As barras de ferramentas são montadas por programação (com base no usuário e na função atribuída a ele). A Listagem 3 mostra o código de configuração da UsersToolbar, bem como o código de resposta aos cliques do botão na barra de ferramentas.
Esse código também determina a função do usuário e configura cada Toolbar de forma apropriada. Ele cria e adiciona cada um dos botões à UsersToolbar. Além disso, repare que o sinalizador visível está mostrando True para as Toolbars apropriadas. O código responde ao evento ButtonClick da Toolbar interrogando o emissor do evento para encontrar a causa do Postback.

Listagem 3. Montando as Barras de Ferramentas de Forma Programática

protected void SetupUsers()

{

  string cssString =

   @"Z-INDEX: 101; LEFT: 170px; POSITION:

absolute; TOP: 200px";

  UsersToolbar.CssClass = cssString;

  this.UsersToolbar.AutoPostBack = true;

  // Users can get news, do email, messaging, fonts

  ToolbarLabel tblbl = new ToolbarLabel();

  tblbl.Text = "Stuff Users can do:";

  CssCollection cssc =

new CssCollection(@"font-family:Arial;

font-weight:bold;background:white;border:

solid 1px;color:black");

  tblbl.DefaultStyle = cssc;

  UsersToolbar.Items.Add(tblbl);

  ToolbarButton tbbtnNews = new ToolbarButton();

  tbbtnNews.Text = "News";

  tbbtnNews.ID = "News";

  UsersToolbar.Items.Add(tbbtnNews);

  ToolbarButton tbbtnEmail = new ToolbarButton();

  tbbtnEmail.Text = "Email";

  tbbtnEmail.ID = "Email";

  UsersToolbar.Items.Add(tbbtnEmail);

  ToolbarButton tbbtnMsg = new ToolbarButton();

  tbbtnMsg.Text = "Messaging";

  tbbtnMsg.ID = "Messaging";

  UsersToolbar.Items.Add(tbbtnMsg);

  ToolbarButton tbbtnFonts = new ToolbarButton();

  tbbtnFonts.ID = "Fonts";

  tbbtnFonts.Text = "Fonts";

  UsersToolbar.Items.Add(tbbtnFonts);

  UsersToolbar.Visible = true;

}

// Similar function for the Administrators Toolbar

private void Page_Load(object sender, System.EventArgs e)

{

   // Set up all the toolbar items during the first HTTP get, but

   // not during subsequent posts.

   if(!this.IsPostBack)

   {

if(User.IsInRole("Administrators"))

{

SetupAdministrators();

}

if(User.IsInRole("Users"))

{

SetupUsers();

}

   }

}

private void UsersToolbar_ButtonClick(object sender,

System.EventArgs e)

{

  if(sender is ToolbarButton)

  {

if(((ToolbarButton)sender).ID == "Fonts")

{

Server.Transfer("fontplay.aspx");

} else if(((ToolbarButton)sender).ID == "Email")

{

this.LabelWhatsHappening.Text = "Doing email...";

} else if(((ToolbarButton)sender).ID == "Messaging")

{

this.LabelWhatsHappening.Text = "Doing messaging...";

} else if(((ToolbarButton)sender).ID == "News")

{

this.LabelWhatsHappening.Text = "Doing news...";

}

  }

}

Personalizando a Toolbar

A classe Toolbar e cada um dos itens inclui um conjunto de coleções Cascading Style Sheet para personalização. Se você observar o código na Listagem 3, notará que ele aplica a classe CssCollection para personalizar a aparência da Toolbar no método SetUpUsers. A Toolbar e os elementos que a constituem possuem um estilo padrão, um estilo suspenso e um estilo selecionado.

O Código Processado

Um dos aspectos mais interessantes da Toolbar é o código HTML que ela processa. Em um navegador de nível inferior, a barra de ferramentas é representada por meio de tags de tabela, e os botões da barra de ferramentas são implementados por meio de tags HREF. A caixa de listagem suspensa é representada com tags de seleção dentro da tabela. Quando o cliente é um navegador de nível superior (IE 5.0 ou superior), a barra de ferramentas é implementada dentro de um arquivo denominado "/webctrl_client/1_0/toolbar.htc". O arquivo toolbar.htc contém um script que ativam recursos como dicas de ferramentas e flutuação.

Conclusões

O controle Toolbar é útil para consolidar comandos relacionados (como a Toolbar de fontes) e oferece um ótimo suporte para designer (exceto para os eventos de controle individuais). E, lembre-se, você também pode manipular a Toolbar por meio de programação quando precisar dessa flexibilidade.