当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。

テクてく Lotus 技術者 Slack に参加しよう!

2011年10月16日日曜日

おじさんSEが学ぶXPages(4)

前回の投稿から2週間1週間(ぼけてましたね)が経過してしまいました。
つまりもう10月も半ばという事です。もう年の瀬はすぐです。あっという間です。




では、今回もボタンクリックをしてくださいね。
にほんブログ村 IT技術ブログへ



さて・・・前回は・・・
えーっと、あぁ、containerコントロールの編集をしていて途中で終わってしまったんでしたね。
今回はその続きをやりましょう。

containerコントロールのheaderパネルとmainパネルに背景色をつけました。
残るfooterパネルにも設定をしましょう。
右側のコントロールビューから「ラベル」を選択して、footerパネルの中にドラッグ&ドロップします。
ラベルの内容は「Copyright (C) 2011 ef Co.,Ltd All Rights Reserved.」とします。みなさんは適当に何か書いてください。

作成したラベルはフレーム内の一番右側に配置するようにしてみましょう。
画面左側のアウトラインビューでfooterパネルを選択します。
[フォント]タブを開いて、「文字揃え」の中の[右揃え]ボタンをクリックします。
footerパネルの[フォント]タブ

これでさきほど作成したラベルがパネル内で右側に寄せられました。

では、今度はframeパネルの設定をもう少し変更します。
frameパネルを選択したら、[余白]タブを選択します。
余白を選択しておかないと、xPagesの画面を開いたときに幅がいっぱいいっぱい表示されてしまうので、あまり格好良くありません(アプリケーションによっては、その方が良いかもしれませんが)。

ということで、ここでframeパネルの余白を設定します。
今回は、上下左右 すべて同じ設定にしてみます。
単位は、「ピクセル」を選択します。すると、左側のボックスに数値が入力できるようになりますので、「10.0」と入力します。

frameパネルの[余白]タブ

この数値は、皆さんの好みで設定してください。


次にtabパネルの中に「タブ付きパネル」を設定してみます。
画面をタブで切り替える事が出来るコントロールです。
コントロールビューの「コンテナコントロール」から[タブ付きパネル]を選択して、tabパネルの中にドラッグ&ドロップします。

タブが2つの状態で追加されましたね。
ただ、タブの名前が、"新規タブ"、"新規タブ2"になっているので、それを変更します。

アウトラインビューで、タブ付きパネルを見ると、左側に△ボタンがあるはずです。そこをクリックしてみると、「タブパネル」というコントロールが2つ表示されます。
そのうち、上の「タブパネル」をクリックします。

プロパティビューに「タブパネル」の情報が表示されました。
ここで名前トラベルをそれぞれ次のように設定します。
上のタブ 名前:homeTab、ラベル:蔵書一覧
下のタブ 名前:IssueguidesTab、ラベル:貸し出し一覧


タブ付きパネルを追加した


せっかくタブを作成したので、それぞれのタブをクリックしたときの動作を設定しておきます。
「蔵書一覧」のタブを選択したら、「イベントビュー」を開きます。
[アクションの追加]というボタンがあるのでクリックします。
「アクション」は"ページを開く"、「開くページの名前」は"home"にして[OK]をクリックします。
タブのシンプルアクション

同様に、「貸し出し一覧」のタブにもアクションを追加します。
「アクション」は"ページを開く"、「開くページの名前」は"Issueguides"にして[OK]をクリックします。

これで、タブをクリックすると、設定したページが開くようになります。

ですが・・・
Issueguidesのページには、何も設定してありません。
ということで、Issueguidesページを開いて、containerコントロールを追加しておいてください。


ここで、作成したxPagesを実際に開いてみると分かるのですが、タブをクリックすると画面は切り替わるのですが、タブはいつまでも「蔵書一覧」のままになっています。

これでは、タブの意味があまりないので、現在選択されているタブがなんなのかを分かるようにしましょう。
この設定は少々面倒です。

まずは、containerコントロールのプロパティビューを開きます。
その中の[プロパティ定義]というタブを開きます。
そうしたら、[新規プロパティ]ボタンをクリックして、新規にプロパティを作成します。
名前は任意ですが、「tabID」としておきます。種類は「string」としておきます。
新規プロパティを追加

これはcontainerコントロール全体で管理できる変数です。
ここに、タブが切り替えられた際に、どのタブが選択されたのかを格納します。


次に、 この値によるタブの切り替え方法を設定します。
「タブ付きパネル」を選択して、プロパティビューを開きます。
[タブ付きパネル]タブにある「オプション」の「デフォルトで開くタブ」にある◇をクリックして、[値の計算...]をクリックします。
画面の左側にグローバルオブジェクトの一覧が表示されるので、その中から「compositeData」を探します。見つかったら、△ボタンをクリックして展開します。

すると、そこにさきほど作成したプロパティの「tabID」が出来ているので、それをダブルクリックします。
右側の画面に表示されたら、[OK]をクリックします。
デフォルトで開くタブの設定画面

すると、デフォルトで開くタブのところが、青文字で"{計算済み}"に変わった事が分かると思います。

これで、プロパティの値によって、開くタブが変わります。



しかし、まだプロパティに値が格納されていませんので、何も変わりません。
では、どのようにプロパティを格納すればよいのかを見ていきます。

containerコントロールはここで保存しておきます。


あらかじめ作成してあった「home」XPageを開きます。
その中に表示されているcontainerコントロールを選択します。
そこで[すべてのプロパティ]タブを開きます。
その中に[カスタム][tabID]があるので、「値」欄に「蔵書一覧」のタブパネルの名前である"homeTab"を入力します。
これで、「home」XPageが開かれた場合は、「蔵書一覧」タブが選択された状態になります。

同様に、「Issueguides」XPageを開いて、[カスタム][tabID]の値に"IssueguidesTab"を入力します。

これで、タブ付きパネルの設定は完了です。



今度は、それぞれのタブを開いたときの画面を編集したいのですが、
今、編集しているのは、共通画面であるcontainerコントロールです。
このまま編集してしまうと、共通ではなくなってしまいます。

これを回避するために(というか、共通画面でも各ページ毎にコンテンツを変える事が出来るようにするために)、「編集可能領域」というコントロールを利用します。

コントロールビューのコアコントロールの中から、「編集可能領域」を選択して、contentパネルにドラッグ&ドロップします。
任意ですが、後々わかりやすくするために、プロパティビューで、これの名前を変更します。
名前とファセット名の両方を「contentData」としておきます。

編集可能領域のプロパティビュー


 と言ったところで、containerコントロールの編集は、ここで一度終わりにします。
次回からは、編集可能領域に設定するコントロールの内容を編集していきます。




【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

0 件のコメント: