JViews Diagrammer チュートリアル (JSF 2)

1© 2017 Rogue Wave Software, Inc. All Rights Reserved. 1
JViews Diagrammer
スタートガイド (JSF 2)
2017年11月

この文書の目的
• 基本的なグラフィックビューをWebブラウザで表示するサンプルを作成する手順を
通して、JViewsでJSFアプリケーションを作成する手順を学びます。
• 現在JSFアプリケーションを作成する場合はJSF 2を使うことが多いと思います。し
かし、JViewsのウェブドキュメントに書かれた情報は現在のところJSF 1.1用に作
成されており、必要なライブラリのバージョンが最近のものと異なります。そこで。
この文書ではチュートリアルをJSF2向けに書き直してお伝えします。
• 以下の説明では、プロジェクト名やユーザー定義のフレームワーク名はチュートリ
アルのものと異なります。

JViews Diagrammerチュートリアル
• 日本語チュートリアル
– Rogue Wave JViews Diagrammer > プログラマー用マニュアル > Web アプ
リケーションの構築 > JViews JSF アプリケーションのスタートアップ > 基
本的な JViews JSF アプリケーションのスタートアップ
– http://docs.roguewave.com/jviews/8.10/jviews-
diagrammer810/index_ja.html
• 英語版 (該当ページへ直接リンク)
– http://docs.roguewave.com/jviews/2017.0/documentation/userman/index
.html#page/diagrammer%2FChapter06ProgrammersDocumentation.07.259
.html%23ww1129871

Dynamic web Project作成
• Eclipseを起動
• 「File」>「new」>
「Dynamic Web Project」を
選択し、Nextをクリック

Dynamic Web Project作成
• Project name: jsf-hello-world
• Configuration: JavaServer
Faces v2.2 Project
– この部分がチュートリア
ルと異なります

• Nextを3回クリックし、JSF
Capabilitiesウィンドウを表示
• user libraryをこれまで作成して
いない場合はここで作成します
• 右図の「Manage Libraries」をク
リック

• User LibrariesのPreferences
画面が起動
• Newを押してNew User
Libraryを起動
• User library name: 「JViews
2017 Framework」
– 既存のものと重複しなけ
れば任意の名前が可能で
す
• OK

JViews JSF Libraryの構成
• Add External JARsで、必要な
パッケージを追加
– この選択がバージョンによって
異なり、従ってドキュメントと
大きく異なるところです
• システムフォルダが示される
ので、JViewsのインストール
フォルダ以下のjviews-
framework > libから必要なjar
ファイルを選択(次ページ)

JViews JSF Libraryの構成
• libから
– jviews-framework-all.jar
– jviews-jsf2-facelets-
support.jar
• externalから
– icu4j-58.2.jar
– javax.faces-2.2.14.jar
– jstl-1.2.jar
– slf4j-api.1.7.24.jar
– slf4j-jdk14-1.7.24.jar
• 以上7つをJviews 2017
Frameworkに追加し、OK

• JSF Capabilitiesに戻ってきた
• JSF Implementation Libraryで
今作成した「JViews 2017
Framework」にチェックを入れ、
Finish
• ドキュメントに記載されている
ように、 Java EE perspective
への切り替えを要求する
Eclipse のプロンプトは無視し
てください(Noをクリック)
• 以上でプロジェクトが作成され
ました

サンプル用のグラフィックデータ
• ドキュメントにあるように、
jviews-frameworkのインストール
フォルダ以下にある
codefragmentsjsf-hello-
worldwebpages から右図のよう
に以下をコピーし、
– java2d.ivlファイル
– texturesフォルダ
• 作成したプロジェクトの
WebContentフォルダに起きます
• EclipseのProject Explorerでプロ
ジェクトをRefreshすると以下のよ
うにこれら２要素が反映されます

Managed Bean作成
• Package Explorerからsrcフォ
ルダ上で New > Class
• NameにSupportBean
• Finish

Managed Bean作成
• ドキュメントに書かれたソー
スコードでSupportBean.java
を上書きします。
• http://docs.roguewave.com/j
views/2017.0/documentation
/userman/index.html#page/
diagrammer%2FChapter06Pr
ogrammersDocumentation.0
7.259.html%23ww1131525
• 日本語版と英語版のソース
コードは同一です。

Managed Bean作成
• WebContent/WEB_INF
フォルダーに配置されて
いるファイル faces-
config.xml を開く
• ドキュメントに記載され
ている通り、右の枠内の
コードを追加
• これでManaged Beanの
作成は終了です

JViewsサーブレットの設定
• WebContent/WEB_INFフォルダ内にある
web.xmlを開く
• ドキュメントに従って、太字のタグで囲まれ
て部分を挿入する
• その際、右図のように
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
• の部分を
<welcome-file-list>
<welcome-file>faces/index.jsp</welcome-file>
</welcome-file-list>
• のように書き換えてください。
• JSFアプリケーションではWebページはfaces
ディレクトリにデプロイされます

メインJSPページの作成
• Package Explorerの
WebContentフォルダ上
で New > Others… >
Web > JSP File
• Nextをクリック

• File nameにindex.jsp
• nextをクリック

• New JavaServer Faces (JSF)
Page (html) をtemplateとし
て選択
• Finish

JSF manager view作成
• WebCntentフォルダに
index.jspが作成された
• ドキュメントに従ってコード
を追加する
• <h:form>タグ内に<jvf:view>
コンポーネントが追加されて
いる。これはSupportBeanで
設定された、JViewsのグラ
フィックコンポーネントにバ
インドされています。
• これでJViews JSFのコーディ
ングは完了です。

JViews JSFアプリケーションのデプロイ
• Window > Show View >
Other... > Server > Serversで
Serverタブを表示
• タブ内で右クリック > New >
Server

• Tomcat v7.0 Serverを選択し
てNextをクリック

• jsf-hello-worldを選択して
Add
• Finish
• これでTomcatサーバへのデプ
ロイは完了です

JViews JSF アプリケーションのテスト
• Serverタブで作成したTomcat
v7.0 Serverを選択して右ク
リック > Start

JViews JSF アプリケーションのテスト
• ウェブブラウザで
http://localhost:8080/jsf-
hello-world/faces/index.jsp
にアクセスすると、ブラウザ
内に画像ページが表示されま
す。
• 以上でJViewsを使ってJSF 2ア
プリケーションを作成できま
した。

お問い合わせ
• ローグウェーブソフトウェアジャパン
– https://roguewave.jp/company/contact-us
– TEL: 03-5211-7760

JViews Diagrammer チュートリアル (JSF 2)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JViews Diagrammer チュートリアル (JSF 2)

Similar to JViews Diagrammer チュートリアル (JSF 2) (20)

JViews Diagrammer チュートリアル (JSF 2)