Smart Tags no .Net

 

As Smart Tags auxiliam e muito a produtividade do desenvolvedor, deixando os códigos de lado e fazendo operações com wizard.

 

Hoje irei falar sobre como construir sua própria Smart Tag com um exemplo bem simples para que você possa entender o conceito e assim dar continuidade no desenvolvimento mais avançado.

 

O exemplo consiste em um textbox com Smart Tag.

 

Vamos lá...

 

Para começar criei um novo projeto do tipo Web Control Library que está dentro de File >> New Project >> C# ou Visua Basic >> Windows >> Web Control Library, dê o nome de Controle.

 

smarttagfig01.JPG

 

Por padrão ele cria uma nova classe no projeto, delete e crie uma nova classe do tipo Web Custom Control chamada MeuTextBox.

Faça uma referência a classe System.Design ao seu projeto e importe o namespace using System.ComponentModel e using System.ComponentModel.Design.

Adicione o código abaixo.

 

namespace Controle

{

    [DefaultProperty("Text")]

    [ToolboxData("<{0}:MeuTextBox runat=server></{0}:MeuTextBox>")]

    public class MeuTextBox : WebControl

    {

 

private TextBox txtexemplo;

       

 

        protected override void CreateChildControls()

        {

            txtexemplo = new TextBox();

            txtexemplo.ID = "txtSmartTag";

            this.Controls.Add(txtexemplo);

            base.CreateChildControls();

        }     

}

 

Em primeiro lugar eu herdo de WebControl. Logo depois eu sobrescrevo o método CreateChildControls (responsável pela criação dos controles), em seguida dou um id para o meu controle e adiciono a minha coleção de controles.

 

Agora criaremos a classe responsável pelo designer do controle, ou seja, o nosso controle já está criado, mas se formos compilar e adicionarmos a algum projeto ele não estará visível em fase de desenvolvimento.

 

Adicione uma nova classe ao projeto chamada Designer

 

namespace Controle

{

    class Designer: ControlDesigner

    {

 

 

        private MeuTextBox _meutext;

 

        public override void Initialize(System.ComponentModel.IComponent component)

        {

            base.Initialize(component);

         

            _meutext = (MeuTextBox)component;

        }

 

        private DesignerActionListCollection lista = null;

 

        public override DesignerActionListCollection lista

        {

            get

            {

                if (lista == null)

                {

                    lista = base.ActionLists;

                    lista.Add(new SmartTag((MeuTextBox)Component));

                }

                return lista;

            }

        }

 

        public override string GetDesignTimeHtml()

        {

           MeuTextBox control = (MeuTextBox)Component;

            StringBuilder sb = new StringBuilder();

            sb.Append("<table>");

            sb.Append("<tr>");

            sb.Append("<td>");

            sb.Append("<input type=text value=" + control.ID + "/>");

            sb.Append("</td>");

            sb.Append("</tr>");

            sb.Append("</table>");

            return sb.ToString();

        }

    }}

 

A classe Designer como já disse é o designer do nosso controle, então herdamos de ControlDesigner, em seguida inicializaremos nosso controle (Initialize).

 

Informaremos agora que nosso controle possuira Smart Tag , para isso usamos o DesignerActionListCollection, informando nele onde esta nossa classe que conterá a Smar Tag e qual o controle vinculado a esta Smart Tag.

 

lista.Add(new SmartTag((MeuTextBox)Component));

 

Em seguida sobrescrevemos o método GetDesignTimeHtml, responsavel por retornar o design do controle em tempo de design.

 

Enfim chegou a hora da criacão de nossa Smart Tag.

 

Crie uma nova classe com o nome SmartTag.

 

using System.ComponentModel.Design;

using System.ComponentModel;

using System.Drawing;

 

Adicione o seguinte código.

 

namespace Controle

{

//Herdamos de DesignerActionList: é como falamos para o nosso componente que ele possuirá uma série de opções, que serão vistas por Smart Tags.

   public class SmartTag: DesignerActionList

    {

//Criaremos uma variável text do tipo da nossa classe, pois assim ela conseguirá identificar o nosso controle.

 

//Informamos ao construtor o controle.

 

       private MeuTextBox text = null;

 

       public SmartTag(IComponent component)

           : base(component)

       {

           this.text = component as MeuTextBox;

          

       }

 

//Verificamos a propriedade do nosso controle com o PropertyDescriptor

      private PropertyDescriptor PropNome(string nome)

      {

          PropertyDescriptor pd = TypeDescriptor.GetProperties(text)[nome];

        

          return pd;

      }

 

//Criaremos uma propriedade do tipo Color passando a nosso controle o ForeColor.

 

       public Color Cor

       {

 

           get { return this.text.ForeColor; }

 

           set { PropNome("Forecolor").SetValue(text, value); }

 

       }

 

// E por último usamos o método GetSortedActionItems. Este por sua vez tem a função de retornar os itens que devem ser vistos na Smart Tag.

//

//Com o DesignerActionHeaderItem você consegue divivir suas opções.

 

// Como o DesignerActionPropertyItem você diz aos seus parâmetros o nome da propriedade que criamos anteriormente e a descrição que será exibida.

 

 public override DesignerActionItemCollection GetSortedActionItems()

       {

           DesignerActionItemCollection acao = new DesignerActionItemCollection();

           acao.Add(new DesignerActionHeaderItem("Visualização"));

           acao.Add(new DesignerActionPropertyItem("Cor","Cor do texto"));

       

           return acao;

       }

    }}

 

Dê um build em sua aplicação.

Crie um novo projeto do tipo WebSite e adicione o nosso controle ao toolbox.

 

Resultado Final

 

smarttagfig02.JPG

 

É isso ai pessoal com esse pequeno exemplo vimos como construir Smart Tags, e não pára por ai, com um pouco mais de trabalho você consegue obter um controle totalmente personalizado e com muitas facilidades através de Smart Tags.

 

Até mais.