ADF 进度条的使用

This post will teach you how to configure the ADF Progress Indicator component within a .jspx web page of your OFM 11g application.

Implementation

Step 1

Add the following code to your web.xml file:

<context-param>
    <description>Max size of a file that will be uploaded in ram (10B)</description>
    <param-name>org.apache.myfaces.trinidad.UPLOAD_MAX_MEMORY</param-name>
    <param-value>10</param-value>
  </context-param>
  <context-param>
    <description>Max size of a file that will be uploaded on HDD (100MB)</description>
    <param-name>org.apache.myfaces.trinidad.UPLOAD_MAX_DISK_SPACE</param-name>
    <param-value>104857600</param-value>
  </context-param>

UPLOAD_MAX_DISK_SPACE Context Parameter – by default this parameter is equal with 2 MB and it isn’t explicitly defined within web.xml.

Step 2

Open adfc-config.xml and define a new managed bean. The newly created bean should have it’s scope set to session and must extend org.apache.myfaces.trinidad.model.BoundedRangeModelabstract class.

BoundedRangeModel abstract class declares 2 methods:

getMaximum() – which will be used by the progress indicator to get the size of the file to be uploaded:

    public long getMaximum() {
        long result;
        long maxByte = getMaximumBytes();
        if (maxByte == 0)
            result = -1;
        else {
            result = maxByte;
        }
        return result;
    }

getValue() – which will be used by the progress indicator to set the size that remains to be uploaded (or the size that has been already uploaded):

    public long getValue() {
        long result;
        long availableByte = getMaximumBytes() - getAvailableBytes();
        if (availableByte == 0 || availableByte == getMaximumBytes())
            result = -1;
        else {
            result = availableByte;
        }
        return result;
    }

The uploading process is handled by the doUpload() method:

    public void doUpload(ActionEvent actionEvent) {
        if (file != null) {
            setSizeOfFile(file.getLength());
            Map<String, Object> atts = getPollid().getAttributes();
            InputStream is;
            OutputStream os;

            File destinationFile = new File(file.getFilename());
            try {
                is = file.getInputStream();
                os = new FileOutputStream(destinationFile);
                int data;
                setMaximumBytes(getSizeOfFile());
                while ((data = is.read()) != -1) {
                    os.write(data);
                    setAvailableBytes(is.available());
                }
                this.stopPoll();
                FacesContext fctx = FacesContext.getCurrentInstance();
                FacesMessage message =
                    new FacesMessage("Succesfully uploaded file: " + " " +
                                     file.getFilename() + ", containing " +
                                     getSizeOfFile() + " bytes.");
                message.setSeverity(FacesMessage.SEVERITY_INFO);
                fctx.addMessage(null, message);

                is.close();
                os.close();
            } catch (IOException e) {
                e.printStackTrace();

                FacesMessage message = new FacesMessage(e.getMessage());
                message.setSeverity(FacesMessage.SEVERITY_ERROR);
                FacesContext.getCurrentInstance().addMessage(null, message);
            }
        }
    }

In order to stop the poll, once the upload is done, we use the following method:

    public void stopPoll() {
        FacesContext fctx = FacesContext.getCurrentInstance();
        ExtendedRenderKitService service =
            Service.getRenderKitService(fctx, ExtendedRenderKitService.class);
        service.addScript(fctx,
                          "AdfPage.PAGE.findComponent('" + getPollid().getClientId(fctx) +
                          "').setInterval(-1);");
    }

Step 3

In order to start the poll we shall use JavaScrip. The handlePoll function is listed below:

handlePoll = function (event) {
    //stops the event from propagating to the server side
    event.cancel();
    //gets the poll component, with respect to it's id, from the jspx page
    var poll = AdfPage.PAGE.findComponent('pollid');
    if (0 > poll.getInterval())
        //starts the poll and sets it's update interval to 1 second
        poll.setInterval(1000);
    else
        //stops the poll
        poll.setInterval( - 1);
}

Step 4

Now we shall configure the .jspx page as follows:

1. Register the JavaScript file with the jspx page by using the below line, inside af:document:

<af:resource type="javascript" source="/js/handlePoll.js"/>

2. Enable upload on the page:

<af:form id="f1" usesUpload="true">

3. Use af:inputFile to upload the file:

<af:inputFile label="File to upload:" id="if1"
                          value="#{MyProgressRangeModel.file}"
                          valueChangeListener="#{MyProgressRangeModel.uploadedFileChanged}"/>

4. Use af:progressIndicator in order to display the current status of the uploading process:

 <af:progressIndicator id="progressIndicator"
                                  value="#{MyProgressRangeModel}">
              <af:outputFormatted value="#{MyProgressRangeModel.percentageUploaded}% completed"
                                  id="of1"/>
            </af:progressIndicator>

Notice the value of the af:progressIndicator - is set as the managed bean that we have implemented at step 2.
Also, although you cannot see it here (because is defined in the parent of the af:progressIndicator), we use a Partial Trigger, having it’s value equal to the id of the af:poll component , in order to update the af:progressIndicator.

5. af:poll component enables automatic update for af:progressIndicator:

<af:poll id="pollid" interval="-1"
                     binding="#{MyProgressRangeModel.pollid}"
                     clientComponent="true"/>

6. af:commandButton is used to invoke the doUpload() method and start the upload process:

<af:commandButton text="Run" id="cb2"
                              actionListener="#{MyProgressRangeModel.doUpload}">
              <af:clientListener method="handlePoll" type="click"/>

The af:clientListener is used to call the JavaScript method that will start the poll once the upload starts.

The look of the progress indicator component can be changed by changing the skin-family within thetrinidad-config.xml file or by implementing your custom component and use css to integrate it with the OFM application.  ADFProgressIndicator sample application uses fusion skin-family.

 

 

 

Running the application

Open ADFProgressIndicator OFM application in your JDevelopper IDE, navigate to Main.jspx page and run it – use Mozilla Firefox or Internet Explorer browsers; Google Chrome browser  represents a special case which will be discussed later in this post.

Hint: In order to set JDevelopper IDE default browser follow the steps below:

Open JDevelopper IDE -> Tools -> Preferences… -> Web Browser and Proxy (bottom part of the left facet) -> Browser Command Line:

After the application is successfully deployed you should see the following page:

Choose a file and press Run. A new panel box will be displayed, containing the progress indicator:

After the upload is done the progress indicator is hidden and the following info message is displayed:

Notice: In order for ADFProgressIndicator OFM application to run when using Google Chrome browser the following are required:

1. Create a new jspx page containing the af:progressIndicator and af:poll conponents.

2. Integrate the newly constructed page within the current page by using the iframe component:

 

<iframe src="NewlyConstructedPage.jspx"/>