I have a login.xhtml file as initial page in a jsf app.
The content of login.xtml is:
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title><ui:insert name="title">Spring-Security - Login</ui:insert>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Template CSS - Do not modify -->
<link rel="stylesheet" type="text/css"
href="#
{facesContext.externalContext.request.contextPath}/css/classnotfound.css" />
</h:head>
<h:body>
<div>
<h:form id="loginFormId" prependId="false">
<div class="forField" style="width: 65%">
<h:inputText id="username" required="true" requiredMessage="Please enter username (or go to hell...)" />
<h:messages for="username" />
</div>
</h:form>
</div>
</h:body>
</html>
But when it loads in a web browser appears in console the message:
Resource interpreted as Stylesheet but transferred with MIME type application/xhtml+xml
without painting the h:form code
What is wrong?
Related
This question already has an answer here:
JSF returns blank/unparsed page with plain/raw XHTML/XML/EL source instead of rendered HTML output
(1 answer)
Closed 5 years ago.
Here's template
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="refresh" content="30">
<title><ui:insert name="title">Default Title</ui:insert></title>
<h:outputStylesheet library="css" name="jsfcrud.css"/>
</h:head>
<h:body>
<h1>
<ui:insert name="title">Default Title</ui:insert>
</h1>
<p>
<ui:insert name="body">Default Body</ui:insert>
</p>
</h:body>
</html>
here's a client
<?xml version="1.0" encoding="UTF-8" ?>
<!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"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/template.xhtml">
<ui:define name="title">
<h:outputText value="#{bundle.ListPhonerecordTitle}"></h:outputText>
</ui:define>
<ui:define name="body">
<h:form styleClass="jsfcrud_list_form">
<p:poll interval="10" listener="#{phonerecordController.prepareList}" update="#all" />
...
...
...
</h:form>
</ui:define>
</ui:composition>
</html>
When I run client page meta refresh is not working (refresh page every 30 seconds).
I tried putting meta refresh tag in template (inside h:head) but when client page is run it is not refreshing the page.
Should I try putting the meta refresh tag inside ui:composition tag in client page?
If I add an image inside h:body in template like this
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><ui:insert name="title">Default Title</ui:insert></title>
<h:outputStylesheet library="css" name="jsfcrud.css"/>
</h:head>
<h:body>
<h:graphicImage value = "resources/phonegirl1.PNG"/><br />
<h1>
<ui:insert name="title">Default Title</ui:insert>
</h1>
<p>
<ui:insert name="body">Default Body</ui:insert>
</p>
</h:body>
</html>
and try to open in client page image is not there. It's not visible when i run template page as well.
This may have the answer:
Template content not displaying
if i add a text "Hello World" in template like so
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><ui:insert name="title">Default Title</ui:insert></title>
<h:outputStylesheet library="css" name="jsfcrud.css"/>
</h:head>
<h:body>
Hello World!
<h1>
<ui:insert name="title">Default Title</ui:insert>
</h1>
<p>
<ui:insert name="body">Default Body</ui:insert>
</p>
</h:body>
</html>
every client page referring to template has Hello World written on its page.
But if I try the same in one of the client pages they don't work.
I am using primefaces as a framework to use autocomplete.
If I only use primefaces without composition it works well.
<!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" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"> <h:head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <h:outputStylesheet name="css/materialize.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Template</title> </h:head> <h:body class="blue-grey lighten-4"> <ui:include src="cabecalho.xhtml" />
<h:messages id="erromsg" fatalClass="alert alert-danger" errorClass="alert alert-danger" infoClass="alert alert-info" warnClass="alert alert-warning" />
<ui:insert name="corpo" />
<ui:include src="/rodape.xhtml" /> <h:outputScript name="js/jquery-2.1.1.js" /> <h:outputScript name="js/mask/jquery.inputmask.bundle.js" /> <h:outputScript name="js/mask/phone.js" /> <h:outputScript name="js/mask/phone-be.js" /> <h:outputScript name="js/mask/phone-ru.js" /> <h:outputScript name="js/materialize.js" /> <script>
//Select
$(document).ready(function() {
$('select').material_select();
});
//Carosel $('.carousel.carousel-slider').carousel({ fullWidth : true, }); autoplay();
function autoplay() { $('.carousel').carousel('next'); setTimeout(autoplay, 4500); }
//Menu-Mobile $(".button-collapse").sideNav(); //Dropdown $(".dropdown-button").dropdown();
$(document).on("ready",function(){
$(".ui-paginator-first.ui-state-default.ui-corner-all").addClass("btn");
$(".ui-paginator-last.ui-state-default.ui-corner-all").addClass("btn");
$(".ui-paginator-next.ui-state-default.ui-corner-all").addClass("btn");
$(".ui-paginator-prev.ui-state-default.ui-corner-all").addClass("btn");
});
</script> </h:body> </html>
I am using materialize as my framework to front end.
my test page:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Title</title>
</h:head>
<h:body>
<ui:composition template="_template.xhtml">
<ui:define name="corpo">
<div class="container">
<p:autoComplete id="autocomplete"
value="#{manterProdutoBean.descMarca}"
completeMethod="#{manterProdutoBean.completeMarca}"
forceSelection="true" required="true"
requiredMessage="Informe a marca!" maxResults="3">
<p:ajax event="query" />
</p:autoComplete>
<br />
<p:outputLabel value="Max Results(5):" for="acMaxResults" />
<p:autoComplete id="acMaxResults" maxResults="5"
value="#{manterProdutoBean.descMarca}"
completeMethod="#{manterProdutoBean.completeText}">
<p:ajax event="query" />
</p:autoComplete>
</div>
</ui:define>
</ui:composition>
</h:body>
</html>
When I am using composition, my completemethod is never call.
Could you help me, please?
Sincerely,
Guys thanks for your help! I found the solution! I had imported 2 jquery, one from primefaces and other from materialize! I disabled materialize jquery and it started to working! Thanks for all !
I try to build my own JSF-component with ui:composition. When I use an action-attribute that targets a remoteCommand (Primefaces), I came accross some problems: As long as I use the action attribute for all elements of that component inside of h:form, my code seems to work. However, when I use the action attribute only for some elements, the method of my bean is never called for any element.
This is my code:
1,
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<ui:composition>
<cc:interface>
<cc:attribute name="id" />
<cc:attribute name="action" targets="remote" />
</cc:interface>
<cc:implementation>
<p:remoteCommand id="remote" name="remoteCommand" />
<input onclick="remoteCommand();" />
</cc:implementation>
</ui:composition>
</h:body>
</html>
2,
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:mycomponent="http://java.sun.com/jsf/composite/composites">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="styles" name="ownContainers.css" />
</h:head>
<h:body>
<h:form>
<mycomponent:input action="#{testBean.test()}" />
<mycomponent:input />
</h:form>
</h:body>
</html>
The previous code does not work! When I click on the first input field, my bean method is not executed.
However, when I include the action attribute also in the second input field, my bean method is executed:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:mycomponent="http://java.sun.com/jsf/composite/composites">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="styles" name="ownContainers.css" />
</h:head>
<h:body>
<h:form>
<mycomponent:input action="#{testBean.test()}" />
<mycomponent:input action="#{testBean.test()}" />
</h:form>
</h:body>
</html>
What can I do when I just need the action attribute for some elements and not for others? Why is the first example not working?
I want to ask a question that i have a master template like this
<?xml version='1.0' encoding='UTF-8'?>
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Login</title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<ui:include src="header.xhtml" id="header"/>
</ui:insert>
</div>
<div>
<div id="content">
<ui:insert name="content"></ui:insert>
</div>
</div>
<div id="bottom" style="position: absolute;top: 675px;width: 100%" align="center">
<ui:insert name="bottom">
<ui:include src="footer.xhtml" id="footer"/>
</ui:insert>
</div>
</h:body>
</html>
On my each page i am using something like this
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>City Setup</title>
</h:head>
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="content">
<h:form id="cityReviewform">
......
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Now what is happening that because of the ui;composition my tile attribute is now working on each page, because ui:composition discard every tag outside of it. Now on each page i have a title of Login(i.e of master template). So i want to ask that how can i do this that on each page, its own title shown instead of Login(master tempalte title)?
Thanks
In the template client, everything outside <ui:composition> is ignored. You need to change your template approach to provide an <ui:insert> for the title in the master template, so that it can be defined by an <ui:define> in the template client.
Master template:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title><ui:insert name="title">Login</ui:insert></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<ui:include id="header" src="header.xhtml"/>
</ui:insert>
</div>
<div>
<div id="content">
<ui:insert name="content" />
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include id="footer" src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
Template client:
<ui:composition template="/WEB-INF/templates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<ui:define name="title">City Setup</ui:define>
<ui:define name="content">
<h:form id="cityReviewform">
...
</h:form>
</ui:define>
</ui:composition>
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
I am using primefaces v4.0. I have an f:event listener={..} type=preRenderView set in my xhtml. The listener method is also called correctly,but this listener method performs Navigation using Navigation handler. What is observe is that after the navigation is complete and the 2nd page is loaded, the menus of the second page are not showing as expected. Seems there is some css/js not loading. Below is my xhtml template which has the menu code.
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>CBB-Questionnaire</title>
</f:facet>
<link type="text/css" rel="stylesheet" href="#{resource['css:template.css']}" />
</h:head>
<h:body >
<p:tooltip />
<div class="qestDiv" >
<div class="header">
<h:form id="homeform">
<p:menubar >
<p:submenu label="Questionnaire" icon="ui-icon-document" >
<p:menuitem value="Technology Outsourcing" action="TechQuestionnaireForOutSrc"
icon="ui-icon-document" id="TECHQ1"
actionListener="#{usersession.questSelectedSetInSession}"/>
</p:submenu>
</p:menubar>
</h:form>
</div>
<div class="content">
<div class="centerpane">
<div class="pageContent">
<ui:insert name="pageContent" />
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</h:body>
</html>
page1.xhtml is below navigates to page2.xhtml
<ui:composition template="/WEB-INF/templates/template.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<ui:define name="pageContent" >
<f:event listener="#{techQOutSrcbean.checkSubmissionStatusAndNavigate}" type="preRenderView" />
</ui:define>
</ui:composition>
page2.xhtml
<ui:composition template="/WEB-INF/templates/template.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<ui:define name="pageContent" >
</ui:define>
</ui:composition>
When page2.xhtml loads it is supposed to show the menus defined in teh template as i am using facelets. But the menus in page2 loads, but it is loaded as
Below is the html source which tells that the js is not loaded on the page where the menu is loaded incomplete.
<!-- taken from the page where menu loads properly -->
<meta http-equiv="X-UA-Compatible" content="EmulateIE8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CBB-Questionnaire</title><link href="/QuestionaireWeb/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" rel="stylesheet" type="text/css"><link href="/QuestionaireWeb/faces/javax.faces.resource/primefaces.css?ln=primefaces&v=4.0" rel="stylesheet" type="text/css"><script src="/QuestionaireWeb/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=4.0" type="text/javascript"></script><script src="/QuestionaireWeb/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&v=4.0" type="text/javascript"></script><script src="/QuestionaireWeb/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=4.0" type="text/javascript"></script><link href="/QuestionaireWeb/faces/javax.faces.resource/css/template.css" rel="stylesheet" type="text/css">
<!-- taken from the page where js/css does not load properly fro the menu -->
<meta http-equiv="X-UA-Compatible" content="EmulateIE8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CBB-Questionnaire</title><link href="/QuestionaireWeb/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" rel="stylesheet" type="text/css"><link href="/QuestionaireWeb/faces/javax.faces.resource/css/template.css" rel="stylesheet" type="text/css">