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

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

我們可以重用CRUD模塊來(lái)實(shí)現(xiàn)這部分。但是這里我們打算從頭開(kāi)始，因?yàn)槲覀冃枰S多自定義的設(shè)置。

我們僅需要查詢(xún)用戶(hù)相關(guān)的文章并顯示出來(lái)。這很簡(jiǎn)單。從改進(jìn)Admin.index action開(kāi)始吧：

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)建一個(gè)用于發(fā)布文章的界面。一般對(duì)于一個(gè)表單，你可以做兩件事：顯示它，處理它提交的結(jié)果。讓我們創(chuàng)建Admin.form"和Admin.save`來(lái)幫助顯示和處理提交結(jié)果。

添加新的路由到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)在我們來(lái)完成處理提交結(jié)果的。它將創(chuàng)建一個(gè)新的Post對(duì)象，轉(zhuǎn)換標(biāo)簽列表成真正的Tag列表，并驗(yàn)證所有成員，進(jìn)行保存。如果發(fā)生錯(cuò)誤，它會(huì)刷新表單，顯示錯(cuò)誤信息。

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")的縮寫(xiě)。它表示使用form action的默認(rèn)模板。

測(cè)試一下！

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

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

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

如你所見(jiàn)，我們把查詢(xún)功能變成可選的，僅當(dāng)id參數(shù)不為空，才會(huì)去查詢(xún)一個(gè)現(xiàn)有文章。所以你可以鏈接主頁(yè)面的文章列表到編輯表單。修改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

非常簡(jiǎn)單，但是有一個(gè)問(wèn)題。如果你查看這些鏈接生成的URL，會(huì)看到：

/admin/new?id=3

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

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

如你所見(jiàn)，我們?cè)谂f的路由之上定義新路由，所以它的優(yōu)先級(jí)更高。這意味著，如果提交了id參數(shù)，Play將選擇這條路由。如果不是，它就選擇原來(lái)那條。

刷新My posts頁(yè)面，你應(yīng)該能看到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}

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

現(xiàn)在我們改變save()方法，讓它同時(shí)能處理創(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();
}

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

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

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