Extjs & applet integration -

In recent years most of the systems are getting upgraded with the new User Interface and Extjs is once of the most widely used technology for the rich look and feel. In most of the domain mostly in DMS (Document Management System) upload and download functionality is provided. To achieve the performance most of the system uses applets for upload and downloading the content from the systems. One of the major problem with applet is they used different tags (applet, object and embed) for different browsers. I came across such issues so decided to write a blog on it.

To achieve the mention problem i am writing few steps that will be helpful to you guys.

1) Create a main.html page and in the same directory put the ext-base.js and ext-all.js files.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="applet.js"></script>
<script>
Ext.onReady(function(){
my.appletRenderer.getFileSelector();
my.appletRenderer.getUploadApplet();
});
</script>
</head>
<body scroll="no">
<div id="center">
<div id="x-desktop">
<div id="center-panel-container" style="background:transparent;"></div>
</div>
</div>
</body>
</html>

2) Create an applet.js file in the same directory with following contents.

my.appletRenderer = {

getFileSelector : function() {
if (new ActiveXObject("Scripting.Dictionary") != null) {
return this.getActiveXFileSelector();
} else {
return this.getSwingFileSelector();
}
},

getSwingFileSelector : function(){
if (Ext.isIE || Ext.isChrome) {
if (Ext.isIE8 ) {
return new Ext.Panel({
renderTo: 'center-panel-container',
height: 0,
html: '<object ' +
'id = "SwingFileSelectorApplet" ' +
'name="SwingFileSelectorApplet" ' +
'codebase="" ' +
'archive="" ' +
'code="" ' +
'cache_archive="" ' +
'cache_version="" ' +
'width="0" ' +
'height="0" ' +
'mayscript="true" ' +
'bodyStyle="display:none;"> ' +
'</object>'
});
}else{
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : '<applet ' +
'id="SwingFileSelectorApplet" ' +
'name="SwingFileSelectorApplet" ' +
'codebase="" ' +
'archive="" ' +
'code="" ' +
'width=0 ' +
'height=0 ' +
'mayscript="true">' +
'<param name="cache_archive" value="" />'+
'<param name="cache_version" value="" />'+
'</applet>'
});
}
}else{
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html:'<EMBED '
+ 'id="SwingFileSelectorApplet" '
+ 'name="SwingFileSelectorApplet" '
+ 'codebase="" '
+ 'archive="" '
+ 'code="" '
+ 'type="application/x-java-applet;version=1.4" '
+ 'cache_archive="" '
+ 'cache_version="" '
+ 'EMBEDDED="true" '
+ 'mayscript="true" '
+ 'width="0" '
+ 'height="0"> '
+ '<NOEMBED> No Java 2 SDK, Standard Edition v 1.4.1 support for APPLET!! </NOEMBED> '
+ '</EMBED>'
});
}
},

getActiveXFileSelector : function() {
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : ' <object classid="" align="baseline" border="0">'
+ '<param name="LPKPath" value="">'
+ '</object>'
+ '<object classid="" codebase="" '
+ 'VIEWASTEXT name="fileDialog" id="CommonDialog1"><param NAME="CancelError" VALUE="0">'
+'<param NAME="DialogTitle" VALUE="'+ fs.locale.write("docUpload", "selectFile") +'">'
+'<param NAME="" VALUE=""><param NAME="" VALUE="">'
+'</object>'
});
},

getUploadApplet : function(){
if(Ext.isWindows){
return this.getWindowsUploadApplet();
}
else{
return this.getUnixUploadApplet();
}
},

getWindowsUploadApplet : function(){
if (Ext.isIE) {
if (Ext.isIE8 ) {
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : '<object '
+ 'id = "FileUpload" '
+ 'name="FileUpload" '
+ 'codebase="" '
+ 'archive="" '
+ 'code="" '
+ 'width=0 '
+ 'height=0 '
+ 'mayscript="true" '
+ 'bodyStyle="display:none;">'
+ '<param name="cache_archive" value="" />'
+ '<param name="cache_version" value="" />'
+ '</object>'
});
}else{
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : '<applet '
+ 'id = "FileUpload" '
+ 'name="FileUpload" '
+ 'codebase="" '
+ 'archive="" '
+ 'code="" '
+ 'width=0 '
+ 'height=0 '
+ 'mayscript="true" '
+ 'bodyStyle="display:none;">'
+ '<param name="cache_archive" value="" />'
+ '<param name="cache_version" value="" />'
+ '</applet>'
});
}
}else if (Ext.isChrome) {
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : '<applet '
+ 'id = "FileUpload" '
+ 'name="FileUpload" '
+ 'codebase="" '
+ 'archive="" '
+ 'code="" '
+ 'width=0 '
+ 'height=0 '
+ 'mayscript="true" '
+ 'bodyStyle="display:none;">'
+ '<param name="cache_archive" value="" />'
+ '<param name="cache_version" value="" />'
+ '</applet>'
});
}else{
return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html:'<EMBED ' +
'id="FileUpload" ' +
'name="FileUpload" ' +
'codebase="" ' +
'archive="" ' +
'code="" ' +
'type="application/x-java-applet;version=1.4" ' +
'cache_version="" ' +
'cache_archive="" ' +
'width="0" ' +
'height="0" ' +
'mayscript="true"> ' +
'<NOEMBED> No Java 2 SDK, Standard Edition v 1.4.1 support for APPLET!! </NOEMBED>'+
'</EMBED>'
});
}
},

getUnixUploadApplet : function(){

return new Ext.Panel({
renderTo:'center-panel-container',
height : 0,
html : '<applet '
+ 'id = "FileUpload" '
+ 'name="FileUpload" '
+ 'codebase="" '
+ 'archive="" '
+ 'code="" '
+ 'width=0 '
+ 'height=0 '
+ 'mayscript="true" '
+ 'bodyStyle="display:none;">'
+ '<param name="cache_archive" value="" />'
+ '<param name="cache_version" value="" />'
+ '</applet>'
});
}

}

3) In the applet.js file if you pass the proper values of the attribute which i have kept blank like codebase, archive,code,classid etc. the applets will get render.

4) View the main.html and view source the applets be enabled.

5) And this code will work for almost all the browser and OS. (Only you need to create your own jar files operating system specific)

6) Same check can be applied for the download and other applet.

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论