I am new to primefaces and I want to use autocomplete tag of primeface.So i folllowed this example.Here is my code
layout.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: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">
<head>
<title>Title</title>
</head>
<body>
<h:form id="form">
<p:panel header="AutoComplete" toggleable="true" id="panel">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel value="Simple :" for="acSimple" />
<p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}"
completeMethod="#{autoCompleteBean.complete}"/>
</h:panelGrid>
</p:panel>
</h:form>
</body>
</html>
AutoCompleteBean.java
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
#ManagedBean(name="autoCompleteBean")
#RequestScoped
public class AutoCompleteBean {
private String txt1;
public List<String> complete(String query) {
List<String> results = new ArrayList<String>();
for (int i = 0; i < 10; i++) {
results.add(query + i);
}
return results;
}
public String getTxt1() {
return txt1;
}
public void setTxt1(String txt1) {
this.txt1 = txt1;
}
}
so layout.xhtml renders fine and show me a text field but after then it don't work and not showing autocomplete functionality.Is there something missing? or what would be the problemThanks
The xhtml you have posted is using standard html tags for head and body so it may not be correctly interpreting the Javascript used to call the complete method in the bean.
Try using h:head and h:body.
The tip-off may show up in your output window. Check for something like:
sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.), detail=(One or more resources have the target of 'head', but no 'head' component has been defined within the view.)]
See the Stack Overflow discussion on h:head in primefaces: What's the difference between <h:head> and <head> in Java Facelets?
You should always use h:head and h:body when you are writing facelets. The reason is that in order for the auto complete to work javascript is required and if you don't include h:head jsf will not be able to put the javascript correctly.
I had a similar problem, however in my case the problem was resolved when I removed a p tag which was surrounding the p:autocomplete tag.
The following code will not throw an error message, but the autoselect dropdown menu won't appear. After removing the <p></p> everything works fine.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
<h:form>
<p>
<p:autoComplete id="place" value="#{addPlaceBean.place}"
completeMethod="#{autoCompletePlace.completePlace}" var="place"
itemLabel="#{place.city}, #{place.country}"
itemValue="#{place}" converter="placeConverter">
</p:autoComplete>
</p>
</h:form>
</h:body>
</html>
Related
This problem might be related to the one I described earlier here:
PrimeFaces 7.0 <p:textEditor HTML-sanitizer discards text formatting, such as centering
but at least trying to switch off the HTML sanitizer in PrimeFaces 8 did not do the trick, the problem is still there. To reproduce it:
1.) Take the example from the PrimeFaces showcase, as it is shown here:
https://www.primefaces.org/showcase/ui/input/textEditor.xhtml
In case you use PrimeFaces 8.0, just augment the line
<p:textEditor widgetVar="editor1" value="#{editorViewTest.text}" height="300" style="margin-bottom:10px"/>
by the attribute secure="false" as follows:
<p:textEditor widgetVar="editor1" secure="false" value="#{editorViewTest.text}" height="300" style="margin-bottom:10px"/>
Write just a single word, i.e. Header and format it by both aligning it centrally and make it a large text. Click on the "Submit" button. The text that comes in the setter() method of the backing bean IS NOT CENTERED, but is only large.
To demonstrate:
1.) This is how the text is formatted in the editor:
2.) This is what I recieve in the debugger:
For comparison, this is my facelet:
<!DOCTYPE html>
<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:p="http://primefaces.org/ui"
lang="en">
<h:head>
<f:facet name="first">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</f:facet>
<title>Heimdi</title>
</h:head>
<h:body>
<h:form>
<p:textEditor widgetVar="editor1" secure="false" value="#{editorViewTest.text}" height="300" style="margin-bottom:10px"/>
<p:commandButton value="Submit"/>
</h:form>
</h:body>
</html>
and this is the backing bean:
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
#Named("editorViewTest")
#RequestScoped
public class EditorView {
private String text;
private String text2;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getText2() {
return text2;
}
public void setText2(String text2) {
this.text2 = text2;
}
}
This question already has answers here:
How to choose the right bean scope?
(2 answers)
Closed 4 years ago.
I have an application with a p:selectOneMenu component. This component is used to determine what category of file is being uploaded so I can do some work to it when the file is uploaded.
I implemented the answer from this post and it seems to call my setter methods correctly for fileType. But once the file is submitted and the handleFileUpload method is called, the fileType getter method returns null.
For example, if I select Foo then I get the output
File type changed to: Foo
But when I hit the upload button I get the output
The file type selected is null
When I expect
The file type selected is Foo
What is causing the get method to return two different results and is there a way to fix this?
main.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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:p="http://primefaces.org/ui">
<meta http-equiv="refresh"
content="#{session.maxInactiveInterval};url=index.xhtml" />
<f:view contentType="text/html">
<h:head>
<title>File Upload</title>
</h:head>
<p:layout fullPage="true">
<p:layoutUnit position="center">
<ui:insert name="pagebody" />
</p:layoutUnit>
</p:layout>
</f:view>
</html>
index.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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:p="http://primefaces.org/ui" template="/templates/main.xhtml">
<ui:define name="pagebody">
<h:body>
<h:form id="uploadform" enctype="multipart/form-data">
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<h:outputText value="File Type:" />
<p:selectOneMenu value="#{uploadBean.fileType}">
<f:selectItem itemLabel="Foo" itemValue="Foo"/>
<f:selectItem itemLabel="Bar" itemValue="Bar"/>
<f:ajax listener="#{uploadBean.changeFileType}" />
</p:selectOneMenu>
</h:panelGrid>
<br />
<p:fileUpload fileUploadListener="#{uploadBean.handleFileUpload}" mode="advanced"/>
</h:form>
</h:body>
</ui:define>
</ui:composition>
UploadBean.java
#RequestScoped
#ManagedBean(name = "uploadBean")
public class UploadBean implements java.io.Serializable {
private static final long serialVersionUID = 1L;
private String fileType = null;
#PostConstruct
public void init() {
}
public void handleFileUpload(FileUploadEvent event){
System.out.println("The file type selected is " + this.getFileType());
}
public String getFileType() {
return fileType;
}
public void setFileType(String fileType) {
this.fileType = fileType;
}
public void changeFileType() {
System.out.println("File type changed to: " + this.getFileType());
}
}
As pointed out by #Kukeltje the issue was that my bean was not properly scoped. Switching from RequestScoped to ViewScoped fixed the issue I was having.
I am doing a simple navigation example in jsf as i am a beginner. i am always getting null when accessing the f:param value in the managedBean using ManagedProperty
home.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/facelets">
<head>
<title>JSF Tutorial!</title>
</head>
<body>
<h3>Using JSF outcome</h3>
<h:form>
<h:commandButton action="#{navigation.show}" value="Page1">
<f:param name="pageId" value="1" />
</h:commandButton>
<h:commandLink action="#{navigation.show}" value="Page2">
<f:param name="pageId" value="2" />
</h:commandLink>
<h:commandLink action="#{navigation.show}" value="Home">
<f:param name="pageId" value="3" />
</h:commandLink>
</h:form>
Navigation.java
package com.jason.jsf;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
#ManagedBean(name = "navigation", eager = true)
#RequestScoped
public class Navigation {
#ManagedProperty(value = "#{param.pageId}")
private String pageId;
public String show() {
System.out.println("page id" + value);
if (pageId == null) {
return "home";
}
if (pageId.equals("1")) {
return "page1";
} else if (pageId.equals("2")) {
return "page2";
} else {
return "home";
}
}
public String getPageId() {
return pageId;
}
public void setPageId(String pageId) {
System.out.println("page id set" + pageId);
this.pageId = pageId;
}
}
How is this caused and how can I solve it? I am using jsf2.2 Mojarra 2.0.3.there are other sample page1.xhtml and page2.xhtml just for navigation with me
Thanks in advance
Look closer at the XML namespace prefix and the URI and compare with whatever is shown in a decent JSF book/tutorial/resource:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/facelets">
Yes, the XML namespace URI for the f: prefix is wrong. You declared it to be the one of Facelets tags which have usually ui: prefix. This basically causes those tags to not be properly interpreted at all. It's being misinterpreted as an <ui:param> which has an entirely different meaning than the real <f:param>.
Fix the taglib URI. It needs to be http://java.sun.com/jsf/core. Here's the complete set:
<html 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">
See also:
Our JSF wiki page - contains a Hello World
Unrelated to the concrete problem, Mojarra 2.0.3 is not JSF 2.2. It's JSF 2.0. And a rather old implementation too, over 5 years already. You can get latest Mojarra 2.2 (currently 2.2.11) at http://javaserverfaces.java.net. After that, you can change the domain in taglib URIs from java.sun.com to xmlns.jcp.org:
<html 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">
I have been looking for a solution to my JSF problem a couple of days now and tried out all possible solutions. Nothing worked.
I would like to implement a jsf galleria, like this one. The code did not work, nothing was displayed in the page.
Here's my bean:
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
#ManagedBean(name="myGallery")
#ApplicationScoped
public class GalleriaBean {
private List<String> images;
private String effect = "fade";
#PostConstruct
public void init() {
images = new ArrayList<String>();
for(int i=1;i<=4;i++) {
images.add("gallery" + i + ".jpg");
}
}
public List<String> getImages() {
return images;
}
public String getEffect() {
return effect;
}
public void setEffect(String effect) {
this.effect = effect;
}
}
And the following code would be my xhtml content:
<!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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:panelGroup>
<p:galleria effect="#{myGallery.effect}" var="image" effectSpeed="1000" styleClass=".ui-galleria-image-thumb-nav-left">
<ui:repeat value="#{myGallery.images}" var="image">
<h:graphicImage value="resources/images/#{image}" title="#{image}"/>
</ui:repeat>
</p:galleria>
</h:panelGroup>
</h:body>
</html>
As you might have noticed, I am using instead of . With this setting, all my images are thrown into the page, in a vertical list, with no fade transition or any other gallery type. If I replace with , my page is completely blank and the images are NOT displayed at all.
What could be the reason for that? What do I have to add, to make the gallery look like the one on the page above?
Okay, the problem seemed to be the fact that I did not put the PrimeFaces library (jar) in the lib folder in WEB-INF. Furthermore, I made sure I have setters and getters for all properties in the GalleriaBean. Hope this helps anyone.
hy,
with this code is run :)
<!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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:panelGroup>
<p:galleria effect="#{myGallery.effect}" value="#{myGallery.images}" var="image" effectSpeed="1000" styleClass=".ui-galleria-image-thumb-nav-left">
<p:graphicImage name="pathDirectory/#{image}" title="#{image}"/>
</p:galleria>
</h:panelGroup>
</h:body>
</html>
you can the example in site PrimeFaces
I´ve a JSF web application using SPRING3 + JSF2 (mojarra 2.1.12) and I´m having some problems that I think can be derived of a bad choose of the Scope of one controller in one combo of the JSF2+primefaces interface.
This combo functionality allows the user to choose one of the internal xhtml subpages and a button that automatically redirects you to that page.
The website uses a template technology: there is template (standard.xhtml) with the JSF2 code and using this template there are several pages: a inicio.xhtml that is the home page and a contact page (contacto.xhtml). In both pages the combo is displayed properly.
The following code it is working properly only if you´re navigating at the home page (incio.xhtml) but when you´re in other part of the web (i.e. contacto.xhtml) it displays the combo with all the options, but the button doesn´t work at all.
Here it´s my code in standard.xhtml file:
<?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"
xml:lang="${userContext.locale}" lang="${userContext.locale}"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags">
<f:view contentType="text/html">
<h:head>
//HEAD
</h:head>
<body>
<div id="…">
<div id="…">
//CODE
//CODE to go from one page (inicio.xhtml) to other (contacto.xhtml)
<li><h:commandLink value="${msg.app_menu_contacto}" action="mContacto" /></li>
//MORE CODE
<h:form>
//MORE CODE
<h:panelGrid id="buscar" columns="2" style="margin-top:20px;" cellpadding="5">
<p:selectOneMenu id="selectBuscar" value="#{buscador.procedimiento}" panelStyle="width:150px;"
var="p" style="width:220px; margin-right: 10px; " filter="true" filterMatchMode="startsWith">
<f:selectItem itemLabel="${msg.app_comun_seleccionar}" itemValue="" />
<f:selectItems value="#{buscador.procedimientos}" var="proc" itemLabel="#{proc.codigo}" itemValue="#{proc.valor}"/>
</p:selectOneMenu>
<p:commandButton id="btnIr" style="width:40px" value="#{msg.app_comun_btn_ir}" title="#{msg.app_comun_btn_ir_title}"
action="#{buscador.direccion}">
</p:commandButton>
</h:panelGrid>
</h:form>
</div>
</div>
</body>
</f:view>
</html>
In the faces-navigation.xml we have these lines (faces-navigation is only used in several inherited parts of the code):
<navigation-case>
<from-outcome>mContacto</from-outcome>
<to-view-id>/views/comun/contacto.xhtml</to-view-id>
<redirect />
</navigation-case>
Code of the xhtml home page where it is working:
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 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:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags"
template="/WEB-INF/layouts/standard.xhtml">
//Code independent of the combo or button failing
// it uses ui:define to show different components in the page.
</ui:composition>
and this is the controller code:
#Controller("buscador")
//#Scope(“Session”) Do not work with “request”, “view” or without scope
public class BuscadorController implements Serializable {
public List<ValorCombo> getProcedimientos() {
//Code that returns a list of pair String to show in the combo, name of the xhtml page should be redirected
}
public String direccion() {
//CODE
String salida = "proc/"+procedimiento+"?faces-redirect=true";
//more CODE
return salida;
}
}
I have tried this but it doesn´t work neither.
http://balusc.blogspot.com.es/2011/09/communication-in-jsf-20.html
how can I solve this problem?
Thanks!