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.

Rich faces : how to add static text beside value on InputNumberSlider tooltip?

I'm Using rich faces 4
I'm using input number slider
<rich:inputNumberSlider value="10" width="500" minValue="1" maxValue="30" step="1" showInput="false" enableManualInput="false" showArrows="false" tooltipClass="" showTooltip="true" label="Days" />
i want to add word "Days" in the tool tip , to be "10 Days" instead of "10" .

RichFaces API on <rich:inputNumberSlider> says:
The "label" attribute is a generic attribute. The "label" attribute
provides an association between the component and the message that the
component (indirectly) produced. This attribute defines the parameters
of a localized error and informational messages that occur as a result
of conversion, validation, or other application actions during the
request processing lifecycle. With the help of this attribute you can
replace the last parameter substitution token shown in the messages.
For example, {1} for "DoubleRangeValidator.MAXIMUM" , {2} for
"ShortConverter.SHORT".
In short - label is used in all components as a parameter for jsf messages.
I have looked into richfaces sources for <rich:inputNumberSlider> ui javascript. It is possible to change javascript in certain places, adding hardcoded 'Days' string. To achieve this I can't think of any other options than recompiling the sources.
I suggest specifying somewhere else, that this slider measures days.

JSF 2.0 custom messages

I'm using JSF 2.0. I'm using the
<h:messages>
tag to render error messages. I can use css to style my messages a little bit but I've create a composite component to render messages that can be closed and adding effects to them with some Jquery.
I've seen tutorials on how to customize the messages, but most of these rely on css and customizing the text output yet what I want to do is generate specific markup, something like
<myComp:fancyMessage text="etcetcetc error msg" type="error" />
instead of the regular message markup.
Is this possible?
EDIT:
I don't want to style up jsf messages. Neither add background nor change its style, but rather create my own message html markup. Here:
http://balusc.blogspot.com/2010/07/using-html-in-jsf-messages.html
I've found how to add html to your messages. What I want is to encapsule all the html in my composite component, and then just use my composite component in this way:
<mycomp:messages/>
or
<mycomp:message for="componentID" />
where message and messages both create their own html markup

Use FacesContext#getMessageList() inside ui:repeat. Each item is a FacesMessage which has several getters.
<ui:repeat value="#{facesContext.messageList}" var="facesMessage">
Severity: #{facesMessage.severity}<br />
Summary: #{facesMessage.summary}<br />
Detail: #{facesMessage.detail}<br />
<br />
</ui:repeat>
This allows for more fine-grained HTML markup around the messages.
And it also enables you to print them as HTML with help of <h:outputText escape="false">. I might need to expand and revise my blog article sooner or later :)

In reply to how to set your component as message renderer:
Your component needs to extend HtmlBasicRenderer.
Then you can add your renderer to faces-config.xml
<render-kit>
<renderer>
<component-family>javax.faces.Messages</component-family>
<renderer-type>javax.faces.Messages</renderer-type>
<renderer-class>com.mypackage.MessagesRenderer</renderer-class>
</renderer>
</render-kit>

I know it's been a while, but thought to share this alternate solution for the benefit of others. For composites, create a backing component with a getter, then iterate over the faces messages and call remove() after collecting each message. This will get you around the "messages queued" warning without the h:messages hack.
xhtml:
<composite:interface displayName="Messages Component"
shortDescription="Messages Component" componentType="com.company.dept.commons.ui.messages.Messages">
<composite:attribute name="styleClass" default="" type="java.lang.String" shortDescription="CSS style class for the component" />
</composite:interface>
<composite:implementation>
<div id="messagesComponent" class="#{cc.attrs.styleClass}">
<ui:repeat value="#{cc.messageList}" var="message">
#{message.severity} - #{message.detail}<br/>
</ui:repeat>
</div>
</composite:implementation>
Backing component:
#FacesComponent("com.company.dept.commons.ui.messages.Messages")
public class Messages extends UINamingContainer {
private List<FacesMessage> messages;
public List<FacesMessage> getMessageList() {
//preserve messages in case getter is called multiple times
if (messages == null) {
messages = new ArrayList<FacesMessage>();
}
Iterator<FacesMessage> messageItr = getFacesContext().getMessages();
while(messageItr.hasNext()) {
FacesMessage message = messageItr.next();
messages.add(message);
messageItr.remove();
}
return messages;
}
}
Note the componentType in the xhtml is set to the FacesComponent value in the code. Also, the reference to cc.messageList will trigger the call to getMessageList().
Hope this helps.

Problems with GWT panel types

thanks in advance for your help.
I'm currently trying to create a w3c standards compliant HTML/CSS interface for a GWT app, much of this rests on using the right types of panel in the right place rather than using nested horizontal and vertical panels which write out tables in the UI.
I'm a total n00b at GWT and cannot figure out why replacing the top Vertical Panel in the code below causes the app to stop working. Any UI coding resources, advice of any kind would be very much appreciated.
<g:VerticalPanel>
<g:FormPanel ui:field="loginFormPanel" action="/cms/j_acegi_security_check.rpc" >
<g:HTMLPanel>
<g:Label ui:field="signinLabel" styleName="{style.signinStyle}">
<ui:msg key="signInText">Welcome to Perform CMS</ui:msg>
</g:Label>
<g:Label ui:field="emailLabel" styleName="{style.loginFontStyle}">
<ui:msg key="emailAddress">Email adress</ui:msg>
address
</g:Label>
<g:TextBox ui:field="email" name="j_username" styleName="{style.loginTextBoxStyle}"/>
<g:Label styleName="{style.fontStyle}" ui:field="usernameError"/>
<g:Label ui:field="passwordLabel" styleName="{style.loginFontStyle}">
<ui:msg key="password">Password</ui:msg>
</g:Label>
<g:PasswordTextBox ui:field="password" name="j_password" styleName="{style.loginTextBoxStyle}"/>
<g:Label styleName="{style.fontStyle}" ui:field="passwordError"/>
<g:HTMLPanel ui:field="submitPanel">
<g:HTMLPanel ui:field="submitButtonPanel" styleName="{style.buttonPanelStyle}">
<g:Image url="/cms/images/new_button_search_left.png" styleName="{style.image}"></g:Image>
<g:Label ui:field="signIn" styleName="{style.submitLabelStyle}">
<ui:msg key="signIn">Sign in</ui:msg>
</g:Label>
<g:SubmitButton styleName="{style.hide}">Submit</g:SubmitButton>
<g:Image url="/cms/images/new_button_search_right.png" styleName="{style.image}"></g:Image>
</g:HTMLPanel>
</g:HTMLPanel>
<g:HTMLPanel ui:field="submitErrorsPanel" styleName="{style.submitErrorPanel}">
<g:Label styleName="{style.fontStyle}" ui:field="submitErrorMessages"/>
</g:HTMLPanel>
</g:HTMLPanel>
</g:FormPanel>
<g:HTMLPanel ui:field="loginSuccessPanel" styleName="{style.hide}">
<g:Label styleName="{style.fontStyle}" ui:field="loginSuccessMessageLabel"/>
</g:HTMLPanel>
</g:VerticalPanel>

You don't say how your app stops working, but the GWT compiler generates different JS for every user agent specified in your project's gwt.xml. By default there may be 5 or 6 different versions of your program and the right one is decided in at runtime. These versions exist because there is no such thing as W3C compliance in browsers. One browser might get closer than others but all have their quirks that GWT tries to hide you from.
The GWT vertical panel at your root usually gets turned into a table with each child being a cell in a row. Note you still need a root element in the XML, but it could be a flow or html panel. Changing from a vertical panel will probably cause the child elements to flow sideways or do other weird things. If you wanted them to stay vertical you could throw a <br> between them, or style the enclosing <div>.
The best thing to do for layout issues is to install a tool into your browser which allows you to inspect the DOM. For example, Firefox has Firebug, IE has the IE Developer Toolbar, Opera has a developer console etc. You can select the errant element and see its place in the hierarchy as well as which styles apply to that element. Firebug even let you tweak styles in real time which can be handy for on the spot experimentation.

How to pass parameters to Apache Pivot's wtkx:include tag?

I need to create a reusable UI component that accepts a number of parameters (e.g. an image URL and some label text), similar to how JSP tags can accept parameters. The Pivot docs for the "wtkx:include" tag say:
The tag allows a WTKX file to embed content defined in an external WTKX file as if it was defined in the source file itself. This is useful for ... defining reusable content templates
I was hoping that I could define my component in a WTKX file using standard Pivot components (e.g. a TextInput) and pass it one or more parameters; for example my reusable template called "row.wtkx" might contain a row with an image and a text field, like this (where the ${xxx} bits are the parameters):
<TablePane.Row xmlns="org.apache.pivot.wtk">
<ImageView image="#images/${image_url}" />
<TextInput text="${title}" />
</TablePane.Row>
I could then reuse this component within a TablePane as follows:
<rows>
<TablePane.Row>
<Label text="Painting"/>
<Label text="Title"/>
</TablePane.Row>
<wtkx:include src="row.wtkx" image_url="mona_lisa.jpg" title="Mona Lisa"/>
<wtkx:include src="row.wtkx" image_url="pearl_earring.jpg" title="Girl with a Pearl Earring"/>
<wtkx:include src="row.wtkx" image_url="melting_clocks.jpg" title="Melting Clocks"/>
</rows>
I've made up the ${...} syntax myself just to show what I'm trying to do. Also, there could be other ways to pass the parameter values other than using attributes of the "wtkx:include" tag itself, e.g. pass a JSON-style map called say "args".
The ability to pass parameters like this would make the include tag much more powerful, e.g. in my case allow me to eliminate a lot of duplication between the table row declarations.
Or is "wtkx:include" not the right way to be doing this?