JSF 2.0 Facelets kullanarak XHTML'ye başka bir XHTML nasıl eklenir?


218

Bir XHTML sayfasına başka bir XHTML sayfası eklemenin en doğru yolu nedir? Farklı yollar deniyorum, hiçbiri çalışmıyor.

Yanıtlar:


423

<ui:include>

En temel yol <ui:include>. Birlikte verilen içerik içine yerleştirilmelidir <ui:composition>.

Kalıp sayfanın başlangıç ​​örneği /page.xhtml:

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Include demo</title>
    </h:head>
    <h:body>
        <h1>Master page</h1>
        <p>Master page blah blah lorem ipsum</p>
        <ui:include src="/WEB-INF/include.xhtml" />
    </h:body>
</html>

Dahil etme sayfası /WEB-INF/include.xhtml(evet, bu dosyanın tamamıdır, dışındaki tüm etiketler <ui:composition>zaten Facelets tarafından göz ardı edildiğinden gereksizdir):

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h2>Include page</h2>
    <p>Include page blah blah lorem ipsum</p>
</ui:composition>
  

Bunun tarafından açılması gerekiyor /page.xhtml. Eğer tekrar gerekmez o notu yapın <html>, <h:head>ve <h:body>bu dosyayı dahil içeride aksi sonuçlanacak geçersiz HTML .

İçinde dinamik EL ifadesi kullanabilirsiniz <ui:include src>. Ayrıca bkz . Gezinme menüsüne göre dinamik içerik ekleme ajax nasıl yenilenir? (JSF SPA) .


<ui:define>/<ui:insert>

Eklemenin daha gelişmiş bir yolu şablonlaştırmaktır . Bu temelde diğer yönde de içerir. Kalıp şablon sayfası, <ui:insert>tanımlanmış şablon içeriği eklemek üzere yerler bildirmek için kullanılmalıdır . Ana şablon sayfasını kullanan şablon istemci sayfası, <ui:define>eklenecek şablon içeriğini tanımlamak için kullanmalıdır .

Ana şablon sayfası /WEB-INF/template.xhtml(tasarım ipucu olarak: üstbilgi, menü ve altbilgi de <ui:include>dosya olabilir):

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title><ui:insert name="title">Default title</ui:insert></title>
    </h:head>
    <h:body>
        <div id="header">Header</div>
        <div id="menu">Menu</div>
        <div id="content"><ui:insert name="content">Default content</ui:insert></div>
        <div id="footer">Footer</div>
    </h:body>
</html>

Şablon istemci sayfası /page.xhtml( templateözniteliğe dikkat edin ; ayrıca burada, bu dosyanın tamamıdır):

<ui:composition template="/WEB-INF/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <ui:define name="title">
        New page title here
    </ui:define>

    <ui:define name="content">
        <h1>New content here</h1>
        <p>Blah blah</p>
    </ui:define>
</ui:composition>

Bunun tarafından açılması gerekiyor /page.xhtml. Hayır ise <ui:define>, varsa içindeki varsayılan içerik <ui:insert>görüntülenecektir.


<ui:param>

Sen parametreler iletebilirsiniz <ui:include>ya <ui:composition template>tarafından <ui:param>.

<ui:include ...>
    <ui:param name="foo" value="#{bean.foo}" />
</ui:include>
<ui:composition template="...">
    <ui:param name="foo" value="#{bean.foo}" />
    ...
</ui:composition >

İçerme / şablon dosyasının içinde, olarak kullanılabilir #{foo}. "Birçok" parametreyi <ui:include>iletmeniz gerekiyorsa, içerme dosyasını bir tagfile olarak kaydetmeyi düşünmelisiniz, böylece sonunda bu şekilde kullanabilirsiniz <my:tagname foo="#{bean.foo}">. Ayrıca bkz. <Ui: include>, etiket dosyaları, bileşik bileşenler ve / veya özel bileşenler ne zaman kullanılır?

Tüm fasulyeleri, yöntemleri ve parametreleri bile geçebilirsiniz <ui:param>. Ayrıca bkz. JSF 2: Facelets alt görünümüne çağrılacak bir argüman içeren bir eylem nasıl iletilir (ui: include ve ui: param kullanılarak)?


Tasarım ipuçları

Sadece URL'sini girerek / tahmin ederek herkesin erişebileceği düşünülmeyen /WEB-INFdosyaların, yukarıdaki örnekte içerme dosyası ve şablon dosyası gibi bir klasöre yerleştirilmesi gerekir . Ayrıca bkz. Hangi WEHTML dosyalarını / WEB-INF içine koymam gerekiyor, hangileri değil?

<ui:composition>Ve dışında herhangi bir işaretleme (HTML kodu) olması gerekmez <ui:define>. Herhangi birini koyabilirsiniz, ancak Facelets tarafından göz ardı edilecektir. Orada işaretleme koymak sadece web tasarımcıları için yararlıdır. Ayrıca bkz . Tüm projeyi oluşturmadan bir JSF sayfası çalıştırmanın bir yolu var mı?

HTML5 doktipi, bugünlerde XHTML dosyası olmasına rağmen "önerilen doktrop. XHTML'yi XML tabanlı bir araç kullanarak HTML çıktısı oluşturmanıza izin veren bir dil olarak görmelisiniz. Ayrıca bkz. HTML 4/5 ile JSF + Facelets kullanmak mümkün mü? ve JavaServer Faces 2.2 ve HTML5 desteği, XHTML neden hala kullanılıyor .

CSS / JS / resim dosyaları dinamik olarak yeniden yerleştirilebilir / yerelleştirilmiş / sürümlendirilmiş kaynaklar olarak eklenebilir. Ayrıca , Facelets şablonunda CSS / JS / resim kaynağına nasıl başvurulur?

Facelets dosyalarını yeniden kullanılabilir bir JAR dosyasına koyabilirsiniz. Ayrıca , paylaşılan kod içeren birden çok JSF projesi için Yapı'ya bakın .

Gelişmiş Facelets şablonunun gerçek dünyadaki örnekleri için Java EE Başlangıç ​​Uygulaması kaynak kodu ve OmniFaces vitrin sitesi kaynak kodusrc/main/webapp klasörünü kontrol edin .


1
Merhaba Balus, ile ilgili: En temel yol <ui: include>. Eklenen içerik <ui: kompozisyon> içine yerleştirilmelidir. İçerdiği içeriğin sadece <p> </p> içinde çalışabileceğini düşünüyorum.
Koray Tugay

1
@KorayTugay: Evet, doğru. ui: kompozisyon yalnızca a) bir şablon (yukarıya bakın) veya b) her şeyi <html> <body> içine sarmak için gereklidir, böylece dosyayı bir tarayıcı veya HTML düzenleyicisiyle yükleyebilirsiniz.
sleske

Merhaba bu bilmeceyi benim için çözebilir misin? Son 3 gündür kafamı vuruyorum. stackoverflow.com/questions/24738079/…
Kishor Prakash

1
@Odysseus: aslında bir kompozisyon değilse.
BalusC

1
Afaik, sadece <ui:composition ...>facelet içinde ilan ederseniz, doktipi de bildirmeniz gerekir <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, aksi takdirde entity referenced but not declaredHTML varlıklarını kullanırken bir hata alırsınız .
ChristophS

24

Eklenen sayfa:

<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>

Sayfa dahil:

<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
  • Dahil olan xhtml dosyanızı ui:compositionyukarıda gösterildiği gibi başlatırsınız .
  • Bu dosyayı, ui:includeyukarıda da gösterildiği gibi, dahil xhtml dosyasına dahil edersiniz .

Bazen yalnızca bir dosya adı kullanırken yolu tanımlamak yeterli olmaz. Yukarıdaki dosya dahil etmeyi deneyen ve işe yaramayanlar için. Dosya adından veya / WEB-INF dizininden önce eğik çizgi simgesi eklemeyi deneyebilirsiniz. Öyle görünüyor <ui:include src="/yourFile.xhtml"/>ya da<ui:include src="/WEB-INF/yourFile.xhtml"/>
Lefan
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.