2010/01/11

XPages Tutorial Part 37 : ページへリッチテキストコントロールの追加

Adding A Rich Text Control To The Form {Original Source}

これまでの Web ベースのアプリケーション開発でリッチテキストを扱うことはちょっと面倒なことでした。これまでいくつかのソリューションがありましたが、例えば BlogSphere ではフィールドを MIME にコンバートし、HTML へ書き出したあとすべての内部リンクをコンバートしながら添付されたイメージを実際のリンクにするといったことをしなければなりませんでした。
その他の方法としては Domino 向けの FcskEdit やTinyEdit、Genii Software から出ているツールなどを利用しなければなりませんでした。
今回は XPages でこのリッチテキストフィールドに対して何ができるかをみるため、まず「About Me」のセクションにリッチテキストフィールドを追加したいと思います。

では「Person」フォームを開いて、「AboutMe」というフィールドをリッチテキスト型で作成してください。

ではフォームを保存して「content_Person」カスタムコントロールを開いてください。
この About Me 用にタブ付きパネルに新しいタブを作成します。
新しいタブを追加するには、タブ付きパネルのタブのあたりを右クリックし、コンテキストメニューから「タブを追加」の選びます。
すると新しいタブが追加され自動的にそのプロパティが表示されるはずです。
このタブのらラベルを「About Me」に変更して、このコントロールの上に「リッチテキスト」コントロールをドラッグインしてください。


ここでリッチテキストエディタが現れたと思います。続いてそのプロパティを見ていただくとこのリッチテキストをコントロールできることや、どのデータをリンクさせるかといった情報が確認できます。
以前このカスタムコントロールで定義したデータソースの名前は「personDoc」だったと思いますが、プロパティのデータタブに切り替えて、データバインディングを下のように指定してください。

ではこのカスタムコントロールを保存し、ページを再読み込みしましょう。ログイン後に、Person のページを出し「About Me」のタブとその中のフィールドが現れていることを確認してください。


XPage 上で行った変更を保存すると、同じようにドミノのフォームにもリッチテキストのフォーマットで保存されます。

ここまで見てきたリッチテキストを使用はまだほんの初歩的なことです。
イメージを直接ここに張り付けたり、リンクを付けたりする方法が CSS の問題のせいでできず良い方法がまだ見つかっていません。保存した後に読み取りモードで文書を開くとわずかに高さが違っていたりすことがあります。これを解決するのに CSS を考えなければと思っています。

次回は PersonDetails のページのヘッダーにあたる顔写真をアップロードする方法を見ていきます。

1 件のコメント:

  1. はじめまして、スズキと申します。
    リッチテキストの内容をチェックしたいと思い、ボタンを貼り付け、クライアントサイドでのJavaScript を記入しました。
    リッチテキスト.valueで値を取得しようと試みましたが、ボタンを2回押さないと値が取得できませんでした。
    firefoxでは反応なし。
    リッチテキストで必須チェックは出来ないのかな?

    返信削除