| |
| |
| |
| Besides submitting forms with a standard HTML submit button, Wicket allows us to use special components which implement interface IFormSubmittingComponent. This entity is a subinterface of IFormSubmitter: |
| |
| image::../img/class-diag-IFormSubmittingComponent.png[] |
| |
| At the beginning of this chapter we have seen that form processing is started by process method which takes as input an instance of IFormSubmitter. This parameter corresponds to the IFormSubmittingComponent clicked by a user to submit the form and it is null if we have used a standard HTML submit button (like we have done so far). |
| |
| A submitting component is added to a form just like any other child component using method add(Component...). |
| |
| A form can have any number of submitting components and we can specify which one among them is the default one by calling the Form's method setDefaultButton(IFormSubmittingComponent component). The default submitter is the one that will be used when user presses 'Enter' key in a field of the form. In order to make the default button work, Wicket will add to our form a hidden <div> tag containing a text field and a submit button with some JavaScript code to trigger it: |
| |
| [source,html] |
| ---- |
| <div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"> |
| <input type="text" autocomplete="off"/> |
| <input type="submit" name="submit2" onclick=" var b=document...."/> |
| </div> |
| ---- |
| |
| Just like Wicket forms, interface IFormSubmitter defines methods onSubmit and onError. These two methods have the priority over the namesake methods of the form, meaning that when a form is submitted with an IFormSubmitter, the onSubmit of the submitter is called before the one of the form. Similarly, if validation errors occurs during the first step of form processing, submitter's method onError is called before the form's one. |
| |
| NOTE: Starting with Wicket version 6.0 interface IFormSubmitter defines a further callback method called onAfterSubmit(). This method is called after form's method onSubmit() has been executed. |
| |
| === Components Button and SubmitLink |
| |
| Component _org.apache.wicket.markup.html.form.Button_ is a basic implementation of a form submitter. It can be used with either the <input> or <button> tags. The string model received as input by its constructor is used as button label and it will be the value of the markup attribute value. |
| |
| In the following snippet we have a form with two submit buttons bound to an <input> tag. One of them is set as default button and both have a string model for the label: |
| |
| *HTML:* |
| |
| [source,html] |
| ---- |
| <body> |
| <form wicket:id="form"> |
| Username: <input type="text" wicket:id="username"/> |
| <br/> |
| <input type="submit" wicket:id="submit1"/> |
| <input type="submit" wicket:id="submit2"/> |
| </form> |
| </body> |
| ---- |
| |
| *Java code:* |
| |
| [source,java] |
| ---- |
| public class HomePage extends WebPage { |
| |
| public HomePage(final PageParameters parameters) { |
| Form<Void> form = new Form<>("form"); |
| |
| form.add(new TextField("username", Model.of(""))); |
| form.add(new Button("submit1", Model.of("First submitter"))); |
| Button secondSubmitter; |
| form.add(secondSubmitter = new Button("submit2", Model.of("Second submitter"))); |
| |
| form.setDefaultButton(secondSubmitter); |
| add(form); |
| } |
| } |
| ---- |
| |
| *Generated markup:* |
| |
| [source,html] |
| ---- |
| <form wicket:id="form" id="form1" method="post" action="?0-1.IFormSubmitListener-form"> |
| <div> |
| ... |
| <!-- Code generated by Wicket to handle the default button --> |
| ... |
| </div> |
| Username: <input type="text" wicket:id="username" value="" name="username"/> |
| <br/> |
| <input type="submit" wicket:id="submit1" name="submit1" id="submit13" value="First submitter"/> |
| <input type="submit" wicket:id="submit2" name="submit2" id="submit22" value="Second submitter"/> |
| </form> |
| ---- |
| |
| Another component that can be used to submit a form is _org.apache.wicket.markup.html.form.SubmitLink_. This component uses JavaScript to submit the form. Like the name suggests, the component can be used with the <a> tag but it can be also bound to any other tag that supports the event handler onclick. When used with the <a> tag, the JavaScript code needed to submit the form will be placed inside href attribute while with other tags the script will go inside the event handler onclick. |
| |
| A notable difference between this component and Button is that SubmitLink can be placed outside the form it must submit. In this case we must specify the form to submit in its constructor: |
| |
| *HTML:* |
| |
| [source,html] |
| ---- |
| <html xmlns:wicket="http://wicket.apache.org"> |
| <head> |
| </head> |
| <body> |
| <form wicket:id="form"> |
| Password: <input type="password" wicket:id="password"/> |
| <br/> |
| </form> |
| <button wicket:id="externalSubmitter"> |
| Submit |
| </button> |
| </body> |
| </html> |
| ---- |
| |
| *Java code:* |
| |
| [source,java] |
| ---- |
| public class HomePage extends WebPage { |
| |
| public HomePage(final PageParameters parameters) { |
| Form<Void> form = new Form<>("form"); |
| |
| form.add(new PasswordTextField("password", Model.of(""))); |
| //specify the form to submit |
| add(new SubmitLink("externalSubmitter", form)); |
| add(form); |
| } |
| } |
| ---- |
| |
| === Disabling default form processing |
| |
| With an IFormSubmittingComponent we can choose to skip the default form submission process by setting the appropriate flag to false with the setDefaultFormProcessing method. When the default form processing is disabled only the submitter's onSubmit is called while form's validation and models updating are skipped. |
| |
| This can be useful if we want to implement a “Cancel” button on our form which redirects user to another page without validating his/her input. |
| |
| When we set this flag to false we can decide to manually invoke the form processing by calling the process(IFormSubmittingComponent) method. |
| |
