Capitolo 8: Creazione e utilizzo di controlli utente Web

Transcript

1 Capitolo 8: Creazione e utilizzo di controlli utente Web Creazione e progettazione di controlli utente Web, 86 Aggiunta di controlli utente Web a una pagina, 88 Utilizzo efficace di controlli utente Web, 90 8 Le pagine Web di uno stesso sito spesso utilizzano componenti di visualizzazione standard, come ad esempio intestazioni, barre dei menu e piè di pagina. In genere, tali componenti sono uguali, o quasi, da pagina a pagina, così da unificare il sito e migliorare la continuità generale. La maggior parte degli sviluppatori esperti sviluppa tali componenti una volta, per poi utilizzare i risultati su più pagine. In questo modo viene garantita l uniformità e semplificata la manutenzione. Quando successivamente vengono apportate delle modifiche al sito, gli sviluppatori eseguono l aggiornamento su una copia principale, i cui risultati vengono visualizzati su ogni pagina. Due funzionalità di Microsoft ASP.NET 2.0, e quindi Microsoft Visual Web Developer, risultano particolarmente utili per l implementazione di contenuto standardizzato. I Controlli utente Web Visualizzano aree di contenuto standard o programmato all interno della pagina. Le pagine master Riempiono un intera pagina di contenuto standard o programmato, tranne una o più aree vuote in cui può essere visualizzato contenuto di vario tipo. Nella parte restante del capitolo verrà illustrato come creare e utilizzare i controlli utente Web. Nel prossimo capitolo verrà illustrato quando e come utilizzare le pagine master SLAX C08.indd :04:07

2 Creazione e progettazione di controlli utente Web Ogni volta che si desidera che lo stesso contenuto (o quasi) venga visualizzato all interno di più pagine, utilizzare un controllo utente Web. Creare uno di questi controlli è quasi come creare una pagina Web. CREAZIONE DI UN CONTROLLO UTENTE WEB 1 In Visual Web Developer, aprire il sito in cui verrà visualizzato il controllo utente. 2 Scegliere Nuovo File dal menu File. 3 Quando viene visualizzata la finestra di dialogo Aggiungi nuovo elemento, completare i seguenti campi del form: Modelli Consente di selezionare il controllo utente Web. Nome Consente di specificare un nome di file per il controllo. L estensione predefinita e richiesta è ascx. Linguaggio Consente di scegliere il linguaggio per ogni codice di programmazione che si prevede di scrivere: Microsoft Visual Basic, Visual C# o Visual J#. In caso di dubbi, scegliere lo stesso linguaggio utilizzato per il resto del sito. Inserisci codice in file separato Selezionare questa casella se si desidera che il codice HTML e il codice di programmazione di questo controllo si trovino in file separati. Deselezionarla per far sì che entrambi i codici si trovino nel file ascx. 4 Fare clic sul pulsante Aggiungi per creare il controllo. 86 Microsoft Visual Web Developer 2005 Express Edition - Crea le tue pagine Web 10-SLAX C08.indd :04:15

3 L aggiunta di controlli a un controllo utente Web avviene come per la pagina Web: È possibile trascinarli dalla finestra Casella degli strumenti, inserirli utilizzando il menu Layout oppure utilizzare gli altri metodi descritti nel capitolo 6. Tramite la procedura seguente, ad esempio, è possibile creare un controllo utente Web che visualizza la data corrente. CREAZIONE DI UN CONTROLLO UTENTE WEB PER VISUALIZZARE LA DATA CORRENTE 1 Utilizzando i quattro passaggi della procedura sopradescritta, creare un nuovo controllo utente Web denominato TodayIs.ascx. 2 Visualizzare il controllo TodayIs.ascx nella visualizzazione Progettazione Impostare il punto di inserimento nell angolo superiore sinistro della finestra delle modifiche, quindi digitare Today is: Cercare nel gruppo Standard della finestra Casella degli strumenti l icona del controllo Literal. Trascinarla dalla finestra Casella degli strumenti e posizionarla dopo il testo del passaggio 3 (Today is:). Assicurarsi che nella finestra Proprietà siano visualizzate le proprietà del nuovo controllo Literal: Literal1 System.Web.UI.WebControls.Literal. 6 Utilizzando la finestra delle proprietà, modificare il valore della proprietà ID da Literal1 a littodayis. 7 8 Fare clic nella finestra delle modifiche principale, quindi premere F7. In questo modo viene visualizzato il codice di programmazione del controllo utente Web nella visualizzazione Origine. A questo punto dovrebbero comparire due elenchi a discesa nella parte superiore della finestra delle modifiche. Capitolo 8: Creazione e utilizzo di controlli utente Web SLAX C08.indd :04:15

4 Per Visual Basic.NET, selezionare Pagina nell elenco a discesa di sinistra e Carica in quello di destra. Quindi digitare l istruzione riportata di seguito in verde (Visual Web Developer fornisce il codice mostrato in testo normale). Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) littodayis.text = DateTime.Today.ToLongDateString End Sub Per C#, selezionare TodayIs nell elenco a discesa di sinistra e Page_Load(object sender, EventArgs e) in quello di destra. Quindi digitare l istruzione riportata di seguito in verde (Visual Web Developer fornisce il codice mostrato in testo normale). protected void Page_Load(object sender, EventArgs e) { littodayis.text = DateTime.Today.ToLongDateString(); } L istruzione digitata ottiene la data corrente dal sistema operativo, la formatta per la visualizzazione e memorizza il risultato nel controllo Literal aggiunto ai passaggi 4, 5 e 6. 9 Scegliere Save TodayIs.ascx dal menu File per salvare il controllo. Nella sezione seguente verrà spiegato come testarlo. Aggiunta di controlli utente Web a una pagina È possibile aggiungere un controllo utente Web ad ogni pagina Web ASP.NET dello stesso sito tramite una procedura notevolmente semplice. 88 Microsoft Visual Web Developer 2005 Express Edition - Crea le tue pagine Web 10-SLAX C08.indd :04:16

5 AGGIUNTA DI UN CONTROLLO UTENTE WEB AD UNA PAGINA WEB ASP.NET 1 Aprire la pagina ASP.NET in cui si desidera venga visualizzato il controllo utente Web. 2 Trascinare il controllo utente Web dalla finestra Esplora soluzioni alla pagina Web aperta. Per testare il controllo utente Web, fare clic con il pulsante destro del mouse su ogni pagina contenente il controllo e scegliere Visualizza nel browser dal menu di scelta rapida. I risultati prodotti dovrebbero corrispondere a quelli della figura 8-1. SUGGERIMENTO È inoltre possibile aggiungere un controllo utente Web a un altro controllo utente Web. Figura 8-1 Per testare un controllo utente Web, visualizzare una pagina in cui è contenuto. Capitolo 8: Creazione e utilizzo di controlli utente Web SLAX C08.indd :04:16

6 Utilizzo efficace di controlli utente Web In genere i controlli utente Web sono facili da utilizzare. Nonostante ciò, possono sorgere dei problemi. Gli argomenti trattati in questa sezione rispondono ad alcune domande comuni e forniscono dei consigli per affrontare alcuni problemi tipici. Nozioni sui tag del controllo utente Web La prima volta che un controllo utente Web viene aggiunto a una pagina, Visual Web Developer aggiunge due tag: Un Register Questo tag viene visualizzato sopra il codice di origine HTML della pagina e associa un nome di file del controllo utente Web a un prefisso e a un nome di tag. Di seguito viene riportato un esempio: <%@ Register Src= TodayIs.ascx TagName= TodayIs TagPrefix= uc1 %> Per un controllo utente Web è necessaria solo una dichiarazione per pagina, anche se il controllo viene visualizzato più volte. Un tag Web User Control Questo tag viene visualizzato nel punto in cui si desidera che venga visualizzato il controllo utente Web nella pagina. Il prefisso e il nome di tag della Register identifica il tipo di controllo. Di seguito viene riportato un esempio: <uc1:todayis ID= TodayIs1 runat= server /> Una pagina ha bisogno di un tag simile a quello riportato per ogni istanza di controllo utente Web visualizzata. Naturalmente il browser non riceve né la Register né il tag del controllo utente Web. Tali tag comunicano semplicemente ad ASP.NET di caricare un oggetto controllo utente Web nella memoria del server Web. Quando ASP.NET invia la pagina al visitatore, comunica all oggetto controllo utente Web di effettuare il rendering di un HTML. Tale HTML, e non il tag originale, è ciò che viene inviato da ASP.NET al visitatore. 90 Microsoft Visual Web Developer 2005 Express Edition - Crea le tue pagine Web 10-SLAX C08.indd :04:18

7 Utilizzo di stili CSS nei controlli utente Web Nella progettazione di un controllo utente Web, tenere presente che ASP.NET unirà l output del controllo con la sezione <body> di ogni pagina Web che utilizza il controllo. Di conseguenza, il controllo utente Web non presenterà una sezione <head> propria, alcun tag <body> e </ body> e così via. Ciò merita particolare attenzione se, come fa la maggior parte degli sviluppatori Web esperti, si utilizzano stili CSS per formattare le pagine. Poiché gli stili specifici della pagina e i collegamenti a file del foglio di stile condivisi di solito si trovano nella sezione <head>, le regole di stile generalmente non saranno disponibili durante la progettazione di un controllo utente Web. Ciò porta a prestazioni WYSIWYG inferiori. Esistono due alternative per affrontare questo problema: Applicare gli stili CSS come al solito, ignorando il fatto che non sembrano avere effetto. Per verificare l aspetto finale del controllo, consultare una pagina in cui è contenuto. Aggiungere al controllo utente Web un blocco <style></style>, collegamenti a fogli di stile condivisi o entrambi. In questo modo sarà più facile apportare delle modifiche, ma potrebbero essere aggiunti stili ridondanti o non desiderati a pagine che utilizzano il controllo. Tenere presente che quando più pagine utilizzano lo stesso controllo utente, ogni pagina può avere i propri stili. In questi casi, un controllo utente Web che utilizza stili CSS assume l aspetto della pagina in cui è contenuto. Questo è uno dei motivi per cui Visual Web Developer non tenta di applicare stili CSS predefiniti ai controlli utente Web. Modifica di URL relativi Quando più pagine utilizzano lo stesso controllo utente Web e si trovano in cartelle diverse, gli URL che funzionano con una pagina non possono funzionare con un altra. Ad esempio: Per una pagina che si trova nella radice dell applicazione, la visualizzazione del logo della società potrebbe richiedere il tag seguente: <img src= images/logo.gif > Per una pagina che si trova nella sottocartella dell applicazione, la visualizzazione dello stesso logo richiederebbe il tag seguente: <img src=../images/logo.gif > Capitolo 8: Creazione e utilizzo di controlli utente Web SLAX C08.indd :04:18

8 Ciò rappresenta un problema se si codificano i percorsi relativi in tag <img src= > e <a href= > all interno del controllo utente Web. Ogni percorso relativo codificato risulterà non corretto se la pagina Web che utilizza il controllo si trova in una cartella diversa da quella prevista. Per evitare questo problema, codificare tutti i tag <img> e <a> che utilizzano percorsi relativi con attributi runat= server e far precedere il percorso relativo da un carattere tilde (~) e una barra (/). Di seguito sono riportati alcuni esempi: <a href= ~/companyinfo.aspx runat= server > <img src= ~/images/logo.gif runat= server ></a> Quando questi controlli vengono visualizzati da ASP.NET, i caratteri tilde (~) vengono sostituiti con il percorso per la radice dell applicazione. Se, ad esempio, la radice è /myapplication, quando il browser riceve i tag, questi verranno visualizzati come illustrato di seguito: <a href= /myapplication/companyinfo.aspx > <img src= /myapplciation/images/logo.gif ></a> Poiché i percorsi href= e src= sono ora relativi alla radice dell applicazione, funzioneranno correttamente indipendentemente da dove si troveranno le pagine. Codifica degli attributi per i controlli utente Web Il codice di programmazione di un controllo utente Web può utilizzare attributi codificati nel tag che carica il controllo. È possibile, ad esempio, scrivere il codice di programmazione per il controllo TodayIs in Visual Basic.NET come riportato di seguito: Public DateFormat As String Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) If LCase(DateFormat) = short Then littodayis.text = DateTime.Today.ToShortDateString() Else littodayis.text = DateTime.Today.ToLongDateString() End If End Sub NOTA Dichiarando una variabile o una funzione Public, o in C# pubblica, viene resa accessibile al di fuori della classe in cui viene dichiarata. Variabili e funzioni Private, o private, sono accessibili solo all interno della classe in cui sono dichiarate. 92 Microsoft Visual Web Developer 2005 Express Edition - Crea le tue pagine Web 10-SLAX C08.indd :04:19

9 Essendo Pubblica, la variabile DateFormat riceverà il valore di ogni attributo DateFormat= codificato nel tag che carica il controllo. Nell esempio seguente, nel primo tag <uc2:todayisvb> viene visualizzata una data estesa (predefinita), nel secondo ne viene visualizzata una breve. Register Src= TodayIs.ascx TagName= TodayIs TagPrefix= uc2 %> <uc2:todayisvb ID= TodayIsVb1 runat= server /> <uc2:todayisvb ID= TodayIsVb2 runat= server DateFormat= short /> Se si conosce come scrivere il codice di programmazione di Visual Basic o C# necessario, è possibile utilizzare in questo modo anche le proprietà pubbliche. Riepilogo I controlli utente Web offrono un modo rapido e facile per creare il contenuto una volta e utilizzarlo su più pagine Web. Per creare un controllo utente Web, si parte da un modello di controllo utente Web, quindi si aggiunge il contenuto come si farebbe per una pagina Web completa. Per includere il contenuto del controllo in una pagina ASP.NET, prima aprire la pagina nella visualizzazione Progettazione, quindi trascinare il controllo da Esplora soluzioni nel punto desiderato. I controlli utente Web hanno un estensione ascx. Nel capitolo successivo verrà spiegata la modalità per utilizzare Pagine master, un altro metodo per la replica del contenuto su più pagine. Capitolo 8: Creazione e utilizzo di controlli utente Web SLAX C08.indd :04:19