The distribution does not seem to include either button images from the examples nor CSS files. I was able to find a new button image, but the styles I added to my CSS file from wht I found on your examples/showcase page have no affect. So now I have a plan bland "Drop files here" without a nice box and the progress bars only have textual information. What am I doing wrong? (Firefox Nightly 31.0a1)
Here is my set-up code:
/*
* prepares the uploader component
*
* @param verticalPanel a place to put the controls
* @param progressBarPanel a place for the progress bars
* @return the uploader for convenience /
private Uploader prepareUploader(final VerticalPanel verticalPanel, final VerticalPanel progressBarPanel) {
uploader.setUploadURL(IMPORT_SERVLET_PATH)
.setButtonImageURL("images/folder_open_add.png")
.setButtonWidth(32)
.setButtonHeight(32)
.setFileSizeLimit("0")
.setButtonCursor(Uploader.Cursor.HAND)
.setButtonAction(Uploader.ButtonAction.SELECT_FILES)
.setFileQueuedHandler(new FileQueuedHandler() {
@Override
public boolean onFileQueued(final FileQueuedEvent fileQueuedEvent) {
dataManager.startUserSessionPolling();
// Create a Progress Bar for this file
final ProgressBar progressBar =
new ProgressBar(0.0, 1.0, 0.0, new CancelProgressBarTextFormatter());
progressBar.setTitle(fileQueuedEvent.getFile().getName());
progressBar.setHeight("18px");
progressBar.setWidth("200px");
progressBars.put(fileQueuedEvent.getFile().getId(), progressBar);
// Add Cancel Button Image
final Image cancelButton = new Image("images/stop.png");
cancelButton.setStyleName("cancelButton");
cancelButton.addClickHandler(new CancelButtonClickHandler(fileQueuedEvent,
progressBars,
progressBar,
cancelButton));
cancelButtons.put(fileQueuedEvent.getFile().getId(), cancelButton);
// Add the Bar and Button to the interface
progressBarAndButtonPanel.clear();
progressBarAndButtonPanel.add(progressBar);
progressBarAndButtonPanel.add(cancelButton);
progressBarPanel.add(progressBarAndButtonPanel);
return true;
}
final class CancelButtonClickHandler implements ClickHandler {
private FileQueuedEvent fileQueuedEvent;
private Map<String, ProgressBar> progressBars;
private ProgressBar progressBar;
private Image cancelButton;
/**
* @param fileQueuedEvent
* @param progressBars
* @param progressBar
* @param cancelButton
*/
public CancelButtonClickHandler(FileQueuedEvent fileQueuedEvent,
Map<String, ProgressBar> progressBars, ProgressBar progressBar,
Image cancelButton) {
this.fileQueuedEvent = fileQueuedEvent;
this.progressBars = progressBars;
this.progressBar = progressBar;
this.cancelButton = cancelButton;
}
@Override
public void onClick(ClickEvent event) {
uploader.cancelUpload(fileQueuedEvent.getFile().getId(), false);
progressBars.get(fileQueuedEvent.getFile().getId()).setProgress(-1.0d);
cancelButton.removeFromParent();
progressBars.remove(progressBar);
if (progressBars.isEmpty()) {
closeDialog.setEnabled(true);
}
}
}
})
.setUploadProgressHandler(new UploadProgressHandler() {
@Override
public boolean onUploadProgress(UploadProgressEvent uploadProgressEvent) {
ProgressBar progressBar = progressBars.get(uploadProgressEvent.getFile().getId());
progressBar.setProgress((double) uploadProgressEvent.getBytesComplete() /
uploadProgressEvent.getBytesTotal());
return true;
}
})
.setUploadStartHandler(new UploadStartHandler() {
@Override
public boolean onUploadStart(UploadStartEvent uploadStartEvent) {
disableDialog();
return true;
}
})
.setUploadCompleteHandler(new UploadCompleteHandler() {
@Override
public boolean onUploadComplete(UploadCompleteEvent uploadCompleteEvent) {
String fileId = uploadCompleteEvent.getFile().getId();
cancelButtons.remove(fileId).removeFromParent();
progressBars.remove(fileId).removeFromParent();
enableDialog();
uploader.startUpload();
return true;
}
})
.setFileDialogStartHandler(new FileDialogStartHandler() {
@Override
public boolean onFileDialogStartEvent(FileDialogStartEvent fileDialogStartEvent) {
if ((uploader.getStats().getUploadsInProgress() <= 0) && importParametersAreValid()) {
// Clear the uploads that have completed, if none are in process
clearStatusPanel(progressBarPanel);
/*
* Create a new FileImportRequest object in order to
* obtain a shared Job ID for all files in the list.
*/
prepareImportSubmit();
disableDialog();
}
return true;
}
})
.setFileDialogCompleteHandler(new FileDialogCompleteHandler() {
@Override
public boolean onFileDialogComplete(FileDialogCompleteEvent fileDialogCompleteEvent) {
if ((fileDialogCompleteEvent.getNumberOfFilesSelected() > 0) &&
(fileDialogCompleteEvent.getTotalFilesInQueue() > 0)) {
if (uploader.getStats().getUploadsInProgress() <= 0) {
uploader.startUpload();
}
} else {
enableDialog();
}
return true;
}
})
.setFileQueueErrorHandler(new FileQueueErrorHandler() {
@Override
public boolean onFileQueueError(FileQueueErrorEvent fileQueueErrorEvent) {
clearStatusPanel(progressBarPanel);
enableDialog();
messageManager.getAlertDialog().alert("<p><b>Upload of file " +
fileQueueErrorEvent.getFile().getName() +
" failed due to [" +
fileQueueErrorEvent.getErrorCode().toString() + "]: " +
fileQueueErrorEvent.getMessage() + "</b></p>");
return true;
}
})
.setUploadErrorHandler(new UploadErrorHandler() {
@Override
public boolean onUploadError(UploadErrorEvent uploadErrorEvent) {
clearStatusPanel(progressBarPanel);
enableDialog();
messageManager.getAlertDialog().alert("<p><b>Upload of file " +
uploadErrorEvent.getFile().getName() +
" failed due to [" +
uploadErrorEvent.getErrorCode().toString() + "]: " +
uploadErrorEvent.getMessage() + "</b></p>");
return true;
}
});
verticalPanel.add(uploader);
if (Uploader.isAjaxUploadWithProgressEventsSupported()) {
final Label dropFilesLabel = new Label("Drop Files Here");
dropFilesLabel.setStyleName("dropFilesLabel");
dropFilesLabel.addDragOverHandler(new DragOverHandler() {
@Override
public void onDragOver(DragOverEvent event) {
if (!uploader.getButtonDisabled()) {
dropFilesLabel.addStyleName("dropFilesLabelHover");
}
}
});
dropFilesLabel.addDragLeaveHandler(new DragLeaveHandler() {
@Override
public void onDragLeave(DragLeaveEvent event) {
dropFilesLabel.removeStyleName("dropFilesLabelHover");
}
});
dropFilesLabel.addDropHandler(new DropHandler() {
@Override
public void onDrop(DropEvent event) {
dropFilesLabel.removeStyleName("dropFilesLabelHover");
if (uploader.getStats().getUploadsInProgress() <= 0) {
clearStatusPanel(progressBarPanel);
}
uploader.addFilesToQueue(Uploader.getDroppedFiles(event.getNativeEvent()));
event.preventDefault();
}
});
verticalPanel.add(dropFilesLabel);
}
return uploader;
}
/**
* Disables the close and the uploader buttons
*/
private void disableDialog() {
closeDialog.setEnabled(false);
uploader.setButtonDisabled(true);
}
/**
* Disables the close and the uploader buttons
*/
private void enableDialog() {
closeDialog.setEnabled(true);
uploader.setButtonDisabled(false);
}
/**
* Clears the progress bar panel and everything in it.
*
* @param progressBarPanel the panel where the upload controls are placed
*/
private void clearStatusPanel(VerticalPanel progressBarPanel) {
progressBarPanel.clear();
progressBars.clear();
cancelButtons.clear();
}
protected class CancelProgressBarTextFormatter extends ProgressBar.TextFormatter {
@Override
protected String getText(ProgressBar bar, double curProgress) {
if (curProgress < 0) {
return "Cancelled";
}
return ((int) (100 * bar.getPercent())) + "%";
}
}
Here is the CSS I copied from your CSS and from the get-incubator
/* ProgessBar styles /
.gwt-ProgressBar-shell {
border: 2px solid #848280;
background-color: #454545;
height: 16px;
width: 50%;
margin-left: 10px;
}
P.S. I had to hunt around to find the progress bars dependency. It might be helpful in quick start to mention that you need the GWT Incubator JAR and some style sheet additions to get that working.
Cheers!
Ben
Last edit: Ben Michaud 2014-07-10
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
The distribution does not seem to include either button images from the examples nor CSS files. I was able to find a new button image, but the styles I added to my CSS file from wht I found on your examples/showcase page have no affect. So now I have a plan bland "Drop files here" without a nice box and the progress bars only have textual information. What am I doing wrong? (Firefox Nightly 31.0a1)
Here is my set-up code:
/*
* prepares the uploader component
*
* @param verticalPanel a place to put the controls
* @param progressBarPanel a place for the progress bars
* @return the uploader for convenience
/
private Uploader prepareUploader(final VerticalPanel verticalPanel, final VerticalPanel progressBarPanel) {
uploader.setUploadURL(IMPORT_SERVLET_PATH)
.setButtonImageURL("images/folder_open_add.png")
.setButtonWidth(32)
.setButtonHeight(32)
.setFileSizeLimit("0")
.setButtonCursor(Uploader.Cursor.HAND)
.setButtonAction(Uploader.ButtonAction.SELECT_FILES)
.setFileQueuedHandler(new FileQueuedHandler() {
@Override
public boolean onFileQueued(final FileQueuedEvent fileQueuedEvent) {
dataManager.startUserSessionPolling();
Here is the CSS I copied from your CSS and from the get-incubator
/* ProgessBar styles /
.gwt-ProgressBar-shell {
border: 2px solid #848280;
background-color: #454545;
height: 16px;
width: 50%;
margin-left: 10px;
}
These are the changes in my GWT XML module definition file:
<inherits name="com.google.gwt.widgetideas.WidgetIdeas"/>
<set-configuration-property name="xsiframe.failIfScriptTag" value="FALSE"/>
<inherits name="org.moxieapps.gwt.uploader.Uploader"/>
P.S. I had to hunt around to find the progress bars dependency. It might be helpful in quick start to mention that you need the GWT Incubator JAR and some style sheet additions to get that working.
Cheers!
Ben
Last edit: Ben Michaud 2014-07-10