しがないプログラマーの備忘録: PrimeFaces

ラベル PrimeFaces の投稿を表示しています。すべての投稿を表示

2012年6月14日木曜日

(PrimeFaces ShowCase)Download

【目的】
PrimeFaces ShowCaseのFileDownloadを実行します。

【手順】
１．「PrimeFacesプロジェクトの作成方法」の手順で、「PrimeFacesSample062-Download」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。


動的 Web プロジェクト	プロジェクト名	PrimeFacesSample062-Download
	ターゲット・ランタイム	Apache Tomcat v6.0
	動的 web モジュール　バージョン	2.5
	構成	Apache Tomcat v6.0 デフォルト構成
	EARメンバーシップ	チェックなし
	ワーキング・セット	チェックなし
Java	ビルド・パス上のソース・フォルダー	src
Java	デフォルト出力フォルダー	build\classes
Web モジュール	コンテキスト・ルート	PrimeFacesSample062-Download
	コンテンツ・ディレクトリー	WebContent
	web.xml デプロイメント記述子の作成	チェックあり

２．「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>PrimeFacesSample062-Download</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>

３．「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:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
    <h:form id="form">

        <p:commandLink value="ダウンロード" ajax="false">
            <p:fileDownload value="#{downloadBean.file}" />
        </p:commandLink>

        <p:commandButton value="ダウンロード" ajax="false">
            <p:fileDownload value="#{downloadBean.file}" />
        </p:commandButton>
    </h:form>
</h:body>
</html>

６．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
７．「Javaパッケージの作成方法」の手順で、「com.example.primefacessample062」というパッケージを作成。
８．「Javaクラスファイルの作成方法」の手順で、「DownloadBean.java」というクラスファイルを作成。
９．「DownloadBean.java」を以下の様に入力。

package com.example.primefacessample062;

import java.io.InputStream;
import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
import javax.servlet.ServletContext;

import org.primefaces.model.DefaultStreamedContent;
import org.primefaces.model.StreamedContent;

@ManagedBean
@RequestScoped
public class DownloadBean implements Serializable {
    private StreamedContent file;

    public DownloadBean() {
        InputStream stream = ((ServletContext) FacesContext
                .getCurrentInstance().getExternalContext().getContext())
                .getResourceAsStream("/sample.jpg");
        file = new DefaultStreamedContent(stream, "image/jpg",
                "sample_download.jpg");
    }

    public StreamedContent getFile() {
        return file;
    }
}

１０．「WebContent」ディレクトリ直下に「sample.jpg」の画像ファイルを配置しておきます。
１１．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１２．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１３．ブラウザで以下のURLにアクセスします。

http://localhost:8080/PrimeFacesSample062-Download/faces/index.xhtml

１４．以下の様に表示されます。
１５．「ダウンロード」ボタンをクリック。

１６．ダウンロードが開始されれば成功です。

以上です。

2012年6月13日水曜日

(PrimeFaces ShowCase)FileUploadAuto

【目的】
PrimeFaces ShowCaseのFileUploadAutoを実行します。

【手順】
１．「PrimeFacesプロジェクトの作成方法」の手順で、「PrimeFacesSample061-FileUploadAuto」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。


動的 Web プロジェクト	プロジェクト名	PrimeFacesSample061-FileUploadAuto
	ターゲット・ランタイム	Apache Tomcat v6.0
	動的 web モジュール　バージョン	2.5
	構成	Apache Tomcat v6.0 デフォルト構成
	EARメンバーシップ	チェックなし
	ワーキング・セット	チェックなし
Java	ビルド・パス上のソース・フォルダー	src
Java	デフォルト出力フォルダー	build\classes
Web モジュール	コンテキスト・ルート	PrimeFacesSample061-FileUploadAuto
	コンテンツ・ディレクトリー	WebContent
	web.xml デプロイメント記述子の作成	チェックあり

２．「ファイルアップロードに必要なライブラリの設定方法」の手順で、「commons-fileupload-1.2.1.jar」と「commons-io-1.4.jar」のライブラリを設定する。
３．「WebContent/WEB-INF/web.xml」を以下の様に入力。
※FileUploadFilterを追加している。

<?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>PrimeFacesSample061-FileUploadAuto</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>

    <filter>
        <filter-name>PrimeFaces FileUpload Filter</filter-name>
        <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>PrimeFaces FileUpload Filter</filter-name>
        <servlet-name>Faces Servlet</servlet-name>
    </filter-mapping>
</web-app>

４．「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:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
    <h:form enctype="multipart/form-data">

        <p:fileUpload
            fileUploadListener="#{fileUploadAutoBean.handleFileUpload}"
            mode="advanced" update="messages" auto="true" sizeLimit="100000"
            allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

        <p:growl id="messages" showDetail="true" />
    </h:form>
</h:body>
</html>

７．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
８．「Javaパッケージの作成方法」の手順で、「com.example.primefacessample061」というパッケージを作成。
９．「Javaクラスファイルの作成方法」の手順で、「FileUploadAutoBean.java」というクラスファイルを作成。
１０．「FileUploadAutoBean.java」を以下の様に入力。

package com.example.primefacessample061;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;

import org.primefaces.event.FileUploadEvent;

@ManagedBean
@RequestScoped
public class FileUploadAutoBean implements Serializable {
    public void handleFileUpload(FileUploadEvent event) {
        FacesMessage msg = new FacesMessage("成功", "アップロードしたファイル："
                + event.getFile().getFileName());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

１１．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１２．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１３．ブラウザで以下のURLにアクセスします。

http://localhost:8080/PrimeFacesSample061-FileUploadAuto/faces/index.xhtml

１４．以下の様に表示されれば成功です。

以上です。

(PrimeFaces ShowCase)FileUpload

【目的】
PrimeFaces ShowCaseのFileUploadを実行します。

【手順】
１．「PrimeFacesプロジェクトの作成方法」の手順で、「PrimeFacesSample060-FileUpload」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。


動的 Web プロジェクト	プロジェクト名	PrimeFacesSample060-FileUpload
	ターゲット・ランタイム	Apache Tomcat v6.0
	動的 web モジュール　バージョン	2.5
	構成	Apache Tomcat v6.0 デフォルト構成
	EARメンバーシップ	チェックなし
	ワーキング・セット	チェックなし
Java	ビルド・パス上のソース・フォルダー	src
Java	デフォルト出力フォルダー	build\classes
Web モジュール	コンテキスト・ルート	PrimeFacesSample060-FileUpload
	コンテンツ・ディレクトリー	WebContent
	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>PrimeFacesSample060-FileUpload</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>

    <filter>
        <filter-name>PrimeFaces FileUpload Filter</filter-name>
        <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>PrimeFaces FileUpload Filter</filter-name>
        <servlet-name>Faces Servlet</servlet-name>
    </filter-mapping>
</web-app>

<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:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
    <h:form enctype="multipart/form-data">

        <p:messages showDetail="true" />

        <p:fileUpload value="#{fileUploadBean.file}" mode="simple" />

        <p:commandButton value="アップロード" ajax="false"
            actionListener="#{fileUploadBean.upload}" />
    </h:form>
</h:body>
</html>

７．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
８．「Javaパッケージの作成方法」の手順で、「com.example.primefacessample060」というパッケージを作成。
９．「Javaクラスファイルの作成方法」の手順で、「FileUploadBean.java」というクラスファイルを作成。
１０．「FileUploadBean.java」を以下の様に入力。

package com.example.primefacessample060;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.UploadedFile;

@ManagedBean
@RequestScoped
public class FileUploadBean implements Serializable {
    private UploadedFile file;

    public UploadedFile getFile() {
        return file;
    }

    public void setFile(UploadedFile file) {
        this.file = file;
    }

    public void upload() {
        if (file != null) {
            FacesMessage msg = new FacesMessage("成功", "アップロードしたファイル："
                    + file.getFileName());
            FacesContext.getCurrentInstance().addMessage(null, msg);
        }
    }
}

http://localhost:8080/PrimeFacesSample060-FileUpload/faces/index.xhtml

１４．以下の様に表示されれば成功です。

以上です。

ファイルアップロードに必要なライブラリの設定方法

【目的】
PrimeFacesのファイルアップロードに必要なライブラリを設定します。

【手順１】
１．「FileUpload1.2.1の解凍方法」の手順で、解凍したライブラリを選択して、右クリック、「コピー」を選択。

【手順２】
１．「PrimeFacesSample060-FileUpload」(ライブラリの設定したいプロジェクト)の「WebContent/WEB-INF/lib」を選択し、右クリックし、「貼り付け」を選択。

【手順３】
１．「IO1.4の解凍方法」手順で、解凍したライブラリを選択して、右クリック、「コピー」を選択

【手順４】
１．「PrimeFacesSample060-FileUpload」(ライブラリの設定したいプロジェクト)の「WebContent/WEB-INF/lib」を選択し、右クリックし、「貼り付け」を選択。

【手順５】
１．「ライブラリー」の「Web App ライブラリー」に「commons-fileupload-1.2.1.jar」と「commons-io-1.4.jar」のライブラリが表示されていれば成功です。

以上です。

(PrimeFaces ShowCase)FileUploadNG

【目的】
PrimeFaces ShowCaseのFileUploadを実行します。(失敗しました)

【手順】
１．「PrimeFacesプロジェクトの作成方法」の手順で、「PrimeFacesSample059-FileUploadNG」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。


動的 Web プロジェクト	プロジェクト名	PrimeFacesSample059-FileUploadNG
	ターゲット・ランタイム	Apache Tomcat v6.0
	動的 web モジュール　バージョン	2.5
	構成	Apache Tomcat v6.0 デフォルト構成
	EARメンバーシップ	チェックなし
	ワーキング・セット	チェックなし
Java	ビルド・パス上のソース・フォルダー	src
Java	デフォルト出力フォルダー	build\classes
Web モジュール	コンテキスト・ルート	PrimeFacesSample059-FileUploadNG
	コンテンツ・ディレクトリー	WebContent
	web.xml デプロイメント記述子の作成	チェックあり

２．「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>PrimeFacesSample059-FileUploadNG</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>

<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:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
    <h:form enctype="multipart/form-data">

        <p:messages showDetail="true" />

        <p:fileUpload value="#{fileUploadBean.file}" mode="simple" />

        <p:commandButton value="アップロード" ajax="false"
            actionListener="#{fileUploadBean.upload}" />
    </h:form>
</h:body>
</html>

６．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
７．「Javaパッケージの作成方法」の手順で、「com.example.primefacessample059」というパッケージを作成。
８．「Javaクラスファイルの作成方法」の手順で、「FileUploadNGBean.java」というクラスファイルを作成。
９．「FileUploadNGBean.java」を以下の様に入力。

package com.example.primefacessample059;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.UploadedFile;

@ManagedBean
@RequestScoped
public class FileUploadNGBean implements Serializable {
    private UploadedFile file;

    public UploadedFile getFile() {
        return file;
    }

    public void setFile(UploadedFile file) {
        this.file = file;
    }

    public void upload() {
        if (file != null) {
            FacesMessage msg = new FacesMessage("成功", "アップロードしたファイル："
                    + file.getFileName());
            FacesContext.getCurrentInstance().addMessage(null, msg);
        }
    }
}

１０．「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
１１．「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
１２．ブラウザで以下のURLにアクセスします。

http://localhost:8080/PrimeFacesSample059-FileUploadNG/faces/index.xhtml

１３．以下の様にアップロードしますが、処理されず、エラーも出ません。

【結論】
「PrimeFacesのユーザーズガイド」を読むと、ファイルをアップロードするには、別途web.xmlに設定と、ライブラリの追加が必要な様です。

以上です。

(PrimeFaces ShowCase)MenuButton

【目的】
PrimeFaces ShowCaseのMenuButtonを実行します。

【手順】
１．「PrimeFacesプロジェクトの作成方法」の手順で、「PrimeFacesSample058-MenuButton」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。


動的 Web プロジェクト	プロジェクト名	PrimeFacesSample058-MenuButton
	ターゲット・ランタイム	Apache Tomcat v6.0
	動的 web モジュール　バージョン	2.5
	構成	Apache Tomcat v6.0 デフォルト構成
	EARメンバーシップ	チェックなし
	ワーキング・セット	チェックなし
Java	ビルド・パス上のソース・フォルダー	src
Java	デフォルト出力フォルダー	build\classes
Web モジュール	コンテキスト・ルート	PrimeFacesSample058-MenuButton
	コンテンツ・ディレクトリー	WebContent
	web.xml デプロイメント記述子の作成	チェックあり

２．「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>PrimeFacesSample058-MenuButton</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>

<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:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
    <h:form>
        <p:growl id="growl" />

        <p:menuButton value="Options">
            <p:menuitem value="保存" update="growl"
                actionListener="#{menuButtonBean.save}" icon="ui-icon-disk" />
            <p:menuitem value="更新" update="growl"
                actionListener="#{menuButtonBean.update}"
                icon="ui-icon-arrowrefresh-1-w" />
            <p:menuitem value="削除" icon="ui-icon-close"
                actionListener="#{menuButtonBean.delete}" ajax="false" />
            <p:separator />
            <p:menuitem value="ホームページ" url="http://www.primefaces.org"
                icon="ui-icon-extlink" />
        </p:menuButton>
    </h:form>
</h:body>
</html>

６．「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
７．「Javaパッケージの作成方法」の手順で、「com.example.primefacessample058」というパッケージを作成。
８．「Javaクラスファイルの作成方法」の手順で、「MenuButtonBean.java」というクラスファイルを作成。
９．「MenuButtonBean.java」を以下の様に入力。

package com.example.primefacessample058;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

@ManagedBean
@RequestScoped
public class MenuButtonBean implements Serializable {
    public void save(ActionEvent actionEvent) {
        addMessage("保存しました。");
    }

    public void update(ActionEvent actionEvent) {
        addMessage("更新しました。");
    }

    public void delete(ActionEvent actionEvent) {
        addMessage("削除しました。");
    }

    public void addMessage(String summary) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
                summary, null);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
}

http://localhost:8080/PrimeFacesSample058-MenuButton/faces/index.xhtml

１３．以下の様に表示されれば成功です。

以上です。

登録: 投稿 (Atom)

しがないプログラマーの備忘録

ページ

最近の更新

2012年6月14日木曜日

(PrimeFaces ShowCase)Download

2012年6月13日水曜日

(PrimeFaces ShowCase)FileUploadAuto

(PrimeFaces ShowCase)FileUpload

ファイルアップロードに必要なライブラリの設定方法

(PrimeFaces ShowCase)FileUploadNG

(PrimeFaces ShowCase)MenuButton

関連記事