Multi tool use

Clash Royale CLAN TAG

Creating custom component based on Primefaces' <p:diagram>

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 :

<p:diagram>

<mark>, <strong>

data

Element

<p:diagram>

<h:outputText>

escape

<p:diagram>

<?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).

myBean

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)

myComponent.component.type

Diagram.COMPONENT_FAMILY

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 :)

1 Answer
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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.