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

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

运行效果:

..

Play Framework 完整实现一个APP(五)的更多相关文章

  1. Play Framework 完整实现一个APP(十一)

    添加权限控制 1.导入Secure module,该模块提供了一个controllers.Secure控制器. /conf/application.conf # Import the secure m ...

  2. Play Framework 完整实现一个APP(二)

    1.开发DataModel 在app\moders 下新建User.java package models; import java.util.*; import javax.persistence. ...

  3. Play Framework 完整实现一个APP(十四)

    添加测试 ApplicationTest.java @Test public void testAdminSecurity() { Response response = GET("/adm ...

  4. Play Framework 完整实现一个APP(十三)

    添加用户编辑区 1.修改Admin.index() public static void index() { List<Post> posts = Post.find("auth ...

  5. Play Framework 完整实现一个APP(十二)

    1.定制CRUD管理页面 > play crud:ov --layout 替换生成文件内容 app/views/CRUD/layout.html #{extends 'admin.html' / ...

  6. Play Framework 完整实现一个APP(十)

    1.定制Comment列表 新增加Comment list页面,执行命令行 > play crud:ov --template Comments/list 会生成/app/views/Comme ...

  7. Play Framework 完整实现一个APP(九)

    添加增删改查操作 1.开启CRUD Module 在/conf/application.conf 中添加 # Import the crud module module.crud=${play.pat ...

  8. Play Framework 完整实现一个APP(八)

    创建Tag标签 1.创建Model @Entity @Table(name = "blog_tag") public class Tag extends Model impleme ...

  9. Play Framework 完整实现一个APP(六)

    需要为Blog添加 查看和发表评论的功能 1.创建查看功能 Application.java中添加 show() 方法 public static void show(Long id) { Post ...

随机推荐

  1. HTML5 学习笔记(一)——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  2. java提高篇之理解java的三大特性——多态

    面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承 ...

  3. scroll事件实现监控滚动条并分页显示示例(zepto.js)

    scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...

  4. 转自:C#中TextBox水印提示的简单实现

    本文转自: 原作者: js2854 出处: http://js2854.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  5. 转!!URL 传+号到后台变空格问题解决方案

    网上很多解决方法,但是前提是get请求(或者是post请求后面追加的参数),让我试了很久(我是post),没成功!引以为戒!! 今天在调试客户端向服务器传递参数时,参数中的“+”全部变成了空格,原因是 ...

  6. sql整型字段模糊查询

    select count(*) cnt from vhuiy where CAST(id as text) like'%12%'--id为int类型 更详细的链接:http://www.studyof ...

  7. android 数据库操作详解

    请看郭大神的八篇专栏,包含sql语句  android封装的databasehelper 和郭大神自己的LitePal  三种使用详解 http://blog.csdn.net/column/deta ...

  8. UIViewController

    UIViewController 在MVC模式中就是C.关于MVC,可以看 UIViewController 主要具有什么功能呢? View Management When you define a ...

  9. hql 关联查询

    HQL 带的连接语句只能是实体与 该实体的属性 进行连接 其意义就是为了优化(通过延迟加载查询关联的属性)需要进行配置 from A left join A.B where (b.flag is nu ...

  10. lintcode:Wiggle Sort

    Wiggle Sort Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= ...