投稿日
NablarchのJSPカスタムタグが出力するHTML
もくじ
はじめに
はじめまして。テクノロジー&エンジニアリングセンターの羽部(はぶ)と申します。新人研修や、ITアーキテクト育成などの技術者育成を担当しています。
今回は、Nablarch解説書に記載されていない情報の補完を目的に記事を書きました。「ここは実際どうなってるの?」といった情報をお伝えします。
Nablarchは、色々なJSPカスタムタグ を提供しています。このカスタムタグの見た目やレイアウトをカスタマイズしたいと思ったことはありませんか。またその時、JSPに書いた内容がどのようにHTMLに影響するのか知りたくなったことはありませんか。
本記事では、そんな時にお役に立てるよう、JSPに書いたタグはどのようなHTMLを出力するのか紹介していきます。
扱うタグは、入力フォームを作成するのによく使われる以下のタグです。
- textタグ
- textareaタグ
- passwordタグ
- radioButtonタグ
- checkboxタグ
- radioButtonsタグ
- checkboxesタグ
- selectタグ
- fileタグ
- submitタグ
- submitLinkタグ
JSPカスタムタグが出力するHTML
ではさっそく、JSPカスタムタグが出力するHTMLを紹介します。
textタグ
Nablarch解説書はこちら。
JSPでの実装
<n:text
name="loginId"
cssClass="input-medium"
errorCss="input-error"
autofocus="true"/>
出力されるHTML
<input
type="text"
name="loginId"
class="input-medium"
value="" autofocus="autofocus"/>
JSPで指定した属性がほとんどそのままHTMLに反映されます。
しかし、「errorCss
はどこ行った?」となりますよね。errorCssはエラーが発生した場合に使用されるCSSクラス名で、入力値のバリデーションでエラーがあった時に現れます。 例えば、テキストボックスにhoge
と入力してバリデーションエラーが発生したら、次のようになります。
入力値にエラーがあった場合に、出力されるHTML
<input
type="text"
name="loginId"
class="input-medium
input-error"
value="hoge"
autofocus="autofocus"/>
class
属性の値が、JSPに記述したcssClass
のものだけでなく、errorCss
のものも追加されます。この動作は、text
タグ以外でも、errorCss
属性を指定可能なタグであれば、共通です。
textareaタグ
Nablarch解説書はこちら。
JSPでの実装
<n:textarea
name="note"
rows="4"
cols="40"
cssClass="input-medium"
errorCss="input-error"/>
出力されるHTML
<textarea
class="input-medium"
name="note"
rows="4"
cols="40"> </textarea>
HTMLになって変わるところといえば、cssClass
程度です。textarea
タグは、ほとんどそのままHTMLに変換されます。
passwordタグ
Nablarch解説書はこちら。
JSPでの実装
<n:password
name="newPassword"
restoreValue="true"
replacement="●"
cssClass="input-medium"
errorCss="input-error"/>
出力されるHTML
<input
class="input-medium"
type="password"
name="newPassword"
value="" />
JSPで記述したrestoreValue
やreplacement
は、passwordタグの動作を指示する属性なので、HTMLには直接反映されません。
例えば、restoreValue="true"
と指定すると、入力値エラーなどで画面が再表示された際、入力値を復元します。 このため、入力値にエラーがあった場合は、次のようなHTMLが出力されます。
入力値にエラーがあった場合に、出力されるHTML(restoreValue=”true”)
「hogehoge」と入力した場合です。
<input
class="input-medium input-error"
type="password"
name="newPassword"
value="hogehoge" />
value
属性に入力値が設定されます。
一方、restoreValue="false"
と指定し、入力値にエラーがあった場合は、次のようなHTMLが出力されます。
入力値にエラーがあった場合に、出力されるHTML(restoreValue=”false”)
「hogehoge」と入力した場合です。
<input
class="input-medium
input-error"
type="password"
name="newPassword" />
入力値を復元する必要がありませんから、value
属性自体現れません。
radioButtonタグ
Nablarch解説書はこちら。
JSPでの実装
<n:radioButton
name="plan"
value="1" label="フリープラン"
cssClass="input-medium"
errorCss="input-error"/>
出力されるHTML
<input
id="nablarch_radio1"
class="input-medium"
type="radio"
name="plan"
value="1" />
<label for="nablarch_radio1">
フリープラン
</label>
id
属性はlabel
タグで使用するために、Nablarchが自動的に割り当てたものです。
checkboxタグ
Nablarch解説書はこちら。
JSPでの実装
<n:checkbox
name="optionPlan"
value="1"
label="オプションプラン"
useOffValue="true"
offLabel="オプション無し"
offValue="0"
cssClass="input-medium"
errorCss="input-error"/>
Nablarchのcheckbox
タグは、useOffValue
属性がtrue
なら、チェックがない場合でも値を送信できます。offLabel
属性は、チェックがない場合に確認画面で表示する文字列、offValue
属性は、チェックがない場合に送信する値をそれぞれ指定しています。
出力されるHTML
<input
id="nablarch_checkbox1"
class="input-medium"
type="checkbox"
name="optionPlan"
value="1" />
<label for="nablarch_checkbox1">
オプションプラン
</label>
<input
type="hidden"
name="nablarch_hidden"
value="nablarch_cbx_off_param_optionPlan=0|
nablarch_hidden_submit_nablarch_form1_1="/>
id
属性はlabel
タグで使用するために、Nablarchが自動的に割り当てたものです。
JSPで指定したoffValue
属性は、HTMLではnablarch_hidden
という名前のinput type="hidden"
に反映されています。 nablarch_hidden
はvalue
属性に色々な値を|
区切りで持っています。 この中の、nablarch_cbx_off_param_【checkboxタグのname属性の値】
(今回だと、nablarch_cbx_off_param_optionPlan
)にoffValue
属性の値が反映されています。 Nablarchはこれらの情報を元に、チェックがない場合でも、値を設定しています。
radioButtonsタグ
Nablarch解説書はこちら。
radioButton
タグは、1つのラジオボタンを作成するタグでした。radioButton"s"
タグは、リクエストスコープに格納しておいたリストから、複数のラジオボタンを作成するタグです。
Javaでの実装(ラジオボタンの各項目に対応するクラス)
public class Plan{
private String name;
private String value;
// Setter、Getterは省略。
}
Javaでの実装(アクションクラス)
public HttpResponse hoge(HttpRequest request, ExecutionContext context) {
// 選択肢のリストの作成。
List<Plan> radioItems = new ArrayList<>();
Plan plan = new Plan();
plan.setName("フリープラン");
plan.setValue("1");
radioItems.add(plan);
plan = new Plan();
plan.setName("定額プラン");
plan.setValue("2");
radioItems.add(plan);
plan = new Plan();
plan.setName("従量プラン");
plan.setValue("3");
radioItems.add(plan);
// リクエストスコープに格納する。
context.setRequestScopedVar("radioItems", radioItems);
return new HttpResponse("/WEB-INF/view/hoge.jsp");
}
JSPでの実装
<n:radioButtons
name="optionPlan"
listName="radioItems"
elementLabelProperty="name"
elementValueProperty="value"
elementLabelPattern="$VALUE$:$LABEL$"
listFormat="ul"
cssClass="input-medium"
errorCss="input-error"/>
出力されるHTML
<ul>
<li>
<input id="nablarch_radio1" class="input-medium" type="radio" name="optionPlan" value="1" />
<label for="nablarch_radio1">1:フリープラン</label>
</li>
<li>
<input id="nablarch_radio2" class="input-medium" type="radio" name="optionPlan" value="2" />
<label for="nablarch_radio2">2:定額プラン</label>
</li>
<li>
<input id="nablarch_radio3" class="input-medium" type="radio" name="optionPlan" value="3" />
<label for="nablarch_radio3">3:従量プラン</label>
</li>
</ul>
JSPのlistName
属性が、アクションクラスでリストをリクエストスコープに格納した際の名前に対応します。elementLabelProperty
属性は、リストの要素からラベル(elementLabelPattern
の$LABEL$
の部分にあたります)を取得するためのプロパティ名です。elementValueProperty
属性は、リストの要素から値(elementLabelPattern
の$VALUE$
の部分にあたります)を取得するためのプロパティ名です。またこれは、HTMLのvalue
属性の値にもなります。
この例では、JSPでlistFormat
にul
を指定したため、HTMLもul
タグで整形されています。
checkboxesタグ
Nablarch解説書はこちら。
checkbox
タグは、1つのチェックボックスを作成するタグでした。checkbox"es"
タグは、リクエストスコープに格納しておいたリストから、複数のチェックボックスを作成するタグです。
Javaでの実装(チェックボックスの各項目に対応するクラス)
public class Plan{
private String name;
private String value;
// Setter、Getterは省略。
}
Javaでの実装(アクションクラス)
public HttpResponse hoge(HttpRequest request, ExecutionContext context) {
// 選択肢のリストの作成。
List<Plan> checkItems = new ArrayList<>();
Plan plan = new Plan();
plan.setName("フリープラン");
plan.setValue("1");
checkItems.add(plan);
plan = new Plan();
plan.setName("定額プラン");
plan.setValue("2");
checkItems.add(plan);
plan = new Plan();
plan.setName("従量プラン");
plan.setValue("3");
checkItems.add(plan);
// リクエストスコープに格納する。
context.setRequestScopedVar("checkItems", checkItems);
return new HttpResponse("/WEB-INF/view/hoge.jsp");
}
JSPでの実装
<n:checkboxes
name="optionPlan"
listName="checkItems"
elementLabelProperty="name"
elementValueProperty="value"
elementLabelPattern="$VALUE$:$LABEL$"
listFormat="ul"
cssClass="input-medium"
errorCss="input-error"/>
出力されるHTML
<ul>
<li>
<input id="nablarch_checkbox1" class="input-medium" type="checkbox" name="optionPlan" value="1" />
<label for="nablarch_checkbox1">1:フリープラン</label>
</li>
<li>
<input id="nablarch_checkbox2" class="input-medium" type="checkbox" name="optionPlan" value="2" />
<label for="nablarch_checkbox2">2:定額プラン</label>
</li>
<li>
<input id="nablarch_checkbox3" class="input-medium" type="checkbox" name="optionPlan" value="3" />
<label for="nablarch_checkbox3">3:従量プラン</label>
</li>
</ul>
radioButtons
と同じです。
selectタグ
Nablarch解説書はこちら。
リクエストスコープに格納しておいたリストを選択肢とする、HTMLのselect
タグを出力するタグです。
Javaでの実装(選択肢1つ1つに対応するクラス)
public class Plan{
private String name;
private String value;
// Setter、Getterは省略。
}
Javaでの実装(アクションクラス)
public HttpResponse hoge(HttpRequest request, ExecutionContext context) {
// 選択肢のリストの作成。
List<Plan> selectItems = new ArrayList<>();
Plan plan = new Plan();
plan.setName("フリープラン");
plan.setValue("1");
selectItems.add(plan);
plan = new Plan();
plan.setName("定額プラン");
plan.setValue("2");
selectItems.add(plan);
plan = new Plan();
plan.setName("従量プラン");
plan.setValue("3");
selectItems.add(plan);
// リクエストスコープに格納する。
context.setRequestScopedVar("selectItems", selectItems);
return new HttpResponse("/WEB-INF/view/hoge.jsp");
}
JSPでの実装
<n:select
name="optionPlan"
listName="selectItems"
elementLabelProperty="name"
elementValueProperty="value"
elementLabelPattern="$VALUE$:$LABEL$"
withNoneOption="true"
noneOptionLabel="未選択"
cssClass="input-medium"
errorCss="input-error"/>
出力されるHTML
<select class="input-medium" name="optionPlan">
<option value="">未選択</option>
<option value="1">1:フリープラン</option>
<option value="2">2:定額プラン</option>
<option value="3">3:従量プラン</option>
</select>
こちらも、radioButtons
やcheckboxes
と変わりません。 select
タグに特有なのは、withNoneOption
とnoneOptionLabel
の2つの属性です。withNoneOption
属性がtrue
だと、HTMLではvalue
が""
となるoption
タグが生成されます。noneOptionLabel
は、このoption
タグのラベルに反映されます。
fileタグ
Nablarch解説書はこちら。
JSPでの実装
<n:file
name="fileName"
cssClass="input-medium"
errorCss="input-error"/>
出力されるHTML
<input
class="input-medium"
type="file"
name="fileName"
value="" />
submitタグ
Nablarch解説書はこちら。
JSPでの実装
<n:submit
uri="/action/confirm"
type="submit"
value="確認"/>
出力されるHTML
<input
type="submit"
name="nablarch_form1_1"
value="確認"
onclick="return window.nablarch_submit(event, this);" />
<script type="text/javascript">
<!--
nablarch_submission_info.nablarch_form1 = {
"nablarch_form1_1": {
"action": "/action/confirm",
"allowDoubleSubmission": true,
"submissionAction": "TRANSITION"
}
};
-->
</script>
HTMLのname
属性は、フォーム内で一意でなくてはいけません。JSPでname
属性を指定しなければ、submit
タグが一意な名前を自動で出力します。このため、submit
タグでname
属性を指定する必要はありません。 また、submit
タグのuri
属性に指定した値は、JavaScriptとして、フォーム内に出力されます。
Nablarchでは、サブミット処理はJavaScript関数で処理します。このJavaScript関数が、nablarch_submit(event, this)
です。NablarchがJSPからHTMLを生成する際に、自動的に出力されます。このJavaScript関数は、フォーム内に出力されたJavaScript(今回の場合は、nablarch_submission_info.nablarch_form1
)を使用して、サーバの処理を呼び出します。
ちなみに、フォーム内に出力されるJavaScriptのallowDoubleSubmission
は、submit
タグのallowDoubleSubmission
属性と対応しています。submit
タグのallowDoubleSubmission
属性にfalse
を指定すれば、以下のような出力となります。
JSPでの実装
<n:submit
uri="/action/confirm"
type="submit"
value="確認"
allowDoubleSubmission="false"/>
出力されるHTML
<input
type="submit"
name="nablarch_form1_1"
value="確認"
onclick="return window.nablarch_submit(event, this);" />
<script type="text/javascript">
<!--
nablarch_submission_info.nablarch_form1 = {
"nablarch_form1_1": {
"action": "/action/confirm",
"allowDoubleSubmission": false,
"submissionAction": "TRANSITION"
}
};
-->
</script>
submitLinkタグ
Nablarch解説書はこちら。
JSPでの実装
<n:submitLink uri="/action/confirm">
確認
</n:submitLink>
出力されるHTML
<a
name="nablarch_form1_1"
href="/action/confirm"
onclick="return window.nablarch_submit(event, this);">
確認
</a>
<script type="text/javascript">
<!--
nablarch_submission_info.nablarch_form1 = {
"nablarch_form1_1": {
"action": "/action/confirm",
"allowDoubleSubmission": true,
"submissionAction": "TRANSITION"
}
};
-->
</script>
submit
タグと同じです。JavaScript関数でサブミットを処理することや、フォーム内にJavaScriptを出力する点も同じです。
おわりに
いかがだったでしょうか。JSPカスタムタグが出力するHTMLを知ることで、見た目のカスタマイズをする際の一助となれば幸いです。
本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。