ここでは、Wicket Hello Wicket で作った Quick Start ページをベースに、画面遷移とフォームデータの受け渡しを行う簡単なアプリケーションを作る
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/"> <head> <title>Wicket Quickstart Archetype Homepage</title> </head> <body> <form wicket:id="f"> <!-- ADD --> <strong>Wicket Quickstart Archetype Homepage</strong> <br/><br/> <span wicket:id="message">message will be here</span> <br/><br/> <input type="submit" value="POST"/> <!-- ADD --> </form> <!-- ADD --> </body> </html>
package com.snail; import org.apache.wicket.PageParameters; import org.apache.wicket.markup.html.WebPage; import org.apache.wicket.markup.html.basic.Label; import org.apache.wicket.markup.html.form.Form; public class HomePage extends WebPage { private static final long serialVersionUID = 1L; private Form form = new Form("f") { private static final long serialVersionUID = -1700095884500348972L; @Override protected void onSubmit() { ResultPage result = new ResultPage(); setResponsePage(result); } }; private Label lbl = new Label("message", "If you see this message wicket is properly configured and running"); public HomePage(final PageParameters parameters) { add(form); form.add(lbl); } }
今の時点では特に何もしていない。
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/"> <head> <title>Result Page</title> </head> <body> Result Page </body> </html>
package com.snail; import org.apache.wicket.markup.html.WebPage; public class ResultPage extends WebPage { private static final long serialVersionUID = -8680953158566804713L; public ResultPage() { } }
ボタンだけの webアプリケーションに、入力フィールドその他諸々を付け足して、一通りの機能を持った webアプリケーションを作ってみる。
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/"> <head> <title>Wicket Examination Homepage</title> </head> <body> <strong>Wicket Examination Homepage</strong> <br/><br/> <span wicket:id="msg"> error message will be here </span> <form wicket:id="f"> Subject : <input type="text" wicket:id="subject" size="35"/> <br/><br/> Date : <input type="text" wicket:id="date" size="20"/> Type : <select wicket:id="type"> <option>Example1</option> <option>Example2</option> <option>Example3</option> </select> <br/><br/> Article : <br/> <textarea wicket:id="article" rows="5" cols="40"> article will be here </textarea> <br/><br/> <input type="submit" value="POST"/> </form> </body> </html>
package com.snail; import java.util.ArrayList; import java.util.Date; import java.util.List; import org.apache.wicket.PageParameters; import org.apache.wicket.markup.html.WebPage; import org.apache.wicket.markup.html.form.DropDownChoice; import org.apache.wicket.markup.html.form.Form; import org.apache.wicket.markup.html.form.TextArea; import org.apache.wicket.markup.html.form.TextField; import org.apache.wicket.markup.html.panel.FeedbackPanel; import org.apache.wicket.model.Model; public class HomePage extends WebPage { private static final long serialVersionUID = 3598788934381254916L; private Form form = new Form("f") { private static final long serialVersionUID = -1700095884500348972L; @Override protected void onSubmit() { ResultPage result = new ResultPage((HomePage) this.getParent()); setResponsePage(result); } }; private Model mSubject = new Model(); private Model mType = new Model(); private Model mDate = new Model(new Date()); private Model mArticle = new Model(); private FeedbackPanel feedback = new FeedbackPanel("msg"); public HomePage(final PageParameters parameters) { add(feedback); add(form); TextField txtSubject = new TextField("subject", mSubject); txtSubject.setRequired(true); form.add(txtSubject); List<String> typeList = new ArrayList<String>(); typeList.add("Diary"); typeList.add("Book Review"); typeList.add("Tech Memo"); typeList.add("Diet"); // If you want to set the Default Value of combo box, // write like following. //mType.setObject("Diary"); DropDownChoice cmbType =new DropDownChoice("type", mType, typeList); cmbType.setRequired(true); form.add(cmbType); TextField txtDate = new TextField("date", mDate,Date.class); txtDate.setRequired(true); form.add(txtDate); TextArea txtArticle = new TextArea("article", mArticle); txtArticle.setRequired(true); form.add(txtArticle); } public Model getMSubject() { return mSubject; } public Model getMType() { return mType; } public Model getMDate() { return mDate; } public Model getMArticle() { return mArticle; } }
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/"> <head> <title>Result Page</title> </head> <body> <p>Are you sure you want to submit this post? </p> Subject: <span wicket:id="subject">Subject will be here</span> ( <span wicket:id="type">Type will be here</span> )<br/> Date: <span wicket:id="date">Date will be here</span><br/> Article: <br/> <textarea wicket:id="article" cols="40" rows="5" disabled="disabled"> Article will be here </textarea> <br/><br/> <form wicket:id="f"> <input type="submit" value="sure"/> <input type="submit" value="cancel"/> </form> </body> </html>
package com.snail; import org.apache.wicket.markup.html.WebPage; import org.apache.wicket.markup.html.basic.Label; import org.apache.wicket.markup.html.form.Form; import org.apache.wicket.markup.html.form.TextArea; public class ResultPage extends WebPage { private static final long serialVersionUID = -8680953158566804713L; private WebPage formerPage; private Form form = new Form("f") { private static final long serialVersionUID = 5522440160951241211L; @Override protected void onSubmit() { setResponsePage(formerPage); } }; public ResultPage(HomePage page) { this.formerPage=page; add(new Label("subject",page.getMSubject())); add(new Label("type",page.getMType())); add(new Label("date",page.getMDate())); add(new TextArea("article",page.getMArticle())); add(form); } }
<form wicket:id="f"> Subject : <input type="text" wicket:id="subject" size="35"/> ... <input type="submit" value="POST"/> </form>
public class HomePage extends WebPage { private Model mSubject = new Model(); public HomePage(final PageParameters parameters) { ... add(form); TextField txtSubject = new TextField("subject", mSubject); txtSubject.setRequired(true); form.add(txtSubject); ... } public Model getMSubject() { return mSubject; }
<form wicket:id="f"> ... Type : <select wicket:id="type"> <option>Example1</option> <option>Example2</option> <option>Example3</option> </select> ... <input type="submit" value="POST"/> </form>
public class HomePage extends WebPage { ... private Model mType = new Model(); ... public HomePage(final PageParameters parameters) { ... add(form); ... List<String> typeList = new ArrayList<String>(); typeList.add("Diary"); typeList.add("Book Review"); typeList.add("Tech Memo"); typeList.add("Diet"); // If you want to set the Default Value of combo box, // write like following. //mType.setObject("Diary"); DropDownChoice cmbType =new DropDownChoice("type", mType, typeList); cmbType.setRequired(true); form.add(cmbType); ... } ... public Model getMType() { return mType; } ... }
<form wicket:id="f"> ... Article : <br/> <textarea wicket:id="article" rows="5" cols="40"> article will be here </textarea> <br/><br/> <input type="submit" value="POST"/> </form>
public class HomePage extends WebPage { ... private Model mArticle = new Model(); ... public HomePage(final PageParameters parameters) { ... add(form); ... TextArea txtArticle = new TextArea("article", mArticle); txtArticle.setRequired(true); form.add(txtArticle); } ... public Model getMArticle() { return mArticle; } }
ここでは、簡単な入力チェックとメッセージの表示を行う。
複雑な入力検証を行ったり、エラー箇所を赤くしたり、エラーメッセージの設定は、あと( Wicket Validation?)で、
<span wicket:id="msg"> error message will be here </span>
public class HomePage extends WebPage { ... private FeedbackPanel feedback = new FeedbackPanel("msg"); public HomePage(final PageParameters parameters) { add(feedback); add(form); ...
... <span wicket:id="msg"> error message will be here </span> <form wicket:id="f"> ... Date : <input type="text" wicket:id="date" size="20"/> ... <input type="submit" value="POST"/> </form> ...
public class HomePage extends WebPage { ... private Model mDate = new Model(new Date()); ... public HomePage(final PageParameters parameters) { ... TextField txtDate = new TextField("date", mDate ,Date.class); txtDate.setRequired(true); form.add(txtDate); ...
TextField txtSubject = new TextField("subject", mSubject); txtSubject.setRequired(true); form.add(txtSubject);
public class HomePage extends WebPage { ... private Form form = new Form("f") { @Override protected void onSubmit() { ResultPage result = new ResultPage((HomePage) this.getParent()); setResponsePage(result); } }; ...
public class ResultPage extends WebPage { private WebPage formerPage; private Form form = new Form("f") { @Override protected void onSubmit() { setResponsePage(formerPage); } }; public ResultPage(HomePage page) { this.formerPage=page; add(new Label("subject",page.getMSubject())); add(new Label("type",page.getMType())); add(new Label("date",page.getMDate())); add(new TextArea("article",page.getMArticle())); add(form); } }