Verwendung von JavaScript, AJAX

Wicket und Ajax

• Ajax: Asynchronous JavaScript and XML - JavaScript-Code in Webseiten kommuniziert unabhängig von regulären Seitenaufrufen mit dem Server, z.B. um Daten nachzuladen oder zu aktualisieren.
• Die Ajax-Features in Wicket sind gut geeignet, Web-Anwendungen mit traditionellem Seitenaufbau punktuell/zusätzlich um Ajax-Features zu erweitern (z.B. in Abhängigkeit von Formulareingaben Felder ein-/ausblenden, ohne die Seite neu zu laden).
• Wicket-Komponenten können sehr einfach Ajax-Requests auslösen, die vom serverseitigen Komponentenmodell behandelt werden. Als Ergebnis können einzelne Komponenten neu zum Client gesendet werden (partial refresh).

Links: AjaxLink, AjaxFallbackLink

• Mit AjaxFallbackLink können Links erzeugt werden, die sowohl mit als auch ohne JavaScript funktionieren.
• Komponenten, die per Ajax aktualisiert werden sollen, müssen mit setOutputMarkupId(true) mit einer eindeutigen Markup-ID versehen werden (bewirkt, dass im HTML ein id="..."-Attribut vergeben wird).
• AjaxLink funktioniert analog, setzt jedoch JavaScript voraus.

Beispiel AjaxFallbackLink

final Label someLabel = new Label("someLabel", someLabel);
someLabel.setOutputMarkupId(true);

add(new AjaxFallbackLink("someLink") {

    @Override
    public void onClick(AjaxRequestTarget target) {
        // Ereignis behandeln
        someLabel.setDefaultModelObject("clicked");
        // target ist null:    Regulärer Request, Seite wird neu geladen
        // target ist gesetzt: Ajax-Request, Komponenten können aktualisiert werden
        if (target != null) {
            // someLabel aktualisieren
            target.addComponent(someLabel);
        }
    }
});

Ajax-Komponenten in Wicket / Wicket Extensions

• AjaxCheckBox: CheckBox, deren Modell serverseitig sofort aktualisiert wird, wenn der Benutzer klickt.
• AjaxEditableLabel: Label, welches auf Klick editierbar wird und nach erfolgter Eingabe das Modell-Objekt serverseitig aktualisiert.
• AutoCompleteTextField: Texteingabefeld mit Eingabevervollständigung, Vorschläge werden vom Server geladen.
• Weitere Komponenten werden in wicket-stuff (http://wicketstuff.org/confluence/display/STUFFWIKI/Wiki) angeboten.

Behavior: Erweiterungen für Komponenten

• Mit einem Behavior können Wicket-Komponenten um zusätzliches Verhalten ergänzt werden:

  someComponent.add(someBehavior);
  

• OnChangeAjaxBehavior: Aktualisiert die Komponente, sobald eine Änderung erfolgt:

  someFormComponent.setOutputMarkupId(true);
  someFormComponent.add(new OnChangeAjaxBehavior() {
      @Override
      protected void onUpdate(AjaxRequestTarget target) {
          // zusätzlich someOtherComponent aktualisieren
          target.addComponent(someOtherComponent);
      }
  }
  

Weitere Behavior-Klassen

• AjaxFormValidatingBehavior zeigt Validierungsergebnisse direkt an.
• AjaxSelfUpdatingTimerBehavior aktualisiert Komponenten in regelmäßigen Zeitabständen.
• AttributeModifier ergänzt programmatisch Attribute zu HTML-Tags.

Listen per Ajax blättern: AjaxPagingNavigator

• PageableListViews können mittels AjaxPagingNavigator per Ajax geblättert werden. Dabei ist zu beachten, dass das ListView von einer Komponente mit Markup-ID umgeben sein muss:

  WebMarkupContainer listContainer = new WebMarkupContainer("listContainer");
  listContainer.setOutputMarkupId(true);
  add(listContainer);
  
  PageableListView<Car> listView = new PageableListView<Car>("cars", carList, 10) {
      protected void populateItem(ListItem<Car> item) {
          // Populate car item...
      }
  };
  
  listContainer.add(listView);
  add(new AjaxPagingNavigator("navigator", listView));
  

Einbinden von JavaScript

• Eigene JavaScripts können über HeaderContributions eingefügt werden:

  add(HeaderContributor.forJavaScript(new ResourceReference(SomePage.class, "some.js")));
  

• Für gängige JavaScript-Frameworks gibt es vorgefertigte Header-Contributions bzw. Komponenten:

  • Prototype / script.aculo.us: http://wicketstuff.org/confluence/display/STUFFWIKI/wicketstuff-scriptaculous
  • JQuery: http://code.google.com/p/wiquery/