ソースコードから理解する技術-UnderSourceCode

手を動かす(プログラムを組む)ことで技術を理解するブログ

Play framework(2) - ASP.NET MVC ライクな画面を作る(笑)

Play frameworkを学習するため、簡単なサンプルアプリを作ってみました。
が、元々.Net系のため、MVCパターンだとASP.NET MVC が頭から離れません(笑)。

なので、タイトルどおりのことをしてみました。
ASP.NET MVC のテンプレートの画面デザインを真似ています。

まず、Play frameworkで作った画面です。
f:id:UnderSourceCode:20130504101658j:plain

この画面は
・全画面共通のテンプレートであるmain.html
・画面固有のファイル(今回はindex.html)
スタイルシートであるmain.css
の3ファイルで構成しています。

では、各ファイルのソースです。

◆全画面共通のテンプレート
まずはmain.htmlです。
Play frameworkでは、アプリのルートフォルダ\app\viewsフォルダ内にあります。

..\app\views\main.html


<!DOCTYPE html>

<html>
<head>
<title>#{get 'title' /}</title>
<meta charset="${_response_encoding}">
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}">
#{get 'moreStyles' /}
<link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
<script src="@{'/public/javascripts/jquery-1.5.2.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{get 'moreScripts' /}
</head>
<body>
<div id="toplinks">
[<a href="@{Application.index()}">Home</a>]
[<a href="@{Secure.logout()}">Log out</a>]
</div>
<div id="pageTitle">
<h1>${pageTitle}</h1>
</div>
<div id="main">
#{ifErrors}
<p id="error">
${errors[0]}
</p>
#{/ifErrors}
#{doLayout /}
</div>
</body>
</html>


<h1>${pageTitle}</h1>でタイトルの表示箇所を、${errors[0]}ではエラーメッセージの表示箇所を
それぞれ定義しています。

#{doLayout /}は、各画面特有のページを表示する箇所となります。

◆画面特有のページ
次に画面特有のページのソースです。
この画面はアプリケーションの初期画面であるため
Play frameworkでは アプリのルートフォルダ\views\Applicationフォルダになります。

..\views\Application\index.html


#{extends 'main.html' /}
#{set title:'Home' /}

[<a href="@{MemoController.create()}">Create</a>]
<br/>
<br/>
#{if memos.size() > 0}
#{list items:memos, as:'memo'}
<div><a href="@{MemoController.detail(memo.id)}">${memo.title}</a></div>
#{/list}
#{/if}


#{list items:memos, as:'memo'} でコントローラから渡されたデータをループして
一覧に表示しています。

スタイルシート
最後に、スタイルシートです。
Play frameworkでは アプリのルートフォルダ\public\stylesheetsフォルダにあります。

..\public\stylesheets\main.css


/** Main layout **/

html{
width: 90%;
margin-left: auto;
margin-right: auto;
background: lightgreen;
font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
}

#pageTitle{
color: #fff;
}

#main
{
padding: 15px 30px 15px 30px;
background-color: #fff;
}

#toplinks
{
text-align:right;
}

#error
{
color: #f00;
padding: 15px 30px 15px 30px;
border: solid #f00;
}


ページのタイトルや、エラーメッセージの表示などを、ASP.NET MVC に似せるための
定義を行っています。