Is it possible to have items in a rich:dataTable display with a different icon depending on their #{bean.type} similar to how you can alter the icon in a rich:tree and rich:treeNode?
you can add a <f:facet name="header"> in your rich column that can display any HTML, or in your rich column you can have any html which could be custom images.
you can add a rendered attribute to <h:graphicImage> based on the value of #{bean.type} or #{bean.type} could be a link to the image for to get.
for example
<h:graphicImage value="/images/icons/tables/down_icon.gif" rendered="#{carsSortingBean.sortsOrders['mileage']=='descending'}" />
<h:graphicImage value="/images/icons/tables/up_icon.gif.gif"
rendered="#{carsSortingBean.sortsOrders['mileage']=='ascending'}" />
So yes. There are lots of way's to customize the output of a dataTable
Related
I am using BootsFaces in version 0.7.0.
In BootsFaces, you can easily create a badge with <b:badge value="#{bean.size}"/>. This works great.
Actually I am using a <b:panel title="Authors"/>.
I am trying to add a <b:badge/> just next to the title (As you can see in the image). Is there any possibility to achieve this with BootsFaces or is there a nice way in CSS?
Have you other hints for using this, specially for user XP?
Replace the title of the <b:panel> by a heading facet:
<b:panel>
<f:facet name="heading">
<h:outputText value="Panel heading with a facet in place of a title "/>
<b:badge style="margin-left:10px" value="since version 0.4"/>
</f:facet>
<h:outputText value="Panel Content"/>
</b:panel>
(Note that the style attribute of <b:badge> is a feature of BootsFaces 0.8.0).
I have a graphicimage in my xhtml whick I am loading on some condition:
Here is the component:
<h:graphicImage id="imgHlpProfileClass"
styleClass="helpIcon"
url="/images/icons/dashboard_help_16.png"
alt="Help Text"/>
In this case the text in alt is displayed.
But when I apply rendered condition in component the alt attribute is not displayed.
Example:
<h:graphicImage id="imgHlpProfileClass"
styleClass="helpIcon"
url="/images/icons/dashboard_help_16.png"
alt="Help Text"
rendered="#{not empty targetSource.object.type}"/>
EDIT:
I have made the changes like this. The rendered attribute is correctly working for both the output text as well as GraphicalImage. But in case of Graphical Image the alt is not working. What is wrong here?
<h:panelGroup id = "overrideProvisioningActionTextPanel">
<h:outputText value="Override Default Provisioning"
rendered="#{not empty targetSource.object.type}"/>
<h:graphicImage id="imgHlpAppCase"
styleClass="helpIcon"
url="/images/icons/dashboard_help_16.png"
alt="Help Text"
rendered="#{not empty targetSource.object.type}"/>
</h:panelGroup>
You're confusing alt with title.
The alt is only shown as replacement text when the image is broken, or when the enduser is using a client which doesn't load images like screenreaders. Moreover, searchbots also use alt as keyword to match images. The alt is not intented as tooltip. Therefor the title attribute should be used (like as on every other component/element). The appearance of alt and title is also different. The alt displays as inline text while the title displays only on hover.
So, this is what you ultimately need:
<h:graphicImage ... title="Help Text" />
This all has nothing to do with presence of rendered attribute. You'd have exactly the same problem when removing it (while having a working image!).
See also:
Basic HTML tutorial - the <img> element
I'm trying to show the following text on the footer of my table:
Showing 11 to 20 of 51 entries
But I can't find a way to do it. I didn't find any vars in the footer that give me those variables easily.
I also tried to create a class that inherits from ExtendedDataModel and kept the values there.
I got the number of the row from the sequenceRange in the walk method. But, apparently, the footer of the table is rendered before the walk method being called, which resulted that the info on the bottom of my page was outdated by one request.
Any suggestions on how to do this?
By the way, I'm using JSF 2.1 and RichFaces 4.3.0 Final.
You can use the built in datascroller feature of rich faces:
Update 1
The scroller has a default layout which you might not want. But you can customize it. see Scroller Facets Usage tab in this link. Copying here:
<f:facet name="pages">
<h:panelGroup>
<h:outputText value="Page "/>
<h:selectOneMenu value="#{dataScrollerBean.scrollerPage}"
onchange="#{rich:component('ds')}.switchToPage(this.value)">
<f:selectItems value="#{dataScrollerBean.pagesToScroll}" />
</h:selectOneMenu>
<h:outputText value=" of #{pages}" />
</h:panelGroup>
</f:facet>
Refer this link:
Datascroller
This example shows the number of rows in a datatable in datascroller based on size mentioned in rows attribute of dataTable.
I need to use an image as background in a modalPanel title.
I'm using JSF + Richfaces.
Is is possible?
Thanks
This should be possible by inserting a header facet into the modal panel with the content that you wish to appear in the panel.
<f:facet name="header">
<div style="background: url("/bla/foo.png") repeat-x scroll 50% 50% #F36D21;" />
</f:facet>
On the inside you can just declare a div with a repeating background image as a backdrop to other content in your facet header.
I have a data entry form where user enters lots of data. When user comes to the page to view existing data, the page should be displayed in read-only mode (all values shown as text), when he clicks 'Edit' button, normal form with all input controls should be shown so that user can change and save data.
We are using JSF 2.0 with PrimeFaces library. It is easy to achieve above behavior for text box and text area but not for Checkbox, multi-select, radio,..... controls. Is there any easy way available to achieve above behavior rather than writing our own code (which may run into lot of lines thus making backing bean code ugly)
Thanks for your help...
I'm not sure why you think that you need additional backing bean code for this. You've all the needed values in the backing bean already. Your problem is more in the presentation of those values. Just display them in the desired format by writing the view code accordingly. Perhaps you were thinking it too the hard way.
Instead of a select boolean checkbox, you could display for example a "Yes" or "No" value.
<h:selectBooleanCheckbox value="#{bean.checked}" rendered="#{bean.edit}" />
<h:outputText value="#{bean.checked ? 'Yes' : 'No'}" rendered="#{not bean.edit}" />
Instead of a select one menu/radio, you could just display the value in an output text.
<h:selectOneMenu value="#{bean.selectedItem}" rendered="#{bean.edit}">
<f:selectItems value="#{data.availableItems}" />
</h:selectOneMenu>
<h:outputText value="#{bean.selectedItem}" rendered="#{not bean.edit}" />
Instead of a select many listbox/checkbox, you could just display for example all values comma separated in a loop.
<h:selectManyListbox value="#{bean.selectedItems}" rendered="#{bean.edit}">
<f:selectItems value="#{data.availableItems}" />
</h:selectManyListbox>
<h:panelGroup rendered="#{not bean.edit}">
<ui:repeat value="#{bean.selectedItems}" var="selectedItem" varStatus="loop">
#{selectedItem}#{not loop.last ? ', ' : ''}
</ui:repeat>
</h:panelGroup>
You could wrap it all in a tag file or a composite to minimize boilerplate and code repetition.
I've done this in my last project using composite components which has a "preview" attribute and in the implementation I render a text when this attribute is true and the real (editing) when the attribute is false. For checkbox in preview mode you could show the checkbox itself but disabled, for radio - show the selected item.
MyFaces Tomahawk library [1] contains an extended version of the standard components that adds displayValueOnly attribute for this purpose. This might help you (I haven't used them).
[1] - http://myfaces.apache.org/tomahawk-project/tomahawk20/index.html