I have h:commandButton and I want, that It look like Primefaces button. I added
styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover"
but it's not full list. When I click to button, style is not changing. Button is not alive. What parameters I forgot to add?
The most important style classes used to tune PF components are covered in PrimeFaces User's guide. But I think that exact CSS class names could be version-dependent. The best way to know it would be to open the generated HTML code in webbrowser's development tools and view the resulting markup.
The last but not the least would be to mention that JSF generates pure form elements while PF usually generates wrappers around form elements, so that user interacts with, for example plain div, and not with input. But that'd also be answerable pretty soon as you open browser's tools.
Related
We have an accessibility requirement to render certain command links with additional "off screen" text for screen readers. So we want to end up rendering something like (attributes omitted for clarity)
<a>Edit Details<span class="hiddenOffScreen"> for John Smith</span></a>
The problem is the standard jsf1.2 <h:commandLink> tag does not respect the escape attribute. I tried something like <h:commandLink escape="false" value="#{linkText}"/> where linkText evaluates to the contents of the a tag shown above but this renders the span tag literally (i.e escapes the < and >)
How best to go about meeting this requirement? I can of course easily add the span later with JQuery however, for my own education I'd like to have a try with a custom renderer - but not sure how I would hook in with the existing default renderer which adds the "onClick" event handler and associated javascript. My google-foo seems to have failed me when searching for custom commandLink renderer.
Bear in mind, this is JSF 1.2 and we cannot use any third party tag libraries as we're running on a braindead very old version of WebSphere Portal Server.
You can nest content, including other tags and/or implicit text, within the <h:commandLink> tag, instead of specifying text within its value attribute, to achieve your functionality:
<h:commandLink ...>
<h:outputText .../>
<span class="hidden"></span>
#{bean.someText}
</h:commandLink>
This will render exactly what you want.
Use < or > to write < >
I have a <h:panelGrid> and a h:commandLink(link is basically a image).Now I want that on mouseover event , Then link should be render(render='true') and on mouseout event, it gets removed render='false'.But I am unable to create the logic that How can I do this with these events as the approach I am using is To set the values of bean true and false on this event.
Here is my code
<h:form>
<h:panelGrid mouseover='** we cannot call a bean method here which changes the bean value **'>
This is the Div On which I want to apply mouseover event
</h:panelGrid>
<h:commandLink id="btn" render={renderBean.renderLink}>
<h:graphicImage url="image.jpg"/>
</h:commandLink>
</h:form>
The default value of renderLink attribute of renderBean is false. Now I want to know the way that How can I change its value to true on mouseover event? Is it possible? OR Anyother solution in JSF w.r.t this requirement
You have to remember in JSF that the page will first be processed server-side by the JSF engine in the web server. At that time all JSF tags will be converted into their HTML equivalent. The render attribute tells the server-side engine whether or not to output an HTML a (anchor) link in the place of the <h:commandLink> element.
The behavior you're looking for, namely responding to mouse events, is client-side functionality. It happens in the browser, not at the web server, so no JSF is involved. The solution is to handle the mouse events in JavaScript, not JSF. You will typically set (or remove) the CSS attribute display:none on the id called btn (unfortunately it's slightly more complex as JSF will mangle the element id a bit). There are lots of posts here on StackOverflow that deal with how to handle client-side events in JavaScript. Using jQuery for example is a really common approach.
I recommend to get started you take a look at the blog of one of our best JSF resources and long-time StackOverflow user BalusC: http://balusc.blogspot.com.
There's a lot to learn and you'll get a good start by going there first (and searching for his posts on SO).
Good luck.
We are using JSF-2.1.7 and in all our form post requests. I am trying to justify whether to use <h:commandButton> or <h:commandLink> . The appearance of <h:commandLink> (href <a/> ) can be controlled using style and jQuery.
Which is recommended <h:commandButton> or <h:commandLink>? Is there any real advantage?
There is no functional difference apart from the generated markup and the appearance. The <h:commandButton> generates a HTML <input type="submit"> element and the <h:commandLink> generates a HTML <a> element which uses JavaScript to submit the form. Both are to be used to submit a form. Additional styling is irrelevant to the functionality.
Use the <h:commandButton> if you need a submit button and use the <h:commandLink> if you need a submit link. If that doesn't make sense to you, then I don't know. If you can't decide which one to use, just choose the one which makes the most sense in UI perspective. Ask the web designer if you're unsure.
The difference between <h:commandLink> and <h:outputLink> is by the way more interesting. This is been answered in detail here: When should I use h:outputLink instead of h:commandLink?
For a form, I prefer the h:commandbutton
h:commandbutton is like a button in HTML where you can set the action of a backing bean.
h:commandlink is like a link in HTML (the tag a) where you also can set the action of a backing bean
To use the css style in JSF, you can use the attribute 'styleClass'.
In short, my recommendation is a mix of <h:commandButton type="submit"> for the primary (default) submit button and <h:commandLink>s for any additional buttons (e.g. filter, sort, lookup, preview, generate password, ...).
Lengthy explanation follows:
First, some background: One should probably also be aware of the different <h:commandButton> type attributes. (The type attribute translates directly to the generated <input type=""> attribute.) I haven't found this explicitly stated anywhere, but some tests showed that:
type="submit" (defaults to this if omitted) does the normal "submit" behaviour of the form (i.e. POSTing the form) as well as the action and/or actionListener.
type="reset" does the normal "reset" behaviour (i.e. clearing/resetting the form fields) without calling any action and/or actionListeners.
type="button" generates a button (apparently <input type="button"> is a bit more limited than the <button> tag) without calling any action and/or actionListeners.
Apart from resetting the fields, the latter two seem to be useful only to activate e.g. Javascript. They don't POST the form.
So to answer the question: in a form context:
<h:commandButton> (which is equivalent to <h:commandButton type="submit">, remember) is often the most useful, especially as most browsers now implement activation of the first submit button found in the DOM tree of the form when Enter is pressed. This might improve your form's user experience
E.g. it is somewhat faster to log with:
Username Tab Password Enter
as opposed to
Username Tab Password ... move hand from keyboard to mouse, hunt pointer and position on button, click.
Also keep in mind that any <input> buttons (optionally CSS-styled) can still be reached via keyboard by Tabing until the <a> (CSS-styled as a button) has focus, and then Spacebar.
However, for additional buttons on the form that should do some other action instead of submitting (or "just" clearing the fields), <h:commandLink> would be more appropriate. This can still be reached via keyboard by Tabing until the <a> (CSS-styled as a button) has focus, and then Enter. Note that this is inconsistent with buttons generated with <h:commandButton>, which may be CSS-styled to look identical, but are handled differently by the browser (Tab...Spacebar).
That is the general explanation, BUT there are some issues you might want to take note of...
When you do not have a <h:commandButton type="submit"> button on a form, only a <h:commandLink> button (or even no buttons at all), when the user presses Enter the form is still submitted, but without the benefit of a action{Listener} running. Which might not be too big a problem, as the form values get stored in the backing bean and shown again when the page loads, so apart from the server roundtrip the user will often not notice anything is amiss. But that might not be how you want Enter to be handled.... The only way I can think of at the moment circumventing that, is to put an onSubmit event on the form which activates your default <h:commandLink> button via Javascript.... Arghhhh!!
You should also make sure that your CSS style selectors are sound.
A.mystyle is applied to <h:commandLink>;
INPUT[type=submit].mystyle to <h:commandButton type="submit">;
INPUT[type=reset].mystyle to <h:commandButton type="reset">;
INPUT[type=button].mystyle to <h:commandButton type="button">;
These can of course be concatenated with a comma as the selector for a single style definition. Or if you want to take the risk of something else being styled as a mystyle button, you could omit the A/INPUT specifiers. However, I have styled my buttons as above, so that I could also use this:
SPAN.mystyle definition for when the link or button is disabled (e.g. via the disabled attribute) - this allows you to supply a toned-down (greyed) look for a disabled button.
I have also run into some height differences (line height on Button vs. content height on Link - which may be a problem if your button includes a background image as icon instead of text), and also some slight differences in how :before/:after pseudoclasses are handled. All I'm saying: test and retest your CSS on both <h:commandButton>s and <h:commandLink>s to make sure they look (essentially) the same!
Here is my summary cheat sheet:
JSF <h:commandButton <h:commandButton <h:commandButton <h:commandLink>
type="submit"> type="reset"> type="button">
Translates to <input <input <input <a>
type="submit"> type="reset"> type="button">
Submit form POST no, clears flds no POST
Javascript events YES YES YES YES
action{Listener} YES no no YES
Enter on form activates YES no no no
Tab...+Enter activates YES(*) YES YES YES
Tab...+Space activates YES(*) YES YES no
Highlight on Tab-focus:
- Firefox 32 YES no no no
- Chrome 41 YES YES YES YES
- Internet Explorer 11 YES YES YES YES
- Opera 28 YES YES YES no(*)
(*=Opera 28 seems not to allow tabbing (or Alt+Arrow) to hyperlinks to activate them.)
Correct me if I'm wrong but the first difference between these two is the fact, that <h:commandButton> doesn't need JavaScript to be enabled in a browser. If your webpage is JS heavy then you can use <h:commandLink>, otherwise it might be better to keep it JS free in case your user wants to use sth like Tor Browser and you are ok with it.
The second one is how these two will behave in a webpage. The <h:commandLink> will just do what it is supposed to do or sometimes also fire a method from backing bean that has #PostConstruct annotation.
While <h:commandButton> may also fire inline JavaScripts which may lead to firing other methods from backing bean. However it will also automatically refresh the view.
I'm trying to make a conditional render in my Seam application (2.2.0), to display two different controls depending on a condition.
I'm using the s:fragment tag with the render attribute, but my problem is that I want whatever the control is displayed, to have the same id:
<s:fragment render="${editable}">
<rich:calendar id="entityDate"..../>
</s:fragment>
<s:fragment render="${!editable}">
<h:outputText id="entityDate".../>
</s:fragment>
My problem is that even when the render attribute set to false, the "not to be rendered" element is parsed, and I get an exception because of the duplicated id.
I also tried with the tag <ui:remove>, which effectively removes the element before the parsing phase, so I can have something like:
<span id="myId"/>
<ui:remove>
<span id="myId"/>
</ui:remove>
Unfortunately the <ui:remove> tag doesn't allow conditional logic. Has anyone found a way to solve this?
That's only possible when you use a view build time tag such as JSTL <c:if>.
<c:if test="#{editable}">
<rich:calendar id="entityDate" />
</c:if>
<c:if test="#{!editable}">
<h:outputText id="entityDate" />
</c:if>
(note that this is not going to work within an iterablte JSF component, such as <ui:repeat>, <h:dataTable> and so on)
After all, I strongly recommend to take benefit of the disabled attribute instead, if necessary with a good shot of CSS to hide the input field borders and so on. It'll minimize the JSF view boilerplate code.
<rich:calendar id="entityDate" disabled="#{!editable}" />
Disabled inputs are separately styleable by the CSS attribute selector element[attribute], e.g.
input[disabled] {
border: 0;
}
The above removes the border of input elements with the disabled attribute present so that it look like a normal output text.
"Solve"? There is nothing to solve here: two elements in a GUI can not have the same ID. Hardly unnatural or unsound?
It's like asking: "I have a database table with two rows, I would like them both to have the same primary key value, but somehow I get these errors... has anyone managed to solve the problem and circumvent the constraints?".
Or even closer analogy: "I have two spans, one of them is invisible (has style="display: none") I would like them both to have the same id - and browsers seem not to like it, despite one of the spans being invisible".
Bottom line: rendered on not rendered, each component is still a part of the view tree, and therefore has a UNIQUE id.
I have a suspicion that you want to have some "polymorphic" code that should work with the currently visible element. Using ID for such code IS WRONG. If you show us your use case, we might find a right way to achieve the effect.
I use selenuim myself in a seam environement and i recommend using defined ids whenever possible. First you have the ability to create smaller ids which is usefull for pagesize. Second the selenium test run alot faster if you use ids for referencing instead of other selectors. I have not yet found a selenium test where you cannot handle diffrent ids. Additionally if a code fails in jsf tree creation you see which id is failing.
I see you are using sfragment with editable or not. I use the sdecorate and give the decorate an id and then "just" ed for the input and vi for the outputtext for example. This makes it easy in selenium to check the availability of edit or view components.
Would you be able to get the same results you need by putting the id tag on the fragment?
So:
<s:fragment id="entityDate">
<rich:calendar render="${editable}" />
<h:outputText render="${!editable}" />
</s:fragment>
sorry if the answer to this is obvious but I couldn't find it.
How do I detect if the user has clicked, dragged etc. on an image (or other element)?
Thanks in advance!
There are several way of doing this:
In HTML it would be something like:
<img src="images/myImage.jpg" onclick="someJSFunc()"/>
In the case of Richfaces you'd probably want to invoke some sort of server side logic through an Ajax request after your image has been clicked, so, the most appropriate thing would be:
<img src="images/myImage.jpg">
<a4j:support event="onclick" action="#{myBean.someActionMethod}" reRender="someComponent"/>
</img>
For more information of how to add Ajax behavior to standard HTML components tags with Richfaces see the a4j:support component description.