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

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

2011年10月3日月曜日

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

10月になりました。衣替えですね。今週末はLotus Knows Expo 2011が開催されます。
楽しみですね!

さて、連載の3回目です。
今回は、前回の予告通り、containerコントロールを編集して、共通レイアウトの部分を作成します。


では、いつものようににほんブログ村 IT技術ブログへ
を押してから先に進んでください。

Lotus Domino Designerで「図書管理」を開いたら、左側のツリーから「カスタムコントロール」を選択してダブルクリックします。
さくせいしたcontainerコントロールが表示されるので、それをダブルクリックして開きます。
カスタムコントロール画面

では、実際に編集していきましょう。

まずは、パネルを組み込みます。これはHTMLタグでいうと、<div>タグになります。
[コントロール]ビューから、「パネル」 (*1)を選択して、containerコントロール画面にドラッグ&ドロップします。(*1 コンテナコントロールというカテゴリの中にあります。)

このパネルの名前は「frame」とします。

さらに、パネルを追加します。このとき、ドラッグ&ドロップする際、今追加したframeパネルの中にドロップするようにしてください。
このパネルの名前は、「header」とします。
containerコントロールにパネルを追加

さらに、パネルを4つ追加します。
それぞれ名前を「main」「tab」「content」「footer」とします。
ここで、適当に追加してしまうと、思ってもいない場所に設定されてしまいます。

そんなときは、[アウトライン]ビューに表示されているコントロールをマウスで選択して、好きな場所にドラッグ&ドロップします。

ここでは、下図のような順番に並べ替えます。
containerコントロールのパネルの並びを変更した状態

また、前回作成したラベルを「header」コントロールの中に移動しておきます。


今度は、containerコントロールのスタイルを設定してみましょう。
スタイルシートを使うと自由に設定できますが、ここではLotus Domino Designerに設定されているプロパティでどこまでできるかを確認するために、そちらでやっていきましょう。
(Dojoについては、IBMの新人SEが学ぶXPagesに詳しく出ていますので、そちらを参照してください。 )

さて気を取り直して、最初にheaderパネルの設定を行います。
パネルのプロパティを見ると・・・
大きさや背景を設定できるようです。
パネルのプロパティ

ということで、大きさと背景色を設定してみましょう。
大きさは、「高さ」を47ピクセルにします(これは、適当な数値にしてください)。
背景は、単色はつまらないのでグラデーションにしてみましょう・・・ってできません!
ノーツの表ならグラデーションが描けるのに・・・仕方がないので、グラフィックで代用します。

グラフィックの作成には、Lotus SymphonyのPresentationを使います。
Lotus Domino DesignerでXPagesを作成しようという方なら導入済みでしょうから(笑)
[作成][図形描画オブジェクト]メニューを実行すると、図形描画オブジェクトのツールバーが表示されるので、そこから四角形を選択して、適当な大きさにドラッグ&ドロップします。

この図形を選択したまま、右側のメニューから[その他の形状プロパティ]を選択すると、プロパティ画面が表示されます。

[領域]タブで色を選択して、[透明度]タブでグラデーションを選択します。
[線]タブで非表示にすれば、グラデーションの図形ができあがりました。
後は、ペイント等を使って大きさを調整します。gifもしくはjpegで保存しておいてください。
ちなみに、筆者はこんなグラフィックを作成しました。
headerパネル用の背景グラフィック
 
わかりやすいように、幅はちょっと太めにしてあります。


さて、グラフィックが作成できたらLotus Domino Designerに戻ります。
headerプロパティの背景タブを選択して、[イメージのURL]の横にあるフォルダのアイコンをクリックします。
画像の選択画面

画像の選択画面が表示されるので、[追加]ボタンをクリックして、さきほど作成したグラフィックを追加します。右側に画像が表示されたら、[OK]をクリックします。

ついでにラベルの設定もしてみましょう。
ラベルのプロパティ
同様にtabパネルにもグラフィックを設定します。
ここでは筆者はこんなグラフィックを作成しました。
tabパネル用の背景グラフィック

ここまででcontainerコントロールはこんな画面になりました。
containerコントロールの画面


というところで、今日は終わります。
中途半端でごめんなさい。


次回で、ひとまずcontainerコントロールの編集を完了にしましょう。

では。

Lotus Expo 2011で会いましょう(あ。筆者は一般参加者として紛れています)。


【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】



単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

0 件のコメント: