I am doing a web aplication where I have a menu with a list entities and this entities will be evaluated all it is in a facelets template and I now I need to get the ID of this entity to can evaluate How it do ?
I thought it:
<p:menu model="#{entidadView.menuModel}" toggleable="true" >
<p:ajax listener="#{grupoView.storeEntidad}"/>
</p:menu>
and My bean it is:
public MenuModel getMenuModel(){
DefaultSubMenu subMenu2 = new DefaultSubMenu("Auditoria");
for (Entidad entidad : getAllEntidad() ){
item = new DefaultMenuItem(entidad.getNombre());
item.setOutcome("/auditar.xhtml");
subMenu2.addElement(item);
}
model.addElement(subMenu2);
//Event to Ajax
public void storeEntidad(ValueChangeEvent evento){
this.idEntidad = evento.getNewValue().toString();;
System.out.println(idEntidad);
}
but say me this error:
<p:ajax> Unable to attach behavior to non-ClientBehaviorHolder parent
I did it only send the parameter by the URL of my web pages and I capture it then.
My bean:
public MenuModel getMenuModel(){
DefaultSubMenu subMenu2 = new DefaultSubMenu("Auditoria");
for (Entidad entidad : getAllEntidad() ){
idEntidad = String.valueOf(entidad.getEntidad_id());
item = new DefaultMenuItem(entidad.getNombre());
item.setParam("entidad", idEntidad);
item.setOutcome("/auditar.xhtml");
subMenu2.addElement(item);
}
model.addElement(subMenu2);
}
And the next Pages I capture so:
<html ...>
<f:metadata>
<f:viewParam name="entidad" value="#{grupoView.idEntidad}"/>
</f:metadata>
<body>
And finaally It was okay !!! (Y)
Related
I'm trying to do a country/state/city loader with autocomplete tag but this don't works. I already had done with SelectOneMenu tag and it's works fine, but now I'm trying to implement it with autoComplete and I can't make it work properly because the method that is in the ajax tag returns null
this is my XHTML
<p:outputLabel value="Region"/>
<p:autoComplete value="#{beanPersona.region}" completeMethod="#{beanPersona.listarRegion}"
var="region" itemLabel="#{region.nombre}" itemValue="#{region}"
forceSelection="true" autocomplete="true" dropdown="true" >
<o:converter converterId="omnifaces.ListConverter" list="#{beanPersona.listRegion}"/>
<p:ajax event="itemSelect" listener="#{beanPersona.onRegionChange}" process="#form"/>
</p:autoComplete>
and this is my Bean (Scoope is ViewScope and everithing else works fine)
public void onRegionChange(SelectEvent e) {
System.out.println(e.getObject());
this.region = (Region) e.getObject();
}
public List<Region> listarRegion(String filtro) {
List<Region> listaCompleta = (List<Region>) (List<?>) new Dml().list(new Region());
List<Region> lista = new ArrayList();
if(filtro.length() > 0)
for (Region objeto : listaCompleta) {
if(objeto.getNombre().toLowerCase().contains(filtro.toLowerCase()))
lista.add(objeto);
}
else
lista = listaCompleta;
return lista;
}
if you could help me I would appreciate it
the problem
I'm trying to work with form validation in jsf 1.2. I have a form with rows of two input text fields.
I enter two rows of data, with one bad cell, like this:
| :) | :/ |
| :) | :) |
The validator is called once for each row, but checks both fields.
Each UIInput that fails validation is added to a list of failed UIComponents.
The method for the submit action finally gets to run.
First it restores any saved styles.
Then it loops over the failed UIComponents.
Inside the loop, it saves the current style, then sets the style to "badInput".
But when the page loads, both end-cells have the "badInput" style:
| :) | :/ |
| :) | :/ |
my code
This is my validator, a method on the managed bean that handles this page:
public void validateTime(FacesContext context, UIComponent component, Object value)
{
UIInput out = (UIInput) component.findComponent("out");
for (UIComponent uic : Arrays.asList(component, out))
{
String time = (String) ((UIInput)uic).getSubmittedValue();
if (!StringToTime.isValid(time))
{
// mark that we found invalid times
validTimes = false;
// save the failed component
// the click method will change the style during the render phase
failedUics.add(uic); // List<UIComponent>
badComps.put(uic.getClientId(context), uic); // Map<String, UIComponent>
}
}
}
And here's the table of input fields:
<h:dataTable binding="#{entryHandler.tableAttends}" value="#{entryHandler.attends}" var="range">
<h:column>
<div>
<h:outputLabel>
<h:outputText value="In: " />
<h:inputText value="#{range.start}" id="in" validator="#{entryHandler.validateTime}" />
</h:outputLabel>
<h:outputLabel>
<h:outputText value="Out: " />
<h:inputText value="#{range.end}" id="out" />
</h:outputLabel>
<h:commandLink action="#{entryHandler.delAttend}" value="X" styleClass="removeTime" />
</div>
</h:column>
</h:dataTable>
I've tried applying the bad input style these two ways:
for (UIComponent target : failedUics)
{
log.debug("target client id: " + target.getClientId(context));
Map<String, Object> attr = target.getAttributes();
// save the style before changing it
String style = (String) attr.get("styleClass");
originalStyle.put(target.getClientId(context), style);
// add the badInput css class
if (style == null) style = "";
attr.put("styleClass", "badInput " + style);
}
failedUics = new ArrayList<UIComponent>();
and the second:
UIComponent root = context.getViewRoot();
for (String clientId : badComps.keySet())
{
root.invokeOnComponent(context, clientId, new BadInputCallback(originalStyle));
}
badComps = new HashMap<String, UIComponent>();
where this is the callback function:
private static class BadInputCallback implements ContextCallback
{
private final Map<String, String> originalStyle;
public BadInputCallback(Map<String, String> originalStyle)
{
this.originalStyle = originalStyle;
}
#Override
public void invokeContextCallback(FacesContext context, UIComponent target)
{
Map<String, Object> attr = uic.getAttributes();
// save the style before changing it
String style = (String) attr.get("styleClass");
originalStyle.put(target.getClientId(context), style);
// add the badInput css class
if (style == null) style = "";
attr.put("styleClass", "badInput " + style);
}
}
Your concrete problem is caused because there is physically only one input component in the component tree, whose state changes whenever the parent UIData component iterates over every item of the model. When you want to set the styleClass dynamically, you basically need to let it depend on the currently iterated item, like so:
<h:dataTable ... var="item">
<h:column>
<h:inputText ... styleClass="#{item.bad ? 'badInput' : ''}" />
</h:column>
</h:dataTable>
Or when you're already on JSF 2.x, then check UIInput#isValid() instead whereby the UIInput is referenced via implicit EL variable #{component}, like so:
<h:dataTable ... var="item">
<h:column>
<h:inputText ... styleClass="#{component.valid ? '' : 'badInput'}" />
</h:column>
</h:dataTable>
This problem is already identified before and taken into account in among others the JSF 1.2 targeted SetFocusListener phase listener on The BalusC Code and the JSF 2.0 <o:highlight> component of JSF utility library OmniFaces.
Both have under the covers the same approach: they collect the client IDs of all invalidated input components and pass them as an array to JavaScript code which in turn sets the desired class name via HTML DOM.
See also:
What exactly is #{component} in EL?
how to set ui-state-error class to h:selectOneMenu on validation error
Styling input component after validation failed
Eclipse errors on #{component.valid}: "valid cannot be resolved as a member of component”
I'm trying to add programatically an Ajax client behavior to a custom component but when I do I get a null.pointer.exception (as an Alert in the browser no error in the logs), if I add the behavior in the .xhtml it works fine but I really need to add them programatically (actually the component is going to be rendered dinamically from a top component (dashboard -> N columns -> N widgets per column all from a Database)
I have tested this creating a simple DataList component
Here is the relevant code...
DataListRenderer
#Override
public void encodeEnd(FacesContext context, UIComponent component) throws IOException{
DataList datalist = (DataList)component;
ResponseWriter writer = context.getResponseWriter();
.. bunch of rendering options....
// If sortable then we add the sortable script.
// This basically ends up generating a call to jsf.ajax.request(source,event,params);
if (sortable != null && sortable.equalsIgnoreCase("true")) {
ScriptUtils.startScript(writer, clientId);
writer.write("$(function() {");
writer.write("$(EasyFaces.escapeId('" + clientId + "')).sortable({");
writer.write("update: function (event, ui) { ");
writer.write(new AjaxRequest().addEvent(StringUtils.addSingleQuotes("update"))
.addExecute(StringUtils.addSingleQuotes(datalist.getClientId()))
.addSource(StringUtils.addSingleQuotes(datalist.getClientId()))
.addOther("sourceId", "ui.item.attr('id')")
.addOther("dataValue", "ui.item.attr('data-value')")
.addOther("dropedPosition", "ui.item.index()")
.getAjaxCall());
writer.write(" } ");
encodeClientBehaviors(context, datalist);
writer.write("});");
writer.write("});");
ScriptUtils.endScript(writer);
}
// This is where I add the behavior
AjaxBehavior ajaxBehavior = (AjaxBehavior) FacesContext.getCurrentInstance().getApplication().createBehavior(AjaxBehavior.BEHAVIOR_ID);
ajaxBehavior.setRender(Arrays.asList("#form"));
ajaxBehavior.setExecute(Arrays.asList("#form"));
MethodExpression listener = FacesContext.getCurrentInstance().getApplication()
.getExpressionFactory().createMethodExpression(context.getELContext(),"#{dataListManager.updateModel}", null,
new Class[] { AjaxBehaviorEvent.class });
ajaxBehavior.addAjaxBehaviorListener(new AjaxBehaviorListenerImpl(listener));
datalist.addClientBehavior(datalist.getDefaultEventName(), ajaxBehavior);
}
... rest of the code
Now the .xhtml is as follows:
...
h:form>
<et:dataList id="dl" value="#{easyfacesBean.data}" itemValue="foo" var="xx" sortable="true">
<h:outputText id="txt" value="#{xx}" />
</et:dataList>
</h:form>
...
This renders the code Ok, the list actually can be ordered but when re-ordered it gives me the null.pointer.exception error
This is what comes back from the server:
<?xml version='1.0' encoding='UTF-8'?>
<partial-response><error><error-name>class java.lang.NullPointerException</error-name><error-message><![CDATA[]]></error-message></error></partial-response>
Now, If I comment this line
datalist.addClientBehavior(datalist.getDefaultEventName(), ajaxBehavior);
And simply add the tag like so:
<h:form>
<et:dataList id="dl" value="#{easyfacesBean.data}" itemValue="foo" var="xx" sortable="true">
<f:ajax />
<h:outputText id="txt" value="#{xx}" />
</et:dataList>
</h:form>
Everything works fine.. any ideas? I would settle for a way to actually know where the null.point.exception is ..
BTW if I don't comment the line that actually add's the behavior and add the < f:ajax > tag the error changes to java.lang.IndexOutOfBoundsException
<?xml version='1.0' encoding='UTF-8'?>
<partial-response><error><error-name>class java.lang.IndexOutOfBoundsException</error-name><error-message><![CDATA[Index: 1, Size: 1]]></error-message>
Regards!
This question already has answers here:
Display dynamic image from database or remote source with p:graphicImage and StreamedContent
(4 answers)
Closed 7 years ago.
I want to dynamically load images from a database withing a PrimeFaces data table. Code looks like as follows which is based on this PF forum topic:
<p:dataTable id="tablaInventario" var="inv" value="#{registrarPedidoController.inventarioList}" paginator="true" rows="10"
selection="#{registrarPedidoController.inventarioSelected}" selectionMode="single"
update="tablaInventario tablaDetalle total totalDesc" dblClickSelect="false" paginatorPosition="bottom">
<p:column sortBy="producto.codigo" filterBy="producto.codigo">
<f:facet name="header">#{msg.codigo}</f:facet>
#{inv.producto.codProducto}
</p:column>
<p:column>
<f:facet name="header">Foto</f:facet>
<p:graphicImage id="photo" value="#{registrarPedidoController.streamedImageById}" cache="FALSE">
<f:param name="inv" value="#{inv.id}" />
</p:graphicImage>
</p:column>
</p:dataTable>
with
public StreamedContent getStreamedImageById() {
DefaultStreamedContent image = null;
String get = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("inv");
System.out.println("[Param]: " + get); // This prints null.
Long id = new Long(get);
List<Inventario> listInventarios = controladorRegistrarPedido.listInventarios();
for (Inventario i : listInventarios) {
if (i.getId().compareTo(id) == 0) {
byte[] foto = i.getProducto().getFoto();
image = new DefaultStreamedContent(new ByteArrayInputStream(foto), "image/png");
}
}
return image;
}
However I can't get it work. My param is passing "null" to my backing bean. How is this caused and how can I solve it?
I am using Netbeans 6.9.1, JSF 2.0 and Primefaces 2.2.RC2.
I went on using BalusC first solution, it worked fine but images aren't being rendered in the UI. Exceptions Glassfish is throwing up:
WARNING: StandardWrapperValve[Faces Servlet]: PWC1406: Servlet.service() for servlet Faces Servlet threw exception
java.lang.NullPointerException
at com.sun.faces.mgbean.BeanManager$ScopeManager$ViewScopeHandler.isInScope(BeanManager.java:552)
Well seems I get working thanks to BalusC. I've to used RequestScoped, SessionScoped or ApplicationScoped for managing the getStreamedImageId. However in the UI is always setting the default image (for the null cases) and not as expected the image that correspondes to each row. The new code is:
public StreamedContent streamedById(Long id) {
DefaultStreamedContent image = null;
System.out.println("[ID inventario]: " + id);
List<Inventario> listInventarios = controladorRegistrarPedido.listInventarios();
for (Inventario i : listInventarios) {
if (i.getId().equals(id)) {
byte[] foto = i.getProducto().getFoto();
if (foto != null) {
System.out.println(" [Foto]: " + foto);
image = new DefaultStreamedContent(new ByteArrayInputStream(foto), "image/png");
break;
}
}
}
if (image == null) {
System.out.println(" [Image null]");
byte[] foto = listInventarios.get(0).getProducto().getFoto();
image = new DefaultStreamedContent(new ByteArrayInputStream(foto), "image/png");
}
System.out.println(" [Foto Streamed]: " + image);
return image;
}
The <p:graphicImage> will call the getter method twice. First time is when the <img> element is to be rendered to HTML and thus requires an URL in the src attribute. If you just return new DefaultStreamedContent(), then it will autogenerate the right URL in src attribute. Second time is when the browser really requests the image, this is the moment when you should return the actual image.
So, the getter method should basically look like this:
public StreamedContent getStreamedImageById() {
FacesContext context = FacesContext.getCurrentInstance();
if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
// So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
return new DefaultStreamedContent();
}
else {
// So, browser is requesting the image. Get ID value from actual request param.
String id = context.getExternalContext().getRequestParameterMap().get("id");
Image image = service.find(Long.valueOf(id));
return new DefaultStreamedContent(new ByteArrayInputStream(image.getBytes()));
}
}
images are saved in the database as byte[] if we save them through hibernate. I uploaded the images with <p:fileUpload... tag then I save the image alongwith other data values using hibernate.
On second page, I'm displaying the whole table data (of course with images) using
<p:dataTable var="data" value="#{three.all}" ....
and dynamic Images using
<p:graphicImage alt="image" value="#{three.getImage(data)}" cache="false" >
<f:param id="image_id" name="image_id" value="#{data.number}" />
</p:graphicImage></p:dataTable>
Here "three" is the name of Backing Bean. In method getAll(), I'm retrieving data from table through hibernate and in the same method, I've created a HashMap<Integer, byte[]>. HashMap is an instance variable of the bean and The Bean is SessionScoped. I'm putting the images (which are in byte[] form) alongwith an integer image_id.
code:
for (int i=0; i<utlst.size(); i++ ){
images.put(utlst.get(i).getNumber(), utlst.get(i).getImage());}
//utlst is the object retrieved from database. number is user-id.
In the view getImage.xhtml, <p:graphicImage alt="image" value="#{three.getImage(data)}" cache="false" > it calls the method getImage(data /*I am passing current object of the list which is being iterated by*/ )
code of getImage:
public StreamedContent getImage(Util ut) throws IOException {
//Util is the pojo
String image_id = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("image_id");
System.out.println("image_id: " + image_id);
if (image_id == null) {
defaultImage=new DefaultStreamedContent(FacesContext.getCurrentInstance().getExternalContext().getResourceAsStream("/Capture.PNG"), "image/png");
return defaultImage;
}
image= new DefaultStreamedContent(new ByteArrayInputStream(images.get(Integer.valueOf(image_id))), "image/png");
return image;
}
just keep your dynamic Images with ids in A HashMap in the session then they will be correctly streamed.
Thanks & regards,
Zeeshan
In PrimeFaces 3.2 the bug is still present. I do the workaround with
<p:graphicImage value="#{company.charting}">
<f:param id="a" name="a" value="#{cc.attrs.a}" />
<f:param id="b" name="b" value="#{cc.attrs.b}" />
</p:graphicImage>
and
ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();
String a= externalContext.getRequestParameterMap().get("a");
String b= externalContext.getRequestParameterMap().get("b");
But even with this the bean is called 2 times. But in the second call variable a + b is filled ;-)
Damn bug
In a certain page of our JSF application, the user sees a table listing many objects, which we will call "jobs". Let's say each job has a priority, which is nothing but a number, and in this screen the user is able to edit the priorities of the jobs.
However, two jobs can't have the same priority number. For this reason, I'm finding it hard to build an appropriate UI to deal with setting the priorities.
We tried a simple editbox in the beginning, but it soon became clear that it sucked: if the user wanted to lower the priority of a job from 100 to 50, he would have to manually "make room for that job" by adding 1 to jobs 50 to 99.
Now I'm thinking about a table in which the user could drag & drop the rows to visually adjust priority, without ever having to fiddle with priority numbers (in fact never seeing them), but I can't find such component. Does anybody know of such component or have any better UI suggestion?
I don't think you will find a component that will change the priority numbering for you. Instead you should invoke a re-ordering routine that would update the priority numbers accordingly after changing the priority.
Regarding drag-and-drop, I'll suggest that you look at RichFaces or ICEFaces. RichFaces got some very neat functionality for implementing the sort of thing you are talking about. I'll recommend that you have a look at the RichFaces demo page and try out the drag-drop support components. The RichFaces component set also got an Ordering List (under Rich Selects), but it doesn't seem to allow for changing the ordering by entering a number, rather it is done using up and down buttons.
How about take your current idea and let the computer do the job of making room?
If the user enters 50, display a warning that that job exists, ask if they want the new job inserted before or after the current number 50 or if they want to cancel the operation entirely. If their choice is to insert the entry, you reorder the other items in code.
Check out the jQuery table drag'n'drop plugin. Then just tie the resulting javascript calls into your back-end using Ajax (eg. the a4j:jsFunction from Richfaces). Get the back-end Bean to handle the shuffling of the subsequent jobs.
This will definitely look and behave better than any out-of-the-box component that you'll currently find in a JSF library.
I thought I'd have a go and see if you could do this with the out-of-the box components and script.aculo.us. It is possible, though there would be a bit of work in getting it to look nice and provide a slick UI.
The demo view:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<jsp:directive.page language="java"
contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" />
<jsp:text>
<![CDATA[ <?xml version="1.0" encoding="ISO-8859-1" ?> ]]>
</jsp:text>
<jsp:text>
<![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ]]>
</jsp:text>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Sortable</title>
<script src="javascripts/prototype.js" type="text/javascript">/**/</script>
<script src="javascripts/scriptaculous.js" type="text/javascript">/**/</script>
</head>
<body>
<f:view>
<h:form>
<h:dataTable id="table1" binding="#{jobPageBean.table}"
value="#{jobBean.jobs}" var="row" border="1">
<h:column>
<f:facet name="header">
<h:outputText value="jobs" />
</f:facet>
<h:outputText value="#{row.text}" />
<h:inputHidden value="#{row.priority}">
<f:convertNumber integerOnly="true" />
</h:inputHidden>
</h:column>
</h:dataTable>
<h:commandButton id="ucb1" binding="#{jobPageBean.updateCommandButton}"
action="#{jobBean.updatePriorities}" value="Save New Priority Order"
disabled="true" />
</h:form>
<h:form>
<h:inputTextarea value="#{jobBean.newJob}" />
<h:commandButton action="#{jobBean.addNewJob}" value="Add Job" />
</h:form>
</f:view>
<script type="text/javascript"> /* <![CDATA[ */
Sortable.create('${jobPageBean.tableClientId}:tbody_element', {tag: 'tr', onChange: sortElements});
function sortElements() {
var table = document.getElementById('${jobPageBean.tableClientId}');
var inputs = table.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++) {
inputs[i].value = i;
}
var updateCommandButton = document.getElementById('${jobPageBean.updateCommandButtonClientId}');
updateCommandButton.disabled = false;
}
/* ]]> */
</script>
</body>
</html>
</jsp:root>
Beans:
public class JobPageBean {
// Declaration:
// <managed-bean>
// <managed-bean-name>jobPageBean</managed-bean-name>
// <managed-bean-class>job.JobPageBean</managed-bean-class>
// <managed-bean-scope>request</managed-bean-scope>
// </managed-bean>
private UIComponent dataTable;
private UIComponent updateCommandButton;
public void setTable(UIComponent dataTable) {
this.dataTable = dataTable;
}
public UIComponent getTable() {
return dataTable;
}
public String getTableClientId() {
FacesContext context = FacesContext
.getCurrentInstance();
return dataTable.getClientId(context);
}
public void setUpdateCommandButton(
UIComponent updateCommandButton) {
this.updateCommandButton = updateCommandButton;
}
public UIComponent getUpdateCommandButton() {
return updateCommandButton;
}
public String getUpdateCommandButtonClientId() {
FacesContext context = FacesContext
.getCurrentInstance();
return updateCommandButton.getClientId(context);
}
}
public class JobBean {
// Declaration:
// <managed-bean>
// <managed-bean-name>jobBean</managed-bean-name>
// <managed-bean-class>job.JobBean</managed-bean-class>
// <managed-bean-scope>session</managed-bean-scope>
// </managed-bean>
private List<Job> jobs;
private DataModel model;
private String newJob;
public DataModel getJobs() {
if (jobs == null) {
jobs = new ArrayList<Job>();
model = new ListDataModel(jobs);
}
return model;
}
public String updatePriorities() {
if (jobs != null) {
Collections.sort(jobs);
}
return null;
}
public String getNewJob() {
return newJob;
}
public void setNewJob(String newJob) {
this.newJob = newJob;
}
public String addNewJob() {
if (newJob == null || newJob.trim().length() == 0) {
return null;
}
Job job = new Job();
job.setText(newJob);
job.setPriority(jobs.size());
jobs.add(job);
newJob = null;
return null;
}
}
public class Job implements Comparable<Job> {
private String text;
private int priority;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public int getPriority() {
return priority;
}
public void setPriority(int priority) {
this.priority = priority;
}
public int compareTo(Job other) {
if (other.priority == priority) {
return 0;
}
return other.priority < priority ? 1 : -1;
}
}
You can reorder the rows by dragging them, but you need to submit the form to save the changes - you won't get good AJAX support without a 3rd party framework that adds it (at least, not until JSF 2.0)
I used MyFaces 1.2.3, the dataTable of which renders its tbody element with an id attribute ending in :tbody_element - I don't know if all implementations do this
I haven't bothered with too much in the way of input validation, or looked at using the keyboard for accessibility support, or all those other things required for a professional UI...