PlayFrameworkで会員制ギャラリーサイトを作る習作：2ページ目以降をAjaxで取得する

それでだ、

Play Frameworkで会員制ギャラリーサイトを作っている途中。

前回のところでデータを取ってきて表示するところまで行きました。

app/views/ajax/listAjax.scala.html今回は画面をスクロールしたら2ページ目、3ページ目が読み込まれるところの処理を作っていきます。

なお、今回からTypesafe Activatorでアプリケーションを起動させるのはやめました。だって、play cleanがされなくて改修前の実装コードが残ってしまうのだもの・・・・。
すなおに play debug runするようにしました。

さて、2ページ目以降を取得する処理です。

https://github.com/YoshiteruIwasaki/PlayFrameworkRecruitConsole/commit/5756fc962c1ef328e3020beb0b92d5e20c3a3b51

のコミットが全てなのですが、処理の流れを見て行きましょう。

まずはCntroller

app/controllers/ajax/ListAjaxController.java
にしました。なおパッケージ名はcontrollers/ajax/***とかcontrollers/api/*** とかのように、共通するレスポンス形式とかでまとめておいたほうが後々フィルタをかけて処理させるときとかに楽になります。

1Action1Controllerファイルくらいにしておくと大規模開発にも耐えられるようになります。（コンフリクトが起きにくくなるという意味で）

１Controllerに入れていいのはせいぜいフォームの入力・確認・完了処理くらいまでかと思います。あとは分けましょう。
デメリットとしてはコンパイルが遅くなります。
ちなみにajax/ListAjaxController.javaの名前の付け方はイケてないです。

中身の処理は引数をページ番号としてまあ結果一覧を取得して返すだけの処理です。

view plainprint?

1.    
2. public static Result index(int page) {  
3.    List<SiteBean> resultList = SiteBeanService.getSiteBeanResultList(page);  
4.    return resultList.size() == 0 ? ok("") : ok(views.html.ajax.listAjax  
5.      .render(page, resultList));  
6.   }  

 
public static Result index(int page) {
   List<SiteBean> resultList = SiteBeanService.getSiteBeanResultList(page);
   return resultList.size() == 0 ? ok("") : ok(views.html.ajax.listAjax
     .render(page, resultList));
  }

テンプレートでは面倒なのでhtmlを返しています。
JSONで返して、Javascript側でゴニョゴニョしてもいいかと思います。

conf/routes
にルーティングの設定を追加しておきましょう。

view plainprint?

1.    
2. GET     /listAjax/:page                           controllers.ajax.ListAjaxController.index(page:Integer)  

 
GET     /listAjax/:page                           controllers.ajax.ListAjaxController.index(page:Integer)

次にテンプレートから呼び出す方法

さて、最初の画面を表示して2ページ目以降を取得する処理ですが、
jquery_bottom
を利用してアクションを呼び出すようにします。

ページのフッターに次に呼ぶページ番号と更に読み込むページがあるかのフラグ用の値をセットしておきます。

view plainprint?

1.    
2. <input type="hidden" id="hasNext" value="0" />  
3. <input type="hidden" id="page" value="1" />  

 
<input type="hidden" id="hasNext" value="0" />
<input type="hidden" id="page" value="1" />

あとは呼び出す処理が呼ばれた際の中身を書いていきます。

view plainprint?

1. $(window).on('bottom', function() {  
2.  var obj = $(this);  
3.  // since this ajax call might take a while  
4.  if (!obj.data("loading") && $("#hasNext").val() == 0) {  
5.   obj.data("loading", true);  
6.   $("#loading").show();  
7.   $.ajax({  
8.    url : "/listAjax/" + $("#page").val(),  
9.    dataType : "html",  
10.    success : function(data) {  
11.     if (data == "") {  
12.      $("#hasNext").val(1);  
13.     } else {  
14.      $("#listContainer").append(data);  
15.     }  
16.     var page = parseInt( $("#page").val() );  
17.     $("#page").val(page + 1);  
18.     // remove the loading text  
19.     $("#loading").hide();  
20.     // now that the ajax call is done, we can re-enable this  
21.     obj.data("loading", false);  
22.     $("#list"+page).preloader();  
23.    },  
24.   
25.    error : function(data) {  
26.     console.log(data);  
27.    }  
28.   });  
29.  }  
30. });  

 
 $(window).on('bottom', function() {
  var obj = $(this);
  // since this ajax call might take a while
  if (!obj.data("loading") && $("#hasNext").val() == 0) {
   obj.data("loading", true);
   $("#loading").show();
   $.ajax({
    url : "/listAjax/" + $("#page").val(),
    dataType : "html",
    success : function(data) {
     if (data == "") {
      $("#hasNext").val(1);
     } else {
      $("#listContainer").append(data);
     }
     var page = parseInt( $("#page").val() );
     $("#page").val(page + 1);
     // remove the loading text
     $("#loading").hide();
     // now that the ajax call is done, we can re-enable this
     obj.data("loading", false);
     $("#list"+page).preloader();
    },

    error : function(data) {
     console.log(data);
    }
   });
  }
 });

1. 次に呼び出すページがあるようであればページ番号を渡してAjaxリクエスト
2. レスポンスが空だったら処理終わりのフラグを立てて終了
3. レスポンスがあったら帰ってきたレスポンスのhtmlをappendして表示
4. ページ番号を1追加する
5. ローディングを隠す
6. 画像をかっこ良く表示させるpreloaderを呼ぶ

みたいなことをやっています。