How to include another XHTML in XHTML using JSF 2 0 Facelets

Question

What is the most correct way to include another XHTML page in an XHTML page  I have been trying different ways  none of them are working

User · Answer

Included page    lt  -- opening and closing tags of included page -- gt   lt ui composition     gt   lt  ui composition gt    Including page    lt  --the inclusion line in the including page with the content-- gt   lt ui include src  yourFile xhtml   gt     You start your included xhtml file with ui composition as shown above  You include that file with ui include in the including xhtml file as also shown above

User · Answer

lt ui include gt  Most basic way is  lt ui include gt   The included content must be placed inside  lt ui composition gt   Kickoff example of the master page  page xhtml   lt  DOCTYPE html gt   lt html lang  quot en quot      xmlns  quot http   www w3 org 1999 xhtml quot      xmlns f  quot http   xmlns jcp org jsf core quot      xmlns h  quot http   xmlns jcp org jsf html quot      xmlns ui  quot http   xmlns jcp org jsf facelets quot  gt       lt h head gt           lt title gt Include demo lt  title gt       lt  h head gt       lt h body gt           lt h1 gt Master page lt  h1 gt           lt p gt Master page blah blah lorem ipsum lt  p gt           lt ui include src  quot  WEB-INF include xhtml quot    gt       lt  h body gt   lt  html gt   The include page  WEB-INF include xhtml  yes  this is the file in its entirety  any tags outside  lt ui composition gt  are unnecessary as they are ignored by Facelets anyway    lt ui composition      xmlns  quot http   www w3 org 1999 xhtml quot      xmlns f  quot http   xmlns jcp org jsf core quot      xmlns h  quot http   xmlns jcp org jsf html quot      xmlns ui  quot http   xmlns jcp org jsf facelets quot  gt       lt h2 gt Include page lt  h2 gt       lt p gt Include page blah blah lorem ipsum lt  p gt   lt  ui composition gt      This needs to be opened by  page xhtml  Do note that you don t need to repeat  lt html gt    lt h head gt  and  lt h body gt  inside the include file as that would otherwise result in invalid HTML  You can use a dynamic EL expression in  lt ui include src gt   See also How to ajax-refresh dynamic include content by navigation menu   JSF SPA     lt ui define gt   lt ui insert gt  A more advanced way of including is templating  This includes basically the other way round  The master template page should use  lt ui insert gt  to declare places to insert defined template content  The template client page which is using the master template page should use  lt ui define gt  to define the template content which is to be inserted  Master template page  WEB-INF template xhtml  as a design hint  the header  menu and footer can in turn even be  lt ui include gt  files    lt  DOCTYPE html gt   lt html lang  quot en quot      xmlns  quot http   www w3 org 1999 xhtml quot      xmlns f  quot http   xmlns jcp org jsf core quot      xmlns h  quot http   xmlns jcp org jsf html quot      xmlns ui  quot http   xmlns jcp org jsf facelets quot  gt       lt h head gt           lt title gt  lt ui insert name  quot title quot  gt Default title lt  ui insert gt  lt  title gt       lt  h head gt       lt h body gt           lt div id  quot header quot  gt Header lt  div gt           lt div id  quot menu quot  gt Menu lt  div gt           lt div id  quot content quot  gt  lt ui insert name  quot content quot  gt Default content lt  ui insert gt  lt  div gt           lt div id  quot footer quot  gt Footer lt  div gt       lt  h body gt   lt  html gt   Template client page  page xhtml  note the template attribute  also here  this is the file in its entirety    lt ui composition template  quot  WEB-INF template xhtml quot      xmlns  quot http   www w3 org 1999 xhtml quot      xmlns f  quot http   xmlns jcp org jsf core quot      xmlns h  quot http   xmlns jcp org jsf html quot      xmlns ui  quot http   xmlns jcp org jsf facelets quot  gt        lt ui define name  quot title quot  gt          New page title here      lt  ui define gt        lt ui define name  quot content quot  gt           lt h1 gt New content here lt  h1 gt           lt p gt Blah blah lt  p gt       lt  ui define gt   lt  ui composition gt   This needs to be opened by  page xhtml  If there is no  lt ui define gt   then the default content inside  lt ui insert gt  will be displayed instead  if any    lt ui param gt  You can pass parameters to  lt ui include gt  or  lt ui composition template gt  by  lt ui param gt    lt ui include     gt       lt ui param name  quot foo quot  value  quot   bean foo  quot    gt   lt  ui include gt     lt ui composition template  quot     quot  gt       lt ui param name  quot foo quot  value  quot   bean foo  quot    gt           lt  ui composition  gt   Inside the include template file  it ll be available as   foo   In case you need to pass  quot many quot  parameters to  lt ui include gt   then you d better consider registering the include file as a tagfile  so that you can ultimately use it like so  lt my tagname foo  quot   bean foo  quot  gt   See also When to use  lt ui include gt   tag files  composite components and or custom components  You can even pass whole beans  methods and parameters via  lt ui param gt   See also JSF 2  how to pass an action including an argument to be invoked to a Facelets sub view  using ui include and ui param    Design hints The files which aren t supposed to be publicly accessible by just entering guessing its URL  need to be placed in  WEB-INF folder  like as the include file and the template file in above example  See also Which XHTML files do I need to put in  WEB-INF and which not  There doesn t need to be any markup  HTML code  outside  lt ui composition gt  and  lt ui define gt   You can put any  but they will be ignored by Facelets  Putting markup in there is only useful for web designers  See also Is there a way to run a JSF page without building the whole project  The HTML5 doctype is the recommended doctype these days   quot in spite of quot  that it s a XHTML file  You should see XHTML as a language which allows you to produce HTML output using a XML based tool  See also Is it possible to use JSF Facelets with HTML 4 5  and JavaServer Faces 2 2 and HTML5 support  why is XHTML still being used  CSS JS image files can be included as dynamically relocatable localized versioned resources  See also How to reference CSS   JS   image resource in Facelets template  You can put Facelets files in a reusable JAR file  See also Structure for multiple JSF projects with shared code  For real world examples of advanced Facelets templating  check the src main webapp folder of Java EE Kickoff App source code and OmniFaces showcase site source code

[jsf] How to include another XHTML in XHTML using JSF 2.0 Facelets?

Examples related to jsf

Examples related to xhtml

Examples related to include

Examples related to jsf-2

Examples related to facelets