Dai blogs > Marco Leoncini > asp.net

un semplice Tab menu che implementa il pattern Command

di Marco LeonciniMarco Leoncini, in asp.net,
in quest'ultima settimana, mi sono dedicato alla realizzazione dell'interfacca grafica per un applicazione web. l'applicazione controlla lo stato di alcuni impianti di allarme.
allo scopo di selezionare alcune sezioni, volevo implementare il classico menu a tab.
visto i tempi ridotti, ho optato per implementarlo realizzando un UserControl, percè tipicamente richiedono meno tempo di sviluppo.
Implementare un TabMenu non è difficilissimo , si tratta solo di creare e gestire l'evento della selezione dei vari tab.

il file ascx è così composto

<span id="AreaTitle" class="AreaTitle"></span>
<asp:PlaceHolder Runat="server" ID="tabPlace" ></asp:PlaceHolder>

lo span viene utilizzato per impostare il titolo del menu, mentre utilizzeremo un placeholder per inserire i controlli, che costituiranno i vari tab.

nel codebehind:

private ListDictionary tabList = new ListDictionary();
protected PlaceHolder tabPlace;

oltre a dichiarare il PlaceHolder, creiamo una nuova istanza del tipo ListDictionary, la collezione è adatta a contenere al massimo 10 elementi, sopra i quali le prestazioni, decadono, ma visto che difficilemente nei tab presenti nell'interfaccia supereranno i 5 elementi non ci dovrebbero essere problemi ad utilizzarla.

creo un metodo pubblico, per aggiungere nuovi elementi a tabList

public void AddTab(string name, Command command)
{
if((name.Length > 0) & (command != null))
{
tabList.Add(name,command);
}
}

il metodo accetta una stringa, che oltre a rappresentare il nome che verrà visualizzato nel tab, servirà come chiave per recuperare l'istanza di command associata, (su cui tornerò dopo)
il seguente è il metodo che crea i tab , per ogni Item della collezione viene creato un LinkButtom e associato un metodo gestore dell'evento click, 

private void CreateTab()
{
IDictionaryEnumerator myEnumerator = tabList.GetEnumerator();

while(myEnumerator.MoveNext())
{
LinkButton l = new LinkButton();
l.CommandArgument = (string)myEnumerator.Key;
l.ID = null;
string string= l.UniqueID;
l.Text = (string)myEnumerator.Key;
l.Click += new EventHandler(l_Click);
tabPlace.Controls.Add(l);
if((l.CssClass == null) || (l.CssClass.Length == 0))
{
l.CssClass = "OFF";
}
}
}

il codice sottostante è il gestore dell'evento click, il quale recupera il command e richiama il metodo Execute()

private void l_Click(object sender, EventArgs e)
{
string key = ((LinkButton)sender).CommandArgument;
this.SetON(key);
if(tabList.Contains(key))
{
((Command)tabList[key]).Execute();
}
}
uno sguardo alla classe astratta Command che utilizzeremo per implementare le classi concrete.
public abstract class Command
{
public abstract void Execute();
}
un esempio di classe concreta:
public class AlarmTabCommand : Command
{
private Page page;
private UIcontrol controlToLoad;
private ISincUI uiManager;
public AlarmTabCommand(Page page, UIcontrol controlToLoad)
{
this.page = page;
this.controlToLoad = controlToLoad;
}
private bool CreateUIManger()
{
this.uiManager = this.page as ISincUI;
if(this.uiManager != null)
{
return true;
}
else
{
return false;
}
}

public override void Execute()
{
if(CreateUIManger())
{
this.uiManager.LoadUI(controlToLoad);
}
}
}

i tab vengono creati così nella pagina che "ospita" l'UserControl

AlarmStatusBar alarmbar = (AlarmStatusBar)this.LoadControl("~/userControl/AlarmTabBar.ascx");
alarmbar.AddTab("aperti", new AlarmTabCommand(this,...));
alarmbar.AddTab("pendenti",....);
...

il click del tab, causerà l'esecuzione del Metodo Execute qualsiasi implementazione fornisca la classe concreta.
ho preso questa strada, per non duplicare la logica di gestione dell'evento, già intercettato dall'UserControl, inoltre l'oggetto command può essere manipolato, e sostituito runtime, com estrema semplicità, l'esempio dell'implementazione del pattern command è estremamente semplice, ma se ne apprezza subito la flessibilità ,trovate uno strumento utile quà e i pattern quà.
credo di aver utilizzato anche il pattern Mediator, ma non ne sono sicuro :)

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Nella stessa categoria
I più letti del mese