My company has rolled its own application development framework that’s similar to JSP/Struts/Java EE/rails. For the last 5 years it has been doing its own ajaxish UI quite well, but after seeing Vaadin I see many reasons to stop rolling our own UI and letting Vaadin take care of it.
So I’m working on reimplementing our output layer to use Vaadin. I’ve had pretty good success so far, and Vaadin is a joy to program with… but I’m not sure how to implement one important part of the UI.
My framework allows for XHTML blobs to be emitted to the browser. I’d happily use a Label to do this, however there’s a trick. Our framework provides a few tags in our own namespace to be embedded within the XHTML blobs. For example:
<h:div class=“example”>
This is some text. <h:b>Click <t:action name=“myAction”>here</t:action> to do something.</h:b><h:br/>
<t:if test=“someExpressionEvaluatedOnTheServer”>Some <h:small>conditional</h:small> text</t:if>
</h:div>
Presently our own output driver maintains a w3c Document object that we translate, converting the <t:action> to an XHTML anchor that will do what it needs to do (an ajax submit to the server), and evaluating the <t:if/>, conditionally outputting the child element(s) to the browser.
The CustomLayout appears to be an option. If I modify my existing XHTML outputting code to emit Vaadin’s tag in to a String when it encounters one of our tags, passing that to a CustomLayout and adding Components as it goes. I think my other option is to build a tree of components that encapsulate the elements (probably with Labels, Buttons and Links as leaf nodes)… but that seems like a lot of work and I don’t really wanna think about that for now… My mentor feels that both solutions are lacking and I think he is probably right.
So rather than get caught up designing elaborate solutions, I thought I’d put the problem to the forum and see whether I’ve just missed something obvious. Is the CustomLayout my best option? Is this an intended use case for the CustomLayout?
I think that both Label and CustomLayout will do the trick for you, but there are some differences. I’ll try to summarize the implications:
With Label you would need to write you driver to output anchors that link back to Vaadin application. On the application side you would implement the URIHandler or ParameterHandler to catch those requests. This is pretty fast and straight-forward implementation. Downside is that you will have full page request upon action clicks (as you are working with normal web links).
The CustomLayout solution is like you described. Outputting component placeholders instead of XHTML anchors (link style Button I guess). This way the XHTML is only for the layout (no active web links) and the inserted Vaadin components handle the events using internal communication engine (and you get Button.ClickEvents at server-side). Very easy solution as well and gives you the possibility add different kinds of components later on. However, as you are used to working with inline XHTML anchors and Vaadin components are basically block elements, there might be situations where it just does not fit. Solution is to write a new down-scaled inline version of Vaadin’s Button rendering (that means: rewrite the client-side part of the Button component. In Java, compiled with GWT).
I’d probably go for the Label for a prototype and CustomLayout for a real app.
I’m not sure if I understand the tree solution completely so I don’t comment that one. It might be feasible as you have the DOM tree in your hands, but quickly I don’t see any benefit over these two options.
I put this code on hold for a little while and took a look at other things I need to implement. I found another requirement that is extremely similar my first requirement that also has other components (such as fields and tables) embedded in XHTML… So it seems the CustomLayout is my best (and only) option.
A little annoying that this other requirement is an entirely different code path … but thanks again - I’ve got some refactoring to do.
Thanks again for your pointer here Sami. I’m looking at this project again, thinking more about how I could use CustomLayouts and realise their power. They’ll solve a bunch of problems for me =)