1. File Downloader 7.0.9
  2. Using File Downloader

Customizing Appearance

File Downloader provides not many possibilities for customization. However, you can modify the control in the following ways:

Starting Download Using Standard HTML Button

By default, the download process begins after clicking on the Download button, which always has a standard look. If it does not fit your page, you may make any HTML button to start download; the following example shows how to perform it.

html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>file Downloader Polygon</title>
<script type="text/javascript" src="iuembed.js">  </script>
</head>
<body>
	<script language="javascript">
		var fd = new FileDownloaderWriter("FileDownloader1", 0, 0);
		fd.activeXControlCodeBase = "FileDownloader7.cab";
		fd.activeXControlCodeBase64 = "FileDownloader7_x64.cab";
		fd.activeXControlVersion = "7,0,1,0";
		fd.javaAppletCodeBase = "./";
		fd.javaAppletJarFileName = "FileDownloader7.jar";
		fd.javaAppletVersion = "7.0.1.0";
		fd.addParam("FileList", "http://localhost/filedownloader/filelist.txt");
		fd.writeHtml();
	</script>
	
	<script language="javascript">
		function StartDownload()
		{
			var fd = getFileDownloader("FileDownloader1");
			fd.Download();    	
		}
	</script>
	
	<button type="button" style="background: #649FE9; color: #FFFFFF" onclick="StartDownload();">
		Custom Download Button
	</button>
</body>
</html>

Here, we used the Download() method to start the download from the script.

Localizing the Interface

You can not only replace the File Downloader button but also translate the whole user interface into another language. There are special properties that correspond to all text labels or caption that appear in the control, that is why each label can be translated.

Of course, you can add the translation by simply calling the addParam method of FileDownloaderWriter for each label. A complete list of all text properties can be found in the FileDownloader topic. But if you have a multilingual site, that allows fast switching between the languages, you can use another approach.

Changing the Interface Language Dynamically

If you create a multilingual site that allows switching between differnet interface languages on the fly, you can use the following method.

  1. Create JavaScript files with translations of all properties. You will need to provide translations for all languages, even for English. The files should be in UTF-8. The format of the files will be as follows:
    JavaScript 
    var en_resources={use:function(id){
id.setFileExistsDialogTimeLeftText("Time left: [Current] of [Total]");
//...All other text entries
}}
    For languages other than English replace "en" with an appropriate language code (for example, "fr" for French) and provide translations of the property values.
  2. Link the JavaScript files created by you to the page with File Downloader:
    HTML 
    <html>
	<head>
		<title>File Downloader</title>
		<script type="text/javascript" src="iuembed.js">  </script>
		<!-- Link the translations -->
		<script type="text/javascript" src="en.js">  </script>
		<script type="text/javascript" src="fr.js">  </script>
	</head>
	<!-- ... -->
</html>
  3. Create a language switcher (if you do not already have one). It does not really matter how it will be implemented - as a menu or as a simple list of languages. Let it be a dropdown menu with several values, for instance:
    HTML 
    <select id="SelectLanguage" onchange="translate();">
	<option value="en" selected="true">[en] - English</option>
	<option value="fr">[fr] - French</option>
</select>
  4. Now, write a function that implements actual switching. To switch the interface language of File Downloader, it has to do the following:
    1. Read a value for the selected language.
    2. Load and use the translation for this language.
    JavaScript 
    <script language="javascript">
var loaded = false;
function onFullPageLoad(){
	if (loaded != true){
		loaded = true;
		translate();
	}
}
function translate(){
	//Check if the page is fully loaded
	if (loaded){
		var SelectLanguage = document.getElementById("SelectLanguage");
		var language = SelectLanguage.options[SelectLanguage.selectedIndex].value;
		var expr = language+"_resources.use(getFileDownloader('FileDownloader'))";
		eval(expr);
	}
}
//...Other code
var fd = new FileDownloaderWriter("FileDownloader", 122, 44);
fd.fullPageLoadListenerName = "onFullPageLoad";
fd.writeHtml();
</script>

You can use the Localization Sample as a base when translating File Downloader to your language.

Notes for Translators

When translating values of properties, you may notice that some of them contain words in brackets like [Total], [Name], and so on. These are placeholders that should not be translated. In runtime they will be replaced with the appropriate values depending on the message displayed.

For example, when displaying the amount of time left before download finishes, the ProgressDialogDataAmountText property is used. This text is displayed in the progress dialog and by default has the value:

[Current] of [Total]

And when the user sees this text, it will already contain the corresponding value, say:

23,17 MB of 188,04 MB

See reference on the appropriate properties to learn more about the meaning of partucular placeholders.

See Also

Samples

Reference