Am tring to add label for check box [That is for checking all Checkboxs] p:selectCheckboxMenu as in the figure.
Here is the Code:
<p:selectCheckboxMenu value="#{dashBoardController.selectedColumns}"
styleClass="ui-selectcheckboxmenu-header"
label="Custom" filterMatchMode="startsWith"
panelStyle="width:220px">
<f:selectItem itemLabel="Status" itemValue="status"/>
<f:selectItem itemLabel="group name" itemValue="groupName"/>
</p:selectCheckboxMenu>
CSS:
.ui-selectcheckboxmenu-header:before
{
content: "All";
}
any suggestions ??
After some 5 min of CSS fights, i discover some maneer to do it (i think its not the normal way to do, but i did not find other way).
You can use the content style property to atach content to an html element from css. The p:selectCheckboxMenu header class is .ui-selectcheckboxmenu-header, so, if you try this:
// on your css file
.ui-selectcheckboxmenu-header:before
{
content: "MY TEXT FOR SELECTING ALL ON MANY CHECKBOX MENU";
}
you will have the expected result. More info about content property, visit this link.
Note: I recommed to give an css id on the specific p:selectCheckboxMenu to have the pretended title. If you wonna for all p:selectCheckboxMenu you can use the code as it's.
Hope it helps ^^
Related
I have p:textEditor like the following
<p:textEditor
id="editor"
widgetVar="editor"
value="#{xxxController.editorText}"
height="300"
placeholder="Enter your content"
toolbarVisible="false"/>
Have the following command button to add/append values to p:textEditor
<p:commandButton onclick="insertTag('[myValue]')" value="myValue" type="button" />
JavaScript
<script>
function insertTag( t )
{
PF( 'editor' ).insertText( t ) ;
}
</script>
But i get SCRIPT5007: Unable to get property 'insertText' of undefined or null reference when i try to click the <p:commandButton.
So how do we insert/append text using widgetVar or JavaScript to p:textEditor?
Version details
JSF 2.2,
PrimeFaces 6.2
You need to do this... Once you have the widget the "editor" variable is QuillJS object.
PF('editor').editor.insertText(0, 'Hello', 'bold', true);
See: https://quilljs.com/docs/api/#inserttext
See: https://quilljs.com/docs/api/#getlength
See Using the component ID as widgetVar name
[...] This will cause all original widget var functions to be completely unavailable because the variable editor is now referencing a HTMLDivElement instance which doesn't have the same functions as the original widget var like show(), etc. [...]
(Append a _vw to every widgetvar name, to eliminate that issue)
SCRIPT5007: Unable to get property 'insertText' of undefined or null reference
guess, that's exactly the cause, your code is not referencing the "editor"-widgetVar, but the "editor" html element, which does not know "insertText".
I'm trying to show a specific b:growl element loaded from a bean, basically I'm try to replicate the example from the BootsFaces showcase (https://showcase.bootsfaces.net/forms/Growl.jsf;jsessionid=QdtXGdUxPK9sS714iLGuyksK93AMfZM-WfZm3py_.showcase01).
I used FacesMessages.info, but I get two b:growl messages. So, how can I target the specific b:growl element to show my message?
In the example from showcase: What does the messagesBean.specificInfo method do?
Edit:
Thank you Stephan, but is not working for me, I still get two b:grolw messages and the one width globalOnly="true" is ignored and a standar one is showed instead.
Here is my code:
xhtml:
<ui:define name="content">
<div class="container" style="width: auto">
<h:form id="idForm">
<b:panel title="#{msg['administrarServicio']}" look="primary"
id="panel" collapsible="false">
<b:commandButton id="idBorrar" col-lg="3" col-md="3" colSm="10"
col-xs="10" offset-lg="2" offset-md="2" offset-sm="1"
offset-xs="1" value="Borrare o o o o" look="danger"
iconAwesome="trash" iconAlign="right"
action="#{serviceManagementBean.borrar}" />
</b:panel>
<b:growl id="growlCommonMsg" placementFrom="bottom"
show-detail="true" show-summary="true" allowDismiss="true"
global-only="true" delay="10000" escape="true" />
<b:growl for="idBorrar" id="growlMsg" globalOnly="true"
placementFrom="bottom" show-detail="true" show-summary="true"
allowDismiss="true" delay="10000" escape="true" global-only="false"
animation-enter="animated bounceInDown"
animation-exit="animated flipOutX" />
</h:form>
</div>
</ui:define>
Java:
public void borrar() {
System.out.println("BORRAR " + this.idTramite);
FacesMessages.info("idForm:idBorrar", "Se boró correctamente el servicio " + this.idTramite, "Nunca va a volver. ¡Nunca!");
}
Let's begin with the source code you're missing. Here you go:
public void specificInfo() {
FacesMessages.info("growlForm:ref", "Info", "This is a specific message!");
}
public void error() {
FacesMessages.error("Error!", "Something has gone <strong>wrong</strong>.");
}
You'll notice the only difference is the number of parameters. specificInfo() includes the id growlForm:ref. You didn't include it with your code snippet, but growlForm is the id of the surrounding form (at least in our showcase). The second part of the id, ref, indicates that the FacesMessage is to be displayed by an <h:message>, <b:message>, <p:message>, <p:growl> or <b:growl> which is defined inside this form and bears the attribute for="ref".
Looking at the two <b:growl>s of the showcase, you'll see that the first growl doesn't have a for attribute. Instead, it sets globalOnly="true". This causes the growl to ignore every FacesMessage bearing an id. It'll ignore the messages generated by specificInfo().
So that's why there are two <b:growl>s in our showcase example, but every user action only triggers one of them.
There's that. Your issue is the other way round: One <b:growl> displays two growl elements on the screen. You haven't provided any Java source code (yet?), so I can only guess. The most likely explanation is that you're really generating the FacesMessage twice. I recommend setting a breakpoint in your debugger (or adding a System.out.println(), if you prefer that approach) to rule that out.
I hope I've given you enough clues to solve your issue. If not, don't hesitate to reach out to us on our bug tracker on GitHub. Please include the link to this StackOverflow question, so I can update this answer if necessary.
I've a f:selectitem with its itemLabel and i want to render the label so "pretty"!
The problem:
<p:selectOneRadio id="selectRadio" value="#{somebean.somevalue}" layout="pageDirection" >
<f:selectItem itemLabel="#{msg['message.1']}" itemValue="1" />
<f:selectItem itemLabel="#{msg['message.2']}" itemValue="2" />
</p:selectOneRadio>
My properties i18n file:
message.1=some message by {0}
message.2=another message by {0}
I want to do a inline replacement of {0} by #{somebean.theUser}
The result should be something like this (bold included):
some message by <b>HUSTON</b>
In tag file i should do something like this (or in similar way)
<f:selectItem itemLabel="#{msg['message.1']{'<b>'+somebean.theUser+'</b>'}}" itemValue="1" />
In other words, i want to add the i18n string param replacement directly into itemLabel tag.
I've try with <f:facet name="itemLabel"> but nothing.
Someone can help me?
Thanks in advice,
Agharta
JSF won't let you do that from the markup side. There is no way to use for example <h:outputFormat /> for it.
Instead you need to simply create a bean, that will read the contents from properties file and format accordingly:
<p:selectOneRadio id="selectRadio" value="#{somebean.somevalue}" layout="pageDirection" >
<f:selectItem itemLabel="#{helperbean.someMessage}" itemValue="1" />
<f:selectItem itemLabel="#{helperbean.anotherMessage}" itemValue="2" />
</p:selectOneRadio>
That was JSF part, in your bean:
public String getSomeMessage() {
// Actually you need some common access helper, it is just simplified example
String messagePattern = null;
try {
ResourceBundle rb = ResourceBundle.getBundle("path/to/properties/file");
String messagePattern = rb.getString("message.1");
return MessageFormat.format(messagePattern, somebean.getTheUser());
} catch (MissingResourceException mre) {
logger.warn("Missing resource file or resource key", mre);
return "!message.1!"; // That will show you where the problem is
}
}
Few additional points regarding Localizability:
Please use meaningful key names. Something like "message.1" gives no context to translators. I don't know what you are up to, but maybe "some-module.select.message.radio.message.sent.by.pattern" will be something better - the translator needs to know a) where it will be displayed, b) what is the purpose of this text (whether it is some description, message pattern, general text, window/dialog title, button caption, etc.). Be sure to provide them such context.
Be sure to include formatting tags into the message itself. That means, the message should look like message.1=some message by <b>{0}</b> in your properties file. You'd be surprised how often these kind of tags need to be removed (or replaced with other emphasis means). You should be especially careful, since you seem to be doing something with RTL languages and bolded fonts does not work with them very well.
Let say that I want to create a variable set of <rich:tab> elements within a <rich:tabPanel> component. So I tried to do that way:
<rich:tabPanel switchType="client" ...>
<ui:repeat value="#{myBean.myTabs}" var="tab">
<rich:tab name="#{tab.name}" label="#{tab.label}"/>
</ui:repeat>
</rich:tabPanel>
But it didn't work, as no tab is rendered. I also got the following message in the logs:
j_id174: tab panel has no enabled or rendered tabs!
This problem seems to be encountered by others people, for example here.
So as suggested by the previous thread, I replaced my <ui:repeat> by a <c:forEach> but the problem still occurs.
I have a way to solve this problem using the binding attribute of my <rich:tabPanel> component:
<rich:tabPanel switchType="client" binding="#{tabNavigationBean.tabPanel}"
</rich:tabPanel>
and then in my Java bean:
private HtmlTabPanel tabPanel; // + getter and setter
public void setTabPanel(HtmlTabPanel tabPanel) {
this.tabPanel = tabPanel;
if (tabPanel != null) {
createTabs();
}
}
private void createTabs() {
Application application = FacesContext.getCurrentInstance().getApplication();
HtmlTab newTab = null;
for (DedicatedPageTab dpt : getDedicatedPageTabs()) {
newTab = (HtmlTab) application.createComponent(HtmlTab.COMPONENT_TYPE);
newTab.setLabel(dpt.getLabel());
newTab.setName(dpt.getName());
tabPanel.getChildren().add(newTab);
}
}
This code is working.
However, my question is to know if I can solve my problem without using the binding attribute (i.e. a 100% pure XHTML solution)?
<a4j:outputPanel id="out">
<rich:tabPanel>
<c:forEach items="list" var="var">
<rich:tab label="#{var.name}" switchType="client">
content
</rich:tab>
</c:forEach>
</rich:tabPanel>
</a4j:outputPanel>
Yes, it is possible, but difficult. Here are some notes I have:
Use c:forEach to create tab tags inside tabPanel inside outputPanel. reRender outputPanel on tab removal, add, or name change
http://relation.to/11633.lace
http://devharbor.blogspot.com/2009/08/add-jsf-controls-dynamically-with.html
We also made use of templating, though I still have an outstanding issue for it: How to force the build phase in a JSF 1.2 page using JSTL?
http://facelets.java.net/nonav/docs/dev/docbook.html#template
Docs on templating
http://www.jsfcentral.com/articles/facelets_3.html
Templating tutorial
For a while now, I've been working on a JAVA-based web project, and have found this website to be very helpful on numerous occasions.
So, 'got some problems of my own now - and would appreciate if you help out!
Ok, so Here's the thing -
I'm trying to render a list of messages, each of which consists of a message title and a message body. The trick I'm working on is that the message body, for as long as the title (which is an a4j:commandLink) hasn't been clicked-on, should be hidden. And once the title's clicked - the body should be displayed. And once its clicked again - hide. And so forth.
Here's what I did at the JSF side (some parts have been omitted for simplicity):
<a4j:repeat var="msg" value="#{ForumRenderJSF.messages}">
<a4j:region id="msgAjaxRegion" renderRegionOnly="true">
<a4j:outputPanel id="msgPanel" ajaxRendered="true">
<rich:panel style="width: 100%; border: 0">
<a4j:form id="msgForm">
<!--
The message's title.
Each click results in either the revealing or hiding of the message's body.
-->
<a4j:commandLink value="#{msg.title}" action="#{ForumRenderAssistJSF.reevaluateRender}"/>
<h:outputText value=" By: <i>#{msg.userNick}</i>, #{msg.timestamp}" escape="false"/>
<!--
The message's body.
-->
<!-- A (textual) flag, indicating whether the body should be rendered. -->
<h:inputText id="renderBodyFlag"/>
<br/>
<!-- The body. -->
<a4j:outputPanel rendered="#{rich:findComponent('renderBodyFlag').value == true}">
<h:outputText value="#{msg.body}"/>
</a4j:outputPanel>
</a4j:form>
</rich:panel>
</a4j:outputPanel> <!-- msgPanel -->
</a4j:region>
</a4j:repeat>
Note the usage of:
1. A dummy "renderFlag" field (should be hidden, eventually), which value denotes whether the body should be rendered.
2. A backing bean for rendering assistance (ForumRenderAssistJSF); It goal is to flip the proper renderFlag's value from "true" to "false", and vice-versa.
3. An a4j:region to isolate each message when firing the request for ForumRenderAssistJSF.reevaluateRender() -- so that the bean can find the right "renderFlag" field.
As for the bean:
public class ForumRenderAssistJSF {
public void reevaluateRender()
{
FacesContext context = FacesContext.getCurrentInstance();
UIViewRoot root = context.getViewRoot();
UIComponent renderFlagComp = (new UIComponentLookup()).lookup(root, compLookup); // My recursive search
String renderFlagVal = (String) ((HtmlInputText)renderFlagComp).getValue();
if (!renderFlagVal.equals("true"))
{
((HtmlInputText)renderFlagComp).setValue("true");
}
else
{
((HtmlInputText)renderFlagComp).setValue("false");
}
}
}
AND THE PROBLEM IS:
The trick actually works -- but only for the first message in the list!
For the rest of them, I see that the server can reach the right renderFlag input-text component (tested by inserting values at the client), but for some reason - the client always renders it blank (no content) upon AJAX reply!
I tried digging deep inside richfaces tutorials and manuals, and to me it seems like everything is as it should be. So, I'm kind'a lost here, and as I said - would deeply appreciate your help in regards!
Thanks!
Have you tried using a rich:simpleTogglePanel? It seems to provide all the functionality you need.