Использование Prime и Bootstrap в JSF

Даже сейчас я использовал JSF + Primefaces в своих проектах, и это дает мне много новых компонентов (из простых) для работы.

Но мой новый клиент потребовал хорошего макета для панели администратора (Отзывчивый + Чистый + Прекрасный). Поиск в http://themeforest.net/ я нашел много отличных макетов, но почти все для бутстрапа.

Итак, я сомневаюсь в следующем: могу ли я продолжить использование перформансов (воспользоваться мощными компонентами) и использовать макет для начальной загрузки? Есть ли ограничения?

ОТВЕТЫ

Ответ 1

Я рекомендую использовать BootsFaces вместе с темой Bootstrap в PrimeFaces (см. http://showcase.bootsfaces.net/integration/PrimeFaces.jsf). BootsFaces уменьшает код плиты котла, необходимый для записи страницы Bootstrap. Кроме того, он предлагает пару виджетов, которые лучше всего подходят к странице Bootstrap, чем их копия PrimeFaces. Мы разработали BootsFaces как плагин для PrimeFaces, поэтому вы можете безопасно использовать оба вместе.

Ответ 2

Наверху и Bootstrap сложно работать вместе. Bootstrap определяет кучу классов css (например, navbar), которые используются в html. Но перфорированные объекты отображают компоненты, используя собственные классы css (например, ui-menubar).

Несмотря на то, что Primefaces предоставляет тему начальной загрузки, тема просто делает компоненты первичности похожими на бутстрап. Но эти компоненты по-прежнему выводятся с использованием классов css класса css, а не классов bootstrap css.

Ответ 3

Я начал проект под названием AdminFaces. Он объединяет Primefaces и Bootstrap в новую тему, называемую admin. Эта тема объединяет некоторый стиль начальной загрузки в компоненты прайвэмов, такие как панели, кнопки, сообщения, данные, табуляция и т.д. Он также содержит шаблон, основанный на знаменитом Admin LTE шаблоне администратора начальной загрузки.

Вы можете посмотреть здесь: http://admin-showcase-admin-showcase.7e14.starter-us-west-2.openshiftapps.com/showcase/

Проект находится на ранней стадии разработки (например, доступны только моментальные снимки), поэтому любая обратная связь или вклад действительно приветствуются.

Ответ 5

Вы можете использовать перформансы в портале, ориентированном на загрузку. вам просто нужно быть осторожным, чтобы установить размеры с процентами (используйте % вместо px)

в большинстве случаев вы должны иметь свои компоненты, например p:panelGrid с размером = 100%

<!-- If the screen is too narrow to hold both columns they will be aligned verically -->
<p:panelGrid columns="2" style="width:100%;">

    <!-- Left Align -->
    <p:panelGrid columns="1" style="width:85%; text-align:left;">
        ...
    </p:panelGrid>
    <!-- Right Align ( Controls )-->
    <p:panelGrid columns="1" style="width:15%; text-align:right; float:right;">
        ...
    </p:panelGrid>

</p:panelGrid>

Мне удалось интегрировать портлет с интерфейсом Primefaces 4.0 с liferay 6.2 (он имеет отзывчивую тему), и он работал хорошо, будучи отзывчивым и аккуратным.

У вас будут некоторые проблемы здесь и там с переполненными диалогами и scrollBars, которые обычно ограничены фиксированными размерами пикселей, но они полностью уменшивы.

Вам также может потребоваться проверить правильность Grid CSS

Ответ 6

В течение долгого времени я искал информацию о моем проекте для интеграции PrimeFaces + JSF и начальной загрузки, некоторые говорят, что это невозможно, но я думаю, что это не так, я призываю всех сделать это.

вы несели (modal.js) http://getbootstrap.com/javascript/#modals

private String saludo =""; 
public void mensajito(){
  saludo = "Saludos bitacorawil!!!" + new Date();
}
public String getSaludo() {
  return saludo;
}
public void setSaludo(String saludo) {
  this.saludo = saludo;
}

наша форма будет

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" template="/WEB-INF/template.xhtml">
 <ui:define name="head">
  <h:outputScript name="bootstrap/js/modal.js" />
 </ui:define>

 <ui:define name="implementation">
  <h:form id="form">
   <p:messages id="messages" closable="true" autoUpdate="true" />
   <div class="panel panel-default">
    <div class="panel-heading">
     <i class="fa fa-angle-right"></i> Criterios de búsqueda
    </div>
    <div class="panel-body">
     <div class="row">
      <div class="form-group has-success col-md-4">
       <p:commandButton value="Generar Saludo modal con JSF" oncomplete="$('#myModal').modal('show');" title="Ver campos" 
        actionListener="#{backbeanController.mensajito}">
       </p:commandButton>
      </div>
     </div>
    </div>
   </div>

   <p:outputPanel autoUpdate="true">
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Cerrar</button>
        <h4 class="modal-title">Datos Registro</h4>
       </div>
       <div class="modal-body">
        <h:panelGrid columns="2">
         <h:outputLabel value="Mensaje:" />
         <h:outputText value="#{backbeanController.saludo}" />
        </h:panelGrid>
       </div>

       <div class="modal-footer centered">
        <button data-dismiss="modal" class="btn" type="button">Cerrar</button>
       </div>
      </div>
     </div>
    </div>
   </p:outputPanel>
  </h:form>
 </ui:define>
</ui:composition>

Ответ 7

Я только что протестировал загрузочные файлы, но когда я открываю страницу в планшете и телефоне, шрифт довольно мал. Я думаю, что IMO это не готово к реальному "отзывчивому веб-дизайну", и, вероятно, мне нужно идти вручную с помощью бутстрапа..

Но переход "вручную на использование начальной загрузки" - это дополнительное усилие, которое меняет использование JavaBeans для сервисов RestFul и добавляет дополнительный уровень безопасности... довольно много работы для приятного адаптивного графического интерфейса!