Develop Reference

JSF and Javascript and HTML - How to create a highly dynamic interface

I'm new to JSF and developing web applications with Java.
I'm basically developing a pretty complex interface, with lots of AJAX content loaded (Pagination, posts, comments, ...).
I'll start with a basic example, a user writes a comment. The form is sent through JSF f:ajax to the server and then I can do a render="sectionId", but the problem is, that I want to make the post not just appear, but slide down and even toggle background color.
How can I obtain this sort of effect using JSF and Javascript?
The designer (who knows only HTML/CSS/Javscript/Jquery) says that usually, he just does a Jquery AJAX call to a page with a string of data and then the page generates a JSON encode that he can then use to do all the magic.
I'm not asking how you do the toggle/color in jquery, it's the communication between the JSF and Javascript. So how can I send to his javascript the newly generated HTML code, so that he can what he wants with it.
Thanks for any help.

JSF is a server-side technology and you'd typically conditionally display content within
a construct such as a panelGroup, so why not include your jquery magic inside a ready
handler inside the conditionally rendered panelGroup like this:
<h:panelGroup id="ajaxRenderTarget">
<ui:repeat value="#{bean.listOfComments}" var="var">
... display required information ...
</ui:repeat>
<h:panelGroup rendered="#{bean.showJqueryEffects}">
<script type="text/javascript">
jQuery(function($) {
... funky effects here ...
});
</script>
</h:panelGroup>
</h:panelGroup>
Where I've used ui:repeat in the above example you could be and probably would be using any data iteration component from jsf or a component library such as a datatable.
Another thing to consider is OmniFaces which has <o:onloadScript> and a host of other tags which are worth knowing about.
One mistake to avoid is trying to load JSF pages using jQuery ajax functions, the server will have no state of the component tree and it won't work.

Can I update a JSF component from a JSF backing bean method?

Is there a way to have a JSF Backing bean cause an update of a component on the page? I am not looking to use an ajax component with update attribute to update a component on the page. I need to trigger an update from within a JSF backing bean method. Note the update on the page can happen after this method completes or prior to its completion. I am using PrimeFaces, if there is a solution that can be had from using PrimeFaces.

Using standard JSF API, add the client ID to PartialViewContext#getRenderIds().
FacesContext.getCurrentInstance().getPartialViewContext().getRenderIds().add("foo:bar");
Using PrimeFaces specific API, use PrimeFaces.Ajax#update().
PrimeFaces.current().ajax().update("foo:bar");
Or if you're not on PrimeFaces 6.2+ yet, use RequestContext#update().
RequestContext.getCurrentInstance().update("foo:bar");
If you happen to use JSF utility library OmniFaces, use Ajax#update().
Ajax.update("foo:bar");
Regardless of the way, note that those client IDs should represent absolute client IDs which are not prefixed with the NamingContainer separator character like as you would do from the view side on.

I also tried to update a component from a jsf backing bean/class
You need to do the following after manipulating the UI component:
FacesContext.getCurrentInstance().getPartialViewContext().getRenderIds().add(componentToBeRerendered.getClientId())
It is important to use the clientId instead of the (server-side) componentId!!

The RequestContext is deprecated from Primefaces 6.2. From this version use the following:
if (componentID != null && PrimeFaces.current().isAjaxRequest()) {
PrimeFaces.current().ajax().update(componentID);
}
And to execute javascript from the backbean use this way:
PrimeFaces.current().executeScript(jsCommand);
Reference:
https://github.com/primefaces/primefaces/wiki/Migration-Guide
https://forum.primefaces.org/viewtopic.php?t=53129

Everything is possible only if there is enough time to research :)
What I got to do is like having people that I iterate into a ui:repeat and display names and other fields in inputs. But one of fields was singleSelect - A and depending on it value update another input - B.
even ui:repeat do not have id I put and it appeared in the DOM tree
<ui:repeat id="peopleRepeat"
value="#{myBean.people}"
var="person" varStatus="status">
Than the ids in the html were something like:
myForm:peopleRepeat:0:personType
myForm:peopleRepeat:1:personType
Than in the view I got one method like:
<p:ajax event="change"
listener="#{myBean.onPersonTypeChange(person, status.index)}"/>
And its implementation was in the bean like:
String componentId = "myForm:peopleRepeat" + idx + "personType";
PrimeFaces.current().ajax().update(componentId);
So this way I updated the element from the bean with no issues. PF version 6.2
Good luck and happy coding :)

In order to updte the component from backing bean, we can achieve as below
RequestContext.getCurrentInstance().update('updatePanelGroup');
<h:panelGroup id="updatePanelGroup">
.....
....
</h:panelGroup>
Updating the component differs with respect to prima face version.

PrimeFaces 3.0 - How can I set a TreeNode icon programmatically from backing bean?

I am trying to create a treeview using the PrimeFaces <p:tree> component. I copied the sample code from the PrimeFaces 3.0 Showcase and I have a simple treeview displaying very simple static content that is declared programmatically on the backing bean.
One of the showcase examples shows how you can assign icons (the JQueryUI type) to a <p:treeNode> in the Facelet code. That's nice eye-candy for the showcase, but how can I assign the icon via the associated TreeNode in the backing bean code? I don't see any getter/setter/method listed in the Javadocs.
Does anyone know how to do this?
I'm using the PrimeFaces 3.0-M2-SNAPSHOT.

You can just use EL in the icon attribute.
E.g.
<p:treeNode icon="#{item.icon}">
or, more generic (the #{item.type} can return e.g. document, image, etc)
<p:treeNode icon="ui-icon ui-icon-#{item.type}">

Having JSF spit out an HTML Search field. Doable?

I'm not a Java developer, but work with a team that is using JSF 1.2
We'd like to start using HTML 5 tags and attributes. It does not appear that JSF 1.2 supports those by default.
Is there anyway to have a JSF text tag:
<x:inputText>
spit out an html 5 search tag:
<input type="search" placeholder="blahblah" />
Right now, I'm having to let it output a regular text field and then I place inline JS after it to trigger a function that converts it client side:
<input type="text">
<script> funciton here that changes type to 'search' and adds placeholder attribute</script>
It works, but is a bit hacky. Is there a legitimate way to get server-side JSF to output proper HTML 5 tags?

Create a custom component. This allows you fine grained control over rendered HTML.
Or upgrade to JSF 2.0, then you can create a composite component which is a lot easier.

Rendering my own <script> tag instead of the one provided by JSF

I have page which consists of couple fragments and in the "header" fragment I have this tag <webuijsf:script id="script_logo" url="/resources/logo.js"/>. This is rendered in HTML as <script src="/app/resources/logo.js" type="text/javascript" id="Header:script_logo"></script>. This is fine and it is working as expected. Now I need to force JSF somehow to return URL to the javascript with current version of app. This is known technique for forcing the reload of resource (javascript, css and images) in case they are cashed on client's side. I need to render something like <script src="/app/resources/logo.js?ver=1.0.405" type="text/javascript" id="Header:script_logo"></script>. Please note the ver parameter in the URL.
Thanks.
Tomas

Well, you can simply add it to the page:
<script src="/app/resources/logo.js?ver=#{commonBean.version}" ...>
I've assumed you want to version to be configurable and sent by the server, so commonBean is some jsf bean that returns the proper version.
Update: also take a look at <rich:loadScritp>. (from RichFaces)
The final option is to create your own component and include the version automatically. Look for tutorial for how to make that, it's not easy for JSF 1.2

Well thats pretty easy. JSF 2 uses a configuration to Bind a renderer to a component.
Therefor you need a component-family and a renderer-type. Now you can define in your
faces-config.xml a renderer for that family and renderer-type.
In Mojorra the following configuration is set for a outputScript-Component:
<renderer>
<component-family>javax.faces.Output</component-family>
<renderer-type>javax.faces.resource.Script</renderer-type>
<renderer-class>com.sun.faces.renderkit.html_basic.ScriptRenderer</renderer-class>
</renderer>
I must admit, that this info is coming from my debugging. I debugged the ScriptRenderer
and was able to get the component-family and renderer-type from the UIComponent.
Now if you use an other Renderer for that Component, just change the configuration
and the original will be overwritten:
<renderer>
<component-family>javax.faces.Output</component-family>
<renderer-type>javax.faces.resource.Script</renderer-type>
<renderer-class>your.own.renderer.class</renderer-class>
</renderer>
Do not forget, all h:outputScript components will render now with the new Renderer.
Same goes with stylesheets, but those will have an other render-type.