2017-10-31 5 views
0

오른쪽에있는 텍스트와 함께 사각형 div 요소 (버튼 모양)가있는 GWT 위젯을 만들고 싶습니다. 이 위젯을 선택하여 div/버튼이나 텍스트를 클릭하면 전체 위젯이 선택되도록하고 싶습니다.버튼과 텍스트가있는 GWT 위젯?

구현에 대한 제안 사항이 있으십니까? Button과 Label과 같이 GWT Button 내부에 여러 항목을 중첩하는 쉬운 방법이 있다면 아마 작동 할 것입니다. Composite를 확장하고 Button 및 Label을 보유하는 클래스를 만드는 방법을 생각하고 있지만 완전히 새로운 위젯을 선택하면이 두 가지를 모두 선택하는 방법을 모르겠습니다.

답변

1

평범한 HTML로 작성하려는 것을 그려 보는 방법을 알고 있습니까?

그렇다면 Widget의 하위 클래스를 만들고 필요한 스타일을 비롯하여 여러 요소를 만들면됩니다. 다른 여러 위젯을 만들 필요가 없습니다. 그런 다음 새 위젯에 클릭 핸들러를 추가하기 만하면 누구든지 위젯 내부의 컨텐트를 클릭하면 알 수 있습니다. 당신이 사용하는 경우


마찬가지로,이 HTMLPanel (당신이 말하는 같은 Composite에, 포장) 또는 LabelButton, 당신은 패널에 클릭 핸들러를 추가 할 수 있습니다 모두 포함 할 것을, 당신은 알 것입니다 다른 위젯 중 하나를 클릭하면 클릭 이벤트가 "버블"되므로 아무 것도 차단하지 않으면 모든 요소가 클릭에 대해 알 수 있도록 각 요소와 부모를 계속 실행합니다. 그러나 중첩 위젯을 사용하면 HTML을 간단히 작성하는 것보다 작성하는 데 비용이 다소 들게되므로이 방법을 사용하면 좋습니다. 어느 경우


, 실제로 클릭 처리기를 추가 Widget.addDomHandler(...)를 사용합니다. 요청으로

@Override 
public HandlerRegistration addClickHandler(ClickHandler handler) { 
    return addDomHandler(handler, ClickEvent.getType()); 
} 

, 예를 위젯 매우 짧은 (코드보다 더 코멘트)에 보인다 인생을 더 쉽게하려면, 당신은 HasClickHandlers을 구현하고,이 같은 새로운 방법을 선언, 새로운 방법을 만들 수 있습니다 설명 무엇 : 여기

public class ButtonWithText extends Widget implements HasClickHandlers { 
    public ButtonWithText(String text, String buttonLabel) { 
    // Start with a <div></div> wrapper 
    setElement(Document.get().createDivElement()); 
    // Insert a <span> for the text, allowing us to change the text later 
    Element textElement = Document.get().createSpanElement(); 
    textElement.setInnerText(text); 

    // Create a button element as well 
    Element buttonElement = Document.get().createButtonElement(); 
    buttonElement.setInnerText(buttonLabel); 

    // Attach both to the div we already created 
    getElement().appendChild(textElement); 
    getElement().appendChild(buttonElement); 

    // Note that we could have done all of the above with SafeHtmlTemplate 
    // to let us write a string, or could do the escaping ourselves and just 
    // make a simple HTML string in code. I find making DOM elements like 
    // this easier to read, but many people prefer the template approach. 
    // When considering a template tool, also look into the new library 
    // Elemento to see what it offers. 
    } 

    @Override 
    public HandlerRegistration addClickHandler(ClickHandler handler) { 
    return addDomHandler(handler, ClickEvent.getType()); 
    } 

} 

당신이 그것을 https://viola.colinalworth.com/proj/54177c9456d1c4f777d17dc660005643/project/client/SampleEntryPoint.java를 볼 수 있도록 실행, 프로젝트 - 당신은 하나의 텍스트에, 또는 버튼을 클릭 할 수 있으며, 예상대로 팝업이 나타납니다.

+0

의견을 주셔서 감사합니다! 나는 당신이 클릭 핸들러에 대해 무슨 뜻인지 이해한다. 그러나 그렇게하기 위해 HTML을 알고 있다면 그것을 구현하는 방법을 여전히 잘 모른다. 개체를 만들기 위해 HTML을 알고 있다면 ui.xml 파일을 사용하지 않는 방법 (여러 위젯을 사용하는 것 외에)을 수행 할 수있는 방법이 있습니까? – OMGitzMidgar

+1

예! 나는 uibinder없이 이것을 어떻게 할 수 있는지를 보여주는 매우 못생긴 위젯을 만들기 위해 답을 추가 할 것이다. –