I'm using Glassfish 3.2.2 and JSF 2.1.11
I'm trying to create a composite component that will take
as parameters a string and a max number of characters and then will show only the max amount of characters, but it will have a "more" link next to it, that when clicked will expand the text to the full length and will then have a "less" link next to it to take it back to the max number of characters.
I'm seeing some weird behavior, so I'm wondering if I'm doing something wrong.
Here is my composite component definition:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui">
<composite:interface componentType="expandableTextComponent">
<composite:attribute name="name" required="true"/>
<composite:attribute name="maxCharacters" required="true"/>
<composite:attribute name="value" required="true"/>
</composite:interface>
<composite:implementation>
<h:panelGroup id="#{cc.attrs.name}">
<h:outputText value="#{fn:substring(cc.attrs.value, 0, cc.attrs.maxCharacters)}" rendered="#{fn:length(cc.attrs.value) le cc.attrs.maxCharacters}"/>
<h:outputText value="#{fn:substring(cc.attrs.value, 0, cc.attrs.maxCharacters)}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and !cc.expanded}" style="margin-right: 5px;"/>
<h:outputText value="#{cc.attrs.value}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and cc.expanded}" style="margin-right: 5px;"/>
<p:commandLink actionListener="#{cc.toggleExpanded()}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters}" update="#{cc.attrs.name}">
<h:outputText value="#{__commonButton.more}..." rendered="#{!cc.expanded}"/>
<h:outputText value="#{__commonButton.less}" rendered="#{cc.expanded}"/>
</p:commandLink>
</h:panelGroup>
</composite:implementation>
</html>
And here is the Java component:
@FacesComponent("expandableTextComponent")
public class ExpandableTextComponent extends UINamingContainer
{
boolean expanded;
public boolean isExpanded()
{
return expanded;
}
public void toggleExpanded()
{
expanded = !expanded;
}
}
Unfortunately expanded is always false every time the toggleExpanded function is called.
However if I change the composite component to the following then it works.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui">
<composite:interface componentType="expandableTextComponent">
<composite:attribute name="name" required="true"/>
<composite:attribute name="maxCharacters" required="true"/>
<composite:attribute name="value" required="true"/>
</composite:interface>
<composite:implementation>
<h:panelGroup id="#{cc.attrs.name}">
<h:outputText value="#{fn:substring(cc.attrs.value, 0, cc.attrs.maxCharacters)}" rendered="#{fn:length(cc.attrs.value) le cc.attrs.maxCharacters}"/>
<h:outputText value="#{fn:substring(cc.attrs.value, 0, cc.attrs.maxCharacters)}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and !cc.expanded}" style="margin-right: 5px;"/>
<p:commandLink actionListener="#{cc.toggleExpanded()}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and !cc.expanded}" update="#{cc.attrs.name}" process="@this">
<h:outputText value="#{__commonButton.more}..."/>
</p:commandLink>
<h:outputText value="#{cc.attrs.value}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and cc.expanded}" style="margin-right: 5px;"/>
<p:commandLink actionListener="#{cc.toggleExpanded()}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and cc.expanded}" update="#{cc.attrs.name}" process="@this">
<h:outputText value="#{__commonButton.less}"/>
</p:commandLink>
</h:panelGroup>
</composite:implementation>
</html>
If I place a breakpoint in the toggleExpanded function, it only gets called on the "more" link and not the "less" link. So the question is why doesn't it get called when I click on the "less" link? Shouldn't this code be equivalent to the code above?
Is there a better way to save state in a component?
