|
Re: FileChooserField in RAP [message #1435546 is a reply to message #1433901] |
Wed, 01 October 2014 12:56  |
Eclipse User |
|
|
|
Behind the scene, the ‚browse-button' is represented as an HTML input-formfield of the type 'file' which offers the user functionality to choose a file from the filesystem. Unlike the typical RAP flow of triggering an AJAX call to the backend, the filechooser is opened by the browser directly.
What might help you is RAP ClientScripting [1]. For this to work, provide your own implementation of the RwtScoutFileUploadField and register a mouse-click-listener on the filename textfield. If being clicked there is no roundtrip to the server but your provided JavaScript is executed instead. The script is straightforward: you simply obtain the reference to the 'Browse-Button' DOM element and invoke 'click' on it.
[1] http://www.eclipse.org/rap/developers-guide/devguide.php?topic=scripting.html&version=2.2
Please see the example below:
Your extended RwtScoutFileUploadField
/**
* Upload-Field that supports to open the filechooser-dialog when clicking onto the path-field.
*/
public class RwtScoutFileUploadField2 extends RwtScoutFileUploadField implements IRwtScoutFileUploadField {
@Override
protected void initializeUi(Composite parent) {
super.initializeUi(parent);
Text textField = getUiField();
FileUpload browseButton = getUiBrowseButton();
// Register ClientSide Scripting when clicking on the textfield.
textField.addListener(SWT.MouseDown, FileChooserClientListener.getInstance());
// To access the filechooser from within the JavaScript, you simply provide a reference to that field.
WidgetDataUtil.registerDataKeys("widget_filechooser");
textField.setData("widget_filechooser", WidgetUtil.getId(browseButton));
}
private static final class FileChooserClientListener extends ClientListener {
private static final long serialVersionUID = 1L;
private static final String JS = "" +
"var handleEvent = function(event) {" +
" var filechooserRef = event.widget.getData('widget_filechooser');" + // get the reference to the browse-button.
" var filechooserWrapper = rwt.remote.ObjectRegistry.getEntry(filechooserRef);" +
" var filechooserDOM = filechooserWrapper.object._inputElement;" + // get the DOM of the browse-button.
" filechooserDOM.click();" + // invoke 'click' on the DOM to open the filechooser.
"};";
public static FileChooserClientListener getInstance() {
return SingletonUtil.getSessionInstance(FileChooserClientListener.class);
}
private FileChooserClientListener() {
super(JS);
}
}
}
The registration of your implementation
<extension
point="org.eclipse.scout.rt.ui.rap.formfields">
<formField
active="true"
modelClass="org.eclipse.scout.rt.client.ui.form.fields.filechooserfield.IFileChooserField"
name="File chooser field"
scope="local">
<uiClass
class="org.yourapp.ui.rap.RwtScoutFileUploadField2">
</uiClass>
</formField>
</extension>
|
|
|
Powered by
FUDForum. Page generated in 0.04916 seconds