DWR developed using Ajax-based file upload portlet in

sponsored links


<script type="text/javascript"> document.body.oncopy = function () (if (window.clipboardData) (setTimeout (function () (var text = clipboardData.getData ( "text"); if (text & ; & text.length> 300) (text = text + "\ r \ n \ n This article comes from CSDN blog, reproduced please indicate source:" + location.href; clipboardData.setData ( "text", text);)), 100);)) </ script> <script type="text/javascript"> function StorePage () (d = document; t = d.selection? (d.selection.type! = 'None '? d.selection.createRange (). text:''): (d.getSelection? d.getSelection ():''); void (keyit = window.open (' http://www.365key.com/ storeit.aspx? t = '+ escape (d.title) +' & u = '+ escape (d.location.href) +' & c = '+ escape (t),' keyit ',' scrollbars = no, width = 475, height = 575, left = 75, top = 20, status = no, resizable = yes')); keyit.focus ();) </ script>
Introduction

Web portal provides users with access to a variety of resources and services, the center of the gateway. At the same time, they provide users with other users resource sharing platform. From photos to audio and video files and then to research the scientific data sets, users can share anything. Therefore, the file upload is a basic Web portal must-have feature.

Today's Web portal to a large extent dependent on the Java portlet technology. While many developers are using Ajax, given a variety of file upload progress bar solution, but we have not heard of which is based on the portlet's. This article shows how to develop Ajax-based file upload portlet, this portlet can display the progress bar file upload process. This portlet for those who want to share large audio, video, and scientific documents are particularly useful.

To keep up with the progress of this article, you should use Java Servlets and JavaServer Pages (JSPs) for Web developers are familiar with. Moreover, it must understand the portal and portlet technology development. Of course, if you do not how proficient portlet technology, and do not give up this right now, because you will see in this article a brief introduction to the portlet technology, as well as some useful resources are available to help you speed up the learning process.

In this paper, this test file upload portlet before, you can consider to use a compliance with JSR 168 compliant portal frameworks, such as IBM ® WebSphere ® Portal Server, Apache Pluto, eXo platform or Liferay Portal. In this article we are using the Apache Pluto 1.0.1, JDK 5.0 Update 10 and the Apache Ant Version 1.6.5.

the basic concepts of portlet

In general, you can portlet as a Web component. Portlet and servlet is similar, but the former is more focus on the application layer. A typical portlet output is HTML fragments, these fragments can be assembled Web portals followed. Portlet itself is managed by the portlet container. portlet's main features include:

  • Multi-mode: portlet can be in different modes have different views. For example, in addition to view mode, portlet supports edit mode so that users can set their own preferences.
  • Multiple windows Status: portlet can be minimized, maximized and so on.
  • Parameters can be customized: portlet can define parameters, and these parameters can be customized by the user.

To obtain more detailed information about portlet, you can refer to Java Portlet Specification 1.0, JSR 168 (JSR 168 follow-up version of the JSR 286 is expected to be released in second half of 2007, which contains some improvements, such as inter-portlet communication and portlet filters ). Related links, see Resources.

Started creating file upload portlet

File upload portlet is the cornerstone of Apache Commons FileUpload package (this is also known as FileUpload). In addition to supporting file upload servlet within the outer, Apache Commons FileUpload Version 1.1 package also supports the portlet in the file upload. This article uses the Apache Commons FileUpload version 1.2.

Basically, the development of file upload progress bar needs two steps:

  1. Retrieve the file upload process on the server side
  2. The portal server from the client to retrieve and display the file upload

File upload process, the server-side search

FileUpload package supports the use of listener retrieve the file upload process. In the file upload portlet's doUpload() method (called uk.ac.dl.esc.gtg.myportlets.fileupload.FileUploadPortlet, included in this download section provides the source file), by calling setProgressListener() method PortletFileUpload listener set-up process, as Listing 1 shows:

Listing 1. For the file upload package setup listener

View plain Copy to Clipboard Print?
  1. DiskFileItemFactory factory = new DiskFileItemFactory ();
  2. PortletFileUpload pfu = new PortletFileUpload (factory);
  3. pfu.setSizeMax (uploadMaxSize); / / Maximum upload size
  4. pfu.setProgressListener (new FileUploadProgressListener ());


Listener FileUploadProgressListener (see Listing 2) can be achieved org.apache.commons.fileupload.ProgressListener interface. update() method automatically invoked by the FileUpload package to refresh the number of bytes transmitted on the latest information. In this implementation, each transmission 10KB data is updated once progress. This helps to prevent too frequent updates. getFileUploadStatus() method used to calculate the current file upload progress, by the client through the DWR call (discussed in the next section).

Listing 2. Retrieve file upload file upload process, listener

View plain Copy to Clipboard Print?
  1. package uk.ac.dl.esc.gtg.myportlets.fileupload;
  2. import java.text.NumberFormat;
  3. import org.apache.commons.fileupload.ProgressListener;
  4. import org.apache.commons.logging.Log;
  5. import org.apache.commons.logging.LogFactory;
  6. public class FileUploadProgressListener implements ProgressListener (
  7. private static Log log = LogFactory.getLog (FileUploadProgressListener. class);
  8. private static long bytesTransferred = 0;
  9. private static long fileSize = -100;
  10. private long tenKBRead = -1;
  11. public FileUploadProgressListener () (
  12. )
  13. public String getFileUploadStatus () (
  14. / / Per looks like 0% - 100%, remove% before submission
  15. String per = NumberFormat.getPercentInstance (). Format (
  16. (double) bytesTransferred / (double) fileSize);
  17. return per.substring (0, per.length () - 1);
  18. )
  19. public void update (long bytesRead, long contentLength, int items) (
  20. / / Update bytesTransferred and fileSize (if required) every 10 KB is
  21. / / Read
  22. long tenKB = bytesRead / 10240;
  23. if (tenKBRead == tenKB)
  24. return;
  25. tenKBRead = tenKB;
  26. bytesTransferred = bytesRead;
  27. if (fileSize! = contentLength)
  28. fileSize = contentLength;
  29. )
  30. )


File upload process, a client retrieves

Between server and client on the file upload process communication is achieved through the use of Ajax. We use Direct Web Remoting (DWR) to provide portlet in the Ajax support. DWR is a Java developer for an ideal framework for Ajax can be used to introduce Web development process, because it allows the browser in JavaScript and server-side Java object interaction. To portlet using DWR, you must perform the following steps (For more information about how to configure DWR information, see references):

  • Through the WEB-INF/web.xml configuration DwrServlet (see Listing 3).
  • The WEB-INF/dwr.xml defined within one or more clients can communicate with server-side objects. In Listing 4, the, FileUploadProgressListener defined in order for the DWR client can call the auto-generated JavaScript. In addition, only the client getFileUploadStatus method can be invoked, and the other is not allowed update public method be accessed (see Listing 2).
  • DWR will work with the JavaScript code is included in fileupload-view.jsp (see Listing 5).
  • DWR library will be included in the portlet application
  • Listing 3. DwrServlet configured in the WEB-INF/web.xml

    View plain Copy to Clipboard Print?
    1. <! - DWR servlet ->
    2. <Servlet>
    3. <Servlet-name> dwr-invoker </ servlet-name>
    4. <Display-name> DWR Servlet </ display-name>
    5. <Servlet-class> org.directwebremoting.servlet.DwrServlet </ servlet-class>
    6. <Init-param>
    7. <Param-name> debug </ param-name>
    8. <Param-value> false </ param-value>
    9. </ Init-param>
    10. </ Servlet>
    11. <! - DWR servlet mapping ->
    12. <Servlet-mapping>
    13. <Servlet-name> dwr-invoker </ servlet-name>
    14. <Url-pattern> / dwr / * </ url-patter>
    15. </ Servlet-mappin>


    Listing 4. WEB-INF/dwr.xml

    View plain Copy to Clipboard Print?
    1. <! DOCTYPE dwr PUBLIC "- / / GetAhead Limited / / DTD Direct Web Remoting 2.0 / / EN"
    2. "http://getahead.org/dwr//dwr20.dtd">
    3. <Dwr>
    4. <Allow>
    5. <Create creator = "new" javascript = "FileUploadProgressListener">
    6. <Param name = "class"
    7. value = "uk.ac.dl.esc.gtg.myportlets.fileupload.FileUploadProgressListener" />
    8. <Include method = "getFileUploadStatus" />
    9. </ Create>
    10. </ Allow>
    11. </ Dwr>


    Listing 5 shows the JSP file fileupload-view.jsp shows how DWR will help retrieve from the server-side file upload process. Once you select a file and click the Upload button (see Figure 1), fileupload_ajax_query_upload_status() method will be called immediately. This method is called after the asynchronous mode will FileUploadProgressListener of getFileUploadStatus() method (see Listing 2). DWR's the beauty of this: client and server-side Java can be the object interactions. Once a response is received, fileupload_ajax_show_upload_status() method will be called to refresh the process. If the file upload is not completed, the process will be updated in two seconds after the kinds of retrieval.

    Listing 5. File upload portlet JSP files - fileupload-view.jsp

    View plain Copy to Clipboard Print?
    1. <% @ Page session = "false"%>
    2. <% @ Page contentType = "text / html"%>
    3. <% @ Page import = "javax.portlet.PortletURL"%>
    4. <% @ Taglib uri = "http://java.sun.com/portlet" prefix = "portlet"%>
    5. <Portlet: defineObjects />
    6. <Mce: script type = "text / javascript"
    7. src = '<% = renderResponse.encodeURL (renderRequest.getContextPath ()
    8. + "/ Dwr / interface / FileUploadProgressListener.js")%> <! --
    9. ' "
    10. / / -> </ Mce: script>
    11. <Mce: script type = "text / javascript"
    12. src = '<% = renderResponse.encodeURL (renderRequest.getContextPath ()
    13. + "/ Dwr / engine.js")%> <! --
    14. ' "
    15. / / -> </ Mce: script>
    16. <Mce: script type = "text / javascript"
    17. src = '<% = renderResponse.encodeURL (renderRequest.getContextPath ()
    18. + "/ Dwr / util.js")%> <! --
    19. ' "
    20. / / -> </ Mce: script>
    21. <Mce: script type = "text / javascript"> <! --
    22. function fileupload_ajax_query_upload_status () (
    23. FileUploadProgressListener.getFileUploadStatus
    24. (fileupload_ajax_show_upload_status);
    25. return true;
    26. )
    27. function fileupload_ajax_show_upload_status (status) (
    28. if (status == "100")
    29. document.getElementById ( "fileupload_progress"). innerHTML
    30. = "File successfully uploaded";
    31. else (
    32. document.getElementById ( "progressBar"). style.display = "block";
    33. document.getElementById ( "fileupload_progress"). innerHTML =
    34. "Uploading file:" + status
    35. + "% Completed, please wait ...";
    36. document.getElementById ( "progressBarBoxContent"). style.width =
    37. parseInt (status * 3.5) + "px";
    38. setTimeout (fileupload_ajax_query_upload_status, 2000);
    39. )
    40. return true;
    41. )
    42. / / -> </ Mce: script>
    43. <Mce: style type = "text / css"> <! --
    44. # progressBar (padding-top: 5px;)
    45. # progressBarBox (width: 350px; height: 20px; border: 1px insert; background: # eee;)
    46. # progressBarBoxContent (width: 0; height: 20px; border-right: 1px solid # 444;
    47. background: # 9ACB34;)
    48. -> </ Mce: style> <style type = "text / css" mce_bogus = "1"> # progressBar (padding-top: 5px;)
    49. # progressBarBox (width: 350px; height: 20px; border: 1px insert; background: # eee;)
    50. # progressBarBoxContent (width: 0; height: 20px; border-right: 1px solid # 444;
    51. background: # 9ACB34;) </ style>
    52. <H4> File Upload </ h4>
    53. <! - The upload form ->
    54. <% PortletURL pUrl = renderResponse. CreateActionURL ();
    55. % "
    56. <Form action = "<% = pUrl.toString ()%>"
    57. enctype = "multipart / form-data" method = "post"
    58. onsubmit = "setTimeout ( 'fileupload_ajax_query_upload_status ()', 1000)">
    59. <Input type = "file" name = "fileupload_upload" value = "Upload File">
    60. <Input type = "submit" value = "Upload">
    61. </ Form>
    62. <% - File upload progress bar -%>
    63. <Div id = "fileupload_progress"> </ div>
    64. <Div id = "progressBar" style = "display: none;" mce_style = "display: none;">
    65. <Div id = "progressBarBoxContent"> </ div>
    66. </ Div>


    Apache Pluto deployment and testing with the file upload portlet

    The next step in this process is to use Apache Pluto 1.0.1. To deploy and test the file upload portlet (Note: This article uses the binary version).

    Code compilation and deployment of

    This article comes with the source code available for download portlet also provide Ant script to be able to compile and build portlet deployment needs. War files. First, it must be the following binary files are copied to the root directory of the source code under the lib directory:

    • commons-fileupload-1.2/commons-fileupload-1.2.jar
    • commons-io-1.3/commons-io-1.3.jar
    • commons-logging-1.0.4/commons-logging-1.0.4.jar
    • dwr-2.0.1/dwr.jar
    • portletapi-1.0/portlet.jar
    • servletapi-2.4/servletapi-2.4.jar

    After, you can run ant build and ant war to compile the code and the corresponding need to build the deployment. War files. If all goes well, myportlets-fileupload.war will appear in the dist directory. Implementation of the following steps to take advantage of Apache Pluto 1.0.1 deployment of portlet:

    1. Start Apache Tomcat and access http://localhost:8080/pluto/portal.
    2. Click the Admin link to the left side of Pluto screen to deploy the portlet.
    3. Find myportlets-fileupload.war, and then click Submit.
    4. Portlet definition title, description and layout, and then click Submit.
    5. Page that is displayed again, click on the Submit.

    Now, the system prompts you to either restart Tomcat, or click the link to Hot deploy myportlets-fileupload portlet application. We recommend that you click the link to Hot deploy myportlets-fileupload portlet application. After that, the portlet will be loaded, in Figure 1 below:

    Figure 1. Running on Apache Pluto in the file upload portlet



    Test file upload portlet

    Once deployed after the end of this portlet, you can upload files. To show the progress bar, it should be from a computer rather than from the portal server to access this portlet. Implementation of the following steps to upload files:

    1. Click the Browse ... button to select the file to upload.
    2. Click the Upload button to upload the selected file. During the file upload will be displayed and update the progress bar (see Figure 2).

    If you installed Pluto from a computer test this portlet, will not see the progress bar, because of the set maximum upload size of 20MB. By WEB-INF/portlet.xml document fileupload_upload_maxsize can be changed to change the size of this upload.

    Figure 2. File upload portlet is being uploaded files


    In our portlet, the uploaded file as a disk file saved in the java.io.tmpdir under - for example, at $ PLUTO_HOME or $ CATALINA_HOME under the temp. Please note that in the actual Web applications, may also require further processing. For example, the uploaded file is stored in the database may be required for later use; if it is the image file, it is likely to appear in the Web browser.

    Other applications of this technology

    In this paper to explore the technology has been successfully applied to the file transfer portlet, the GridFTP protocol using protlet manage two third-party data grid of large data sets between nodes.

    Conclusion

    This article discusses how to use Ajax to display the portlet deployment file upload progress bar. Describes how to use the process of server-side listener to retrieve the file upload process, how to use DWR from the portal server, the client file upload retrieval, and how the progress bar will be presented to the end user. This portlet for sharing, such as audio, video files and scientific data of such large data sets are particularly useful. This article also shows for the JSR 168 portlet using DWR to provide Ajax support is how much easier.
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb
Tags:

Related Posts of DWR developed using Ajax-based file upload portlet in

  • DWR developed using Ajax-based file upload portlet in

    <script type="text/javascript"> document.body.oncopy = function () (if (window.clipboardData) (setTimeout (function () (var text = clipboardData.getData ( "text"); if (text & ; & text.length> 300) (text = text + "

  • JQuery's Ajax-based file upload plugins - Ajax Upload

    http://iunbug.appspot.com/article.html?objNews.id=85001

  • DWR developed using the file upload portlet based on Ajax

    <script type="text/javascript"> document.body.oncopy = function () (if (window.clipboardData) (setTimeout (function () (var text = clipboardData.getData ("text"); if (text & ; & text.length> 300) (text = text + "\

  • Flex4 of Servlet-based file upload

    Flex upload functionality on the realization depends on the FileReference class. Create an instance of an object class in two ways: using var myFileReference = new FileReference (); FileReferenceList.browse (). Using the browse () or FileReference.browse

  • flex using filereference implementation file upload / download

    The following is a. Net instance, (the same basic and java, the problems are the same!) We start from the flex client to see what way the client through the server to initiate the request. flex client to complete the file upload and download are achieved

  • The Ajax asynchronous file upload cakephp <excerpt>

    why? The same need to fill in the information and upload files, save a step by step to avoid loss of information. how? Try in accordance with the cookbook to use 'prototype.js' echo $ javascript-> link ('prototype'); echo $ javascr

  • Struts1 achieved using file upload (2)

    Struts1 achieved using file upload (1), I save the file on the server side of the disk, there is no way to save it in the Oracle10g database? The answer is yes, just a little on the transformation process can be achieved to save the file in the datab

  • PHP File Upload principle and implementation of

    PHP File Upload principle and implementation of Using php to upload file function This code is divided into two files, one for upload.html, one upload.php <form enctype="multipart/form-data" action="upload.php" method="post"> <input type="hidden"

  • extjs file upload component usage UploadDialog

    The project has a page needs to use file upload function, file upload to do very much before, this time into the future of the extjs done, thought should be no problem, mended that the time to do that is a lot of problems Summed up the total of the follow

  • File upload progress bar with a variety of style is very beautiful!

    asp.net ajax multiple file upload progress bar styles

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries