Una delle cose che più apprezzo di ASP.NET è la facilità, e la velocità, di sviluppo di componenti web. Oltre a queste importantissime caratteristiche, il framework permette anche la creazione di diverse feature di Design-Time quali editor di proprietà, editor per il componente, visualizzazione dell'aspetto del componente, documentazione compilabile in un file di help e/o interpretata anche dall'editor di sviluppo, e altre minori che rendono comunque più gradevole e professionale l'utilizzo di un controllo. Questo è il primo di una miniserie articoli che si occuperanno dell'implementazione delle principali feature di Design-Time di un controllo web. Come linguaggio di sviluppo verrà utilizzato il C#, mentre come editor verrà preso in considerazione VS.NET 2003 e di conseguenza la versione 1.1 del framework.

Creazione dell'ambiente

In questo primo articolo ci occuperemo della visualizzazione di un controllo all'interno dell'editor di sviluppo e di alcuni attributi e commenti che possono semplificare, e di molto, il suo utilizzo. Per prima cosa bisogna inizializzare l'ambiente: creiamo una soluzione vuota, aggiungiamo un progetto per lo sviluppo del controllo e uno per la pagina web che verrà usata per fare i test. Il controllo sarà una ?Table? che visualizza un testo all'interno e che quando viene attraversata dal mouse modifica il colore del bordo.

Funzionamento del rendering a design-time

Partiamo da 3 concetti:

• Tutti i controlli web ereditano , direttamente o indirettamente, dalla classe System.Web.UI. Control .
• Il rendering di design-time viene effettuato dalla classe System.Web.UI.Design.ControlDesigner.
• La classe Control è associata alla ControlDesigner per renderizzare il controllo.

La classe ControlDesigner sfrutta il codice per il rendering a run-time del nostro controllo per effettuare il disegno sulla pagina. Questo spiega perché, i controlli semplici, anche senza implementare alcuna interfaccia di design-time, vengano comunque renderizzati.

Per dimostrare questo prendiamo il codice del nostro controllo e aggiungiamo la proprietà HoverBorderColor di tipo System.Drawing.Color, per dare la possibilità di selezionare il colore del bordo quando il mouse passa sopra la tabella.

 private Color FHoverBorderColor;
 
 public Color HoverBorderColor{
  get { return FHoverBorderColor; }
  set { FHoverBorderColor = value; }
 }

 

Implementiamo poi il metodo Render per disegnare il controllo a run-time (e anche a design-time in questo caso).

 protected override void Render(HtmlTextWriter output){
  output.Write("<table onmouseout=\"this.style.borderColor = '" + ColorTranslator.ToHtml(BorderColor) + "';\" onmouseover=\"this.style.borderColor = '" + ColorTranslator.ToHtml(HoverBorderColor) + "';\" style=\"");
  output.WriteStyleAttribute("Height", Convert.ToString(this.Height));
  output.WriteStyleAttribute("Width", Convert.ToString(this.Width));
  output.WriteStyleAttribute("Border-Style", Convert.ToString(this.BorderStyle));
  output.WriteStyleAttribute("Border-Width", Convert.ToString(this.BorderWidth));
  output.WriteStyleAttribute("Border-Color", ColorTranslator.ToHtml(this.BorderColor));
  output.Write("\"><tr><td>" + Text + "</td></tr></table>");
  }
 

Ora compiliamo, includiamo il controllo nella toolbar, trasciniamolo sulla pagina e lanciamo l'applicazione. A questo punto il controllo è perfettamente funzionante sia a design-time che a run-time.

VS.NET presenta però una limitazione che potrebbe rendere inutilizzabile il rendering di run-time dei nostri componenti per la rappresentazione a design-time: il codice javascript non viene supportato. Se noi prendiamo l'esempio precedentemente sviluppato e proviamo a passare sul controllo osserveremo che il bordo non cambia di colore. Se nel nostro caso questo non rappresenta nessun problema, per altri tipi di controlli potrebbe esserlo.

Ad esempio, molti menu sono dei javascript che generano HTML. A questo punto, pur venendo effettuato un corretto rendering a run-time, VS.NET non sarà in grado di visualizzare correttamente il controllo.

Fortunatamente la soluzione al problema è abbastanza semplice: basta creare una classe che eredita da System.Web.UI.Design. ControlDesigner , eseguire l'override di alcuni metodi e associare il nostro controllo a questa nuova classe. I metodi di cui eseguire l'override sono principalmente 3:

• GetDesignTimeHtml - questo metodo torna una stringa HTML che verrà disegnata sulla pagina a design-time. Questo è il metodo che, nella classe base ControlDesigner, chiama il render di run-time per effettuare quello di design-time.
• GetEmptyDesignTimeHtml - Questo metodo torna una stringa HTML che verrà disegnata sulla pagina a design-time solo nel caso che il metodo GetDesignTimeHtml ritorni una stringa vuota.
• GetErrorDesignTimeHtml - Questo metodo torna una stringa HTML che verrà disegnata sulla pagina a design-time nel caso ci siano errori durante la renderizzazione. Può accadere infatti, che, in versione HTML, si setti un valore errato per una proprietà e poi si passi alla versione visuale. In questo caso verrà utilizzata questa stringa.

Nessuno di questi metodi è astratto nella classe ControlDesigner quindi nella nostra classe possiamo implementare solo quelli di cui abbiamo veramente bisogno: ovviamente, GetDesignTimeHtml è il metodo più importante.