アプリケーションレイアウト-Bootstrapを勉強する

 

こんばんはタラー

毎日毎日暑いですねゲロー

 

梅雨明けしてないのにこの暑さ・・・

こんな時は涼しい場所でXPagesの勉強をしましょう照れ

 

前回、アプリケーションレイアウトのBootstrap3についてどのような動きをするか?書きました。

と言ってもとりあえず作成しないと検証できないと思いますので、

簡単ですが書いていきたいと思います。

 


ビュー用XPageとフォーム用のXPageを作成
・現段階では何も設定しなくて問題ありません。

カスタムコントロールを3つ作成する
・カスタムコントロールA:一覧ビューをバインディングしたもの

・カスタムコントロールB:Mainフォームをバインディングしたもの

・カスタムコントロールC:アプリケーションレイアウトのBootstrapを追加したもの

 

カスタムコントロールA・Bに関してはあとで使いますので事前に作成しておいてください。

ここでは、カスタムコントロールCについての作成方法を書きたいと思いますニコニコ

 

1)カスタムコントロールを作成します。
筆者はccLayoutとしました。

拡張ライブラリから「アプリケーションレイアウト」を追加します。
どのアプリケーションレイアウトにするか聞かれるので、Responsive Bootstrap Configuration」を選択します。


オプションは後で設定するのでここは何もせずに終了します。


2)各設定を行う

アプリケーションレイアウトタブを選択し、ドロップターゲット「中央の列」にチェックを入れます。


バナータブを選択し、好きなイメージを選択します(省略可)


アプリケーションリンクタブを選択し、label・pageを設定します。
pageはビュー用XPageを選択して下さい。


タイトルバータブを選択して、タイトルテキストの右隣にある◇をクリックし、「@DbTitle()」を記述します。


検索タブを選択して、ページ名はビュー用XPageを選択します。
検索コントロールのチェックを忘れずにつけてください。
※検索を使用する場合は、索引の作成が必要になりますので、事前に作成していてください。


フレーズバータブを選択して、項目の追加→ページリンクノードを選択→label・pageを設定します。

 

pageはフォーム用XPageを選択して下さい。



フッタータブを選択して、項目の追加→基本ノードを選択しプロパティを選択します(省略可)



リーガルタブを選択し、イメージを追加、テキストにコピーライト等を書き込みます(省略可)


拡張ライブラリから「ナビゲータ」を選び、アプリケーションレイアウトの「LeftColumn」のに配置します。


ナビゲータのナビゲーション項目タブを選択し、項目の追加→ページリンクノードを選択→

label・pageを設定します。

pageはビュー用XPageを選択して下さい。

 



以上で保存します。

3)各XPageにLayoutカスタムコントロール配置する

 

ビュー用XPageにLayoutカスタムコントロールを配置します。

 

 

カスタムコントロールAをfacetMiddleの右隣のに配置します。




保存します。

次にフォーム用のXPageを開き、先ほどと同じように

Layoutカスタムコントロールを配置します。

そしてカスタムコントロールBをfacetMiddleの右隣のに配置します。





保存して閉じます。

4)動作確認を行う

では完成したビュー用XPageをブラウザから開きます。

正しく表示されましたでしょうか?
続いて、ビューから文書を1つ選んでリンクをクリックします。


文書が問題なく開きましたでしょうか?

レスポンシブにも対応しているか確認します。


対応しているようですね、よかったおーっ!


今回追加されたアプリケーションレイアウトを使用することで
比較的に簡単に実装することが出来ました。
他にもBootstrapの機能はありますので、皆さまも是非試してみてくださいグッ



では今日はこの辺で・・・



あでゅーバイバイ

 

AD