jsf ui components

[tom.baeyens]

any of you experience with developing jsf ui components ?

i want to create a few such components to enable reuse of the tasklist and taskform as components that are usable in plain jsf webapp and portlets.

but i'm trying to figure out when to make a plain jsp tag and when a component is needed.

so far, i think that the tasklist should be a tag and the taskform should be a ui component.

thoughts ?

regards, tom.

[svetzal]

any of you experience with developing jsf ui components ?

We're just about to.

i want to create a few such components to enable reuse of the tasklist and taskform as components that are usable in plain jsf webapp and portlets.

I think we need one to draw the jPDL diagram too... that seems to get good feedback for us, people seem to like the visual reinforcement / reminder of what their process actually is.

Steve

[tom.baeyens]

i almost done reworking the base partipant structure for facelets.

i also switched the task form mechanism to facelets. once it is good enough so that people can read it, i 'll be asking the community for feedback and critiques.

it would be good if we could work our way towards a common code base.

the UI component for the graphical image is a good idea. I think a plain tag is sufficient. Maybe it's a good idea to identify which components we want to make:

i see 1) process image 2) task list 3) startable processes list 4) form

regards, tom.

[svetzal]

it would be good if we could work our way towards a common code base.

Absolutely... better use of our time.

i see 1) process image 2) task list 3) startable processes list 4) form

K, I'm done playing with the facelet app so I have enough of a foundation that I'm comfortable jumping into the process image. Let's see what I can come up with today.

[tom.baeyens]

this is how the xml should look like, i think. (some of the xml in the current tag is done by me and very awfull:-)

<div style="position: relative; background-image: url('processimage.jpg'); height: 595px; width: 639px;">
 <div style="position:absolute; left: 250px; top: 50px; border: red 4px groove; width: 192px; height: 32px;"></div>
 <div style="position:absolute; left: 50px; top: 0px; border: red 4px groove; width: 192px; height: 52px;"></div> </div>

[tom.baeyens]

also the calculation should take into account the browser. i want it to work on IE and firefox. They have different opinions on what the height and width mean.

that is why the borders are not always correctly displayed in the current app.

i can always build this difference in myself afterwards.

[svetzal]

OK,I've posted a distribution of my facelet console that includes a JSF component to display and mark up the jPDL diagram.

I also found a latent dependency (jaxen 1.1-beta-6, required by dom4j) - this was tricky, no error messages until I set up a test class with a main method and ran it inside Eclipse...

The component is extremely simple, I included the xml descriptor to enable it to be used inside facelets. The only thing I really spent any time on was refactoring the metadata extraction for the diagram info into an external Helper class. It still uses the same servlet to deliver the jpg image.

Relevant JSF component files:

org.jboss.jbpm.jsf.HtmlDiagramHelper.java
org.jboss.jbpm.jsf.HtmlProcessImageTag.java
org.jboss.jbpm.jsf.HtmlProcessImageUIComponent.java
WEB-INF/jbpm.tld
WEB-INF/jbpm-taglib.xml (adapter for facelets)
WEB-INF/faces-config.xml (shows component registration)
task.xhtml (shows usage)

You can download it from http://office.threewisemen.ca/maven/jboss/wars/jBPM-Console.zip

[svetzal]

Oh, I checked the DIVs for the diagram and they overlay nicely in Firefox 1.5 and I.E. 6.

However the rest of my layout is a bit broken in I.E. :) I'll poke around with that later.