Rectangle 27 2

There isn't something like this implemented in JSF or Primefaces yet. But since you have the jQuery Framework running in your application (Primefaces), you could use the jQuery Animate features.

To get a Hint on how to realize something like this, you could check out this answer:

<head>
function scrollToAnchor() {
    jQuery('html, body').animate({
        scrollTop: jQuery("#editFieldset").offset().top
    }, 2000);
}

And this would be the Button Part:

<p:commandButton id="providerEdit" 
    actionListener="# {providersPriceAppointment.setEditProvider(provider.id)}" 
    icon="iconEdit" onComplete="scrollToAnchor();" update="@form"/>

I use primefaces 3.2.1, it have jQuery v1.7.2, is scrollTo or animate supported in jQuery v1.7.2?

I did a quick google search and found documentation about .animate() in jQuery v1.7.2. I found a error in my JS example though. I used $ instead of jQuery. I edited my answer. Please try it again :)

Uncaught Error: Syntax error, unrecognized expression: editFieldset - thats in Google Chrome console. And after clicking button, form updates, editFieldset in footer appears, but browser not scrolling there and every button in my app loses its action, I mean clicking on any button causes no reaction.

primefaces - Anchor/JumpTo in JSF - Stack Overflow

jsf primefaces
Rectangle 27 3

Enable GZIP filter in JSF

GZIP filter will reduce the initial load time significantly. You can additionally implement a cacheFilter to bring performance of your screens at par with JavaScript based UI (https://stackoverflow.com/a/35567540/5076414). For client side components, you can use Primefaces which is JQuery based UI.

<filter>
    <filter-name>gzipResponseFilter</filter-name>
    <filter-class>org.omnifaces.filter.GzipResponseFilter</filter-class>
    <init-param>
        <description>The threshold size in bytes. Must be a number between 0 and 9999. Defaults to 150.</description>
        <param-name>threshold</param-name>
        <param-value>150</param-value>
    </init-param>
    <init-param>
        <description>The mimetypes which needs to be compressed. Must be a commaseparated string. Defaults to the below values.</description>
        <param-name>mimetypes</param-name>
        <param-value>
     text/plain, text/html, text/xml, text/css, text/javascript, text/csv, text/rtf,
     application/xml, application/xhtml+xml, application/x-javascript, application/javascript, application/json,
     image/svg+xml, image/gif, application/x-font-woff, application/font-woff2, image/png
 </param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>gzipResponseFilter</filter-name>
    <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>ERROR</dispatcher>
</filter-mapping>
<error-page>
    <exception-type>java.lang.Throwable</exception-type>
    <location>/</location>
</error-page>
<dependency>
        <groupId>org.omnifaces</groupId>
        <artifactId>omnifaces</artifactId>
        <version>1.11</version>
    </dependency>

To see if your contents are already usign gzip and cache, In your Google Chrome Browser -> right click on your screen -> inspect -> click network tab -> refresh your screen. Click on the images, icons, stylesheets and see if you see following in response header

Content-Encoding:gzip

java - What is the best method to GZIP a JSF-Seam web app pages - Stac...

java jsf gzip seam
Rectangle 27 6

In jsf 2.2 namespaces are changed so you shoud use xmlns.jcp.org instead of java.sun.com

Thank you Miroslav, but that wasn't solve my problem. I tried also with my older project (JSF 2.0), where i put primefaces-3.5.jar, but again same problem. I really don't know what's gonna on..

java - Primefaces 4.0 components don't appear in browser, JSF 2.2? - S...

java jsf-2 primefaces jsf-2.2
Rectangle 27 22

process in primefaces equals to execute in JSF

update in primefaces equals to render in JSF

update : Determines ids of components to be updated (refreshed with updated values from server).

If you want to learn about those two tags (and more) you should read this blog post :

After that you should know that primefaces process and update can also use a more powerful selectors, read more here

and

jsf 2 - what is process and update and how it works in primefaces - St...

jsf-2 primefaces
Rectangle 27 21

process in primefaces equals to execute in JSF

update in primefaces equals to render in JSF

update : Determines ids of components to be updated (refreshed with updated values from server).

If you want to learn about those two tags (and more) you should read this blog post :

After that you should know that primefaces process and update can also use a more powerful selectors, read more here

and

jsf 2 - what is process and update and how it works in primefaces - St...

jsf-2 primefaces
Rectangle 27 2

With JSF 2.2 you can "pass through" attributes to be rendered via <f:passThroughAttribute /> and you would be able to add something like onpaste="return false;", but I assume you do not use JSF 2.2 yet.

You can still easily disable copy-pasting via some custom javascript. With standard javascript this is as easy as this (taken from here):

window.onload = function() {
   var myInput = document.getElementById('myInput');
   myInput.onpaste = function(e) {
       e.preventDefault();
   }
}

With jQuery you can do it like this (taken from here):

$(document).ready(function(){
    $('#myInput').bind("cut copy paste",function(e) {
        e.preventDefault();
    });
});

The jQuery option is also nice, because you can easily do this with all inputs on your site using a combination of the above code and $('input').each

How to disable ctrl+v (paste) function in a JSF page ?. I am using pri...

jsf primefaces
Rectangle 27 13

This is behaving as expected. For all intents and purposes, JSF doesn't evaluate a value that is designated as readonly="true" throughout the request lifecycle. The recommended way to get this done is to make the value readonly during the RENDER_RESPONSE phase, where the view is being presented to the user. During any other phase, you want the JSF runtime to interpret the input field as writeable. For that purpose, you can use:

<p:inputText value="#{AddNewLifeProposalActionBean.beneficiariesInfoDTO.residentAddress.township == null ? '' : AddNewLifeProposalActionBean.beneficiariesInfoDTO.residentAddress.township.name}" 
        style="width:250px;margin-left:-4px;" id="townShip" readonly="#{facesContext.renderResponse}">
            <f:validateLength maximum="36"/>
    </p:inputText>

This way, the readonly property is only true when the user is viewing the page. For all other phases, the JSF runtime will see the field as writeable and as a result, validation will be carried out on the field

#{facesContext.renderResponse}

Thanks a lot.Its working now

This would allow 'tampering' clientside right?

Yes @Kukeltje. If a malicious user edits the client-side markup to remove the readonly attribute, they could possibly supply a value. OP should envisage that as part of the "validation" that's referenced in the question

primefaces - JSF readonly inputText issue - Stack Overflow

jsf primefaces
Rectangle 27 20

You can just do

<p:accordionPanel activeIndex="-1">

It expands the second tab

Works for me, with PF 5.0. Doesn't expand the second tab.

jsf 2 - Hiding the first tab of accordion panel in JSF Primefaces - St...

jsf-2 tabs primefaces accordion
Rectangle 27 10

Sometimes, the solution is simply add immediate="true", it changes the point, in JSF lifecyle, in which the bean action is triggered.

  • Here are an article about how and when use it: immediate attribute article

it works because you were hitting some validations that you don't see as long as you did not but any p:messages in your code.now when you added immediate=true you are bypassing validations and submitting.

jsf - Primefaces - commandButton does not work - Stack Overflow

jsf primefaces
Rectangle 27 2

The UIComponent#visitTree() approach is not specific to any PrimeFaces version. It's specific to JSF 2.0. It should work equally good on any PrimeFaces version running on top of JSF 2.x. It would only fail if you're actually running JSF 1.x.

Even then, the standard JSF API already offers UIViewRoot#findComponent() for the job, it only takes a client ID, not a component ID.

UIViewRoot view = FacesContext.getCurrentInstance().getViewRoot();
UIComponent component = view.findComponent("form:pnl");
// ...

Nonetheless, this is the wrong solution to your problem. You appear to be interested in performing setRendered(boolean) call on it. You should not be doing that at all. You should not be interested in the view from the model side on. Do it the other way round. You should instead set a model value which the view should in turn be bound to.

Here's a kickoff example:

<h:form>
    <p:panel rendered="#{not bean.hidden}">
        <h:outputText value="Yahoooo...." />
    </p:panel>
    <p:commandButton value="Toggle" action="#{bean.toggle}" update="@form" />
</h:form>

With just this in bean:

private boolean hidden;

public void toggle() {
    hidden = !hidden;
}

public boolean isHidden() {
    return hidden;
}

jsf 2 - findComponent by id in PrimeFaces 3.4 JSF 2.0 - Stack Overflow

jsf jsf-2 primefaces
Rectangle 27 12

Here's the jsf part :

<p:autoComplete id="#{cc.attrs.id}" label="#{cc.attrs.label}"
    ....
    completeMethod="#{filterableRaceAutocompleteBean.filterRace}">

    <f:attribute name="filter" value="#{cc.attrs.filter}" />

</p:autoComplete>

And here is the source :

public List<Dto> filterRace(String filterString) {
    String filterValue = (String) UIComponent.getCurrentComponent(FacesContext.getCurrentInstance()).getAttributes().get("filter");
    log.debug("filter string : " + filterString + ", with query filter of : " + filterValue);

    ....

    return result;
}

nice thing dude :D ... helped me got rid of ActionEvent.

jsf - f:param or f:attribute support on primefaces autocomplete? - Sta...

jsf jsf-2 primefaces
Rectangle 27 12

Here's the jsf part :

<p:autoComplete id="#{cc.attrs.id}" label="#{cc.attrs.label}"
    ....
    completeMethod="#{filterableRaceAutocompleteBean.filterRace}">

    <f:attribute name="filter" value="#{cc.attrs.filter}" />

</p:autoComplete>

And here is the source :

public List<Dto> filterRace(String filterString) {
    String filterValue = (String) UIComponent.getCurrentComponent(FacesContext.getCurrentInstance()).getAttributes().get("filter");
    log.debug("filter string : " + filterString + ", with query filter of : " + filterValue);

    ....

    return result;
}

nice thing dude :D ... helped me got rid of ActionEvent.

jsf - f:param or f:attribute support on primefaces autocomplete? - Sta...

jsf jsf-2 primefaces
Rectangle 27 6

First of all, JSF is in the context of this question merely a HTML code generator. In HTML, images are represented by the <img> element whose src attribute should point to a (relative) URL from which the webbrowser could download the image individually. Have you checked the generated HTML output by opening the JSF page in webbrowser and doing rightclick and View Source? Do the generated <img> elements look all right? Likely not.

The way how you used the name attribute is incorrect.

<p:graphicImage value="resource/images/#{image}"  name="COMPANY CREATION"/>

The name attribute represents the "resource name". It's basically the path to the resource, relative from the /resources folder on. This attribute has precedence over value attribute. So basically you're trying to create

<img src="COMPANY CREATION" />

This is not right. JSF would instead auto-generate a RES_NOT_FOUND URL. You should have seen that in the generated HTML output.

Provided that your intent is to show "COMPANY CREATION" as tooltip, then the right way is

<p:graphicImage name="images/#{image}" title="COMPANY CREATION" />

Or, if you insist in using value attribute, which takes a context-relative URL instead of a resource name:

<p:graphicImage value="/resources/images/#{image}" title="COMPANY CREATION" />

primefaces - not working in jsf - Stack Overflow

jsf primefaces graphicimage
Rectangle 27 6

The PrimeFaces <p:selectOneListbox> actually hides the <select><option> and generates a <div><ul><li> which allows you much more CSS styling freedom.

You can just make use of itemDisabled attribute and then use CSS to set disabled items to display: none.

<p:selectOneListbox ...>
    <f:selectItems value="#{investigationItemController.currentInvestigation.reportItems}" 
        var="ri" itemLabel="#{ri.name}" itemValue="#{ri}"
        itemDisabled="#{not ri.retired and ri.ixItemType eq 'Value'}" />
</p:selectOneListbox>

with this CSS

.ui-selectlistbox-item.ui-state-disabled {
    display: none;
}

As to your failed attempt with <ui:repeat>; it failed because the <f:selectItem> is evaluated during view build time, not during view render time. However, the <ui:repeat> runs during view render time. During that moment the <f:selectItem> is nowhere available in the component tree. It's supposed to be attached to an UISelectOne/UISelectMany parent during view build time.

JSTL runs during view build time, like <f:selectItem>, so using JSTL <c:forEach> for the loop and <c:if> for the conditional building (not rendering!) should do it as well:

<p:selectOneListbox ...>
    <c:forEach items="#{investigationItemController.currentInvestigation.reportItems}" var="ri">
        <c:if test="#{not ri.retired and ri.ixItemType eq 'Value'}">
            <f:selectItem itemLabel="#{ri.name}" itemValue="#{ri}" />
        </c:if>
    </c:forEach>
</p:selectOneListbox>

You only need to take into account that this breaks view scoped beans when using a Mojarra version older than 2.1.18.

Thank you very much. You are a life saver. Both methods were possible for me to get through the issue.

jpa - Filter values in f:selectItems in JSF/Primefaces - Stack Overflo...

jsf jpa primefaces
Rectangle 27 4

The data table is by itself a NamingContainer component, so it's hard to use a relative client ID. You'd basically need to specify the absolute client ID:

<p:ajax ... update=":formId:tabViewId:detailsView" />

Alternatively, you could also bind the UIComponent with ID detailsView to the view by binding attribute and use UIComponent#getClientId() in the update attribute:

<p:ajax ... update=":#{detailsView.clientId}" />
...
<h:panelGroup id="detailsView" binding="#{detailsView}">

Thanks a lot. I'll check it out.

Do I need a backing property for the binding? It didn't work for me

@Lule: Nope. Then you've a different problem than asked here.

jsf 2 - Update sibling component in JSF 2 / Primefaces - Stack Overflo...

jsf-2 primefaces
Rectangle 27 16

What are the possible naming container in Prime faces

In JSF naming containers derive from UINamingContainer.

why it is necessary to append naming container id for Ajax update call when we want to update some UI control on form using update=":mainForm:MainAccordian:userNameTextbox"

<h:outputText value="test2" id="userNameTextbox" />

a duplicate ID

Set the component identifier of this UIComponent (if any). Component identifiers must obey the following syntax restrictions: Must not be a zero-length String. First character must be a letter or an underscore (''). Subsequent characters must be a letter, a digit, an underscore (''), or a dash ('-').

The specified identifier must be unique among all the components (including facets) that are descendents of the nearest ancestor UIComponent that is a NamingContainer, or within the scope of the entire component tree if there is no such ancestor that is a NamingContainer.

Means that you cannot have two components with the same ID under the same NamingContainer (if you have no NamingContainer at all, the entire tree is counted as NamingContainer). Therefore you need to add a NamingContainer, like a <h:form id="myNamingContainer" />

Lets take following example:

<h:outputText value="test1" id="userNameTextbox" />
<h:form id="container1">
  <h:outputText value="test2" id="userNameTextbox" />
</h:form>
<h:form id="container2">
  <h:outputText value="test3" id="userNameTextbox" />
</h:form>

.. and you want to do an update to userNameTextbox. Which userNameTextbox are you refering to because there are 3?

The first one? Then update userNameTextbox

Thanks alot Manuel.Your explanation gave me a lot understanding about UIComponent and Naming Container interface.

update

Which components are namingContainer? I see often "for example form etc." - but where can I find a list of all those NamingContainers?

See the first link in my answer: All classes deriving from NamingContainer.

jsf - Naming Container in JSF2/PrimeFaces - Stack Overflow

jsf primefaces
Rectangle 27 16

What are the possible naming container in Prime faces

In JSF naming containers derive from UINamingContainer.

why it is necessary to append naming container id for Ajax update call when we want to update some UI control on form using update=":mainForm:MainAccordian:userNameTextbox"

<h:outputText value="test2" id="userNameTextbox" />

a duplicate ID

Set the component identifier of this UIComponent (if any). Component identifiers must obey the following syntax restrictions: Must not be a zero-length String. First character must be a letter or an underscore (''). Subsequent characters must be a letter, a digit, an underscore (''), or a dash ('-').

The specified identifier must be unique among all the components (including facets) that are descendents of the nearest ancestor UIComponent that is a NamingContainer, or within the scope of the entire component tree if there is no such ancestor that is a NamingContainer.

Means that you cannot have two components with the same ID under the same NamingContainer (if you have no NamingContainer at all, the entire tree is counted as NamingContainer). Therefore you need to add a NamingContainer, like a <h:form id="myNamingContainer" />

Lets take following example:

<h:outputText value="test1" id="userNameTextbox" />
<h:form id="container1">
  <h:outputText value="test2" id="userNameTextbox" />
</h:form>
<h:form id="container2">
  <h:outputText value="test3" id="userNameTextbox" />
</h:form>

.. and you want to do an update to userNameTextbox. Which userNameTextbox are you refering to because there are 3?

The first one? Then update userNameTextbox

Thanks alot Manuel.Your explanation gave me a lot understanding about UIComponent and Naming Container interface.

update

Which components are namingContainer? I see often "for example form etc." - but where can I find a list of all those NamingContainers?

See the first link in my answer: All classes deriving from NamingContainer.

jsf - Naming Container in JSF2/PrimeFaces - Stack Overflow

jsf primefaces
Rectangle 27 18

If you need a specific component which uses a different renderer than <p:autoComplete> then you really can't go around creating a custom component with its own family and component type. You can still just extend the PrimeFaces AutoComplete (and its renderer) to save some boilerplate code.

In the custom component, you need to provide getters for those attributes. You could as good specify setters as well, this way you can always override the default values from in the view side. Those getters/setters should in turn delegate to StateHelper.

There's only a little problem with x-webkit-* attributes. The - is an illegal character in Java identifiers. So you have to rename the getters/setters and change the renderer somewhat as the standard renderer relies on the component property name being exactly the same as the tag attribute name. Update: I understand that x-webkit-speech should just be rendered as is (so, no getter/setter necessary) and that x-webkit-grammer is actually a typo, it should be x-webkit-grammar.

Here's how the SiteSearch component can look like:

@FacesComponent(SiteSearch.COMPONENT_TYPE)
public class SiteSearch extends AutoComplete {

    public static final String COMPONENT_FAMILY = "com.example";
    public static final String COMPONENT_TYPE = "com.example.SiteSearch";

    private enum PropertyKeys {
        grammar, onspeechchange, placeholder
    }

    @Override
    public String getFamily() {
        return COMPONENT_FAMILY;
    }

    @Override
    public String getRendererType() {
        return SiteSearchRenderer.RENDERER_TYPE;
    }

    public String getGrammar() {
        return (String) getStateHelper().eval(PropertyKeys.grammar, "builtin:search");
    }

    public void setGrammar(String grammar) {
        getStateHelper().put(PropertyKeys.grammar, grammar);
    }

    public String getOnspeechchange() {
        return (String) getStateHelper().eval(PropertyKeys.onspeechchange, "submit()");
    }

    public void setOnspeechchange(String onspeechchange) {
        getStateHelper().put(PropertyKeys.onspeechchange, onspeechchange);
    }

    public String getPlaceholder() {
        return (String) getStateHelper().eval(PropertyKeys.placeholder, "Enter a Search Term");
    }

    public void setPlaceholder(String placeholder) {
        getStateHelper().put(PropertyKeys.placeholder, placeholder);
    }

}

Please note that the getters have all default values specified. If the eval() returns null, then the default value will be returned instead. I have also neutralized the attribute names somewhat so that it can be reused for any future non-webkit browsers by just modifying the renderer accordingly.

And here's how the SiteSearchRenderer renderer should look like for the above component:

@FacesRenderer(
    componentFamily=SiteSearch.COMPONENT_FAMILY,
    rendererType=SiteSearchRenderer.RENDERER_TYPE
)
public class SiteSearchRenderer extends AutoCompleteRenderer {

    public static final String RENDERER_TYPE = "com.example.SiteSearchRenderer";

    @Override
    protected void renderPassThruAttributes(FacesContext facesContext, UIComponent component, String[] attrs) throws IOException {
        ResponseWriter writer = facesContext.getResponseWriter();
        writer.writeAttribute("x-webkit-speech", "x-webkit-speech", null);
        writer.writeAttribute("x-webkit-grammar", component.getAttributes().get("grammar"), "grammar");
        writer.writeAttribute("onwebkitspeechchange", component.getAttributes().get("onspeechchange"), "onspeechchange");
        writer.writeAttribute("placeholder", component.getAttributes().get("placeholder"), "placeholder");
        super.renderPassThruAttributes(facesContext, component, attrs);
    }

}

To use it in the view, we of course need to register it as a tag. Create a /WEB-INF/my.taglib.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<facelet-taglib
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd"
    version="2.0"
>
    <namespace>http://example.com/ui</namespace>

    <tag>
        <tag-name>siteSearch</tag-name>
        <component>
            <component-type>com.example.SiteSearch</component-type>
            <renderer-type>com.example.SiteSearchRenderer</renderer-type>
        </component>
    </tag>
</facelet-taglib>

Note that you don't need a <renderer> in faces-config.xml for this anymore. The @FacesRenderer annotation can just do its job on real custom components. So remove the <renderer> entry in faces-config.xml which you created based on your previous question.

Now tell JSF that you've got a custom taglib by the following context param in web.xml:

<context-param>
    <param-name>javax.faces.FACELETS_LIBRARIES</param-name>
    <param-value>/WEB-INF/my.taglib.xml</param-value>
</context-param>

Finally you can use it as follows:

<html ... xmlns:my="http://example.com/ui">
...
<my:siteSearch />

You can even specify additional attributes which will override the defaults set in the component:

<my:siteSearch grammar="builtin:language" onspeechchange="alert('peek-a-boo')" placeholder="Search" />

For IDE autocomplete on attributes, you'd need to specify every one as a separate <attribute> in the <tag> declaration in the my.taglib.xml.

jsf 2 - Adding Custom Attributes to Primefaces Autocomplete Component ...

jsf jsf-2 primefaces custom-component
Rectangle 27 18

If you need a specific component which uses a different renderer than <p:autoComplete> then you really can't go around creating a custom component with its own family and component type. You can still just extend the PrimeFaces AutoComplete (and its renderer) to save some boilerplate code.

In the custom component, you need to provide getters for those attributes. You could as good specify setters as well, this way you can always override the default values from in the view side. Those getters/setters should in turn delegate to StateHelper.

There's only a little problem with x-webkit-* attributes. The - is an illegal character in Java identifiers. So you have to rename the getters/setters and change the renderer somewhat as the standard renderer relies on the component property name being exactly the same as the tag attribute name. Update: I understand that x-webkit-speech should just be rendered as is (so, no getter/setter necessary) and that x-webkit-grammer is actually a typo, it should be x-webkit-grammar.

Here's how the SiteSearch component can look like:

@FacesComponent(SiteSearch.COMPONENT_TYPE)
public class SiteSearch extends AutoComplete {

    public static final String COMPONENT_FAMILY = "com.example";
    public static final String COMPONENT_TYPE = "com.example.SiteSearch";

    private enum PropertyKeys {
        grammar, onspeechchange, placeholder
    }

    @Override
    public String getFamily() {
        return COMPONENT_FAMILY;
    }

    @Override
    public String getRendererType() {
        return SiteSearchRenderer.RENDERER_TYPE;
    }

    public String getGrammar() {
        return (String) getStateHelper().eval(PropertyKeys.grammar, "builtin:search");
    }

    public void setGrammar(String grammar) {
        getStateHelper().put(PropertyKeys.grammar, grammar);
    }

    public String getOnspeechchange() {
        return (String) getStateHelper().eval(PropertyKeys.onspeechchange, "submit()");
    }

    public void setOnspeechchange(String onspeechchange) {
        getStateHelper().put(PropertyKeys.onspeechchange, onspeechchange);
    }

    public String getPlaceholder() {
        return (String) getStateHelper().eval(PropertyKeys.placeholder, "Enter a Search Term");
    }

    public void setPlaceholder(String placeholder) {
        getStateHelper().put(PropertyKeys.placeholder, placeholder);
    }

}

Please note that the getters have all default values specified. If the eval() returns null, then the default value will be returned instead. I have also neutralized the attribute names somewhat so that it can be reused for any future non-webkit browsers by just modifying the renderer accordingly.

And here's how the SiteSearchRenderer renderer should look like for the above component:

@FacesRenderer(
    componentFamily=SiteSearch.COMPONENT_FAMILY,
    rendererType=SiteSearchRenderer.RENDERER_TYPE
)
public class SiteSearchRenderer extends AutoCompleteRenderer {

    public static final String RENDERER_TYPE = "com.example.SiteSearchRenderer";

    @Override
    protected void renderPassThruAttributes(FacesContext facesContext, UIComponent component, String[] attrs) throws IOException {
        ResponseWriter writer = facesContext.getResponseWriter();
        writer.writeAttribute("x-webkit-speech", "x-webkit-speech", null);
        writer.writeAttribute("x-webkit-grammar", component.getAttributes().get("grammar"), "grammar");
        writer.writeAttribute("onwebkitspeechchange", component.getAttributes().get("onspeechchange"), "onspeechchange");
        writer.writeAttribute("placeholder", component.getAttributes().get("placeholder"), "placeholder");
        super.renderPassThruAttributes(facesContext, component, attrs);
    }

}

To use it in the view, we of course need to register it as a tag. Create a /WEB-INF/my.taglib.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<facelet-taglib
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd"
    version="2.0"
>
    <namespace>http://example.com/ui</namespace>

    <tag>
        <tag-name>siteSearch</tag-name>
        <component>
            <component-type>com.example.SiteSearch</component-type>
            <renderer-type>com.example.SiteSearchRenderer</renderer-type>
        </component>
    </tag>
</facelet-taglib>

Note that you don't need a <renderer> in faces-config.xml for this anymore. The @FacesRenderer annotation can just do its job on real custom components. So remove the <renderer> entry in faces-config.xml which you created based on your previous question.

Now tell JSF that you've got a custom taglib by the following context param in web.xml:

<context-param>
    <param-name>javax.faces.FACELETS_LIBRARIES</param-name>
    <param-value>/WEB-INF/my.taglib.xml</param-value>
</context-param>

Finally you can use it as follows:

<html ... xmlns:my="http://example.com/ui">
...
<my:siteSearch />

You can even specify additional attributes which will override the defaults set in the component:

<my:siteSearch grammar="builtin:language" onspeechchange="alert('peek-a-boo')" placeholder="Search" />

For IDE autocomplete on attributes, you'd need to specify every one as a separate <attribute> in the <tag> declaration in the my.taglib.xml.

jsf 2 - Adding Custom Attributes to Primefaces Autocomplete Component ...

jsf jsf-2 primefaces custom-component
Rectangle 27 8

<p:accordionPanel widgetVar="accordion">
    ...
</p:accordionPanel>
<body onload="PF('accordion').unselect(0)">
<body onload="accordion.unselect(0)">

Thanks .. I tried the first approach. It works. The tab is closed by default. But there is one problem. It does not get loaded on click. The remaining tabs gets updated from db(any time we click on it) . But first tab doesnt work this way. It stays empty. Any idea why this is happening. The control passes to bean on clikc and even the value is loaded,but it is not reflected in tab.

You are right... I tested it with attribute dynamic="true". Then the first tab won't get loaded if you click it. I'll adapt my answer. Use the approach with the widgetVar. There it works.

I would like an method in accordion like "collapseAll()" because in the current version (4.0) only have "unselect(X)" where X is the index of the tab where you want to collapse. I think it's a good detail for a new version.

widgetVar.collapseAll()

jsf 2 - Hiding the first tab of accordion panel in JSF Primefaces - St...

jsf-2 tabs primefaces accordion