As per title. I'm following the JavaServer Faces 2.0 tutorial (found here) - search for "To declare these components" to find roughly where I'm at.
Everthing works up until a certain point, however when I'm told to comment out the html form component, and uncomment the JSF form component, nothing displays. If I recomment out the JSF form and use the html one instead, it works fine. As far as I can see, I've followed the tutorial exactly. Any ideas?
For the record, this is what my index.xhtml looks like:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<!--<h:outputStylesheet name="css/stylesheet.css" />-->
<title>Greeting</title>
</head>
<body>
<div id="mainContainer">
<div id="left" class="subContainer greyBox">
<h4>Hi, my name is Duke!</h4>
<h5>I'm thinking of a number
<br/>
between
<span class="highlight">1</span> and
<span class="highlight">10</span>.</h5>
<h5>Can you guess it?</h5>
<!--<form action="response.xhtml">
<input type="text" size="2" maxlength="2" />
<input type="submit" value="submit" />
</form>-->
<h:form>
<h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
<h:commandButton id="submit" value="submit" action="response" />
</h:form>
</div>
<div id="right" class="subContainer">
<img src="duke.png" alt="Duke waving" />
<!--<h:graphicImage url="/duke.png" alt="Duke waving" />-->
</div>
</div>
</body>
make sure that your web.xml says:
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
Related
I am using Glassfish 5.0.1/4.1.1 for a Webproject (JSP, JSF, Bootsfaces, JPA). There I encountered the problem, that Glassfish is not allways building the Website correctly.
Sometimes it is build normally how it should be (Pic 1) and sometimes there are elements missing (Pic 2). This does even happen when deploying the same WAR-File.
Can anyone help with this problem?
Pic 1 - Normal Deployment:
Pic 2 - Problem:
Source Code (XHTML):
<?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:b="http://bootsfaces.net/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Statustool</title>
</h:head>
<f:view>
<h:body>
<div class="container" name="main" style="margin-top: 50px" >
<div class="d-flex align-items-end">
<b:image name="/img/Logo.png" span="6" offset="3"/>
<b:row styleClass="show-grid">
<b:column span="4" offset="4">
<h3 style=" text-align: center"><h:outputText value="Statustool Anmeldung" /></h3>
<b:form id="loginForm">
<b:inputText id="inputEmail" value="#{loginBackingBean.loginUser.email}" required="true" requiredMessage="Email muss eingegeben werden" label="Mail"/>
<b:message for="inputEmail" />
<b:inputSecret id="inputPasswort" value="#{loginBackingBean.loginUser.userPassword}" required="true" requiredMessage="Passwort muss eingegeben werden" label="Passwort"/>
<b:message for="inputPasswort"/>
<b:commandButton value="Anmelden" action="#{loginBackingBean.login()}" />
</b:form>
</b:column>
</b:row>
<ui:include src="public/footer.xhtml"/>
</div>
</div>
</h:body>
</f:view>
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?
I am trying to use JSF as a pure front-end tool. Is it possible for me to submit a form and based on the outcome of that form redirect to a different page? In this case, I have a back-end service that returns the outcome in the result variable. Depending on "result.success", I want to navigate to the appropriate page/view. Here is my JSF source code:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:r="http://mycustomtags.com/tags"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsf/core">
<head>
<r:myService service="adminlogin" namespace="result" params='{"dummy":"Dummy Value"}' />
</head>
<body>
#{result}
<f:viewParam name="redirectPage" value='#{(result.success)?"success.xhtml?faces-redirect=true" : "sample-login.xhtml?IncludeViewParams=true"}' />
output:#{redirectPage}
<h:form method="post" action="sample-login.xhtml">
<input name="token" type="hidden" class="input-block-level" value="34857349850" />
<input name="email" type="text" class="input-block-level" placeholder="email" />
<input name="password" type="password" class="input-block-level" placeholder="password" />
<h:commandButton action="#{redirectPage}" value="Login" />
</h:form>
</body>
</html>
I need to navigate to success.xhtml. I don't want to use "faces-config.xml". Any ideas? Here is my JSF code. By the way, this is does not work because action parameter in "h:commandButton" expects a MethodExpression.
I am pretty new to JSF and RichFaces. I am using RichFaces 4.X and JSF 2.0. I have created a sample page, where my command button is called a a4j button, but it does not seem to be working. Here is my page. Can someone please help
<!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"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>My Registration Page</title>
<link href="stylesheet/reset.css" rel="stylesheet" type="text/css" />
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/icons/favicon.png" />
<script language="javascript">
function showProgressBar()
{
alert("its in show");
}
function hideProgressBar()
{
alert("its in hide");
}
</script>
</h:head>
<h:body>
<a4j:jsFunction name="login" action="#{loginBean.validateUser}"
onbegin="showProgressBar();"
oncomplete="hideProgressBar();" />
<div id="login-container">
<div class="login-logo">
<img src="images/logo.png" />
</div>
<f:view>
<div id="loin-form">
<h1>
Log in to your account or sign up to Get Started
</h1>
<h:form>
<h:inputText id="userName" value="#{loginBean.userName}"
validator="#{loginBeanValidator.validateUserName}" required="true"
class="txtFld" />
<h:message for="userName"></h:message>
<h:inputSecret id="passWord" value="#{loginBean.passWord}"
validator="#{loginBeanValidator.validatePassword}" required="true"
class="pswrdFld" />
<h:message for="passWord"></h:message>
<p>
<a4j:commandLink id="forgotPasswordLink"
value="Forgot Your Password? " />
<a4j:commandButton id="loginButton" value="Sign In" action="login();"
styleClass="sign-btn" />
</p>
</h:form>
</div>
</f:view>
</div>
</h:body>
</html>
The actual problem is in your command button
<a4j:commandButton id="loginButton" value="Sign In" action="login();"
styleClass="sign-btn" />
The "action" attribute requires an EL expression to an action method that will be executed on the server when the button is pressed or a navigation rule. The purpose of a4j:jsFunction is to perform an ajax request from javascript call and the purpose of a4j:commandButton is to perform an ajax request when it's pressed. In your case you don't actually need a4j:jsFunction. Just remove it and put its the attributes on the a4j:commandButton like this:
<a4j:commandButton id="loginButton" value="Sign In"
action="#{loginBean.validateUser}" onbegin="showProgressBar();"
oncomplete="hideProgressBar();" styleClass="sign-btn" />
I want to implement JSF page with AJAX. This is the code of the JSF page:
<?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" xml:lang="en" lang="en"
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>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> Settings Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="greenBand" class="ui-state-default ui-corner-allh" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Application Settings" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_application_settings.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsdiv" style="width:350px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:panelGrid columns="2">
<h:panelGroup>User Session Timeout</h:panelGroup>
<h:panelGroup>
<h:selectOneMenu value="#{ApplicationController.settingValue('SessionTTL')}">
<f:selectItem itemValue="one" itemLabel="Option one" />
<f:selectItem itemValue="two" itemLabel="Option two" />
<f:selectItem itemValue="three" itemLabel="Option three" />
<f:selectItem itemValue="custom" itemLabel="Define custom value" />
<f:ajax render="input" />
</h:selectOneMenu>
<h:panelGroup id="input">
<h:inputText value="#{ApplicationController.settingValue('SessionTTL')}" rendered="#{bean.type == 'custom'}" required="true" />
</h:panelGroup>
</h:panelGroup>
<h:panelGroup>Maximum allowed users</h:panelGroup>
<h:panelGroup>#{ApplicationController.settingValue('MaxUsersActive')}</h:panelGroup>
</h:panelGrid>
</div>
<div id="settingslayer" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:400px">
</div>
<div id="settingspanel" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px">
</div>
</div>
</div>
</h:body>
</html>
When I load the page I get this error:
One or more resources have the target of "head", but no "head" component has been defined within the view.
This is the code of the header:
<?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" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<title>Settings Center</title>
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- / END -->
</html>
The Ajax is not working and this error message appears when I load the page. Maybe I'm missing something to add. How I can fix the code?
Best wishes
Peter
Well, I guess you need to edit your header.xhtml like this
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition>
<title>index</title>
<h:head>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen"/>
<script>....
</script>
</h:head>
Make sure that you use <h:head> - and not <head>.
Try to put <ui:composition> inside <html> and around its content in header.xhtml.