Question

I’ve managed to get my component work with plain Strings and now I’m trying to add the possibility of parsing a ValueExpression.

To do that, I’m editing my EmoticonOutputTextTag file, to add in the setProperties() the evaluation of the expression.

But I’ve noticed that this method is NEVER called.

Seems like that this class is unused and I don’t know why.

In fact, in my setProperties() I’ve put this line : eot.setInputText("randomText"); and I was hoping that my component would show that..Indeed, my component shows the value passed in the JSF page, so I’m guessing that this method is not called.

What should I do?

Here’s the code :

EmoticonOutputText.java

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.unilife.emoticonOutputText;

import javax.el.ValueExpression;
import javax.faces.component.UIOutput;

/**
 *
 * @author stefano
 */
public class EmoticonOutputText extends UIOutput {

    private static final String COMP_FAMILY = "javax.faces.Output";

    /**
     * Get the value of COMPONENT_FAMILY
     *
     * @return the value of COMPONENT_FAMILY
     */
    @Override
    public String getFamily() {
        return COMP_FAMILY;
    }
    private static final String RENDERER_TYPE = "EmoticonOutputTextRenderer";

    /**
     * Get the value of RENDERER_TYPE
     *
     * @return the value of RENDERER_TYPE
     */
    @Override
    public String getRendererType() {
        return RENDERER_TYPE;
    }
    private String style;

    /**
     * Get the value of style
     *
     * @return the value of style
     */
    public String getStyle() {
        return style;
    }

    /**
     * Set the value of style
     *
     * @param style new value of style
     */
    public void setStyle(String style) {
        this.style = style;
    }
    private String styleClass;

    /**
     * Get the value of styleClass
     *
     * @return the value of styleClass
     */
    public String getStyleClass() {
        return styleClass;
    }

    /**
     * Set the value of styleClass
     *
     * @param styleClass new value of styleClass
     */
    public void setStyleClass(String styleClass) {
        this.styleClass = styleClass;
    }
    private String inputText;

    /**
     * Get the value of inputText
     *
     * @return the value of inputText
     */
    public String getInputText() {
        return inputText;
    }

    /**
     * Set the value of inputText
     *
     * @param inputText new value of inputText
     */
    public void setInputText(String inputText) {
        this.inputText = inputText;
    }
}

EmoticonOutputTextTag.java

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.unilife.emoticonOutputText;

import javax.el.ValueExpression;
import javax.faces.component.UIComponent;
import javax.faces.webapp.UIComponentELTag;

/**
 *
 * @author stefano
 */
public class EmoticonOutputTextTag extends UIComponentELTag {

    private static final String COMP_TYPE = "EmoticonOutputTextTag";
    private static final String RENDERER_TYPE = "EmoticonOutputTextRenderer";
    private String style;
    private String styleClass;
    private ValueExpression inputText;

    public void setStyle(String style) {
        this.style = style;
    }

    public void setStyleClass(String styleClass) {
        this.styleClass = styleClass;
    }

    public void setInputText(ValueExpression inputText) {
        this.inputText = inputText;
    }

    @Override
    public String getComponentType() {
        return COMP_TYPE;
    }

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

    @Override
    protected void setProperties(UIComponent component) {
        super.setProperties(component);
        EmoticonOutputText eot = (EmoticonOutputText)component;        
        if(style != null){
            eot.setStyle(style);
        }
        if(styleClass != null){
            eot.setStyleClass(styleClass);
        }
        if(inputText != null){
//            eot.setInputText(inputText.getExpressionString());
            eot.setInputText("randomText");
        }        
    }    
}

EmoticonOutputTextRenderer.java

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.unilife.emoticonOutputText;

import java.io.IOException;
import java.util.HashMap;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.Renderer;
import javax.servlet.ServletContext;

/**
 *
 * @author stefano
 */
public class EmoticonOutputTextRenderer extends Renderer {

    //Contiene la corrispondenza tra la stringa da sostituire e il nome dell'emoticon
    private static final HashMap<String, String> emoticons = new HashMap<>();
    //Contiene il percorso dei files delle emoticon
    private final String basePath = ((ServletContext) (FacesContext.getCurrentInstance().getExternalContext().getContext())).getContextPath() + "/resources/images/emoticons/";

    public EmoticonOutputTextRenderer() {
        parseEmoticons();
    }

    private void parseEmoticons(){
        //Not needed 
    }

    @Override
    public void encodeBegin(FacesContext context, UIComponent component) throws IOException {
        EmoticonOutputText eot = (EmoticonOutputText) component;
        ResponseWriter writer = context.getResponseWriter();
        //Aggiungiamo l'eventuale stile CSS o direttamente la classe
        writer.startElement("span", null);
        if(eot.getStyle()!=null && !eot.getStyle().isEmpty()){
            writer.writeAttribute("style", eot.getStyle(), null);
        }
        if(eot.getStyleClass()!=null && !eot.getStyleClass().isEmpty()){
            writer.writeAttribute("class", eot.getStyleClass(), null);
        }
        //Andiamo ad effettuare il parse vero e proprio, sostituendo le emoticons come le immagini
        for(String str : eot.getInputText().split(" ")){
            if(emoticons.containsKey(str)){ //Se riconosco l'emoticon allora scrivo l'immagine
                writer.startElement("img", null);
                writer.writeAttribute("src", emoticons.get(str) + ".gif", null);
                writer.endElement("img");
                writer.writeText(" ", null);
            } else { //Altrimenti aggiungo semplicemente la parola
                writer.writeText(str + " ", null);
            }
        }
    }
}

unilife.taglib.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
    <namespace>http://unilife.it/tags</namespace>
    <tag>
        <tag-name>EmoticonOutputText</tag-name>
        <description>
            OutputText con la possibilità di mostrare Emoticons
        </description>
        <component>
            <component-type>EmoticonOutputText</component-type>
            <renderer-type>EmoticonOutputTextRenderer</renderer-type>
        </component>
        <attribute>
            <name>style</name>            
            <type>java.lang.String</type>
        </attribute>
        <attribute>
            <name>styleClass</name>            
            <type>java.lang.String</type>
        </attribute>
        <attribute>
            <name>inputText</name>
            <required>true</required>            
            <type>java.lang.String</type>
        </attribute>
    </tag>
</facelet-taglib>

faces-config.xml

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="1.2" 
                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-facesconfig_1_2.xsd">
    <component>
        <component-type>
            EmoticonOutputText
        </component-type>
        <component-class>
            com.unilife.emoticonOutputText.EmoticonOutputText
        </component-class>
    </component>

    <render-kit>
        <renderer>
            <description>
                OutputText che permette il rendering di emoticons al posto delle combinazioni di tasti
            </description>
            <component-family>
                javax.faces.Output
            </component-family>
            <renderer-type>
                EmoticonOutputTextRenderer
            </renderer-type>
            <renderer-class>
                com.unilife.emoticonOutputText.EmoticonOutputTextRenderer
            </renderer-class>
        </renderer>
    </render-kit>  
</faces-config>

EDIT :
I’ve edited something after lu4242’s answer but now I’ve got a ClassCastException!

EmoticonOutputTextTag.java

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.unilife.emoticonOutputText;

import java.io.IOException;
import javax.el.ValueExpression;
import javax.faces.component.UIComponent;
import javax.faces.view.facelets.ComponentConfig;
import javax.faces.view.facelets.FaceletContext;
import javax.faces.view.facelets.TagAttribute;
import javax.faces.view.facelets.TagHandler;

/**
 *
 * @author stefano
 */

public class EmoticonOutputTextTag extends TagHandler {

    private static final String COMP_TYPE = "EmoticonOutputTextTag";
    private static final String RENDERER_TYPE = "EmoticonOutputTextRenderer";
    private String style;
    private String styleClass;
    private ValueExpression inputText;

    public EmoticonOutputTextTag(ComponentConfig config) {
        super(config);
    }

    public void setStyle(String style) {
        this.style = style;
    }

    public void setStyleClass(String styleClass) {
        this.styleClass = styleClass;
    }

    public void setInputText(ValueExpression inputText) {
        this.inputText = inputText;
    }

    @Override
    public void apply(FaceletContext fc, UIComponent uic) throws IOException {
        EmoticonOutputText eot = (EmoticonOutputText) uic;        
        TagAttribute ta = this.getRequiredAttribute("inputText");
        ValueExpression ve = ta.getValueExpression(fc, String.class);
        if(ve.isLiteralText()){
            eot.setInputText(ve.getExpressionString());
        } else {
            eot.setInputText((String)ve.getValue(fc));
        }
    }
}

unilife.taglib.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib>
    <namespace>http://unilife.it/tags</namespace>
    <tag>
        <tag-name>EmoticonOutputText</tag-name>
        <description>
            OutputText con la possibilità di mostrare Emoticons
        </description>
        <component>
            <component-type>EmoticonOutputText</component-type>
            <renderer-type>EmoticonOutputTextRenderer</renderer-type>
            <handler-class>com.unilife.emoticonOutputText.EmoticonOutputTextTag</handler-class>            
        </component>
        <attribute>
            <name>style</name>            
            <type>java.lang.String</type>
        </attribute>
        <attribute>
            <name>styleClass</name>            
            <type>java.lang.String</type>
        </attribute>
        <attribute>
            <name>inputText</name>
            <required>true</required>            
            <type>java.lang.String</type>
        </attribute>
    </tag>
</facelet-taglib>

Now the problem is that uic cannot be cast to EmoticonOutputText..but why??

Answer 1

The tag class extends from the wrong class. UIComponentELTag is for JSP. In Facelets, a tag handler can be provided for components extending from javax.faces.view.facelets.ComponentHandler and adding a < handler-class > inside < tag >< component > in your .taglib.xml file.

If you do not want to deal with all config stuff for create custom components, take a look at MyFaces Builder Plugin Site. It uses source-code annotations to handle all metadata and generate all related files with minimal effort. It is the tool used for Apache MyFaces Core, Apache MyFaces Tomahawk and MyFaces Sandbox. There is an archetype that helps to setup the environment using maven See Instructions. Or you can take the “easy way” and create a JSF 2.0 composite component.