Designer de controle de amostra com listas de ação e serviços
O tópico a seguir descreve um amostra usando designers de controle ASP.NET com serviços e listas de ação para fornecer uma interface de usuário (UI) em tempo de design para os controles personalizados do servidor.
As seções a seguir contêm código de amostra que demonstra como criar e usar designers de controle ASP.NET para controles de servidor personalizados.Especificamente, este tópico (combinado com o tópico de código de amostra relacionado abaixo) mostra os seguintes recursos e tarefas envolvidas no trabalho com designers:
Criar designers que usam serviços de hospedagem de designer e listas de ação.
Associar um controle personalizado a um designer.
Compilar controles e seus designers associados em um conjunto de módulos (assembly).
Referenciar os controles em um página da Web.
Trabalhar com os designers de controle no modo de design Visual Studio 2005.
Há duas versões do código de amostra para projetistas, um escrito em Visual Basic, a outra em C#.O exemplo ilustra designers de controle personalizado que usam serviços de hospedagem e listas de ação.Você pode encontrar o código de amostra no tópico Como: Usar serviços e listas de ação com os designers de controle.Há quatro controles personalizados na amostra de código, todos os quais são simples, criada somente para ilustrar o uso de designers.Três dos controles personalizados derivam da classe Panel; a quarta é um controle Button personalizado.Cada um os controles do painel no código-fonte também possui um controle de designer personalizado associado.Esses designers usam serviços para permitir ao controle interagir com um ambiente de hospedagem, como Visual Studio 2005.Em um ambiente de design visual (modo de design, em Visual Studio 2005), esses designers fornecem o código que lhe permite criar menus em tempo de design com várias tarefas para configurar os controles.
Compilando uma amostra
A amostra Visual Basic exemplo e a amostra C# têm a mesma funcionalidade, para que você possa escolher a amostra in a linguagem de programação de sua preferência.
Para usar a amostra que você preferir, você o compila como uma biblioteca e coloca o conjunto resultante para o diretório Bin de seu aplicativo da Web.
O exemplo de código a seguir mostra como compilar a amostra de um prompt de comando.
vbc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:DesignerServicesAndListsVB.dll DesignerServicesAndLists.vb
csc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out: DesignerServicesAndListsCS.dll DesignerServicesAndLists.cs
Após a compilação da amostra, lembre-se copiar o arquivo resultante DesignerServicesAndListsVB.dll ou DesignerServicesAndListsCS.dll para pasta bin do seu site da Web.
Arquivos XML necessários
Além do conjunto com os controles e designers, a amostra é dependente em três arquivos XML separados.Esses arquivos XML contêm informações de estilo básico que demonstra como os projetistas podem utilizar os serviços fornecidos pelo ambiente de hospedagem.Nesse caso, os projetistas dinamicamente carregam dados de estilo dos arquivos XML em tempo de design, e usam os dados para alterar a aparência dos controles de superfície de design.Este exemplo demonstra o uso dos Serviços de designer de hospedagem e não serve como uma recomendação para implementar definições de estilo.
Os arquivos XML para esse exemplo residem na mesma pasta que a página da Web ASP.NET no qual você irá hospedar os controles.O conteúdo dos arquivos, RedStyle.xml, BlueStyle.xml, e GreenStyle.xml, é fornecido abaixo.
RedStyle.xml
<?xml version="1.0" encoding="utf-8" ?>
<styles>
<style name="BackColor" value="red"></style>
<style name="ForeColor" value="white"></style>
</styles>
BlueStyle.xml
<?xml version="1.0" encoding="utf-8" ?>
<styles>
<style name="BackColor" value="blue"></style>
<style name="ForeColor" value="white"></style>
</styles>
GreenStyle.xml
<?xml version="1.0" encoding="utf-8" ?>
<styles>
<style name="BackColor" value="green"></style>
<style name="ForeColor" value="white"></style>
</styles>
Usando os controles de amostra e designers em uma página ASP.NET
Para trabalhar com os controles de amostra e designers, você deve colocar os controles em um página da Web ASP.NET que você possa usar em um designer tal como Visual Studio 2005.Para a finalidade desta amostra, você deve adicionar um página da Web ASP.NET ao seu site da Web em Visual Studio 2005.Primeiro, crie uma nova página da Web.Em seguida, em Modo de exibição de fonte, exclua o conteúdo de página padrão, e adicione as diretivas Page e Register mostradas na amostra de código a seguir.
<%@ page language="VB" %>
<%@ register tagprefix="aspSample"
assembly="DesignerServicesAndListsVB"
namespace="Samples.AspNet.VB.Controls" %>
<%@ page language="C#" %>
<%@ register tagprefix="aspSample"
assembly="DesignerServicesAndListsCS"
namespace="Samples.AspNet.CS.Controls" %>
.gif "Observação") Observação: |
|---|
A única diferença entre as diretivas para Visual Basic e C# é o atributo de idioma na diretiva Page e a extensão do nome do conjunto de módulos (assembly) na diretiva Register. |
Também é necessário copiar o código de marcação a seguir abaixo da diretiva Register.(Este código é o mesmo se você estiver usando Visual Basic ou C#.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>Designer Samples</title>
</head>
<body>
<form id="form1" >
<p style="font-family:tahoma;font-size:larger;
font-weight:bold">
Using Action Lists and Designer Host Services</p>
<div style="font-family:tahoma;font-size:x-small">
<span style="font-size: 10pt">Control #1 (ControlWithStyleTasksDesigner):
PanelContainerDesigner using a DesignerActionList, which
obtains a list of XML files in the project and sets
the style using the XML element
definitions.</span><p />
</div>
<aspSample:ControlWithStyleTasks id="ctl1"
backcolor="Red" forecolor="White">
Hello there.</aspSample:ControlWithStyleTasks>
<br />
<div style="font-family:tahoma;font-size:x-small">
<span style="font-size: 10pt">Control #2 (ControlWithConfigurationSettingDesigner):
PanelContainerDesigner using configuration settings
to obtain
the FrameCaption value.</span><p />
</div>
<aspSample:ControlWithConfigurationSetting
id="ctl2" >
Hello There
</aspSample:ControlWithConfigurationSetting>
<br />
<div style="font-family:tahoma;font-size:x-small">
<span style="font-size: 10pt">Control #3 (ControlWithButtonTasksDesigner):
PanelContainerDesigner using a smart-task action
item to insert a new button on the Web Forms page.</span><p />
</div>
<aspSample:ControlWithButtonTasks
id="ctl3" >
Hello There
</aspSample:ControlWithButtonTasks>
</form>
</body>
</html>
Definições de configuração para a amostra
Um dos designers nesta amostra usa uma entrada arquivo de configuração para exibir dinamicamente um título para o modo de design em um dos controles personalizados.Você deve abrir o arquivo web.config do seu site da Web, ou criar um se ele não existir e adicionar uma chave para o elemento <appSettings>, conforme mostrado no exemplo de código a seguir.
<appSettings>
<add key="ContainerControlTitle" value="Title from Config File"/>
</appSettings>
Testando os designers de controle no Visual Studio 2005
Após adicionar o arquivo compilado assembly .dll para pasta bin do seu site da Web, adicionando os arquivos XML, adicionar uma página hospedeira com os controles personalizados referenciados nele, e criar a entrada no arquivo web.config, você pode trabalhar com os controles no designer.Certifique-se de que a página esteja aberta no no modo design no Visual Studio 2005.Observe que há três controles do painel na página.Se você clicar no controle, a região que você pode editar é demarcada.
Testando serviços designer e listas de ação
Você pode testar o primeiro designer do controle posicionando o ponteiro do mouse sobre o canto superior direito do controle e em seguida, clicando no botão Lista de ação.A tomada de tela a seguir mostra o controle com a lista de ação exibida.
Controle com lista de ação exibida
.gif)
Na caixa de texto Configurar XML na lista de ação, você pode selecionar os arquivos XML criados por você anteriormente.Selecionar um dos arquivos XML existentes atualiza o estilo de tempo de design do controle com as informações de estilo do arquivo XML.Você pode tentar a mesma técnica usando os nomes dos outros arquivos XML.
Clicar no botão Lista de ação para o terceiro controle exibe uma lista de ação como aquele mostrado na seguinte tomada de tela.
Lista de ação do terceiro controle
.gif)
O comando Adicionar um botão adiciona um controle Button para o modo de tempo de design.O comando Adicionar um botão personalizado adiciona uma instância de uma controle de botão personalizado à página.
Testando serviços designer e áreas editáveis
O segundo controle exibe o título Título adicionado de configuração.O designer usa serviços designer para extrair essa configuração do arquivo web.config e adicioná-lo para o modo de tempo de design.
O controle também apresenta uma região editável no controle.Você pode clicar na área editável para digitar o novo conteúdo.O conteúdo é mantido para o código-fonte da página.
Consulte também
Tarefas
Demonstra Passo a passo: Criando um criador controle básico para um controle de servidor Web
Como: Usar serviços e listas de ação com os designers de controle