运行play
E:\technology-hqh\proj\play-framework>play
创建新项目
E:\technology-hqh\proj\play-framework>play new tasks
~ What is the application name? [tasks] Tasks
启动play
E:\technology-hqh\proj\play-framework>play run tasks
转换为eclipse工程项目
E:\technology-hqh\proj\play-framework>play eclipsify tasks
引入到Eclipse中,开始开发
=============================================================================
示例一、
修改tasks\app\views\Application\index.html
删除#{welcome /},改为"Hello World"
#{extends 'main.html' /}
#{set title:'Home' /}
Hello World
刷新页面
=============================================================================
示例二、
修改tasks\app\controllers\Application.java
package controllers;
import play.*;
import play.mvc.*;
import java.util.*;
import models.*;
public class Application extends Controller {
public static void index() {
String name = "play! frame work";
render(name);
}
}
修改tasks\app\views\Application\index.html
#{extends 'main.html' /}
#{set title:'Home' /}
Hello ${name}
刷新页面
=============================================================================
示例三、
创建model
package models;
import javax.persistence.Entity;
import play.db.jpa.Model;
@Entity
public class Task extends Model {
public String title;
public boolean done;
public Task(String title) {
this.title = title;
}
}
修改tasks\app\views\Application\index.html
#{extends 'main.html' /}
#{set title:'Home' /}
#{ifnot tasks}
<p>
No tasks.
</p>
#{/ifnot}
<ul>
#{list items:tasks,as:'task'}
<li>
<input type="checkbox" id="${task.id}" ${task.done ? 'checked' : ''}>
${task.title}
</li>
#{/list}
</ul>
设置database
# Database configuration
# ~~~~~
# Enable a database engine if needed.
#
# To quickly set up a development database, use either:
# - mem : for a transient in memory database (H2 in memory)
# - fs : for a simple file written database (H2 file stored)
db=mem
刷新页面
使用jQuery创建task
#{extends 'main.html' /}
#{set title:'Home' /}
#{ifnot tasks}
<p>
No tasks.
</p>
#{/ifnot}
<ul>
#{list items:tasks,as:'task'}
<li>
<input type="checkbox" id="${task.id}" ${task.done ? 'checked' : ''}>
${task.title}
</li>
#{/list}
</ul>
<p>
<a id="createTask" href="#">Create a new task</a>
</p>
<script type="text/javascript" charset="utf-8">
//Create a task
$("#createTask").click(function(){
$.post("@{createTask()}", {title: prompt("Task title ?")});
});
</script>
刷新页面
创建action
package controllers;
import play.*;
import play.mvc.*;
import java.util.*;
import models.*;
public class Application extends Controller {
public static void index() {
List tasks = Task.find("order by id desc").fetch();
render(tasks);
}
//创建新的任务
public static void createTask(String title) {
Task task = new Task(title).save();
renderJSON(task);
}
}
刷新页面,点击链接创建任务
刷新页面
进一步优化,使用jQuery的callback回调功能,在添加task后自动显示添加的内容
<script type="text/javascript" charset="utf-8">
//Create a task
$("#createTask").click(function(){
$.post("@{createTask()}", {title: prompt("Task title ?")}, function(task){
$("ul").prepend(
'<li><input type="checkbox" id="'+task.id+'"/>'+task.title+'</li>'
);
},"json");
});
</script>
不用刷新页面即可显示新的内容
点击任务就实现与数据库的同步更新操作
继续使用jQuery开发
<script type="text/javascript" charset="utf-8">
//Create a task
$("#createTask").click(function(){
$.post("@{createTask()}", {title: prompt("Task title ?")}, function(task){
$("ul").prepend(
'<li><input type="checkbox" id="'+task.id+'"/>'+task.title+'</li>'
);
},"json");
});
//Change status
$(":checkbox").live("click",function(){
$.post("@{changeStatus()}", {id: $(this).attr("id"), done: $(this).val()})
})
</script>
Controller中增加新的action:changeStatus()
package controllers;
import play.*;
import play.mvc.*;
import java.util.*;
import models.*;
public class Application extends Controller {
public static void index() {
List tasks = Task.find("order by id desc").fetch();
render(tasks);
}
//创建新的任务
public static void createTask(String title) {
Task task = new Task(title).save();
renderJSON(task);
}
//页面点击checkbox框的动作,触发一个ajax请求
public static void changeStatus(Long id, boolean done) {
Task task = Task.findById(id);
task.done = done;
//后台更新数据库
task.save();
//以json数据格式返回新对象
renderJSON(task);
}
}
=================================================================================
示例四、允许CRUD模块
修改tasks\conf\dependencies.yml
为了能使用CRUD模块,需要在/conf/dependencies.yml文件的require后添加一行代码
# Application dependencies
require:
- play -> crud
接下来,在cmd命令行中切换到项目根目录下
E:\technology-hqh\proj\play-framework\tasks>play dependencies
重新构建eclipse项目,以便eclipse能够将新的模块导入到workspace中
E:\technology-hqh\proj\play-framework\tasks>play eclipsify
刷新eclipse工程中的项目
最后,修改tasks\conf\routes,增加路由
GET /admin Tasks.list
编写CRUD的子类,目的在于继承CRUD中的众多方法,比如list()
package controllers;
public class Tasks extends CRUD {
}
访问http://localhost:9000/admin,将自动导航至Task对象的编辑页面
在Task中添加toString(),则可以定制页面显示Task对象的方式
package models;
import javax.persistence.Entity;
import play.db.jpa.Model;
@Entity
public class Task extends Model {
public String title;
public boolean done;
public Task(String title) {
this.title = title;
}
@Override
public String toString() {
return title;
}
}
刷新页面
将按title显示Task对象
点击一个task进入编辑页面,可以对其进行更新操作
更新task对象
点击save,自动保存并返回首页
使用validation对更新时的数据进行校验
修改Task对象,使用@Required对属性进行标注
package models;
import javax.persistence.Entity;
import play.data.validation.Required;
import play.db.jpa.Model;
@Entity
public class Task extends Model {
//title不能为空
@Required
public String title;
public boolean done;
public Task(String title) {
this.title = title;
}
@Override
public String toString() {
return title;
}
}
再次编辑Task 1 对象,删除title,点击save会以红色字体显示Required!
填入title,则正常保存!