こんばんは
毎日毎日暑いですね
梅雨明けしてないのにこの暑さ・・・
こんな時は涼しい場所でXPagesの勉強をしましょう
前回、アプリケーションレイアウトのBootstrap3についてどのような動きをするか？書きました。
と言ってもとりあえず作成しないと検証できないと思いますので、
簡単ですが書いていきたいと思います。
ビュー用XPageとフォーム用のXPageを作成
・現段階では何も設定しなくて問題ありません。
カスタムコントロールを３つ作成する
・カスタムコントロールA：一覧ビューをバインディングしたもの
・カスタムコントロールB：Mainフォームをバインディングしたもの
・カスタムコントロールC：アプリケーションレイアウトのBootstrapを追加したもの※
カスタムコントロールA・Bに関してはあとで使いますので事前に作成しておいてください。
ここでは、カスタムコントロールCについての作成方法を書きたいと思います
１）カスタムコントロールを作成します。
筆者はccLayoutとしました。
拡張ライブラリから「アプリケーションレイアウト」を追加します。
どのアプリケーションレイアウトにするか聞かれるので、Responsive Bootstrap Configuration」を選択します。
オプションは後で設定するのでここは何もせずに終了します。
２）各設定を行う
アプリケーションレイアウトタブを選択し、ドロップターゲット「中央の列」にチェックを入れます。
バナータブを選択し、好きなイメージを選択します（省略可）
アプリケーションリンクタブを選択し、label・pageを設定します。
pageはビュー用XPageを選択して下さい。
タイトルバータブを選択して、タイトルテキストの右隣にある◇をクリックし、「@DbTitle()」を記述します。
検索タブを選択して、ページ名はビュー用XPageを選択します。
検索コントロールのチェックを忘れずにつけてください。
※検索を使用する場合は、索引の作成が必要になりますので、事前に作成していてください。
フレーズバータブを選択して、項目の追加→ページリンクノードを選択→label・pageを設定します。
pageはフォーム用XPageを選択して下さい。
フッタータブを選択して、項目の追加→基本ノードを選択しプロパティを選択します（省略可）
リーガルタブを選択し、イメージを追加、テキストにコピーライト等を書き込みます（省略可）
拡張ライブラリから「ナビゲータ」を選び、アプリケーションレイアウトの「LeftColumn」の●に配置します。
ナビゲータのナビゲーション項目タブを選択し、項目の追加→ページリンクノードを選択→
label・pageを設定します。
pageはビュー用XPageを選択して下さい。
以上で保存します。
３）各XPageにLayoutカスタムコントロール配置する
ビュー用XPageにLayoutカスタムコントロールを配置します。
カスタムコントロールAをfacetMiddleの右隣の●に配置します。
保存します。
次にフォーム用のXPageを開き、先ほどと同じように
Layoutカスタムコントロールを配置します。
そしてカスタムコントロールBをfacetMiddleの右隣の●に配置します。
保存して閉じます。
４）動作確認を行う
では完成したビュー用XPageをブラウザから開きます。
正しく表示されましたでしょうか？
続いて、ビューから文書を1つ選んでリンクをクリックします。
文書が問題なく開きましたでしょうか？
レスポンシブにも対応しているか確認します。
対応しているようですね、よかった
今回追加されたアプリケーションレイアウトを使用することで
比較的に簡単に実装することが出来ました。
他にもBootstrapの機能はありますので、皆さまも是非試してみてください
では今日はこの辺で・・・
あでゅー