Condividi tramite

Esempio di Progettazione controlli con servizi ed elenchi di operazioni

  • Articolo

Aggiornamento: novembre 2007

Nell'argomento riportato di seguito viene illustrato un esempio in cui vengono utilizzate finestre di progettazione dei controlli ASP.NET con servizi ed elenchi di operazioni per fornire un'interfaccia utente della fase di progettazione per controlli server personalizzati.

Nelle sezioni riportate di seguito è disponibile codice di esempio in grado di illustrare la creazione e l'utilizzo di finestre di progettazione dei controlli ASP.NET per controlli server personalizzati. In particolare, in questo argomento (in combinazione con l'argomento del codice di esempio correlato riportato di seguito) vengono illustrate le funzionalità e le attività associate all'utilizzo di finestre di progettazione:

  • Creazione di finestre di progettazione in cui vengono utilizzati servizi host di progettazione ed elenchi di operazioni.

  • Associazione di una finestra di progettazione a un controllo personalizzato.

  • Compilazione dei controlli e delle finestre di progettazione associate in un assembly.

  • Riferimento ai controlli in una pagina Web.

  • Utilizzo delle finestre di progettazione dei controlli nella visualizzazione Progettazione di Visual Studio 2005.

Vengono fornite due versioni del codice di esempio per le finestre di progettazione, una in Visual Basic e l'altra in C#. Nell'esempio vengono illustrate finestre di progettazione dei controlli personalizzate in cui vengono utilizzati servizi host ed elenchi di operazioni. Il codice di esempio è disponibile nell'argomento Procedura: utilizzare servizi ed elenchi di operazioni con finestre Progettazione controlli. Nell'esempio di codice sono inclusi quattro controlli personalizzati. Tali semplici controlli sono stati creati esclusivamente per illustrare l'utilizzo delle finestre di progettazione dei controlli. Tre controlli personalizzati sono derivati dalla classe Panel, mentre il quarto è un controllo Button personalizzato. A ciascun controllo Panel nel codice sorgente è inoltre associato un controllo finestra di progettazione personalizzato. Queste finestre di progettazione utilizzano servizi per consentire l'interazione del controllo con un ambiente host come Visual Studio 2005. In un ambiente di progettazione visiva, come visualizzazione Progettazione in Visual Studio 2005, queste finestre di progettazione forniscono il codice necessario per consentire la creazione di menu della fase di progettazione con diverse attività per la configurazione dei controlli.

Compilazione di un esempio

L'esempio Visual Basic e quello C# dispongono delle stesse funzionalità. È pertanto possibile scegliere l'esempio nel linguaggio di programmazione desiderato.

Per utilizzare l'esempio selezionato, eseguirne la compilazione come libreria e inserire l'assembly risultante nella directory Bin dell'applicazione Web.

Nell'esempio di codice riportato di seguito viene illustrato come compilare l'esempio dal prompt dei comandi.

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

Dopo la compilazione dell'esempio, assicurarsi di copiare il file DesignerServicesAndListsVB.dll o DesignerServicesAndListsCS.dll risultante nella cartella Bin del sito Web.

File XML necessari

In aggiunta all'assembly con i controlli e le finestre di progettazione, l'esempio dipende da tre file XML separati. Questi file XML contengono informazioni di stile di base che illustrano come le finestre di progettazione possono utilizzare i servizi forniti dall'ambiente host. In questo caso, le finestre di progettazione caricano in modo dinamico dati di stile dai file XML in fase di progettazione e utilizzano tali dati per modificare l'aspetto dei controlli nell'area di progettazione. L'esempio ha lo scopo di illustrare l'utilizzo dei servizi host di progettazione e non deve essere considerato come un'indicazione per l'implementazione di definizioni di stile.

I file XML per l'esempio risiedono nella stessa cartella della pagina Web ASP.NET in cui saranno inseriti i controlli. Di seguito viene fornito il contenuto dei file (RedStyle.xml, BlueStyle.xml e GreenStyle.xml).

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>

Utilizzo dei controlli e delle finestre di progettazione di esempio in una pagina ASP.NET

Per utilizzare i controlli e le finestre di progettazione di esempio, è necessario inserire i controlli in una pagina Web ASP.NET utilizzabile in una finestra di progettazione come Visual Studio 2005. Ai fini di questo esempio, è necessario aggiungere una pagina Web ASP.NET al sito Web in Visual Studio 2005. Creare innanzitutto una nuova pagina Web. In visualizzazione Origine eliminare quindi il contenuto predefinito della pagina e aggiungere le direttive Page e Register illustrate nell'esempio di codice riportato di seguito.

<%@ 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" %>
Nota:

Le uniche differenze tra le direttive per Visual Basic e per C# sono rappresentate dall'attributo del linguaggio nella direttiva Page e dall'estensione del nome dell'assembly nella direttiva Register.

È inoltre necessario copiare il codice riportato di seguito sotto la direttiva Register. Il codice rimane invariato indipendentemente dall'utilizzo di Visual Basic o 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>
      &nbsp; &nbsp;
  </form>
</body>
</html>

Impostazioni di configurazione per l'esempio

Una delle finestre di progettazione dell'esempio utilizza una voce del file di configurazione per visualizzare in modo dinamico un titolo per la visualizzazione Progettazione in uno dei controlli personalizzati. È necessario aprire il file Web.config del sito Web oppure crearne uno, se non disponibile, e aggiungere una chiave all'elemento <appSettings> come illustrato nell'esempio di codice riportato di seguito.

<appSettings>
  <add key="ContainerControlTitle" value="Title from Config File"/>
</appSettings>

Test delle finestre di progettazione dei controlli in Visual Studio 2005

Dopo l'aggiunta del file dll dell'assembly compilato alla cartella Bin del sito Web, l'aggiunta dei file XML, l'aggiunta di una pagina host contenente un riferimento ai controlli personalizzati e la creazione della voce nel file Web.config, è possibile utilizzare i controlli nella finestra di progettazione. Assicurarsi che la pagina sia aperta nella visualizzazione Progettazione di Visual Studio 2005. Nella pagina sono presenti tre controlli Panel. Facendo clic sul controllo verrà evidenziata un'area modificabile.

Test degli elenchi di operazioni e dei servizi delle finestre di progettazione

È possibile testare la finestra di progettazione del primo controllo posizionando il puntatore del mouse sull'angolo superiore destro del controllo e quindi scegliendo il pulsante dell'elenco di operazioni. Nella schermata riportata di seguito viene illustrato il controllo con l'elenco delle operazioni visualizzato.

Controllo con elenco delle operazioni visualizzato

Nella casella di testo Configure Xml disponibile nell'elenco di operazioni è possibile selezionare i file XML precedentemente creati. Selezionando uno dei file XML esistenti, lo stile della fase di progettazione del controllo verrà aggiornato con le informazioni di stile di tale file XML. È possibile provare la stessa tecnica utilizzando i nomi degli altri file XML.

Scegliendo il pulsante dell'elenco di operazioni per il terzo controllo viene visualizzato un elenco di operazioni come quello illustrato nella precedente schermata.

Elenco di operazioni del terzo controllo

Con il comando Add a Button viene aggiunto un controllo Button alla visualizzazione della fase di progettazione. Il comando Add a custom button consente di aggiungere un'istanza di un controllo Button personalizzato alla pagina.

Test delle aree modificabili e dei servizi delle finestre di progettazione

Nel secondo controllo viene visualizzata la didascalia Title Added From Config. La finestra di progettazione utilizza servizi di progettazione per estrarre tale impostazione dal file Web.config e aggiungerla alla visualizzazione della fase di progettazione.

Il controllo include inoltre un'area modificabile. È possibile fare clic sull'area modificabile per digitare nuovo contenuto, che verrà mantenuto nel codice sorgente della pagina.

Vedere anche

Attività

Procedura dettagliata: creazione di una finestra Progettazione controlli di base per un controllo server Web

Procedura: utilizzare servizi ed elenchi di operazioni con finestre Progettazione controlli

Concetti

Cenni preliminari sulle finestre Progettazione controlli ASP.NET