Sebenarnya, semua contoh di web di mana konten umum / jenis file seperti "js", "css", "img", dll digunakan sebagai nama perpustakaan yang menyesatkan .
Contoh dunia nyata
Untuk memulai, mari kita lihat bagaimana implementasi JSF yang ada seperti Mojarra dan MyFaces dan pustaka komponen JSF seperti PrimeFaces dan OmniFaces menggunakannya. Tidak ada yang menggunakan perpustakaan sumber daya dengan cara ini. Mereka menggunakannya (di bawah selimut, dengan @ResourceDependency
atau UIViewRoot#addComponentResource()
) dengan cara berikut:
<h:outputScript library="javax.faces" name="jsf.js" />
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<h:outputScript library="omnifaces" name="omnifaces.js" />
<h:outputScript library="omnifaces" name="fixviewstate.js" />
<h:outputScript library="omnifaces.combined" name="[dynamicname].js" />
<h:outputStylesheet library="primefaces" name="primefaces.css" />
<h:outputStylesheet library="primefaces-aristo" name="theme.css" />
<h:outputStylesheet library="primefaces-vader" name="theme.css" />
Seharusnya menjadi jelas bahwa itu pada dasarnya mewakili perpustakaan umum / modul / nama tema di mana semua sumber daya itu milik umum.
Identifikasi yang lebih mudah
Dengan cara ini, lebih mudah untuk menentukan dan membedakan dari mana sumber daya itu berasal dan / atau berasal. Bayangkan bahwa Anda memiliki primefaces.css
sumber daya di webapp Anda sendiri di mana Anda mengganti / menyelesaikan beberapa CSS default dari PrimeFaces; jika PrimeFaces tidak menggunakan nama pustaka untuk namanya sendiri primefaces.css
, maka PrimeFaces sendiri tidak akan dimuat, tetapi yang disediakan webapp, yang akan merusak tampilan.
Selain itu, ketika Anda menggunakan kebiasaan ResourceHandler
, Anda juga dapat menerapkan kontrol yang lebih baik terhadap sumber daya yang berasal dari perpustakaan tertentu bila library
digunakan dengan cara yang benar. Jika semua pustaka komponen akan menggunakan "js" untuk semua file JS mereka, bagaimana akan ResourceHandler
pernah membedakan jika itu berasal dari pustaka komponen tertentu? Contohnya adalah OmniFaces CombinedResourceHandler
dan GraphicResourceHandler
; periksa createResource()
metode di mana perpustakaan diperiksa sebelum mendelegasikan ke penangan sumber daya berikutnya dalam rantai. Dengan cara ini mereka tahu kapan harus membuat CombinedResource
atau GraphicResource
untuk tujuan itu.
Perlu dicatat bahwa RichFaces melakukan kesalahan. Itu tidak menggunakan library
sama sekali dan homebrewed lapisan penanganan sumber daya lain di atasnya dan karena itu mustahil untuk mengidentifikasi sumber daya RichFaces secara pemrograman Itulah alasan mengapa OmniFaces CombinedResourceHander
harus memperkenalkan hack berbasis refleksi untuk membuatnya tetap bekerja dengan sumber daya RichFaces.
Aplikasi web Anda sendiri
Aplikasi web Anda sendiri tidak perlu perpustakaan sumber daya. Anda sebaiknya menghilangkannya.
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />
Atau, jika Anda benar-benar perlu memilikinya, Anda bisa memberinya nama umum yang lebih masuk akal, seperti "default" atau beberapa nama perusahaan.
<h:outputStylesheet library="default" name="css/style.css" />
<h:outputScript library="default" name="js/script.js" />
<h:graphicImage library="default" name="img/logo.png" />
Atau, ketika sumber daya khusus untuk beberapa templat Facelets master, Anda juga bisa memberikannya nama templat, sehingga lebih mudah untuk saling berhubungan. Dengan kata lain, ini lebih untuk keperluan dokumenter sendiri. Misalnya dalam /WEB-INF/templates/layout.xhtml
file templat:
<h:outputStylesheet library="layout" name="css/style.css" />
<h:outputScript library="layout" name="js/script.js" />
Dan /WEB-INF/templates/admin.xhtml
file templat:
<h:outputStylesheet library="admin" name="css/style.css" />
<h:outputScript library="admin" name="js/script.js" />
Untuk contoh dunia nyata, periksa kode sumber showcase OmniFaces .
Atau, ketika Anda ingin berbagi sumber daya yang sama di beberapa webapps dan telah membuat proyek "umum" untuk itu berdasarkan pada contoh yang sama seperti pada jawaban ini yang pada gilirannya tertanam sebagai JAR di webapp /WEB-INF/lib
, kemudian juga rujuk sebagai pustaka (nama gratis untuk pilihan Anda; pustaka komponen seperti OmniFaces dan PrimeFaces juga berfungsi seperti itu):
<h:outputStylesheet library="common" name="css/style.css" />
<h:outputScript library="common" name="js/script.js" />
<h:graphicImage library="common" name="img/logo.png" />
Versi perpustakaan
Keuntungan utama lainnya adalah Anda dapat menerapkan versi perpustakaan sumber daya dengan cara yang benar pada sumber daya yang disediakan oleh aplikasi web Anda sendiri (ini tidak bekerja untuk sumber daya yang tertanam dalam JAR). Anda dapat membuat subfolder anak langsung di folder perpustakaan dengan nama dalam \d+(_\d+)*
pola untuk menunjukkan versi perpustakaan sumber daya.
WebContent
|-- resources
| `-- default
| `-- 1_0
| |-- css
| | `-- style.css
| |-- img
| | `-- logo.png
| `-- js
| `-- script.js
:
Saat menggunakan markup ini:
<h:outputStylesheet library="default" name="css/style.css" />
<h:outputScript library="default" name="js/script.js" />
<h:graphicImage library="default" name="img/logo.png" />
Ini akan menghasilkan HTML berikut dengan versi pustaka sebagai v
parameter:
<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml?ln=default&v=1_0" />
<script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml?ln=default&v=1_0"></script>
<img src="/contextname/javax.faces.resource/img/logo.png.xhtml?ln=default&v=1_0" alt="" />
Jadi, jika Anda telah mengedit / memperbarui beberapa sumber daya, maka yang perlu Anda lakukan hanyalah menyalin atau mengganti nama folder versi menjadi nilai baru. Jika Anda memiliki beberapa folder versi, maka JSF ResourceHandler
akan secara otomatis menyajikan sumber daya dari nomor versi tertinggi, sesuai dengan aturan pemesanan numerik.
Jadi, ketika menyalin / mengganti nama resources/default/1_0/*
folder menjadi resources/default/1_1/*
seperti berikut:
WebContent
|-- resources
| `-- default
| |-- 1_0
| | :
| |
| `-- 1_1
| |-- css
| | `-- style.css
| |-- img
| | `-- logo.png
| `-- js
| `-- script.js
:
Maka contoh markup terakhir akan menghasilkan HTML berikut:
<link rel="stylesheet" type="text/css" href="/contextname/javax.faces.resource/css/style.css.xhtml?ln=default&v=1_1" />
<script type="text/javascript" src="/contextname/javax.faces.resource/js/script.js.xhtml?ln=default&v=1_1"></script>
<img src="/contextname/javax.faces.resource/img/logo.png.xhtml?ln=default&v=1_1" alt="" />
Ini akan memaksa browser web untuk meminta sumber daya langsung dari server alih-alih menunjukkan yang dengan nama yang sama dari cache, ketika URL dengan parameter yang diubah diminta untuk pertama kalinya. Dengan cara ini pengguna akhir tidak perlu melakukan penyegaran keras (Ctrl + F5 dan sebagainya) ketika mereka perlu mengambil sumber CSS / JS yang diperbarui.
Harap dicatat bahwa versi perpustakaan tidak dimungkinkan untuk sumber daya yang terlampir dalam file JAR. Anda akan membutuhkan kebiasaan ResourceHandler
. Lihat juga Cara menggunakan versi JSF untuk sumber daya dalam toples .
Lihat juga: