Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Eclipse Scout » FileChooserField in RAP
FileChooserField in RAP [message #1433901] Mon, 29 September 2014 11:43 Go to next message
Matthias Nick is currently offline Matthias NickFriend
Messages: 197
Registered: August 2013
Senior Member
Hi, I have a question regarding the FileChooserField in RAP.

index.php/fa/19308/0/

Observerations:
1) The open dialog only appears when I click on the folder icon
2) It is not possible to type text in to the field manually

The problem is, that when using a tablet device it is hard to exactly hit the folder icon. I think the open dialog should show up if we click somewhere in the field (not only on folder icon).

Is there a way to achieve this with the current implementation or should we open a bug?
Re: FileChooserField in RAP [message #1435546 is a reply to message #1433901] Wed, 01 October 2014 16:56 Go to previous message
Daniel Wiehl is currently offline Daniel WiehlFriend
Messages: 1
Registered: May 2016
Junior Member
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>
Previous Topic:Key events
Next Topic:Toolbar for RAP and SWT client
Goto Forum:
  


Current Time: Thu Apr 25 07:55:27 GMT 2024

Powered by FUDForum. Page generated in 0.03550 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top