精通Grails: 了解插件 - 编程入门网

通过在 Web 浏览器中键入 http://localhost:9090/blogito/entry/search?q=groovy 来测试新的 search 动作。应该会看到一个搜索结果的 hashmap 图，类似于图 4：

图 4. 显示原始的搜索结果

知道了 search() 方法的工作原理后，下一步是要让用户界面更为友好一点。在 grails- app/views/layouts 中创建一个名为 _search.gsp 的局部模板。加入清单 14 中的代码：

清单 14. 局部模板

<div　id="search"> 　 <g:form　url=''[controller:　"entry",　action:　"search"]'' 　　　　　 id="searchableForm" 　　　　　 name="searchableForm" 　　　　　 method="get"> 　　 <g:textField　name="q"　value="${params.q}"　/> 　　 <input　type="submit"　value="Search"　/> 　 </g:form> </div>

请注意，在上述代码中，控制器被设为 entry，动作被设为 search。

接下来，该显示这个局部模板了。在一个文本编辑器内打开 grails-app/views/layouts/_header.gsp 并添加一个 render 标签，如清单 15 所示：

清单 15. 为 header 添加这个搜索模板

<g:render　 template="/layouts/search"　/> <div　id="header"> 　 <p><g:link　class="header-main"　 controller="entry">Blogito</g:link></p> 　 <p　class="header-sub"> 　　 <g:link　controller="entry"　action="atom"> 　　 <img　src="${createLinkTo(dir:''images'',file:''feed-icon-28x28.png'')}" 　　　　 alt="Subscribe"　title="Subscribe"/> 　　 </g:link> 　　 A　tiny　little　blog　 　 </p> 　 <div　id="loginHeader"> 　　 <g:loginControl　/> 　 </div> </div>

精通Grails: 了解插件(8)

给 web-app/css/main.css 添加一些 Cascading Style Sheets (CSS) 以确保 search <div> 可以浮在屏幕的右上角，如清单 16 所示：

清单 16. 添加 CSS 来调整搜索表单的位置

#search　{ 　 float:　right; 　 margin:　2em　1em; }

所有视图变化均完成后，请刷新浏览器。屏幕看上去应该如图 5 所示：

图 5. 给 header 添加搜索表单

需要做的最后一件事情就是以 HTML 格式提交 search 结果，而不是简单的调试输出。调整 EntryController 内的 search 动作，如清单 17 所示：

清单 17. 一个更健壮的搜索动作

def　search　=　{ 　 //render　Entry.search(params.q,　params) 　 def　searchResults　=　Entry.search(params.q,　params) 　 flash.message　=　"${searchResults.total}　results　found　for　search:　${params.q}" 　 flash.q　=　params.q 　 return　[searchResults:searchResults.results,　resultCount:searchResults.total] }

精通Grails: 了解插件(9)

由于该动作被命名为 search，因此需要在 grails-app/views/entry 中创建对应的 search.gsp 文件 ，如清单 18 所示：

清单 18. Search.gsp

<h

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!