マイペースなプログラミング日記

DTMやプログラミングにお熱なd-kamiがマイペースに書くブログ

GWTでFile API

GWTでFile APIをどう使うのか調べてみたら、そのためのライブラリが見つかった。http://www.vectomatic.org/libs/lib-gwt-fileにライブラリがあり、そのDropPanelとDataTransferExtなどを使えばOKらしいが、gwt.xmlでのinheritsと、Drag関係やDrop関係のイベントでpreventDefaultが必要だとか。ソースコードも載せておく。

まず、〜.gwt.xmlで以下のコードを入れておく

<inherits name="org.vectomatic.libgwtfile" />

クラス名やパッケージ名は気にせず、以下のようにすれば、ファイルをドラッグしたときに、ドロップした全てのファイルの名前をアラートで表示する

package net.d_kami.minivm.client;

import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.dom.client.DropEvent;
import com.google.gwt.event.dom.client.DropHandler;
import com.google.gwt.event.dom.client.DragOverEvent;
import com.google.gwt.event.dom.client.DragOverHandler;
import com.google.gwt.event.dom.client.DragEnterEvent;
import com.google.gwt.event.dom.client.DragEnterHandler;
import com.google.gwt.event.dom.client.DragLeaveEvent;
import com.google.gwt.event.dom.client.DragLeaveHandler;

import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;

import org.vectomatic.dnd.DropPanel;
import org.vectomatic.dnd.DataTransferExt;

import org.vectomatic.file.File;
import org.vectomatic.file.FileList;

public class MiniVM implements EntryPoint{
    public void onModuleLoad(){
        DockLayoutPanel dock = new DockLayoutPanel(Unit.EM);
        
        DropPanel drop = new DropPanel();
        drop.add(new Label("ここにファイルをドラッグ"));
        drop.getElement().setAttribute("style", "border: solid 1px #0000FF");
        dock.addEast(drop, 15.0);
        
        drop.addDragEnterHandler(new DragEnterHandler(){
            public void onDragEnter(DragEnterEvent e){
                e.preventDefault();
            }
        });
        
        drop.addDragLeaveHandler(new DragLeaveHandler(){
            public void onDragLeave(DragLeaveEvent e){
                e.preventDefault();
            }
        });
        
        drop.addDragOverHandler(new DragOverHandler(){
            public void onDragOver(DragOverEvent e){
                e.preventDefault();
            }
        });
        
        drop.addDropHandler(new DropHandler(){
            public void onDrop(DropEvent e){
                e.preventDefault();
                
                DataTransferExt transfer = (DataTransferExt)e.getDataTransfer();
                FileList files = transfer.getFiles();
                
                for(File file : files){
                    Window.alert(file.getName());
                }
            }
        });
        
        RootLayoutPanel.get().add(dock);
    }
}