Rich Ajax Web Interfaces in Jquery
Upcoming SlideShare
Loading in...5
×
 

Rich Ajax Web Interfaces in Jquery

on

  • 1,950 views

 

Statistics

Views

Total Views
1,950
Views on SlideShare
1,946
Embed Views
4

Actions

Likes
1
Downloads
23
Comments
0

3 Embeds 4

http://www.linkedin.com 2
http://ns390230.ovh.net 1
url_unknown 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Rich Ajax Web Interfaces in Jquery Rich Ajax Web Interfaces in Jquery Presentation Transcript

  • Rich Ajax Web Interfaces A LBERTO B USCHETTU
  • S UMMARY
      • Javascript: breve introduzione;
      • Ajax: la svolta del web 2.0; View slide
      • Jquery: introduzione; View slide
      • Jquery: operazioni più comuni e utili;
      • UI Jquery;
      • Casi d'uso e dettagli;
      • Jquery e Struts;
      • Guide, books e link utili.
  • J AVASCRIPT : BREVE INTRODUZIONE
      •   Basato sullo standard ECMAScript ( ECMA-262 ) ed è stato creato da Brendan Eich of Netscape;
      • Loosely typed, prototype based ed  interpretato dal browser;
      • E' un linguaggio funzionale: tratta le funzioni come oggetti;
  • C ODICE JS <DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>   <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;en&quot;>        <head>               <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; />                <title>JavaScript!</title>                <script type=&quot;text/javascript&quot; src=&quot;my-script.js&quot;></script>      </head>        <body>      <!-- cdata per evitare problemi di validazione xhtml e commentati per impedire di non interpretare il codice javascript nei vecchi browser che non comprendono il tag cdata -->          <script type=&quot;text/javascript&quot;>            // <![CDATA[               // ]]>            </script>           </body>   </html>  
  • DOM (1)
      • Utilizza il DOM (Document Object Model): rappresentazione dei documenti strutturati come modello orientato ad oggetti ;
  • DOM (2)
      • Costituito da nodi. I tipi di nodi più interessanti:
        • Element : elemento dentro una pagina (contiene altri nodi);
        • Text : il testo dentro un element;
        • Document : la root della gerarchia DOM (es.: tag html);
      • Attualmente si usa il livello 2 del DOM;
      • Il DOM cambia a seconda del layout-engine usato dal browser:
        • Firefox,Camino, Flock, SeaMonkey,.., usano Gecko ;
        • IE usa Trident ;
        •   Safari, Chrome, Konqueror usano WebKit ;
  • http://it.wikipedia.org/wiki/Document_Object_Model
    • Anche i blank sono dei nodi del DOM (B rowser OM);
    • <html>
    • <head>
    • <title>My Document</title>
    • </head>
    • <body>
    • <h1>Header</h1>
    • <p>
    • Paragraph
    • </p>
    • </body>
    • </html>
    DOM in Html
  • O GGETTI DI JS
      • Hanno proprietà , eseguono metodi e reagiscono ad eventi ;
    Window: la finestra del browser, oggetto di default di JS; Document: oggetto document; Location: url della pagina corrente; Navigator: info sul browser; History: oggetto della cronologia;
      • Forms, Ancors, Links: oggetti html del documento;
      • Array: var myArray = new Array(4);
      • String: var myString = &quot;mio nome&quot;;
      • Date: var Data = new Date();
      • Math: Math.acos(x);
      • Object, Function, Boolean, RegExp.
      • ps. Undefined, Null, Boolean, Number, and String sono primitive
    Quelli definiti dall'utente
  • O GGETTI definiti dall'utente: Creazione
      •   Notazione compatta
      • // Literal (curly braces): var Fish = { name: &quot;&quot;,
      • description :&quot;&quot;,
    showDescription: function(){ alert (this.name.toUpperCase() + &quot; is a tropical fish!&quot;);} } var MyFish = Object.create(Fish); MyFish.name=&quot;guppy&quot;; MyFish.descrizione=&quot;Pesce tropicale .....&quot;
      • Uso del costruttore Object (utile se necessita una sola istanza)
          • // Using the Object constructor: var profile = new Object(); profile.name = 'Bob'; profile.age = 99; profile.job = 'Freelance Hitman
      • Con definizione del costruttore
    // costruttore, senza dichiarare un return in modo da restituire l'oggetto appena creato. function MyObject(parameter1, parameter2) { this.property1 = parameter1 this.property2 = parameter2 } // creazione di un oggetto var myobj = new MyObject('franco', 77)
  • Funzioni
      • Le funzioni sono istanze del tipo base Function;
    • Non necessario scrivere tutti i parametri (arguments[i]) function name(argumentlist) block;
    • Function statement : var name= function name(argumentlist) block
    • Function operator : function name(argumentlist) block -->crea un oggetto di tipo Function. Senza nome crea funzione anonima
    • Function constructor : new Function(strings...) --> corpo della funzione come stringa come parametro (deprecata)
  • Estendere un oggetto var Fish = function (name, description) { this.name=name; this.description=description; var peso=0; //proprietà privata! }; Fish.prototype.showDescription = function(){ $('div.descr').append(&quot;<p>Nome:<p/><p>&quot; +this.name + &quot;</p> &quot; + <p>Descrizione:</p><p>&quot; +this.description+&quot;</p>);  }
      • Il prototype è una base reference dell'oggetto che serve per tutte le copie figlie dell'oggetto parent; Creo delle proprietà pubbliche. In sostanza fà l'ereditarietà estendendo l'oggetto base;
  • Sintassi Javascript e Java a confronto JavaScript function Impiegato () { this.nome = &quot;&quot;; this.dipartimento = &quot;generale&quot;; } Java public class Impiegato { public String nome; public String dipartimento; public Impiegato () { this.nome = &quot;&quot;; this.dipartimento = &quot;generale&quot;; } } function Manager () { this.reports = []; } Manager.prototype = new Impiegato; function Progettista () { this.progetti = []; } Progettista.prototype = new Impiegato; public class Manager extends Impiegato { public String[] reports; public Manager () { this.reports = new String[0]; } } public class Progettista extends Impiegato { public String[] progetti; public Progettista () { this.progettista = new String[0]; } }
  • DOM TRAVERSING
    • Traversing DOM: getter
      • //referenziare un elemento DOM
      • var myParagraph = document.getElementById('myid');
      • var content = myParagraph.firstChild.data;
      • Traversing DOM: setter
          • var newEl = document.createElement(tagname); // tagname: a for <a href=&quot;...></a>
          • var newTxt= document.createTextNode(text); //text='blabla';
          • newEl.setAttribute(name, value); // es.: newEl.setAttribute ('href',' http://www ...');
          • newEl.appendChild(newTxt);
          • //adding to the DOM
          • var element = document.getElementById(&quot;para1&quot;);
          •   element.appendChild(newEl); 
          • element.insertBefore(existingNode, newEl);
      •  
      <html> <head></head> <body> .... <p id=&quot;myid&quot;>My first paragraph...</p> .... </body> </html>
  • E VENTI
      • Possono essere metodi degli oggetti DOM;
      • Eventi del mouse: onClick, onDblClick, onMouseOver, onDragDrop...
      • Eventi da tastiera: onKeyPress (preme e rilascia) , onKeyDown;
      • Eventi da modifica: onChange;
      • Eventi di &quot;fuoco&quot;: onFocus(evidenziato), onBlur (de-evidenziato), onSelect (se si seleziona);
      • Eventi da caricamento: onLoad, onUnload (chiuso docum );
      • Oggetto event (proprietà target, screenX, etc.).
      • <a href=&quot;go.html&quot; onmouseover=&quot;myposition(event);&quot;>clicca</a>
    function myposition (e) { alert('il mouse si trova nella posizione ' + e.screenX + ' - ' + e.screenY +'dello schermo'); }
  • Ajax
      • AJAX (Asincronous Javascript and XML);
      • L'oggetto XmlHttpRequest (XHR) alla base di tutto;
      • Ajax = XML + DHTML(HTML+Javascript+CSS)+Rich Design;
      • XHR per chiamate GET e POST asincrone;
      • Asincronia: elimina la linearità del flusso dati;
  • Modello tradizionale e modello Ajax
  • Ajax: da syncrono ad asincrono
    • Si segue un design pattern basato su:
      • Trigger (event o timer);
      • Operation (ajax);
      • Update (dom).
    Ajax: da syncrono ad asincrono
  • Ajax: operation
      • Chiamata AJAX:
      • Creare un oggetto XHR ( new XMLHttpRequest() );
      • Creare la richiesta( open e send );
      • Scrivere il callback ( per l'evento onreadystatechange );
      • Parsing della risposta.
  • Ajax: operation if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } xmlhttp.open(&quot;GET&quot;,&quot;ajax_info.txt&quot;,true); //open(method,url,async) xmlhttp.send(); //xmlhttp.open(&quot;POST&quot;,&quot;ajax_test.asp&quot;,true); //xmlhttp.setRequestHeader(&quot;Content-type&quot;,&quot;application/x-www-form-urlencoded&quot;); //settiamo l'handler onreadystatechange xmlhttp.onreadystatechange=function() //chiamata quando cambia il readyState { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById(&quot;myDiv&quot;).innerHTML=xmlhttp.responseText; } } Property Description readyState Status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status 200: &quot;OK&quot; 404: Page not found
  • C ROSSBROWSING
    • Browser sniffing (es.:navigator.userAgent.indexOf(&quot;Opera&quot;));
    • Object detection (window.XMLHttpRequest);
  • L IBRERIE J AVASCRIPT : PERCHÈ USARLE
      • Riduzione delle righe di codice;
      • Per ottenere javascript non intrusivo evitando &quot; inline-javascript &quot;;
      • Facilità nel manipolare il DOM;
      • Facilità nell'uso degli eventi;
      • Ajax reso molto più produttivo.
  • J QUERY : BASI
      • Light-weight library open source (nata nel 2006); 
      • Rochester Institute of Technology;
      • Ben documentata con numerosi plugins;
      • Utilizzatori: Google, Microsoft, Amazon, Dell, Twitter,
      • Ogni cosa incapsulata nell'oggetto jQuery ($() -->restituisce $ abbreviazione);
      • jQuery.NoConflict() per evitare conflitti con altre librerie($ è globale!)
  • J QUERY : C ORE FUNCTIONS
      • .each() --> itera su tutti gli elementi di una collezione
      • .size() --> conoscere il numero di elementi dom di quel tipo
      • .data()--> memorizza dati in un dom non visibili
      • .get(n) --> ottiene l'n-simo elemento (0 based)
      • .slice(n,m) --> ottiene elementi tra la posiz. n ed m
  • J QUERY : C ORE FUNCTIONS esempi
      • <!DOCTYPE html>
      • <html>
      • <head>
      • <style>
      • div { color:blue; }
      • div#five { color:red; }
      • </style>
      • <script src=&quot;http://code.jquery.com/jquery-latest.min.js&quot;></script>
      • </head>
      • <body>
      • <div id=&quot;one&quot;></div>
      • <div id=&quot;two&quot;></div>
      • <div id=&quot;three&quot;></div>
      • <div id=&quot;four&quot;></div>
      • <div id=&quot;five&quot;></div>
      • <script>
      • $().ready(function() {
      • var arr = [ &quot;one&quot;, &quot;two&quot;, &quot;three&quot;, &quot;four&quot;, &quot;five&quot; ];
      • var obj = { one:1, two:2, three:3, four:4, five:5 };
      • jQuery.each(arr, function() {
      • $(&quot;#&quot; + this).text(&quot;Mine is &quot; + this + &quot;.&quot;);
      • return (this != &quot;three&quot;); // will stop running after &quot;three&quot;
      • });
      • jQuery.each(obj, function(i, val) {
      • $(&quot;#&quot; + i).append(document.createTextNode(&quot; - &quot; + val));
      • });
      • });
      • </script>
      • </body>
      • </html>
  • J QUERY : S ELECTORS
      • $(#id);
      • $('p');
      • $('.class');
      • $('ul.class');
      • $('p : odd') 
      • $('p, span') sia i <p> che gli <span>;
      •   $('p:empty') gli elementi <p> che non hanno figli;
      • $('li: has(ul)') tutti i <li> che hanno <ul> come discendente;
      • $('p >a') restituisce <a> figlio diretto di p 
      •   $('a' [href$=.pdf]) tutti gli <a> con un href che termina per pdf
      • $('a' [href*=gatto]) tutti gli <a> con href contenenti 'gatto'
      • $('div.section')[0] restituisce il primo DOM del div di quel tipo
      • $('ul#goo li:first');
  • J QUERY : A TTRIBUTES
      • .html() -> ottiene o setta contenuto di un dom element
      • .val() --> per gli elementi forms
      • .addClass('myclass')
      • .hasClass('myclass')
      •   .text() -> ottiene il testo di tutti gli elementi individuati.
  • J QUERY : T RAVERSING
      • Attraverso il DOM, non usa XPATH;
      • .add('<p>') --> aggiunge gli elementi p al set;
      • .children() --> restituisce tutti i figli di ogni elemento del set
      • .context() --> restituisce l'elemento DOM referenziato
      • .next() --> ottiene il successivo elemento del set;
      •   .siblings() --> ottiene  i fratelli dell'elemento corrente;
      • .find(selector) --> ottiene il set degli elementi con .... 
      • .empty() --> rimuove il contenuto di tutti gli elementi
  • J QUERY : M ANIPULATION
      • $('<div />').
      • .append('<p>blablabla bla </p>')
      • .before('<p></p>');
      • .replaceWith().
  • J QUERY : CSS
      • . css(property, value)
      • . height() -> attributo altezza dell'elemento
      • . position() -> restituisce la posizione rispetto all'offset parentv ( var position = $(“div”).position().top )
  • J QUERY : E VENTS
      • event.target --> reference  all'oggetto che ha scatenato evento
      • event.type --> tipo di evento;
      • event.data --> secondo parametro di bind() 
      • event.stopBubbling --> ferma il bubbling
      • .ready()
      • .toggle(funct1, funct2) --> 1° click chiama funct1, 2° click funct2
      • .mouseover()
      • .trigger(eventType) --> chiama l'appropriata funz in base ad evento
      • .submit()
      • var myOBJ = new OBJ();
      • myOBJ.bind('myevent_name', function(){
      • //fai operazioni sul $(this)});
      • myOBJ.trigger('myevent_name'); // scatena l'evento
  • J QUERY : E FFECTS
    • .show()
    • .hide()
    • .fadeTo() (es.: $('#book').fadeTo('slow', 0.5, function() { // Animation complete. });
    • Esempio:
      • <p>
      • Click this paragraph to see it fade.
      • </p>
      • <p>
      • Compare to this one that won't fade.
      • </p>
      • <script>
      • $(&quot;p:first&quot;).click(function () {
      • $(this).fadeTo(&quot;slow&quot;, 0.33);
      • });
      • </script>
  • J QUERY : A JAX
      • .ajax()
      • .post()
      • .get()
      • .getJson()
    • .serialize() -> crea stringa in URL-encoded notation da oggetti appartenenti ad una form
    bodyContent = $.ajax({ url: &quot;script.php&quot;, global: false, context: document.body, type: &quot;POST&quot;, data: ({id : this.getAttribute('id')}), dataType: &quot;html&quot;, async:true, success: function(msg){ alert(msg) } });
  • J QUERY : come estenderlo
    • Estendere l’oggetto jQuery aggiungendo Funzioni;
      • $.myFunc();
    • Estendere l’oggetto jQuery.fn aggiungedo Metodi;
      • Fn è un prototype dell'oggetto jQuery;
        • jQuery.fn.mioPlugin = function() {
        • alert(&quot;questo è il mio nuovo plugin&quot;)
        • return this;};
        • $(document).ready(function(){
        • $().mioPlugin();
        • });
  • J QUERY : estendere var object1= { home: { city: &quot;redmond&quot; } } var object2= { home: { zipcode: &quot;98034&quot; } } $.extend(true,{},object1, object2); with deep extension will be: { home: { city: &quot;redmond&quot;, zipcode: &quot;98034&quot; } }
  • J QUERY : SETUP AMBIENTE
      • Scarica la libreria o linka CDN di google;
     
      • La ready function:
        •   $(document).ready(function(){...})
        • $(dofunct{})
        • $(function(){}); //funzione anonima
  • J QUERY : UI $(&quot;#draggable&quot;).draggable(); $('div.myclass').droppable({ drop: function(ui,event){}, over: function...., //si attiva quando un draggable è dragged over out: function..., //si attiva mentre si fa il drag fuori dal droppable (se era dentro) tolerance: function //la condizione che lancia il drop viene richiamato il drop (Es. 'fit', 'touch',...) })
  • J QUERY : UI - DatePicker <input id=&quot;datepicker&quot; type=&quot;text&quot;> <script> $(function() { $(&quot;#datepicker&quot;).datepicker() </script>
  • J QUERY : UI - Dialog <div id=&quot;dialog&quot; title=&quot;Dialog Title&quot;>I'm in a dialog</div> $(&quot;#dialog&quot;).dialog();
  • J QUERY : UI - Accordion <div id=&quot;accordion&quot;> <h3><a href=&quot;#&quot;>Section 1</a></h3> <div>...content...</div> <h3><a href=&quot;#&quot;>Section 2</a></h3> <div>...content...</div> <h3><a href=&quot;#&quot;>Section 3</a></h3> <div>...content...</div> </div> $(“#accordion”).accordion();
  • J QUERY : CLASSI (1) var Fish = Class.extend {   init: function(name,description) { this.name=name; this.description=description; } showDescription : function() { $('div.descr').append(&quot;<p>Nome:<p><p>&quot; +this.name + &quot;</p> &quot; + <p>Descrizione:</p><p>&quot; +this.description+&quot;</p>);  } } var myFish = new Fish('Carpa', 'Pesce di acqua dolce molto prolifero...');
  • J QUERY : C LASSI (2) var TropicalFish = Fish.extend {   init: function (name, description){ this._super(name, description); this.eatable=false; } //override showDescription: function () {   alert (this.name.toUpperCase() + &quot; is a tropical fish!&quot;); }   } var MyTropicalFish = new TropicalFish(&quot;Guppy&quot;,&quot;Pesce tropicale .....&quot;); MyTropicalFish istanceOf Fish //true
  • B EST P RACTICES
      • Uso di funzione anonima per nascondere variabili dal global scope
          • ( function(){
          •   var myvar=null;
          • }
          • )();
  • Struts2Jquery plugin
    • Veniva usato DOJO, ma è deprecated;
    • Meno codice rispetto al plain javascript;
    • Jsp più leggibili!
    • Supporto per la validazione;
    • Supporto ajax;
    • Supporto per i temi;
    • Quasi tutti i componenti UI.
  • Struts2Jquery: installazione
    • Scarica struts2-jquery-plugin-x.x.x.jar
    • Aggiungilo al classpath (WEB-INF/lib)
    • Aggiungi la Tag-Lib to your JSP <%@ taglib prefix=&quot;sj&quot; uri=&quot;/struts-jquery-tags&quot;%>
    • Aggiungi il Tag Head all'interno dell'html;
  • Jquery: Risorse