Schedule - Lazy

Schedule - Lazy - очень удобный компонент на основе FullCalendar. Расмотрим что может и чего не хватает.

Prime Faces предлагает нашему вниманию этот компонент. Он классно подойдет

в палне органайзера, календаря. Вы можете добавлять события и визуально их

наблюдать. Компонент поддерживает lazy loading - и это безусловно плюс.

Если вы показываете только один месяц, нет смысла грузить все события, например с БД

Как все настроить вы на йдете на сайте Prime Faces, там множество настроек, также поддержа 

локализаций. Вы можете выбирать вид для просмотра событий, или в режиме месяц,

неделя, день. На первый взгляд - что еще можно хотеть от этого компонента, но давайте

копнем поглубже.

 

Представим что у нас есть в БД таблица откуда мы грузим наши события. С нужным нам периодом, или это месяц, день, неделя. С lazy loading  ситуация следующая, если мы загрузи сначала вид день, мы мы взяли события за выбраной нами день. Потом берем неделю, грузим с БД за неделю. Потом взяли месяц - загрузили с БД за месяц. А потом если мы гуляем в предялах этого месяца, мы ничего не грузим с БД, компонент после месяца все себе сохранил и больше не нужно ему лезть в БД и грузить наше приложение запросами. Все прекрасно и рационально. Но есть один минус, если вы выбрали месяц(как на примере) ноябрь и у нас не только отображаются дни этого месяца но и пару с предедущего 27-31 октября. Вопросс, если я вижу месяц ноябрь, зачем мне события за октябрь. Ведь компонент загрузит события за все дни что отображаются. Кому то это не покажется серьезной проблемой, но мне пришлось с ней бороться. Есть ситуации когда лишние ди были как с переди так и в конце месяца. Но это не главное, если кто хочет может с этим бороться.... (я таки победил эту ситуацию)

Но давайте смоделируем ситуацию, что вы хоти на странице иметь два компонента calendar где отображать интервалы которые выбраны в Schedule. Тоесть поменяли вид и ваши отрезки с интервалами тоже меняются. Например: вы выбрали 2 октября и видите интервал с 2 - октября по 2 октября; вы выбрали 7-13 октября и видите этот интервал; выбрали месяц и видите начало и конец месяца. Проблема следующая, когда вы начнете с дня и до месяца компонент будет вызывать метод для загрузки событий и вы имеете доступ к датами компонента

  1.  @Override  
  2.             public void loadEvents(Date start, Date end) {  
  3.               start - начало
  4.               end - конец
  5.             
  6.             }

Все прекрасно используйте их и обновляйте свои calendar но если только вы загрузите месяц целиком. Вы не зайдете в этот метод и не сможете контролировать даты. Они у вас всегда будут начало и конец месяца. Тоесть после месяца Вы не сделаете интервал для Ваших calendar - неделю. Там уже работает JS и серверного доступа у Вас нет. Что же тогда делать?

Выход есть - переписать обработчики для кнопок переключения видов, кнопка вперед, назад, сегодня.

Сначала прячем стандартные кнопки указав свойства Schedule

  1.  rightHeaderTemplate="none"
  2.  leftHeaderTemplate="none"            

Тогда добавлем наши кнопки

  1. <p:commandButton update=":mainForm:scheduler" actionListener="#{planner.nextPrevious}"      proces="@this">
  2.    <f:attribute name="increment" value="previous" />
  3. </p:commandButton>
  4. <p:commandButton update=":mainForm:scheduler" actionListener="#{planner.nextPrevious}"      proces="@this">
  5.    <f:attribute name="increment" value="next" />
  6. </p:commandButton>
  7. <p:commandButton value="Месяц" update=":mainForm:scheduler" actionListener="#{planner.selectView}" process="@this">
  8.    <f:attribute name="view" value="month" />
  9. </p:commandButton>   

  10. <p:commandButton value="Неделя" update=":mainForm:scheduler" actionListener="#{planner.selectView}" process="@this">
  11.    <f:attribute name="view" value="agendaWeek" />
  12. </p:commandButton> 

  13. <p:commandButton value="День" update=":mainForm:scheduler" actionListener="#{planner.selectView}" process="@this">
  14.    <f:attribute name="view" value="agendaDay" />
  15. </p:commandButton> 

Нам нужно только написать метод для actionListenera в нашем случае это метод selectView(). Для себя я в коде сделал еще один Schedule для того чтоб сохранять копию того что у нас на фронте. Если мы меняем виды на фронте то они меняются но после update они не сохраняются, а так мы можем себе их сохранять и всегда знать что мы имеем. Переходим к коду:

  1.  public void selectView(ActionEvent event) { 
  2.   initScgedulemodelView(false); 
  3.   String view = (String) event.getComponent().getAttributes().get("view"); 
  4.   this.getModel().setView(view); 
  5.   this.getModel().setInitialDate(getScheduleModel().getInitialDate()); 
  6.   this.scheduleModel.setView(view);

  7. private void initScgedulemodelView(boolean start) { 
  8.   if (getScheduleModel() == null) { 
  9.     setScheduleModel(new Schedule()); 
  10.     getScheduleModel().setView(getModel().getView()); 
  11.     getScheduleModel().setInitialDate(start == true ? new Date() : getModel().getInitialDate()); 
  12.     getModel().setInitialDate(getScheduleModel().getInitialDate());
  13.   }
  14. public Schedule getModel() { 
  15.  Schedule d = (Schedule)  FacesContext.getCurrentInstance().getViewRoot().findComponent("mainForm:scheduler"); 
  16.  return d;
  17. public void nextPrevious(ActionEvent event) { 
  18.   initScgedulemodelView(false); 
  19.   String increment = (String) event.getComponent().getAttributes().get("increment"); 
  20.   int moveValue = increment.equals("next") ? 1 : -1; 
  21.   Calendar cal = Calendar.getInstance(); 
  22.   cal.setTime((Date) this.getScheduleModel().getInitialDate()); 
  23.   if (this.getScheduleModel().getView().equals(agendaDay))
  24.     cal.add(Calendar.DAY_OF_MONTH, moveValue); 
  25.   else if (this.getScheduleModel().getView().equals(agendaWeek))
  26.     cal.add(Calendar.WEEK_OF_MONTH, moveValue); 
  27.   else if (this.getScheduleModel().getView().equals(month)) 
  28.     cal.add(Calendar.MONTH, moveValue); 
  29.   
  30.   this.getModel().setView(getScheduleModel().getView()); 
  31.   this.getModel().setInitialDate(cal.getTime()); 
  32.   this.getScheduleModel().setInitialDate(cal.getTime());
  33. }
  34. public void today(ActionEvent event) { 
  35.   Calendar cal = Calendar.getInstance();
  36.   cal.setTime(new Date());
  37.   this.getModel().setView("agendaDay");
  38.   this.getModel().setInitialDate(cal.getTime()); 
  39.   this.getScheduleModel().setInitialDate(cal.getTime());
  40.   this.getScheduleModel().setView("agendaDay");
  41. }

Ну вот и все, имеем доступ к смене видов всегда и делаем что хотим. Добились того чего хотели. Кажды может код подогнать под свои потребности, но для меня этот код помого выполнть поставленую задачу. Удачи всем в кодинге!!!

 

<ol style="padding: 0px; border: none; list-style-position: initial; list-style-image: initial; color: #5c5c5c; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; margin: 0px 0px 1px 45px !important;">
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: #6ce26c; list-style: decimal-leading-zero outside; background-color: #f8f8f8; line-height: 14px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">&nbsp;rightHeaderTemplate="none"</span></li>
<li style="border-style: none none none solid; border-left-width: 3px; border-left-color: #6ce26c; list-style: decimal-leading-zero outside; background-color: #f8f8f8; line-height: 14px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="background-color: inherit; color: black;">&nbsp;leftHeaderTemplate="none"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></li>
</ol>

 

 

 

comments powered by Disqus

Интересное

Стив Джобс о Mac OS X:
«Я убежден в том, что половина того что отделяет успешных предпринимателей от неудачников — это настойчивость.».
Марк Эллиот Цукерберг:
«Люди всегда немного скептически относятся к чему-то быстрорастущему, но им нужно просто взглянуть на то, что делается.».
Марк Эллиот Цукерберг:
"Множество конфиденциальных вещей намного проще держать в централизованной системе."
Стив Джобс о операционной системе Google Android:
Мы не лезем в поиск, но они решили заняться телефонами. Не надо заблуждаться, они хотят уничтожить iPhone. Мы им не позволим.
Стив Джобс о Mac OS X:
«Мы сделали значки на экране такими красивыми, что вам захочется их лизнуть».


Курсы валют

bank-ua.com bank-ua.com bank-ua.com

Стоит взглянуть