摘要：自定義編輯區(qū)域在前一章，我們給創(chuàng)建了一個關于面板，并準備了我的文章的部分。從文章列表開始我們僅需要查詢用戶相關的文章并顯示出來。如果發(fā)生錯誤，它會刷新表單，顯示錯誤信息。它表示使用的默認模板。這意味著，如果提交了參數(shù)，將選擇這條路由。

在前一章，我們給yabe創(chuàng)建了一個關于面板，并準備了“我的文章”的部分。每個作者可以在這個部分看到他們發(fā)布過的文章，以及進行編輯或者創(chuàng)建新的文章。

我們可以重用CRUD模塊來實現(xiàn)這部分。但是這里我們打算從頭開始，因為我們需要許多自定義的設置。

我們僅需要查詢用戶相關的文章并顯示出來。這很簡單。從改進Admin.index action開始吧：

public static void index() {
    String user = Security.connected();
    List posts = Post.find("author.email", user).fetch();
    render(posts);
}

并完成yabe/app/views/Admin/index.html:

#{extends "admin.html" /}

Welcome ${user}, you have written ${posts.size() ?: "no"} 
${posts.pluralize("post", "posts")} so far

#{list items:posts, as:"post"}
    

        ${post.title}
    
#{/list}


    + write a new post

看看第一步的成果：

我們將創(chuàng)建一個用于發(fā)布文章的界面。一般對于一個表單，你可以做兩件事：顯示它，處理它提交的結果。讓我們創(chuàng)建Admin.form"和Admin.save`來幫助顯示和處理提交結果。

添加新的路由到yabe/conf/routes:

GET     /admin/new                          Admin.form
POST    /admin/new                          Admin.save

接著給Admin.java控制器添加form()和save()：

public static void form() {
    render();
}

public static void save() {
    // Not implemented yet
}

然后是創(chuàng)建yabe/app/views/Admin/form.html模板：

#{extends "admin.html" /}

Write, a new post

#{form @save()}

    #{ifErrors}
        

            Please correct these errors.
        
    #{/ifErrors}

    

        #{field "title"}
        Post title:
        
        #{error "post.title" /}
        #{/field}
    

    

        #{field "content"}
        Write here:
        ${post?.content}
        #{error "post.content" /}
        #{/field}
    

    

        #{field "tags"}
        Enter some tags:
        
        #{/field}
    

    

        
    

#{/form}

最后修改yabe/app/views/Admin/index.html，給表單添加Write a new post的鏈接：

...

    + write a new post

...

檢查成果：

現(xiàn)在我們來完成處理提交結果的。它將創(chuàng)建一個新的Post對象，轉換標簽列表成真正的Tag列表，并驗證所有成員，進行保存。如果發(fā)生錯誤，它會刷新表單，顯示錯誤信息。

public static void save(String title, String content, String tags) {
    // Create post
    User author = User.find("byEmail", Security.connected()).first();
    Post post = new Post(author, title, content);
    // Set tags list
    for(String tag : tags.split("s+")) {
        if(tag.trim().length() > 0) {
            post.tags.add(Tag.findOrCreateByName(tag));
        }
    }
    // Validate
    validation.valid(post);
    if(validation.hasErrors()) {
        render("@form", post);
    }
    // Save
    post.save();
    index();
}

  
這里我們使用render("@form")作為render("Admin/form.html")的縮寫。它表示使用form action的默認模板。

測試一下！

在發(fā)布文章的地方，我們已經(jīng)寫了不少的HTML表單和Java action代碼。但我們還需要實現(xiàn)編輯現(xiàn)有文章的修改功能。只需改動一下，我們可以重用原來的代碼。

首先我們需要Admin.form可以查詢到一個現(xiàn)有的Post：

public static void form(Long id) {
    if(id != null) {
        Post post = Post.findById(id);
        render(post);
    }
    render();
}

如你所見，我們把查詢功能變成可選的，僅當id參數(shù)不為空，才會去查詢一個現(xiàn)有文章。所以你可以鏈接主頁面的文章列表到編輯表單。修改yabe/app/views/Admin/index.html：

#{extends "admin.html" /}

Welcome ${user}, you have written ${posts.size() ?: "no"} ${posts.pluralize("post", "posts")} so far

#{list items:posts, as:"post"}
    

        ${post.title}
    
#{/list}


    + write a new post

非常簡單，但是有一個問題。如果你查看這些鏈接生成的URL，會看到：

/admin/new?id=3

它能用，但是不是很好。我們可以指定另一個路由。如果指定了id參數(shù)，就用新的路由。

GET     /admin/myPosts/{id}                 Admin.form
GET     /admin/new                          Admin.form

如你所見，我們在舊的路由之上定義新路由，所以它的優(yōu)先級更高。這意味著，如果提交了id參數(shù)，Play將選擇這條路由。如果不是，它就選擇原來那條。

刷新My posts頁面，你應該能看到URL的變化。

現(xiàn)在我們需要修改yabe/app/views/Admin/form.html：

#{extends "admin.html" /}

#{ifnot post?.id}
    
Write, a new post
#{/ifnot}
#{else}
    
Edit, this post
#{/else}

#{form @save(post?.id)}

    #{ifErrors}
        

            Please correct these errors.
        
    #{/ifErrors}

    

        #{field "title"}
        Post title:
        
        #{error "post.title" /}
        #{/field}
    

    

        #{field "content"}
        Write here:
                  ${post?.content}
        
        #{error "post.title" /}
        #{/field}
    

    

        #{field "tags"}
        Enter some tags:
        
        #{/field}
    

    

        
    

#{/form}

如你所見，如果id參數(shù)存在，我們將用它作為提交表單的第一個參數(shù)。所以假如這個文章具有id的值（意味著它已經(jīng)存在在系統(tǒng)中），Admin.save就會被調(diào)用。

現(xiàn)在我們改變save()方法，讓它同時能處理創(chuàng)建和修改文章的情況：

public static void save(Long id, String title, String content, String tags) {
    Post post;
    if(id == null) {
        // Create post
        User author = User.find("byEmail", Security.connected()).first();
        post = new Post(author, title, content);
    } else {
        // Retrieve post
        post = Post.findById(id);
        // Edit
        post.title = title;
        post.content = content;
        post.tags.clear();
    }
    // Set tags list
    for(String tag : tags.split("s+")) {
        if(tag.trim().length() > 0) {
            post.tags.add(Tag.findOrCreateByName(tag));
        }
    }
    // Validate
    validation.valid(post);
    if(validation.hasErrors()) {
        render("@form", post);
    }
    // Save
    post.save();
    index();
}

一如之前那樣，我們需要定義多一個更合適的路由，還是用之前的方式：

POST    /admin/myPosts/{id}                 Admin.save
POST    /admin/new                          Admin.save

完成了！現(xiàn)在我們可以用同一個方法來創(chuàng)建新的文章，或者修改舊的文章，而且管理面板也完成了！