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

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

2013年8月21日水曜日

XPagesでplaceholderを実現してみる

東京都心部では大雨が降っています(2013年8月21日)。猛暑のせいで、全国各地のダムの貯水量が減ってきているとのことですが、ぜひ、そういうところに雨が降ってほしいものです。


さて、ちょっとXPagesアプリケーションを作成していてわからなかったことが解決できたので、備忘録という形で記事に残しておきます。
中身を見る前に、恒例のボタンクリックをしましょう。
にほんブログ村 IT技術ブログへ



今日の話題はplaceholderについてです。
placeholderとは、テキストボックスに、グレーの色で薄く表示されているガイドテキストです。
facebookに投稿する際のテキストボックスに表示されている文字列ですね。
Placeholderって何?

この表現方法はHTML5で実装されたもので、最近では色々なWebサイトで見かけると思います。

XPagesでも、この技?が使えるんですよ。
Notes/Domino 8.5.3からとなりますが、その設定方法を説明します。


まずは、編集ボックスコントロールを設定します。
まぁ、当たり前ですね。
次に、プロパティビューで「すべてのプロパティ」を表示します。
ということは、他のタブでは設定できないんですね。残念。

そして、この中にある「基本」「attrs」を見ます。
すると[+]というボタンが表示されるので、そこをクリックします。
attr[0]が出来上がるので、その中の「name」と「value」に値を設定します。
今回はplaceholderの設定をしたいので、「name」には"placeholder"と入力、
「value」には表示させたいメッセージを入力します(下図参照)。
placeholderの設定

これで保存すれば終了です。簡単ですね!

下図は実行時の画面です。
実行直後なので何も入力されていません。なので、placeholderに設定した値が表示されています。
実行時の画面(まだ何も入力していない)

ここで、編集ボックスに文字列を入力したのが下図です。placeholderに設定した内容が消えて、実際に入力した値が表示されています。
実行時の画面(文字を入力してみた)

検索ボックスや氏名の入力など、細かい説明をするまでもないような箇所に設定するとわかりやすくて良いでしょう。



従来のノーツアプリケーションでも、同等な機能がありますね。
ノーツアプリケーションでのplaceholder機能


ということは、ノーツアプリケーションをXPagesにする際も安心!なんですね。

ノーツでWeb化するならXPages!」 「ノーツアプリケーションの改修はXPagesで!

では、今日はこれまで。






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

0 件のコメント: