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

我正在尝试制作带有表单的模态窗口以在 smartgwt 中上传新文件，目前我正在使用 FileItem 并将文件放在其浏览按钮上在某些浏览器中工作。问题是我不能FileItem风格，我希望它看起来像一个更大的"放置区"。据我了解，由于安全问题，FileItem的样式受到限制，所以我尝试使用另一个元素（标签）来捕获拖放事件，然后将拖放文件的值设置为 FileItem .

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

模态窗口的当前代码：

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

您可以使用由

Matias Meno设计的开源javascript库dropzone.js广泛可用且开源; 下载并直接将其放置在您的 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，这将在服务器端处理上传事件。将类设置为dropzone会告诉库您要放置放置区的位置。顺便说一下，http://www.dropzonejs.com 有很多细节，你可能想看看它的力量。 window.parent.notifier 是一种 Dom 方法，您将使用 JSNI 从 SmartGWT 代码中导出。

在上面的类中添加以下代码：

		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 中可用。您可以将框架的尺寸设置为所需的任何尺寸，并将其放置在您选择的布局中。

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

将库导入到战争文件夹中的某个位置
在主 HTML 文件中链接 JS 和 CSS 文件
创建自定义 servlet 来处理上载（将它们包含在主 XML 文件中）
使用官方实现指南在 Java 类中进行样式设置和修改。

简短示例：

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,
    });

}-*/;

请注意，我在画布中使用类"vaultObj"创建了div，该类后来用于标记vault容器选择器。就我而言，我必须在onDraw方法中调用initVault方法才能正确应用库样式和JS。

相关内容

最新更新

热门标签：