Как использовать календарь gwtbootstrap3 с UiBinder

Question

Можно ли использовать gwtbootstrap3 fullcalendar, упомянутый в http://gwtbootstrap3.github.io/gwtbootstrap3-demo/#fullcalendar с UiBinder.

Я пытаюсь использовать его с UiBinder, и на этой странице ничего не появляется.

код в мой класс UiBinder

<!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> 

код соответствующего вида класса

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 в calendarContainerHTMLPanel в initializeCalendar. А до звонка до 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. Так, в этом случае, порядок:

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

ОК. Кроме того, вам больше не нужно добавлять FullCalendar на любую панель - она ​​уже добавлена, вам просто нужно ее инициализировать.