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).
Related
I've having problems trying to customize the footer on a calendar using the f:facet tag. The content in the tag is being ignored, being the default footer shown instead.
I can customise the footer using rich:calendar attributes like showApplyButton, but I think it is not possible to remove the selected date that appears on the left of Clean button ('Netejar' in the image) without adding the Apply button, which is something my customer doesn't want.
We are using RichFaces 4.3.5.Final.
Code:
<rich:calendar
value="#{YourBeanHere.yourDateHere}"
locale="es_ES">
<f:facet name="footer">
<h:panelGrid columns="3" width="100%" columnClasses="fake, width100 talign">
<h:outputText value="{selectedDateControl}" style="font-weight:bold;" />
<h:outputText value="{timeControl}" style="font-weight:bold;" />
<h:outputText value="{todayControl}" style="font-weight:bold;" />
</h:panelGrid>
</f:facet>
</rich:calendar>
Calendar sample as it is shown with the code above:
Thanks in advance for your help.
The calendar footer is not customizable (not every component is set up to use the facets). You have to put the grid under the table and hide the footer (.rf-cal-ftr) if you need to.
I have a simpleTogglePanel set up as follows:
<rich:simpleTogglePanel
headerClass="myHeaderClass"
opened="false"
switchType="client" style="border: 0px;" bodyClass="myBodyClass">
<f:facet name="header">
<h:outputText styleClass="panelHeader" value="#{myBean.header}"></h:outputText>
</f:facet>
<f:facet name="closeMarker">
<h:outputText value="^"/>
</f:facet>
<f:facet name="openMarker">
<h:outputText value=">" />
</f:facet>
Content
</rich:simpleTogglePanel>
I want to move the open/close marker(which I have made ^ and > respectively to the left of the panel.
I have tried using float: left in myHeaderClass aswell as float:left !important and float:left;text-align: right.
Nowhere can I find anything that explains how to do this.The styling I found on sites where people were showing functionality of the simpleTogglePanel overall and this seemed to be all I didn't have.
I am using JSF 1.2(Apache MyFaces Implementation) and Richfaces 3.3.
CSS which govern the markers in rich:simpleTogglePanel is rich-stglpnl-marker as per RichFaces reference guide (scroll down for Classes names that define a component appearance section)
rich-stglpnl-marker Defines styles for a wrapper <div> element of a marker
Whereas headerClass is applicable for header elements only.
headerClass applicable to header elements
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.
Is there any attribute for p:tooltip for direction as we get with rich:tooltip ? I essentially want my tooltip to show up at top right of an image. Not sure how to do that. The number of attributes present for p:tooltip seem to be very limited. Following is the code for richfaces.
<h:commandLink value="Simple Link" id="link">
<rich:toolTip followMouse="true" direction="top-right" mode="ajax" value="#{bean.toolTipContent}" horizontalOffset="5"
verticalOffset="5" layout="block">
<f:facet name="defaultContent">
<f:verbatim>DEFAULT TOOLTIP CONTENT</f:verbatim>
</f:facet>
</rich:toolTip>
Well this might be something for you? http://fractalsoft.net/primeext-showcase-mojarra/sections/tooltip/customizedTooltips.jsf;jsessionid=14y1z1yedm21t910h6zonwboq
Primefaces ext has a really neat tooltip imo.
I specified this
<rich:panel>
<f:facet name="header">
Panel #1. Changing Style Synchronously
</f:facet>
Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those
classes overwrite the ones come from the skin.
</rich:panel>
from the RichFaces demo, in my JSF page and no header appears, although I've nothing in my css which would interfere. What might be the reason for this?
Thanks
i dont see any problem with using f:facet
try
<f:facet name="header">
<div><h:graphicImage value="/images/search.png" />
<h:outputText value=" Action Logs Search" /></div>
</f:facet>
in order to regenerate the error you mentioned
Mine disappeared when I accidentally included the panel's facets in the panel form. The facets must be children of the modal panel:
<rich:panel>
<a4j:form> <!-- This is trouble! -->
<f:facet name="header">
Panel #1. Changing Style Synchronously
</f:facet>
Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those
classes overwrite the ones come from the skin.
</a4j:form>
</rich:panel>
OK, do please feel free to comment on why the f:facet tag is not working, but I get my nice shiny headers when I change the code so it's like this instead:
<rich:panel header="header">
Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those
classes overwrite the ones come from the skin.
</rich:panel>