2 pagine in totale: <<Indietro 1 [2]
Personalizzare l'output del control
E' importante almeno accennare che la classe ControlDesigner è adatta per controlli isolati. Qualora si vogliano creare dei controlli che facciano da contenitore ad altri controlli (ad esempio un panel) allora bisogna ereditare da un'altra classe: ReadWriteControlDesigner . Questa classe deriva da ControlDesigner ma aggiunge la funzionalità per trascinare dei controlli figlio sul contenitore che viene implementato. Anche per questo tipo di controlli, comunque, i principali metodi da implementare sono gli stessi. Il panel di ASP.NET per il rendering a design-time usa una classe, PanelDesigner, che deriva proprio da questa classe. Per i controlli basati sui template, invece, si deve ereditare dalla classe TemplatedControldesigner .
Nel nostro controllo modifichiamo la fase di render a run-time inserendo un Javascript che emette l'HTML.
protected override void Render(HtmlTextWriter output){
output.Write("<script language=\"javascript\">document.write(\"");
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>\");</script>");
}
A DesignTime questo sarà il risultato
Come si vede non viene renderizzato nulla se non il rettangolo che segnala la presenza di un controllo server.
Per evitare questo creiamo la classe per il rendering a design-time.
public class DesignTime : ControlDesigner{
ControlloCon FControllo;
public override void Initialize(System.ComponentModel.IComponent component){
this.FControllo = (ControlloCon)component;
base.Initialize(component);
}
public override string GetDesignTimeHtml() {
try{
if (FControllo.Text == string.Empty)
return GetEmptyDesignTimeHtml();
else
return "<table><tr><td>" + FControllo.Text + "</td></tr></table>";
}
catch(Exception ex){
return GetErrorDesignTimeHtml(ex);
}
}
protected override string GetEmptyDesignTimeHtml(){
return "<table><tr><td>" + typeof(ControlloCon) + " " + FControllo.ID + "</td></tr></table>";
}
protected override string GetErrorDesignTimeHtml(Exception e){
return CreatePlaceHolderDesignTimeHtml(e.Message);
}
}
Infine associamo il controllo alla classe di DesignTime.
[Designer("ControlloConDesignTime.DesignTime")]
public class ControlloCon: System.Web.UI.WebControls.WebControl{
Il risultato sarà lo stesso di quando il render viene effettuato direttamente in html.
Gli attributi
Come abbiamo visto dal codice, l'associazione tra il controllo e la classe di disegno viene fatta tramite l'attributo Designer. Questo non è l'unico attributo utile per il design-time, ce ne sono molti altri che con sforzo minimo possono aiutare l'utente finale ad usare con più semplicità i nostri controlli. Principalmente questi si possono dividere in 2 tipi: quelli associati al controllo e quelli associati alla proprietà.
Tra quelli associati al controllo troviamo i seguenti:
- Designer
- Editor: usato per associare una form custom e per settare le proprietà in maniera più semplice e rapida per lo sviluppatore. Verrà discusso in maniera approfondita nel prossimo articolo.
- DefaultEvent: usato per associare un evento di default al doppio clic dell'utente. (ad esempio il clic dell'oggetto button)
Tra quelli associati alla proprietà troviamo i seguenti:
- Description: usato per associare una descrizione alla proprietà, visualizzata in basso nella finestra di proprietà.
- Category: usato per associare una categoria al controllo quando la visualizzazione della finestra di proprietà è in modalità di visualizzazione per categoria e non per ordine alfabetico.
- DefaultValue: usato per dare un valore di default alla proprietà. Quando il valore della proprietà è diverso da quello di default, questo viene rappresentato in grassetto nella finestra di proprietà, altrimenti viene visualizzato normalmente.
- Editor: usato per associare una form custom per settare la proprietà in maniera più semplice e rapida (basta pensare ad una collection di oggetti complessi, XML, un tree, .ecc ecc.) Verrà discusso in maniera approfondita in un prossimo articolo.
Conclusioni
Abbiamo visto come con la semplice implementazione di una classe possiamo, e pochi attributi, possiamo migliorare notevolmente la user-experience per i nostri controlli. Ma se quello che abbiamo visto fin qui aumenta la ?bellezza? di un controllo, per la praticità e rapidità si può fare molto di più creando degli editor di proprietà e di controllo. Nel prossimo articolo mi occuperò di questa potente tecnica.
Approfondimenti
- #625 - Introduzione alla creazione di Custom Control
- Costruzione di custom controls con supporto a design time: Property Editor e Component Editor
- Custom Controls con supporto per l'Intellisense
- Databinding e templating con ASP.NET
- Costruire un Repeater a gruppi
2 pagine in totale: <<Indietro 1 [2]
Attenzione: Questo articolo contiene un allegato
Contenuti dell'articolo
Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.
Difficoltà
Utilità
Stampa 
Download
