I am making a simple JSF application which is uses templating It's very basic stuff but taking a lot of time to find the fix.
Issue is, I am having index.jsp which just forwards the request to startPage.xhtml. startPage.xhtml uses main.xhtml for templating. Till here everything is ok. But there is a anchor link of startPage.xhtml which leads the control to expression/expression.html. When I click on that link browser is not rendering my header and footer (part of main.xhtml template). IE consider expression/expression.xhtml a file and open it with open/save dialogue.
Index.jsp
<html>
<body>
<jsp:forward page="startPage.jsf" />
</body>
</html>
main.xhtml
<!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"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jstl/core">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>X</title>
<link
href="css/styles.css"
rel="stylesheet" type="text/css" />
<style>
.rich-table-headercell {
text-align: left;
}
.rich-table-cell {
vertical-align: top;
}
</style>
</head>
<body
style="bgcolor: #FFFFFF; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 20;">
<!-- Start Header -->
<h:form id="mainForm">
<ui:include src="../includes/header.xhtml"/>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td nowrap="nowrap">
<table style="background-repeat: no-repeat; background-color: #E9ECEF; " width="100%" height="20px">
<tr>
<td nowrap="nowrap"><img
src="images/spacer.gif"
width="18" height="1" border="0" alt="" />
</td>
<td class="globalNavGrey" align="right" nowrap="nowrap">
<h:outputText value="Help" /> <rich:spacer width="10" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</h:form>
<!-- main content area -->
<table align="left">
<tr>
<td><img
src="images/spacer.gif"
width="5" height="1" border="0" alt="" />
</td>
<td style="vertical-align: top;">
<!-- Body starts -->
<ui:insert name="body">
</ui:insert>
<!-- Body ends -->
</td>
</tr>
</table>
</body>
</html>
startPage.xhtml
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition 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"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/2002/08/xhtml/xhtml1-transitional.xsd"
template="/includes/main.xhtml">
<style>
.cellBackground {
background-color:yellow;
}
</style>
<ui:param name="subTitle" value="Understanding Disease Informatics System" />
<ui:define name="body">
<div
style="margin-left: 30px; top: 120px; width: 800px; margin-bottom: 50px;"
class="mainscreen">
<br/> <b><font size="+1" color="003366">
X </font> </b><br/> <br/> This page is the entry point for X
developers development is organized into these subsystems:
<p></p>
<center>
<table border="1" cellpadding="15" cellspacing="25">
<tr>
<td class="cellBackground" title="Enabled" >
Expression Subsystem
</td>
<td title="Disable" style="font-size:20px;" >Pathways</td>
</tr>
</table>
</center>
<hr></hr>
<font size="+1">
Contacts
<hr></hr>
</font>
</div>
</ui:define>
</ui:composition>
expression.xhtml
<?xml version="1.0" encoding="windows-1252"?>
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/2002/08/xhtml/xhtml1-transitional.xsd">
<ui:composition template="main.xhtml">
<ui:param name="subTitle" value="Expression Data" />
<ui:define name="body">
Expression page!
</ui:define>
</ui:composition>
</html>
Any suggestions?
NOTE: As all the links on page are static so I am not using any managed bean.
<jsp:forward page="startPage.jsf" />
Your index.jsp suggests that the FacesServlet is in web.xml mapped on an <url-pattern> of *.jsf.
However,
Expression Subsystem
your startPage.xhtml has a link to expression.xhtml instead of expression.jsf. IE is retrieving the raw and unparsed JSF source code instead of its generated HTML. Whenever IE retrieves an application/xhtml+xml file, it doesn't know what to do with it, so it asks to download it.
You need to fix the link to match the <url-pattern> of the FacesServlet in web.xml.
Expression Subsystem
(note that I also simplified the context path retrieval)
Alternatively, you can also just change the <url-pattern> of the FacesServlet to *.xhtml. This way you can get rid of the ugly index.jsp altogether and set your <welcome-file> to startPage.xhtml and use URLs/links ending in .xhtml all the time.
Related
My professor is making my class use JSF to build our website, and I'm not too familiar with the xhtml syntax. I want to use Bootstrap since I'm used to using it for html.
<?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:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</h:head>
<h:body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</h:body>
</html>
But I get this error:
Error Parsing /index.xhtml: Error Traced[line: 10] The element type
"link" must be terminated by the matching end-tag "".
Good professor.
close your tag on:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
you should also add type="text/css" or use <h:outputStylesheet if your css is local
I use JSF 2.0 and the Apache Tomcat Server version 8. I have a simple JSF program that consists of two pages. In the first one the user enters his name and click a button which takes the user to the second page which displays "welcome" and the name that user entered in the first page. The key point here is that I'm trying to use regular html tags instead of JSF tags. So, I'm using:
<input type="text" id="myname" class="form-control" jsf:id="myname" jsf:value="#{testBean.name}">
instead of:
<h:inputText value="#{testBean.name}" />
But, executing the program, the only thing I see in the second page is "welcome", the name does not appear.
Does anyone have an idea why it is not working? Did I use "jsf:id and jsf:value" properly?
The code is below:
<!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:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions"
lang="en">
<h:head>
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> Faculty </title>
<title>Bootstrap 101 Template</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="arabicfonts/arabicfont.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</h:head>
<f:view>
<h:body>
<h:form>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
Updating Faculty
</div>
<div class="panel-body">
<div class="form-group">
<label for="myname" class="control-label"> My name is </label>
<div>
<input type="text" id="myname" class="form-control" jsf:id="myname" jsf:value="#{testBean.name}">
</input>
</div>
</div>
</div>
<div class="panel-footer">
<div class="text-center">
<h:commandButton class="btn btn-success" value="Do it" action="welcome"/>
</div>
</div>
</div>
</div>
</div>
</div>
</h:form>
</h:body>
</f:view>
</html>
<?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:h="http://java.sun.com/jsf/html">
<h:head>
<title>Welcome</title>
</h:head>
<h:body>
<h3>Welcome #{testBean.name}</h3>
</h:body>
</html>
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean(name="testBean")
#SessionScoped
public class TestBean implements Serializable
{
private String name;
public String getName() { return name; }
public void setName(String newValue) { name = newValue; }
}
I have a problem and i was wondering if anyone can help me. Any help is really appreciated. And i m sure that its an 'easy' question.
I have a jsp page that shows dynamic data in tables, my problem is that the page has multiple tables.
But i want to export to excel only a specific table with a specific id.
So far i m exporting to excel all data from the jsp page which is wrong, cause i want to export only one table with id="formAssignDemands", how can i do it ?
Here is my code,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%# page contentType="text/html;charset=windows-1253"%>
<%# taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%# taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%# taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%# taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253"/>
<f:loadBundle basename="bundles.requests" var="FieldsDescr"/>
<f:loadBundle basename="bundles.messages" var="GeneralMessages"/>
<title>
<h:outputText value="#{FieldsDescr.AssignRequests_Title}"/>
</title>
<a4j:loadStyle src="#{AssignDemands_backing.municipality.url}#{AssignDemands_backing.municipality.templateId}#{GeneralMessages.CssPath}"/>
<script language="JavaScript" type="text/javascript"
src="./demands.js"></script>
<script language="JavaScript" type="text/javascript"
src="../reports/reports.js"></script>
</head>
<body><h:form>
<jsp:include page="/system/NavigationMenu.jsp"/>
</h:form>
<%
String exportToExcel = request.getParameter("exportToExcel");
if (exportToExcel != null && exportToExcel.toString().equalsIgnoreCase("YES")) {
response.setContentType("application/vnd.ms-excel");
response.setHeader("Content-Disposition", "inline; filename="
+ "excel.xls");
}
%>
<table cellspacing="0" cellpadding="0" border="0"
width="99%" align="center">
<tr>
<td class="componentheading" width="99%">
<h:outputText value="#{FieldsDescr.AssignRequests_SubHeader}"/>
</td>
<td class="componentheading" width="1%">
<table>
......
<tr>
<td class="main_component_seperator" colspan="2"> </td>
</tr>
<tr>
<td align="center" colspan="2">
<h:form id="formAssignDemands">
<t:dataTable id="demandsDataTable"
binding="#{AssignDemands_backing.demandsDataTable}"
var="demand"
value="#{AssignDemands_backing.unassignedDemandsList}"
rows="#{NavigationMenu_backing.rows}"
varDetailToggler="detailToggler"
sortColumn="#{AssignDemands_backing.sort}"
sortAscending="#{AssignDemands_backing.ascending}"
preserveSort="true"
headerClass="datatable_td_header"
rowClasses="tablerow1, tablerow2"
width="100%"
rowIndexVar="demandsRowIndex">
<f:facet name="header">
<h:panelGroup>
<f:verbatim>
<div style="float:left;"></div>
</f:verbatim>
<h:panelGrid columns="4"
cellspacing="2">
<h:outputText value="#{GeneralMessages.DataTable_RowsPerPage}"/>
.....
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<%
if (exportToExcel == null) {
%>
Export to Excel
<%
}
%>
</body>
</html>
</f:view>
<%-- oracle-jdev-comment:auto-binding-backing-bean-name:AssignRequests--%>
Thank you guys for any help or any idea,,
i managed to do it with javascript and is working on 3 basic browsers mozilla, chrome and IE11 , so here it is,
<script type="text/javascript">
function ExcelReport()
{
var tab_text="<table border='2px'><tr bgcolor='#FFFFFF'>";
var textRange; var j=0;
tab = document.getElementById('table_id'); // id of table
for(j = 0 ; j < tab.rows.length ; j++)
{
tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
}
tab_text=tab_text+"</table>";
tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");
tab_text= tab_text.replace(/<img[^>]*>/gi,"");
tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, "");
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
{
txtArea1.document.open("txt/html","replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa=txtArea1.document.execCommand("SaveAs",true,"Excel.xls");
}
else
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
</script>
and to call it somewere in your body can add the following with an iframe, like that,
<iframe id="txtArea1" style="display:none"></iframe>
<button id="btnExport" class="button_class" onclick="ExcelReport();">Export to Excel</button>
thats it , thank you guys for reading
I need to automatically click the Login link after the JSF page below is loaded. Please help!
this form will display a login link and open a new a new window once the login link is clicked .
it would also be okay if i can directly submit the form without showing Login link.
<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:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
<title>MY System ®</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="My System" />
<link rel="stylesheet" type="text/css"
href="${facesContext.externalContext.requestContextPath}/style/source.css"></link>
<script type="text/javascript"
src="${facesContext.externalContext.requestContextPath}/js/Utility.js"></script>
</head>
<body>
<ui:include src="common/header.xhtml" />
<div class="table"
style="position: absolute; top: 160px; width: 960px; text-align: center; float: center; margin-left: auto;">
<form id="initForm">
<span class="warning"> Welcome to MY System, please <a
href=""
onclick="newSourceWindow('${facesContext.externalContext.requestContextPath}/home.jsf');"
style="color: blue; text-decoration: underline; cursor: pointer;">Login</a>
to start. </span>
</form>
<rich:spacer height="40" />
<ui:include src="common/footer.xhtml" />
</div>
</body>
</html>
Give Id to your span.
Access it through Javascript and you can do anything with it, in your case trigger click.
<span id="welcomeLink">
...
</span>
Since your span is in normal form no need to use form id while assessing.
If your span is in h:form then you have to attach the form id like this formId:spanId.
so the Javascript code would be:
var spanEle = document.getElementById('welcomeLink');
spanEle.click()
I am facing trouble with the valueChangeListener of h:selectBooleanCheckbox. I have the following code block:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<link href="../css/profile.css" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../css/twt.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="../js/custom-form-elements.js"></script>
<a4j:form id="userList">
<a4j:outputPanel id="userListPanel" rendered="#{popupController.iIndex >= 0}">
<div id="listPopup_#{popupController.iIndex}"
style="width: 202px; height: 235px; position: absolute; right: 0%; display: none; z-index: 10000;
background-image: url('../images/Alert/createNewListBack.gif'); background-repeat: no-repeat;">
<table width="180" cellpadding="0" cellspacing="0" height="100%" style="margin-top: 6px; margin-left: 10px;">
<a4j:repeat id="userListRepeat" value="#{popupController.userList}" rowKeyVar="i" var="listByUser">
<tr>
<td valign="middle" align="center" width="35" style="padding-left: 8px;">
<h:selectBooleanCheckbox id="listCheckbox_#{i}" name="listCheckbox_#{i}"
valueChangeListener="#{popupController.addUserListMember}" immediate="true">
</h:selectBooleanCheckbox>
</td>
<td valign="middle" align="left" class="alertSelect" width="145">
<div style="width: 170px; height: auto; word-wrap: break-word; white-space: pre-wrap;">
<h:outputText style="padding-right: 8px;" value="#{listByUser.name}" />
</div>
</td>
</tr>
</a4j:repeat>
</table>
</div>
</a4j:outputPanel>
</a4j:form>
</ui:composition>
And the addUserListMember of PopupController is
public void addUserListMember(ValueChangeEvent event) throws Exception {
System.out.println("=========================== PopupController.addUserListMember() ==================");
Boolean isChecked = (Boolean) event.getNewValue();
if(isChecked) {
System.out.println("===== Checked =====");
} else {
System.out.println("===== Un Checked =====");
}
}
But the valuechangelistner is not working. I can't use this.form.submit() because it will not fit into the code. I am in jsf 1.2.
What is the remedy? Thanks.
The valueChangeListener is not a client side event/happening. It's fully server side. You should really submit the form to the server side after you change the value in order to get it invoked.
As you're apparently already using Ajax4jsf, you could just add an <a4j:support>.
<h:selectBooleanCheckbox ...>
<a4j:support event="onclick" reRender="someOtherComponentIfNecessary" />
</h:selectBooleanCheckbox>