Creating custom component based on Primefaces'

Question

I've been lurking this helping community for years now and yet never posted because I usually find what I need before asking.
I have read through those articles :

How to render a composite component using a custom renderer?
What is the relationship between component family, component type and renderer type?

and yet i'm stuck trying to create my own component based on Primefaces <p:diagram>.

The component in itself almost fits my needs but I would need the web browser to be able to correctly interpret HTML tags such as <mark>, <strong> for the data attribute of the Element of the <p:diagram>. I have yet to found a solution without implementing my own component.

Knowing a bit how JSF's <h:outputText> gives the option (through the escape tag) to interpret HTML tags correctly, I thought about adding this tag and it's behaviour to the <p:diagram> component and make my own component (I may also have to add further customing later on).

Here is my taglib :

<?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://myNamespace</namespace>
<tag>
    <tag-name>logigramme</tag-name>
    <description><![CDATA[]]></description>
    <component>
        <component-type>myComponent.component.type</component-type>
        <renderer-type>myComponentRenderer.renderer.type</renderer-type>
    </component>
    <attribute>
        <description><![CDATA[Unique identifier of the component in a namingContainer.]]></description>
        <name>id</name>
        <required>false</required>
        <type>java.lang.String</type>
    </attribute>
    <attribute>
        <description><![CDATA[Boolean value to specify the rendering of the component, when set to false component will not be rendered.]]></description>
        <name>rendered</name>
        <required>false</required>
        <type>java.lang.Boolean</type>
    </attribute>
    <attribute>
        <description><![CDATA[An el expression referring to a server side UIComponent instance in a backing bean.]]></description>
        <name>binding</name>
        <required>false</required>
        <type>javax.faces.component.UIComponent</type>
    </attribute>
    <attribute>
        <description><![CDATA[Value of the component.]]></description>
        <name>value</name>
        <required>false</required>
        <type>java.lang.Object</type>
    </attribute>
    <attribute>
        <description><![CDATA[An el expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. 
In case it's a static text, it must refer to a converter id.]]></description>
        <name>converter</name>
        <required>false</required>
        <type>java.faces.convert.Converter</type>
    </attribute>
    <attribute>
        <description><![CDATA[Name of the client side widget.]]></description>
        <name>widgetVar</name>
        <required>false</required>
        <type>java.lang.String</type>
    </attribute>
    <attribute>
        <description><![CDATA[Name of the iterator variable used to refer each data.]]></description>
        <name>var</name>
        <required>false</required>
        <type>java.lang.String</type>
    </attribute>
    <attribute>
        <description><![CDATA[Inline style of the component.]]></description>
        <name>style</name>
        <required>false</required>
        <type>java.lang.String</type>
    </attribute>
    <attribute>
        <description><![CDATA[Style class of the component.]]></description>
        <name>styleClass</name>
        <required>false</required>
        <type>java.lang.String</type>
    </attribute>
    <attribute>
        <description><![CDATA[Flag indicating that characters that are sensitive in HTML and XML markup must be escaped. This flag is set to "true" by default.]]></description>
        <name>escape</name>
        <required>false</required>
        <type>java.lang.Boolean</type>
    </attribute>
</tag>

Here is my component :

package myPackage;

import javax.faces.component.FacesComponent;

import org.primefaces.component.diagram.Diagram;

@FacesComponent("logigramme")
public class Logigramme extends Diagram {

public static final String COMPONENT_TYPE = "myComponent.component.type";

public static final String DEFAULT_RENDERER = "myComponentRenderer.renderer.type";

protected enum PropertyKeys {
    widgetVar, var, style, styleClass, escape;
    String toString;

    PropertyKeys(String toString) {
        this.toString = toString;
    }

    PropertyKeys() {
    }

    public String toString() {
        return ((this.toString != null) ? this.toString : super.toString());
    }
}

public Logigramme() {
    setRendererType(DEFAULT_RENDERER);
}

public String getEscape() {
    return (String) getStateHelper().eval(PropertyKeys.escape, null);
}
}

Here is my custom renderer :

package myPackage;

import java.io.IOException;
import java.util.List;
import java.util.Map;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.FacesRenderer;

import org.primefaces.component.diagram.Diagram;
import org.primefaces.component.diagram.DiagramRenderer;
import org.primefaces.model.diagram.Connection;
import org.primefaces.model.diagram.DiagramModel;
import org.primefaces.model.diagram.Element;
import org.primefaces.model.diagram.connector.Connector;
import org.primefaces.model.diagram.endpoint.EndPoint;
import org.primefaces.model.diagram.overlay.Overlay;
import org.primefaces.renderkit.CoreRenderer;
import org.primefaces.util.SharedStringBuilder;
import org.primefaces.util.WidgetBuilder;

@FacesRenderer(componentFamily = Diagram.COMPONENT_FAMILY, rendererType=Logigramme.DEFAULT_RENDERER)
public class LogigrammeRenderer extends DiagramRenderer {

@Override
public void decode(FacesContext context, UIComponent component) {
    Logigramme logigramme = (Logigramme) component;
    if (logigramme.isConnectRequest(context)) {
        decodeNewConnection(context, logigramme);
    } else if (logigramme.isDisconnectRequest(context)) {
        decodeDisconnection(context, logigramme);
    } else if (logigramme.isConnectionChangeRequest(context)) {
        decodeConnectionChange(context, logigramme);
    }
    decodeBehaviors(context, component);
}

[...]

@Override
public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
    Logigramme logigramme = (Logigramme) component;
    encodeMarkup(context, logigramme);
    encodeScript(context, logigramme);
}

[...]

protected void encodeMarkup(FacesContext context, Logigramme logigramme) throws IOException {
    ResponseWriter writer = context.getResponseWriter();
    DiagramModel model = (DiagramModel) logigramme.getValue();
    String clientId = logigramme.getClientId(context);
    String style = logigramme.getStyle();
    String styleClass = logigramme.getStyleClass();
    styleClass = (styleClass == null) ? Logigramme.CONTAINER_CLASS : Logigramme.CONTAINER_CLASS + " " + styleClass;
    UIComponent elementFacet = logigramme.getFacet("element");
    Map<String, Object> requestMap = context.getExternalContext().getRequestMap();
    String var = logigramme.getVar();
    Boolean escape = Boolean.valueOf(logigramme.getEscape());

    writer.startElement("div", logigramme);
    writer.writeAttribute("id", logigramme.getClientId(context), null);
    writer.writeAttribute("class", styleClass, null);
    if (style != null) {
        writer.writeAttribute("style", style, null);
    }

    if (model != null) {
        List<Element> elements = model.getElements();
        if (elements != null && !elements.isEmpty()) {
            for (int i = 0; i < elements.size(); i++) {
                Element element = elements.get(i);
                String elementClass = element.getStyleClass();
                elementClass = (elementClass == null) ? Logigramme.ELEMENT_CLASS : Logigramme.ELEMENT_CLASS + " " + elementClass;
                if (element.isDraggable()) {
                    elementClass = elementClass + " " + Logigramme.DRAGGABLE_ELEMENT_CLASS;
                }
                Object data = element.getData();
                String x = element.getX();
                String y = element.getY();
                String coords = "left:" + x + ";top:" + y;

                writer.startElement("div", null);
                writer.writeAttribute("id", clientId + "-" + element.getId(), null);
                writer.writeAttribute("class", elementClass, null);
                writer.writeAttribute("style", coords, null);

                if (elementFacet != null && var != null) {
                    requestMap.put(var, data);
                    elementFacet.encodeAll(context);
                } else if (data != null) {
                    if (escape == null || escape) {
                        writer.writeText(data, null);
                    } else {
                        writer.write(data.toString());
                    }
                }
                writer.endElement("div");
            }
        }
        if (var != null) {
            requestMap.remove(var);
        }
    }
    writer.endElement("div");
}
}

Considering I used annotations on the Renderer, i did not modify the faces-config.xml.

I then call my new component in the view with :

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:odc="http://myNamespace">

[...]

<odc:logigramme value="#{myBean.model}" styleClass="ui-widget-content" widgetVar="logigrammeWV" escape="false"/>

with myBean being my Backing bean containing my DefaultDiagramModel (primefaces object).

When i display my page, I have the following error (i took the liberty to crop it, I can give the full stacktrace if needed) :

INFOS: Facelet[/views/incident/listeIncidents.xhtml] was modified @ 11:06:19, flushing component applied @ 11:06:15
juil. 26, 2018 11:06:19 AM com.sun.faces.application.ApplicationImpl createComponentApplyAnnotations
GRAVE: JSF1068 : Impossible d’instancier un composant dont le type est myComponent.component.type
javax.faces.FacesException: Erreur d’expression : objet nommé «myComponent.component.type» non détecté
    at com.sun.faces.application.ApplicationImpl.createComponentApplyAnnotations(ApplicationImpl.java:1933)
    at com.sun.faces.application.ApplicationImpl.createComponent(ApplicationImpl.java:1168)
    at javax.faces.application.ApplicationWrapper.createComponent(ApplicationWrapper.java:637)
    [...]

Loosely translated, the error means that JSF is unable to instantiate a Component of type myComponent.component.type (which would be Diagram.COMPONENT_FAMILY aka org.primefaces.component)

So finally, my questions : any idea of what i'm doing wrong ? Did I forget anything ? Does anyone ever had to create a custom component based of Primefaces' diagram ?

Thanks for your help guys :)

Melloware · Accepted Answer · 2018-07-26T16:47:56.973

1

Usually I would comment and not answer but I see a couple of problems with your code.

In my code where I override the Datatable I had to add this to my faces-config.xml for it to pick it up. I would have thought your @FacesComponent annotations would have done that.

<!-- Extend PF Datatable component and rendering to fix filter map handling -->
<component>
    <component-type>org.primefaces.component.DataTable</component-type>
    <component-class>com.stuff.web.faces.MyDataTable</component-class>
</component>
<render-kit>
   <renderer>
       <component-family>org.primefaces.component</component-family>
       <renderer-type>org.primefaces.component.DataTableRenderer</renderer-type>
       <renderer-class>com.stuff.faces.MyDataTableRenderer</renderer-class>
   </renderer>
</render-kit>

Second, unless your example is truncated I don't see a "setter" for your Escape property only a getter. You will need both for it to set the value.

edited Jul 26 '18 at 16:47

answered Jul 26 '18 at 15:42

Melloware

10,435
2
32
62

I created my component from Primefaces Diagram (which does not contain any "setter") si I assumed it was retrieved differently somehow. I'll try adding one. My component's family is the same as the Diagram one therefore no need to Override it i think. – Cédric Carpentier Jul 26 '18 at 15:46
Are you looking at DiagramTemplate or the fully built Diagram.java which gets built at compile time? Because I see it has setters/getters for all attributes of the component? – Melloware Jul 26 '18 at 15:52
I was looking at Diagram.java and nevermind i'm just blind ! There are indeed setters. Thanks. – Cédric Carpentier Jul 26 '18 at 16:00
Your error is still strange though its saying it can't find the component. I just updated my answer with my faces-config.xml settings as well. – Melloware Jul 26 '18 at 16:48
Seeing your component and renderer declaration, I noticed that the component type and renderer type you declared were the one of the primefaces component and renderer. That was my mistake. I changed it and the error is not there anymore so it's great ! – Cédric Carpentier Jul 27 '18 at 07:19

Creating custom component based on Primefaces'

1 Answers1