在 smartgwt 模态 Window 中捕获 HTML5 拖放事件

Question

我正在尝试使用表单制作模态 window 以在 smartgwt 中上传新文件，目前我正在使用 FileItem 并将文件放在其浏览按钮上在某些浏览器中有效。问题是我无法设置 FileItem 样式，我希望它看起来更大 "drop zone"。据我所知，FileItem 的样式由于安全问题而受到限制，因此我尝试使用另一个元素（标签）来捕获拖放事件，然后将拖放文件的值设置为 FileItem.

问题是 smartgwt 在 Widgets 级别上实现了监听器，并且不捕获 DOM 元素上的浏览器事件（或者至少看起来是这样）。我还尝试使用 Event 和 DOM 类来捕获事件，但我收到了 Umbrella 异常。

模态 window 的当前代码：

public class ImportDocumentWindow extends Window{

private GroupFiles groupFiles;

public ImportDocumentWindow(GroupFiles groupFiless) {
    this.groupFiles = groupFiless;

    //window properties
    setShowTitle(false);
    setShowHeader(false);
    setShowStatusBar(false);
    setCanDragReposition(false);
    setHeight(300);
    setWidth(325);
    setIsModal(true);
    setShowModalMask(true);
    setModalMaskOpacity(50);
    centerInPage();
    setShowMinimizeButton(false);
    setShowCloseButton(false);
    setStyleName("modalWindow");
    setBodyStyle("modalWindowBody");

    //main layout
    VLayout vlayout = new VLayout();
    vlayout.setHeight100();
    vlayout.setWidth100();

    //header layout
    HLayout headLayout = new HLayout();
    headLayout.setWidth100();
    headLayout.setHeight(30);
    headLayout.setStyleName("modalWindowHeader");

    Label lblWindowTitle = new Label("Upload files");
    lblWindowTitle.setWidth(300);
    lblWindowTitle.setHeight(20);
    lblWindowTitle.setValign(VerticalAlignment.CENTER);
    lblWindowTitle.setStyleName("modalWindowTitle");

    IButton close = new IButton("");
    close.setShowTitle(false);
    close.setIcon("x icon.png");
    close.setWidth(24);
    close.setHeight(24);
    close.setValign(VerticalAlignment.CENTER);
    close.setAlign(Alignment.RIGHT);
    close.setBaseStyle("closeButtonStyle");
    close.addClickHandler(new ClickHandler() {

        @Override
        public void onClick(ClickEvent event) {
            destroy();
        }
    });

    headLayout.addMembers(lblWindowTitle,close);
    vlayout.addMember(headLayout);

    DynamicForm form = new DynamicForm();
    form.setWidth100();
    form.setHeight("*");
    form.setTitleOrientation(TitleOrientation.TOP);
    form.setNumCols(1);
    form.setStyleName("modalWinodowForm");

    final FileItem file = new FileItem();
    file.setShowTitle(true);
    file.setTitle("Drop or browse file");
    file.setTitleStyle("topInputLabel");
    file.setControlStyle("uploadBox");
    file.setWidth(260);
    form.setFields(file);
    vlayout.addMember(form);

    /*
     * Insert drop zone here?
     * 
     */
     Label dropZone = new Label();
     dropZone.setTitle("Drop files here");
     dropZone.setWidth(200);
     dropZone.setHeight(200);
     dropZone.addDropOverHandler(new DropOverHandler() {

        @Override
        public void onDropOver(DropOverEvent event) {
            // Expects another canvas / widget to be dropped??

        }
    });


    vlayout.addMember(dropZone);
    addItem(vlayout);   
}
}

那么，有人知道当文件从桌面拖放到应用程序时如何捕获事件吗？

GWT 版本为 2.6.0

Answer 1

您可以使用由 Matias Meno 设计的开放源代码 javascript 库 dropzone.js，并且可以广泛使用和开放源代码；下载并将其直接放在 war 文件夹中。在 war 中创建 dropzone.html 并将此内容放在那里

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="dropzone.js"></script>
<title>Web Uploader Project</title>
</head>
<body>
 <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
  <script>
  window.Dropzone.options.myAwesomeDropzone = {
   
   init : function() {
    this.on("addedfile", function(file) {
     window.parent.notifier();
    });

   }
  };
 </script>
</body>
</html>

将 action 设置为您的 servlet，这将在服务器端处理上传事件。将 class 设置为 dropzone 会告诉图书馆您想放置放置区的位置。顺便说一下，http://www.dropzonejs.com 有很多细节，您可能需要查看以了解它的强大功能。 window.parent.notifier 是一个 Dom 方法，您将使用 JSNI 从 SmartGWT 代码导出。

在你上面的 class 添加此代码：

  final Window win = new Window();
/*
*your other cod
*/
   

  VLayout dropguy = new VLayout();
  dropguy.setWidth100();
  dropguy.setWidth100();
  dropguy.setShowEdges(true);

  Frame frame = new Frame();
  frame.setSize("100%", "100%");
  frame.setUrl("dropzone.html");
  dropguy.addMember(frame);
  win.addItem(dropguy);
  
        EntryP.fileAdded(this);
  win.draw();
 }

 public static void notifier() {
  SC.say("NOFITIER SAYS: file added");
 }

 public static native void fileAdded(EntryP examp) /*-{
  $wnd.notifier=$entry(@com.example.client.EntryP::notifier());
  
 }-*/;

请注意我如何引用 dropzone.html 并通过调用 EntryP.fileAdded(this); 导出静态通知程序方法以使其在 DOM 中可用。您可以将框架的尺寸设置为任何您想要的尺寸，并将其放置在您选择的布局中。

Answer 2

我最终使用了名为“DHTMLX Vault”的外部库。实现非常简单。

将库导入到您的 war 文件夹中的某处
Link 主 HTML 文件中的 JS 和 CSS 文件
创建自定义 servlet 来处理上传（将它们包含在主 XML 文件中）
使用官方实施指南在您的 Java class.

简短示例：

Canvas canvas = new Canvas();
    canvas.setContents("<div id='vaultObj' style='width:524px; height:300px; margin:15px auto;'></div>");
    vlayout.addMember(canvas);

...

public native void initVault(String url) /*-{

    var myVault = new $wnd.dhtmlXVaultObject({
        container:  "vaultObj",
        uploadUrl:  url,
        swfPath:    "dhxvault.swf",
        slXap:      "dhxvault.xap",
        autoStart:  true,
        autoRemove: false,
        buttonClear:false,
    });


}-*/;

注意我在 canvas 中创建了 div 和 class "vaultObj"，并且 class 稍后用于标记保险库容器选择器。就我而言，我必须在 onDraw 方法中调用 initVault 方法才能正确应用库样式和 JS。

在 smartgwt 模态 Window 中捕获 HTML5 拖放事件

Catching HTML5 drag&drop events inside smartgwt modal Window

html

gwt

drag-and-drop

smartgwt