Download as PDF, PPTX
![JSF(2.0+)の場合(その他留意事項)
・（注意）JSFのAjax通信のレスポンスはXML形式で、かつ独自色が強い。
例）先ほどの入力チェック時に返ってきたレスポンス
<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1">
<changes>
部分的なHTMLが返ってくる。
<update id="form:nameError">
<![CDATA[<span id="form:nameError" style="color: red">必須入力です </span>]]>
</update>
<update id="j_id1:javax.faces.ViewState:0">
<![CDATA[8183146577291182963:-4484956516055255891]]>
</update>
</changes>
</partial-response>
レスポンスを受けて、自前で何かしようとか思わないほうがいい。](https://image.slidesharecdn.com/webjava-131110071421-phpapp01/85/Web-java-22-320.jpg)
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
- 1. メンテナンス性の良い Webシステムを構築するために Javaとフロントエンドでやるべきこと 2013/11/09 JJUG CCC HTML5jエンタープライズ部 小川充(@mitsuruog) photocredit http://www.ashinari.com/2013/09/06-381684.php
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. JAX-RSの場合 ・画面構築方式は次世代型。画面はフロント側で生成。 ・JAX-RSはREST仕様に則ったWebAPIが容易に作成可能。 例）サーバ側REST実装例 ルーティング、JSONシリアライズが直感的 @RequestScoped @Path("hoge") public class HogeResource{ @GET @Path("product") @Produces(MediaType.APPLICATION_JSON) public Product getProduct() { Product product = new Product(); product.setId(1); product.setName("Mattress"); product.setDescription("Queen size mattress"); product.setPrice(500); return product; } } 呼び出すURL http://localhost:8080/web_root/webresources/hoge/product
- 17. JAX-RSの場合 ・サーバとのREST API呼び出しを隠蔽するようなJavascriptMV*系F/Wと相性がよい。 (個人的にはBackbone.js、Anguler.js推奨) フロント側実装 (Backbone.js) Java側の実装(URLは「hoge/product」) @RequestScoped varModel = Backbone.Model.extend({ @Path("hoge") url: 'webresources/hoge/product' public class HogeResource { }); @GET var View = Backbone.View.extend({ @Path("product") @Produces(MediaType.APPLICATION_JSON) initialize: function() { public Product getProduct() { this.model = new Model(); Product product = new Product(); this.model.fetch(); this.render(); //画面の再構築 //省略 }, render: function(){ return product; } //省略 } } }); fetch()呼び出し時にGETリクエストを投げる //Viewの初期化 受信後、F/W側で勝手にModelのデータを更新する new View(); (Backbone.sync)
- 18.
- 19. JSF(2.0+)の場合 ・画面構築方式は基本的に従来型。 ・画面構築はサーバ側。Ajax通信時もサーバ側で画面構築する。 ・Ajaxでの画面部分構築は<f:ajax>を使用すること。 例）Ajax入力チェック「 JSF側」 <h:form id="form"> <h:inputTextid="name" value="#{user.name}" validator="#{user.validateName}"> <f:ajax execute="name" render="nameError" event="blur" /> </h:inputText> <h:message for="name" id="nameError" style="color: red"/> </h:form> サーバ側のロジック <f:ajax>でJavascriptを記述することなくAjax呼び出しが可能
- 20. JSF(2.0+)の場合 ・jQueryなどから画面部分更新したいケースは、JSFライブラリのAjax通信機能を使用 すること。 ⇒画面構築部分はJSFの影響力が強すぎるため、テンプレートとAjax部分は割り 切って任せたほうが良い。(後述) jQueryからフックする例） $(document).on('click', '#form:validate', function(e){ jsf.ajax.request(e.target, e, { execute: 'form:name', render: 'form:nameError' 正直、書き方が気持ち悪いw }); e.preventDefault(); そもそも、無理にフックする必要ない。 }); そうなるようであれば設計を見直した方がいいかも。
- 21.
- 22. JSF(2.0+)の場合(その他留意事項) ・（注意）JSFのAjax通信のレスポンスはXML形式で、かつ独自色が強い。 例）先ほどの入力チェック時に返ってきたレスポンス <?xml version='1.0' encoding='UTF-8'?> <partial-responseid="j_id1"> <changes> 部分的なHTMLが返ってくる。 <update id="form:nameError"> <![CDATA[<span id="form:nameError" style="color: red">必須入力です </span>]]> </update> <update id="j_id1:javax.faces.ViewState:0"> <![CDATA[8183146577291182963:-4484956516055255891]]> </update> </changes> </partial-response> レスポンスを受けて、自前で何かしようとか思わないほうがいい。
- 23.
- 24.
- 25.
- 26. まとめ(JSF2.0+) ・フロントエンドとの役割分担を見極めれば、非常に優秀はWebフレームワーク。 ・JSFのテンプレートとAjax通信機能をフルで使う前提で設計するべき。 ・むしろフロント側の役割は多く持たせるべきではない。 ・JavascriptMV*系F/Wとの組み合わせるべきではない。 長所 ・Javaエンジニアのみで、ある程度リッチな Webシステムを安全に構築可能。 ・JSFの<f:ajax>タグを使っている範囲であれば、 Javascriptを意識する必要はない。 ・テンプレート、UIコンポーネント化機能が優秀で、 UIの再利用性が高くなる。 短所 ・リッチなUIには向かない。 ・HTML/XMLベースのやり取りが主流であるため、モバイル環境には適していない場合がある。 ・安易にAjaxの部分更新ができるため、更新する範囲のコントロールに注意が必要。 ・フロントエンジニアにアンチファンが多い。
- 27. ご静聴ありがとうございました！ 2013/11/09 JJUG CCC HTML5jエンタープライズ部 小川充(@mitsuruog) photocredit http://www.ashinari.com/2007/05/07-002031.php