RichFaces4 ShowCaseのTabPanelToggleControlを実行します。
【手順】
1.「RichFaces4プロジェクトの作成方法」の手順で、「RichFaces4Sample003-TabPanelToggleControl」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
2.「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>RichFaces4Sample003-TabPanelToggleControl</display-name> <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>
3.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
4.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
5.「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"> <h:head> </h:head> <h:body> <h:form> <h:commandLink value="前のタブ"> <rich:toggleControl targetPanel="tp" targetItem="@prev" /> </h:commandLink> <h:outputText value=" | " /> <h:commandLink value="次のタブ"> <rich:toggleControl targetPanel="tp" targetItem="@next" /> </h:commandLink> <br /> <br /> <rich:tabPanel id="tp" switchType="ajax"> <rich:tab header="タブ1"> タブ1の中身 </rich:tab> <rich:tab header="タブ2" disabled="true"> タブ2の中身 </rich:tab> <rich:tab header="タブ3"> タブ3の中身 </rich:tab> </rich:tabPanel> </h:form> </h:body> </html>
6.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
7.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
8.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
9.ブラウザで以下のURLにアクセスします。
http://localhost:8080/RichFaces4Sample003-TabPanelToggleControl/faces/index.xhtml
10.以下の様に表示されれば成功です。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。