Raible's Wiki

Raible Designs
Wiki Home
News
Recent Changes

AppFuse

Homepage
  - Korean
  - Chinese
  - Italian
  - Japanese

QuickStart Guide
  - Chinese
  - French
  - German
  - Italian
  - Korean
  - Portuguese
  - Spanish
  - Japanese

User Guide
  - Korean
  - Chinese

Tutorials
  - Chinese
  - German
  - Italian
  - Korean
  - Portuguese
  - Spanish

FAQ
  - Korean

Latest Downloads

Other Applications

Struts Resume
Security Example
Struts Menu

Set your name in
UserPreferences


Referenced by
Articles




JSPWiki v2.2.33

[RSS]


Hide Menu

CreateAnAJAXBasedFileuploadProgressbarDialog


Difference between version 112 and version 101:

At line 3 changed 2 lines.
!!!How to Create an AJAX based file upload progress-bar dialog
This HOWTO shows how [AJAX Struts File Upload Progress Meter|http://kencochrane.blogspot.com/2006/03/ajax-struts-file-upload-progress-meter.html] has been combined with a custom tweaked version of [Lightbox Gone Wild!|http://particletree.com/features/lightbox-gone-wild/] to create a user friendly upload progress bar dialog with the web page below faded out. This means that users are unable to click on any links on the website and shows a the visual indication of how much is left of the file transfer. Its easy to customize the content of the dialog (see lbContent in the section __Comments and tips__ section).
!!!How to Create an AJAX based file upload progress-bar
This tutorial shows how [AJAX Struts File Upload Progress Meter|http://kencochrane.blogspot.com/2006/03/ajax-struts-file-upload-progress-meter.html] has been combined with a custom tweaked version of [Lightbox Gone Wild!|http://particletree.com/features/lightbox-gone-wild/] to create a user friendly upload progress bar dialog with the web page below faded out. This means that users are unable to click on any links on the website and shows a the visual indication of how much is left of the file transfer. Its easy to customize the content of the dialog (see __{{lbContent}}__ in the section __Comments and tips__ section).
At line 9 changed 1 line.
For newcomers to appfuse see [QuickStart Guide] as well as the videos at the top of the page [AppFuse]
For newcomers to appfuse see [AppFuseQuickStart] as well as the videos at the top of the page [AppFuse]
At line 157 added 1 line.
!Notes for usage on previous Appfuse Versions
At line 159 added 29 lines.
This tutorial can also work on previous versions of Appfuse but you need to include the dependend AJAX framewords (they are by default included in Appfuse 1.9.3). You can grap prototype and scriptaculous from Appfuse 1.9.3 and place the scrips in the same folders as where they are placed in Appfuse 1.9.3. You also need to reference the Ajax frameworks in the decorator default.jsp. Below is an excerpt of the begining of {{default.jsp}} from the Appfuse 1.9.3 project used as basis for this tutorial. You specifically needs the lines that references "prototype.js" and "scriptaculous.js" in that order since "scriptaculous.js" depends on "prototype.js". __It's important to note__ that scriptaculous.js may load additionally js scrips. And this solution in thus tutorial also needs the effects.js to be available. But in order to be safe you should include them all. They are:
*builder.js
*effects.js
*dragdrop.js
*controls.js
*slider.js
__Excerpt of the beginning of default.jsp__
{{{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ include file="/common/taglibs.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<%@ include file="/common/meta.jsp" %>
<title><decorator:title/> | <fmt:message key="webapp.name"/></title>
<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/${appConfig["theme"]}/theme.css'/>" />
<link rel="stylesheet" type="text/css" media="print" href="<c:url value='/styles/${appConfig["theme"]}/print.css'/>" />
<script type="text/javascript" src="<c:url value='/scripts/prototype.js'/>"></script> <!-- THIS LINE IS NEEDED -->
<script type="text/javascript" src="<c:url value='/scripts/scriptaculous.js'/>"></script> <!-- THIS LINE IS NEEDED -->
<script type="text/javascript" src="<c:url value='/scripts/global.js'/>"></script>
<decorator:head/>
</head>
...
}}}
At line 276 changed 1 line.
#__{{fileUploadForm.jsp}}__ and lbContent - the jsp page containing the struts form. It contains a __{{lbContent}}__ div tag which represent the html code inserted in the upload dialog. It also contains an embedded javascript with the function __{{function upload(form)}}__ This script only trigger the upload mechanism if one or more files has been selected.
#__{{fileUploadForm.jsp}}__ and __{{lbContent}}__ - the JSP page containing the struts form. It contains a __{{lbContent}}__ div tag which represent the html code inserted in the upload dialog. It also contains an embedded javascript with the function __{{function upload(form)}}__ This script only trigger the upload mechanism if one or more files has been selected.

Back to CreateAnAJAXBasedFileuploadProgressbarDialog, or to the Page History.