2019年3月17日日曜日

表の角を丸くする仕組み

前回の「のの会」でのお話です。
Domino Domain Monitoring (DDM) についてアクセルの岡本さんがお話されている時、DDM.nsf 内にあるイベント文書を開き「この角が丸い枠はどうやってんねやろ?」みたいなことをおっしゃってました。

下図は ddm.nsf のイベント文書を開いた画面の一部です。色のついた四角の角が丸くみえます(追加した2つの赤い矢印で示しました)。

言われてみればどう実現しているのか説明できないぞ?!ということで、その場で設計を覗いてみました。

すると表の周りを角の丸い四角でふちどっているような感じでしたので、表に何らかの仕掛けがあるのかと考え「表のプロパティ」をチェックしてみました。すると「境界線のスタイル」に"イメージ"が選択され、さらに「イメージ」として "TableBorderRed.gif" が指定されていることがわかりました。(下図)


そしてのの会の翌日、ddm.nsf 内の「イメージリソース」にある TableBorderRed.gif をエクスポートしてペイントで開いてみると、サイズが横193px 縦146px、薄い赤色で角の丸い四角形が描かれていました。


なるほど。表の外側を特定の画像(の縁)で縁取ることができるようです。

しかし、Notesの表というのは表全体の幅がウィンドウやフレームの幅にあわせて変化したり、表の中に表示するものによっては縦に伸びたりする場合があります。
TableBorderRed.gif の縦横のサイズは、フォーム上に表示されれている表とは全く異なりなりますが、違和感なく表のまわりに表示されています。

この仕組みをみていきたいと思います。

下図の画像(以降「元画像」と呼びます)を用意してみました。これをイメージリソースへ登録します。


そして表のプロパティで境界線の「イメージ」に指定したものがこちらです。
左上を拡大すると次のように見えます。どうやら「伸びている」のではなく「繰り返している」ようですね。

では、元画像のどの部分を繰り返しているのでしょうか。

元画像のサイズは 24 x 24 の正方形です。下のように縦横三等分して9つの枠で示すことができます。この9つの枠それぞれに「左上」「中」といったように名前をつけてみました。

これを先の拡大図にあてはめてみると、次のようになります。
左上隅に、元画像の「左上」が表示されました。
左上の下側には、元画像の「左」が縦方向に繰り返し表示されます。
また「左上」の右側には、元画像の「上」が右方向に繰り返し表示され、「左」の右側と「上」の下側には「中」が繰り返し表示されました。

さて、縦横三等分した「左」と「上」と「中」が繰り返されていることがなんとなくわかったので、表の右側も見ていきます。下は表の右上を拡大したものです。
最上段では「上」が右方向に繰り返し表示され、最後に「右上」が表示するのですが、表のサイズは元画像の倍数とは限りませんので、余りが生じる場合があります。その余りとして「上」が部分的に表示されました。
「右上」の下側にある「右」の左に接するものも同様に「中」が部分的に表示されました。

続いて表の左下です。
 表の左側では「左」を縦方向に繰り返し表示して、最下段に「左下」を表示しますが「左」と「左下」の間には余りとして「左」が部分的に表示されました。
「左下」の右側は「下」が繰り返し表示されますが、その「下」の上に接する「中」も余りとして部分的に表示されました。

そして最後は表の右下の拡大図です。
表の右下の隅には元画像の「右下」が表示され、それに接する「中」「右」「下」が部分的に表示されました。

表の伸縮へは、元画像の「上」「右」「下」「左」「中」の繰り返しと、幅と高さの余りの調整にそれらを部分的に表示することで対応していることがわかりました。


ところで、皆さんは「データベースライブラリ」というデータベースをご存知でしょうか。Dominoサーバーやローカルにあるデータベースを登録することができるデータベースです。バージョン 10.0.1では、テンプレート "Application Library (8)" dblib4.ntf を使って作成できます。

「データベースライブラリ」にデータベースを登録し、登録した文書を開いたものが下図になります。

本を横にしたような画像があり、その背表紙には登録したデータベースのタイトル(図では ”HTTPRequest” )が表示されます。

ここへ登録したデータベースのタイトルが長い場合、下図のように本の中に納まってくれません。これが個人的にはすごーーく気になっていたのです。

この不具合は表の境界線で”イメージ”を活用することで改善できそうです。
次回はこれを改善してみようと思います。

0 件のコメント:

コメントを投稿