GWT를 감싸는/꾸미기 FileUpload

Question

GWT FileUpload는 양식 제출 중에 파일을 업로드 할 수있는 도구를 제공합니다 (적어도 내가 이해하는 방법은 무엇인가 :)) 내가 뭘하고 싶은지는 더 잘 보이게 만드는 것입니다. 표준 "찾아보기 ..."버튼을 제거하십시오.

저는 GWT 사용 경험이 없으므로 (JavaScript는 없음) 기존 솔루션을 찾았으며 꽤 좋은 프로젝트를 발견했습니다 (gwtupload). 좋은 일이지만, 내 자신 만의 소형 버전을 갖고 싶다는 생각을했습니다. (또한 어떻게 작동하는지 궁금합니다.) 그래서 코드를 탐색하고 마법 부분을 추출하려고했습니다. GWT FileInput이 사용되었지만 표시되지 않고 단추 클릭이이 FileInput에 위임되었음을 알았습니다. 코드는 내가 gwtupload의 소스를 검토 한 후이 까다로운 elem.click() JSNI 포함 (대표 클릭이 있다는 부분 만) 추출을 시도 :

class MyUpload extends Composite { 
    private static native void clickOnInputFile(Element elem) /*-{ 
     elem.click(); 
    }-*/; 

    public MyUpload() { 
     final FileUpload upload = new FileUpload(); 
     AbsolutePanel container = new AbsolutePanel(); 
     // container.add(upload); 
     Button btn = new Button("My Browse.."); 
     btn.addClickHandler(new ClickHandler() { 
      @Override 
      public void onClick(ClickEvent event) { 
       clickOnInputFile(upload.getElement()); 
      } 
     }); 
     container.add(btn); 
     initWidget(container); 
    } 
} 

하지만이 작동하지 않을 것 같다 클릭 '내 검색 ..'결과에 효과 없음 (단지 주석이없는 container.add(upload) 행으로 실행 해 보았을 때를 대비하여). 이 코드 샘플에서 무엇이 잘못되었거나 누락되었는지 이해해 주시겠습니까?

미리 감사드립니다.

P. FormPanel에 배치해야한다는 것을 알고 있으며 Servlet에서 실제 제출/처리를 수행하는 방법에 관해서는 나머지를 알고 있습니다. 내가하고 싶은 건이 장식이야.

Answer 1

나는 어떤 대답도 얻지 못했기 때문에이 문제에 대한 더 많은 조사가 필요 했으므로 GWT FileUpload (변형 된 파일)가 어떻게 꾸며질 수 있는지 이해하기 위해 gwtupload 프로젝트의 더 심층적 인 코드 분석을 수행했습니다.

element.click()은 #click() 메소드 (IE, Chrome, Safari)를 지원하는 브라우저에서만 작동합니다. 사실, 프로젝트 저자 인 Manuel Carrasco Moñino는 주석에서 언급합니다. FileInput이 투명 패널에 배치되었을 때 해킹을 사용하는 두 번째 방법 (Firefox의 경우 & 오페라)이 있지만 장식 된 버튼 위에 배치됩니다 (절대 위치 지정 사용). 의견 : Manuel :

사용자가 마우스를 버튼 위에 올려 놓고 클릭하면 실제로 나타나는 것은 파일 선택 대화 상자가 표시된 투명한 파일 입력을 클릭한다는 것입니다.

그런 다음 주요 작업은 요소에 스타일 속성을 올바르게 적용하고 있습니다.

따라서 사용자 지정 파일 업로드 구성 요소에는 두 가지 구현이 있으며 브라우저에 따라 GWT 지연 바인딩을 사용하여 인스턴스를 생성합니다. 내 질문에 언급 예로서

, 몇 가지 수정 사항이있어 ("업로드"컨테이너에 추가 할 수 있으며, 그것은 #setVisible) (false로 설정할 수 있습니다) :

class MyUpload extends Composite { 
    private static native void clickOnInputFile(Element elem) /*-{ 
     elem.click(); 
    }-*/; 

    public MyUpload() { 
     final FileUploadWithMouseEvents upload = new FileUploadWithMouseEvents(); 
     AbsolutePanel container = new AbsolutePanel(); 
     container.add(upload); 
     upload.setVisible(false); 
     Button btn = new Button("My Browse.."); 
     btn.addClickHandler(new ClickHandler() { 
      @Override 
      public void onClick(ClickEvent event) { 
       clickOnInputFile(upload.getElement()); 
      } 
     }); 
     container.add(btn); 
     initWidget(container); 
    } 
} 

이 예제는 IE8에서 잘 작동합니다.

P. 그의 위대한 도서관에서 마누엘에게 감사드립니다.