How to prevent a4j:status from flickering when polled by a4j:poll - jsf

I am working on a project that uses a rich:tree element that, when expanded, should display a processing animation nearby using a4j:status. The problem that I am running into is that the tree is rerendered by multiple other elements. The one that I believe to be causing the most trouble is an a4j:push element that rerenders the tree every second. This rerendering is causing the status element to change states when it shouldn't, causing a flickering on screen.
My status element:
<a:outputPanel id="working_animation" style="display: block; height: 1px">
<!-- Working animation -->
<a:status stopText=" " id="header_progress">
<a:facet name="start">
<a:outputPanel id="header_working" rendered="#{rich:element('tree_state.value').value}" style="padding-left: 16.5em;">
<span id="l-1"></span>
<span id="l-2"></span>
<span id="l-3"></span>
<span id="l-4"></span>
<span id="l-5"></span>
<span id="l-6"></span>
</a:outputPanel>
</a:facet>
</a:status>
</a:outputPanel>
Part of the tree element:
<rich:tree
id="sectionTree"
switchType="ajax"
value="#{sectionAction.sectionNodes}"
var="node"
nodeFace="#{node.nodeType}"
rightClickSelection="true"
ajaxSubmitSelection="true"
iconCollapsed="/img/treenode/collapsed.png"
iconExpanded="/img/treenode/expanded.png"
componentState="#{sectionAction.treeState}">
<rich:changeExpandListener binding="#{sectionAction}" />
<rich:nodeSelectListener binding="#{sectionAction}" />
beyond that are node definitions
The push element:
<h:form>
<a:push
eventProducer="#{loggedUser.registerLoginListener}"
interval="1000"
reRender="sectionTree">
</a:push>
<a:push
eventProducer="#{loggedUser.registerStudentListener}"
interval="2000"
reRender="sectionTree">
</a:push>
</h:form>

There are two options how to disable status:
Wrap a:push tags by a:region.
Specify status="none" attribute for a:push.
Refer to the livedemo for more details: http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf?c=status&tab=usage

Related

How do I get the id of a jsf component parent knowing its id?

I have a <h:commandLink id="link1" ..> within a <div id="div1">. I want to get the id of this div( the parent element of <h:commandLink id="link1" ..> in the backing bean, I don't want to get it directly but I want get it going through its child( ).
Please How could I achieve this.
Here you can find a sample of my code.
<div style="text-align:center; height: 50px; width: 100%; background: wheat;
border: 1px #6e5d40 solid; margin-top: 5px;">
<h:form>
<ui:repeat var="label1" value="#{backingBean.listOfSearchValue}">
<span class="filterLabel">#{label1} <h:commandLink class="glyphicon glyphicon-remove"></h:commandLink>
</span>
</ui:repeat>
</h:form>
</div>
Don't just use a plain HTML div, but use a h:panelGroup layout="block". Then it is just a matter of getting the parent of the UIComponent (the button in your case).
See also OmniFaces Components for help with finding components from within your bean, especially getClosestParent(UIComponent component, Class<C> parentType).

Styling an extlib Dialog with an iframe in it

So, I find myself in a strange place. In an XPage, I pop up a Dialog control from the Extension Library. Nothing special.
Now, that dialog must contain an <iframe> and that's where it gets hairy.
That iframe holds some content, so I need to style it so it is large enough to show everything without scroll bars. Hence, I need to resize the Dialog to accommodate that.
The pared-down html for the dialog is as follow :
<div
class="dijitDialog dijitDialogFocused dijitFocused"
role="dialog"
...
style="position: absolute; left: 624px; top: 250px; opacity: 1; z-index: 950;"
>
<div ... class="dijitDialogTitleBar"...>
...
</div>
<div class="dijitDialogPaneContent" style="width: auto; height: auto;">
<div id="view:_id1:dialogEditPerson:_content">
<form id="view:_id1:dialogEditPerson:_content:form1" method="post" action="..." class="xspForm"...>
<div ...>
<iframe ... src="..."></iframe>
</div>
</form>
</div>
</div>
</div>
So far, the dijitDialogEtc classes come from tundra.css, out of the box. I suppose I'll overload them in my own .css
Now I'm a bit puzzled by some traits :
where does the inline style, specially height and width, come from ? How can I act on them ?
inside the <div class="dijitDialogPaneContent" ... is another div, nameless, classless. How do I get hold of it ? Ultimately, that's my core concern : until I style it the way I see fit, all other efforts are in vain.
Any hint greatly appreciated.
Thanks
Add a panel as the root element to your dialog box and give it a width and height:
<xe:dialog
id="dialog1">
<xp:panel
style="width:500px;height:300px">
... your elements like iframe ...
</xp:panel>
</xe:dialog>
The size of dialog box gets automatically computed depending on your content size. It is the panel with the given size in this case.
If the iframe is the only content of your dialog box then you can set the size to iframe itself:
<xe:dialog
id="dialog1">
<iframe style="width:500px;height:300px" src="http://..." />
</xe:dialog>

Validation failed javascript callback in JSF

I have a template in which I can add a CSS error class to a div when the validation of a component has failed and it renders a pretty nice effect on the browser.
Now, I don't need to add a css class to a component (this won't help me), but rather I need to change the css of the html that surrounds it, this is pretty simple with jQuery, however I can't seem to find a javascript callback for failed validation, is this possible? I'm also using primefaces (in case they provide such capabilities).
Markup:
<div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED">
<label class="control-label">Input value:</label>
<div class="controls">
<h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail -->
</div>
</div>
if the input text is empty, I need the div that wraps the "control group" to have an extra class. I can turn it into a <h:panelGroup> so it is a JSF component but still I wouldn't know how to do it. Javascript seems easier as I can do a:
jQuery("#ID_OF_DIV").addClass("error_class")
Just let JSF/EL conditionally print the class based on FacesContext#isValidationFailed().
<div class="control-group #{facesContext.validationFailed ? 'error_class' : ''}">
You only need to ensure that this element is covered by ajax update/render.
Another way would be hooking on the oncomplete event of an arbitrary PrimeFaces ajax based component. There's an args object available in the scope which in turn has a validationFailed property. E.g. <p:commandButton oncomplete> or even <p:ajaxStatus oncomplete>.
<p:ajaxStatus ... oncomplete="if (args && args.validationFailed) $('#ID_OF_DIV').addClass('error_class')">
If you want to do everything on the client side.
<h:outputText class="samplecls" rendered="#{facesContext.validationFailed}"
value="Please enter all the required fields">
</h:outputText>
<div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED">
<label class="control-label">Input value:</label>
<div class="controls">
<h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail -->
</div>
</div>
Javascript/Jquery
This class will exist in DOM only validation fails by rendered="#{facesContext.validationFailed}"
$(window).load(function(){
if($('.samplecls').length>0){
$("#ID_OF_DIV").addClass("error_class");
}
});

Displaying command button with image only

I am trying to display a button with image only on my page but all I see is the button with ^. Following is the code for my button:
<p:commandButton onclick="lineSearch.show();" image="backgroung-image:url(/images/title_logo.jpg)"/>
<p:dialog header="Modal Dialog" widgetVar="lineSearch" modal="true" onCloseUpdate="lineIdField" showEffect="scale" hideEffect="explode">
<ui:include src="lineSearch.xhtml"/>
</p:dialog>
The image does exist in the images folder. The button is rendered as following in the page:
<button id="j_idt23:j_idt27" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" type="submit" onclick="lineSearch.show();;PrimeFaces.ab({formId:'j_idt23',source:'j_idt23:j_idt27',process:'#all'});return false;" name="j_idt23:j_idt27" role="button" aria-disabled="false">
<span class="ui-button-icon-primary ui-icon backgroung-image:url(/images/title_logo.jpg)"></span>
<span class="ui-button-text">ui-button</span>
</button>
<script type="text/javascript">
widget_j_idt23_j_idt27 = new PrimeFaces.widget.CommandButton('j_idt23:j_idt27', {text:false,icons:{primary:'backgroung-image:url(/images/title_logo.jpg)'}});
</script>
Thanks!!!
The image attribute has to refer a CSS class name, not a plain CSS property. So, this should do:
<p:commandButton image="someCssClassName" />
with the following in your CSS:
.someCssClassName {
background-image: url(images/title_logo.jpg)
}
Please note that I fixed the major typo in property name and also removed the leading slash from the image URL, it would otherwise be resolved relative to the site's domain root; the above expects the title_logo.jpg to be inside an /image folder which in turn is in the folder where the CSS file resides.
However, this one is less clumsy, I think:
<p:commandLink action="#{bean.submit}">
<h:graphicImage name="images/title_logo.jpg" />
</p:commandLink>
I suggest to use "P:coomandLink" and "P:graphicImage" at the same time.
I have created a folder under webapps, and put my jpg file under this folder.
This code works fine for me.
good luck.
<p:commandLink action="#{MyClass.myMethod}">
<p:graphicImage value="images/Max-Burger.jpg" />
</p:commandLink>
Put this on your css style:
.dolar-icon {
background-image: url("#{facesContext.externalContext.request.contextPath}/resources/imagenes/dolar.png") !important;}
Now you can use the icon "dolar-icon" that you defined in your css.
<p:commandButton action="#{as.fe}" icon="dolar-icon"/>
Even easier:
<p:commandButton icon="ui-icon-XXXXX">
Diferent icons you can choose: https://api.jqueryui.com/theming/icons/ and http://www.primefaces.org/showcase/ui/misc/fa.xhtml

Different CSS style for JSF messages

In JSF, I have included the following line in my xhtml file:
<h:panelGroup id="messageHeader">
<h:messages for="messageHeader" layout="list" errorClass="error" infoClass="inform"/>
</h:panelGroup>
The text gets rendered as
<ul>
<li class="error"> Please enter a First Name </li>
<li class="error"> Please enter a Last Name </li>
</ul>
How do I get the CSS style to apply to the <ul> tag or some surrounding <span> tag?
Here is what I am trying to do. I want all error messages to appear in a single red box. I also want all info messages to appear in a single green box. The example above produces 2 red boxes; one for each <li> item.
Use the styleClass attribute of <h:messages>. It will be applied on the parent HTML element.
E.g.
<h:messages styleClass="messages" />
will end up as
<ul class="messages">
...
</ul>
Update: you seem to want to show info and error messages in separate lists. Use two <h:messages/> instead on which you hide the other severity.
<h:messages styleClass="errorMessages" infoStyle="hide" />
<h:messages styleClass="infoMessages" errorStyle="hide" />
with
.hide {
display: none;
}
This could be done by providing h:messages tag for each message type you need to show with appropriate condition. For exapmle for error message type:
<h:panelGroup id="errorMessageHeader" class="whatever you need" rendered="#{FacesContext.isValidationFailed()}">
<h:messages for="errorMessageHeader" layout="list" errorClass="error" />
</h:panelGroup>
Conditions for other message types you can find by combining methods from
javax.faces.context.FacesContext
Thanks,
A.K.

Resources