ShowTable of Contents
Introduction
In this wiki we will explain how to embed a java applet to upload files to the Library.
The applet was present in Quickr 8.2 but then removed in Quickr 8.5.
The screenshot below is of the default layout of the Library view before our upload applet has been added.
Structure of the customization
The widget will contain two javascript files. One of the files will contain the code for embedding the applet in the page
and the other for positioning it under the TOC.
Positioning the applet under the toc
In this section we will explain how to position the applet under the TOC in the Library view.
Creating the Main JS File
First we are going to create the main javascript (js) file. For this example we are going to call it "appletLibrary.js".
All the files should be created in the "fileUploaderJava" directory, under /qphtml/skins/qext.
Insert the code below into the new js file:
dojo.provide("qext.fileUploaderJava.appletLibrary");
dojo.require("qext.fileUploaderJava.uploadAppletLoader");
dojo.require("quickr.widgets.view.library");
dojo.declare("qext.fileUploaderJava.appletLibrary",
[quickr.widgets.view.library],
{
_containerDiv:"",
/* Insert code from the following sections here */
});
Our widget inherits from the “quickr.widgets.view.library” widget: in this way, we can maintain the original Library
page view behaviour while adding the desired functionality.
Keeping the Library view
By inheriting from the Library widget, our widget inherits the “getWidgetLocation” method which needs to be
overridden to point to the original xsl file for the library layout.
getWidgetLocation:function(){
return("/qphtml/widgets/view");
},
Constructor and destructor methods
In the constructor method we create a DOM element that will be the container of the applet. In the constructor
method we also create a Frame Manager (FM) object in order to refresh the view after a file has been uploaded.
constructor: function() {
if(dojo.byId("lotusColLeft")!=null){
this._containerDiv=dojo.doc.createElement("div", {id:"appletContainer"});
}
else
{
this._containerDiv=null;
}
FM=new Object();
FM.parent=this;
FM.view={
reload:{}
};
FM.view.reload=function(){
FM.parent._publishNewViewEvent();
};
},
_publishNewViewEvent: function(){
this.inherited(arguments);
},
In the destructor method, we delete the DOM element previously created.
destroy:function(){
this.inherited(arguments);
if (this._containerDiv!=null){
document.getElementById("dndAppletLoadSpot").innerHTML = "";
this._containerDiv.parentNode.removeChild(this._containerDiv);
}
},
Creating and positioning the applet
The applet is created and positioned in the postCreate method. The actual rendering of the applet differs
between Firefox and Internet Explorer. Further details can be found in the following section.
postCreate:function(){
this.inherited(arguments);
if(this._containerDiv!=null){
var folderId = this.entry.fields.h_SystemName;
var folderName = this.entry.fields.h_Name;
var applet = new qext.fileUploaderJava.uploadAppletLoader({
folderId: folderId,
folderName: folderName,
widgetid: "appletUploader",
dojoAttachPoint: "appletUploader"
});
if (dojo.isFF) {
this._containerDiv.appendChild(applet.createFirefoxApplet());
}
else if (dojo.isIE) {
this._containerDiv.appendChild(applet.createIEApplet());
}
dojo.byId("lotusColLeft").appendChild(this._containerDiv);
}
}
Creating the uploadAppletLoader widget
The code for the embedding the applet will be contained in the uploadAppletLoader.js file.
The first section of the widget contains the declarations of the parameters required by the applet.
Some of them are context-specific, such as the folderId, the folderName, the server url and user id.
In this section we also declare the constructor in which we retrieve the room id and the
auxiliary method "_getLptaTokenFromCookie" which is used for authentication purposes.
dojo.provide("qext.fileUploaderJava.uploadAppletLoader");
dojo.require("quickr.widgets._base");
dojo.require("quickr.widgets._event");
dojo.declare("qext.fileUploaderJava.uploadAppletLoader",
[quickr.widgets._base,quickr.widgets._event],
{
_id:"dragAndDropApplet",
_qp_maxfilesize: "50000",
_qp_allowdirectories:"",
_name:"drag and drop plugin",
_archive:"dndplugin.jar,xml.jar",
_codebase:"/qphtml/html/common",
_code:"com.ibm.quickplace.dnd.applet.dndapplet",
_hspace:"0",
_height:"104",
_align:"middle",
_width:"180",
_vspace:"0",
_qdroomid:"",
folderId: "",
folderName: "",
placeName: "",
constructor:function(){
this._qdroomid=self.q_GeneralUtils.getRoomNSF();
this.placename=window.q_GeneralUtils.getPlaceName();
},
postCreate:function(){
this.inherited(arguments);
},
_getLptaTokenFromCookie: function(){
ltpatoken= dojo.cookie("LtpaToken");
return(ltpatoken);
},
/* Insert code from the following sections here */
});
Creating the applet in Firefox
Due to the different ways for loading applets adopted by the browsers, our widget needs to have two
different methods for Firefox and Internet Explorer. The main difference between the methods is that Firefox
requires the applets to be loaded with the
The following is the code required to load the applet in Firefox.
createFirefoxApplet:function(){
var addNode = dojo.create("span", {id:"dndAppletLoadSpot"});
var attributes = {
id : this._id,
"qp-maxfilesize": this._qp_maxfilesize,
"qp-allowdirectories": this._qp_allowdirectories,
"qp-userrole": this.baseContext.user.roles,
"qp-folderid": this.folderId,
"qp-lptatoken": this._getLptaTokenFromCookie(),
"qp-userid": this.baseContext.user.userName,
"qp-foldername": this.folderName,
"qp-roomid": this._qdroomid,
"qp-placeid": this.placename,
"qp-server": this.baseContext.server.url+"/",
name: this._name,
archive: this._archive,
java_codebase: this._codebase,
code: this._code,
type: "application/x-java-applet;version=1.4.2",
hspace: this._hspace,
height: this._height,
align: this._align,
width: this._width,
vspace: this._vspace,
mayscript: true
};
var appletNode=dojo.create("embed", attributes, addNode);
return(addNode);
},
Creating the applet in Internet Explorer
The following is the code required to load the applet in Internet Explorer.
createIEApplet:function(){
var addNode = dojo.create("span", {id:"dndAppletLoadSpot"});
var javaPluginMajorVersion_UnderscoreFormat = "1_6";
var javaPluginLowestFullVersionNum_CommaFormat = "1,4,2";
var javaPluginLowestFullVersionNum_DecFormat = "1.4.2";
var javaPluginVersionUrl = location.protocol+"//java.sun.com/update/1.4.2/jinstall-" + javaPluginMajorVersion_UnderscoreFormat + "-windows-i586.cab" + "#version=" + javaPluginLowestFullVersionNum_CommaFormat;
var javaPluginClsidDynamicVersion = "8AD9C840-044E-11D1-B3E9-00805F499D93";
var applet = '<object '
+ ' id="dragAndDropApplet"'
+ ' tabindex="-1"'
+ ' classid="clsid:' + javaPluginClsidDynamicVersion + '"'
+ ' codebase ="'+ javaPluginVersionUrl + '"'
+ ' width="180" height="104" vspace="0" hspace="0" alt=""'
+ '>';
var server = this.baseContext.server.url;
var placeid = this.placename;
var userId = this.baseContext.user.userName;
applet += '<param name="codebase" value="' + this._codebase + '">';
applet += '<param name="archive" value="' + this._archive + '">';
applet += '<param name="code" value="'+ this._code+ '">';
applet += '<param name="name" value="'+ this._name + '">';
applet += '<param name="type" value="application/x-java-applet;version=1.4.2">';
applet += '<param name="scriptable" value="true">';
applet += '<param name="QP-SERVER" value="' + server + '">';
applet += '<param name="QP-PLACEID" value="' + placeid + '">';
applet += '<param name="QP-ROOMID" value="' + this._qdroomid + '">';
applet += '<param name="QP-USERID" value="' + userId + '">';
applet += '<param name="QP-FOLDERNAME" value="' + this.folderName + '">';
applet += '<param name="QP-LPTATOKEN" value="' + this._getLptaTokenFromCookie() + '">';
applet += '<param name="QP-USERROLE" value="' + 'h_SuperUser' + '">';
applet += '<param name="QP-FOLDERID" value="' + this.folderId + '">';
applet += '<param name="QP-ALLOWDIRECTORIES" value="' + this._qp_allowdirectories + '">';
applet += '<param name="QP-MAXFILESIZE" value="' + this._qp_maxfilesize + '">';
applet += '</object>';
addNode.innerHTML=applet;
return(addNode);
}
Loading the Widget
In order to load the widget, we need to register it in the widgetRegistryConfig_ext.js file in the following way:
{
registerWidgets:
[
//Register the Quickr APIs
{
type: 'REGISTERMODULEPATH',
name: "qext",
path: "/qphtml/skins/qext"
},
{
type: 'REGISTERMODULEPATH',
name: "qext.fileUploaderJava",
path: "/qphtml/skins/qext/fileUploaderJava"
},
{
type: 'view',
condition: '((object.entry.fields.h_FolderStyle=="h_DocPublishLog" || object.entry.fields.h_FolderStyle=="h_DocPublishErrorLog") && !(object.entry.fields.h_FolderStyle=="1" && object.entry.fields.h_FolderSubStyle=="h_List"))',
use: 'qext.fileUploaderJava.appletLibrary'
},
{
type: 'view',
condition: '(object.entry.fields.h_FolderStyle=="1" && (object.entry.fields.h_FolderSubStyle!="h_List" && object.entry.fields.h_FolderSubStyle!="h_Forum" && object.entry.fields.h_FolderSubStyle!="h_ForumBoard"))',
use: 'qext.fileUploaderJava.appletLibrary'
}
]
}
Further information can be found at the Extending the Widget Registry wiki page.
Final Result
The following is a screeshot of how the Library view will be displayed using the customization.
The files needed to create this customisation can be found in the zip file => qphtml.zip which is attached to this page .... Unzip this file and copy the qphtml folder over your the current qphtml folder found on your server (e.g c:\Program Files\IBM\Lotus\Domino\data\domino\html\qphtml)
If you have other customisations loaded in the widget registry file widgetRegistryConfig_ext.js, then you will need to merge this customisation with your current one.