如何在 UiBinder 中使用 gwtbootstrap3 日历

Question

我们可以将 http://gwtbootstrap3.github.io/gwtbootstrap3-demo/#fullcalendar 中提到的 gwtbootstrap3 fullcalendar 与 UiBinder 一起使用吗？

我正在尝试将它与 UiBinder 一起使用，但该页面上没有显示任何内容。

代码到我的 UiBinder class

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:b="urn:import:org.gwtbootstrap3.client.ui.gwt">
    <g:HTMLPanel ui:field="calendarContainer">
    </g:HTMLPanel>
</ui:UiBinder>

对应视图的代码class

public class EventView extends ReverseCompositeView<IEventView.IEventPresenter> implements IEventView {

    private static EventViewUiBinder uiBinder = GWT.create( EventViewUiBinder.class );

    interface EventViewUiBinder extends UiBinder<Widget, EventView> {
    }

    @UiField
    HTMLPanel calendarContainer;

    @Override
    public void createView() {
        //don't create the view before to take advantage of the lazy loading mechanism
        initializeCalendar();
        initWidget( uiBinder.createAndBindUi( this ) );
    }

    private void initializeCalendar() {
        final FullCalendar fc = new FullCalendar("event-calendar", ViewOption.month, true);
        fc.addLoadHandler(new LoadHandler() {
            @Override
            public void onLoad(LoadEvent loadEvent) {
                addEvents();
            }

            private void addEvents() {
                for (int i = 0; i < 15; i++) {
                    Event calEvent = new Event("id "+ i, "this is event "+i);
                    int day = Random.nextInt(10);
                    Date start = new Date();
                    CalendarUtil.addDaysToDate(start, -1 * day);
                    calEvent.setStart(start);
                    if(i%3 ==0){
                        calEvent.setAllDay(true);
                    }else{
                        Date d = new Date(start.getTime());
                        d.setHours(d.getHours()+1);
                        calEvent.setEnd(d);
                    }
                    fc.addEvent(calEvent);
                }
            }

        });

        calendarContainer.add(fc);
    }


}

我正在使用 mvp4g 框架。

Answer 1

initializeCalendar();
initWidget( uiBinder.createAndBindUi( this ) );

您应该先初始化小部件，然后再初始化日历。这是因为您将 FullCalendar 添加到 initializeCalendar 中的 calendarContainer HTMLPanel。在调用 initWidget 之前，calendarContainer 是 null.

我认为你可以更进一步，这样做：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:b="urn:import:org.gwtbootstrap3.client.ui.gwt"
    xmlns:f="urn:import:org.gwtbootstrap3.extras.fullcalendar">
    <g:HTMLPanel>
        <f:FullCalendar ui:field="fullCalendar" />
    </g:HTMLPanel>
</ui:UiBinder>

然后在你的 EventView:

@UiField(provided = true) FullCalendar fullCalendar;

@UiField(provided = true) 表示在调用 initWidget 之前由您初始化此小部件 。所以，在 this 的情况下，命令：

initializeCalendar(); initWidget( uiBinder.createAndBindUi( this ) );

可以。此外，您不必再将 FullCalendar 添加到任何面板 - 它已经添加，您只需对其进行初始化。

如何在 UiBinder 中使用 gwtbootstrap3 日历

How to use gwtbootstrap3 calendar with UiBinder

gwt

gwtbootstrap3