Il controllo, che chiameremo pzgrid, rappresenta un frame
grafico con header e foother che contiene all'interno del codice
html.
HtmlContainerControl rappresenta un tag HTML che implementa un
container per esempio: "<FORM parametri>"
è il tag di apertura e il rispettivo tag di chiusura
è "</FORM>" tra i due tag può
essere contenuto del codice HTML.
In VisualStudio 2008, perlomeno nella versione italiana, non ho
trovato un wizard apposito ho utilizzato invece il wizard che
crea un controllo di tipo WebControl.
WebControl non ha un tag di chiusura, esempio "<IMG
parametri />", non può quindi contenere niente.
Sia WebControl che HtmlContainerControl implementano
IAttributeAccessor ed estendono Control quindi sfruttiamo
il wizard per fargli fare il "lavoro sporco",
aggiungere gli use e i riferimenti necessari in automatico
Apriamo nell'IDE di VisualStudio, il progetto che abbiamo creato
nell'articolo precedente "c:\progetti\miositoweb", col
tasto destro del mouse clickiamo sul titolo della soluzione e
selezioniamo "Aggiungi/Nuovo progetto" e nella
finestra di dialogo selezioniamo "Libreria di classi",
assegniamo il nome "fcdata.server.controls" e come
path selezioniamo "c:\progetti".
Il wizard di Visualstudio creerà una struttura di
directory con tutto quello che serve per creare una libreria di
classi con una classe di esempio già presente
"Class1.cs".
Eliminiamo quindi il file Class1.cs e, con il tasto destro del
mouse clickiamo sul titolo del progetto
"fcdata.server.controls" e selezioniamo
"Aggiungi/Nuovo elemento" e nella finestra di dialogo
selezioniamo "Web/Contollo server ASP.NET" e digitiamo
il nome pzgrid.cs, eliminiamo il contenuto del file pzgrid.cs,
appena creato ed incolliamo al suo posto il seguente contenuto:
using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
namespace fcdata.server.controls
{
[DefaultProperty("Text")]
[ToolboxData("<{0}:pzgrid
runat=server> </{0}:pzgrid>")]
public class pzgrid : HtmlContainerControl
{
private string
_title = "";
private string
_titlestyle = "";
private string
_borderclass = "";
private string
skinheader = "";
private string
skinfooter = "";
[
Bindable(true),
Category("Appearance"),
DefaultValue("")
]
public string Title
{
get
{
return _title;
}
set
{
this._title = value;
}
}
[
Bindable(true),
Category("Appearance"),
DefaultValue("")
]
public string
TitleStyle
{
get
{
return _titlestyle;
}
set
{
this._titlestyle = value;
}
}
[
Bindable(true),
Category("Appearance"),
DefaultValue("")
]
public string
BorderClass
{
get
{
return _borderclass;
}
set
{
this._borderclass = value;
}
}
[
Bindable(true),
Category("Appearance"),
DefaultValue("")
]
public string
SkinHeader
{
get
{
return skinheader;
}
set
{
this.skinheader = value;
}
}
[
Bindable(true),
Category("Appearance"),
DefaultValue("")
]
public string
SkinFooter
{
get
{
return skinfooter;
}
set
{
this.skinfooter = value;
}
}
protected override
void RenderBeginTag(HtmlTextWriter writer){
// write header
String strtag = "<table width=\"100%\"
border=\"0\" align=\"center\"
cellpadding=\"0\"
cellspacing=\"0\">";
strtag += ("<tr><td valign=\"top\"
align=\"left\" style=\"" +
"background-image: url(skins/" + SkinHeader +
"/bg.jpg); " +
"background-repeat: repeat-x; " +
"height: 25px;border-style:none;\">");
strtag += ("<img src=\"skins/" + SkinHeader
+ "/left.jpg \" alt=\"\"
border=\"0\" /></td>");
strtag += ("<td valign=\"middle\"
width=\"100%\" style=\"" +
"background-image: url(skins/" + SkinHeader +
"/bg.jpg); " +
"background-repeat: repeat-x; " +
"height: 25px;border-style:none;");
if (!TitleStyle.Equals(""))
{
strtag += TitleStyle;
}
strtag += "\"> ";
strtag += Title;
strtag += ("</td><td valign=\"top\"
align=\"right\" style=\"" +
"background-image: url(skins/" + SkinHeader +
"/bg.jpg); " +
"background-repeat: repeat-x; " +
"height: 25px;border-style:none;\">");
strtag += ("<img src=\"skins/" + SkinHeader
+ "/right.jpg\" alt=\"\"
border=\"0\" /></td>");
strtag += ("</tr><tr><td
colspan=\"3\" valign=\"top\"
class=\"" + BorderClass + "\">");
writer.WriteLine(strtag);
}
protected override
void RenderEndTag(HtmlTextWriter writer){
// write fother
String strtag =
"<p> </p></td></tr>";
strtag += ("<tr><td valign=\"top\"
align=\"left\" style=\"" +
"background-image: url(skins/" + SkinFooter +
"/bg.jpg); " +
"background-repeat: repeat-x; " +
"height: 25px;border-style:none;\">");
strtag += ("<img src=\"skins/" + SkinFooter
+ "/left.jpg\" alt=\"\"
border=\"0\" /></td>");
strtag += ("<td valign=\"middle\"
width=\"100%\" style=\"" +
"background-image: url(skins/" + SkinFooter +
"/bg.jpg); " +
"background-repeat: repeat-x; " +
"height:
25px;border-style:none;\"> ");
strtag += ("</td><td valign=\"top\"
align=\"right\" style=\"" +
"background-image: url(skins/" + SkinFooter +
"/bg.jpg); " +
"background-repeat: repeat-x; " +
"height: 25px;border-style:none;\">");
strtag += ("<img src=\"skins/" + SkinFooter
+ "/right.jpg\" alt=\"\"
border=\"0\"
/></td></tr></table>");
writer.WriteLine(strtag);
}
}
}
Il codice può facilmente essere modificato per realizzare
altri controlli container.
Salviamo e ricompiliamo la soluzione dal menu
"Compila/Ricompila Soluzione".
Adesso utilizziamo il nostro controllo, allinterno di
default.aspx, per racchiudere il testo " Questo è un
semplice sito di Hello Word" all'interno di un frame
complesso con pochissime righe di codice HTML.
Aggiungiamo al progetto "miositoweb" un riferimento al
progetto "fcdata.server.controls": tasto destro del
mouse sul titolo del progetto "miositoweb" e
selezioniamo "Aggiungi/Riferimento", nella finestra di
dialogo selezioniamo "Progetti" e quindi
"fcdata.server.controls".
Apriamo il file web.config e cerchiamo all'interno la sezione
"<controls>", troveremo all'interno della
sezione alcune righe che iniziano con "<add
tagPrefix=", aggiungiamo in questa sezione la riga:
<add tagPrefix="fcsc"
namespace="fcdata.server.controls"
assembly="fcdata.server.controls"/>
Adesso apriamo il file default.aspx e sostituiamo le righe:
<div>
Questo è un
semplice sito di Hello Word
</div>
con le righe seguenti:
<div align="center"
style="width: 300px;">
<fcsc:pzgrid
ID="Pzgrid1" runat="server"
Title="HELLO WORD"
SkinHeader="pzgrid_g"
SkinFooter="pzgrid_gray"
BorderClass="paneltext">
Questo è il
contenuto del frame di Hello Word
</fcsc:pzgrid>
</div>
Quindi incolliamo prima del tag "</head>" la
riga seguente:
<link href="pzstyle.css"
rel="stylesheet" type="text/css" />
Ultimo tocco e abbiamo quasi finito, tasto destro del mouse sul
titolo del progetto "miositoweb" e selezioniamo
"Aggiungi/Nuovo elemento", nella finestra di dialogo
selezioniamo "Foglio di stile" e nel nome digitiamo
"pzstyle.css", nel file appena creato incolliamo le
righe seguenti:
.paneltext {
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000000;/*themecolour4%0;*/
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
adesso scaricate il file
skins.zip ed estraete il contenuto nella
directory "c:\progetti\miositoweb" in modo da avere
una directory ""c:\progetti\miositoweb\skins" che
conterrà le immagini usate per disegnare il frame.
A questo punto eseguiamo il menu "Compila/Ricompila
soluzione" quindi selezioniamo il progetto
"miositoweb" e premiamo contemporaneamente i tasti
MAIUSC+F6 per aggiornare il web che avevamo publicato.
Per visualizzare il risultato ottenuto andiamo con il tasto
destro del mouse sul titolo del progetto "miositoweb"
e selezioniamo "Visualizza nel browser".
Chi volesse può scaricare il progetto completo
miositoweb.zip ed estrarre il
contenuto nella directory "c:\progetti" quindi aprire
il file "C:\home\miositoweb\miositoweb.sln" con
VisualStudio.
Nel prossimo articolo vedremo come publicare su un server Apache
il sito appena creato.
Gli articoli successivi su ASP.NET o C# non faranno più riferimento ne a VisualStudio ne a MonoDevelop o Apache/Mono dal momento che, con l'articolo successivo dimostreremo che i progetti sono interscambiabili nei due ambienti.
|
