7 Pertanyaan: Menggunakan Primefaces dan Bootstrap di JSF

pertanyaan dibuat di Fri, Dec 12, 2014 12:00 AM

Bahkan sekarang saya menggunakan JSF + Primefaces dalam proyek saya dan ini memberi saya banyak komponen baru (dari primefaces) untuk bekerja.

Tapi pelanggan baru saya membutuhkan tata letak yang baik untuk Panel Administrator (Responsif + Bersih + Beatiful). Mencari di http://themeforest.net/ saya menemukan banyak tata letak yang bagus tetapi hampir semuanya untuk bootstrap.

Jadi, keraguan saya adalah: Dapatkah saya terus menggunakan primefaces (mengambil keuntungan dari komponen yang kuat) dan menggunakan tata letak untuk bootstrap? Apakah ada batasan?

    
18
  1. 2014-12-13 12: 42: 52Z
  2. Tetapi jika saya menggunakan twitter-bootstrap-integrasi ini, bisakah saya terus menggunakan primefaces?
    2014-12-15 12: 03: 00Z
  3. Kalau-kalau ada orang yang membaca utas dua tahun ini: Saya tidak melihat alasan mengapa itu tidak bisa bekerja dengan PrimeFaces. Tapi tetap saja, menjadi komuter BootsFaces, saya sarankan menggunakan BootsFaces bersama dengan PrimeFaces :).
    2016-03-26 19: 09: 53Z
  4. Hai dan bagaimana dengan Icefaces + Bootfaces?
    2017-01-01 22: 59: 06Z
  5. Anda dapat menggunakan BootsFaces: showcase.bootsfaces.net
    2017-02-04 08: 32: 30Z
7 Jawaban                              7                         

Saya sarankan menggunakan BootsFaces bersama dengan tema Bootstrap PrimeFaces (lihat http: //showcase.bootsfaces .net /integrasi /PrimeFaces.jsf ). BootsFaces mengurangi kode pelat ketel yang diperlukan untuk menulis halaman Bootstrap. Plus, ia menawarkan beberapa widget yang lebih sesuai dengan halaman Bootstrap daripada rekan PrimeFaces mereka. Kami telah merancang BootsFaces sebagai plug-in ke PrimeFaces, sehingga Anda dapat menggunakan keduanya secara aman.

    
11
2016-03-26 18: 59: 48Z
  1. Saya pikir tautannya sudah mati. Integrasi sekarang menjadi bagian dari showcase: showcase.bootsfaces.net/integration/PrimeFaces.jsf
    2016-03-26 07: 58: 28Z
  2. @ thatsIch saya telah memperbarui tautannya. Terima kasih!
    2016-03-26 19: 00: 46Z
  3. Apakah Tema Bootstrap Primefaces masih berlaku? Pemelihara tema itu tidak ada lagi dan komit terakhir adalah 3 tahun yang lalu
    2016-04-10 11: 42: 54Z
  4. Saya sarankan Anda membuka masalah pada pelacak masalah PrimeFaces. Saya kira temanya dikelola oleh Cagatay sendiri. Bagaimanapun, membuka masalah harus segera menyelesaikan pertanyaan.
    2016-04-10 20: 06: 59Z

Primefaces dan Bootstrap sulit untuk bekerja bersama. Bootstrap mendefinisikan sekelompok kelas css (seperti navbar) yang digunakan dalam html. Tetapi primefaces membuat komponen dengan menggunakan kelas css sendiri (seperti ui-menubar).

Meskipun Primefaces menyediakan tema bootstrap, tema tersebut hanya membuat komponen primefaces terlihat seperti bootstrap. Tetapi komponen-komponen tersebut masih dirender dengan menggunakan kelas css primefaces, bukan kelas cstr bootstrap.

    
8
2015-06-03 22: 54: 12Z

Saya telah memulai proyek yang disebut AdminFaces . Itu mengintegrasikan Primefaces dan Bootstrap ke tema baru, yang disebut admin . Tema ini mengintegrasikan beberapa gaya bootstrap ke komponen primefaces seperti panel, tombol, pesan, dataat, tampilan tab dan sebagainya. Ini juga membawa templat berdasarkan Admin LTE template bootstrap admin LTE yang terkenal.

Anda dapat melihat showcase di sini: https://adminfaces.github.io/admin -showcase /

Proyek ini masih dalam tahap pengembangan awal (mis: hanya foto yang tersedia) sehingga umpan balik atau kontribusi apa pun benar-benar disambut. Versi 1.0.0 dirilis, lihat detail di blog proyek di sini .

    
8
2019-03-29 14: 58: 43Z

Primefaces sudah memiliki tema bootstrap seperti yang disebutkan di Halaman Tema Primefaces

Untuk mengkonfigurasinya Anda dapat mengikuti diskusi StackOverflow ini

Senang bisa membantu.

    
2
2017-05-23 12: 34: 38Z
  1. Ini didasarkan pada versi bootstrap yang sangat lama, Integrasinya baik-baik saja, jika Anda ingin mencocokkan kelas bootstrap Anda hanya dapat memperpanjang renderers of primefaces dan mengubah kelas yang dapatkan output dari jQuery UI ke templat bootstrap.
    2014-12-14 22: 58: 38Z

Anda dapat menggunakan primefaces di Portal bertema bootstrap. Anda hanya perlu berhati-hati untuk mengatur ukuran dengan persentase (gunakan % alih-alih px)

dalam kebanyakan kasus, Anda harus memiliki komponen, mis. p:panelGrid dengan ukuran = 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>

Saya telah berhasil mengintegrasikan portlet bertenaga Primefaces 4.0 dengan liferay 6.2 (memiliki tema responsif), dan bekerja dengan baik, responsif, dan rapi.

Anda akan mengalami beberapa masalah di sana-sini dengan dialog yang meluap dan scrollBars, yang biasanya dibatasi dengan ukuran piksel yang tetap, tetapi benar-benar dapat dilakukan.

Anda mungkin juga ingin memeriksa primefaces Grid CSS

    
0
2014-12-15 13: 20: 25Z

Untuk waktu yang lama saya mencari informasi proyek saya untuk mengintegrasikan PrimeFaces + JSF dan bootstrap, beberapa mengatakan itu tidak mungkin tapi saya pikir itu tidak benar, saya mendorong semua orang untuk melakukannya.

Anda perlu (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;
}

formulir kami adalah

 
<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>
    
- 2
2015-10-17 11: 45: 17Z
  1. Silakan tambahkan kode ke posting Anda dari blog Anda. Terima kasih!
    2015-10-15 19: 14: 38Z
  2. Dan tambahkan penjelasan dan tambahkan bagaimana itu tidak merusak styilng: stackoverflow.com/questions/28183661/...
    2015-10-15 19: 17: 53Z
  3. 'Jawaban' ini adalah bagian yang sangat, sangat kecil dari 'masalah' penuh. Anda hanya menggunakan bootstrap 'resposinve grid' dan komponen modal. Semua komponen PF masih terlihat seperti PF dan bukan Bootstrap, jadi ini tidak menggunakan Bootstrap sepenuhnya di JSF dengan PrimeFaces
    2015-10-16 12: 07: 13Z

Saya baru saja mencoba bootfaces, tetapi ketika saya membuka halaman di tablet dan telepon, fontnya cukup kecil. Saya pikir, IMO ini tidak siap untuk "desain web responsif" yang nyata dan mungkin saya harus menggunakan bootstrap secara manual ..

Tetapi menggunakan "secara manual untuk menggunakan bootstrap" adalah upaya ekstra yang berubah dari menggunakan JavaBeans ke layanan RestFul dan menambahkan lapisan keamanan ekstra ... cukup banyak pekerjaan untuk GUI Responsif yang bagus!

    
- 2
2017-02-26 15: 57: 47Z
sumber ditempatkan sini