I'm from Brazil and here we have lots of à é ô ó ç, etc in our words and it is a problem on my JSF project.
I have a master.xhtml as a template for all my pages and here it is:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta http-equiv="pragma" content="no-cache"/>
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/assets/css/bootstrap.css" type="text/css" media="all" />
<title>#{masterController.projectName}</title>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
</h:head>
<h:body>
<ui:fragment rendered="#{loginController.isLoggedIn}">
<ui:include src="../includes/top.xhtml"/>
</ui:fragment>
<ui:insert name="body" />
<hr />
<ui:fragment rendered="#{loginController.isLoggedIn}">
<ui:include src="../includes/footer.xhtml" />
</ui:fragment>
</h:body>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/assets/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/assets/js/bootstrap.min.js"></script>
</html>
As you can see my xml encondig is correct as my Content-Type meta tag.
I'm using Eclipse and on my project Properties->Resources I've changed the Text file encoding to ISO-8859-1.
I have a label on my login.xhtml page that goes inside master.xhtml called Usuário (User), if I use the character á, and the word is wrong without it, I get this error:
exception
javax.servlet.ServletException: null source
javax.faces.webapp.FacesServlet.service(FacesServlet.java:321)
root cause
java.lang.IllegalArgumentException: null source
java.util.EventObject.<init>(Unknown Source)
javax.faces.event.SystemEvent.<init>(SystemEvent.java:67)
javax.faces.event.ComponentSystemEvent.<init>(ComponentSystemEvent.java:69)
javax.faces.event.PostRestoreStateEvent.<init>(PostRestoreStateEvent.java:69)
com.sun.faces.lifecycle.RestoreViewPhase.deliverPostRestoreStateEvent(RestoreViewPhase.java:256)
com.sun.faces.lifecycle.RestoreViewPhase.execute(RestoreViewPhase.java:245)
com.sun.faces.lifecycle.Phase.doPhase(Phase.java:97)
com.sun.faces.lifecycle.RestoreViewPhase.doPhase(RestoreViewPhase.java:107)
com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:114)
javax.faces.webapp.FacesServlet.service(FacesServlet.java:308)
Taking the á away it works but as I said, in Portuguese it is necessary and I'm gonna use a lot of other characters with accent.
You should not use the old ISO-8859-1 charset, but the new UTF-8 charset. JSF uses by default UTF-8 already which is much better prepared for world domniation.
Change everything to UTF-8 and change your IDE settings to use UTF-8 everywhere. In Eclipse, the most important setting is Window > Preferences > General > Workspace > Text File Encoding.
Then, enter "encoding" in the type filter text on the left top input field and re-apply the change to UTF-8 for all other settings as well.
See also:
Unicode - How to get the characters right?
Related
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Hello Thymeleaf!</title>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
<img th:src="#{data:image/jpeg;base64, /9j/4AAQSkZJRgABAgAAAQABAAD/7QCEUGhvdG9zaG9wI...
}">
</body>
</html>
I am displaying an image which is converted to Base64 (MIME type conversion) format and I am using Thyme-leaf template, can someone figure out what's happening?
One possible error could be that thymeleaf check the html-syntax strict and you don't close your image-tag. So try to change it like this:
<img th:src="#{data:image/jpeg;base64, /9j/4AAQSkZJRgABAgAAAQ... }" />
My question is similar to How to hide/show more text within a certain length (like youtube) or Readmore but for JSF. It's a very common metaphor on the web.
I have a page that displays a section with user-entered text, which may be short or it may be long. If it's long, the table height is unmanageable, so in those cases I'd like to show a portion of the text followed by a "(more)" link that will reveal the remaining text. After expansion, there would be a "(less)" link as well. (Note: My particular case has just text with newlines in it.)
Are there any pre-existing JSF components to do this? I've checked PrimeFaces and OmniFaces and ButterFaces and was surprised that I didn't see anything that jumped out at me as having this functionality. I'm sure I could make my own custom component using one of the techniques in the referenced StackOverflow question, but I'd rather not reinvent the wheel.
Maybe this is a good extension for ButterFaces. I will think about it.
But why do you need a JSF component? Just use Readmore.js.
Here's a quick composite component that uses readmore that can be used as a starting point for anyone else wanting something like this. There are a few unrelated features in it that are kind of hacked in (hard-coded style, hard-coded options to the readmore() function, etc.) that you would probably want to improve and customize. Suggestions for improvement welcome.
Parameters
value (String, Required): The text to display. Expected to be plain text with empty lines.
cols (integer, default=40): The number of columns to limit the width of the containing div to. If less than or equal to 0, then don't limit the width.
readmore (boolean, default=false): Whether to use the Readmore feature.
textonly (boolean, default=false): By default, the component assigns a "readonly" class to the containing div. Setting textonly to true does not assign the "readonly" class to the containing div.
Location: Under /resources/{samplelibrary}/readOnlyTextArea.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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite"
>
<composite:interface>
<composite:attribute name="cols" default="40" type="java.lang.Integer"/>
<composite:attribute name="value" required="true"/>
<composite:attribute name="readmore" default="false" type="java.lang.Boolean"/>
<composite:attribute name="textonly" default="false" type="java.lang.Boolean"/>
</composite:interface>
<composite:implementation>
<h:outputScript library="samplelibrary" name="readmore.min.js" target="head"/>
<div id="#{cc.clientId}_div" class="#{cc.attrs.textonly?'':'readonly'}"
style="overflow: hidden; white-space: pre-wrap; #{cc.attrs.readmore ? '' : 'min-height: 1.3em;'} #{(cc.attrs.cols gt 0) ? 'width: '.concat(cc.attrs.cols / 2.09).concat('em; padding: 2px 2px 2px 2px;') : ''}">
<h:outputText value="#{cc.attrs.value}"
/></div>
<ui:fragment rendered="#{cc.attrs.readmore}">
<script type="text/javascript">
$(window).ready(function() {
var comps = $(document.getElementById('#{cc.clientId}_div'));
comps.readmore({speed:300,collapsedHeight:54});
});
</script>
</ui:fragment>
</composite:implementation>
</html>
Here's some CSS for the readonly CSS class:
.readonly
{
border: 1px solid #999;
background-color: #eee;
color: #333;
}
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 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.
I'm trying to set the size of a dijit.Dialog, but it seems limited to 600x400, no matter what size I set it. I've copied the code from dojocampus and the dialog appear, but when i set the size larger, it only shows 600x400. Using firebug and selecting items inside the dialog, I see that they are larger than the dialog, but don't show correctly. I set it up to scroll, but the bottom of the scrollbar is out of view. In firebug, I've check the maxSize from _Widget and it is set to infinity. Here is my code to set the dialog.
<div id="sized" dojoType="dijit.Dialog" title="My scrolling dialog">
<div style="width: 580px; height: 600px; overflow: scroll;">
Any suggestions for sizing the dialog box larger?
I just coded up a quick sample from scratch using dojo 1.4 and was able to set an arbitrarily large DBX size with no problems.
Without seeing your code it might be hard to find where your issue is stemming from but it does not seem to be an inherent limitation of the dojo toolkit. Perhaps you have some CSS rules that are inherited in a way you did not anticipate?
Perhaps you can use my sample below to compare with your use case and figure out what is different about your implementation.
<!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" lang="en" xml:lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
djConfig = {
parseOnLoad: true
};
google.load("dojo", "1.4");
google.setOnLoadCallback(function (){
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
});
</script>
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css";
</style>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" type="button">Show big Dialog
<script type="dojo/method" event="onClick" args="evt">
dijit.byId("bigdbx").show();
</script>
</button>
<div id="bigdbx" dojoType="dijit.Dialog" title="Big Dialog" width="900px">
<p style="width: 1100px; height: 800px;">Paragraph with really wide fixed size...</p>
</div>
</body>
</html>