RSS feed
Dica/Truque: Criando e Usando Controles do Usuário do Silverlight e da WPF - ScottGu's Blog em Português

Dica/Truque: Criando e Usando Controles do Usuário do Silverlight e da WPF

Um dos objetivos fundamentais de projeto do Silverlight e da WPF é permitir que os desenvolvedores sejam capazes de facilmente encapsular funcionalidade de UI em controles reutilizáveis.

Você pode implementar novos controles adaptados derivando uma classe de uma das classes de Controle existentes (ou de uma classe de Controle base ou de um controle como TextBox, Button, etc). Outra alternativa é a criação de Controles do Usuário reutilizáveis - o que torna fácil usar um arquivo de linguagem de marcação XAML para compor a UI do controle (tornando super fácil a criação do controle).

Na
Parte 6 da minha série de tutoriais no Digg.com demonstro como criar um novo controle do usuário usando a janela de diálogo do VS 2008 "Add New Item" (Adicionar Novo Item) e definindo a UI dentro deste item. Esta abordagem funciona bem quando você sabe de antemão que você quer encapsular a UI dentro de um controle do usuário. Você também pode usar a mesma técnica com o Expression Blend.

Usando UI existente e Encapsulando-a como um Controle do Usuário

Algumas vezes você nem sempre sabe se você quer encapsular alguma funcionalidade de UI como um controle do usuário reutilizáveis até mesmo depois de você já ter iniciado a definição da UI em uma página pai ou controle.

Por exemplo, nós podemos estar trabalhando em um formulário onde queremos permitir que um usuário entre com informações referentes a envio e pagamento de um produto. Nós podemos começar criando alguma UI para encapsular a informação de endereço. Para fazer isto nós poderíamos adicionar um controle <border> na página, aninhar um grid layout panel dentro deste (com 2 colunas e 4 linhas), e então colocar labels e controles textbox dentro do grid:

Após cuidadosamente desenhar o formulário, nós podemos pensar "Ei - nós vamos usar a mesma UI para o endereço de cobrança, talvez devêssemos criar um controle do usuário reutilizável de forma que nós pudéssemos evitar o trabalho repetitivo".

Nós poderíamos usar a abordagem da opção de projeto "Adicionar novo Item" para criar um novo controle do usuário vazio e então copiar/colar o conteúdo da UI acima dentro deste novo controle.

Uma dica ainda mais rápida que podemos usar dentro do Blend, é simplesmente selecionar os controles que queremos encapsular como um controle do usuário no designer, e então "
clicar com o botão direito do mouse " e selecionar a opção do menu "Make Control" (Construir Controle):

 

Quando nós selecionarmos o item do menu "Make Control", o Blend irá perguntar pelo nome do novo controle de usuário a ser criado:

Nós vamos nomeá-lo como "AddressUserControl" e clicar em OK. Isto fará com que o Blend crie um novo controle do usuário que contém o conteúdo que selecionamos.

Quando reconstruirmos o projeto e voltarmos para a página original, veremos a mesma UI de antes - exceto que a UI do endereço está agora encapsulada dentro do AddressUserControl.

Nós poderíamos nomear este primeiro AddressUserControl "ShippingAddress" (Endereço de Envio) e então adicionar uma segunda instância deste controle do usuário na página para gravar o endereço de cobrança (nomearemos esta segunda instância do controle "BillingAddress"):


E agora se quisermos mudar a aparência de nossos endereços, nós podemos fazer isto em um único lugar aplicando as mudanças para as informações de envio e cobrança.

Ligando Objetos de Endereço no nosso AddressUserControl

Agora que nós temos alguns controles que encapsulam nossa UI de endereço, vamos criar uma classe do modelo de dados de endereço para que possamos uní-los. Vamos definir a classe igual ao mostrado a seguir (aproveitando o novo recurso de linguagem automatic properties (propriedades automáticas)):

 

Dentro do arquivo de code-behind de nosso arquivo Page.xaml nós podemos então instanciar duas instâncias de nosso objeto Address - um para o endereço de envio e outro para o endereço de cobrança (para o propósito deste exemplo nós iremos preenchê-los com dados fictícios). Nós iremos então de maneira programática unir os objetos Address aos nossos AdressUserControls na página. Nós faremos isto setando a propriedade "DataContext" em casa controle do usuário para a instância apropriada de endereço de envio ou cobrança do modelo de dados:

Noso último passo será adicionar declarativamente instruções de ligação dentro do nosso arquivo AddressUserControl.xaml que irá configurar os relacionamentos bi-direcionais de ligação entre as propriedades "Text" dos controles TextBox dentro do controle do usuário e as propriedades no modelo de dados Address que nós ligamos no controle do usuário:

Quando pressionarmos F5 para executar a aplicação nós teremos agora a ligação de dados automática entre os objetos do modelo de dados Address com os nossos controles do usuário AddressUserControls:

Em virtude de configurarmos as declarações de {Binding} ligação para serem "Mode=TwoWay" (Modo=Bi-direcional), mudanças que os usuários fizerem nos textboxes irão automaticamente refletir nos dados do Endereço.

Por exemplo, nós poderíamos mudar nosso endereço de envio original no browser para a Disneyland:


Se colocarmos um breakpoint no tratador de eventos "Click" do botão "Save" (e então clicarmos o botão), nós veremos como as mudanças realizadas no TextBox acima são automaticamente refletidas no nosso objeto do modelo de dados "_shippingAddress":


Nós poderíamos então implementar o tratador de evento SaveBtn_Click para persistir os objetos Shipping (Envio) and Billing (Cobrança) do modelo de dados da maneira que quisermos - sem termos que manualmente retornar ou manipular algo nos controles da UI contidos na página.

Esta separação limpa da visão/modelo que a WPF e o Silverlight suportam tornam fácil a mudança posterior da UI dos controles do usuário sem a necessidade de atualizar nenhum código da página. Isto também torna possível realizar teste de unidade da funcionalidade mais facilmente (leia meu último post para aprender mais a respeito Teste de Unidade com Silverlight).

Sumário

A WPF e o Silvierlight tornam fácil encapsular funcionalidades de UI dentro de controles, e o mecanismo do controle do usuário que eles suportam provê uma forma realmente fácil de aproveitar esta vantagem. A combinação de controles do usuário com dados permite uma boa separação de cenários de visão/modelo, o que por sua vez permite a você escrever código muito limpo quando se está trabalhando com dados.

Você pode fazer o download de uma versão completa do exemplo acima
aqui se você quiser executar o exemplo em sua própria máquina.

Para aprender ainda mais sobre Silverlight e WPF, veja meus Tutoriais de Silverlight e Página de Links. Eu recomendo a excelente palestra de Karen Corby's no MIX08 (na qual são abordados Controles do Usuário, Controles Adaptados, Modelagem, Modelos de Controle e mais), que você pode assistir online gratuitamente aqui.

Espero que ajude,

Scott

(Texto traduzido do post original por Leniel Macaferi.)

Published Friday, April 4, 2008 3:37 AM by Leniel Macaferi

Comments

No Comments