쿠...sal: [컴][웹] GWT 사용하기 - UiBinder

UiBinder 에서 Event 를 다루기

Event Handler 만들기

private 이 아닌 method 이며,
return type 은 void 여야 한다.
parameter 로 수신하고자 하는 event type(GwtEvent) 을 적는다. 이 event type 을 보고 UiBinder 가 어떤 종류의 event 를 처리할 지를 판별한다.
Widget 에서 어떤 event 를 지원하는지는 JavaDoc 을 확인하면 된다. 보면 아래그림처럼 addXXXXHandler 같은 모양들이 존재한다. 해당하는 event 를 지원한다는 것이다.
addClickListener(ClickListener listener)
같은 경우는, UiBinder 에서는
void myClickHandler (ClickEvent event) {}
모양의 handler 를 작성하면 된다.
@UiHandler("fieldName") annotation 을 갖는다. @UiHandler({"field1", "field2"}). 처럼 여러 field 에서 사용할 수도 있다.

<g:Button ui:field="btnSubmit">Submit</g:Button>

@UiHandler("btnSubmit")
void submitClickHandler (ClickEvent event) {
    Window.alert("Submit ...");
}

UiBinder Field References

UiBinder 에서 사용하는 Expression Language 정도록 생각하면 된다. 이 녀석을 이용하면, template field 에서 method 를 사용할 수 있고, return 값을 받아서 field 를 set 할 수 있다.

<g:Button text="Hello {person.getName}" />
<div class="{style.bold} {style.tall}">S-Mart</div>

위의 template 에서는 person.getName() 을 호출하는 것이고, style.bold(), style.tall() 을 호출하는 것이다.

<g:Button ui:field="myButton" text="Click Me!" />
<g:Label text="{myButton.getText}" />

위의 예제처럼 사용하는 object 는 ui:field 로 생성될 object 들이다. 그래서 위의 예제는 Button 과 Label 이 같은 text 를 사용하게 되는 것이다. 그렇기 때문에 Button 이 Label 보다 먼저 나와야 한다. 순서가 바뀌면, Label 은 값이 없게 될 것이다.

이런 식으로 내부의 class 를 template 에서 object 를 만드는 것 이외에 외부의 package 의 class를 template 에서 object 를 만들 수 있다. 이 때 사용하는 것이 <ui:with> 이다.

<ui:with field="person" type="com.other.package.Person" />
<g:HTMLPanel>
<g:Label text="Hello {person.getName}" />

위의 <ui:with > 는 아래의 코드와 같다고 보면 되겠다.

Person person = GWT.create(Persion.class);

java code 에서 사용하기

이렇게 만들어진 녀석은 java code 내부에서도 사용할 수 있다. java code 에서 사용하기 위해서 @UiFiled 를 정의 해 주면 된다.

@UiField
Person person;

UiBinder 에서 css 사용하기

<ui:style> 태그에서 field 를 적지 않으면 기본적으로 "style" 이라는 이름의 변수에 할당한다.

<ui:style field="style" src="LoginDialBox.css"/>
<g:HTMLPanel>
<div class="{style.container-form}">

이런식으로 css file 을 uiBinder 에 사용할 수 있다. 이때는 '-' 를 포함한 class 이름도 사용이 가능하다.

UiBinder 에서 정의한 css 를 javacode 에서 사용하기

UiBinder 에서 새롭게 css 를 정의할 수 있다. 이 때 이 녀석을 java code 에서 사용해야 하는 경우도 있을 수 있다. 이때는 javacode 에 interface 를 만들어서 사용하면 된다. UiBinder 에 정의된 css 는 compile time 에나 실제로 만들어지기 때문에 compile 이전까지는 접근할 수 있는 방법이 없어서 이런 방법을 써야 한다고 한다.

<ui:style field="myStyle" type="com.MyStyle">
  .hidden { visibility: hidden; }
  .borderOk { border: 3px green solid; }
</ui:style>





public class TestBox extends PopupPanel {
    interface MyStyle extends CssResource {
        String hidden();
        String borderOk();
    }

    @UiField MyStyle myStyle;

    ...

    private void setBorderStyle(TextBox textBox, String styleName) {
        textBox.removeStyleName(myStyle.borderOk());
        ...

}

gwt css

gwt widget 에서 정해져 있는 styleName 을 override 할 수 있다. (예: SuggestBox)
이 경우에는 해당하는 css 를 App.css, 즉, (war/MySampleApplication.css) 에 넣어주면 된다.

Reference

GWT in Action 2nd Edition, Chapter 6

쿠...sal

[컴][웹] GWT 사용하기 - UiBinder - 2