jsf dynamic component that restores state - jsf

I am trying to display HtmlInputText dynamically in a JSF page. However, I am getting
javax.faces.FacesException: Cannot add the same component twice: j_idt10:hitDyn
During the first request to the page the input text renders well. That exception happens during postback of the page, when I enter some text in the input component and press Enter.
In the .xhtml page, I have the following code:
<h:form>
<h:outputLabel value="Welcome!"></h:outputLabel>
<f:metadata>
<f:event type="preRenderView" listener="#{dynamicBacking.addDynComp}" />
</f:metadata>
<h:panelGroup id="dynOuter"></h:panelGroup>
</h:form>
In the backing bean, I have the following code:
#ManagedBean(name="dynamicBacking")
public class DynamicBacking {
public void addDynComp() {
Application app = FacesContext.getCurrentInstance().getApplication();
HtmlInputText hit = (HtmlInputText)app.createComponent(HtmlInputText.COMPONENT_TYPE);
hit.setId("hitDyn");
UIComponent parent = findComponent("dynOuter");
if( parent != null ) {
parent.getChildren().add(hit);
}
}
public UIComponent findComponent(final String id) {
FacesContext context = FacesContext.getCurrentInstance();
UIViewRoot root = context.getViewRoot();
final UIComponent[] found = new UIComponent[1];
root.visitTree(new FullVisitContext(context), new VisitCallback() {
#Override
public VisitResult visit(VisitContext context, UIComponent component) {
if(component.getId().equals(id)){
found[0] = component;
return VisitResult.COMPLETE;
}
return VisitResult.ACCEPT;
}
});
return found[0];
}
}
I guess that there is some problem with restoring the state of the dynamic component in a postback. Am I adding the dynamic component too late in the lifecycle of the JSF page? I know that in ASP.NET I could add a dynamic control during Page.Load phase. But I can't so far figure out how to achieve the same in JSF. Please, help!

The exception appears because the component is added in the tree on the initial page load. When performing a postback your listener gets called again and it tries to add another component with the same id and this causes the exception. A solution of the issue is to check if the request is NOT a postback when adding the component. The following code shows how to check for postback:
if (FacesContext.getCurrentInstance().isPostback()) {....

Related

JSF Primefaces outputLabel get value is null

I have button on my view. When I click it there is an action handler where I'm getting view root from faces context and then I get form. Then I loop through facets and children of the form and I look for OutputLabel instances. When I get it I'm trying to getValue from it. But it's always null, but on rendered page there is value. OutputLabel (p:outputLabel) is placed in composite component...
What do I wrong? Some ideas?
// EDIT
public void buttonHandler(){
FacesContext facesContext = FacesContext.getCurrentInstance();
UIForm form = facesContext.getViewRoot().findComponent("formId");
List<String> list = new ArrayList<>();
collectLabels(form, list);
}
public void collectLabels(UIComponent component, List<String> list){
Iterator<UIComponent> iterator = component.getFacetsAndChildren();
while(iterator.hasNext()){
UIComponent child = iterator.next();
collectLabels(child, list);
}
if(component instanceof OutputLabel){
list.add(((OutputLabel)component).getValue());
}
}
I'm not at work now. So I don't remember my composite component code now. But it contains <p:outputLabel for="#{cc.attr.id}" value="#{cc.attr.labelValue}" />

open a menuitem page in a new tab in primefaces

I have a xhtml page with a session scoped backing bean. Now i have to open this page in a new tab with right click open link in new tab.
When this page opens the model class of the backing bean must be cleared.
I have used the following code:
<p:menuitem value="Details" action="#{beanMB.clearDetailModel()}"/>
backing bean code:
public void clearDetailModel()
{
memberModel=null;
......
return "/pages/member/MemberDetails.xhtml?faces-redirect=true";
}
The above code clears the session scoped model but it does not open the page in new tab.
Is there any method to open the page in new tab with the above code or is there any alternate way for the above problem?.Any help would be appreciated.
Thank you.
You can try this:
You need to put the following code in MemberDetails.xhtml page.
<f:metadata>
<f:event type="preRenderView" listener="#{beanMB.clearDetailModel}"/>
</f:metadata>
and use url in menuitem to open your page.
<p:menuitem value="Details" url="/pages/member/MemberDetails.xhtml" />
you need to modify your backing bean code as follows:
public void clearDetailModel()
{
if (isNewRequest()){
memberModel=null;
......
}
}
public boolean isNewRequest() {
final FacesContext fc = FacesContext.getCurrentInstance();
final boolean getMethod = ((HttpServletRequest) fc.getExternalContext().getRequest()).getMethod().equals("GET");
final boolean ajaxRequest = fc.getPartialViewContext().isAjaxRequest();
final boolean validationFailed = fc.isValidationFailed();
return getMethod && !ajaxRequest && !validationFailed;
}
Here method isNewRequest() checks if the request is new or not if this is not checked your method clearDetailModel() will be called each time new request is made.

Setter of application scoped bean fails to set value

I'm making page using Primefaces with form with ability to ajax-upload image and preview it before submitting whole form.
To achieve this I made dialog outside main form:
<p:dialog id="imageDlg" header="Load Image" modal="true"
widgetVar="imageUploadWidget">
<h:form id="imageForm" enctype="multipart/form-data">
<p:fileUpload mode="advanced" auto="true" sizeLimit="9999999"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
fileUploadListener="#{pageBean.imageUploadHandler}">
</p:fileUpload>
</h:form>
</p:dialog>
Inside main form there is p:graphicImage component to display just uploaded image and button to show dialog. Page is backed by view scoped bean (PageBean), but to pass StreamedContent to p:graphicImage value bean should be session or application scoped (because method called multiply times). So I made second application scoped bean (ImageBean) only for this purpose.
<p:graphicImage value="#{imageBean.imageStreamedContent()}"/>
<p:commandButton value="Choose image" type="button"
onclick="imageUploadWidget.show();"/>
Code of ImageBean:
#ApplicationScoped
#ManagedBean
public class ImagesBean implements Serializable {
private byte[] image;
//getter & setter
public StreamedContent imageStreamedContent() {
FacesContext context = FacesContext.getCurrentInstance();
if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
return new DefaultStreamedContent();
} else {
return new DefaultStreamedContent(new ByteArrayInputStream(getImage()));
}
}
}
The next part is fileUploadListener. Idea is simple — set corresponding fields of PageBean (to save it later on form submit) of ImageBean (to show it after partial refresh) and update part of main form:
#ManagedBean
#ViewScoped
public class PageBean implements Serializable {
#ManagedProperty(value="#{imageBean}")
ImagesBean imagesBean;
...
public void imageUploadHandler(FileUploadEvent event) {
getImagesBean().setImage(event.getFile().getContents());
RequestContext.getCurrentInstance().update("form:tabPanel1");
}
Here comes strange thing. Inside setImage() method everything is OK - field is set, getter works fine. But then page refresh, imageBean.getImage() inside imageBean.imageStreamedContent() returns null.
More accurate — it returns old value, as if setter was never called or was called on another instance of bean. I checked it on another String field: initialized it in ImageBean constructor, in handler invoked setter with another value and refreshed part of main form. Same thing: old value from constructor.
I think, that I'm missing something about bean life cycle or scope specific. Or maybe there is less complicated way to implement this task?
There is a problem with using StreamedContent in Primefaces for p:graphicImage and p:media.
You can see Cagatay Civici 's comments on this topic in Primefaces forum here.
In my experience, when I had the slimier(more or less) problem This and This answers by BalusC helped me.
I used a saperate Servlet instead of Managedbean to stream the dynamic content to p:media (in mycase).
Here is my code for your reference(if you need any):
PreviewFileServlet.java
#WebServlet("/PreviewFile")
public class PreviewFileServlet extends HttpServlet {
public PreviewFileServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ServletContext context = request.getServletContext();
String path = request.getParameter("PREVIEW_FILE_PATH");
logger.info("Received pathe for Preview:"+path);
try{
if(null!=path){
java.io.File f = new java.io.File(path);
if(f.exists()){
FileInputStream fin = new FileInputStream(f);
byte b[] = new byte[(int)f.length()];
fin.read(b);
response.setContentLength(b.length);
response.setContentType(context.getMimeType(path));
response.getOutputStream().write(b);
response.getOutputStream().close();
logger.info("File sent successfully for Preview.");
}
else{
logger.warn("File sepecified by path:-"+path+"-:, NOT found");
}
}
}catch(Exception e){
}
}
/**
* #see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
Facelet Code
<p:media value="/PreviewFile?PREVIEW_FILE_PATH=#{fileManager.previewFilePath}" />
Hope this helps.
And there are lot of questions on this topic of StreamedContent in stackoverflow itself, go through them once.

JSF - Update model in invoke application phase

in my JSF application i need to update ui component during invoke application phase. Can it be done? Here's the code i've produced so far:
public void resetDataScroller(ActionEvent actionEvent) {
final FacesContext ctx = FacesContext.getCurrentInstance();
ctx.getViewRoot().invokeOnComponent(ctx, "paginator_and_table:scroll_1", new ContextCallback() {
public void invokeContextCallback(FacesContext facesContext, UIComponent uiComponent) {
HtmlDatascroller htmlDatascroller = (HtmlDatascroller) uiComponent;
htmlDatascroller.setPage(1);
htmlDatascroller.setValue(1);
}
});
}
This action listener looks up dataScroller component and sets page and value to 1. Unfortunatelly it doesn't seem to work at all, because rendered dataScroller has page different than 1.
Am i missing something?
I imagine that your resetDataScroller a method called by an actionListener attribute of a command button/link on your page?
I don't really understand what you are trying to do... Do you just need to write this code? :
public void resetDataScroller(ActionEvent evt) {
final FacesContext ctx = FacesContext.getCurrentInstance();
HtmlDatascroller htmlDatascroller = (HtmlDatascroller) ctx.getViewRoot().findComponent("paginator_and_table:scroll_1");
htmlDatascroller.setPage(1);
htmlDatascroller.setValue(1);
}
If you change these properties of the HtmlDatascroller during this phase, they will be used by JSF during the last phase (the Render Response phase) to generate your HTML code...

JSF: How to attach an actionListener to component created programatically?

I have to create some commandLinks dynamically and attach some action listener to it, So I've put <h:panelGrid> on the JSP page and used such code to add the commandLinks and to assign action listeners to:
public ManagedBean(){
List<UIComponenet> child = panelGrid.getChilderen();
list.clear();
List<MyClass> myList = getSomeList();
for (MyClass myObj : myList){
FacesContext ctx = FacesContext.getCurrentContext();
HtmlCommandLink cmdLink = (HtmlCommandLink) ctx.getApplication.createComponent(HtmlCommandLink.COMPONENT_TYPE);
cmdLink.setValue(myObj.getName());
cmdLink.setActionLinstner(new ActionListener(){
public void processAction(ActionEvent event) throws AbortProcessingException{
System.out.println (">>>>>>>>>>>>>>>>>I am HERE ");
}
});
child.add(cmdLink);
}
}
But unfortunately, when I press this commandLinks, an exception thrown! How can I add component event listeners at runtime?
(Note, the code above my contain syntax/compilation errors as I just wrote).
First, you need to manually assign ID to any dynamically created UINamingContainer, UIInput and UICommand components. Otherwise JSF can't locate them in the component tree based on the request parameters, because it wouldn't match the autogenerated ID's.
Thus, at least do:
HtmlCommandLink link = new HtmlCommandLink();
link.setId("linkId");
// ...
Second, you're supposed to create an ActionListener as MethodExpression as follows:
FacesContext context = FacesContext.getCurrentInstance();
MethodExpression methodExpression = context.getApplication().getExpressionFactory().createMethodExpression(
context.getELContext(), "#{bean.actionListener}", null, new Class[] { ActionEvent.class });
link.addActionListener(new MethodExpressionActionListener(methodExpression));
// ...
...and of course have the following method in the backing bean class behind #{bean}:
public void actionListener(ActionEvent event) {
// ...
}
All the above dynamic stuff basically does the same as the following raw JSF tag:
<h:commandLink id="linkId" actionListener="#{bean.actionListener}" />
I had the same problem.
Transient components do not work with actionListeners.
Do not call
FacesContext.getCurrentInstance().getViewRoot().setTransient(true);
or
component.setTransient(true);
As soon as I removed it, it was OK.

Resources