Develop Reference

Adding one or more outputText to existing page dynamically

I have a need to continuously update a page with new data produced by managedbeans. Managedbean creates a new List of values for every few minutes and UI must create a OutputText for each of the value in the newly created List by managedbean. Catch is, the UI should retain the outputTexts and add new one's for every request, it should not refresh/remove old outputTexts.
My code is like below - updates the same outputText fields for each ajax call, which I need to change like mentioned above.
<c:forEach var="data" items="#{myBean.dataList}">
<p:fieldset legend="#{data}" toggleable="true" toggleSpeed="500">
<h:panelGrid columns="2" cellpadding="5" border="0">
<p:scrollPanel style="height:300px">
<p:poll interval="2" listener="#{myBean.getDataList}" update="field1 field2"/>
<h:outputText value="#{data.field1}" id="field1"/>
<h:outputText value="#{data.field2}" id="field2"/>
</p:scrollPanel>
</h:panelGrid>
</p:fieldset>
</c:forEach>
so for each ajax call, there may be few data items produced by managedbeans and for each of those item there should be a new outputText field.

You can use datalist for <h:outputText value="#{data.field1}" id="field1"/>
Make a list and use them as outputtext, yes you need some css formatting because datalist used default css. sample code
<p:poll interval="3" listener="#{yourbean.yourmethod}" update="<updatecomponet>" />
<p:dataList value="#{yourbean.tempList}" var="s" id="updatecomponet">
<p:outputLabel value="#{s}"></p:outputLabel>
</p:dataList>
Note: You need to add value in list when poll call listener. it is working in my project, let me know for anything else. Hope this will help.

Maybe not the perfect solution, but you can use a DataTable with lazy loading, the poll component can update the datatable page and you don't need to update a huge amount of components.
Edit:
xhtml
<p:dataTable var="v"
value="#{myBean.getLazyList}"
scrollRows="1"
liveScroll="true"
rows="20"
scrollHeight="300"
lazy="true"
scrollable="true"
id="tsUpdates">
<p:column>
<h:outputText value="#{v.fields1}" />
</p:column>
</p:dataTable>
Bean
public class Bean {
private LazyDataModel<MyClass> lazyList;
#Named("myBean")
#ViewScoped
#PostConstruct
public void init() {
lazyList = new LazyMyClassModel(); //where myList is your data source
}
//getters and setters
}
LazyModel
public class LazyMyClassModel extends LazyDataModel<MyClass>{
private Integer findAllCount;
public LazyMyClassModel(){
}
#Override
public List<MyClass> load(int first, int pageSize, String sortField, SortOrder sortOrder,Map<String, String> filters){
List<MyClass> myList = //your live source of data
List<MyClass> data = new ArrayList<MyClass>();
data = getSubList(MyList, first, pageSize)
if (findAllCount == null) {
findAllCount = myList.size
this.setRowCount(findAllCount);
}
return data
}
public List<MyClass> getSubList(List<MyClass> list, int fromIndex, int toIndex) {
int size = list.size();
if (fromIndex >= size || toIndex <= 0 || fromIndex >= toIndex) {
return Collections.emptyList();
}
fromIndex = Math.max(0, fromIndex);
toIndex = Math.min(size, toIndex);
return list.subList(fromIndex, toIndex);
}
}

How to send/recieve data to/from bean function using JSF Richfaces AJAX?

I'm trying to get some code working in an XHTML/JSF/Spring application through which I send an ID to a bean function and expect a string in return. I haven't found an understandable tutorial on this nor any answered question here on SO.
XHTML:
<h:form>
<h:inputText id="inputId" value="#{npBean.idString}"/>
<a4j:commandButton value="get def" render="out">
<f:param value="#{npBean.idString}" name="id" />
<f:setPropertyActionListener target="#{npBean.definition}"/>
</a4j:commandButton>
<a4j:outputPanel id="out">
<h:outputText id="outputId" value="#{npBean.def}"
rendered="#{not empty npBean.def}"/>
</a4j:outputPanel>
</h:form>
Java:
public String getDefinition(int id)
{
def = this.getXService().getXData(id).getDefinition();
return def;
}
All values shown have their getters and setters in the bean.

What we basically do:
Map the value of the <h:inputText> component to a property (with getter/setter) in the managed-bean (which is called myBean)
By using the reRender attribute of the <a4j:commandButton> component, we point which component on the page to be re-rendered (refreshed) when the button is clicked.
When clicking on the button, the invokeService() method from the managedBean is executed and it updates the other property of the managedBean.
In the <h:panelGroup> below, we have several <h:outputText> components and with the rendered attribute we specify when a component has to be displayed on the page.
Exploring the managed-bean, the only thing that is required, are the accessors for the property, which holds the result from the service invoke.
Here's the *.xhtml sample:
<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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<a4j:form>
<h:panelGrid columns="3">
<h:outputText value="String value:" />
<h:inputText value="#{myBean.value}" />
<a4j:commandButton value="Click" reRender="out">
<a4j:actionListener listener="#{myBean.invokeService}" />
</a4j:comandButton>
</h:panelGrid>
</a4j:form>
<rich:spacer height="7"/>
<br />
<h:panelGroup id="out">
<h:outputText value="Service returned: " rendered="#{not empty myBean.result}" />
<h:outputText value="#{myBean.result}" />
</h:panelGroup>
</ui:composition>
Managed-bean:
#ManagedBean(name = "myBean")
#SessionScoped //for example
public class MyBean {
private String value;
private String result;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
public String getResult() {
return result;
}
public void invokeService(ActionEvent actionEvent) {
this.result = "Hello, " + value + "!";
}
}
As #Luiggi mentioned, the accessor methods MUST meet the following conventions (if we assume you have a private <some-type> property; in the managed-bean.)
public <some-type> getProperty {
return property;
}
public void setProperty(<some-type> property) {
this.property = property:
}
In order to learn how the RichFaces components work, combined with good code examples, I suggest you open this address and play around with the components.

Unable to load the image dynamically in jsf

I am working on some project, and i need to implement the image upload and view the image functionality,
but i am facing some problem here.
I am unable to display the image, can you please help me.
I am using p:fileload from primefaces, And i am storing all the images in bin folder of jboss server(E:\jboss-as-7.1.1.Final\bin\BrandImages\logo.gif).
And storing that path in MYSQL DB, till now it is working fine. But when i am trying to display the image by calling getBrandDetails(), it is unable to display. Can you please tell me how can i solve this problem???
In web.xml
In web.xml i added filter and mime...
Xhtml
<h:form enctype="multipart/form-data">
<h:panelGrid id="brandDetails_Panel" columns="2" columnClasses="plabel, pvalue" styleClass="ui-panelgrid">
<h:outputLabel for="brand_img_url" value="Brand Image" />
<p:fileUpload id="brand_img_url" fileUploadListener="#{brandBean.handleFileUpload}"
mode="advanced" sizeLimit="100000" allowTypes="/(\.\/)(gif|jpe?g|png)$/"/>
<h:outputLabel value="" />
<p:graphicImage value="#{brandBean.brand_image}" alt="The image could not be found."/>
</h:panelGrid>
<f:facet name="footer" >
<center>
<p:commandButton id="add" value="Add" disabled="#{brandBean.disable_addBut}" actionListener="#{brandBean.addBrandDetails}"/>
<p:commandButton id="view" value="View" disabled="#{brandBean.disable_viewBut}" action="#{brandBean.getBrandDetails}"/>
</center>
</f:facet>
</h:form>
In addBrandDetails(), handleFileUpload() as
public void handleFileUpload(FileUploadEvent event)
{
String t1=".\\BrandImages\\"+event.getFile().getFileName();
System.out.println("The final path is :"+t1);
try{
File f =new File(t1);
FileOutputStream fileOutputStream = new FileOutputStream(f);
byte[] buffer = new byte[1024];
int bulk;
InputStream inputStream = event.getFile().getInputstream();
while (true) {
bulk = inputStream.read(buffer);
if (bulk < 0) {
break;
}
fileOutputStream.write(buffer, 0, bulk);
fileOutputStream.flush();
}
fileOutputStream.close();
inputStream.close();
}catch(Exception e)
{
System.out.println("Exception :"+e);
}
this.brand_image=t1;
}
In getBrandDetails(), i am setting as "this.setBrand_image(b.getBrand_img_url());"
When i am pringting it is printing path E:\jboss-as-7.1.1.Final\bin\BrandImages\logo.gif
but it is unable to display the image.
Please help me out....

First of all, your bean must have the scope as session. A good way is making just a bean for getting requested images.
Second, your varible "brand_image" need to be a object of DefaultStreamedContent. Because you are using primefaces.
brand_image = new DefaultStreamedContent(input, "image/jpeg");

Primefaces p:menuitem pass an attributes to actionListener

I would like to pass some attributes to actionListener method.
My implementation is like...
<c:forEach items="${customerProductsBean.userProductList}" var="userProduct">
<p:panel toggleable="#{true}" toggleSpeed="500" header="#{userProduct.product}" >
// Some Code... Data Table and Tree Table
<f:facet name="options">
<p:menu>
<p:menuitem value="ProductSetup" actionListener="#{customerProductsBean.getProductSetupData}" >
<f:attribute name="userIdParam" value="#{data.userId}"/>
<f:attribute name="geCustomerIdParam" value="#{data.geCustomerId}"/>
<f:attribute name="acpProductParam" value="#{data.acpProduct}"/>
</p:menuitem>
<p:menuitem value="Remove Product" url="#" onclick=""/>
</p:menu>
</f:facet>
</p:panel>
</c:forEach>
And in Java Action Listener
public void getProductSetupData(ActionEvent actionEvent) {
try {
String userIdParam =
(String)actionEvent.getComponent().getAttributes().get("userIdParam");
String geCustomerIdParam =
(String)actionEvent.getComponent().getAttributes().get("geCustomerIdParam");
String acpProductParam =
(String)actionEvent.getComponent().getAttributes().get("acpProductParam");
} catch(Exception e) {
// Exception
}
}
I tried it using <f:attribute> and <f:param> but was not able to get the value in Java.
In java It shows null for each value.

This won't work if #{data} refers to the iterating variable of an iterating JSF component such as <h:dataTable var>. The <f:attribute> is set during JSF view build time, not during JSF view render time. However, the <h:dataTable var> is not available during view build time, it is only available during view render time.
If your environment supports EL 2.2, do instead
<p:menuitem ... actionListener="#{customerProductsBean.getProductSetupData(data)}" />
with
public void getProductSetupData(Data data) {
// ...
}
Or if your environment doesn't, do instead
public void getProductSetupData(ActionEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
Data data = context.getApplication().evaluateExpressionGet(context, "#{data}", Data.class);
// ...
}

Doubts about how to combine CDI beans: SessionScoped and RequestScoped

My goal is to present a jsf page that has Create, Retrieve and Update features.
I decided to create different CDI beans and different composite components for each of this operations and then put it all together in the page.
So far so good, but i just finished and i discovered a really confusing bug, and i don't know how to fix it:
The CDI bean tool that does the CREATE operation is a #RequestScoped bean, so the input fields clean them selves after the request.(See the image bellow)
I have no problem at all with it(Just that warning i cant get rid off), it works fine.
The next gadget i created is a data table that can also edit the data. To do it i needed to use a #SessionScopped CDI bean.(See image below)
Here comes the problem:
When the page is rendered the #SessionScoped bean caches the data in the session, but when new data is inserted, using the #RequestScoped bean,the data goes to the data base but the datatable does not display the new entered values, because are not in the session.
So what should i do?
Here i will show you the two beans:
THE CREATE BEAN
#Named("subjectControllerCreate")
#RequestScoped
public class SubjectControllerCreate implements Serializable {
private Subject currentSubject;
#EJB
private SubjectFacade ejbFacade;
//INITIALIZATION
public SubjectControllerCreate() {
currentSubject = new Subject();
}
//CREATE
public String create() {
try {
currentSubject.setCreationDate(new Date());
getSubjectFacade().create(currentSubject);//Adds the current subject to the database!
JsfUtil.addSuccessMessage(ResourceBundle.getBundle("/Bundle").getString("SubjectCreated"));
return "";//Can perform a redirect here if we want
//}
//return null;
} catch (Exception e) {
JsfUtil.addErrorMessage(e, ResourceBundle.getBundle("/Bundle").getString("PersistenceErrorOccured"));
return null;
}
}
THE UPDATE BEAN
#Named("subjectControllerUpdate")
#SessionScoped
public class SubjectControllerUpdate implements Serializable {
//Using DataModel<Subject> instead of List<Subject> is necessary in order to be able to get the current row.
private DataModel<Subject> subjects;
#EJB
private SubjectFacade ejbFacade;
//INITIALIZATION
#PostConstruct
public void init() {
subjects = new ListDataModel<Subject>(getSubjectFacade().findAll());
}
//RETRIEVE
public DataModel<Subject> retrieve() {
return subjects;
}
//UPDATE
public void update() {
getSubjectFacade().edit(subjects.getRowData());
}
//HELP METHODS
//RETURN THE FACADE FOR DATA MANIPULATION(Best practice)
private SubjectFacade getSubjectFacade() {
return ejbFacade;
}
//GETTERS AND SETTERS
public DataModel<Subject> getSubjects() {
return subjects;
}
public void setSubjects(DataModel<Subject> subjects) {
this.subjects = subjects;
}
}
Is it maybe possible to make the data table send some ajax request when detects that the Create dialog closes, to get the rest of the newly entered data?
If yes how could i do it?
This is the markup for my datatable:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:form>
<p:dataTable id="allSubjects" var="subject" value="#{subjectControllerUpdate.subjects}" paginator="true" rows="7" >
<p:ajax event="rowEdit" listener="#{subjectControllerUpdate.update()}"/>
<p:column headerText="Name" sortBy="#{subject.name}" style="width:200px" >
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{subject.name}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{subject.name}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{subject.description}" headerText="Description">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{subject.description}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{subject.description}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{subject.credits}" headerText="Credits" style="width:50px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{subject.credits}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{subject.credits}" style="width:100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Options" style="width:50px">
<p:rowEditor />
</p:column>
</p:dataTable>
</h:form>
</html>
Ill appreciate your help

Can't you just inject the #SessionScoped bean into the #RequestScoped bean and when create is clicked, call a method refresh in the #SessionScoped bean?