(三)play之快速演示篇

 运行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，则正常保存！