I've used this BalusCs guide to view and paging datatables. It's very nice and useful guide (where would I be without it?), but I have one more question (maybe directly for you, BalusC):
Is there some posibility to scroll datatable horizontally and mainly vertically (without moving a headers)?
Thank you
EMERGENCY SOLUTION (using HTML):
place <h:form> to <div id="scrolltable">
and define scrolltable in css, for example:
#scrolltable{
width: 920px; height: 300px;
overflow-y: scroll;
overflow-x: auto;
}
This is not directly possible in HTML and therefore also not with the standard set of JSF components. You would need to bring in a lot of specific CSS/JS works. That's too much of detail and pain to summarize in a single answer.
However, there exist 3rd party JSF component libraries which offers that in a single ready-to-use component. For example PrimeFaces and RichFaces 4.x (and RichFaces 3.x) have scrollable datatable components which are even able to fetch new rows by ajax. Since you tagged the question with richfaces, you should be able to use the RichFaces' one.
Related
As per my question title, when I use richfaces, specifically a rich:popupPanel, my primefaces confirm dialog, p:confirmDialog, gets placed top/left justified. If I remove the the richfaces popup panel the primefaces dialog gets centered in the browser window as expected.
I tried changing the order of the namespace entries but that didn't work. What else can I try. I see richfaces also has a confirm dialog that I'm going to look into, it's just that I already had the primefaces version working on other pages, that happen to not have the richfaces popup panel.
I can post code if necessary.
You should not use Richfaces and Primefaces together. There so many conflicts between them both in terms of css and javascript. You can solve css problems by overwriting them and using '!important' at the end of each setting.
for example,
.class{
//...
text-align: center !important
}
However, Your best bet is to use just primefaces
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.
How do I style a primefaces components & specify their positions on web pages ? Links to any sample downloadable application would be highly appreciated.
Position of components:
Primefaces has some components that have position attribute(s) such as p:dialog:
<p:dialog header=”Header Text” widgetVar=”dialog” position=”10,50”>
...
</p:dialog>
In the example the position is given as [x,y] pair related to the top left corner of the browser window. Values such as "top", "bottom", "left", "right" or "center" are also allowed here. If the attribute is omitted, the position of a dialog is centered.
For all other components css positioning can be use either defined by the style or styleClass attribute which is available for a lot of Primefaces components or defined in a separate css layout.
The following example sets an absolute position for the p:dataTable:
<p:dataTable value="#{testBean.selectOptions}" var="item"
style="position:absolute; top:50px; left:240px;">
Primefaces even comes with an own p:layout tag that can be used for positioning as well.
Style
This can be accomplished using Primefaces themes. Furthermore, the Primefaces documentation (you have to pay for since version 2.1) lists all css style classes for each component. You can adapt them to fit your needs.
What is or could be a best practice?
Using standard JSF components and combine them by PrimeFaces components when needed (for example when DHTML or AJAX components are needed)
Forget all JSF Components and try to use all PrimeFaces components as much as possible
Please explain it and tell me about your experiences.
Thanks in advance...
PrimeFaces is your AJAX framework, so if you need to send ajaxical request, then use PrimeFaces components.
Even though, you dont need to send ajax request, but you can still use PF component, if u need to provide a consistency look for your web page. For example, h:commandButton and p:commandButton. Use p:commandButton if u need to send ajax request, but u can also do this
<p:commandButton ajax="false" action="Your Action here"/>
This will provide the same result as:
<h:commandButton action="Your Action here"/>
but this way, you can provide the same consistent look for your button throughout the page.
PrimeFaces does not have replacements for h:panelGrid, h:panelGroup, h:inputText, h:outputText ...
Depends on the sole functional requirement. If you're already using PrimeFaces and whatever you want to achieve can better/easier be achieved using a PrimeFaces component, use it.
Option 1 comes close, but option 2 goes overboard. PrimeFaces for example doesn't have a <p:form>, <p:panelGroup>, <p:outputText> or something.
With Primefaces it's very easy to get a consistent look for your application since it comes with Themeroller CSS framework. And you can easily switch designs. Although it is not difficult to let plain jsf components look like primefaces components if you apply the right css classes.
I think primefaces is a great component library. However some components are still buggy (e.g. date picker). So if you get some unexpected behavior with a primefaces component, it is alway good to have a jsf fallback (or an alternative from another component library or from jquery).
I have no experience with mixing different component libraries. Would be interesting to know, how they interact. But that would be subject of another question ...
I would like to find out how to set the default value for the textbox field in JSF, the field will be empty onFocus. If the user does not enter any value it will again show the default value.
I was able to find the solution using JS with regular html textbox but could not find anything Using JSF.
<h:inputText id="DT_INPUT" value="#{examplebean.date}" maxlength="11" size="10" />
something like
<h:inputText id="DT_INPUT" value="dd-MMM-yyyy" maxlength="11" size="10" />
but how to tie the actual value back to the bean?
Thanks,
Sai.
I would recommend you to look at some component libraries which already have components with necessary functionality. As I understand it's a jsf way. Here is an example of input text with hint.
PrimeFaces has a watermark component;
http://www.primefaces.org/showcase/ui/watermark.jsf
As a completely different alternative without the need for component libraries, you could also achieve this with just a h:outputLabel and a good shot of CSS/JS.
JSF:
<h:form id="form">
<h:outputLabel for="inputId" value="dd-MM-yyyy" />
<h:inputText id="inputId" value="#{bean.date}" />
</h:form>
CSS:
#form label {
position: absolute;
cursor: text;
color: gray;
padding: 2px;
}
JS (actually using jQuery since it insanely eases DOM traversion and manipulation):
$(document).ready(function() {
$('#form input').focus(function() {
$('label[for=' + $(this).attr('id') + ']').hide();
}).blur(function() {
if (!$(this).val().length) $('label[for=' + $(this).attr('id') + ']').show();
});
});
Here's a live demo (based on plain HTML).
you can set an initial value to examplebean.date (in the java code or the bean), and it will appear in the text field
what works with plain html, works with jsf as well, because it's transformed into html
for date components, look at richfaces, primefaces, icefaces, trinidad, etc for ready-to-use calendar components.
If I understand your question correctly, your example works okay as JSF. The tag h: implies that you are using JSF already.
In JSF , The Screen components (in HTML Terms - Input Controls) are bound to a java class properties (or Attributes) , When the JSF Page is rendered (Please refer to Debug JSF Life Cycle ), the default or the manually set values are set (if request scoped).
The values are set and retrieved using Java Expression Language.
In your example, value="#{examplebean.date}" , examplebean is your bean (which you should have configured in your faces-config) and date is the attribute (for which you will have a corresponding setter and getter) - accessing the java class properties at run time is the biggest advantage of Expression Language.
Refer BalusC Posts, Get JSF API's , Expression Language in Sun sites.