I am new to JDeveloper and ADF. I am trying to make a popup appear on my webpage when I am using JDeveloper to make an ADF application. Here is my code:
<?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">
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="untitled1.jsf" id="d1">
<af:popup childCreation="deferred" autoCancel="disabled" id="somePopup">
<af:outputText value="Hello there" id="ot1"/>
</af:popup>
<af:commandButton id="button" text="Click me">
<af:showPopupBehavior popupId="somePopup" triggerType="action" />
</af:commandButton>
</af:document>
</f:view>
I believe I have done everything correctly in order for this popup to show, but when I click the button, nothing appears. I was thinking I might need a panel in order to show the text, but I don't think that is necessary. Do you guys have an idea of what's going on or how I should make a popup? My JDeveloper Version is: 11.1.2.2.0. I know this is a simple task, but I am stuck on getting it to show and would appreciate some help. Thanks guys.
It is a browser issue. The code is correct, I just can't find a way to get my browser to actually show it.
Add partialSubmit="true" attribute to your commandButton.
I think you are missing the af:form tag in your page.
This works for me in 12.1.3:
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="untitled3.jsf" id="d1">
<af:form id="f1">
<af:popup childCreation="deferred" autoCancel="disabled" id="somePopup">
<af:outputText value="Hello there" id="ot1"/>
</af:popup>
<af:commandButton id="button" text="Click me">
<af:showPopupBehavior popupId="somePopup" triggerType="action" />
</af:commandButton>
</af:form>
</af:document>
</f:view>
First create the binding for the popup.In Command Button add Action Listener.Then in th action event method Write the below code..
RichPopup.popuphints hints = new RichPopup.popuphints();//hints is the object name
popupbind.show(hints); //popupbind is the property of popup
Related
I've been facing some problems using JSF with AJAX to render a table without reloading the whole page every time I submit a form.
When I first run the server, my database is empty, so the page is supposed to show only a form to add books. When user submits the form, a fieldset whith all books is supposed to be rendered. I don't want this fieldset to be shown when database is empty.
This is a simple version of my code (it is just a small form and a table to be refreshed using AJAX):
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:p="http://primefaces.org/ui">
<h:head />
<h:body>
<h:graphicImage library="img" name="caelum-logo.png"/>
<h:form>
<p>Book Title:</p>
<h:inputText id="title" value="#{livroBean.livro.titulo}" />
<h:commandButton value="Add book" action="#{livroBean.addFirstBook}">
<f:ajax execute="#form" render="title :addedBooksTable" />
</h:commandButton>
</h:form>
<div id="addedBooksTable">
<p:fieldset rendered="#{livroBean.numberOfBooks > 0}">
<h:dataTable value="#{livroBean.allBooks}" var="book">
<h:column>
<h:outputText value="#{book.titulo}" />
</h:column>
</h:dataTable>
</p:fieldset>
</div>
</h:body>
</html>
And i wanna focus on this part:
<h:commandButton value="Add book" action="#{livroBean.addFirstBook}">
<f:ajax execute="#form" render="title :addedBooksTable" />
</h:commandButton>
The fieldset and the table inside it are supposed to be hidden when there's no book added to the database, that's why i used <p:fieldset rendered="#{livroBean.numberOfBooks > 0}">. But I want it to be rendered after I click the commandButton, even if there's nothing at the inputText.
Here's what's happening when I test the code:
if I test the code just as it is with an empty database, the inputText is refreshed (it "erases" what were typed before the submisssion) when I click on the commandButton, but the fieldset is not. I know that the fieldset has a rendered="#{livroBean.numberOfBooks > 0}" and the inputText does not, but the method getNumberOfBooks is called everytime i click the commandButton, that's why I don't get it...
if I change the f:ajax tag so it ends up like this <f:ajax execute="#form" onevent="click" render="title :addedBooksTable" />, it solves the problem, but i can realize the screen flashing for a while when I click the commandButton. As far as I know, one of the uses of AJAX is that we don't want the screen flashing when a request is made.
Why is the fieldset rendered only when I use onevent="click"? Should I consider the flashing something normal? Is there a more elegant solution for that?
Thanks!
You can't ajax-update a plain HTML element. You can only ajax-update a JSF component. Simple reason is that the target must be resolveable by UIViewRoot#findComponent(), so that JSF can find it in the component tree and render the updated HTML into the Ajax response.
Replace
<div id="addedBooksTable">
by
<h:panelGroup layout="block" id="addedBooksTable">
Normally, this should have thrown an exception as described in How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar", but they removed this check in Mojarra 2.2.5 in order to support ajax-updating a specific iteration of <ui:repeat> and <h:dataTable> (this missing check will be fixed later on as that's indeed unhelpful to starters like you).
As to why adding onevent="click" appear to work, that's because it caused a JavaScript error which in turn caused the whole JavaScript/Ajax thing to break down, which in turn caused that the command button fall backs to default synchronous behavior with a full page reload (as if you aren't using <f:ajax> at all). You likely meant to use event="click" instead. The onevent attribute serves a different purpose. See also a.o. Proccess onclick function after ajax call <f:ajax>.
I want to share my experience using primefaces, f:viewParam and p:commandButton, and ask a few questions.Take a look at this page:
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<h:head></h:head>
<h:body>
<f:metadata>
<f:viewParam required="true" name="id_file" value="#{bean.idFile}" />
</f:metadata>
<h:form id="tableform" prependId="false">
<p:commandButton actionListener="#{bean.myMethod())}" icon="ui-icon-search" title="View" />
</h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
</h:body>
</html>
The backing bean have a "myMethod()" method that does nothing. When you enter the page it expects the "id_file" parameter and put it in the idFile property of the backing bean. Then you click the button and the myMethod is called. Then you click again and you get an obscure validation error and myMethod is never called:
j_idt1: Validation Error: Value is required.j_idt1: Validation Error: Value is required.
First of all, remember that without p:messages you can't see this message, you have to dig the XML that primefaces send on ajax calls. Secondly, after 4 hours of debugging I've tried to change the f:viewParam like this:
<f:viewParam name="id_file" value="#{bean.idFile}" />
without "required": magically everything start working, I can click 1,2,3,etc and myMethod is called every time. So, the problem is that the ajax submit validate the parameter specified with f:viewParam, it sounds silly to me, but ok, I can live with it.
My questions are:
why this validation error doesn't appear the first time button is clicked? If you look at the ajax POSTs they are identical
it is supposed to be ok to validate the view parameters (that, in my idea, belongs to the view) on a partial ajax call?
is there a way to tell to primefaces not to validate on particular ajax request (process="#this" does not resolve)?
Thank you, I hope that my experience will allow you to avoid spending hours doing debugging!
The viewParam is a UIComponent. That means it's semantically no different from a <h:commandButton/> or a <h:inputText/> and it's liable to go thru every prescribed JSF request processing lifecycle phase, up to and including validation and conversion. In fact, the tag itself causes any given view to go into the full processing of any given page, just by being there
The <p:commandButton/> is going to do a postback, meaning, it's going to be re-requesting the same view, using a POST. So to solve your current problem, you need to base your required condition on that fact:
<f:viewParam required="#{!facesContext.postback}" name="id_file" value="{bean.idFile}"/>
What you get from the new condition is that the parameter will be required only on the first request. Subsequent postbacks will not trigger the condition. Just be sure you don't have any logic (maybe in a #PostConstruct that's built around that expectation
I have a Java Web Application (WAR) in Weblogic 10.3.0:
JSF 2.0
Primefaces 3.5
jboss-el-2.0.0.GA.jar (If i use el-api-2.2.jar and el-impl-2.2.jar is the same)
validation-api-1.1.0.Final.jar
Eclipselink (JPA 2.1)
hibernate-validator-4.2.0.Final.jar
JSTL 1.1
Java EE 5
I have a <h:form/> inside a <p:dialog/> to edit/create entities and persist them to the Database.
My problem is the <p:commandButton/> doesn't invoke the actionListener when the values are set directly to the entity's properties. For example, here is my code:
<h:form>
<p:outputLabel value="Name:" for="name" />
<p:inputText id="name" value="#{Servidores.selectedEntity.name}" title="Name" />
<p:outputLabel value="IP:" for="ip" />
<p:inputText id="ip" value="#{Servidores.selectedEntity.ip}" title="IP" />
<p:commandButton value="Submit" oncomplete="appEditingDialog.hide();" actionListener="#{Servers.processEntityAndRefresh()}"/>
</h:form>
But if i set values to a simple String variable declared in the bean and not in the entity it works. Like this:
<p:inputText id="name" value="#{Servidores.stringInMyBean}" title="Name" />
I thought it was a validation problem but if i put this form outside the Dialog it works.
What could be the problem and the solution here ? I've seen people putting the properties directly in the #ManagedBean but, wow, I can't mix the Model and the Controller.
Thanks.
This is how i solve this and other problems i had:
In my Template.xhtml i made sure the declarations are like this:
<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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
because instead of "java.sun.com" i had something with "xmlns.com" (something like that, i dont know why). My problems with the EL were solved but a new problem came out: Everything was big: font, components, etc.
I had to fix everything with CSS but i didn't like that way, it was unnaceptable! Plus, Dialogs were showing in the bottom of the page. So after trying some things, i fixed it making the Template Clients using HTML instead of just <ui:composition/>. So i could delete all the "forced changes" i made to my CSS files (I really don't know why that behavior with just <ui:composition/> ) .
But wait! , in a part of a page the problems came back! Calling methods/properties in the ManagedBean from a Datatable wasn't working properly again and it was because of the Primefaces <p:Dashboard/> tag called "Disabled" which i set it to true to not let the user move the panels. My datatable was inside of a Panel which was inside of a Dashboard, after setting it to false everything was working properly (I guess it is a primefaces bug).
Then, i just move from Primefaces 3.5 to 4.0 and used JSTL 1.2 instead of 1.1
But yeah, the main problem was because of the wrong links when declaring xmlns, xmlns:h, xmlns:f, etc.
I don't know if I'm doing something wrong or if it might be a bug or something.
My setup contains IntelliJ IDEA 12, JBoss AS 7.2.0.Final, Richfaces 4.3.4 within a war-File within an ear-Project (no Maven).
I have this index-page:
<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">
<rich:notifyMessage stayTime="3500" showShadow="true" showCloseButton="true" />
<f:view>
<h:head> <title> title </title> </h:head>
<h:body>
<!-- some more divs for page-design, but commented out at the moment -->
<div id="page">
<div id="index_workspace" style="width:1000px;margin:auto;">
<h:panelGrid columns="2" id="index_workspace_table">
<rich:panel id="index_workspace_navi_left" style="width:180px;min-height:600px;max-height:600px;">
<ui:include src="general/navi_left.xhtml"/>
</rich:panel>
<rich:panel id="index_workspace_content" style="width:550px; min-height:600px; max-height:600px;" rendered="#{not empty naviBean.content}">
<a4j:outputPanel id="index_workspace_content_ajax" ajaxRendered="true">
<ui:include src="#{naviBean.content}" id="current_site" />
</a4j:outputPanel>
</rich:panel>
</h:panelGrid>
</div>
<!-- some more divs for page-design, but commented out at the moment -->
</div>
</h:body>
</f:view>
</ui:composition>
Within the section I load the pages with forms and all the other cool stuff RF brings. But I have a rendering problem with this part of a loaded page:
<rich:select id="someID_1" rendered="true" immediate="true" required="true" enableManualInput="true" defaultLabel="someLabel">
<a4j:ajax render="true">
<f:selectItems id="selectlist" value="#{BackingBean.SelectableItem-ListGetter}"/>
</a4j:ajax>
</rich:select>
And here my problem is located:
This drop-down list only gets rendered on a page reload, e.g. F5 or CTRL-R action.
Also I could observe that if I set this element on some Kind of a "start page" (initially loaded on the index.xhtml) it gets rendered very well. In this case every other page containing this kind of element renders it correctly also.
I tried
updating JSF from 2.1 to 2.2.1 - that only brought up more problems - so I rolled it back.
The "standard" h:selectOneMenu behaves the same.
additional options within rich:select (e.g.: rendered, immediate, required, ...)
different ajax commands within the navigation (server, client, ajax, on different levels)
googling around since days - found no useable hint
I would appreciate every hint that guides me into the right direction as I feel confident, that I make some mistake I can't figure out...
Additionally my navigation looks like this (in another div on the index.xhtml):
<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">
<h:form id="navi_left">
<rich:panel>
<rich:panelMenu itemMode="ajax" groupMode="ajax" itemChangeListener="#{naviBean.updateContent}" >
<rich:panelMenuGroup itemLeftIcon="disc" label="Erfassung" name="#{naviBean.content}">
<rich:panelMenuItem label="someLabel_navi" name="path/to/page-not-getting-rendered-well.xhtml"/>
</rich:panelMenuGroup>
</rich:panel>
</h:form>
</ui:component>
Hope this helps helping me.
<a4j:ajax render="true">
<f:selectItems id="selectlist" value="#{BackingBean.SelectableItem-ListGetter}"/>
</a4j:ajax>
The above construct is not legal(as you've already seen yourself). The render attribute in there is not used for what you'd expect: to conditionally render the component; Rather, it's supposed to contain a list of on-page components to update via ajax.
To achieve the output I presume you're trying to get, you should use the following instead:
<a4j:region>
<rich:select id="someID_1" rendered="true" immediate="true" required="true" enableManualInput="true" defaultLabel="someLabel">
<f:selectItems id="selectlist" value="#{BackingBean.SelectableItem-ListGetter}"/>
</rich:select>
<a4j:region>
I think I found the problem. As my navigation and my desired site with the not correctly rendered component lie nested in <div>s on the third participating site - my index.xhtml - it seems to be impossible to let a jsf-component be rendered without having all (i.e. the navigation and the desired) sites processed on the server. So the following code-snippets work for my situation:
index.xhtml snippet:
<rich:panel id="index_workspace_content" style="width:550px; min-height:600px; max-height:600px;" rendered="#{not empty naviBean.content}">
<ui:include src="#{naviBean.content}" id="current_site" />
</rich:panel>
navi_left.xhtml snippet:
<h:form id="navi_left">
<rich:panel>
<rich:panelMenu itemMode="server" groupMode="client" itemChangeListener="#{naviBean.updateContent}">
<rich:panelMenuGroup label="someLabel" name="#{naviBean.content}">
<rich:panelMenuItem label="anotherLabel" name="path/to/page-being-rendered-correctly.xhtml"/>
</rich:panelMenuGroup>
...
</h:form>
component snippet in the desired.xhtml:
<rich:select id="someId" rendered="true" immediate="true" required="true" enableManualInput="true">
<f:selectItems var="#{backingBean.selectableItemList}" id="selectlist" value="#{backingBean.predefinedItem}"/>
</rich:select>
So what I have changed is the itemMode to "server", both of the others (ajax and client) will not work!
Setting the groupMode to "client" does not affect the renderprocess of desired.xhtml as it only describes the way the rich:panelMenu behaves.
What makes me feel a bit confused is, that the URL now gets extended with a "/index.xhtml". Before the change it was always just the url:port/context (e.g. localhost:8080/app ).
So it works now, but maybe it's not really what I wanted. I'll observe and report future facts concerning this itemMode-option here.
Yesterday I posted a question about having to press a button twice to get it to work. I received good help, which is the hallmark of stackoverflow, but the problem still exists. I cut down my code to the bare minimum and the problem still exists. I read closely a BalusC suggestion, hoping that I would find a form inside a form. There is certainly nothing I can see so I will post my code in the hopes that additional pairs of eyes will see something.
I have a template which I call from welcome (the login part). This goes to userInfo which has a command button. This is the command button which I mysteriously have to press twice. On the second push the command button will take me to userPhoto. Everything is trimmed down to the minimum so that I can post it.
master.xthml:
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Master template</title>
</h:head>
<h:body>
<p:layout fullPage="true" >
<p:layoutUnit position="north" size="254">
Top
</p:layoutUnit>
<p:layoutUnit position="east" size="50" resizable="true">
Hello
</p:layoutUnit>
<p:layoutUnit position="south" size="30">
south
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="AreaOne">Default text</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
welcome1.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<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:p="http://primefaces.org/ui">
<ui:composition template="master.xhtml">
<ui:define name="AreaOne">
<h:form id="form1">
<p:commandButton type="submit" value="Login" action="userInfo" />
</h:form>
<p:messages />
</ui:define>
</ui:composition>
</html>
And last but not least userInfo.xhtml with the button which needs to be pressed twice:
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<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:p="http://primefaces.org/ui">
<ui:composition template="master.xhtml">
<ui:define name="AreaOne">
<h:form id="formP">
<p:commandButton type="submit" value="photos" action="userPhoto" />
</h:form>
<p:messages />
</ui:define>
</ui:composition>
</html>
I don't see any form nested inside any other form, but SOMETHING is wrong and I can't figure out what. Maybe BalusC is correct that it has something to do with ajax, but I don't see that either.
Thanks for all the help.
Ilan
I added a button on the userPhoto page which goes back to the userInfo page. The Login button is the only one which works one the first press. When I use the command buttons to switch back and forth between userInfo and userPhoto, it always takes 2 pushes. I will show the center of userPhoto
<ui:composition template="master.xhtml">
<ui:define name="AreaOne">
<h:form id="form3">
<p:commandButton type="submit" value="home page" action="userInfo" />
</h:form>
<p:messages />
</ui:define>
</ui:composition>
You've there a very specific problem. You're fully navigating by ajax instead of by a normal synchronous request and the whole view is replaced with the new view. The forms in the new view does not have the view state anymore which is indeed related to JSF issue 790. It's also not possible to reference the forms in the update of the <p:commandButton> as the forms does not exist in the same view.
After all, it's not recommendable to fully navigate by ajax. It makes your page non-bookmarkable and non-searchbotindexable. I suggest to replace all forms of
<p:commandButton ... action="otherViewId" />
by
<p:button ... outcome="otherViewId" />
This will navigate by normal synchronous requests and will create new views wherein all forms will have their view state. Note that the <p:button> doesn't require a <h:form>, you can omit it if necessary.
Unrelated to the concrete problem, I also suggest to put master.xhtml in the /WEB-INF folder so that the endusers can never request it by entering/guessing its URL in browser address bar. See also Which XHTML files do I need to put in /WEB-INF and which not?