The calendar component gets hidden behind the accordion item, no matter what z-index value you assign to the component, be it for accordion/calendar it simply won't budge, can some one help me on this. I'm using RichFaces 4.2.0.
Sample code:
<h:form>
<rich:accordion style="z-index:10;" id="acrdion" switchType="client">
<rich:accordionItem id="acdItm" header="Overview:">
<rich:calendar value="#{bean.date}" datePattern="dd/M/yy"
id="Cal1" style="z-index:100;"/>
</rich:accordionItem>
</rich:accordion>
<h:form>
You can workaround this issue by overriding the rf-ac-itm-cnt class as follows:
<h:outputStylesheet>
.rf-ac-itm-cnt {
overflow: visible;
}
</h:outputStylesheet>
Related
In the documentation of primefaces, it is said that "Note that notificationBar has a default built-in close icon to hide the content.". But so far I could not get it displayed ? Is there a special property or facet required to show the close icon ?
pf version I am using is 6.2
If you see the notification.js resource inside the Primefaces library, you can see that they took into account to give to the close icon the "hide functionality":
primefaces-6_2\src\main\resources\META-INF\resources\primefaces\notificationbar\notificationbar.js =>
/**
* PrimeFaces NotificationBar Widget
*/
PrimeFaces.widget.NotificationBar = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
var _self = this;
//relocate
this.jq.css(this.cfg.position, '0').appendTo($('body'));
//display initially
if(this.cfg.autoDisplay) {
$(this.jq).css('display','block')
}
//bind events
this.jq.children('.ui-notificationbar-close').click(function() {
_self.hide();
});
},
So, considering the previous code, if a children component has the ui-notificationbar-close class and you click on it, the NotificationBar component will be hided calling to hide function automatically (without having to use the PF(widgetVar).hide().
I have tested with the following code and in effect, the notificationbar disappears after clicking on the close icon:
<p:notificationBar id="notificationBar" position="top" effect="slide" styleClass="top" widgetVar="myNotificationBarWV" autoDisplay="false">
<i class="ui-icon ui-icon-closethick ui-notificationbar-close"></i>
<h:outputText value="You Rock!" style="font-size:1.5 rem;"/>
</p:notificationBar>
How to trigger primefaces <p:blockUI> using boolean in backing bean? In this showcase, it requires a commandButton to trigger the the blockUI. What I want is block some part of the page base on a boolean in the backing bean. Is this possible? I tried setting the rendered attribute in the <p:blockUI> tag but it still won't work.
Here is my code:
<p:blockUI block="grid" rendered="#{bean.trueValue}"></p:blockUI>
<p:panelGrid id="grid">
-- content
</p:panelGrid>
One way is to call hide() and show() method of BlockUI from Managed Bean.
You can do that by using RequestContext:
RequestContext.getCurrentInstance().execute("widgetVar.show()");
Another is you can pass the variable to JavaScript function and then let the Javascript function take care of that for you.
onClick="func(#{elvariable})"
<script type="text/javascript">
function func(value)
{
if(value==something){
widgetVar.show();
}else{
widgetVar.hide();
}
}
Let's say I have a simple method that, like this:
public String test()
{
return "hello";
}
Now let's say I have the following PrimeFace component:
<p:fieldset styleClass="containers" rendered="#{controller.test()}">
<h2>Testing</h2>
<p:outputLabel for="test" value="Test" />
<p:inputText id="test" />
</p:fieldset>
The method above returns "hello". I would like to dynamically show and hide that fieldSet by comparing the returned value of that method to a field of one of my beans. For instance, on the rendered parameter, I would like to do something like: controller.test() != "some variable" which would return true or false. Am I allow to do that? If not, what is the way of doing it?
Basically the goal is to dynamically show and hide some container by comparing the returned value of a method with a bean property.
Look Like you misunderstood rendered
The rendered Attribute
A component tag uses a Boolean EL expression, along with the rendered
attribute, to determine whether or not the component will be rendered.
If you will check above definition you will know what exactly is the use of this attribute.
More you can see below
The rendered attribute which uses Boolean EL expression indicates
whether a component is currently visible or not. The property is
useful when you want to hide components for specific users or based on
condition. The default value of rendered attribute is true.
<h:outputText value=”mapping” rendered=”Boolean EL expression” />
For example, the commandLink component in the following section of a page is not rendered if the cart contains no items:
<h:commandLink id="check"
...
rendered="#{cart.numberOfItems > 0}">
<h:outputText
value="#{bundle.CartCheck}"/>
</h:commandLink>
With your concrete problem you can do like this
Make a String variable call value
Now create get/set methods for above variable
Now in your test method you can add
public void test(){
value="hello";
}
Bur remember you have call test() method of page load
Now in your Xhtml or Jsf or Jsp page
rendered="#{controller.value != 'hello'}"
Or better way create a Boolean variable and do all the magic of hide and show the component
Let say that I want to create a variable set of <rich:tab> elements within a <rich:tabPanel> component. So I tried to do that way:
<rich:tabPanel switchType="client" ...>
<ui:repeat value="#{myBean.myTabs}" var="tab">
<rich:tab name="#{tab.name}" label="#{tab.label}"/>
</ui:repeat>
</rich:tabPanel>
But it didn't work, as no tab is rendered. I also got the following message in the logs:
j_id174: tab panel has no enabled or rendered tabs!
This problem seems to be encountered by others people, for example here.
So as suggested by the previous thread, I replaced my <ui:repeat> by a <c:forEach> but the problem still occurs.
I have a way to solve this problem using the binding attribute of my <rich:tabPanel> component:
<rich:tabPanel switchType="client" binding="#{tabNavigationBean.tabPanel}"
</rich:tabPanel>
and then in my Java bean:
private HtmlTabPanel tabPanel; // + getter and setter
public void setTabPanel(HtmlTabPanel tabPanel) {
this.tabPanel = tabPanel;
if (tabPanel != null) {
createTabs();
}
}
private void createTabs() {
Application application = FacesContext.getCurrentInstance().getApplication();
HtmlTab newTab = null;
for (DedicatedPageTab dpt : getDedicatedPageTabs()) {
newTab = (HtmlTab) application.createComponent(HtmlTab.COMPONENT_TYPE);
newTab.setLabel(dpt.getLabel());
newTab.setName(dpt.getName());
tabPanel.getChildren().add(newTab);
}
}
This code is working.
However, my question is to know if I can solve my problem without using the binding attribute (i.e. a 100% pure XHTML solution)?
<a4j:outputPanel id="out">
<rich:tabPanel>
<c:forEach items="list" var="var">
<rich:tab label="#{var.name}" switchType="client">
content
</rich:tab>
</c:forEach>
</rich:tabPanel>
</a4j:outputPanel>
Yes, it is possible, but difficult. Here are some notes I have:
Use c:forEach to create tab tags inside tabPanel inside outputPanel. reRender outputPanel on tab removal, add, or name change
http://relation.to/11633.lace
http://devharbor.blogspot.com/2009/08/add-jsf-controls-dynamically-with.html
We also made use of templating, though I still have an outstanding issue for it: How to force the build phase in a JSF 1.2 page using JSTL?
http://facelets.java.net/nonav/docs/dev/docbook.html#template
Docs on templating
http://www.jsfcentral.com/articles/facelets_3.html
Templating tutorial
For a while now, I've been working on a JAVA-based web project, and have found this website to be very helpful on numerous occasions.
So, 'got some problems of my own now - and would appreciate if you help out!
Ok, so Here's the thing -
I'm trying to render a list of messages, each of which consists of a message title and a message body. The trick I'm working on is that the message body, for as long as the title (which is an a4j:commandLink) hasn't been clicked-on, should be hidden. And once the title's clicked - the body should be displayed. And once its clicked again - hide. And so forth.
Here's what I did at the JSF side (some parts have been omitted for simplicity):
<a4j:repeat var="msg" value="#{ForumRenderJSF.messages}">
<a4j:region id="msgAjaxRegion" renderRegionOnly="true">
<a4j:outputPanel id="msgPanel" ajaxRendered="true">
<rich:panel style="width: 100%; border: 0">
<a4j:form id="msgForm">
<!--
The message's title.
Each click results in either the revealing or hiding of the message's body.
-->
<a4j:commandLink value="#{msg.title}" action="#{ForumRenderAssistJSF.reevaluateRender}"/>
<h:outputText value=" By: <i>#{msg.userNick}</i>, #{msg.timestamp}" escape="false"/>
<!--
The message's body.
-->
<!-- A (textual) flag, indicating whether the body should be rendered. -->
<h:inputText id="renderBodyFlag"/>
<br/>
<!-- The body. -->
<a4j:outputPanel rendered="#{rich:findComponent('renderBodyFlag').value == true}">
<h:outputText value="#{msg.body}"/>
</a4j:outputPanel>
</a4j:form>
</rich:panel>
</a4j:outputPanel> <!-- msgPanel -->
</a4j:region>
</a4j:repeat>
Note the usage of:
1. A dummy "renderFlag" field (should be hidden, eventually), which value denotes whether the body should be rendered.
2. A backing bean for rendering assistance (ForumRenderAssistJSF); It goal is to flip the proper renderFlag's value from "true" to "false", and vice-versa.
3. An a4j:region to isolate each message when firing the request for ForumRenderAssistJSF.reevaluateRender() -- so that the bean can find the right "renderFlag" field.
As for the bean:
public class ForumRenderAssistJSF {
public void reevaluateRender()
{
FacesContext context = FacesContext.getCurrentInstance();
UIViewRoot root = context.getViewRoot();
UIComponent renderFlagComp = (new UIComponentLookup()).lookup(root, compLookup); // My recursive search
String renderFlagVal = (String) ((HtmlInputText)renderFlagComp).getValue();
if (!renderFlagVal.equals("true"))
{
((HtmlInputText)renderFlagComp).setValue("true");
}
else
{
((HtmlInputText)renderFlagComp).setValue("false");
}
}
}
AND THE PROBLEM IS:
The trick actually works -- but only for the first message in the list!
For the rest of them, I see that the server can reach the right renderFlag input-text component (tested by inserting values at the client), but for some reason - the client always renders it blank (no content) upon AJAX reply!
I tried digging deep inside richfaces tutorials and manuals, and to me it seems like everything is as it should be. So, I'm kind'a lost here, and as I said - would deeply appreciate your help in regards!
Thanks!
Have you tried using a rich:simpleTogglePanel? It seems to provide all the functionality you need.