1

完全な ajax 駆動型の Web アプリケーションを作成することを考えました。送信/ページ全体のリロードは絶対にあってはなりません。

ログインは、Bean で user/pw をチェックし、適切なリダイレクトを設定することによって行われます。

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<style>
.ui-widget {
font-size: 12px !important;
}
</style>

<title>myApp</title>
</h:head>
<h:body>
<h:form id="mainform">

    <ui:include src="#{navigationBean.currentPage}" />

</h:form>
</h:body>
</html>

navigationBean には常に、ユーザー セッション (SessionScoped Managed Bean) の現在有効なページが含まれています。何か変更があれば、対応する ajax 対応コンポーネントを介して「メインフォーム」を更新するか、f:ajax を使用します。

今のところ、すべてが期待どおりに機能していますが、何か見逃したことがありますか?

このソリューションを使用することによる大きな欠点はありますか? 何に気をつければいいですか？

ご意見ありがとうございます。

4

1 に答える 1

0

history.js angular.jsやbackbone.jsなど、すでにその方向に進んでいる javascript ソリューションの使用を検討することをお勧めします。

ソリューションについては、次のことを考慮する必要があります。

--> 1 と 4 が最も問題のある部分だと思います。

1: URL

  • URL はどうなりますか? これは、ブックマークとブラウザの戻るボタンを考慮すると重要です。window.location.hashしたがって、URLを # 値で書き換える必要があります (jQuery は で簡単に実行できます)。
  • たとえばyour-domain.com/app、すべてのサブページを保持するのではなく、URL を次のように変更します。your-domain.com/app#sub-page-1
  • ページをロードするときに # 値を解析し、その URL に関連付けられたコンテンツを直接ロードできます。

これは、優れたユーザー エクスペリエンスにとって重要です。ページをリロードしてホームページに戻るのは最悪です! それなしでリンクを共有することは不可能です。

2: データとテンプレート

あなたの場合<ui:include src="#{navigationBean.currentPage}" />、メインページに別のjsfページをロードします。したがって、ajax を介してテンプレート + データをロードしています。

もう 1 つの方法として、サーバーからデータをロードし、JavaScript を使用してデータとテンプレートを組み合わせる方法があります。このテクニックは、現在非常に人気が高まっています。(angular.js のような JavaScript フレームワークはそれを行います。) これには欠点もあります。なぜなら、ページは非常に JavaScript を多用し、それで JSF を放棄することになるからです。

3: JavaScript と CSS の読み込み

追加の CSS または JavaScript ファイルを含むサブページがある場合は、それらを ajax 経由でロードできるかどうかを確認する必要があります (通常は可能ですが、いくつかの作業が必要です)。そうでない場合は、ページの最初のリクエストですべての関連ファイルをロードする必要があり、最初のロードが遅くなる可能性があります。

4: 現在のページを Bean に保存する1. 現在のページを保存する Bean (SessionScoped?) では、これにはいくつかの欠点があります。

  • サブページで URL を入力してホームページにアクセスすると、古いサブページが読み込まれます。
  • これにより、サイトを 2 つ以上のタブで閲覧している場合に競合が発生します。

結論

これを書いた後、現在のページを Bean に保存するのは得策ではないと思います。衝突の原因になりますので。現在のページを URL に「保存」することをお勧めします。

このようなもの：

  <div id="nav">
          <a href="javascript:void(0)" id="sub-page-1">sub-page-1</a>
  </div>
  <div id="main"></div>

JavaScript と jQuery は次のようになります。

     $(function() {
          $('#sub-page-1').click(function() {

                  $.ajax({
                         ...
                         url: '/sub-page-1' // could be jsf page
                         success: function (data) {
                               // set the hash of this page
                               window.location.hash = 'sub-page-1';
                               // set the content on the main div
                               $('#main').html(data);
                         }
                  });

          }) 

     });
于 2013-10-20T11:19:34.193 に答える