(三)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"

Html代码  

1. #{extends 'main.html' /}  
2. #{set title:'Home' /}  
3.   
4. Hello World  

 刷新页面

 

============================================================================= 

示例二、

修改tasks\app\controllers\Application.java

Java代码  

1. package controllers;  
2.   
3. import play.*;  
4. import play.mvc.*;  
5.   
6. import java.util.*;  
7.   
8. import models.*;  
9.   
10. public class Application extends Controller {  
11.   
12.     public static void index() {  
13.         String name = "play! frame work";  
14.         render(name);  
15.     }  
16.   
17. }  

 

 修改tasks\app\views\Application\index.html

Html代码  

1. #{extends 'main.html' /}  
2. #{set title:'Home' /}  
3.   
4. Hello ${name}  

 刷新页面

 

 =============================================================================

示例三、

创建model

Java代码  

1. package models;  
2.   
3. import javax.persistence.Entity;  
4.   
5. import play.db.jpa.Model;  
6.   
7. @Entity  
8. public class Task extends Model {  
9.     public String title;  
10.     public boolean done;  
11.       
12.     public Task(String title) {  
13.         this.title = title;  
14.     }  
15.       
16.       
17. }  

 修改tasks\app\views\Application\index.html

Html代码  

1. #{extends 'main.html' /}  
2. #{set title:'Home' /}  
3.   
4. #{ifnot tasks}  
5.     <p>  
6.         No tasks.  
7.     </p>  
8. #{/ifnot}  
9.   
10. <ul>  
11.     #{list items:tasks,as:'task'}  
12.         <li>  
13.             <input type="checkbox" id="${task.id}" ${task.done ? 'checked' : ''}>  
14.             ${task.title}         
15.         </li>  
16.     #{/list}  
17. </ul>  

 设置database

Html代码  

1. # Database configuration  
2. # ~~~~~   
3. # Enable a database engine if needed.  
4. #  
5. # To quickly set up a development database, use either:  
6. #   - mem : for a transient in memory database (H2 in memory)  
7. #   - fs  : for a simple file written database (H2 file stored)  
8. db=mem  

 

刷新页面

 使用jQuery创建task

Html代码  

1. #{extends 'main.html' /}  
2. #{set title:'Home' /}  
3.   
4. #{ifnot tasks}  
5.     <p>  
6.         No tasks.  
7.     </p>  
8. #{/ifnot}  
9.   
10. <ul>  
11.     #{list items:tasks,as:'task'}  
12.         <li>  
13.             <input type="checkbox" id="${task.id}" ${task.done ? 'checked' : ''}>  
14.             ${task.title}         
15.         </li>  
16.     #{/list}  
17. </ul>  
18.   
19.   
20. <p>  
21.     <a id="createTask" href="#">Create a new task</a>  
22. </p>  
23.   
24. <script type="text/javascript" charset="utf-8">  
25.  //Create a task  
26.  $("#createTask").click(function(){  
27.     $.post("@{createTask()}", {title: prompt("Task title ?")});  
28.  });  
29. </script>  

 刷新页面

 创建action

 

Java代码  

1. package controllers;  
2.   
3. import play.*;  
4. import play.mvc.*;  
5.   
6. import java.util.*;  
7.   
8. import models.*;  
9.   
10. public class Application extends Controller {  
11.   
12.     public static void index() {  
13.         List tasks = Task.find("order by id desc").fetch();  
14.         render(tasks);  
15.     }  
16.       
17.     //创建新的任务  
18.     public static void createTask(String title) {  
19.         Task task = new Task(title).save();  
20.         renderJSON(task);  
21.     }  
22.   
23. }  

 刷新页面，点击链接创建任务

 刷新页面

 进一步优化，使用jQuery的callback回调功能，在添加task后自动显示添加的内容

Html代码  

1. <script type="text/javascript" charset="utf-8">  
2.     //Create a task  
3.     $("#createTask").click(function(){  
4.         $.post("@{createTask()}", {title: prompt("Task title ?")}, function(task){  
5.             $("ul").prepend(  
6.                 '<li><input type="checkbox" id="'+task.id+'"/>'+task.title+'</li>'  
7.             );  
8.         },"json");  
9.     });  
10. </script>  

 

不用刷新页面即可显示新的内容

 

点击任务就实现与数据库的同步更新操作

继续使用jQuery开发

Html代码  

1. <script type="text/javascript" charset="utf-8">  
2.     //Create a task  
3.     $("#createTask").click(function(){  
4.         $.post("@{createTask()}", {title: prompt("Task title ?")}, function(task){  
5.             $("ul").prepend(  
6.                 '<li><input type="checkbox" id="'+task.id+'"/>'+task.title+'</li>'  
7.             );  
8.         },"json");  
9.     });  
10.       
11.     //Change status  
12.     $(":checkbox").live("click",function(){  
13.         $.post("@{changeStatus()}", {id: $(this).attr("id"), done: $(this).val()})  
14.     })  
15. </script>  

 Controller中增加新的action：changeStatus()

Java代码  

1. package controllers;  
2.   
3. import play.*;  
4. import play.mvc.*;  
5.   
6. import java.util.*;  
7.   
8. import models.*;  
9.   
10. public class Application extends Controller {  
11.   
12.     public static void index() {  
13.         List tasks = Task.find("order by id desc").fetch();  
14.         render(tasks);  
15.     }  
16.       
17.     //创建新的任务  
18.     public static void createTask(String title) {  
19.         Task task = new Task(title).save();  
20.         renderJSON(task);  
21.     }  
22.       
23.    //页面点击checkbox框的动作，触发一个ajax请求  
24.    public static void changeStatus(Long id, boolean done) {  
25.        Task task = Task.findById(id);  
26.        task.done = done;  
27.        //后台更新数据库   
28.        task.save();  
29.        //以json数据格式返回新对象  
30.        renderJSON(task);  
31.    }  
32. }  

 

=================================================================================

示例四、

允许CRUD模块

修改tasks\conf\dependencies.yml

为了能使用CRUD模块，需要在/conf/dependencies.yml文件的require后添加一行代码

Html代码  

1. # Application dependencies  
2.   
3. require:  
4.     - 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，增加路由

Html代码  

1. GET     /admin          Tasks.list  

 

编写CRUD的子类,目的在于继承CRUD中的众多方法，比如list()

Java代码  

1. package controllers;  
2.   
3. public class Tasks extends CRUD {  
4.   
5. }  

 访问http://localhost:9000/admin，将自动导航至Task对象的编辑页面

 

在Task中添加toString()，则可以定制页面显示Task对象的方式

Java代码  

1. package models;  
2.   
3. import javax.persistence.Entity;  
4.   
5. import play.db.jpa.Model;  
6.   
7. @Entity  
8. public class Task extends Model {  
9.     public String title;  
10.     public boolean done;  
11.       
12.     public Task(String title) {  
13.         this.title = title;  
14.     }  
15.   
16.     @Override  
17.     public String toString() {  
18.         return title;  
19.     }  
20.           
21. }  

 刷新页面

将按title显示Task对象

 

点击一个task进入编辑页面，可以对其进行更新操作

 

更新task对象

 

点击save，自动保存并返回首页

 

使用validation对更新时的数据进行校验

修改Task对象，使用@Required对属性进行标注

Java代码  

1. package models;  
2.   
3. import javax.persistence.Entity;  
4. import play.data.validation.Required;  
5. import play.db.jpa.Model;  
6.   
7. @Entity  
8. public class Task extends Model {  
9.       
10.     //title不能为空  
11.     @Required  
12.     public String title;  
13.     public boolean done;  
14.       
15.     public Task(String title) {  
16.         this.title = title;  
17.     }  
18.   
19.     @Override  
20.     public String toString() {  
21.         return title;  
22.     }  
23.           
24. }  

 再次编辑Task 1 对象，删除title，点击save会以红色字体显示Required！

填入title，则正常保存！