[英]How to use gwtbootstrap3 calendar with UiBinder
Can we use gwtbootstrap3 fullcalendar mentioned at http://gwtbootstrap3.github.io/gwtbootstrap3-demo/#fullcalendar with UiBinder. 我们可以在UiBinder中使用http://gwtbootstrap3.github.io/gwtbootstrap3-demo/#fullcalendar中提到的gwtbootstrap3 fullcalendar。
I am trying to use it with UiBinder and nothing is appearing on that page. 我正在尝试将其与UiBinder一起使用,但该页面上没有任何显示。
code to my UiBinder class 代码到我的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>
code to the corresponding view 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);
}
}
and I am using mvp4g
framework. 我正在使用
mvp4g
框架。
initializeCalendar();
initWidget( uiBinder.createAndBindUi( this ) );
You should first init the widget and then initialize the calendar. 您应该首先初始化小部件,然后初始化日历。 This is because you are adding your
FullCalendar
to the calendarContainer
HTMLPanel
in initializeCalendar
. 这是因为您要添加的
FullCalendar
到calendarContainer
HTMLPanel
在initializeCalendar
。 And before the call to initWidget
, calendarContainer
is null
. 在调用
initWidget
之前, calendarContainer
为null
。
I think you can go a step further and do it like this: 我认为您可以更进一步,并像这样:
<!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>
And then in your EventView
: 然后在您的
EventView
:
@UiField(provided = true) FullCalendar fullCalendar;
@UiField(provided = true)
means it's up to you to initialize this widget before calling initWidget
. @UiField(provided = true)
表示由您决定在调用initWidget
之前初始化此窗口小部件。 So, in this case, the order: 因此,在这种情况下,顺序为:
initializeCalendar();
initWidget( uiBinder.createAndBindUi( this ) );
is OK. 还可以 Additionally, you don't have to add the
FullCalendar
to any panel anymore - it's already added, you just have to initialize it. 此外,您不必
FullCalendar
添加到任何面板中-它已经添加,只需初始化它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.