Mail 送信フォームを
Wicket のForm のSubmit 処理含むを
Wicket のVersion は、7.3.0 です。
目次
実装イメージ
CSS は
HTML
HTML はBootstrap 使っています。
<!-- Contact --> <form role="form" wicket:id="mailForm"> <wicket:enclosure child="feedbackMessage"> <div class="form-group"> <div class="col-md-12"> <div wicket:id="feedbackMessage"></div> </div> </div> </wicket:enclosure> <div class="form-group"> <div class="col-md-12"> <input wicket:id="name" type="text" class="form-control" id="inputName" placeholder="Name"> </div> </div> <div class="form-group"> <div class="col-md-12"> <input wicket:id="eMail" type="text" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-md-12"> <input wicket:id="subject" type="text" class="form-control" id="inputSubject" placeholder="Subject"> </div> </div> <div class="form-group"> <div class="col-md-12"> <textarea wicket:id="message" name="message" class="form-control" rows="3" placeholder="Message"></textarea> </div> </div> <div class="form-group"> <div class="col-md-12"> <button type="submit" wicket:id="sendMessage" class="btn btn-theme btn-lg btn-block">Send message</button> </div> </div> </form>
FORM Buttonを
以下メソッドで、
retrun しているだけです。add しています。
// newMailForm private Form newMailForm() { // new MailForm Form form = new Form("mailForm"); // name TextField name = new RequiredTextField("name", Model.of("")); name.setLabel(Model.of(getString("nameLabelText"))); name.add(StringValidator.maximumLength(150)); form.add(name); // eMail TextField eMail = new RequiredTextField("eMail", Model.of("")); eMail.setLabel(Model.of(getString("eMailLabelText"))); eMail.add(StringValidator.maximumLength(150)); eMail.add(EmailAddressValidator.getInstance()); form.add(eMail); // subject TextField subject = new RequiredTextField("subject", Model.of("")); subject.setLabel(Model.of(getString("subjectLabelText"))); subject.add(StringValidator.maximumLength(150)); form.add(subject); // message TextArea<String> message = new TextArea<>("message", Model.of("")); message.setLabel(Model.of(getString("messageLabelText"))); message.setRequired(true); message.add(StringValidator.maximumLength(10000)); form.add(message); FeedbackPanel feedBack = new FeedbackPanel("feedbackMessage"); feedBack.setOutputMarkupId(true); add(feedBack); // sendMessage Button sendMessage = new Button("sendMessage", Model.of(getString("messageButtonLabelText"))) { private static final long serialVersionUID = -8204140666393922700L; @Override public void onSubmit() { success(getString("messageMailSendSucceed")); } @Override public void onError() { // Set Focus add(new DefaultFocusBehavior("buttonSendMessage")); error(getString("messageMailSendError")); } }; form.add(sendMessage); form.setDefaultButton(sendMessage); return form; }
DefaultFocusBehavior クラスの
onError 時に、Form とButton にBehavior に
以下を
public class DefaultFocusBehavior extends Behavior { /** * DefaultFocusBehavior * * @param markUpId */ public DefaultFocusBehavior(String markUpId) { this.markUpId = markUpId; } private final String markUpId; private static final long serialVersionUID = 1L; @Override public void bind(Component component) { if (!(component instanceof FormComponent)) { throw new IllegalArgumentException("DefaultFocusBehavior: component must be instanceof FormComponent"); } component.setMarkupId(markUpId); } @Override public void renderHead(Component component, IHeaderResponse headerResponse) { super.renderHead(component, headerResponse); headerResponse.render(OnDomReadyHeaderItem.forScript("document.getElementById('" + component.getMarkupId() + "').focus();")); } @Override public boolean isTemporary(Component component) { return true; } }
実装の
テキストフィールドの
必須化 上記で、TextField name = new RequiredTextField("name", Model.of(""));
テキストフィールドを 必須化しています。
必須化は、生成する インスタンスを RequiredTextFieldからTextFieldに変更して、 をname.setRequired(true);
1行追加する ことでも 可能です。 エラー時の
メッセージ変更
入力エラー時は、デフォルトで wicket:id名が項目名と して メッセージが 出力されます。
wicket:id名は出力したくないので、 でname.setLabel(Model.of(getString("nameLabelText")));
項目名称に プロパティファイルから 取得した 値を 設定するようにしました。
- 文字列長チェック
文字列長チェックのため、 で、name.add(StringValidator.maximumLength(150));
最大文字列長チェックを 150文字で 行う 設定を しています。
- テキストエリアには、
TextArea<String> message = new TextArea<>("message", Model.of(""));
RequiredTextFieldにあたる クラスが 存在しないので、 でmessage.setRequired(true);
必須化しました。
FeedbackPanelについて
FeedbackPanelは、Validatorのエラーメッセージ出力の ために 使用します。 以下の 記述 に<div wicket:id="feedbackMessage"></div>
メッセージが 出力されます。
- エラー時の
フォーカス で、add(new DefaultFocusBehavior("buttonSendMessage"));
エラー時に 対象項目に Focusするようにしています。
参考
FORM AjaxButtonを
FORM を
AjaxButton sendMessage = new AjaxButton("sendMessage", Model.of(getString("messageButtonLabelText"))) { private static final long serialVersionUID = -8204140666393922700L; @Override protected void onSubmit(AjaxRequestTarget target, Form<?> form) { target.addChildren(getPage(), FeedbackPanel.class); success(getString("messageMailSendSucceed")); } @Override protected void onError(AjaxRequestTarget target, Form<?> form) { target.addChildren(getPage(), FeedbackPanel.class); error(getString("messageMailSendError")); } };
実装の
target.addChildren(getPage(), FeedbackPanel.class);でFeedbackPanelにメッセージ通知を 行います。
AjaxButtonの場合は、 AjaxRequestTargetにFeedbackPanelをaddしないとメッセージが 反映されません。 target.addChildren(getPage(), FeedbackPanel.class);を使用すると、
FeedbackPanelのインスタンスを 知らなくても よくなるので、 もち回らずとも addできるようになります。
参考
FORM IndicatingAjaxButtonを
IndicatingAjaxButton を
クルクル自体は
こいつを
AjaxButton sendMessage = new IndicatingAjaxButton("sendMessage", Model.of(getString("messageButtonLabelText"))) { private static final long serialVersionUID = -8204140666393922700L; @Override protected void onSubmit(AjaxRequestTarget target, Form<?> form) { target.addChildren(getPage(), FeedbackPanel.class); success(getString("messageMailSendSucceed")); } @Override protected void onError(AjaxRequestTarget target, Form<?> form) { target.addChildren(getPage(), FeedbackPanel.class); error(getString("messageMailSendError")); } };
また、wicket-core にはpom.xml に
<dependency> <groupId>org.apache.wicket</groupId> <artifactId>wicket-extensions</artifactId> <version>7.3.0</version> </dependency>
参考
FeedBackPanel の
FeedbackPanel#getCSSClass() を
FeedbackPanelで<li >タグのcss class 属性を
BootstrapをBootstrapのcss に
FeedbackPanel feedBack = new FeedbackPanel(id) { private static final long serialVersionUID = -3677487785071675904L; protected String getCSSClass(final FeedbackMessage message) { String cssClass; switch (message.getLevel()) { case FeedbackMessage.UNDEFINED: cssClass = getString(FeedbackMessage.UNDEFINED_CSS_CLASS_KEY); break; case FeedbackMessage.DEBUG: // FeedbackMessage.INFO 以下は、"alert alert-info" cssClass = "alert alert-info"; break; case FeedbackMessage.INFO: cssClass = "alert alert-info"; break; case FeedbackMessage.SUCCESS: cssClass = "alert alert-success"; break; case FeedbackMessage.WARNING: cssClass = "alert alert-warning"; break; case FeedbackMessage.ERROR: cssClass = "alert alert-danger"; break; case FeedbackMessage.FATAL: // FeedbackMessage.ERROR 以上は、"alert alert-danger" cssClass = "alert alert-danger"; break; default: cssClass = "feedbackPanel" + message.getLevelAsString(); } return cssClass; } };
表示
以下のように
以上です。
コメント