-
1. Re: Creating dynamic decision graphs in Richfaces
mcmurdosound Dec 14, 2011 8:43 AM (in response to haukegulich)1 of 1 people found this helpfulMaybe creating an own component would be a nice approach.
public class ChartComponent extends UIOutput {
public static final String COMPONENT_TYPE = "uicomponents.ChartComponent";
public static final String COMPONENT_FAMILY = "uicomponents.ChartComponentFamily";
public static final String RENDERER_TYPE = "uicomponents.ChartComponentRenderer";
@Override
public String getFamily() {
return COMPONENT_FAMILY;
}
@Override
public String getRendererType() {
return RENDERER_TYPE;
}
}
Renderer:
public class ChartComponentRenderer extends RendererBase {
@Override
protected Class<? extends UIComponent> getComponentClass() {
return ChartComponent.class;
}
@Override
protected void doEncodeBegin(ResponseWriter writer, FacesContext context,
UIComponent component) throws IOException {
writer.startElement("span", component);
writer.writeAttribute("id", component.getClientId(context), "id");
write your html / js / xml code here
You'll need to add your component and renderer to the faces-config.xml and a taglib to become usable in a facelet.
Like:
<component>
<component-type>uicomponents.ChartComponent</component-type>
<component-class>XXXXX.ui.components.ChartComponent</component-class>
</component>
<render-kit>
<renderer>
<component-family>uicomponents.ChartComponentFamily</component-family>
<renderer-type>uicomponents.ChartComponentRenderer</renderer-type>
<renderer-class>XXXXX.platform.ui.components.ChartComponentRenderer</renderer-class>
</renderer>
taglib:
<tag>
<tag-name>chart</tag-name>
<component>
<component-type>uicomponents.ChartComponent</component-type>
<renderer-type>uicomponents.ChartComponentRenderer</renderer-type>
</component>
</tag>
You can even rerender this component to update the svg image etc.
-
2. Re: Creating dynamic decision graphs in Richfaces
haukegulich Dec 14, 2011 9:46 AM (in response to mcmurdosound)Hi Christian,
thanks for your reply and your help. I never created an own component before, so I have no idea where to put the <tag> tag. Does is belong to the faces-config.xml file? Eclipse tells me that this is not allowed there.
I also read something about create own components, but I couldn't find the information with the <tag> thing.
Will ne new tag (chart) appear on eclipse as well? Which taglib does this component belongs to? Do I need to write <f:chart/> ?
If I understand you right, the <f:chart/> will create html output which I can dynamically generate? That would solve my problem :-)
Thanks a lot,
Hauke
-
3. Re: Creating dynamic decision graphs in Richfaces
mcmurdosound Dec 14, 2011 9:52 AM (in response to haukegulich)1 of 1 people found this helpfulI had to create a taglib first:
my.taglib.xml:
<?xml version="1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://www.XXXXX.de/mytags/jsf</namespace>
<tag>
<tag-name>chart</tag-name>
<component>
<component-type>uicomponents.ChartComponent</component-type>
<renderer-type>uicomponents.ChartComponentRenderer</renderer-type>
</component>
</tag>
</facelet-taglib>
and register it it the web.xml:
<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>
/WEB-INF/facelets/tags/my.taglib.xml;
</param-value>
</context-param>
usage in facelets:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
...
xmlns:my="http://www.XXXXX.de/mytags/jsf"
...
<my:chart />
-
4. Re: Creating dynamic decision graphs in Richfaces
haukegulich Dec 14, 2011 10:45 AM (in response to mcmurdosound)Hi Christian,
thanks again
I am getting closer, but now I need to go home because it was a long day with a lot of trying out :-)
In eclipse I get this error when I go on this line :
xmlns:my="http://127.0.0.1:8080/mytags/jsf"
NLS missing message: CANNOT_FIND_FACELET_TAGLIB in:
org.eclipse.jst.jsf.core.validation.internal.facelet.messages
is that right, that I need to put here my localhost machine? I think so, because we defined that in the web.xml file before.
The page doesn't print the span-tag, it prints <my:chart/>. I expected to see <span id="xxx" /> in my html code.
Do I need to do something special with the ResponseWriter at doEncodeBegin. The method is void so I can't pass the result somewhere else.
Thanks a lot and I will continue trying tomorrow.
Many greetings,
Hauke
-
5. Re: Creating dynamic decision graphs in Richfaces
mcmurdosound Dec 14, 2011 5:11 PM (in response to haukegulich)sorry, no:
xmlns:my="http://127.0.0.1:8080/mytags/jsf" this doesn't have to be the address of your server.
Maybe this article could be useful: http://www.ibm.com/developerworks/java/library/j-facelets/ at about half down the page there is an example how to create an own taglib.
I've not yet used svg before, so there's no experience on my side. There might be much easier solutions.
http://www.java-tips.org/java-ee-tips/javaserver-faces/using-ajax-with-non-markup-in-jsf-2.html
-
6. Re: Creating dynamic decision graphs in Richfaces
haukegulich Dec 15, 2011 1:14 AM (in response to mcmurdosound)Hi Christian,
I've got that working now. Here is what I did:
I added this to web.xml
{code:xml}
<context-param> <param-name>javax.faces.FACELETS_LIBRARIES</param-name> <param-value>/WEB-INF/custom-taglib.xml</param-value> </context-param>
{code}
Then I created this custom-taglib.xml file
{code:xml}
<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://127.0.0.1:8080/custom-taglib</namespace>
<tag>
<tag-name>custom</tag-name>
<component>
<component-type>mycustom</component-type>
</component>
</tag>
</facelet-taglib>
{code}
and I created the class MyCustom.java
{code}
package de.hauke.client.playground;
import java.io.IOException;
import javax.faces.component.FacesComponent;
import javax.faces.component.UIComponentBase;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
@FacesComponent(value = "mycustom")
public class MyCustom extends UIComponentBase {
@Override
public String getFamily() {
return "custom";
}
@Override
public void encodeEnd(FacesContext context) throws IOException {
Document document = DocumentHelper.createDocument();
Element root = document.addElement("svg");
root.addAttribute("xmlns", "http://www.w3.org/2000/svg");
root.addAttribute("version", "1.1");
Element border = root.addElement("rect");
border.addAttribute("width", "700");
border.addAttribute("height", "550");
border.addAttribute("style", "fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)");
Element text = root.addElement("text");
text.addAttribute("x", "30");
text.addAttribute("y", "30");
text.addAttribute("fill", "black");
text.setText("Das ist der Text");
Element rect = root.addElement("rect");
rect.addAttribute("x", "30");
rect.addAttribute("y", "30");
rect.addAttribute("rx", "10");
rect.addAttribute("ry", "10");
rect.addAttribute("width", "100");
rect.addAttribute("height", "30");
rect.addAttribute("style", "fill:red;stroke:black;stroke-width:2;opacity:0.5");
Element polyline = root.addElement("polyline");
polyline.addAttribute("points", "0,40 40,40 40,80 80,80 80,120 120,120 120,160 160,160 160,200 200,200 200,240 240,240 240,280 280,280 280,320 320,320 320,360 360,360 360,400 400,400 400,440");
polyline.addAttribute("style", "fill:white;stroke:red;stroke-width:4");
ResponseWriter responseWriter = context.getResponseWriter();
responseWriter.startElement("div", null);
responseWriter.write(document.asXML());
responseWriter.endElement("div");
}
}
{code}
where I anotated the name of the new component and extended UIComponentBase and overwrote encodeEnd method. There I created a dom4j document, put all the tags I needed for svg in, and passed that to the responsewriter.
Finally I create a xhtml page like this:
{code:xml}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:cu="http://127.0.0.1:8080/custom-taglib">
<h:outputText value="WEBCAM"></h:outputText>
<cu:custom/>
</html>
{code}
and that is working.
But I still have a problem with displaying the svg because firefox cuts the graphic half way. IE displays it completly. But that is a different problem.
Thanks so much for bringing me to the right track.
Many greetings,
Hauke