ラベル bootstrap の投稿を表示しています。 すべての投稿を表示
ラベル bootstrap の投稿を表示しています。 すべての投稿を表示

2014年2月23日日曜日

PlayFrameworkで会員制ギャラリーサイトを作る習作:EBeanを使ってデータの取得を行う

さて、それではさっそくデータを取得してトップ画面に一覧を表示する機能を作っていきます。

プロジェクトの概要はこちら

今回の機能に関するIssueはこちらになります。
https://github.com/YoshiteruIwasaki/PlayFrameworkRecruitConsole/issues/9

ロジック層

まずはデータを取得していく、MVCで言えばMのあたりから作っていきます。

modules/core/app/services/bases/SiteService.java
を作ります。

データの件数取得、データの一覧取得の条件は
getSiteCriteria
のメソッドにして共通の処理を呼ぶようにしています。

 public static PagingList<Site> getSiteCriteria() {
  return find.where().orderBy().desc("createDate")
    .findPagingList(ApplicationConfigUtils.MAX_PER_PAGE);
 }

 public static List<Site> getSiteResultList(Integer page) {
  PagingList<Site> pagingList = getSiteCriteria();
  Page<Site> currentPage = pagingList.getPage(page);
  return currentPage.getList();
 }

 public static Integer getSiteResultCount(Integer page) {
  PagingList<Site> pagingList = getSiteCriteria();
  return pagingList.getTotalPageCount();
 }


なかなかPlayFrameworkでページャーを使ってるサンプルがないのですが、このようにして呼ぶみたいです。

つぎにSiteServiceをextendsしたクラス
を作ります。
 
 public static List<SiteBean> getSiteBeanResultList(Integer page) {
  ArrayList<SiteBean> list = new ArrayList<SiteBean>();
  List<Site> resultList = getSiteResultList(page);
  for (Site site : resultList) {
   list.add(setSiteBean(site));
  }
  return list;
 }

SiteServiceはDBに直接操作を行うクラスという位置づけにしていて、
Controller側ではそのラッパーのSiteBeanServiceを呼ぶようにしています。
このクラスではDBからデータを取得する処理をSiteServiceから呼び出して、SiteBeanにセットする処理をしています。

こうすることで今後例えばキャッシュ機構を組み込む、などのようになった場合にDBアクセス層のSiteServiceはそのままで、SiteBeanServiceにキャッシュ機構を組み込めばいいようになります。

今の段階ではSiteBeanはSiteクラスをextendsしていますが、これはEBeanのModelではないため、多分extendsはやめると思います。。

JavaだとこういったModel,Bean系はsetter,getterを使うのが常ですが、Playはpublicにするのが流儀っぽいので、そういう感じにしています。

1ページに表示する件数については
modules/base/app/utils/base/ApplicationConfigUtils.java
に記述しています。こういうのは1つのサービス上統一するケースが多いと思うので、baseモジュールに書いてあります。
 
public static final int MAX_PER_PAGE = 10;

コントローラ層

 app/controllers/Application.java
のコントローラ側では
 
List resultList = SiteBeanService.getSiteBeanResultList(0);

のようにSiteBeanServiceを呼びます。
テンプレート側では
@(message: String, description: String, beanList: List[models.beans.SiteBean])

のようにしてリストを渡します。

 
<div class="container">
<div class="row">
 @if(beanList != null && beanList.size() > 0){
     @for(bean <- beanList){
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">
      <a href="@{bean.url}"><img title="@{bean.title}" src="@{bean.thumbUrl}" alt="@{bean.url}" /></a>
      </div>
    </div>
     }
 }
</div>
</div>

 でSiteBeanの一覧を表示します。
出来上がったのがこんなかんじになっています。


2014年2月18日火曜日

Play FrameworkにBootstrapのSassを組み込む

Play Frameworkの場合、バージョンによって手順がもろもろ異なるので注意が必要です。 

事前準備


まず事前準備としてsassをコンパイルできるように不本意ながらsassをインストールします。
sudo gem install sass sass -v Sass 3.2.14 (Media Mark)

Play Frameworkの設定


さて次にPlayFrameworkにSass組み込みの設定をします。 PlayFramework 2.2.x系の場合です。

  https://github.com/jlitola/play-sass

project/plugins.sbt

resolvers += "Sonatype OSS Releases" at "https://oss.sonatype.org/content/repositories/releases"
addSbtPlugin("net.litola" % "play-sass" % "0.3.0")

build.sbt

import net.litola.SassPlugin
play.Project.playScalaSettings ++ SassPlugin.sassSettings

Play 2.0,2.1系は他にも設定が必要なようです。詳しくは
https://github.com/jlitola/play-sass をご確認下さい。

なお
http://qiita.com/Liberty/items/51dd4c6113ffc52efd3b
も参考にさせていただきました。

Bootstrap Saasの読み込み


 最後にBootstrapのSassを組み込みます。
http://getbootstrap.com/getting-started/#download
からSassのファイルをダウンロードして解答します。
解答するとvendorフォルダが出来上がるので、vendor内のassetsフォルダをPlay Frameworkのassetsフォルダにコピーします。

最終的には
https://github.com/YoshiteruIwasaki/PlayFrameworkRecruitConsole/commit/84150e65946ef30e0840867eccb67cdbeb111bcc
のようになります。





2013年1月8日火曜日

bootstrapをAndroid2.3系で使えるようにするためにはApacheが必要になる | Play Framework2.0 ここんがんばれ!

bootstrap、よく使いますよね。

Play Frameworkではassertかassetsか何かを使ってNettyサーバ経由で画像やJavascriptを返すようになっています。(おそらくそういうことなんだろうと思ってます)

さて、通常のブラウザを使うぶんには何ら問題ないのですが、以下の組み合わせでモーダルダイアログが表示されないなどの現象が発生しました。

Play Framework 2.0.4
bootstrap
Android2.3

なかなかニッチな環境かもしれませんが、Android2.3系はまだバリバリ現役なので、注意が必要です。
http://www.playframework-ja.org/documentation/2.0.2/Assets

Play 2.0 には、公開アセットを提供する組み込みのコントローラが付属しています。デフォルトでは、このコントローラは、キャッシュ機能、ETag、gzip圧縮、JavaScript minify のサポートが提供されます。
とあるので、ここらへんが影響してる可能性がありそうですね。

Apache経由で静的ファイルを返すようにすることで回避できましたが、Play Frameworkはそれ単体だけでは完結できないのに、Tomcat用にwarファイルを作るのもできない(Play Framework1系では対応していたようですが、2系からはプラグインでの対応!?になったようです)のでちょっと残念です。