1. <%@ page language="java" contentType="text/html; charset=UTF-8" 2. pageEncoding="UTF-8"%> 3. <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> 4. <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> 5. <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> 6. <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> 7. <html> 8. <head> 9. <title>ユーザ検索</title> 10. </head> 11. <body> 12. <f:view> 13. <rich:simpleTogglePanel switchType="client" label="検索条件指定" opened="true" width="600"> 14. <h:form> 15. 文字入力:<h:inputText id="query" value="#{searchBean.query}"> 16. <a4j:support event="onkeyup" requestDelay="1500" 17. action="#{searchBean.searchUser}" reRender="result" /> 18. </h:inputText> 19. <rich:suggestionbox for="query" 20. suggestionAction="#{searchBean.searchSuggest}" var="result" 21. height="80" width="200"> 22. <h:column> 23. <h:outputText value="#{result}" /> 24. </h:column> 25. </rich:suggestionbox> 26. <br /> 27. <a4j:commandButton value="全件表示する" 28. action="#{searchBean.searchAllUser}" reRender="result" /> 29. </h:form> 30. </rich:simpleTogglePanel> 31. 32. <h:outputLink value="javascript:Richfaces.showModalPanel('help')"> 33. <h:outputText value="ヘルプ" /> 34. </h:outputLink> 35. <hr /> 36. 37. <a4j:outputPanel id="result"> 38. <rich:effect event="ondblclick" type="Fold" params="duration:0.8" /> 39. 40. <rich:dataTable id="resultTable" value="#{searchBean.result}" 41. var="result" rows="10" width="600"> 42. <f:facet name="header"> 43. <h:outputText value="検索結果(ダブルクリックで消えます)" /> 44. </f:facet> 45. <rich:column> 46. <f:facet name="header"> 47. <h:outputText value="名前" /> 48. </f:facet> 49. <h:outputText value="#{result.name}" /> 50. </rich:column> 51. <rich:column> 52. <f:facet name="header"> 53. <h:outputText value="性別" /> 54. </f:facet> 55. <h:outputText value="#{result.sex}" /> 56. </rich:column> 57. <rich:column> 58. <f:facet name="header"> 59. <h:outputText value="所属" /> 60. </f:facet> 61. <h:outputText value="#{result.company}" /> 62. </rich:column> 63. <rich:column> 64. <f:facet name="header"> 65. <h:outputText value="コメント" /> 66. </f:facet> 67. <h:outputText value="#{result.comment}" /> 68. </rich:column> 69. </rich:dataTable> 70. </a4j:outputPanel> 71. 72. <rich:modalPanel id="help"> 73. <f:facet name="header"> 74. <h:outputText value="ヘルプ" /> 75. </f:facet> 76. 文字入力テキストボックスに文字を入力すると、自動的に検索が行われます。<br /> 77. また、入力中にサジェッション(入力補完)を行います。 78. <br /><br /> 79. <a href="javascript:Richfaces.hideModalPanel('help')">閉じる</a> 80. </rich:modalPanel> 81. 82. </f:view> 83. </body> 84. </html>
