最近の更新

2013年7月31日水曜日

VMware Player5.0.2 for Windowsの起動方法

【目的】
VMware Player5.0.2 for Windowsを起動します。



【手順1】
1.デスクトップに作成された「VMware Player」のショートカットを実行。




【手順2】
1.以下の様に「VMware Player」が起動すれば成功です。









































以上です。

VMware Player5.0.2 for Windowsのインストール方法

【目的】
VMware Player5.0.2 for Windowsをダウンロードし、インストールします。



【手順1】
1.「VMware Player5.0.2 for Windowsのダウンロード方法」の手順でダウンロードした「VMware-player-5.0.2-1031769.exe」を実行。




【手順2】
1.「次へ」ボタンをクリック。




【手順3】
1.「次へ」ボタンをクリック。




【手順4】
1.「次へ」ボタンをクリック。




【手順5】
1.「VMware Playerの改善に協力する」(任意)を非選択。
2.「次へ」ボタンをクリック。




【手順6】
1.「次へ」ボタンをクリック。




【手順7】
1.「続行」ボタンをクリック。
2.インストールが完了するのを待ちます。




【手順8】
1.「完了」ボタンをクリック。




以上です。

VMware Player5.0.2 for Windowsのダウンロード方法

【目的】
VMware Player5.0.2 for Windowsをダウンロードし、インストールします。



【手順1】
1.「VMware Playerのサイト」にアクセス。
2.「ダウンロード」をクリック。

































【手順2】
1.「VMware Player for Windows 32-bit and 64-bit」の「ダウンロード」をクリック。

































【手順3】
1.保存場所を選択。
2.「保存」ボタンをクリック。

































以上です。

2013年7月29日月曜日

h:commandButtonのactionでBeanの値で画面遷移

【目的】
JSF2.2でh:commandButtonを実行します。
commandButtonのactionでManagedBean(マネージドビーン)の値で画面遷移します。
※今回はCDIのマネージドビーンを使用しています。



【手順1】
1.「JSF2.2プロジェクトの作成方法」の作成手順で、「JSF22Sample202-h-commandButtonActionBeanValue」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
ウィザード名 項目名 項目に設定する値
動的 Web プロジェクト プロジェクト名 JSF22Sample202-h-commandButtonActionBeanValue
ターゲット・ランタイム GlassFish 4.0
動的 web モジュールバージョン 3.1
プロジェクト・ファセット JavaServer Faces チェック有り バージョン(2.2)
Java ビルド・パス上のソース・フォルダー src
デフォルト出力フォルダー build\classes
Web モジュール コンテキスト・ルート JSF22Sample202-h-commandButtonActionBeanValue
コンテンツ・ディレクトリー WebContent
web.xml デプロイメント記述子の作成 チェックあり
JSF 機能 JSF 実装ライブラリー GlassFish System Library
Configure JSF servlet in deployment descriptor チェック有り
JSF 構成ファイル /WEB-INF/faces-config.xml
JSF サーブレット名 Faces Servlet
JSF Servlet Class Name javax.faces.webapp.FacesServlet
URL マッピング・パターン /faces/*



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://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>JSF22Sample202-h-commandButtonActionBeanValue</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>

4.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
5.「Javaパッケージの作成方法」の手順で、「sample」というパッケージを作成。
6.「Javaクラスファイルの作成方法」の手順で、「SampleBean.java」というクラスファイルを作成。
7.「SampleBean.java」を以下の様に入力。
package sample;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class SampleBean {
    public String action() {
        System.out.println("actionが呼び出されました。");
        return "page2";
    }
}

8.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
9.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
10.「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    <h:outputText value="#{sampleBean.text}" escape="false" />
</h:body>
</html>

11.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「page2.xhtml」というファイルを作成。
12.「page2.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    ページ2です。
</h:body>
</html>

13.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
14.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
15.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
16.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF22Sample202-h-commandButtonActionBeanValue/faces/index.xhtml

17.以下の様に表示されれば成功です。



































18.ソースコードは以下の様に出力されていました。(見やすく整形しています)
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2"></head>
    <body>
        <form id="j_idt4" name="j_idt4" method="post" action="/JSF22Sample202-h-commandButtonActionBeanValue/faces/index.xhtml;jsessionid=99e90060394f2f796831df399a3a" enctype="application/x-www-form-urlencoded">
            <input type="hidden" name="j_idt4" value="j_idt4" />
            <input type="submit" name="j_idt4:j_idt5" value="移動" />
            <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="2120590524293682529:-6012974635607438027" autocomplete="off" />
        </form>
    </body>
</html>



【結論】
「input type="submit"」のボタンが出力されました。
特に画面の遷移先は記載されていません。
サーバ側で処理されると思われます。



以上です。

h:commandButtonのactionで固定画面遷移

【目的】
JSF2.2でh:commandButtonを実行します。
commandButtonのactionで画面を固定で遷移します。



【手順1】
1.「JSF2.2プロジェクトの作成方法」の作成手順で、「JSF22Sample101-h-commandButtonAction」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
ウィザード名 項目名 項目に設定する値
動的 Web プロジェクト プロジェクト名 JSF22Sample101-h-commandButtonAction
ターゲット・ランタイム GlassFish 4.0
動的 web モジュールバージョン 3.1
プロジェクト・ファセット JavaServer Faces チェック有り バージョン(2.2)
Java ビルド・パス上のソース・フォルダー src
デフォルト出力フォルダー build\classes
Web モジュール コンテキスト・ルート JSF22Sample101-h-commandButtonAction
コンテンツ・ディレクトリー WebContent
web.xml デプロイメント記述子の作成 チェックあり
JSF 機能 JSF 実装ライブラリー GlassFish System Library
Configure JSF servlet in deployment descriptor チェック有り
JSF 構成ファイル /WEB-INF/faces-config.xml
JSF サーブレット名 Faces Servlet
JSF Servlet Class Name javax.faces.webapp.FacesServlet
URL マッピング・パターン /faces/*



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://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>JSF22Sample101-h-commandButtonAction</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>

4.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
5.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
6.「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    <h:form>
        <h:commandButton value="移動" action="page2" />
    </h:form>
</h:body>
</html>

7.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「page2.xhtml」というファイルを作成。
8.「page2.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    ページ2です。
</h:body>
</html>

9.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
10.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
11.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
12.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF22Sample101-h-commandButtonAction/faces/index.xhtml

13.以下の様に表示されれば成功です。



































14.ソースコードは以下の様に出力されていました。(見やすく整形しています)
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
    </head>
    <body>
        <form id="j_idt4" name="j_idt4" method="post" action="/JSF22Sample101-h-commandButtonAction/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
            <input type="hidden" name="j_idt4" value="j_idt4" />
            <input type="submit" name="j_idt4:j_idt5" value="移動" />
            <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="5062835420762175325:7914364872365477917" autocomplete="off" />
        </form>
    </body>
</html>



【結論】
「input type="submit"」のボタンが出力されました。
特に画面の遷移先は記載されていません。
サーバ側で処理されると思われます。



以上です。

2013年7月25日木曜日

h:formの出力内容

【目的】
JSF2.2でh:formを実行します。
formのみを出力します。
※特に意味はありませんが、JSF2.2でformがどのようなHTMLを出力するのかを確認します。



【手順1】
1.「JSF2.2プロジェクトの作成方法」の作成手順で、「JSF22Sample101-h-form」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
ウィザード名 項目名 項目に設定する値
動的 Web プロジェクト プロジェクト名 JSF22Sample101-h-form
ターゲット・ランタイム GlassFish 4.0
動的 web モジュールバージョン 3.1
プロジェクト・ファセット JavaServer Faces チェック有り バージョン(2.2)
Java ビルド・パス上のソース・フォルダー src
デフォルト出力フォルダー build\classes
Web モジュール コンテキスト・ルート JSF22Sample101-h-form
コンテンツ・ディレクトリー WebContent
web.xml デプロイメント記述子の作成 チェックあり
JSF 機能 JSF 実装ライブラリー GlassFish System Library
Configure JSF servlet in deployment descriptor チェック有り
JSF 構成ファイル /WEB-INF/faces-config.xml
JSF サーブレット名 Faces Servlet
JSF Servlet Class Name javax.faces.webapp.FacesServlet
URL マッピング・パターン /faces/*



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://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>JSF22Sample101-h-form</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>

4.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
5.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
6.「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    <h:form>
        formのみ。
    </h:form>
</h:body>
</html>

7.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
8.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
9.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
10.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF22Sample101-h-form/faces/index.xhtml

11.以下の様に表示されれば成功です。













































12.ソースコードは以下の様に出力されていました。(見やすく整形しています)
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
    </head>
    <body>
        <form id="j_idt4" name="j_idt4" method="post" action="/JSF22Sample101-h-form/faces/index.xhtml;jsessionid=4d320b02deee3bea332ab37d7c78" enctype="application/x-www-form-urlencoded">
            <input type="hidden" name="j_idt4" value="j_idt4" />
            formのみ。
            <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-6567124597442535192:1682591068202106085" autocomplete="off" />
        </form>
    </body>
</html>



【結論】
formのタグのみで、上記のformタグと2つのhiddenタグが出力されるようです。



以上です。

h:outputTextでBeanの値をエスケープ無しで出力

【目的】
JSF2.2でh:outputTextを実行します。
ManagedBean(マネージドビーン)の値をエスケープ無しで出力します。
※今回はCDIのマネージドビーンを使用しています。



【手順1】
1.「JSF2.2プロジェクトの作成方法」の作成手順で、「JSF22Sample007-h-outputTextBeanValueNoEscape」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
ウィザード名 項目名 項目に設定する値
動的 Web プロジェクト プロジェクト名 JSF22Sample007-h-outputTextBeanValueNoEscape
ターゲット・ランタイム GlassFish 4.0
動的 web モジュールバージョン 3.1
プロジェクト・ファセット JavaServer Faces チェック有り バージョン(2.2)
Java ビルド・パス上のソース・フォルダー src
デフォルト出力フォルダー build\classes
Web モジュール コンテキスト・ルート JSF22Sample007-h-outputTextBeanValueNoEscape
コンテンツ・ディレクトリー WebContent
web.xml デプロイメント記述子の作成 チェックあり
JSF 機能 JSF 実装ライブラリー GlassFish System Library
Configure JSF servlet in deployment descriptor チェック有り
JSF 構成ファイル /WEB-INF/faces-config.xml
JSF サーブレット名 Faces Servlet
JSF Servlet Class Name javax.faces.webapp.FacesServlet
URL マッピング・パターン /faces/*



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://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>JSF22Sample007-h-outputTextBeanValueNoEscape</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>

4.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
5.「Javaパッケージの作成方法」の手順で、「sample」というパッケージを作成。
6.「Javaクラスファイルの作成方法」の手順で、「SampleBean.java」というクラスファイルを作成。
7.「SampleBean.java」を以下の様に入力。
package sample;

import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class SampleBean {
    private String text;

    @PostConstruct
    public void init() {
        this.text = "あいうえお<br />かきくけこ";
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }
}

8.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
9.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
10.「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    <h:outputText value="#{sampleBean.text}" escape="false" />
</h:body>
</html>

11.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
12.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
13.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
14.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF22Sample007-h-outputTextBeanValueNoEscape/faces/index.xhtml

15.以下の様に表示されれば成功です。









































16.ソースコードは以下の様に出力されていました。(見やすく整形しています)
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
    </head>
    <body>
        あいうえお<br />かきくけこ
    </body>
</html>



【結論】
特に何かタグが出力されるわけではなく、そのまま文字列が表示されました。
文字列の中に入力されていたHTMLは、エスケープされずにそのままHTMLとして出力されました。



以上です。

h:outputTextでBeanの値を出力

【目的】
JSF2.2でh:outputTextを実行します。
ManagedBean(マネージドビーン)の値を出力します。
※今回はCDIのマネージドビーンを使用しています。



【手順1】
1.「JSF2.2プロジェクトの作成方法」の作成手順で、「JSF22Sample006-h-outputTextBeanValue」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
ウィザード名 項目名 項目に設定する値
動的 Web プロジェクト プロジェクト名 JSF22Sample006-h-outputTextBeanValue
ターゲット・ランタイム GlassFish 4.0
動的 web モジュールバージョン 3.1
プロジェクト・ファセット JavaServer Faces チェック有り バージョン(2.2)
Java ビルド・パス上のソース・フォルダー src
デフォルト出力フォルダー build\classes
Web モジュール コンテキスト・ルート JSF22Sample006-h-outputTextBeanValue
コンテンツ・ディレクトリー WebContent
web.xml デプロイメント記述子の作成 チェックあり
JSF 機能 JSF 実装ライブラリー GlassFish System Library
Configure JSF servlet in deployment descriptor チェック有り
JSF 構成ファイル /WEB-INF/faces-config.xml
JSF サーブレット名 Faces Servlet
JSF Servlet Class Name javax.faces.webapp.FacesServlet
URL マッピング・パターン /faces/*



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://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>JSF22Sample006-h-outputTextBeanValue</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>

4.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
5.「Javaパッケージの作成方法」の手順で、「sample」というパッケージを作成。
6.「Javaクラスファイルの作成方法」の手順で、「SampleBean.java」というクラスファイルを作成。
7.「SampleBean.java」を以下の様に入力。
package sample;

import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class SampleBean {
    private String text;

    @PostConstruct
    public void init() {
        this.text = "あいうえお<br />かきくけこ";
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }
}

8.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
9.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
10.「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    <h:outputText value="#{sampleBean.text}" />
</h:body>
</html>

11.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
12.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
13.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
14.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF22Sample006-h-outputTextBeanValue/faces/index.xhtml

15.以下の様に表示されれば成功です。









































16.ソースコードは以下の様に出力されていました。(見やすく整形しています)
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
    </head>
    <body>
        あいうえお&lt;br /&gt;かきくけこ
    </body>
</html>



【結論】
特に何かタグが出力されるわけではなく、そのまま文字列が表示されました。
文字列の中にHTMLが入力されていた場合は、エスケープされてHTMLが文字列として表示されました。



以上です。

h:outputTextでstyleのclassを設定

【目的】
JSF2.2でh:outputTextを実行します。
class属性を使用し、スタイルのクラスを設定します。



【手順1】
1.「JSF2.2プロジェクトの作成方法」の作成手順で、「JSF22Sample005-h-outputTextStyleClass」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
ウィザード名 項目名 項目に設定する値
動的 Web プロジェクト プロジェクト名 JSF22Sample005-h-outputTextStyleClass
ターゲット・ランタイム GlassFish 4.0
動的 web モジュールバージョン 3.1
プロジェクト・ファセット JavaServer Faces チェック有り バージョン(2.2)
Java ビルド・パス上のソース・フォルダー src
デフォルト出力フォルダー build\classes
Web モジュール コンテキスト・ルート JSF22Sample005-h-outputTextStyleClass
コンテンツ・ディレクトリー WebContent
web.xml デプロイメント記述子の作成 チェックあり
JSF 機能 JSF 実装ライブラリー GlassFish System Library
Configure JSF servlet in deployment descriptor チェック有り
JSF 構成ファイル /WEB-INF/faces-config.xml
JSF サーブレット名 Faces Servlet
JSF Servlet Class Name javax.faces.webapp.FacesServlet
URL マッピング・パターン /faces/*



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://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>JSF22Sample005-h-outputTextStyleClass</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>

4.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
5.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
6.「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
    <style>
        .mainColor {
            color: blue;
        }
    </style>
</h:head>
<h:body>
    <h:outputText value="styleのclassを適応" styleClass="mainColor" />
</h:body>
</html>

7.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
8.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
9.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
10.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF22Sample005-h-outputTextStyleClass/faces/index.xhtml

11.以下の様に表示されれば成功です。









































12.ソースコードは以下の様に出力されていました。(見やすく整形しています)
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
        <style>
            .mainColor {
                color: blue;
            }
        </style>
    </head>
    <body>
        <span class="mainColor">styleのclassを適応</span>
    </body>
</html>



【結論】
styleのclassがセットされた場合、spanタグで囲まれて文字列が表示されました。



以上です。

h:outputTextでstyleを設定

【目的】
JSF2.2でh:outputTextを実行します。
style属性を使用し、インラインのスタイルを設定します。



【手順1】
1.「JSF2.2プロジェクトの作成方法」の作成手順で、「JSF22Sample004-h-outputTextStyle」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
ウィザード名 項目名 項目に設定する値
動的 Web プロジェクト プロジェクト名 JSF22Sample004-h-outputTextStyle
ターゲット・ランタイム GlassFish 4.0
動的 web モジュールバージョン 3.1
プロジェクト・ファセット JavaServer Faces チェック有り バージョン(2.2)
Java ビルド・パス上のソース・フォルダー src
デフォルト出力フォルダー build\classes
Web モジュール コンテキスト・ルート JSF22Sample004-h-outputTextStyle
コンテンツ・ディレクトリー WebContent
web.xml デプロイメント記述子の作成 チェックあり
JSF 機能 JSF 実装ライブラリー GlassFish System Library
Configure JSF servlet in deployment descriptor チェック有り
JSF 構成ファイル /WEB-INF/faces-config.xml
JSF サーブレット名 Faces Servlet
JSF Servlet Class Name javax.faces.webapp.FacesServlet
URL マッピング・パターン /faces/*



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://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>JSF22Sample004-h-outputTextStyle</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>

4.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
5.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
6.「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    <h:outputText value="インラインのstyleを適応" style="color: blue;" />
</h:body>
</html>

7.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
8.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
9.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
10.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF22Sample004-h-outputTextStyle/faces/index.xhtml

11.以下の様に表示されれば成功です。









































12.ソースコードは以下の様に出力されていました。(見やすく整形しています)
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
    </head>
    <body>
        <span style="color: blue;">インラインのstyleを適応</span>
    </body>
</html>



【結論】
styleがセットされた場合、spanタグで囲まれて文字列が表示されました。



以上です。

h:outputTextで表示・非表示

【目的】
JSF2.2でh:outputTextを実行します。
rendered属性を使用し、文字列の表示非表示を制御します。



【手順1】
1.「JSF2.2プロジェクトの作成方法」の作成手順で、「JSF22Sample003-h-outputTextRendered」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
ウィザード名 項目名 項目に設定する値
動的 Web プロジェクト プロジェクト名 JSF22Sample003-h-outputTextRendered
ターゲット・ランタイム GlassFish 4.0
動的 web モジュールバージョン 3.1
プロジェクト・ファセット JavaServer Faces チェック有り バージョン(2.2)
Java ビルド・パス上のソース・フォルダー src
デフォルト出力フォルダー build\classes
Web モジュール コンテキスト・ルート JSF22Sample003-h-outputTextRendered
コンテンツ・ディレクトリー WebContent
web.xml デプロイメント記述子の作成 チェックあり
JSF 機能 JSF 実装ライブラリー GlassFish System Library
Configure JSF servlet in deployment descriptor チェック有り
JSF 構成ファイル /WEB-INF/faces-config.xml
JSF サーブレット名 Faces Servlet
JSF Servlet Class Name javax.faces.webapp.FacesServlet
URL マッピング・パターン /faces/*



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://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>JSF22Sample003-h-outputTextRendered</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>

4.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
5.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
6.「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    <h:outputText value="こっちは表示されない。" rendered="false" />
    <h:outputText value="こっちが表示される。" rendered="true" />
</h:body>
</html>

7.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
8.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
9.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
10.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF22Sample003-h-outputTextRendered/faces/index.xhtml

11.以下の様に表示されれば成功です。









































12.ソースコードは以下の様に出力されていました。(見やすく整形しています)
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
    </head>
    <body>
        こっちが表示される。
    </body>
</html>



【結論】
renderedが"true"の文字列のみ表示されました。
タグが出力されるわけではなく、そのまま文字列が表示されました。
また、renderedが"false"の方は、HTMLのソースコードにすら何も表示されませんでした。



以上です。

h:outputTextで固定文字列

【目的】
JSF2.2でh:outputTextを実行します。
固定文字列を出力します。



【手順1】
1.「JSF2.2プロジェクトの作成方法」の作成手順で、「JSF22Sample002-h-outputText」といプロジェクトを作成。
※プロジェクトの設定は以下の通り。
※他の項目は任意。
ウィザード名 項目名 項目に設定する値
動的 Web プロジェクト プロジェクト名 JSF22Sample002-h-outputText
ターゲット・ランタイム GlassFish 4.0
動的 web モジュールバージョン 3.1
プロジェクト・ファセット JavaServer Faces チェック有り バージョン(2.2)
Java ビルド・パス上のソース・フォルダー src
デフォルト出力フォルダー build\classes
Web モジュール コンテキスト・ルート JSF22Sample002-h-outputText
コンテンツ・ディレクトリー WebContent
web.xml デプロイメント記述子の作成 チェックあり
JSF 機能 JSF 実装ライブラリー GlassFish System Library
Configure JSF servlet in deployment descriptor チェック有り
JSF 構成ファイル /WEB-INF/faces-config.xml
JSF サーブレット名 Faces Servlet
JSF Servlet Class Name javax.faces.webapp.FacesServlet
URL マッピング・パターン /faces/*



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://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>JSF22Sample002-h-outputText</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>

4.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
5.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
6.「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    <h:outputText value="ハロー JSF2.2 ワールド!" />
</h:body>
</html>

7.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。
8.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
9.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
10.ブラウザで以下のURLにアクセスします。
http://localhost:8080/JSF22Sample002-h-outputText/faces/index.xhtml

11.以下の様に表示されれば成功です。









































12.ソースコードは以下の様に出力されていました。(見やすく整形しています)
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
    </head>
    <body>
        ハロー JSF2.2 ワールド!
    </body>
</html>



【結論】
特に何かタグが出力されるわけではなく、そのまま文字列が表示されました。
固定文字列の場合は、わざわざh:outputTextを使う必要がないのかもしれません。



以上です。

ナビゲーションバー(ドロップダウンサブメニュー)

【目的】
Twitter Bootstrap2.3.1でナビゲーションバーにドロップダウンのサブメニューを指定します。



【準備】
1.「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「index.html」を以下の様に入力。
<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            その他
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="http://google.com">Google</a></li>
                            <li><a href="http://yahoo.com">Yahoo</a></li>
                            <li class="dropdown-submenu">
                            <a tabindex="-1" href="#">More options</a>
                            <ul class="dropdown-menu">
                                <li><a href="http://google.com">Google</a></li>
                                <li><a href="http://yahoo.com">Yahoo</a></li>
                            </ul>
                        </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>



【手順2】
1.ブラウザで「index.html」を開き、以下の様に表示されれば成功です。































以上です。

2013年7月19日金曜日

JSF2.2プロジェクトの実行方法

【目的】
JSF2.2のプロジェクトを作成し、実行します。



【手順1】
1.「JSF2.2のプロジェクトの作成方法」の手順で、プロジェクトを作成します。
2.「動的Webアプリケーションをサーバーに配置する方法」の手順で、作成したプロジェクトをサーバーに配置します。
3.「サーバーをデバッグモードで起動する方法」の手順で、サーバーを起動します。
4.ブラウザで以下のURLにアクセスします。
※JSF22Sample001-HelloWorldはプロジェクトのコンテキスト・ルート名。

http://localhost:8080/JSF22Sample001-HelloWorld/faces/index.xhtml

5.以下の様に表示されれば成功です。





































以上です。

JSF2.2プロジェクトの作成方法

【目的】
JSF2.2のプロジェクトを作成し、実行します。



【準備】
1.「Eclipse 4.3.0 Kepler(64ビット版)のインストール(解凍)方法」の手順で、Eclipseをインストール。
2.「サーバー・アダプターの追加方法(GlassFish)」の手順を実施。
3.「サーバー・ランタイムの設定(GlassFish4)」の手順を実施。



【手順1】
1.「Eclipse 4.3.0 Kepler(64ビット版)の起動方法」の手順で、Eclipseを起動。
2.メニューの「ファイル」⇒「新規」⇒「プロジェクト」を選択。




【手順2】
1.「Web」⇒「動的Webプロジェクト」を選択。
2.「次へ」ボタンをクリック。




【手順3】
1.「プロジェクト名」に「JSF22Sample001-HelloWorld」と入力。
2.ターゲット・ランタイムは「GlassFish 4.0」を選択。
3.構成の「変更」ボタンをクリック。




【手順4】
1.「JavaServer Faces」を選択。
2.「OK」ボタンをクリック。




【手順5】
1.「次へ」ボタンをクリック。




【手順6】
1.「次へ」ボタンをクリック。




【手順7】
1.「web.xmlデプロイメント記述子の生成」を選択。
2.「次へ」ボタンをクリック。




【手順8】
1.「完了」ボタンをクリック。




【手順9】
1.以下の様に、動的プロジェクトが作成されます。



































【手順10】
1.「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://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">

    <display-name>JSF22Sample001-HelloWorld</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>
2.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。



【手順11】
1.「faces-config.xml」を以下の様に入力。
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
    version="2.2">

</faces-config>
2.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。



【手順12】
1.「任意のファイルの作成方法」の手順で、「WebContent/」ディレクトリに「index.xhtml」というファイルを作成。
2.「index.xhtml」を以下の様に入力。
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
    <h:outputText value="ハローワールド JSF2.2"/>
</h:body>
</html>
3.「Ctrl+Shift+F」を押し、ソースコードをフォーマッティング、「Ctrl+S」でファイルを保存。



以上です。

m5simpleTextCount(改)

【目的】
テキストボックス・テキストエリアで入力文字数の最大値・現在値を表示したい。



【本家】
改造元のプラグインはこちら⇒「m5simpleTextCount



【変更点】
1.jQuery1.10.x以降でも動作するように修正。
2.最大値を分母に表示するように修正。
3.色のデフォルトの値を修正。
4.警告色となる閾値のデフォルトの値を修正。
5.フォーカス時に表示されるようにデフォルトの値を修正。



【使い方】
<input class="countText10" type="text" />

<textarea class="countText200" rows="10"></textarea>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//sites.google.com/site/foolprogrammer/m5simpleTextCount.js?attredirects=0&d=1"></script>

<script type="text/javascript">
$('.countText10').m5simpleTextCount({
    maxLength: 10
});
$('.countText200').m5simpleTextCount({
    maxLength: 200
});
</script>
※詳しい使い方は本家を御覧ください。



【サンプル】











【ソースコード】
/**
 * m5simpleTextCount
 *
 * @version      1.0
 * @author       nori (norimania@gmail.com)
 * @copyright    5509 (http://5509.me/)
 * @license      The MIT License
 * @link         http://5509.me/log/m5simpletextcount
 *
 * Date: 2010-12-05 21:20
 */

(function($) {
    
    $.fn.m5simpleTextCount = function(options) {
        var conf = $.extend({
                focusDisplay: true,
                padding: '3px',
                color: '#3a87ad',
                atColor: '#b94a48',
                background: '#d9edf7',
                atBackground: '#f2dede',
                fontWeight: 'bold',
                atFontWeight: 'bold',
                opacity: .8,
                alertLength: -1,
                maxLength: 10
            }, options);
            
        $(this).each(function() {
            var target = $(this),
                targetOffset = target.offset(),
                border = {
                    rightWidth: parseInt(target.css('borderRightWidth')),
                    bottomWidth: parseInt(target.css('borderBottomWidth'))
                },
                currentCount = getCount(target),
                count = $('<span class="simpleTextCount"></span>')
                    .css({
                        padding: conf.padding,
                        display: 'block',
                        position: 'absolute',
                        color: conf.color,
                        background: conf.background,
                        fontWeight: conf.fontWeight,
                        opacity: conf.opacity
                    })
                    .text(currentCount + '/' + conf.maxLength),
                pos = {};
                
            countStyle(currentCount, count);
            
            $(window).resize(function() {
                setCountPos(count, getPos(target, count), border)
            });
            $('body').append(count);
            setCountPos(count, getPos(target, count), border);
            
            if ( conf.focusDisplay ) {
                count.hide();
                target
                    .focus(function() {
                        count.stop(true, true).fadeIn(250);
                    })
                    .blur(function() {
                        count.stop(true, true).fadeOut(250);
                    });
            }    
            target.keyup(function() {
                var currentCount = getCount(target);
                countStyle(currentCount, count);
                count.text(currentCount + '/' + conf.maxLength);
                setCountPos(count, getPos(target, count), border);
            });
        });
        
        function getCount(target) {
            return conf.maxLength - target.val().length;
        }
        
        function countStyle(currentCount, count) {
            if ( currentCount < (conf.alertLength + 1) ) {
                count.css({
                    color: conf.atColor,
                    background: conf.atBackground,
                    fontWeight: conf.atFontWeight
                });
            } else {
                count.css({
                    color: conf.color,
                    background: conf.background,
                    fontWeight: conf.fontWeight
                });
            }
        }
        
        function getPos(target, count) {
            var targetOffset = target.offset();
            return {
                x: Math.floor(targetOffset.left),
                y: Math.floor(targetOffset.top),
                xdash: target.get(0).offsetWidth,
                ydash: target.get(0).offsetHeight,
                cx: count.get(0).offsetWidth,
                cy: count.get(0).offsetHeight
            }
        }
        
        function setCountPos(count, pos, border) {
            return count.css({
                left: pos.x + pos.xdash - pos.cx - border.rightWidth,
                top: pos.y + pos.ydash - pos.cy - border.bottomWidth
            });
        }
    
    }

})(jQuery);

ダウンロード



以上です。

サーバー・ランタイムの設定(GlassFish4)

【目的】
EclipseでGlassFish4のサーバの設定をする。



【準備】
1.「サーバー・アダプターの追加方法(GlassFish)」の手順で、GlassFish用のサーバー・アダプターを追加しておきます。



【手順1】
1.Eclipseを起動します。
2.メニューから「ウィンドウ」⇒「設定」を選択。




【手順2】
1.左のメニューから「サーバー」⇒「ランタイム環境」を選択。
2.ウィンドウ右側の「追加」ボタンをクリック。




【手順3】
1.「GlassFish」⇒「GlassFish4」を選択。
2.「新規ローカル・サーバーの作成」を選択。
3.「次へ」ボタンをクリック。




【手順4】
1.「GlassFish Server Open Source Edition 4.0(Zip版)のインストール(解凍)方法」の手順で、GlassFish4をインストールしておきます。




【手順5】
1.「JRE」は「java7」を選択。
2.「Glassfish Server Directory」は【手順4】でインストールしておいた場所を選択。
3.「次へ」ボタンをクリック。




【手順6】
1.「完了」ボタンをクリック。




【手順7】
1.「OK」ボタンをクリック。




【手順8】
1.「サーバー・ビューの表示方法」を実施。
2.以下の様に「サーバー・ビュー」にGlassFish4.0が表示されれば成功です。




























以上です。

関連記事