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.
<ui:include>
Most basic way is <ui:include>. The included content must be placed inside <ui:composition>.
Kickoff example of the master page /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>
The include page /WEB-INF/include.xhtml (yes, this is the file in its entirety, any tags outside <ui:composition> are unnecessary as they are ignored by Facelets anyway):
<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>
This needs to be opened by /page.xhtml. Do note that you don't need to repeat <html>, <h:head> and <h:body> inside the include file as that would otherwise result in invalid HTML.
You can use a dynamic EL expression in <ui:include src>. See also How to ajax-refresh dynamic include content by navigation menu? (JSF SPA).
<ui:define>/<ui:insert>
A more advanced way of including is templating. This includes basically the other way round. The master template page should use <ui:insert> to declare places to insert defined template content. The template client page which is using the master template page should use <ui:define> 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 <ui:include> files):
<!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>
Template client page /page.xhtml (note the template attribute; also here, this is the file in its entirety):
<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>
This needs to be opened by /page.xhtml. If there is no <ui:define>, then the default content inside <ui:insert> will be displayed instead, if any.
<ui:param>
You can pass parameters to <ui:include> or <ui:composition template> by <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 >
Inside the include/template file, it'll be available as #{foo}. In case you need to pass "many" parameters to <ui:include>, then you'd better consider registering the include file as a tagfile, so that you can ultimately use it like so <my:tagname foo="#{bean.foo}">. See also When to use <ui:include>, tag files, composite components and/or custom components?
You can even pass whole beans, methods and parameters via <ui:param>. 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 <ui:composition> and <ui:define>. 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, "in spite of" 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.
Included page:
<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>
Including page:
<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
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.
Related
I started to learn xhtml as it's the first topic from the book I'm reading and tried creating a simple form to enter just a name.
This is half of what I copied from the book only keeping the input text field:
<?xml version = "1.0" encoding = "UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>Enter Customer Name</title>
</head>
<body>
<h:outputStylesheet library="css" name="styles.css"/>
<h:messages/>
<h:form id="test">
<h:outputLabel for="firstname" value="first name:"></h:outputLabel>
<h:inputText id="firstname" label="first name" value="#{test.firstname}" required="true">
<f:validateLength minimum="2" maximum="10">
</f:validateLength>
</h:inputText>
</h:form>
</body>
</html>
But when I open it int he browser, this is what I get
The output
What am I doing wrong?
Your document isn't XHTML.
The Doctype claims it is, but then you have a bunch of errors and non-XHTML content.
The browser is parsing the document in XML mode, which is a good first step if you were actually writing XHTML.
As pointed out in a comment:
The xmlns attribute is not OK. It should be "http://www.w3.org/1999/xhtml" rather than "http://w3.org/1999/xhtml"
Since you got it wrong, your default namespace isn't recognised as XHTML and the browser treats it as an unknown XML format with no special handling. This is why you get view of the XML node tree.
When you correct that, your document begins to be parsed as XHTML.
now all i get is a blank screen
This is because the only XHTML elements you have are the root element, the head and its descendants, and the body.
Everything else (e.g. h:form) is not XHTML. You have imported it from the http://java.sun.com/jsf/html namespace (except for those parts you imported from the http://java.sun.com/jsf/core namespace). (Note that this is forbidden by your choice of Doctype).
Web browsers do not know what to do with elements from those namespaces, so they get inserted into the DOM but are not rendered.
You need to either:
Determine what tool those elements are designed for use with and use that instead of a web browser. (It is possible that that tool outputs code you can use with a web browser).
Write code using languages designed for use with a web browser. That could be real XHTML, but the benefits of it only apply to rare edge cases and you would almost certainly be better off writing HTML.
How can I include _Layout.cshtml in Razor Content Page ?
For example I created two cshtml files in root of my project.
First file is _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Main Layout</h1>
<br>
<br>
#RenderBody();
</body>
</html>
Second File is Product.cshtml
#inherits ServiceStack.Razor.ViewPage
#{
Layout = "~/_Layout.cshtml";
}
<h1>Product Page</h1>
When I call http://localhost:6000/product
The result is in browser is
Product Page
but it should be
Main Layout
Product Page
Why ?
What's the problem ?
Layout names should be the name of the file not a path and you should never need to reference _Layout as it's the default.
Also if you want your Views and Content Pages to share the same _Layout.cshtml pages add them once to /Views/_Layout.cshtml or /Views/Shared/_Layout.cshtml instead.
If this is Self hosting HttpListener project you need to ensure all *.cshtml are set to Copy to Output Directory or the WebHostPhysicalPath references your project path.
I have a custom page template for my home page.
It does not display the carousel.
The template is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="plone">
<body>
<metal:content-core fill-slot="content-core">
Hello
</metal:content-core>
</body>
</html>
The configure.zcml snippet looks like this:
<browser:page
for="Products.CMFPlone.browser.interfaces.INavigationRoot"
name="homepage"
template="homepage.pt"
layer=".interfaces.IThemeSpecific"
permission="zope2.View"
/>
I tried:
<tal:block tal:replace="structure here/carousel/##banner-base" />
but get an AttributeError for banner-base.
The correct context cannot be found, if a default-page is set to the folder or siteroot, like "front-page" is by default.
To resolve that, change its view to yours or any other view, which isn't a content-item, like 'Summary view' f.e.
The view has to be satisfy the is_view_template criterion as enforced by the update() method of the Carousel viewlet.
To do this simply use the setLayout() of the folder.
How can I include pages, style sheets, or links to them, automatically into my ASP VBscript pages? I read something about 'global' pages, but I am unsure what they mean and how it is that I can accomplish such a thing. I'm sure this is an easy question, but it's of great help to me as I've been writing VBscript for 2 days now! I'm not exactly an expert on HTML in general either, but I feel I have a reasonably good grasp of things. I would appreciate a good detailed example of how a 'global' page plays with my other ASP pages.
I'm setting up my first site...a management site for the main site I intend to build afterward. I want to get all my ducks in a row before moving forward with the public site. Can someone please give me some detailed information on how to include these pages/links automatically (page includes(header/footer), style sheets, etc) globally throughout my site without the need of using <!--#include file.... on each page I make, because that is kind of a pain and I'm sure there is an easier way. If there is, I know you can help! Thanks in advance, I look forward to hearing what options/possibilities are available.
If you insist on using ASP Classic you may find some method for handling masterpage like functionality but it is, to the best of my knowledge, not suppoerted as such by the framework.
[Edit] Given the edit of the original question the method first demonstrated is not so interesting, hence I suggest an alternative method too.
You could make a general ASP-page which serves all traffic to the site. A queryparameter then specifies which subpage should be displayed. Subpages are made as seperate ASP-pages which are executed by the general/master page or by another subpage. A very crude example of this could look like this:
<%
url = Request.QueryString("url") & ""
if url = "/" or url = "" then
subpage = "home.asp"
else
subpage = url & ".asp"
end if
%>
<!DOCTYPE html>
<html>
<head>
<title>Header for all pages</title>
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<% Server.Execute(subpage) %>
</body>
</html>
The site should then be addressed in this fashion:
www.domain.com/default.asp?url=/contact
which would load the contact.asp subpage into the masterpage or:
www.domain.com/default.asp?url=/user/1234/profile
to load a user's profilepage (displayed by the profile.asp in the folder user/1234). This last example raises some issues because then every user has to have a folder containing all the asp-files (which is far from optimal) so you might want to employ some interpretation of the url queryparameter to redirect input in a more intelligent way.
Another issue is the fact that subpages are ASP-pages themselves which means someone could reference them directly. This calls for some action to protect those subpages from direct reference. It can be done but this would probably mean including some code => back to square one!
Another disadvantages of this approach is that subpages are rendered in their own context and hence can't access functionality and data from the calling page's context. This means that global data has to be shared in some other way (session, application, database or some other way). Data can't be passed to the subpage either (and no, Server.Execute doesn't allow query-parameters).
The include-way
Personally I think you get the most flexibility by using header/footer includes as demonstrated in my original post and shown below.
One way is to put your general stuff in includes and then includes those bits on each ASP-page. E.g.:
<!-- #include virtual="/includes/header.asp" -->
content goes here
<!-- #include virtual="/includes/footer.asp" -->
And your header.asp could look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Header for all pages</title>
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
and footer.asp like so:
</body>
</html>
This strategy has some disadvantages. The header is fairly static which could present some problems with SEO; For one the title should fit the pagecontent which is hard to accomplish when the include contains the header-markup. This could be facilitated by some global variables that are set prior to the include-section i.e.:
<%
title = "Title for this page's content"
%>
<!-- #include virtual="/includes/header.asp" -->
content goes here
<!-- #include virtual="/includes/footer.asp" -->
and then in the header like so
<!DOCTYPE html>
<html>
<head>
<title><%=title%></title>
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
but that already begins to "smell" a little because you set up some expectations for the including page inside the include-file. At least you have to be very disciplined when constructing your pages.
The term you're looking for is Master Page, not Global Page, that may be why you're having a hard time finding what you're looking for on Google. Basically consider a master page a template. You create a master page, then load other pages into it. There are content place holders that you put in the master then populate on your other pages.
So a very basic example would look something like this.
<%# Master Language="VB" CodeFile="general.master.vb" Inherits="master1_general"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link rel="stylesheet" type="text/css" href="/styles/main.css?v2"/>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
Then your individual pages would look like this:
<%# Page Language="VB" MasterPageFile="~/master/general.master" AutoEventWireup="false" CodeFile="base.aspx.vb" Inherits="_Default" title="Opportunities" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
//any additional head stuff specific to this page goes here.
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server" >
//your body mark up goes here.
</asp:Content>
Notice how the Master page is actually a web page. Then it has place holders in certain spots. In this one there is a place holder in the head and one in the body. Then on individual pages I identify which master page to use and what data (if any) goes in the place holders. I always include a placeholder in the head so I can load js or resources that specific pages need on that page only.
Then the individual pages are just the content that goes in the placeholders.
I'm using html provided by a designer to create a master page.
The html doctype is set to be HTML 4.0 Strict. The meta tags in the html do not have closing end tags (they end with > rather than />) and this html is compliant using the W3 validator tool.
For example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
However, ASP.NET changes the head attributes before rendering the page and modifies the end tags, as below
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Now the addition of the /> at the end of the tag causes errors in the W3 validator.
How do I prevent this from happening, and ensure the html rendered is as the designers intended?
You can change how ASP.NET renders HTML by forcing it to use a particular XHTML conformance rendering mode. I'm not sure what other side effects changing the renderer may have on the HTML output produced by ASP.NET. This can be set in the web.config with the following.
<system.web>
<!-- other elements here -->
<xhtmlConformance
mode="Legacy" />
</system.web>
There are other caveats to using the "Legacy" rendering mode, see the following MSDN resources for other rendering modes and details.
XHTML Standards in Visual Studio and ASP.NET
How to: Configure XHTML Rendering in ASP.NET Web Sites