概要

現状の課題:

- 現在、ユーザーは添付ファイルを手動でダウンロードしたあと、ローカルのハード・ディスクから開かなければなりません。 ダウンロードせずに、ファイルをブラウザーで表示することができるとより便利です。画像、PDF、および Flash ムービーの 3 つのファイルタイプではそれが可能です。

Quickr 内の添付ファイル:
以下は、オリジナルのビューです。ここに示されている PDF を表示するには、ユーザーはその PDF をダウンロードする必要があります。

変更を実装するために行うべきこと:

• 添付ファイルの通常のダウンロード・オプションを表示する呼び出しをオーバーライドするコードの記述
• 該当するファイル・タイプの場合にはページ内に添付ファイルをレンダリングし、それ以外の場合はデフォルトのダウンロード・オプションを表示するコードの記述
• 新規の JavaScript ファイルを既存の JavaScript 拡張ファイルにロード

上に戻る

関連ファイル

ここに、Quickr の現行のファイルを収集してあります。これらのファイルを変更して新規のリンクが表示されるようにします。

まず、フォルダー構造 qext\inlineAttachments under qphtml\skins を作成します。 このフォルダーに変更したファイルが保管され、ウィジェット拡張レジストリーによって、通常のファイルの代わりとしてロードされます。

以下のファイルを qphtml\widgets\page ディレクトリーから新規のディレクトリー qphtml\skins\qext\widgets\page にコピーし、貼り付けます。

1. page\field\singleAttachment.js – inlineAttachments\defaultAttachment.js に名前変更します。
2. page\field\singleAttachment.js – inlineAttachments\pdfAttachment.js に名前変更します。
3. page\defaultUpload.js - inlineAttachments\customUpload.js に名前変更します。
4. page\defaultUpload.xsl – inlineAttachments\customUpload.xsl に名前変更します。

上に戻る

変更が必要な箇所

defaultAttachment.js:
defaultAttachment.js ファイルから、renderRead 機能以外のすべての機能を削除します。これを defaultUpload に名前変更します。 ファイルの定義を quickr ではなく、qext に変更します (以下を参照)。 URL パスに誘導するためにいくつかの機能も追加します。 完了すると、ファイルの全体的な構造は以下のようになるはずです (各機能は以下で説明)。

dojo.provide("qext.inlineAttachments.defaultAttachment");
dojo.declare("qext.inlineAttachments.defaultAttachment", null, {
		
			
		defaultUpload: function(aValue, addNode) {
		  ...},
		getValue(){...},
		getNode(){...},
		getSrc(){...}
	
  });

defaultUpload 機能は、「renderRead」機能に似ています。この機能は、PDF 以外のファイルが呼び出されたことをウィジェットが検出すると、添付ファイルのデフォルトのダウンロード/プレビュー・リンクを持つスパンを作成します。

コード例：defaultUpload 機能

その他の 3 つの機能は、すべての添付ファイルが必要とするデータを生成します。

添付ファイルのファイル名:

 getValue: function(startingValue) {
	var aValue = startingValue.replace(/\n/g,"").split(",");  
	if(aValue.length === 2 && aValue[1] === ""){
		aValue = [aValue[0]];
	}
	return aValue;
 },

添付ファイルが
含まれるページ:

 getNode: function(UNID) {
	var addNode = dojo.doc.createElement("div");
	addNode.id = UNID;
	addNode.className ="lotusSection";
	return addNode;
 },

添付ファイルの完全 URL:

getSrc: function(UNID, aValue, serverURL, placeName) {
	var fileSrc = serverURL + placeName;
	fileSrc += "/0/";
	fileSrc += UNID;
	fileSrc +="/$file/";
	fileSrc +=aValue;  
	return fileSrc;
}

customUpload.js:
通常のアップロード・ページで可能なことはすべてウィジェットでできるようにするために、defaultUpload.js ファイルの機能を継承します。唯一の変更点は、新規 XSL ファイルにウィジェットを関連付けることです。

dojo.provide("qext.inlineAttachments.customUpload");
dojo.require("quickr.widgets.page.defaultModalPage");
dojo.require("qext.inlineAttachments.defaultAttachment");
dojo.require("qext.inlineAttachments.pdfAttachment");
dojo.require("qext.inlineAttachments.imageAttachment");
dojo.require("qext.inlineAttachments.flashAttachment");
dojo.declare("qext.inlineAttachments.customUpload",
	[quickr.widgets.page.defaultModalPage],
	{
		xslSource: "/qphtml/skins/qext/inlineAttachments/customUpload.xsl"
	}
);

customUpload.xsl:
ウィジェットと、通常のアップロード・ページの唯一の相違点は、添付ファイルセクションにあります。したがって、以下のコードにより XSL ファイルのセクションを置き換えます。
これにより、PDF ファイルであることが確認された後に、ファイルの埋め込みに適切な JavaScript ファイルが呼び出されます。
インラインで表示するその他のファイル・タイプ (.swf および 画像) についても、後で戻って編集し直さなくてもいいように、ここで説明します。
求めるファイルのファイル・タイプと一致しないファイル・タイプの場合、デフォルトの Quickr 添付ファイル・ページを使用します。

コード例：customUpload

pdfAttachment.js:
このウィジェットは、defaultAttachments のすべての機能を継承しています。
_isPdf 機能は、ファイルが PDF かどうかをチェックし、PDF でない場合には、継承された defaultUpload 機能を呼び出します。
この機能は、添付ファイルの拡張子が pdf 形式のファイルと一致すると、TRUE を返します。
文書をレンダリングする場合、サーバーの URL を取得し、これを使用して添付ファイルの URL を検索して PDF をロードするタグを作成します。

コード例：pdfAttachment

上に戻る

ウィジェット拡張レジストリーの変更

ここでは、デフォルトのページ・ウィジェットの代わりに新たに編集したファイルを呼び出して、Quickr が常に、埋め込みたい添付ファイルを持つページを表示するように指定します。

これを行うには、ウィジェット・レジストリーを使用します。
ウィジェット・レジストリー拡張ファイルによって、新規 dojo モジュールの定義、新規ウィジェットの登録、およびウィジェットが呼び出される際の条件を定義することができます。
これにより、グローバルにも、ローカルにもウィジェットを置き換えることができます。
ファイルは、データ「\domino\html\qphtml\widgets\」内にあります。

widgetRegistryConfig_ext.js ファイルに新規 Widget を登録して、新機能をロードすることができます。 この場合、ユーザーがアップロードされたファイルを表示しているときは常に、ウィジェットを表示させることのみを考えます。

customUpload ウィジェットをデフォルト・ページの代わりにロードし、表示します。スタイル・シートは、ページのコンテンツを分析して PDF が添付されている場合は PDF ウィジェットをロードし、それ以外の場合はデフォルトのアップロード・ページをロードします。

{
	registerWidgets:
	[
		//Register the Quickr APIs
		{
            type:  'REGISTERMODULEPATH',
            name:  "qext.inlineAttachments",
            path:  "/qphtml/skins/qext/inlineAttachments"
		},
		{
type: 'GLOBALREPLACE',
source: "quickr.widgets.page.defaultUpload",
use: "qext.inlineAttachments.customUpload"
}
		
	
	]
}

上に戻る

インライン添付ファイル

これで、PDF をアップロードしたとき、Quickr 内に直接 PDF を表示できるようになりました。

以下は、上記と同じアップロードされた PDF ページを示しています。

上に戻る

例 2: Quickr 内の画像添付ファイル

以下は、Quickr 内で画像添付ファイルが本来どのように表示されるかを示しています。ここでも、添付ファイルを直接ユーザーのブラウザーに埋め込むことにします。

変更を行う

ここで行う変更は、PDF 添付ファイル用に行った変更と非常によく似ています。作成した同じ defaultAttachment ファイルを使用して、作成した残りの 3 ファイルの「画像」バージョンを作成します。

inlineAttachments\pdfAttachment.js のコピーを作り、inlineAttachments\imageAttachment.js に名前変更または移動します。

imageAttachment.js の編集:

imageAttachment.js 内で、_isPdf 関数 を _isImage 関数と置き換え、サポートされている画像で作業していることをもう一度確認します。

また、画像の最大サイズを 600 ピクセルに定義します。画像が 600 ピクセルよりも大きい場合には、ロード中非表示になり、幅と高さがリセットされた後で表示されます。

コード例：imageAttachment の編集

上に戻る

インライン画像

画像添付ファイルを処理するために、すでにウィジェット・レジストリー・ファイルを変更しているので、もう一度編集する必要はありません。

すべての変更が完了すると、前に示した画像添付ファイルは、以下のように表示されます。

上に戻る

例 3: Quickr 内の Flash 添付ファイル

以下は、Quickr 内で shockwave 添付ファイルが本来どのように表示されるかを示しています。

変更を行う

ここでも、変更の方法は前の添付ファイル・タイプと非常によく似ています。

pdfAttachment.js のコピーを作り、inlineAttachments\flashAttachment.js に名前変更します。

flashAttachment.js の編集:

flashAttachment.js 内で、_isFlash 関数は .swf files の添付ファイル・タイプをダブル・チェックします。

_isFlash: function(filename) {
	filename = filename.toLowerCase().toString();   
	var  exts = [".swf"];
	for(x in exts){
		var lastIndex = filename.lastIndexOf(exts[x].toLowerCase());
		if(lastIndex != -1) {
			return true;
		}
	}
	return false;
}

次の「if」セクション、「if (aValue.length === 1 && this._isPdf(aValue[0])) {....}」を以下のコードと置き換えて、フラッシュ・オブジェクトを作成します。

コード例：flashAttachment の編集

上に戻る

インライン Flash 添付ファイル

ここでも、ウィジェット・レジストリーをこれ以上変更する必要はありません。

すべての変更が完了すると、前に示した Flash 添付ファイルは、以下のように表示されます。

著者について

この記事を評価する

コメント

上に戻る

目次

• 概要
• 関連ファイル
• 変更が必要な箇所
• ウィジェット拡張レジストリーの変更
• インライン添付ファイル
• 例 2: Quickr 内の画像添付ファイル
• インライン画像
• 例 3: Quickr 内の Flash 添付ファイル
• インライン Flash 添付ファイル
• 著者について
• コメント