Wicket Form Submit – mit und ohne Ajax | wicket praxis
Skip to content


Wicket Form Submit – mit und ohne Ajax

Webanwendungen ohne Formulare gibt es nicht. Dabei ist die korrekte Formularbehandlung alles andere als trivial. Zum Glück bietet Wicket eine ausgezeichnete Unterstützung für Formulare, die kaum Wünsche offen lässt. Doch auch mit Wicket sind ein paar Dinge zu beachten, um die verschiedenen Interaktionsmöglichkeiten des Nutzers korrekt zu verarbeiten.

Wicket bietet die Möglichkeit, neben dem normalen Abschicken eines Formulars auch auf die angeklickten Submit-Buttons reagieren zu können. Damit man aber auch zuverlässig unterscheiden kann, ob der Nutzer das Formular durch ein Enter im Textfeld oder durch einen Klick auf einen Button abgeschickt hat, muss man ein paar Vorbereitungen treffen.

Für das Formular legen wir eine Bean an, welche die Daten aufnimmt.

 Java(TM) 2 Platform Standard Edition 5.0 | 
 
 copy code |
?

  1. package de.wicketpraxis.web.blog.pages.questions.form.submit;
  2. import java.io.Serializable;
  3. public class FormBean implements Serializable
  4. {
  5.   String _name;
  6.   
  7.   public String getName()
  8.   {
  9.     return _name;
  10.   }
  11.   
  12.   public void setName(String name)
  13.   {
  14.     _name = name;
  15.   }
  16. }

Für unser Beispiel benötigen wir ein Formular, einen AjaxFallbackButton, einen normalen Button und einen Button, den wir dazu benutzen, denn Fall herauszubekommen, wenn der Nutzer einfach nur Enter gedrückt hat. Das FeedbackPanel sollte man auch nicht vergessen.

 Java(TM) 2 Platform Standard Edition 5.0 | 
 
 copy code |
?

  1. package de.wicketpraxis.web.blog.pages.questions.form.submit;
  2. import org.apache.wicket.ajax.AjaxRequestTarget;
  3. import org.apache.wicket.ajax.markup.html.form.AjaxFallbackButton;
  4. import org.apache.wicket.markup.html.WebPage;
  5. import org.apache.wicket.markup.html.form.Button;
  6. import org.apache.wicket.markup.html.form.Form;
  7. import org.apache.wicket.markup.html.form.TextField;
  8. import org.apache.wicket.markup.html.panel.FeedbackPanel;
  9. import org.apache.wicket.model.CompoundPropertyModel;
  10. public class FormSubmitPage extends WebPage
  11. {
  12.   int _counter;
  13.   
  14.   public FormSubmitPage()
  15.   {
  16.     final FeedbackPanel feedbackPanel = new FeedbackPanel("feedback");
  17.     feedbackPanel.setOutputMarkupId(true);
  18.     add(feedbackPanel);
  19.     
  20.     CompoundPropertyModel<FormBean> formModel = new CompoundPropertyModel<FormBean>(new FormBean());
  21.     Form<FormBean> form = new Form<FormBean>("form",formModel)
  22.     {
  23.       @Override
  24.       protected void onSubmit()
  25.       {
  26.         info("Form Submit: "+_counter++);
  27.       }
  28.     };
  29.     
  30.     form.add(new TextField<String>("name"));
  31.     
  32.     form.add(new Button("defaultSubmit")
  33.     {
  34.       @Override
  35.       public void onSubmit()
  36.       {
  37.         info("Default Button: "+_counter++);
  38.       }
  39.     });
  40.     
  41.     form.add(new Button("submit")
  42.     {
  43.       @Override
  44.       public void onSubmit()
  45.       {
  46.         info("Button: "+_counter++);
  47.       }
  48.     });
  49.     
  50.     form.add(new AjaxFallbackButton("ajaxSubmit",form)
  51.     {
  52.       @Override
  53.       protected void onSubmit(AjaxRequestTarget target, Form<?> form)
  54.       {
  55.         if (target!=null)
  56.         {
  57.           info("AjaxSubmit Button(ajax): "+_counter++);
  58.           target.addComponent(feedbackPanel);
  59.         
  60.           _counter=0;
  61.         }
  62.         else
  63.         {
  64.           info("AjaxFallbackButton: "+_counter++);
  65.         }
  66.       }
  67.     });
  68.     
  69.     add(form);
  70.   }
  71.   
  72.   @Override
  73.   protected void onBeforeRender()
  74.   {
  75.     _counter=0;
  76.     super.onBeforeRender();
  77.   }
  78. }

Damit man die Reihenfolge besser erkennen kann, mit der die onSubmit-Methoden aufgerufen werden, wird ein Zähler (_counter) hochgezählt und vor dem Darstellen des Formulars wieder zurückgesetzt. In diesem Beispiel liegt die entscheidende Information im Markup. Dabei ist die Reihenfolge der verschiedenen Submit-Komponenten wichtig.

 HTML | 
 
 copy code |
?

  1. <html>
  2.   <head>
  3.     <title>FormSubmitPage</title>
  4.   </head>
  5.   <body>
  6.     <div wicket:id="feedback"></div>
  7.     
  8.     <form wicket:id="form">
  9.       <input wicket:id="defaultSubmit" type="submit" value="" style="border:0px; width: 0px; height: 0px; visibility: collapse; display: compact;">
  10.       Name <input wicket:id="name"><br>
  11.       <input wicket:id="ajaxSubmit"  type="submit" value="AjaxButton">
  12.       <input wicket:id="submit" type="submit" value="Button">
  13.     </form>
  14.   </body>
  15. </html>

Der Button mit der Wicket-ID defaultSubmit muss vor allen anderen Submit-Komponenten stehen. Dadurch wird beim Abschicken des Formulars durch Enter dieser Button ausgewählt. Wenn einer der anderen Buttons angeklickt wird, dann wird das Formular über diesen Button abgeschickt. Doch warum soviel Aufwand? Die onSubmit()-Methode des Formulars wird doch in jedem Fall aufgerufen.

Der Aufwand ist notwendig, wenn man abhängig davon, ob der Nutzer auf einen Button oder eben auf keinen Button geklickt hat, eine Aktion ausführen möchte. Das bedeutet, dass man die Aktion nicht in onSubmit ausführen kann. Es ist allerdings auch nicht möglich, im onSubmit() der Buttonkomponenten ein Flag zu setzen, dass dann in der onSubmit()-Methode des Formulars aufgerufen wird, da die Methode beim AjaxFallbackButton erst nach dem onSubmit() der Komponente aufgerufen wird.

Folgende Ergebnisse erhält man, wenn man das Formular a) per Enter, b) per AjaxButton und c) per Button abschickt:

Submit per Enter

Submit per Enter

Submit per AjaxButton

Submit per AjaxButton

Submit per Button

Submit per Button

Wenn Javascript deaktiviert ist, dann erhält man folgende Ausgabe:

Submit per Enter

Submit per Enter

Submit per AjaxButton

Submit per AjaxButton

Submit per Button

Submit per Button

Wenn man dieses Vorgehen beherzigt, funktioniert die Anwendung auch mit deaktiviertem JavaScript genauso zuverlässig. Das freut den Nutzer und in diesem Fall auch den Entwickler:)

Posted in Technologie, Wicket.

Tagged with , , , , .


0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.



Some HTML is OK

or, reply to this post via trackback.