!エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。Ticket」と呼ばれる機能には以下の4つがあります。Oracleからチュートリアルが出たようなのでやってみました。Tutorial」を押します。以下のページが表示され、各ステップがバルーン式になっているので、上からやっていきます。_)m追記:投稿してから「今日書いた量多いな...」と思ったのですが、手順を細かく書いただけで、やってることは単純です。JSFにおいて複数のテンプレートとCSSを用意して、それを動的にスイッチできるようにしてるだけです(^^)使うの面倒くさそうと思われませんように...Overview目安としては45分くらいでできるチュートリアルとのこと。SEは7u25かなと(^^;昨日公開になったチュートリアルですが、たぶんその当時に書いたんですかね...今年はupdateが多すぎる(-_-;ベースとなるコードはダウンロードできるようになっており「Prerequisites(必須条件)」にリンクがあります。リンクをクリックして「JSFTemplateExampleApp.zip」を落とします。解凍したフォルダをNetBeansProjects配下などに置きます。NetBeans7.3.1を立ち上げて以下手順でプロジェクトファイルを読み込みます。読み込めたら実行してみます。以下のようなページが初期表示されて、adminページへのリンクとuserページへのリンクがあります。adminページはuserページはテンプレートでcssを読み込んでいてすべて同じテンプレートを利用している構成になってます。Contractsで複数のテンプレート、CSSを扱えるようにしていきます。以下のようにcontractsという名称のフォルダを作成します。ここに各種templateやcssを突っ込んでいくようです。プロジェクトの「Webページ」を右クリックして「新規」から「その他」を選びます(フォルダが選択肢にあればそれを選択)カテゴリ「その他」のファイル・タイプ「フォルダ」を選択しますフォルダ名「contents」で終了します。追加されればOKです。contractsフォルダ配下にサブフォルダ作成contractsフォルダを右クリックして、先ほど同様に新規(サブ)フォルダを追加します。blue,green,redと3つ追加します。resources配下をコピーresourcesフォルダの配下にあるcssとテンプレートをコピーします。blue,green,redのフォルダにペーストします。cssとtemplate.xhtmlを一部変更ペーストしたcssLayout.cssを一部書き換えます。書き換える対象はblueとgreenフォルダのcssのみです。#F3C7F7以下のような感じです(blueの場合)さらにgreenの配下にあるdefault.cssに以下を追加します。color:#FF0314;}blue,green,redの配下にあるtemplate.xhtmlでlinkタグのパスを変更します。/>green,redもパスに合わせて同様に修正します。resourcesフォルダ削除resourcesフォルダを削除します。いうわけで、contractsの配下に置いた3パターンのcssやtemplateがリソースとして使うという流れです。templateの参照を修正resourcesフォルダを削除したので、以下の5ファイルindex.xhtmladmin/index.xhtmladmin/result.xhtmluser/index.xhtmluser/result1.xhtmlの中で定義されているtemplateへの参照を以下変更します。template="/template.xhtml">faces-config.xmlの変更faces-config.xmlを以下のapplicationタグを追加します。</application></faces-config>マッピングは基本的に名前で行われるようですね(^^;CDI管理対象Bean追加テンプレートを動的に変更するためにCDI管理対象Beanを追加します。パッケージとして「com.example.beans」を以下の手順で追加します。プロジェクトの「デフォルト・パッケージ」を右クリックして「新規」メニューから「その他」を選択します。カテゴリ「Java」のファイル・タイプ「Javaパッケージ」を選択して「次へ」パッケージ名「com.example.beans」を入力して「終了」します。Faces」ファイル・タイプ「JSF管理対象Bean」を選択します。TemplateBeanというクラス名にして、SessionScopedを選択します。※なぜか自分の環境だと以下エラーが出ました(-_-;ありクラスはできてるのですが、管理対象になってないPOJO...原因不明です。画面でテンプレートの切り替え選択ができるように、トップページのindex.xhtmlを以下定義とします。長かったですが、これが最後です。以下2ファイルuser/index.xhtmluser/result1.xhtmlに以下の位置にviewタグを追加します。←bodyタグの手前に-->実行!さてやっとこ...終わった(^^;ふぅ実行すると以下の画面が表示されます。上にあるadminへのリンクを押してみます。blueフォルダのtemplateとCSSで表示されてます。トップ画面に戻って、ラジオボタンの選択を下に変更します。Applyボタンを押下するとgreenフォルダのtemplateとCSSで表示されています。表示されたのを見て気づきましたが、チュートリアルのほうではヘッダの文字がちゃんと「Red」「Blue」「Green」と変わってますが、その手順はなかったような...(見逃していたらすみません)というわけで、一応、それぞれのテンプレートを書き換えて再度実行。ヘッダの文言を「赤」に修正ヘッダの文言を「青」に修正ヘッダの文言を「緑」に修正というわけで、ちゃんと複数のテンプレートがつかえています(^^)「PrimeFacesのテーマも似たようなことできるじゃん?」と一瞬思うかもしれませんが、テーマではCSSを変えることはできても、テンプレートを動的に変えることはできなかったので、そこが大きく違うかと思います。Contractsに関する情報があります。EE7に...2013-11-01JSFでもレスポンシブWebをやってみたい!Twitterで以下の情報が流れてました。ヶ月)長らくC#屋でした。EEを触ることになりました。Web開発も初めてです。日々の勉強メモとしてブログ作成。デビュー当時から堀北真希さんを愛するエンジニアです。現在は乃木坂46が大好きです。(15)にほんブログ村にほんブログ村はてなブログをはじめよう!kikutaro777さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。