Visual Basic.NET: le componenti Web Form e la realizzazione di un applicazione Web Prof. Mauro Giacomini A.A. 2008-2009
Le WebForm Consentono la realizzazione di interi progetti web-oriented in puro HTML che sono eseguibili su tutti i browser La programmazione delle WebForm avviene con un qualsiasi linguaggio supportato dal CLR Progettazione dell interfaccia visuale a oggetti Separazione del codice (gestione eventi) dalla presentazione (invece in nelle versioni precedenti convivevano nello stesso documento) Gestione dello stato della pagina (ovvero registrazione delle scelte svolte da ogni utente che accede alla pagina Web) Integrate con il modello ad eventi di Windows sia per il lato server sia per il lato client
Creazione di una WebForm Sulla WebForm si lavora con una solita form popolata dagli oggetti tipici delle interfacce VB con il solito drag and drop (o meglio con una pianificazione a tabella della pagina) Estensione.aspx propria della tecnologia ASP.NET Distinzione dei componenti Lato server Lato client Separazione della parte in HTML (interfaccia utente estensione.aspx) dalla logica applicativa (scritta in VB.NET estensione.vb o in C#, estensione.cs )
WebForm Designer Foglio bianco che raccoglie le compnenti dal toolbox di tipo: Tipo WebForm Tipo Data Tipo Components HTML Altre possibili componenti se installate ad hoc Usuale impostazione delle proprietà degli oggetti
Componenti lato server Producono i diversi tipi di output visualizzabile sia sui diversi dispositivi sia sui browser Due insiemi di componenti lato server Controlli HTML Controlli Web Generano le pagine HTML dell applicazione Preservano lo stato della sessione Espongono gli eventi necessari alla gestione lato client
Componenti HTML Namespace: System.Web.UI.HtmlControls Attivati dalla direttiva runat= server Es. istanza di HtmlInputText chiamata text1 <input type = text runat = server id = text1 value = ciao >
Gerar chia della classe HtmlC ontrol s
Tag vs component i
Componenti Web Namespace: System.Web.UI.WebControls Sostanzialmente identici ai controlli della form di VB delle precedenti versioni Sfruttano la tecnologia della piattaforma di ASP.NET Componenti complessi es: Calendario Crystal Report Viewer Autoadattamento allo schermo con il browser Data-bound capability, sono tutti associabili a una sorgente di dati (inizializzata e connessa) Direttiva runat = server
Gerarchia componenti Web
Elenco componenti (1) Label (testo non modificabile dal client che legge la pagina) TextBox Testo modificabile (direttamente dal client) e data-bound Modalità single-line, multi-line, password CheckBox (gestione sì/no) RadioButton (gestione sì/no) mutuamente esclusiva DropDownList (lista di scelta apribile per selezione singola) ListBox (elenco di voci selezionabili anche a gruppi) CheckBoxList RadioButtonList
Elenco controlli (2) Button Invia al server dati immessi dal client Definizione di eventi Link buttom (simile al button, ma con hyperlink) Image button HyperLink Imagedisplay Panel (raggruppa componenti)
Elenco controlli (3) Table (contiene strutture tabellari in associazione con TableRow e TableCell) Calendar (visualizzazione di calendario perpetuo) Repeater (controllo list-bound connesso a una sorgente di dati che è visualizzata con controlli personalizzati con un template HTML) DataList (simile al precedente con diverso metodo di personalizzare il layout) DataGrid (connessione ai dati e presentazione in tabella con possibilità di modifiche direttamente sul DB) AdRotator (visualizza a banner informazioni in XML)
Varie Commenti - sintassi <%-- codice da commentare --%> Generazione applicazione Web scegliere progetto ASP.NET Web Application due facce: design e HTML
Proprietà del progetto (1) Raccolte in una vista ad albero Due macrocategorie: Common e Configuration Common properties General (nome, modulo di start, root namespace) Build (proprietà di compilazione) Imports (classi utilizzate già presenti quelle indispensabili) Strong name (meccanismi di protezione del codice per aggiornamenti successivi) Designer default (caratteristiche dell ambiente di sviluppo tra cui il linguaggio di scripting nel nostro caso VB)
Proprietà del progetto (2) Configuration properties: dedicate alla ottimizzazione del debug, compilazione e rilascio del progetto Optimization: uguale a quella delle versioni precedenti Build e Deployment: indicano la directory dove rilascare l eseguibile finale, inserimento di warning all interno del codice, mantenimento delle informazioni di debug
Proprietà del documento HTML General browser di default, linguaggi lato server e lato client Colors colori di: sfondo, link, link visitati, Margin and Keywords parole chiavi per i motori di ricerca
Global.asax Naturale estensione del Global.asa delle applicazioni ASP Definire alcuni parametri globali e attivare alcuni eventi come la creazione di una nuova sessione o chiusura dell intera applicazione Struttura tipo: Public Class Global Inherits System.Web.HTTPApplication Sub Application_BeginRequest (ByVal sender as object, Byval e as EventArgs) End Sub End Class
Possibili contenuti di Global.asax
Web.config In formato XML elemento principale con tag <configuration> due sottogruppi: dichiarazioni ed impostazioni nelle dichiarazioni è possibile ad esempio inserire le impostazioni per le stringhe di connessione ai DB indicazione dei compliatori e degli assemblatori indicazione dei namespace
Web.config: Esempio <configuration> <system.web> <compilation defaultlanguage= VB debug= true > <compilers> <compiler language= VB;VBScript extension=.cls type = Microsoft.VB.VBCodeProvider,System /> </compliers> <assembiles> <add assembly = ADODB /> </assemblies> <namespaces> <add namespeces = System.Web /> <add namespeces = System.Web.UI /> </namespaces> </compilation> </system.web> </configuration>
Modello degli eventi Separazione fra dove si verifica l evento (client) e dove viene gestito (server) Le informazioni relative all evento sono catturate sul client e inviate al server con il protocollo HTTP La gestione delle Web form interpreta il messaggio e invoca la procedura connessa Questi meccanismi sono trasparenti nella programmazione della programmazione ma con l accorgimento di rispettare alcuni vincoli per evitare la perdita di efficienza del programma
Vincoli sugli eventi Numero di controlli limitati non supportati eventi frequenti es onmouseover versioni speciali di eventi quali onchange Gestione differita degli eventi controlli server attivati solo da un clic su un pulsante catturati dal controllo sul client e inviati tutti assieme gestione di tutti gli eventi di modifica senza ordine prima e dopo la procedure di gestione del tasto premuto per obbligare l invio di un evento di modifica prima degli altri porre AutoPostBack a True Distribuzione degli eventi controlli complessi (DataList e DataGrid) intercettano gli eventi dei controlli contenuti e generano un evento generico ItemCommand con parametri
Procedure d evento <asp:button id= btn onclick= Convalida runat= server /> Associa all evento Click la procedura Convalida Due parametri associati all evento Oggetto che ha generato l evento Oggetto con informazioni specifiche sull evento (EventArgs) ad esempio ImageButton genera ImageClickEventArgs con coordinate Sub Convalida (src As Object, e As EventArgs)
Eventi delle Web Form Page_Init (inizializzazione delle variabili, si crea un istanza lato server dell oggetto Page) Page_Load (ogni volta che viene caricata dal runtime di ASP.NET a causa di una richiesta del browser, si può cambiare il contenuto dei controlli) Page_Unload (ultimo evento di una pagina caricamento di altra pagina, attività di registrazione in un file di log, chiusura di file e database, distruzione dell oggetto Page)
Esempi Sub Page_Load (src as Object, e as EventArgs) txtname.text = Pippo End Sub Sempre Pippo nella Text ad ogni refresh Sub Page_Load (src as Object, e as EventArgs) if not Page.IsPostBack Then txtname.text = Pippo end if End Sub Solo la prima volta Pippo nella Text
Validazione dell input Lato server Più sicura (si può fare sempre) Più lenta (necessita di mandare tutti i dati al server) Lato client Più veloce Incerta (l utente può aver disabilitato gli script) Controlli di ASP.NET automaticamente scelgono, se possibile lato client altrimenti lato server
Sintassi <asp:controllo_validazione id= controllo_validazione runat= server ControlToValidate = id_controllo ErrorMessage = messaggio d errore Display = modalità di visualizzazione > </asp:controllo_validazione>
Modalità di Visualizzazione Static: compare quando si verifica l errore, ma permane anche se l errore è corretto fino al successivo submit Dynamic: compare in presenza di errori e scompare se si risolve il problema anche senza un submit None: non visualizza il messaggio, solo lo registra nel ValidationSummary Si possono applicare più controlli di validazione a uno stesso oggetto, basta indicare tutte le volte che necessario il nome dell oggetto da controllare nella proprietà ControlToValidate.
RequiredFieldValidator Controllo di immissione obbligatoria Esempio <asp:textbox id= txtnome runat= server /> <asp:requiredfieldvalidator id= ConvalidatxtNome runat= server ControlToValidate= txtnome ErrorMessage= Inserisci il tuo nome Display= dynamic > </asp:requiredfieldvalidator>
RangeValidator Controllo del range del valore inserito (se vuoto, valido) Da esplicitare il tipo di variabile Tipi possibili: Integer, Double, Currency, Date, String Esempio <asp:textbox id= txteta runat= server /> <asp:rangevalidator id= ConvalidatxtEta runat= server ControlToValidate= txteta Type= Integer MinimumValue = 18 MaximumValue = 50 ErrorMessage= E richiesta un età fra i 18 e i 50 anni Display= dynamic > </asp:rangevalidator>
CompareValidator Confronto con valore predefinito (ValueToCompare) o valore di un altro controllo (ControlToCompare), con tipo Da indicare l operatore (Operator), possibili operatori: Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual, DataTypeCheck Esempio <asp:textbox id= txteta runat= server /> <asp:comparevalidator id= ConvalidatxtEta runat= server ControlToValidate= txteta Type= Integer ValueToCompare = 0 Operator = GreaterThanEqual ErrorMessage= Inserire un valore positivo Display= dynamic > </asp:comparevalidator>
RegularExpressionValidator Controllo su uno schema predefinito del dato di ingresso (carta di credito, email, codicefiscale, ecc ) Proprietà specifica: ValidationExpression Caratteri da utilizzare (vedi pagina successiva) Esempio <asp:textbox id= txtemail runat= server /> <asp:regularexpressionvalidator id= ConvalidatxtEmail runat= server ControlToValidate= txtemail ValidationExpression= [\w.]+@[\w]+.(it com org net) ErrorMessage= Inserire un indirizzo di email corretto Display= dynamic > </asp:comparevalidator>
Caratteri per espressioni regolari (1) Consente di specificare valori alternativi * Specifica 0 o più occorrenze dell elemento che lo precede es ba* significa b, ba, baa, baaa, baaaa, + Specifica 1 o più occorrenze dell elemento che lo precede es ba+ significa ba, baa, baaa, baaaa,? Specifica 0 o 1 occorrenze dell elemento che lo precede es ba? significa b o ba [ ] Consentono di specificare valori alternativi [aeiou] indica una qualsiasi vocale
Caratteri per espressioni regolari (2) \w Indica un qualsiasi carattere alfanumerico compreso _ \s Indica un qualsiasi carattere di spaziatura \d Indica un qualsiasi carattere numerico {} Consente di indicare un numero preciso di occorrenze o di delimitarne il numero massimo o minimo. Es. a{3} indica aaa; a{3,} indica le stringhe di almeno tre a; a{,3} indica da 0 a tre caratteri a; a{3,5} indica aaa, aaaa, aaaaa. () Consente di individuare sottostringhe Es: \w.+(exe com bat) indica tutti i possibili eseguibili DOS
CustomValidator Consente di definire i vincoli da verificare perché un input utente sia valido specificando se la convalida vada fatta sul client (ClientValidationFunction) o sul server (OnServerValidate). Sul server la validazione inizia con l evento ServerValidate a cui è passato il parametro ServerValidateEventArgs la cui proprietà Value contiene il valore inserito nel controllo indicato. Il risultato del processo di validazione viene restituito nella proprietà IsValid dello stesso parametro.
CustomValidatorEsempio <html> <head> <script language= VB runat= server > Sub Convalida (src As Object, e As ServerValidateEventArgs) If Page.IsValid Then Msg.Text = Ok! End If End Sub Sub NumeroPari (src as Object, e as ServerValidateEventArgs) Dim num as Integer num = Integer.Parse(e.Value) e.isvalid = ((num mod 2)=0) End Sub </script> </head>
Corpo <body> <form> <asp:textbox id= txtnumero runat= server /> <asp:customvalidator id= ConvalidatxtNumero ControlToValidate = txtnumero onservervalidate = NumeroPari Display= Static ErrorMessage= Inserisci un numero pari runat = server /> <br> <asp:label id= Msg runat= server /> <br> <asp:button Text= Convalida onclick= Convalida runat= server /> </form> </body> </html>
Validation Summary (1) Se il controllo di validazione intercetta un errore, questo viene visualizzato al momento di esecuzione del controllo con modalità indicata dalla proprietà Display. Si possono visualizzare tutti questi eventuali messaggi in un unico punto della pagina con il controllo ValidationSummary La proprietà IsValid dell oggetto Page è True quando tutti i controlli di validazione sono stati soddisfatti
Validation Summary (2) Se si mette un ValidationSummary sulla Web Form, quando la proprietà IsValid dell oggetto Page è False, vengono automaticamente interrogati tutti i controlli di validazione e gli eventuali messaggi di errore sono raccolti e visualizzati nel controllo ValidationSummary. Con il ValidationSummary i messaggi non sono visualizzati direttamente, a meno che non siano specificati tra i tag di apertura e chiusa.
ValidationSummary: Proprietà DisplayMode: Indica come si visualizzano i messaggi di errore nella lista. Valori: BulletList, List, SingleParagraph HeaderText: Intestazione della lista dei messaggi di errore. ShowSummary: Indica se visualizzare o meno la lista dei messaggi sulla pagina, valore predefinito True. ShowMessageBox: Indica se la lista dei messaggi deve essere visualizzata in una messagebox, valore predefinito False. EnableClientScript: Se posta a False la validazione client side è inibita, togliendo effetto alle impostazioni di ShowMessageBox.