RichFaces3 ShowCaseのDropDownMenuを実行します。
【手順】
１．「RichFaces3プロジェクトの作成方法」の手順で、「RichFaces3Sample011-DropDownMenu」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
２．「WebContent/WEB-INF/web.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>RichFaces3Sample011-DropDownMenu</display-name>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name>
<param-value>enable</param-value>
</context-param>
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
</web-app>
３．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
４．「Javaパッケージの作成方法」の手順で、「com.example.richfaces3sample011」というパッケージを作成。
５．「Javaクラスファイルの作成方法」の手順で、「DropDownMenuBean.java」というクラスファイルを作成。
６．「DropDownMenuBean.java」を以下の様に入力。
package com.example.richfaces3sample011;
import java.io.Serializable;
public class DropDownMenuBean implements Serializable {
private String selectedCommand;
private String searchWord;
public String getSearchWord() {
return searchWord;
}
public void setSearchWord(String searchWord) {
this.searchWord = searchWord;
}
public String getSelectedCommand() {
return selectedCommand;
}
public void setSelectedCommand(String selectedCommand) {
this.selectedCommand = selectedCommand;
}
public void doNew() {
selectedCommand = "選択されたコマンド：新規";
}
public void doExit() {
selectedCommand = "選択されたコマンド：終了";
}
public void doSearch() {
selectedCommand = "選択されたコマンド：検索, 入力された単語：" + searchWord;
}
}
７．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
８．「WebContent/WEB-INF/faces-config.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>dropDownMenuBean</managed-bean-name>
<managed-bean-class>com.example.richfaces3sample011.DropDownMenuBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
</faces-config>
９．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１０．「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
１１．「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
</head>
<body>
<a4j:form>
<rich:toolBar>
<rich:dropDownMenu>
<f:facet name="label">
<h:panelGroup>
<h:outputText value="ファイル" />
</h:panelGroup>
</f:facet>
<rich:menuItem submitMode="ajax" value="新規"
action="#{dropDownMenuBean.doNew}" reRender="out">
</rich:menuItem>
<rich:menuSeparator />
<rich:menuItem submitMode="ajax" value="終了"
action="#{dropDownMenuBean.doExit}" reRender="out" />
</rich:dropDownMenu>
<rich:dropDownMenu>
<f:facet name="label">
<h:outputText value="リンク" />
</f:facet>
<rich:menuItem>
<h:outputLink value="http://labs.jboss.com/jbossrichfaces/">
<h:outputText value="RichFaces Home Page" />
</h:outputLink>
</rich:menuItem>
<rich:menuItem>
<h:outputLink value="http://www.google.com">
<h:outputText value="Google" />
</h:outputLink>
</rich:menuItem>
</rich:dropDownMenu>
<rich:toolBarGroup location="right">
<rich:dropDownMenu value="検索" direction="bottom-left"
jointPoint="br" styleClass="search">
<rich:menuItem submitMode="none">
<h:inputText value="#{dropDownMenuBean.searchWord}" />
<a4j:commandButton value="検索"
action="#{dropDownMenuBean.doSearch}" reRender="out" />
</rich:menuItem>
<rich:menuItem value="検索する単語を入力してください。" disabled="true" />
</rich:dropDownMenu>
</rich:toolBarGroup>
</rich:toolBar>
<h:outputText id="out" value="#{dropDownMenuBean.selectedCommand}" />
</a4j:form>
</body>
</html>
１２．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
１３．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１４．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１５．ブラウザで以下のURLにアクセスします。
http://localhost:8080/RichFaces3Sample011-DropDownMenu/faces/index.xhtml
１６．以下の様に表示されれば成功です。
DropDownMenu-01.jpg)
１７．以下の様なHTMLが出力されました。
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<link class="component" href="/RichFaces3Sample011-DropDownMenu/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__;jsessionid=B5DD69856061CF9E80218D94EB37E0FC" rel="stylesheet" type="text/css" />
<link class="component" href="/RichFaces3Sample011-DropDownMenu/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__;jsessionid=B5DD69856061CF9E80218D94EB37E0FC" media="rich-extended-skinning" rel="stylesheet" type="text/css" />
<script src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript" type="text/javascript">
</script>
<script src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalorg/ajax4jsf/javascript/scripts/form.js" type="text/javascript">
</script>
<link class="component" href="/RichFaces3Sample011-DropDownMenu/faces/a4j/s/3_3_3.Finalcss/toolBar.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__;jsessionid=B5DD69856061CF9E80218D94EB37E0FC" rel="stylesheet" type="text/css" />
<script src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript" type="text/javascript">
</script>
<script src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalscripts/menu.js" type="text/javascript">
</script>
<link class="component" href="/RichFaces3Sample011-DropDownMenu/faces/a4j/s/3_3_3.Finalcss/dropdownmenu.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__;jsessionid=B5DD69856061CF9E80218D94EB37E0FC" rel="stylesheet" type="text/css" />
<script src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/utils.js" type="text/javascript">
</script>
<script src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/form.js" type="text/javascript">
</script>
<script src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/menu.js" type="text/javascript">
</script>
<link class="component" href="/RichFaces3Sample011-DropDownMenu/faces/a4j/s/3_3_3.Finalcss/menucomponents.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__;jsessionid=B5DD69856061CF9E80218D94EB37E0FC" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.RICH_FACES_EXTENDED_SKINNING_ON=true;</script>
<script src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js" type="text/javascript">
</script>
</head>
<body>
<form id="j_id1" name="j_id1" method="post" action="/RichFaces3Sample011-DropDownMenu/faces/index.xhtml;jsessionid=B5DD69856061CF9E80218D94EB37E0FC">
<table border="0" cellpadding="0" cellspacing="0" class="rich-toolbar " id="j_id1:j_id2" width="100%">
<tr valign="middle">
<td class="rich-toolbar-item ">
<div class="rich-ddmenu-label rich-ddmenu-label-unselect " id="j_id1:j_id3">
<div class="rich-label-text-decor">
ファイル
</div>
<div style="margin: 0px; padding: 0px; border: 0px; position: absolute; z-index: 100;">
<div id="j_id1:j_id3_menu" class="rich-menu-list-border" style="display: none; z-index: 2;">
<div class="rich-menu-list-bg">
<div class="rich-menu-item rich-menu-item-enabled" id="j_id1:j_id6" onclick="RichFaces.Menu.updateItem(event,this);A4J.AJAX.Submit('j_id1',event,{'similarityGroupingId':'j_id1:j_id6','parameters':{'j_id1:j_id6':'j_id1:j_id6'} ,'actionUrl':'/RichFaces3Sample011\x2DDropDownMenu/faces/index.xhtml;jsessionid=B5DD69856061CF9E80218D94EB37E0FC'} )">
<span class="rich-menu-item-icon " id="j_id1:j_id6:icon">
<img alt="" height="16" src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalimages/spacer.gif" width="16" />
</span>
<span class="rich-menu-item-label" id="j_id1:j_id6:anchor">
新規
</span>
</div>
<div class="rich-menu-separator" id="j_id1:j_id7">
</div>
<div class="rich-menu-item rich-menu-item-enabled" id="j_id1:j_id8" onclick="RichFaces.Menu.updateItem(event,this);A4J.AJAX.Submit('j_id1',event,{'similarityGroupingId':'j_id1:j_id8','parameters':{'j_id1:j_id8':'j_id1:j_id8'} ,'actionUrl':'/RichFaces3Sample011\x2DDropDownMenu/faces/index.xhtml;jsessionid=B5DD69856061CF9E80218D94EB37E0FC'} )">
<span class="rich-menu-item-icon " id="j_id1:j_id8:icon">
<img alt="" height="16" src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalimages/spacer.gif" width="16" />
</span>
<span class="rich-menu-item-label" id="j_id1:j_id8:anchor">
終了
</span>
</div>
<div class="rich-menu-list-strut">
<div class="rich-menu-list-strut" style="">
</div>
</div>
</div>
</div>
<script id="j_id1:j_id3_menu_script" type="text/javascript">
new RichFaces.Menu.Layer('j_id1:j_id3_menu',{'hideDelay':800,'delay':50} ).asDropDown('j_id1:j_id3').addItems([['j_id1:j_id6'] ,['j_id1:j_id8'] ] );
</script>
</div>
</div>
</td>
<td class="rich-toolbar-item ">
<div class="rich-ddmenu-label rich-ddmenu-label-unselect " id="j_id1:j_id9">
<div class="rich-label-text-decor">
リンク
</div>
<div style="margin: 0px; padding: 0px; border: 0px; position: absolute; z-index: 100;">
<div id="j_id1:j_id9_menu" class="rich-menu-list-border" style="display: none; z-index: 2;">
<div class="rich-menu-list-bg">
<div class="rich-menu-item rich-menu-item-enabled" id="j_id1:j_id11" onclick="RichFaces.Menu.submitForm(event,this)">
<span class="rich-menu-item-icon " id="j_id1:j_id11:icon">
<img alt="" height="16" src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalimages/spacer.gif" width="16" />
</span>
<span class="rich-menu-item-label" id="j_id1:j_id11:anchor">
<a href="http://labs.jboss.com/jbossrichfaces/">
RichFaces Home Page
</a>
</span>
</div>
<div class="rich-menu-item rich-menu-item-enabled" id="j_id1:j_id14" onclick="RichFaces.Menu.submitForm(event,this)">
<span class="rich-menu-item-icon " id="j_id1:j_id14:icon">
<img alt="" height="16" src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalimages/spacer.gif" width="16" />
</span>
<span class="rich-menu-item-label" id="j_id1:j_id14:anchor">
<a href="http://www.google.com">
Google
</a>
</span>
</div>
<div class="rich-menu-list-strut">
<div class="rich-menu-list-strut" style="">
</div>
</div>
</div>
</div>
<script id="j_id1:j_id9_menu_script" type="text/javascript">
new RichFaces.Menu.Layer('j_id1:j_id9_menu',{'hideDelay':800,'delay':50} ).asDropDown('j_id1:j_id9').addItems([['j_id1:j_id11'] ,['j_id1:j_id14'] ] );
</script>
</div>
</div>
</td>
<td style="width:100%">
</td>
<td class="rich-toolbar-item " style=";">
<div class="rich-ddmenu-label rich-ddmenu-label-unselect search " id="j_id1:j_id18">
<div class="rich-label-text-decor" id="j_id1:j_id18_span">
検索
</div>
<div style="margin: 0px; padding: 0px; border: 0px; position: absolute; z-index: 100;">
<div id="j_id1:j_id18_menu" class="rich-menu-list-border" style="display: none; z-index: 2;">
<div class="rich-menu-list-bg">
<div class="rich-menu-item rich-menu-item-enabled" id="j_id1:j_id19" onclick="RichFaces.Menu.updateItem(event,this);">
<span class="rich-menu-item-icon " id="j_id1:j_id19:icon">
<img alt="" height="16" src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalimages/spacer.gif" width="16" />
</span>
<span class="rich-menu-item-label" id="j_id1:j_id19:anchor">
<input type="text" name="j_id1:j_id20" />
<input id="j_id1:j_id21" name="j_id1:j_id21" onclick="A4J.AJAX.Submit('j_id1',event,{'similarityGroupingId':'j_id1:j_id21','parameters':{'j_id1:j_id21':'j_id1:j_id21'} ,'actionUrl':'/RichFaces3Sample011\x2DDropDownMenu/faces/index.xhtml;jsessionid=B5DD69856061CF9E80218D94EB37E0FC'} );return false;" value="検索" type="button" />
</span>
</div>
<div class="rich-menu-item rich-menu-item-disabled" id="j_id1:j_id22" onclick="Event.stop(event);">
<span class="rich-menu-item-icon rich-menu-item-icon-disabled " id="j_id1:j_id22:icon">
<img alt="" height="16" src="/RichFaces3Sample011-DropDownMenu/faces/a4j/g/3_3_3.Finalimages/spacer.gif" width="16" />
</span>
<span class="rich-menu-item-label rich-menu-item-label-disabled" id="j_id1:j_id22:anchor">
検索する単語を入力してください。
</span>
</div>
<div class="rich-menu-list-strut">
<div class="rich-menu-list-strut" style="">
</div>
</div>
</div>
</div>
<script id="j_id1:j_id18_menu_script" type="text/javascript">
new RichFaces.Menu.Layer('j_id1:j_id18_menu',{'hideDelay':800,'delay':50} ).asDropDown('j_id1:j_id18',{'direction':'bottom\x2Dleft','jointPoint':'br'} ).addItems([['j_id1:j_id19'] ,['j_id1:j_id22',{'closeOnClick':false,'disabled':true} ] ] );
</script>
</div>
</div>
</td>
</tr>
</table>
<span id="j_id1:out">
</span>
<input type="hidden" autocomplete="off" name="j_id1" value="j_id1" />
<input type="hidden" autocomplete="off" name="autoScroll" value="" />
<input type="hidden" autocomplete="off" name="j_id1:_link_hidden_" value="" />
<input type="hidden" autocomplete="off" name="j_id1:j_idcl" value="" />
<script type="text/javascript">
function clear_j_id1() {
_clearJSFFormParameters('j_id1','',['j_id1:_link_hidden_','j_id1:j_idcl']);
}
function clearFormHiddenParams_j_id1(){clear_j_id1();}
function clearFormHiddenParams_j_id1(){clear_j_id1();}
clear_j_id1();
</script>
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1" autocomplete="off" />
</form>
</body>
</html>
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。