Как выделить несколько компонентов для загрузки файлов перетаскивания (Vaadin)

Question

Я использую Vaadin для создания моего интерфейса и хочу загружать файлы, просто перетаскивая их с рабочего стола в браузер.

Существует несколько компонентов, которые могут получить файл на той же странице. Поэтому я использовал DragAndDropWrapper для этих компонентов и реализовал DropHandler. Когда пользователь перетаскивает файл по одному из компонентов, его стиль меняется.

Но я также хотел бы стили всех компонентов, которые могут получить файл, чтобы его можно было изменить, когда файл перетаскивается по областям, которые его не могут получить, таким образом указывая места, в которые пользователь может удалить файл. Между тем, если файл перетаскивается над компонентом рецептора, только стиль этого компонента должен измениться снова.

Можно ли реализовать это, используя только Vaadin?

Answer 1

Его возможно. Добавьте в тело своей страницы ondragover и ondragleave прослушиватель и создайте несколько своих компонентов при возникновении событий. SSCCE:

 
@com.vaadin.annotations.JavaScript("summer.js") 
public class Valo4UI extends UI 
{ 
    @Override 
    protected void init(VaadinRequest request) 
    { 
     VerticalLayout layout = new VerticalLayout(); 
     Panel panel = new Panel("Login"); 
     panel.setSizeUndefined(); 
     panel.setContent(layout); 
     TextField username = new TextField(); 
     username.setStyleName("canReceiveFile"); 
     layout.addComponent(username); 
     TextField password = new TextField(); 
     password.setStyleName("canReceiveFile"); 
     layout.addComponent(password); 
     Button ok = new Button("Login"); 
     ok.setStyleName("canReceiveFile"); 
     layout.addComponent(ok); 
     setContent(panel); 
     JavaScript.getCurrent().execute("initDragStyling()"); 
    } 
... 
}

summer.js:

function ohItsSummer(){ 
    var summerTable = document.getElementsByClassName("canReceiveFile"); 
    for(var i=0; i<summerTable.length; i++){ 
     summerTable[i].style.borderColor = 'orange'; 
    } 
} 
function itsReallyHot(){ 
    var summerTable = document.getElementsByClassName("canReceiveFile"); 
    for(var i=0; i<summerTable.length; i++){ 
     summerTable[i].style.borderColor = 'inherit'; 
    } 
} 

function initDragStyling(){ 
    document.body.setAttribute("ondragover","ohItsSummer()"); 
    document.body.setAttribute("ondragleave","itsReallyHot()"); 
}