I have the wrapped into my own faces component. Right now we found that when adding several messages the are of the expands moving the actual page components to the very far bottom of the page.
It's not viable to change the 300 pages we have on this system. Tried to find way to limit the height of the <h:messages> by CSS with no success.
The bright side is that when adding messsages to the current faces context is required that caller uses a method from the super class. I was able to limit the messages, but my control variables are not reseting when the page is reloaded.
My question, is there any other way to limit the messages from faces context?
(using javaEE5, JSF 1.1, tomcat5)
The h:messages renders by default an unordered list (<ul><li>). So to limit the height using CSS, you need to set a fixed height on the <ul> element and apply an overflow on y-axis it so that the users will still be able to scroll through it.
Basically:
.messages {
height: 100px;
overflow-y: scroll;
}
Apply it using styleClass attribute:
<h:messages styleClass="messages" />
Here is what I did to workaround the problem. As I said on my original post the component I use is wrapped. I overwrote the encodeBegin and encodeEnd to wrap the original h:messages with a div element:
import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.component.html.HtmlMessages;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.el.ValueBinding;
public class UIMessages extends HtmlMessages implements LayoutComponent {
public void encodeBegin(FacesContext context) throws IOException{
ResponseWriter writer = context.getResponseWriter();
layout.startRow(writer);
layout.startData(writer);
writer.startElement("div", this);
writer.writeAttribute("style", "overflow:auto; border:0px solid; max-height:100px;", null);
super.encodeBegin(context);
}
public void encodeEnd(FacesContext context) throws IOException{
ResponseWriter writer = context.getResponseWriter();
super.encodeEnd(context);
writer.endElement("div");
layout.endData(writer);
layout.endRow(writer);
}
}
Related
I've replaced the f:ajax tag with an homemade solution that doesn't put inline script. It works wonder for actionButton. However I cannot make it work for a listener on a panelGroup. The reason is that it is specified nowhere what the bean target method resulting from the ajax request should be. In other words with a commandButton I can specify the target bean method in action, but there is no such attribute for panelGroup; as I don't want to use f:ajax listener, I want to replace it.
<h:commandButton data-widget="jsfajax" value="ajax" action="#{someAction}"/>
$(document).ready(function(){
(function(widgets){
document.body.addEventListener("click", function(e) {
var w = e.target.getAttribute("data-widget");
if(w){
e.preventDefault();
widgets[w](e.target);
}
});
})(new Widgets);
});
function Widgets(){
this.jsfajax = function jsfajax(elem){
if(elem.id == ""){
elem.id = elem.name;
}
mojarra.ab(elem,"click",'action','#form',0);
}
}
This works.
But this obviously doesn't (it does but it doesn't invoke anything) :
<h:panelGroup>
<f:passThroughAttribute name="data-widget" value="jsfajax"/>
Click here
</h:panelGroup>
But this does :
<h:panelGroup>
<f:ajax event="click" listener="#{someAction}"/>
Click here
</h:panelGroup>
Both those panelGroup result in the same HTML output, so I assume it's the jsf container which "remembers" the click on that panelGroup is linked to #{someAction}.
What I'd like to do is recreate that link without using f:ajax listener. At the moment I've to use an hidden commandButton which is less elegant.
So maybe a composite component panelGroup which would save the "action link", I've no idea.
What you want to achieve is only possible on UICommand components, not on ClientBehaviorHolder components. One solution would be to create a custom component extending HtmlCommandLink which renders a <div> instead of <a> and use it like so <your:div action="#{bean.action}">.
The most ideal solution would be to replace the standard renderers. E.g. for <h:panelGorup>:
<render-kit>
<renderer>
<component-family>javax.faces.Panel</component-family>
<renderer-type>javax.faces.Group</renderer-type>
<renderer-class>com.example.YourPanelGroupRenderer</renderer-class>
</renderer>
</render-kit>
Basically, those renderers should skip rendering <f:ajax>-related on* attributes and instead render your data-widget attribute (and preferably also other attributes representing existing <f:ajax> attributes such as execute, render, delay, etc). You should also program against the standard API, not the Mojarra-specific API. I.e. use jsf.ajax.request() directly instead of mojarra.ab() shortcut.
This way you can keep your view identical conform the JSF standards. You and future developers would this way not even need to learn/think about a "proprietary" API while writing JSF code. You just continue using <h:panelGroup><f:ajax>. You simply plug in the custom renders and script via a JAR in webapp and you're done. That JAR would even be reusable on all other existing JSF applications. It could even become popular, because inline scripts are indeed considered poor practice.
It's only quite some code and not necessarily trivial for a starter.
A different approach is to replace the standard response writer with a custom one wherein you override writeAttribute() and check if the attribute name starts with on and then handle them accordingly the way you had in mind. E.g. parsing it and writing a different attribute. Here's a kickoff example which also recognizes <h:panelGroup><f:ajax>.
public class NoInlineScriptRenderKitFactory extends RenderKitFactory {
private RenderKitFactory wrapped;
public NoInlineScriptRenderKitFactory(RenderKitFactory wrapped) {
this.wrapped = wrapped;
}
#Override
public void addRenderKit(String renderKitId, RenderKit renderKit) {
wrapped.addRenderKit(renderKitId, renderKit);
}
#Override
public RenderKit getRenderKit(FacesContext context, String renderKitId) {
RenderKit renderKit = wrapped.getRenderKit(context, renderKitId);
return (HTML_BASIC_RENDER_KIT.equals(renderKitId)) ? new NoInlineScriptRenderKit(renderKit) : renderKit;
}
#Override
public Iterator<String> getRenderKitIds() {
return wrapped.getRenderKitIds();
}
}
public class NoInlineScriptRenderKit extends RenderKitWrapper {
private RenderKit wrapped;
public NoInlineScriptRenderKit(RenderKit wrapped) {
this.wrapped = wrapped;
}
#Override
public ResponseWriter createResponseWriter(Writer writer, String contentTypeList, String characterEncoding) {
return new NoInlineScriptResponseWriter(super.createResponseWriter(writer, contentTypeList, characterEncoding));
}
#Override
public RenderKit getWrapped() {
return wrapped;
}
}
public class NoInlineScriptResponseWriter extends ResponseWriterWrapper {
private ResponseWriter wrapped;
public NoInlineScriptResponseWriter(ResponseWriter wrapped) {
this.wrapped = wrapped;
}
#Override
public ResponseWriter cloneWithWriter(Writer writer) {
return new NoInlineScriptResponseWriter(super.cloneWithWriter(writer));
}
#Override
public void writeAttribute(String name, Object value, String property) throws IOException {
if (name.startsWith("on")) {
if (value != null && value.toString().startsWith("mojarra.ab(")) {
super.writeAttribute("data-widget", "jsfajax", property);
}
}
else {
super.writeAttribute(name, value, property);
}
}
#Override
public ResponseWriter getWrapped() {
return wrapped;
}
}
The most important part where you have your freedom is the writeAttribute() method in the last snippet. The above kickoff example just blindly checks if the on* attribute value starts with Mojarra-specific "mojarra.ab(" and then instead writes your data-widget="jsfajax". In other words, every single (naturally used!) <f:ajax> will be rewritten this way. You can continue using <h:commandLink><f:ajax> and <h:panelGroup><f:ajax> the natural way. Don't forget to deal with other <f:ajax> attributes while you're at it.
In order to get it to run, register as below in faces-config.xml:
<factory>
<render-kit-factory>com.example.NoInlineScriptRenderKitFactory</render-kit-factory>
</factory>
You only still need to take into account existing implementation-specific details (fortunately there are only two: Mojarra and MyFaces).
See also:
How do I determine the renderer of a built-in component
I have this css file which sets the default font size and type in JavaFX application:
.root {
-fx-font: 13px Tahoma;
}
scene.getStylesheets().add(getClass().getResource("/styles/Styles.css").toExternalForm());
I want to update the size and the font type from the Java code dynamically of the root component (all components). How I can do this?
Note:
This code updates the Font type and size of all components into the JavaFX application.
Please consider taking a look at the official JavaFX documentation. There you find the code example which answers your question:
Text t = new Text("That's the text");
t.setFont(Font.font ("Verdana", 20));
UPDATE
In your application controller get an instance of your root pane, e.g. AnchorPane and use the setId("") function to set new style for the whole pane (my actionChange is connected with a button on the pane, which triggers the event/change):
public class AppController implements Initializable {
#FXML
private AnchorPane mainPane;
#Override
public void initialize(URL arg0, ResourceBundle arg1) {
// TODO Auto-generated method stub
}
#FXML
public void actionChange() {
mainPane.setId("fancytext");
}
}
When pressing the button, the style for the pane is changed. I just used the font-size as an example. Before, you need to specify the new style in your CSS file:
.root {
-fx-font: 12px Tahoma;
}
#fancytext {
-fx-font: 20px Tahoma;
}
That's before:
That's after the button was pressed:
I use JSF with Primefaces 3.5. I use the p:panelGrid without the columns attribute, instead I explicitly create rows and columns with p:row and p:column, as demonstrated in the showcase (http://www.primefaces.org/showcase/ui/panelGrid.jsf).
Now I need to style one row differently with the help of some CSS class. But either I am missing it or there is just no way to add a class to a p:row?! I can even set the attribute styleClass, but it is ignored in the rendered output ...
Is there a way to somehow distinguish a row within a panelGrid by its class?
Try using a wild card on the css (to math all td that ends with your id)
Like this (select all td that its id ends with myRowId)
tr[id*='myRowId'] {
color:red
}
Here a jsfiddle
Previous answer...
Since you can't use styleClass on p:row you can try the following
Assign that p:row an id, like this : <p:row id="myRowId "
And apply the style in the following way (in your css file)
#myFormId\3A SomeNamingContainer\3A myRowId {
background-color: red;
}
Do view source of your page in order to replace the myFormId and SomeNamingContainer with your real ids...
Also read this : How to use JSF generated HTML element ID in CSS selectors?
I don't know why the styleClass attribute is ignored by default (at least until PrimeFaces version 6.2), but you can create a custom renderer that appends its value to the HTML output. A simple drop in replacement for the default PrimeFaces renderer looks like this:
public class PanelGridBodyRowRenderer extends CoreRenderer implements HelperRowRenderer {
#Override
public void encode(FacesContext context, Row row) throws IOException {
ResponseWriter writer = context.getResponseWriter();
String rowStyleClass = PanelGrid.TABLE_ROW_CLASS;
String userRowStyleClass = row.getStyleClass();
if (userRowStyleClass != null) {
rowStyleClass = rowStyleClass + " " + userRowStyleClass;
}
writer.startElement("tr", row);
writer.writeAttribute("class", rowStyleClass, null);
writer.writeAttribute("role", "row", null);
renderChildren(context, row);
writer.endElement("tr");
}
}
For PrimeFaces version 6.2 you can simply create this renderer class within the package org.primefaces.component.row.renderer in your WAR. The classloader will then load your renderer instead of the identical renderer class within the PrimFaces JAR.
For more information on custom components and renderers see this answer.
If you need the same style in others rows, maybe you can work with the column style from p:column (according with your response to Daniel). Something like this:
.stylePerColumn {
background-color: #F22626;
color: black;
border-style: none !important;
}
and int the xhtml file <p:column styleClass="stylePerColumn ">...</p:column> (to each column needed).
I want to embed a link in a JSF message, is this possible?
When I try it, the rendered html of the h:messages tag escapes the html characters. I tried setting the escape attribute of the h:messages tag to false, but that didn't help.
Unfortunately, this is not possible in the standard JSF implementation. The component and the renderer doesn't officially support this attribute. You can however homegrow a renderer which handles this.
Since this is a pretty common requirement/wish, I thought to take a look what's all possible.
First some background information: JSF by default uses ResponseWriter#writeText() to write the tag body, which escapes HTML by default. We'd like to let it use ResponseWriter#write() instead like as with <h:outputText escape="false" />. We'd like to extend the MessagesRenderer of the standard JSF implementation and override the encodeEnd() method accordingly. But since the MessagesRenderer#encodeEnd() contains pretty a lot of code (~180 lines) which we prefer not to copypaste to just change one or two lines after all, I found it better to replace the ResponseWriter with a custom implementation with help of ResponseWriterWrapper wherein the writeText() is been overriden to handle the escaping.
So, I ended up with this:
package com.example;
import java.io.IOException;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.context.ResponseWriterWrapper;
import javax.faces.render.FacesRenderer;
import com.sun.faces.renderkit.html_basic.MessagesRenderer;
#FacesRenderer(componentFamily="javax.faces.Messages", rendererType="javax.faces.Messages")
public class EscapableMessagesRenderer extends MessagesRenderer {
#Override
public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
final ResponseWriter originalResponseWriter = context.getResponseWriter();
try {
context.setResponseWriter(new ResponseWriterWrapper() {
#Override
public ResponseWriter getWrapped() {
return originalResponseWriter;
}
#Override
public void writeText(Object text, UIComponent component, String property) throws IOException {
String string = String.valueOf(text);
String escape = (String) component.getAttributes().get("escape");
if (escape != null && !Boolean.valueOf(escape)) {
super.write(string);
} else {
super.writeText(string, component, property);
}
}
});
super.encodeEnd(context, component); // Now, render it!
} finally {
context.setResponseWriter(originalResponseWriter); // Restore original writer.
}
}
}
In spite of the #FacesRenderer annotation, it get overriden by the default MessagesRenderer implementation. I suspect here a bug, so I reported issue 1748. To get it to work anyway, we have to fall back to the faces-config.xml:
<render-kit>
<renderer>
<component-family>javax.faces.Messages</component-family>
<renderer-type>javax.faces.Messages</renderer-type>
<renderer-class>com.example.EscapableMessagesRenderer</renderer-class>
</renderer>
</render-kit>
Then, to trigger it, just do:
<h:messages escape="false" />
And it works! :)
Note: the above affects <h:messages> only. To do the same for <h:message>, just do the same, but replace anywhere "Messages" by "Message" (component family, renderer type and classnames).
The escape="false" attributed you need is provided by the OmniFaces <o:messages> component. The OmniFaces utility library is available for JSF 2.
I posted this solution mentioned by #BalusC's comment as an answer since this is the most straightforward solution.
I am adding (UIInput) to the footer columns (UIColumn) of a datatable (UIData) created dynamically. The UIData is bound to a datatable tag in the jsp.
In the datatable, I just have headers and footers with the header having the labels and footer having the corresponding value in editable textbox.
When I change the value and submit the form using a commandButton and I try to access the UIInput value using .getValue() in the action method, I just get the old values and not the values updated in the page.
I tried binding it to an attribute in the backing bean and checked the values being set in the setter. I notice that the old values are being set and the values I updated in the page do not reflect in the action method or setter.
I tried using .getValue, .getLocalValue, .getSubmittedValue. None of these give me the new values.
Any suggestions what I might be doing worng?
I managed to workaround by pulling the values from requestParameterMap.
If there is a fix for the issue please do let me know.
McDowell - thanks for your inputs.
I tried running your demo code code under MyFaces 1.2.3 on Tomcat and Mojarra 2.0.0 Beta on Glassfish, but was unable to reproduce the problem - the save() method printed the values I entered into the fields.
(To use MyFaces, I had to change new UIData() to new HtmlDataTable(), probably due to how they implement the table renderer, but that is a minor change.)
I will note a couple of things about the bean:
the table getter will keep adding columns every time it is called - like on a page refresh with server-side state saving
keeping a reference to a UIComponent in a session bean usually is not a good idea; you would be better off using request scope for component bindings
session beans are supposed to implement Serializable (though I realize not everyone does this) and UIComponents cannot be serialized
your component might end up in multiple views if the user opens the page twice - concurrency issues
according to the spec: when JSF creates the view, it will use the component bound via the getter; but, when it restores the view (on submit), it will set the component via the setter, so keeping a reference is (at best) redundant
You might want to change the getter to something like this:
private UIData headerDataTable;
public UIData getHeaderDataTable() {
if (headerDataTable == null) {
headerDataTable = new UIData();
getHeaderTable(headerDataTable);
}
return headerDataTable;
}
I am not confident that these changes will fix your issue, though - if you are still having trouble, try again with more details - your JSF implementation, the version, and the value of the javax.faces.STATE_SAVING_METHOD parameter in web.xml (if any).
The actual code does several other processing, but below code should help in replicating the issue. In the below code, I expect the TestString to output the modified values from the page. But it just returns old values.
Below is the jsp:
<%#taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%#taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<head>
</head>
<f:view>
<body>
<h:form styleClass="form" id="form1">
<h:commandButton value="Save" action="#{TestPageBackingBean.save}" styleClass="commandExButton"/>
<h:outputText styleClass="label" value="Header Table"/>
<h:dataTable binding="#{TestPageBackingBean.headerDataTable}"></h:dataTable>
</h:form>
</body>
</f:view>
</html>
Below is the faces config:
<managed-bean>
<managed-bean-name>TestPageBackingBean</managed-bean-name>
<managed-bean-class>test.jsf.TestPageBackingBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
Below is the backing bean code:
package test.jsf;
import java.io.IOException;
import javax.faces.component.UIColumn;
import javax.faces.component.UIData;
import javax.faces.component.UIInput;
import javax.faces.component.UIOutput;
import javax.faces.context.FacesContext;
public class TestPageBackingBean {
private UIData headerDataTable = new UIData();
public TestPageBackingBean() {
}
public UIData getHeaderDataTable()
{
return getHeaderTable(headerDataTable);
}
public UIData getHeaderTable(UIData dataTable)
{
for (int i=0;i<10;++i)
{
dataTable.getChildren().add(getColumn(i));
}
return dataTable;
}
private UIColumn getColumn(int i)
{
UIOutput outputLabelText = new UIOutput();
UIInput inputFieldText = new UIInput();
UIColumn column = new UIColumn();
outputLabelText.setValue("Label" + i);
inputFieldText.setValue("test input" + i);
column.setHeader(outputLabelText);
column.setFooter(inputFieldText);
return column;
}
public String save() throws IOException {
String TestString = "";
FacesContext ctx = FacesContext.getCurrentInstance();
if (!ctx.getResponseComplete()) {
for (int i=0; i<headerDataTable.getChildren().size();++i)
{
TestString = TestString + (String)((UIInput)((UIColumn) headerDataTable.getChildren().get(i)).getFooter()).getValue();
}
System.out.println(TestString);
}
return "save";
}
public void setHeaderDataTable(UIData headerDataTable) {
this.headerDataTable = headerDataTable;
}
}
The issue is not fully resolved yet.
I use RSA 7, with IBM JSF - Base Faces Support 7.0 and Enhanced Faces Components 7.0 on WAS 6.0 The javax.faces.STATE_SAVING_METHOD was 'server' by default.
I tried changing STATE_SAVING_METHOD to 'client'. It did print the changed value in the output but in label4 instead of label0 which I modified. On the next submit the value moved from label4 to label8. Seemed inconsistent.