Question

我尝试使用表单创建模态窗口以在smartgwt中上传新文件，目前我正在使用FileItem并且在其浏览按钮上删除文件适用于某些浏览器。问题是，我不能设置FileItem样式，我希望它看起来像一个更大的“放置区域”＃34;。据我所知，FileItem的样式因安全问题而受到限制，因此我尝试使用另一个元素（标签）来捕获拖放事件，然后将删除的文件的值设置为FileItem。

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

模态窗口的当前代码：

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 文件夹中。在战争中创建dropzone.html并将此内容放在那里

＆＃13;

<!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>

＆＃13;

＆＃13; 将action设置为servlet，它将处理服务器端的上传事件。将类设置为dropzone会告诉库您要放置dropzone的位置。顺便说一句http://www.dropzonejs.com有很多细节，你可能想要检查以了解它的力量。 window.parent.notifier是一种使用JSNI从SmartGWT代码导出的Dom方法。

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

＆＃13;

		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());
		
	}-*/;

＆＃13;

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

Answer 2

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

将库导入war文件夹
链接主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,
    });


}-*/;

注意我在canvas中创建了带有“vaultObj”类的div，该类稍后用于标记vault容器选择器。在我的情况下，我不得不在onDraw方法中调用initVault方法来正确应用库样式和JS。

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

2 个答案: