PlayFramework完整实现一个APP（五）

程序员文章站 2022-04-07 15:20:52

...

程序以及基本可用了，需要继续完善页面

1.创建页面模板

创建文件 app/views/tags/display.html

*{ Display a post in one of these modes: 'full', 'home' or 'teaser' }*

<div class="post ${_as == 'teaser' ? 'teaser' : ''}">
<h2 class="post-title">
<a href="#">${_post.title}</a>
</h2>
<div class="post-metadata">
<span class="post-author">by ${_post.author.fullname}</span>,
<span class="post-date">${_post.postedAt.format('dd MMM yy')}</span>
#{if _as != 'full'}
<span class="post-comments">
| ${_post.comments.size() ?: 'no'}
comment${_post.comments.size().pluralize()}
#{if _post.comments}
, latest by ${_post.comments[0].author}
#{/if}
</span>
#{/if}
</div>
#{if _as != 'teaser'}
<div class="post-content">
<div class="about">Detail: </div>
${_post.content.nl2br()}
</div>
#{/if}
</div>

#{if _as == 'full'}
<div class="comments">
<h3>
${_post.comments.size() ?: 'no'}
comment${_post.comments.size().pluralize()}
</h3>

#{list items:_post.comments, as:'comment'}
<div class="comment">
<div class="comment-metadata">
<span class="comment-author">by ${comment.author},</span>
<span class="comment-date">
${comment.postedAt.format('dd MMM yy')}
</span>
</div>
<div class="comment-content">
<div class="about">Detail: </div>
${comment.content.escape().nl2br()}
</div>
</div>
#{/list}

</div>
#{/if}

修改index.html

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

#{if frontPost}

#{display post:frontPost, as:'home' /}

#{if olderPosts.size()}

<div class="older-posts">
<h3>Older posts <span class="from">from this blog</span></h3>

#{list items:olderPosts, as:'oldPost'}
#{display post:oldPost, as:'teaser' /}
#{/list}
</div>

#{/if}

#{/if}

#{else}
<div class="empty">
There is currently nothing to read here.
</div>
#{/else}

2.修改Layout　　views\main.html

<!DOCTYPE html>

<html>
<head>
<title>#{get 'title' /}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/CSS" media="screen" href="@{'/public/stylesheets/main.css'}">
<link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
</head>
<body>
<div id="header">
<div id="logo">
yabe.
</div>
<ul id="tools">
<li>
<a href="#">Log in to write something</a>
</li>
</ul>
<div id="title">
<span class="about">About this blog</span>
<h1><a href="#">${blogTitle}</a></h1>
<h2>${blogBaseline}</h2>
</div>
</div>

<div id="main">
#{doLayout /}
</div>

<p id="footer">
Yabe is a (not that) powerful blog engine built with the
<a href="http://www.playframework.org">Play framework</a>
as a tutorial application.
</p>

</body>
</html>

3. Application.java 中添加方法，在页面上添加元素

@Before
static void addDefaults() {
renderArgs.put("blogTitle", Play.configuration.getPRoperty("blog.title"));
renderArgs.put("blogBaseline", Play.configuration.getProperty("blog.baseline"));
}

添加渲染 blog.title blog.baseline

4.修改配置文件 conf\application.conf

# Blog engine configuration
# ~~~~~
blog.title=Yet another blog
blog.baseline=We won't write about anything

5.添加页面样式

CSS: http://play-framework.herokuapp.com/zh/files/main.css

添加到 /public/stylesheets/main.css

运行效果：

PlayFramework完整实现一个APP（五）

以上就是PlayFramework完整实现一个APP（五）的内容，更多相关内容请关注PHP中文网（www.php.cn）！

PlayFramework完整实现一个APP（五）

Android 启动另一个App/apk中的Activity实现代码

python实现对一个完整url进行分割的方法

Java实现一个顺序表的完整代码

实现一个完整的Node.js RESTful API的示例

入门级带你实现一个安卓智能家居APP

利用Python函数实现一个万历表完整示例

iOS开发之常用资讯类App的分类展示与编辑的完整案例实现(Swift版)

从一个点子到一个社区APP，是如何通过.NET实现的？——“文林物业系统”APP介绍及采访记录

Android 启动另一个App/apk中的Activity实现代码

[Android App]IFCTT，即：If Copy Then That，一个基于IFTTT的"This"实现