!!![Form|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html] 入力フィールドや送信ボタン等を含む入力フォーム(
)を提供します。 {{code java public class Login extends Page { private Form form = new Form("form"); public Login() { form.add(new TextField("username", true)); form.add(new PasswordField("password", true)); form.add(new Submit("ok", " OK ", this, "onOkClick")); form.add(new Submit("cancel", this, "onCancelClick")); addControl(form); } public boolean onOkClick() { if (form.isValid()) { User user = new User(); form.copyTo(user); if (UserDOA.isAuthenticatedUser(user)) { getContext().setSessionAttribute("user", user); setRedirect("home.htm"); } else { form.setError(getMessage("authentication-error")); } } return true; } public boolean onCancelClick() { setRedirect("index.htm"); return false; } } }} テンプレートでは以下のようにして自動レイアウトされた入力フォームを出力することができます。 {{code html $form }} !!データバインディング フォームとオブジェクトのバインディングのために以下のメソッドが用意されています。 * value object -> form fields [copyFrom(Object)|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#copyFrom(java.lang.Object)] * form fields -> value object [copyTo(Object)|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#copyTo(java.lang.Object)] ネストしたプロパティに関してはOGNLを使うことで使用可能です。以下にバインディングの例を示します。 {{code java // The customer.address.state field TextField stateField = new TextField("address.state"); form.add(stateField); .. // Loads the customer address state into the form stateField Customer customer = getCustomer(); form.copyFrom(customer); .. // Copies form stateField value into the customer address state Customer customer = new Customer(); form.copyTo(customer); }} !!フォームのバリデーション フォームは入力フィールドのバリデーションをサポートしています。バリデーションを無効にするには[setValidate(boolean)|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#setValidate(boolean)]をfalseに設定しておきます。 また、JavaScriptを使用したクライアントサイド・バリデーションもサポートしています。デフォルトでは無効になっていますが、有効にする場合は以下のように[setJavaScriptValidation(boolean)|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#setJavaScriptValidation(boolean)]にtrueを設定します。 {{code java Form form = new Form("form"); form.setJavaScriptValidation(true); // Add form fields .. form.add(new Submit("ok", " OK ", this, "onOkClicked"); Submit cancel = new Submit("cancel", "Cancel", this, "onCancelClicked"); cancel.setCancelJavaScriptValidation(true); addControl(form); }} !!HTMLインポート FormコントロールはCSS (control.css) やJavaScript (control.js) をアプリケーションディレクトリ/clickというディレクトリに自動的に展開します。これらをHTMLテンプレートでインポートするには[PageImports|http://click.sourceforge.net/docs/click-api/net/sf/click/util/PageImports.html]オブジェクトを使用します。 {{code html $imports $form }} !!フォームのレイアウト フォームのレイアウトは自動、手動の両方で行うことができます。 !自動レイアウト 以下のようなオプションで自動レイアウトをカスタマイズすることができます。 ,オプション,説明 ,[buttonAlign|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#buttonAlign],"ボタンの整列: [""left"", ""center"", ""right""]" ,[buttonStyle|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#buttonStyle],ボタンの タグの "style" 属性の値 ,[columns|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#columns],テーブルのカラム数。デフォルトは1 ,[errorsAlign|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#errorsAlign],"バリデーションエラーメッセージの整列: [""left"", ""center"", ""right""]" ,[errorsPosition|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#errorsPosition],"バリデーションエラーメッセージの位置 [""top"", ""middle"", ""bottom""]" ,[errorsStyle|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#errorsStyle],エラーの タグの "style" 属性の値 ,[fieldStyle|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#fieldStyle],フィールドの タグの "style" 属性の値 ,[labelAlign|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#labelAlign],"フィールドラベルの整列: [""left"", ""center"", ""right""]" ,[labelsPosition|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#labelsPosition],"フィールドラベルの位置: [""left"", ""top""]" ,[labelStyle|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#labelStyle],ラベルの タグの "style" 属性の値 ,click/control.css,CSSスタイルを定義。clickディレクトリに自動的に展開される ,/click-control.properties,フォーム、フィールドのHTMLおよびメッセージ。クラスパスに配置されます !手動レイアウト 手動でレイアウトを行う場合、テンプレートでは以下のようにしてフォームに格納されているフィールドにアクセスすることができます。 {{code html $form.fields.usernameField }} 手動でレイアウトを行う場合は以下の項目を指定する必要があります。 *method - フォームの送信方法 ("POST"または"GET")。 *name - フォーム名。JavaScriptを使用する場合は重要になります。 *action - フォームの送信先ページ。 *form_name - Formコントロールに設定した名前。 手動レイアウトを行うテンプレートの例を以下に示します。 {{code html #if ($form.error) #end #if ($form.fields.usernameField.error) #end #if ($form.fields.passwordField.error) #end
$form.error
$form.fields.usernameField.error
$form.fields.passwordField.error
Username: $form.fields.usernameField
Password: $form.fields.passwordField
$form.fields.okSubmit $form.fields.cancelSubmit
}} !Velocityマクロ [Velocityマクロ|http://click.sourceforge.net/docs/velocity/user-guide.html#Velocimacros]はフォームの自動レイアウトをカスタマイズするための良い方法です。 FormのfieldList、buttonListといったプロパティをVelocityマクロで使用することで、共通的なレイアウトを行うマクロを作成することができます。以下はwriteForm()という自動レイアウトを行うマクロの例です。このマクロはmacro.vmなどといったマクロファイルに含まれているものとします。 {{code html #* Custom Form Macro Code *# #macro( writeForm[$form] ) #foreach ($field in $form.fieldList) #if ($field.hidden) $field #end #end #if ($form.error) #end #foreach ($field in $form.fieldList) #if (!$field.hidden) #if (!$field.valid) #end #end #end
$form.error
$field.error
$field.label: $field
#foreach ($button in $form.buttonList) $button   #end
#end }} ページテンプレートでは以下のようにしてこのマクロを使用します。 {{code html #writeForm($form) }} !マクロの設定 *自作のマクロはWebアプリケーションのルートディレクトリにmacro.vmというファイル名で配置します。 *click/VM_global_macro.vmに自動展開されるファイルにマクロを記述しておくこともできます。macro.vmが存在すればそちらが優先されます。 *もし独自のファイル名でマクロを作成した場合はWEB-INF/velocity.propertiesのvelocimacro.libraryというプロパティに参照を追加します。Velocityのプロパティに関する詳細は[ここ|http://click.sourceforge.net/docs/configuration.html#velocity-properties]を参照してください。 !!不正なポストの防止 ページの更新や戻るボタンなどでフォームの二重送信が行われてしまう場合があります。これを防ぐにはポスト-リダイレクトパターンを使用します。このパターンはフォームがポストされたときに別のページへリダイレクトで遷移するというものです。ユーザがページを更新しても現在のページへのGETリクエストが発生するだけです。このトピックに関する詳細は[Redirect After Post|http://www.theserverside.com/tt/articles/content/RedirectAfterPost/article.html]を参照してください。 戻るボタン対策にはFormの[onSubmitCheck(Page, String)|http://click.sourceforge.net/docs/click-api/net/sf/click/control/Form.html#onSubmitCheck(net.sf.click.Page,%20java.lang.String)]メソッドを使用します。 {{code java public class Purchase extends Page { .. public boolean onSecurityCheck() { return form.onSubmitCheck(this, "/invalid-submit.html"); } } }} このメソッドはフォームが二重送信されないようセッションとhiddenフィールドに特別なトークンをストアします。