Bagaimana Menggunakan Ikon Font Hebat dari webjars.org dalam Aplikasi JSF Tanpa Pergantungan Pelayan Luaran?

Menggunakan Font Awesome dari webjars.org dengan JSF

Pengenalan
Mengintegrasikan ikon Font Awesome ke dalam JSF anda aplikasi boleh meningkatkan daya tarikan visualnya dan meningkatkan pengalaman pengguna. Walau bagaimanapun, bergantung pada pelayan luaran untuk sumber ini tidak sesuai. Artikel ini meneroka penyelesaian menggunakan projek webjars untuk menggabungkan sumber yang diperlukan dalam fail WAR anda.

Isu
Menggunakan kod berikut untuk memasukkan Font Awesome:

<h:outputStylesheet library="webjars" name="font-awesome/3.2.1/css/font-awesome.css"  />

mengakibatkan ikon rosak dan ralat konsol yang menunjukkan fon tidak ditemui pada laluan yang ditentukan:

GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1 404 (Not Found)
...

Penyelesaian
Masalahnya terletak pada pemetaan JSF yang hilang dan nama perpustakaan dalam URL sumber. Untuk menyelesaikan masalah ini, gunakan ungkapan #{resource} dalam fail CSS untuk menjana URL sumber JSF yang betul:

src: url("#{resource['webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot']}&v=3.2.1");
...

Walau bagaimanapun, memandangkan ini melibatkan penyuntingan kod sumber, penyelesaian alternatif adalah dengan menggunakan perpustakaan OmniFaces UnmappedResourceHandler:

1. Pasang OmniFaces (cth., menggunakan Maven)
2. Daftar UnmappedResourceHandler dalam faces-config.xml:

<application>
    <resource-handler>org.omnifaces.resourcehandler.UnmappedResourceHandler</resource-handler>
</application>

Add>

<servlet-mapping>
    <servlet-name>facesServlet</servlet-name>
    <url-pattern>/javax.faces.resource/*</url-pattern>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

Alihkan nama perpustakaan ke nama sumber dalam tag:

<h:outputStylesheet name="webjars/font-awesome/3.2.1/css/font-awesome.css" />

Dengan mengikut langkah-langkah ini, ikon Font Awesome kini sepatutnya dipaparkan dengan betul dalam aplikasi JSF anda, tanpa perlu bergantung pada pelayan luaran.

Atas ialah kandungan terperinci Bagaimana Menggunakan Ikon Font Hebat dari webjars.org dalam Aplikasi JSF Tanpa Pergantungan Pelayan Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!