2010/01/11

XPages Tutorial Part 38 : 顔写真などのイメージをアップロードする方法

Uploading An Image For The Person's Picture {Original Source}

現在 Person Details の XPage の上部には「No Image Found」というテキストが固定で埋め込まれています。今回はファイルのアップロードコントロールを追加して、イメージのアップロード方法とそのイメージを先ほどのテキストエリアに追加/変更することを行います。

フォーム上には既に「jpegPhoto」というリッチテキストがありますので、ここに添付ファイルを格納するようにします。
では「content_Person」を開き、下のようにイメージが表示されている下に「ファイルのアップロード」コントロールをドラッグインします。

次にファイルアップロードのプロパティで JPEG のファイルだけを受け付けるようにオプションを設定します。そして、アップロードされたファイル名がなんであれ「thumbnail.jpg」に変更するようにします。
以前から申し上げているように、このようなオプションには青いダイアモンドがついているので値の計算をさせることも可能です。たとえば、ファイル名を人名のイニシャルと姓の組み合わせにするなどが考えられます。

アップグレードのオプションは文書が編集モードのときだけ表示されるようにしなければなりません。
前回「Save Document」ボタンで使用したのと同じ JavaScript の personDoc.isEditable(); の値を使用して表示をコントロールしてください。
また、イメージが埋め込まれているところは !(personDoc.isEditable()); の値で文書が編集モードの際に非表示になるようにしてください。これはちょうど「Edit Document」ボタンと同じです。

次にデータタブに切り替えてください。このコントロールを下のように「jpegPhoto」フィールドとデータバインディングする必要があります。

さて次はこの上のイメージコントロールです。ファイルがアップロードされて文書が保存されたらこのイメージを表示させるようにしなければなりません。
イメージを選択し、そのオプションの中の「イメージリソース」の右にあるダイアモンドをクリックし値の計算を選び、下のコードを入力してください。

var personImage:String = "noImage.png"; 

var attachmentList:java.util.List = personDoc.getAttachmentList("jpegPhoto"); 
if (!attachmentList.isEmpty()){ 
        var attachmentObject:NotesEmbeddedObject = attachmentList.get(0); 
        personImage = "/0/" + sessionScope.personDocID + "/$FILE/" + attachmentObject.getName(); 
} 

return personImage; 

上のコードを説明しますと、まずファイルリソースを「noImage.png」をデフォルトとして設定します。
次に「jpegPhoto」フィールドのすべての添付のリストを作成しています。複数の添付ファイルがある場合には一番最初のリスト上のエントリから NotesEmbeddedObject の変数を作成し、/0/DocumentUNID/$FILE/attachmentName.xyz のゼロメソッドを使用して URL を計算します。DocumentUNID は sessionScope から入手しています。このセッションスコープはもともと Location XPage の表形式での人名一覧からクリックされたときに設定されているものです。

これがイメージをアップロードする前の状態

そして、これがイメージをアップロードして文書を保存した後に再表示した状態


これまでいろいろな妥当性検査の方法や、イメージをアップロードする方法を見てきました。これでアプリケーションとして使用できるようになってきました。

次回はアプリケーションのセキュリティに関して見ていきたいと思います。

0 件のコメント:

コメントを投稿