运行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);
}
}
