Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto.

Presentazione sul tema: "Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto."— Transcript della presentazione:

1 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Realizzare controlli AJAX Alessandro Forte Audaces.NET iuvat (.NET aiuta gli audaci )

2 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Chi sono Alessandro Forte Dove trovarmi : WebSite : http://www.alessandroforte.it/http://www.alessandroforte.it/ E-Mail : forte.alessandro83@gmail.comforte.alessandro83@gmail.com MSN : forte_alessandro@hotmail.comforte_alessandro@hotmail.com e ovviamente su DOTNETCAMPANIA !!! MCTS - ASP. NET on Framework 3.5 Project Lead @ Merqurio Pharma 2

3 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Agenda Elenco degli argomenti affrontati durante la sessione – Perchè Ajax e prerequisiti per sviluppare in Ajax – Client Side Scripting – Microsoft Ajax Library – Creiamo un Ajax Client Control – Creiamo un Ajax Server Control 3

4 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Perchè Ajax? PRO AJAX è una tecnica multi-piattaforma si ottengono applicazioni più veloci (minori dati elaborati) E più UserFriendly………..ehm….è più bello :D CONTRO Da testare su tutti i browsers Deve esserci Javascript nel client Il tasto indietro … ma chi se ne frega? 4

5 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Prerequisiti Tutti conosciamo vero cosè un Browser…(si certo Lynx)…??? Browser Visuale Script Javascript Update Panel Update Progress Ajax Control Toolkit 5

6 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Campani facciamolo….sto Ajax! 6

7 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Client Side Scripting – Script Blocks Esempio (01) : Vogliamo mostrare/nascondere un DIV Come aggiungiamo il codice Javascript? 1.Aggiungiamo il codice js nel markup 2.Aggiungiamo una referenza al.js nel markup …Guardiamo il codice 7

8 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello CSS - Script Dinamici a Runtime Esempio (02) : Vogliamo mostrare/nascondere un DIV a seguito di una regola Come aggiungiamo il codice Javascript? Ci avvaliamo di RegisterClientScriptBlock …Guardiamo il codice 8

9 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello CSS – Script Manager Esempio (03) : Vogliamo mostrare/nascondere un DIV Come aggiungiamo il codice Javascript? Tramite lo ScriptManager. Attenti alloverhead !!! …Guardiamo il codice 9

10 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello CSS – Cosa scegliere? Nei casi in cui il codice è statico : File.js referenziato tramite tag Nei casi in cui il codice è dinamico : Script caricato tramite RegisterClientScriptBlock Nei casi in cui dobbiamo interagire con Ajax o con codice js presente in degli Assembly: File.js caricato tramite ScriptManager 10

11 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Ma dobbiamo reinventare ogni volta la ruota??? 11

12 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Microsoft Ajax Library Perchè è tanto importante? E un wrapper che offre un modo object oriented per sviluppare con Javascript Quali funzionalità mette a disposizione? Namespaces, classi, costruttori, metodi, proprietà, ecc… Browser compatibility … in fondo è Javascript Debugging e Globalization 12

13 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Creiamo un componente Ajax Cosa intendiamo per componente Ajax? Dobbiamo seguire i seguenti steps: 1.Registrazione di un Namespace 2.Creazione della classe (ereditando da Sys.Component) 3.Creazione dei costruttori/distruttori 4.Definizione dei metodi e delle proprietà 5.Registrazione della classe 6.Notifica di caricamento 13

14 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Creiamo un componente Ajax Esempio (04) : Creiamo un PasswordStrengthComponent …Guardiamo il codice 14

15 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Creiamo un componente Ajax PRO: E mediamente complesso da sviluppare E riutilizzabile in diversi contesti CONTRO: Non è adatto per lutilizzo con i controlli 15

16 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Creiamo un Ajax Client Control Cosa intendiamo per Ajax Client Control? Dobbiamo seguire i seguenti steps: 1.Registrazione di un Namespace 2.Creazione della classe (ereditando questa volta da Sys.UI.Control ) 3.Creazione dei costruttori/distruttori 4.Definizione dei metodi e delle proprietà 5.Registrazione della classe 6.Notifica di caricamento 7.Associazione ad un controllo lato server tramite javascript 16

17 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Creiamo un Ajax Client Control Esempio (05) : Creiamo un PasswordStrengthClientControl …Guardiamo il codice 17

18 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Creiamo un Ajax Client Control PRO: Incapsula la logica di business del controllo Può estendere le funzionalità di un elemento del DOM Può estendere le funzionalità di un controllo lato server (anche se esistono gli Extender per questo) CONTRO: E necessario scrivere ulteriore codice js nel markup della pagina ospite E poco riutilizzabile 18

19 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Creiamo un Ajax Server Control Cosa intendiamo per Ajax Server Control? Dobbiamo seguire i seguenti steps lato Client: 1.Registrazione di un Namespace 2.Creazione della classe (ereditando questa volta da Sys.UI.Control ) 3.Creazione dei costruttori/distruttori 4.Definizione dei metodi e delle proprietà 5.Registrazione della classe 6.Notifica di caricamento 7.Associazione ad un controllo lato server tramite javascript Dobbiamo seguire i seguenti steps lato Server: 1.Creazione del controllo 2.Definizione dellinterfaccia IScriptControl 3.Definizione dei metodi GetScriptDescriptors e GetScriptReferences 19

20 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Creiamo un Ajax Server Control Esempio (06) : Creiamo un PasswordStrengthServerControl …Guardiamo il codice 20

21 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Creiamo un Ajax Server Control PRO: Iper-Riutilizzabile!!! CONTRO: Abbastanza complesso da scrivere Abbastanza complesso da debuggare 21

22 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello (Status : Im Away) Domandine...? 22

23 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello Un grazie di cuore a tutti gli sponsor! 23

24 Fare clic per modificare lo stile del titolo Fare clic per modificare stili del testo dello schema – Secondo livello Terzo livello – Quarto livello » Quinto livello GRAZIE PER LATTENZIONE La vostra opinione per noi è fondamentale: compilate il modulo di feedback! 24