Rich Ajax Web Interfaces A LBERTO  B USCHETTU
S UMMARY <ul><ul><li>Javascript: breve introduzione;
Ajax: la svolta del web 2.0;
Jquery: introduzione;
Jquery: operazioni più comuni e utili;
UI Jquery;
Casi d'uso e dettagli;
Jquery e Struts;
Guide, books e link utili. </li></ul></ul>
J AVASCRIPT :  BREVE   INTRODUZIONE <ul><ul><li>  Basato sullo standard ECMAScript ( ECMA-262 ) ed è stato creato da Brend...
Loosely typed, prototype based ed  interpretato dal browser;
E' un linguaggio funzionale: tratta le funzioni come oggetti; </li></ul></ul>
C ODICE  JS <DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1...
DOM (1) <ul><ul><li>Utilizza il DOM (Document Object Model):  rappresentazione dei documenti strutturati come modello orie...
DOM (2) <ul><ul><li>Costituito da nodi. I tipi di nodi più interessanti: </li><ul><li>Element : elemento dentro una pagina...
Text : il testo dentro un element;
Document : la root della gerarchia DOM (es.: tag html); </li></ul><li>Attualmente si usa il livello 2 del DOM;
Il DOM cambia a seconda del  layout-engine  usato dal browser:  </li><ul><li>Firefox,Camino, Flock, SeaMonkey,.., usano   ...
IE usa  Trident ;
  Safari, Chrome, Konqueror usano  WebKit ;   </li></ul></ul></ul>
http://it.wikipedia.org/wiki/Document_Object_Model <ul><li>Anche i blank sono dei nodi del DOM (B rowser OM); </li></ul><u...
<head>
<title>My Document</title>
</head>
<body>
<h1>Header</h1>
<p>
Paragraph
</p>
</body>
</html> </li></ul>DOM in Html
O GGETTI   DI  JS <ul><ul><li>Hanno  proprietà , eseguono  metodi  e reagiscono ad  eventi ;  </li></ul></ul>Window: la fi...
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 </li></ul></ul>Quelli definiti dall'utente
O GGETTI definiti dall'utente: Creazione <ul><ul><li>  Notazione compatta
// Literal (curly braces): var Fish = { name: &quot;&quot;,
description :&quot;&quot;, </li></ul></ul>showDescription: function(){ alert (this.name.toUpperCase() + &quot; is a tropic...
Funzioni <ul><ul><li>Le funzioni sono istanze del tipo base Function; </li></ul><li>Non necessario scrivere tutti i parame...
Function statement :  var name= function name(argumentlist) block
Function operator :  function name(argumentlist) block   -->crea un oggetto di tipo Function. Senza nome crea funzione ano...
Function constructor :  new Function(strings...) -->  corpo della funzione come stringa come parametro (deprecata) </li></ul>
Estendere un oggetto var Fish = function (name, description) { this.name=name; this.description=description; var peso=0;  ...
Sintassi Javascript e Java a confronto JavaScript   function Impiegato () { this.nome = &quot;&quot;; this.dipartimento = ...
Upcoming SlideShare
Loading in …5
×

Rich Ajax Web Interfaces in Jquery

2,356 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,356
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Rich Ajax Web Interfaces in Jquery

  1. 1. Rich Ajax Web Interfaces A LBERTO B USCHETTU
  2. 2. S UMMARY <ul><ul><li>Javascript: breve introduzione;
  3. 3. Ajax: la svolta del web 2.0;
  4. 4. Jquery: introduzione;
  5. 5. Jquery: operazioni più comuni e utili;
  6. 6. UI Jquery;
  7. 7. Casi d'uso e dettagli;
  8. 8. Jquery e Struts;
  9. 9. Guide, books e link utili. </li></ul></ul>
  10. 10. J AVASCRIPT : BREVE INTRODUZIONE <ul><ul><li>  Basato sullo standard ECMAScript ( ECMA-262 ) ed è stato creato da Brendan Eich of Netscape;
  11. 11. Loosely typed, prototype based ed  interpretato dal browser;
  12. 12. E' un linguaggio funzionale: tratta le funzioni come oggetti; </li></ul></ul>
  13. 13. 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>  
  14. 14. DOM (1) <ul><ul><li>Utilizza il DOM (Document Object Model): rappresentazione dei documenti strutturati come modello orientato ad oggetti ; </li></ul></ul>
  15. 15. DOM (2) <ul><ul><li>Costituito da nodi. I tipi di nodi più interessanti: </li><ul><li>Element : elemento dentro una pagina (contiene altri nodi);
  16. 16. Text : il testo dentro un element;
  17. 17. Document : la root della gerarchia DOM (es.: tag html); </li></ul><li>Attualmente si usa il livello 2 del DOM;
  18. 18. Il DOM cambia a seconda del layout-engine usato dal browser: </li><ul><li>Firefox,Camino, Flock, SeaMonkey,.., usano Gecko ;
  19. 19. IE usa Trident ;
  20. 20.   Safari, Chrome, Konqueror usano WebKit ; </li></ul></ul></ul>
  21. 21. http://it.wikipedia.org/wiki/Document_Object_Model <ul><li>Anche i blank sono dei nodi del DOM (B rowser OM); </li></ul><ul><li><html>
  22. 22. <head>
  23. 23. <title>My Document</title>
  24. 24. </head>
  25. 25. <body>
  26. 26. <h1>Header</h1>
  27. 27. <p>
  28. 28. Paragraph
  29. 29. </p>
  30. 30. </body>
  31. 31. </html> </li></ul>DOM in Html
  32. 32. O GGETTI DI JS <ul><ul><li>Hanno proprietà , eseguono metodi e reagiscono ad eventi ; </li></ul></ul>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; <ul><ul><li>Forms, Ancors, Links: oggetti html del documento; </li></ul></ul><ul><ul><li>Array: var myArray = new Array(4);
  33. 33. String: var myString = &quot;mio nome&quot;;
  34. 34. Date: var Data = new Date();
  35. 35. Math: Math.acos(x);
  36. 36. Object, Function, Boolean, RegExp.
  37. 37. ps. Undefined, Null, Boolean, Number, and String sono primitive </li></ul></ul>Quelli definiti dall'utente
  38. 38. O GGETTI definiti dall'utente: Creazione <ul><ul><li>  Notazione compatta
  39. 39. // Literal (curly braces): var Fish = { name: &quot;&quot;,
  40. 40. description :&quot;&quot;, </li></ul></ul>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; <ul><ul><li>Uso del costruttore Object (utile se necessita una sola istanza) </li><ul><ul><li>// Using the Object constructor: var profile = new Object(); profile.name = 'Bob'; profile.age = 99; profile.job = 'Freelance Hitman </li></ul></ul><li>Con definizione del costruttore </li></ul></ul>// 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)
  41. 41. Funzioni <ul><ul><li>Le funzioni sono istanze del tipo base Function; </li></ul><li>Non necessario scrivere tutti i parametri (arguments[i]) function name(argumentlist) block;
  42. 42. Function statement : var name= function name(argumentlist) block
  43. 43. Function operator : function name(argumentlist) block -->crea un oggetto di tipo Function. Senza nome crea funzione anonima
  44. 44. Function constructor : new Function(strings...) --> corpo della funzione come stringa come parametro (deprecata) </li></ul>
  45. 45. 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>);  } <ul><ul><li>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; </li></ul></ul>
  46. 46. 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]; } }
  47. 47. DOM TRAVERSING <ul><li>Traversing DOM: getter </li><ul><li>//referenziare un elemento DOM
  48. 48. var myParagraph = document.getElementById('myid');
  49. 49. var content = myParagraph.firstChild.data;
  50. 50. Traversing DOM: setter </li><ul><ul><li>var newEl = document.createElement(tagname); // tagname: a for <a href=&quot;...></a>
  51. 51. var newTxt= document.createTextNode(text); //text='blabla';
  52. 52. newEl.setAttribute(name, value); // es.: newEl.setAttribute ('href',' http://www ...');
  53. 53. newEl.appendChild(newTxt);
  54. 54. //adding to the DOM
  55. 55. var element = document.getElementById(&quot;para1&quot;);
  56. 56.   element.appendChild(newEl); 
  57. 57. element.insertBefore(existingNode, newEl); </li></ul></ul><li>  </li></ul></ul>  <html> <head></head> <body> .... <p id=&quot;myid&quot;>My first paragraph...</p> .... </body> </html>
  58. 58. E VENTI <ul><ul><li>Possono essere metodi degli oggetti DOM;
  59. 59. Eventi del mouse: onClick, onDblClick, onMouseOver, onDragDrop...
  60. 60. Eventi da tastiera: onKeyPress (preme e rilascia) , onKeyDown;
  61. 61. Eventi da modifica: onChange;
  62. 62. Eventi di &quot;fuoco&quot;: onFocus(evidenziato), onBlur (de-evidenziato), onSelect (se si seleziona);
  63. 63. Eventi da caricamento: onLoad, onUnload (chiuso docum );
  64. 64. Oggetto event (proprietà target, screenX, etc.).
  65. 65. <a href=&quot;go.html&quot; onmouseover=&quot;myposition(event);&quot;>clicca</a> </li></ul></ul>function myposition (e) { alert('il mouse si trova nella posizione ' + e.screenX + ' - ' + e.screenY +'dello schermo'); }
  66. 66. Ajax <ul><ul><li>AJAX (Asincronous Javascript and XML);
  67. 67. L'oggetto XmlHttpRequest (XHR) alla base di tutto;
  68. 68. Ajax = XML + DHTML(HTML+Javascript+CSS)+Rich Design;
  69. 69. XHR per chiamate GET e POST asincrone;
  70. 70. Asincronia: elimina la linearità del flusso dati; </li></ul></ul>
  71. 71. Modello tradizionale e modello Ajax
  72. 72. Ajax: da syncrono ad asincrono
  73. 73. <ul><li>Si segue un design pattern basato su: </li><ul><li>Trigger (event o timer);
  74. 74. Operation (ajax);
  75. 75. Update (dom). </li></ul></ul>Ajax: da syncrono ad asincrono
  76. 76. Ajax: operation <ul><ul><li>Chiamata AJAX:
  77. 77. Creare un oggetto XHR ( new XMLHttpRequest() );
  78. 78. Creare la richiesta( open e send );
  79. 79. Scrivere il callback ( per l'evento onreadystatechange );
  80. 80. Parsing della risposta. </li></ul></ul>
  81. 81. 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
  82. 82. C ROSSBROWSING <ul><li>Browser sniffing (es.:navigator.userAgent.indexOf(&quot;Opera&quot;));
  83. 83. Object detection (window.XMLHttpRequest); </li></ul>
  84. 84. L IBRERIE J AVASCRIPT : PERCHÈ USARLE <ul><ul><li>Riduzione delle righe di codice;
  85. 85. Per ottenere javascript non intrusivo evitando &quot; inline-javascript &quot;;
  86. 86. Facilità nel manipolare il DOM;
  87. 87. Facilità nell'uso degli eventi;
  88. 88. Ajax reso molto più produttivo. </li></ul></ul>
  89. 89. J QUERY : BASI <ul><ul><li>Light-weight library open source (nata nel 2006); 
  90. 90. Rochester Institute of Technology;
  91. 91. Ben documentata con numerosi plugins;
  92. 92. Utilizzatori: Google, Microsoft, Amazon, Dell, Twitter,
  93. 93. Ogni cosa incapsulata nell'oggetto jQuery ($() -->restituisce $ abbreviazione);
  94. 94. jQuery.NoConflict() per evitare conflitti con altre librerie($ è globale!) </li></ul></ul>
  95. 95. J QUERY : C ORE FUNCTIONS <ul><ul><li>.each() --> itera su tutti gli elementi di una collezione
  96. 96. .size() --> conoscere il numero di elementi dom di quel tipo
  97. 97. .data()--> memorizza dati in un dom non visibili
  98. 98. .get(n) --> ottiene l'n-simo elemento (0 based)
  99. 99. .slice(n,m) --> ottiene elementi tra la posiz. n ed m </li></ul></ul>
  100. 100. J QUERY : C ORE FUNCTIONS esempi <ul><ul><li><!DOCTYPE html>
  101. 101. <html>
  102. 102. <head>
  103. 103. <style>
  104. 104. div { color:blue; }
  105. 105. div#five { color:red; }
  106. 106. </style>
  107. 107. <script src=&quot;http://code.jquery.com/jquery-latest.min.js&quot;></script>
  108. 108. </head>
  109. 109. <body>
  110. 110. <div id=&quot;one&quot;></div>
  111. 111. <div id=&quot;two&quot;></div>
  112. 112. <div id=&quot;three&quot;></div>
  113. 113. <div id=&quot;four&quot;></div>
  114. 114. <div id=&quot;five&quot;></div>
  115. 115. <script>
  116. 116. $().ready(function() {
  117. 117. var arr = [ &quot;one&quot;, &quot;two&quot;, &quot;three&quot;, &quot;four&quot;, &quot;five&quot; ];
  118. 118. var obj = { one:1, two:2, three:3, four:4, five:5 };
  119. 119. jQuery.each(arr, function() {
  120. 120. $(&quot;#&quot; + this).text(&quot;Mine is &quot; + this + &quot;.&quot;);
  121. 121. return (this != &quot;three&quot;); // will stop running after &quot;three&quot;
  122. 122. });
  123. 123. jQuery.each(obj, function(i, val) {
  124. 124. $(&quot;#&quot; + i).append(document.createTextNode(&quot; - &quot; + val));
  125. 125. });
  126. 126. });
  127. 127. </script>
  128. 128. </body>
  129. 129. </html> </li></ul></ul>
  130. 130. J QUERY : S ELECTORS <ul><ul><li>$(#id);
  131. 131. $('p');
  132. 132. $('.class');
  133. 133. $('ul.class');
  134. 134. $('p : odd') 
  135. 135. $('p, span') sia i <p> che gli <span>;
  136. 136.   $('p:empty') gli elementi <p> che non hanno figli;
  137. 137. $('li: has(ul)') tutti i <li> che hanno <ul> come discendente;
  138. 138. $('p >a') restituisce <a> figlio diretto di p 
  139. 139.   $('a' [href$=.pdf]) tutti gli <a> con un href che termina per pdf
  140. 140. $('a' [href*=gatto]) tutti gli <a> con href contenenti 'gatto'
  141. 141. $('div.section')[0] restituisce il primo DOM del div di quel tipo
  142. 142. $('ul#goo li:first'); </li></ul></ul>
  143. 143. J QUERY : A TTRIBUTES <ul><ul><li>.html() -> ottiene o setta contenuto di un dom element
  144. 144. .val() --> per gli elementi forms
  145. 145. .addClass('myclass')
  146. 146. .hasClass('myclass')
  147. 147.   .text() -> ottiene il testo di tutti gli elementi individuati. </li></ul></ul>
  148. 148. J QUERY : T RAVERSING <ul><ul><li>Attraverso il DOM, non usa XPATH;
  149. 149. .add('<p>') --> aggiunge gli elementi p al set;
  150. 150. .children() --> restituisce tutti i figli di ogni elemento del set
  151. 151. .context() --> restituisce l'elemento DOM referenziato
  152. 152. .next() --> ottiene il successivo elemento del set;
  153. 153.   .siblings() --> ottiene  i fratelli dell'elemento corrente;
  154. 154. .find(selector) --> ottiene il set degli elementi con .... 
  155. 155. .empty() --> rimuove il contenuto di tutti gli elementi </li></ul></ul>
  156. 156. J QUERY : M ANIPULATION <ul><ul><li>$('<div />').
  157. 157. .append('<p>blablabla bla </p>')
  158. 158. .before('<p></p>');
  159. 159. .replaceWith(). </li></ul></ul>
  160. 160. J QUERY : CSS <ul><ul><li>. css(property, value)
  161. 161. . height() -> attributo altezza dell'elemento
  162. 162. . position() -> restituisce la posizione rispetto all'offset parentv ( var position = $(“div”).position().top ) </li></ul></ul>
  163. 163. J QUERY : E VENTS <ul><ul><li>event.target --> reference  all'oggetto che ha scatenato evento
  164. 164. event.type --> tipo di evento;
  165. 165. event.data --> secondo parametro di bind() 
  166. 166. event.stopBubbling --> ferma il bubbling
  167. 167. .ready()
  168. 168. .toggle(funct1, funct2) --> 1° click chiama funct1, 2° click funct2
  169. 169. .mouseover()
  170. 170. .trigger(eventType) --> chiama l'appropriata funz in base ad evento
  171. 171. .submit()
  172. 172. var myOBJ = new OBJ();
  173. 173. myOBJ.bind('myevent_name', function(){
  174. 174. //fai operazioni sul $(this)});
  175. 175. myOBJ.trigger('myevent_name'); // scatena l'evento </li></ul></ul>
  176. 176. J QUERY : E FFECTS <ul><li>.show()
  177. 177. .hide()
  178. 178. .fadeTo() (es.: $('#book').fadeTo('slow', 0.5, function() { // Animation complete. });
  179. 179. Esempio: </li></ul><ul><ul><li><p>
  180. 180. Click this paragraph to see it fade.
  181. 181. </p>
  182. 182. <p>
  183. 183. Compare to this one that won't fade.
  184. 184. </p>
  185. 185. <script>
  186. 186. $(&quot;p:first&quot;).click(function () {
  187. 187. $(this).fadeTo(&quot;slow&quot;, 0.33);
  188. 188. });
  189. 189. </script> </li></ul></ul>
  190. 190. J QUERY : A JAX <ul><ul><li>.ajax()
  191. 191. .post()
  192. 192. .get()
  193. 193. .getJson() </li></ul><li>.serialize() -> crea stringa in URL-encoded notation da oggetti appartenenti ad una form </li></ul>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) } });
  194. 194. J QUERY : come estenderlo <ul><li>Estendere l’oggetto jQuery aggiungendo Funzioni; </li><ul><li>$.myFunc(); </li></ul><li>Estendere l’oggetto jQuery.fn aggiungedo Metodi; </li><ul><li>Fn è un prototype dell'oggetto jQuery; </li></ul></ul><ul><ul><ul><li>jQuery.fn.mioPlugin = function() {
  195. 195. alert(&quot;questo è il mio nuovo plugin&quot;)
  196. 196. return this;};
  197. 197. $(document).ready(function(){
  198. 198. $().mioPlugin();
  199. 199. }); </li></ul></ul></ul>
  200. 200. 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; } }
  201. 201. J QUERY : SETUP AMBIENTE <ul><ul><li>Scarica la libreria o linka CDN di google; </li></ul></ul>  <ul><ul><li>La ready function: </li><ul><li>  $(document).ready(function(){...})
  202. 202. $(dofunct{})
  203. 203. $(function(){}); //funzione anonima </li></ul></ul></ul>
  204. 204. 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',...) })
  205. 205. J QUERY : UI - DatePicker <input id=&quot;datepicker&quot; type=&quot;text&quot;> <script> $(function() { $(&quot;#datepicker&quot;).datepicker() </script>
  206. 206. J QUERY : UI - Dialog <div id=&quot;dialog&quot; title=&quot;Dialog Title&quot;>I'm in a dialog</div> $(&quot;#dialog&quot;).dialog();
  207. 207. 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();
  208. 208. 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...');
  209. 209. 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
  210. 210. B EST P RACTICES <ul><ul><li>Uso di funzione anonima per nascondere variabili dal global scope </li><ul><ul><li>( function(){
  211. 211.   var myvar=null;
  212. 212. }
  213. 213. )(); </li></ul></ul></ul></ul>
  214. 214. Struts2Jquery plugin <ul><li>Veniva usato DOJO, ma è deprecated;
  215. 215. Meno codice rispetto al plain javascript;
  216. 216. Jsp più leggibili!
  217. 217. Supporto per la validazione;
  218. 218. Supporto ajax;
  219. 219. Supporto per i temi;
  220. 220. Quasi tutti i componenti UI. </li></ul>
  221. 221. Struts2Jquery: installazione <ul><li>Scarica struts2-jquery-plugin-x.x.x.jar
  222. 222. Aggiungilo al classpath (WEB-INF/lib)
  223. 223. Aggiungi la Tag-Lib to your JSP <%@ taglib prefix=&quot;sj&quot; uri=&quot;/struts-jquery-tags&quot;%>
  224. 224. Aggiungi il Tag Head all'interno dell'html; </li></ul>
  225. 225. Jquery: Risorse

×