SPRING-SOURCE.RU

Изучаем GWT UiBinder - Часть 1

В этом уроке мы будем разрабатывать UserProfile виджет. Он будет выглядеть вот так:

GWT 2.0 UiBinder

Для реализации этого виджета нам нужно создать 4 файла:

Начнем с .ui.xml файла, это как если бы мы разрабатывали HTML страницу, то начали бы непосредственно с HTML и только потом добавляли JavsScript и CSS ит.п.: 

      
<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <g:FlowPanel>
        <g:HorizontalPanel>
            <g:Image ui:field="photo"/>
            <g:FlowPanel>
                <g:Label ui:field="name"/>
                <g:HorizontalPanel>
                    <g:Label text="mobile: "/>
                    <g:Label ui:field="mobile"/>
                </g:HorizontalPanel>
                <g:HorizontalPanel>
                    <g:Label text="email: "/>
                    <g:Label ui:field="email"/>
                </g:HorizontalPanel>
                <g:HorizontalPanel>
                    <g:Label text="web: "/>
                    <g:Label ui:field="web"/>
                </g:HorizontalPanel>
            </g:FlowPanel>
        </g:HorizontalPanel>
        <g:Label ui:field="bio"/>
    </g:FlowPanel>
</ui:UiBinder>

И так, это представление UI для компонента, который мы хотим видеть на экране.

Следующим идет объект данных представляющий исходные данные для некоторого профиля пользователя: 

      
public class UserProfileDO {
  private String imageURL;
  private String name;
  private String mobile;
  private String email;
  private String web;
  private String bio;

...getters and setters here....

  public UserProfileDO(String bio, String email, String imageURL,
 String mobile, String name, String web) {
   super();
   this.bio = bio;
   this.email = email;
   this.imageURL = imageURL;
   this.mobile = mobile;
   this.name = name;
   this.web = web;
  }
}

Последняя часть головоломки это код UserProfile виджета: 

      
public class UserProfile extends Composite {

    interface UserProfileUiBinder extends UiBinder<FlowPanel, 
      UserProfile>{};
    private static UserProfileUiBinder uiBinder = 
      GWT.create(UserProfileUiBinder.class);

    @UiField Image photo;
    @UiField Label name;
    @UiField Label mobile;
    @UiField Label email;
    @UiField Label web;
    @UiField Label bio;

    public UserProfile(UserProfileDO data)
    {
        super();
        initWidget(uiBinder.createAndBindUi(this));
        photo.setUrl(data.getImageURL());
        name.setText(data.getName());
        email.setText(data.getEmail());
        mobile.setText(data.getMobile());
        web.setText(data.getMobile());
        bio.setText(data.getBio());
    }

}

Первые две линии будут такими для любого виджета, который представлен xml. Мы объявляем параметризованный интерфейс с двумя типами: первый это верхний контейнер, который находится в xml (в нашем случае FlowPanel) и второй - это сам виджет класс.

Потом мы указали конструктор, который берет data object. Связь UiBinder XML с виджетом происходит при вызове initWidget() метода.

Последняя часть - точка входа. 

      
public class UiBinderLearning implements EntryPoint {

    public void onModuleLoad() {
        UserProfileDO upDO = new UserProfileDO("Project manager at Epam Systems.", 
        "[email protected]", "/images/me.jpg", "+380952600399", 
        "Alexander Arendar", "aarendar.wordpress.com");
        UserProfile userProfile= new UserProfile(upDO);
        RootPanel.get().add(userProfile);
    }
}

Все.

Copyright © 2024