JSF2.0 jsfc 属性を使用することのメリット編

「JSF2.0 画面 (XHTML) とビジネスモデル (ManagedBean) の連携編」で JSF を使用したシンプルな画面が完成しました。
作成した hello.xhtml では「jsfc」属性を使用することで JSF タグを指定していますが、もっとシンプルな (コーディング量を減らした) hello.xhtml を作成することも可能です。

1. jsfc 属性の使用有無で異なる hello.xhtml

jsfc 属性の使用有無によって hello.xhtml がどのように変わるのか比較してみます。
なお、比較対象の hello.xhtml は <body> タグ部分のみを抜き出していますが、その他のコードは同一です。

jsfc 属性ありの hello.xhtml (前回バージョン)

<body>
    <span jsfc="h:outputText" value="#{helloWorld.outText}"/>
    <form jsfc="h:form">
        名前を入力してください。
        <input type="text" jsfc="h:inputText" value="#{helloWorld.name}"/>
        <input type="submit" value="実行" jsfc="h:commandButton" action="#{helloWorld.exec()}"/>
    </form>
</body>

jsfc 属性なしの hello.xhtml (新バージョン)

<body>
    <h:outputText value="#{helloWorld.outText}"/>
    <h:form>
        名前を入力してください。
        <h:inputText value="#{helloWorld.name}"/>
        <h:commandButton type="submit" value="実行" action="#{helloWorld.exec()}"/>
    </h:form>
</body>

HTML のタグを省略可能な分、 jsfc 属性を使用していない hello.xhtml の方がシンプルです。
さらに言ってしまうと、JSF タグを理解していれば後者の方が読みやすい (分かりやすい) コードと言えるのではないでしょうか。

もちろん、どちらのコードも実行時の動作は同一となります。

2. 動作時に出力される HTML

では実際に出力される HTML は異なっているのでしょうか。
ちょっと長くなってしまいますが全文掲載します。

(*)見やすくするため、一部修正しています。
　　・改行を追加
　　・マルチバイト文字をエスケープ形式 (「名」等) から日本語 (「赤」等) に変換 (青字部分)

jsfc 属性ありの hello.xhtml から出力された HTML

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello, world.</title>
</head>
<body>
こんにちは。赤び～
<form id="j_id-114068476_6cc8bdd" name="j_id-114068476_6cc8bdd" method="post" action="/glassfish/faces/hello.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_id-114068476_6cc8bdd" value="j_id-114068476_6cc8bdd" />
        名前を入力してください。
        <input type="text" name="j_id-114068476_6cc8bdd:j_id-114068476_6cc8bbb" value="赤び～" />
        <input type="submit" name="j_id-114068476_6cc8bdd:j_id-114068476_6cc8bb6" value="実行" />
        <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-200115590285025609:-7358830188982556608" />
</form>
</body>
</html>

jsfc 属性なしの hello.xhtml から出力された HTML

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello, world.</title>
</head>
<body>
こんにちは。赤び～
<form id="j_id-327415688_1383f7a1" name="j_id-327415688_1383f7a1" method="post" action="/glassfish/faces/hello.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_id-327415688_1383f7a1" value="j_id-327415688_1383f7a1" />
        名前を入力してください。
        <input type="text" name="j_id-327415688_1383f7a1:j_id-327415688_1383f7c7" value="赤び～" />
        <input type="submit" name="j_id-327415688_1383f7a1:j_id-327415688_1383f7ca" value="実行" />
        <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-734726724941071818:-6477627737815299099" />
</form>
</body>
</html>

比較していただければお分かりのように、「id」「name」等のコードを除いて同一の HTML が出力されています。

では、コーディング量が増大するだけに思える jsfc 属性を使用するメリットはあるのでしょうか。

3. ブラウザからの直接参照

視点をかえて、２種類の hello.xhtml を直接ブラウザで直接参照してみます。

jsfc 属性ありの hello.xhtml をプラウザから参照

jsfc 属性なしの hello.xhtml をプラウザから参照

jsfc 属性ありの場合のみ、プラウザから「名前」項目や「実行」ボタンを含めた画面レイアウトを確認することができました。
この差は言うまでもなく HTML タグの有無に起因しています。

4. jsfc 属性のメリット

jsfc 属性を使用するメリットは、画面のデザイナーとプログラムの実装者が別である場合に発揮されます。

最初にデザイナーが HTML のみでセンスの良い (そうではない場合もありますが。。。) 画面レイアウトを作成します。
その後、プログラマが jsfc 属性を使用して画面項目とビジネスロジック (管理対象Bean) との紐付けをおこないます。
将来的に画面レイアウトを修正する必要が生じた場合でも、もともとの HTML タグは残っているため、JSF タグを意識することなくデザイナーは画面レイアウトの修正が可能です。

ちなみに赤び～の場合、備忘録を書くために専任デザイナーを雇うことはできないため、今後 jsfc 属性が登場することはないと思われます。。。

JSF2.0 jsfc 属性を使用することのメリット 編

1. jsfc 属性の使用有無で異なる hello.xhtml

2. 動作時に出力される HTML

3. ブラウザからの直接参照

4. jsfc 属性のメリット

[ END ]

JSF2.0 jsfc 属性を使用することのメリット編