Ajax%in%JSF2% · PDF file...

Click here to load reader

  • date post

    17-Jun-2020
  • Category

    Documents

  • view

    14
  • download

    0

Embed Size (px)

Transcript of Ajax%in%JSF2% · PDF file...

  • Ajax  in  JSF  2   Out-­‐of-­‐the-­‐box  Ajax-­‐Integra3on  in  JSF  2.0  

    Michael  Kurz   Irian  Solu3ons  GmbH    

  • Herbstcampus  2011  –  Ajax  in  JSF  2  2  

    Agenda  

    • Was  ist  Ajax  und  warum  brauch  ich  das?   •  Ajax  und  JSF  2.0   •  Ajax  deklara3v  mit  f:ajax   •  Ajax  mit  dem  JSF-­‐JavaScript-­‐API   •  Erweiterte  Konzepte   •  Viele  Beispiele  und  Demonstra3onen  

  • Herbstcampus  2011  –  Ajax  in  JSF  2  3  

    Mo3va3on:  JSF  klassisch  

    •  Klassische  Interak3on  in  JSF-­‐Applika3onen:   •  Formular  ausfüllen,  abschicken,  neue  Seite  auUauen  

    •  Ansatz  funk3onierte  für  Web  1.0  und  1.5  gut   • Web  2.0  machen  neuen  Ansatz  notwendig  

                         

  • Herbstcampus  2011  –  Ajax  in  JSF  2  4  

    Ajax  –  was  ist  das?  

    •  Asynchronous  JavaScript  And  XML  (2005)   •  Asynchrone  Seiten-­‐Aktualisierung  im  Browser   •  Sammelbegriff  für  Vielzahl  von  Technologien   •  JavaScript  und  das  XMLH`pRequest-­‐Objekt     •  Document  Object  Model  (DOM)   •  (X)HTML  und  CSS   •  XML,  JSON  

    • Wich3ger  Aspekt  von  Web  2.0  

  • Herbstcampus  2011  –  Ajax  in  JSF  2  5  

    Ajax  mit  JSF  –  geht  denn  das?  

    •  Ist  das  nicht  kompliziert?  Mit  JSF  2.0:  NEIN   •  Ajax  funk3onierte  bereits  mit  JSF  1  einwandfrei   •  Komponentenbibliotheken  und  Erweiterungen   verfolgten  proprietäre,  inkompa3ble  Ansätze  

    • Mit  JSF  2.0  ist  Ajax  Teil  des  JSF-­‐Standards   •  Ajax-­‐Funk3onalität  in  JSF  einsetzen   •  Deklara3v  mit  Tag  f:ajax   •  Direkt  mit  Aufruf  des  JavaScript-­‐API  

  • Herbstcampus  2011  –  Ajax  in  JSF  2  6  

    JSF  modern:  Ajax  mit  JSF  2.0  

    •  Erstes  Beispiel  mit  f:ajax  

    •  f:ajax  bewirkt  folgendes:   •  Klick  auf  Auswahlfeld  löst  Ajax-­‐Anfrage  aus   •  Textausgabefeld  mit  ID  state  wird  neu  gerendert  

                                   

  • Herbstcampus  2011  –  Ajax  in  JSF  2  7  

    Funk3onsweise  von  f:ajax  

    •  f:ajax  aus  letztem  Beispiel  ohne  Standardwerte:  

    •  JSF  rendert  Aufruf  von  JS-­‐Funk3on  in  onchange   •  Abarbeitung  der  Ajax-­‐Anfrage  (transparent):  

     

    Server   Par3al-­‐View-­‐ Processing  

    Par3al-­‐View-­‐ Rendering  

    Cl ie nt  

  • Herbstcampus  2011  –  Ajax  in  JSF  2  8  

    Demonstra3on  

    JSF  2.0  mit  Ajax  im  Einsatz  

    •  Einfaches  JSF-­‐Beispiel  mit  Ajax   •  Inklusive  Einführung  in  JSF  in  5  Minuten  

    Beispieldownload:  hCps://github.com/jsflive/herbstcampus2011  

  • Herbstcampus  2011  –  Ajax  in  JSF  2  9  

    Ajax  deklara3v  mit  f:ajax  

    •  Funk3oniert  für  alle  Standard-­‐Komponenten   •  Kann  auf  zwei  Arten  eingesetzt  werden   •  Ajax-­‐Verhalten  für  einzelne  Komponente  

    •  Ajax-­‐Verhalten  für  Bereiche  einer  Seite  

             

                   

  • Herbstcampus  2011  –  Ajax  in  JSF  2  10  

    Beispiele  mit  f:ajax    1/4  

    •  Aktualisierung  eines  Texleldes  über  Ajax   durch  Klick  auf  Schallläche  

                                                                               

  • Herbstcampus  2011  –  Ajax  in  JSF  2  11  

    Beispiele  mit  f:ajax    2/4  

    •  Ajax-­‐Verhalten  für  mehrere  Komponenten  

                                                                                                                       

  • Herbstcampus  2011  –  Ajax  in  JSF  2  12  

    Beispiele  mit  f:ajax    3/4  

    •  Ajax-­‐Verhalten  für  mehrere  Komponenten   mit  zusätzlichem  Ereignis                                                                                                                    

  • Herbstcampus  2011  –  Ajax  in  JSF  2  13  

    Beispiele  mit  f:ajax    4/4  

    •  Vorsicht  mit  Komponenten-­‐IDs!                                                                                                                        

    NamingContainer

  • Herbstcampus  2011  –  Ajax  in  JSF  2  14  

    A`ribute  von  f:ajax    1/2  

    •  event:  Ereignis,  das  Ajax-­‐Anfrage  auslöst   •  acGon  für  Steuerkomponenten   •  valueChange  für  Eingabekomponenten   •  HTML-­‐Ereignisse  ohne  führendes  on   •  Standardwert  von  Komponente  bes3mmt  

    •  execute:  Komponenten,  die  für  Ajax-­‐Anfrage   im  Lebenszyklus  ausgeführt  werden   •  Komponenten-­‐IDs  durch  Leerzeichen  separiert   •  @this  (Standardwert),  @form,  @all,  @none  

  • Herbstcampus  2011  –  Ajax  in  JSF  2  15  

    A`ribute  von  f:ajax    2/2  

    •  render:  Komponenten,  die  für  Ajax-­‐Anfrage   im  Lebenszyklus  neu  gerendert  werden   •  Komponenten-­‐IDs  durch  Leerzeichen  separiert   •  @this,  @form,  @all,  @none  (Standardwert)  

    •  onevent:  JS-­‐Callback  für  Ajax-­‐Ereignisse   •  onerror:  JS-­‐Callback  für  Ajax-­‐Fehler   •  disabled:  Ajax-­‐Verhalten  abschalten  (bei  true)  

  • Herbstcampus  2011  –  Ajax  in  JSF  2  16  

    Demonstra3on  

    Beispiel  Ajax  1  

    •  Ajax-­‐Integra3on  mit  f:ajax  

    Beispieldownload:  hCps://github.com/jsflive/herbstcampus2011  

  • Herbstcampus  2011  –  Ajax  in  JSF  2  17  

    Ajax  mit  dem  JSF-­‐JavaScript-­‐API  

    •  Clientsei3ge  Grundlage  für  Integra3on  von  Ajax   •  Folgende  Funk3onen:   •  jsf.ajax.request(source,  event,  opGons)   •  jsf.ajax.response(request,  context)   •  jsf.ajax.addOnError(callback)   •  jsf.ajax.addOnEvent(callback)  

    • Wenn  nur  JavaScript-­‐Ajax-­‐API  benutzt  wird:   •   

    •  h:head  und  h:body  nicht  vergessen!  

  • Herbstcampus  2011  –  Ajax  in  JSF  2  18  

    Ajax-­‐Anfragen  mit  jsf.ajax.request()  

    •  Parameter:   •  source:  auslösendes  DOM-­‐Element   •  event:  auslösendes  DOM-­‐Ereignis   •  op3ons:  Op3onen  wie  render,  execute  (vgl.  f:ajax)  

    •  Beispiel:    

  • Herbstcampus  2011  –  Ajax  in  JSF  2  19  

    jsf.ajax.request()  im  Einsatz  

    •  Folgende  Codefragmente  setzen  gleiches  Ajax-­‐ Verhalten  mit  f:ajax  und  mit  JavaScript-­‐API  um                                  

                   

    Immer