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.
Related
Displaying a <p:carousel> inside a <p:dataGrid> using PrimeFaces 5.3 final (community release) something along the following piece of code.
<p:dataGrid var="gridRow" value="#{[1,2,3,4,5]}" columns="1">
<p:carousel var="row" value="#{[1,2,3,4,5]}" numVisible="3">
<p:panel>Panel container : #{row}</p:panel>
</p:carousel>
</p:dataGrid>
Using PrimeFaces 5.2 final, it displays the corresponding UI correctly as shown in the following picture.
Using PrimeFaces 5.3 final, the design is however, severely broken stretching items being held by a <p:carousel> too much horizontally as shown in the following picture.
See the browser's long horizontal scroll bar at the bottom-left corner of the preceding picture.
The problem occurs only when a <p:carousel> is displayed inside a <p:dataGrid> (or likely other iterating components). A <p:carousel> independently displays exactly which it is meant for.
What is the problem with PrimeFaces 5.3? Is there any workaround?
The solution was to set the layout attribute to grid in <p:dataGrid> (due to the responsiveness feature added to PrimeFaces 5.3). The default value of this attribute is tabular.
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 left, right and center panels in my xhtml page. Left panel contains menu item links and want to use them to refresh the center section through ajax.
I have seen quite a few links related to this but I am not sure on the final solution.
If this is not the preferred approach, please do guide on the same.
I am using managed beans which are sessionscoped and xhtml file uses following to do the dynamic call.
<p:menuitem value="Done" action="#{navBean.setPageName('done')}" update="centerPanel" immediate="TRUE" />
When I use primefaces 2.2.1, i am able to update the center panel on second click only from the menu in left panel.
When I use primefaces 3, the center section doesn't get updated.
The managed bean setter does get invoked in both cases.
Is it something to do with primefaces configuration or am I missing something?
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.
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.