I have been working on a declarative XML-based language for Vaadin user interface definitions. Also as a by-product I have implemented an annotation-based way to declaratively bind methods to work as a data source or an event handler for a Vaadin component. The work has largely been inspired by the
xmlui add-on by
Joonas Lehtinen .
Best place to get started is to download the JAR from
Directory and then read the README (including quickstart instructions) at the
Clara project page . Also I deployed an online
demo application that can be used for playing around with the XML syntax.
Currently the project is in a very early stage but I still wanted to release something early to get some feedback from the Vaadin community. So, please let me know if you try out the add-on and have any questions/ideas/feedback. Thanks!
*) The project logo is a reference to one of my favorite movies Back to the Future (part III).
Thanks for the comments! You’re absolutely right about the naming. I’ll come up with a new name for the ViewInflater. Actually the term inflate comes from Android where it’s used for instantiating an XML layout into corresponding objects. I’ll reconsider that also.
Good Job (+1) from me
I am doing more or less the same thing also and I am trying to provide Visual IDE support… you can see some screenshots from the following link
I agree with Joonas’s suggestions and more suggestions from my side
a declarative ui component (call Alayout.xml) should be referenced inside another declerative ui (call it BLayout.xml). And components of Alayout.xml should be accessable from BLayout.xml (I mean inside the controller of the BLayout.xml).
May be lazy declarative ui component loading(inflating) should be provided.
Cool. Definitely going to follow the progress of this- maybe even try out some ideas of my own and provide some feedback later. At this point wanted just to say that keep up the good work!
Hei, Teemu !
Great work ! Did Anroid layouts inspired you with Clara ? Because it looks very similar (especially for me, after megabytes of written ones :))
Would be also nice if we can drop xml’s into the theme/layout standard location for custom layout and load them like LayoutInflater.load(“xyz.xml”)
Keep up the great work !
Will try it in the meantime in my current project as well !
and sorry for a delayed response. I haven’t been reading the forum too actively while on my summer vacation. Anyway, thanks for your comments. I have done some work on Android stuff and I guess that also had some influence on the syntax. Standard location for the layout files would be a good idea. I’ll add this feature in a future version of the add-on. Thanks!
Hi. Greate job )
I hope to see a stable version =). Finally i can say goodbye to SmartGWT )
I develop electronic document and ur addon it’s perfect for custom documents. So if u need to test or any help, write to me
And some bugs (mb)
Attribute sizeFull=“true” doesn’t work
Attribute width in “VerticalLayout” , doesn’t work. Any value that i wrote == 100% size
Thank you very much for the kind words and encouragement. The width/height handling is clearly a bug. I created an
issue for this in GitHub and it will be fixed for 0.2 release (actually already made a quick fix that I’ll commit after some clean up).
I just released a version
0.2.0 0.2.1 of the
Clara add-on .
The bugs discussed in this thread should now be fixed and there is an option to add the layout XML files to
VAADIN/layouts directory to simplify the loading of the layouts. Also you can provide
AttributeInterceptor instances that can be used to make some runtime modification to the attributes defined in the XML file (for example to internationalize captions). The API has also gone through some changes, so you’ll need to make some changes to your code.
See the
Directory page and
README for more details. And as always, any feedback is more than welcome!
Teemu
Edit: Version 0.2.0 had some unfortunate issues with the packaging and I had to quickly release version 0.2.1 to replace it.
I just released the version 0.3.0 of my
Clara add-on . If you are already using Clara, your application will need some changes for this version. See below for release notes (also listed in the Vaadin Directory page) and more detailed instructions on the
Quickstart .
Clara 0.3.0 (released October 28th 2012)
■ Namespace “urn:vaadin:com.vaadin.ui” is now “urn:package:com.vaadin.ui”.
■ The namespace of core Vaadin components (mentioned above) is now also optional.
■ Naming convention for layout attributes (for example “layout_componentAlignment”) is now replaced with a proper namespace “urn:vaadin:layout” (see examples for details).
■ The id attribute is now mapped to debugId property of Vaadin components.
■ New class Clara now acts a public API simplifying the usage of this add-on to few static method calls.
■ InflatedCustomComponent class is now gone and Clara always returns the actual root component.
■ Improved
demo application .
As always, please let me know if you have any comments or questions about my add-on. Also note that currently only Vaadin 6.x is supported but Vaadin 7.x support is coming soon.
Teemu,
Very nice work! Reallylike the annotations ideas.
Have you seen the
VulComposer addon? It seems similar. I like the cleaner XML syntax, but would appreciate your views.
Also, any comments on how you would use / add addon components in addition to the regular Vaadin widgets?
I am leaning to adopting VulComposer because of its similarity to ZK 5.x whch I worked with for a few years, but Clara has some very nice ideas too!
Regards,
Anthony
thank you for the feedback. I haven’t looked into the VulComposer add-on in detail (yet) but it sure looks quite similar to Clara. Unfortunately the project might abandoned judging by the commit log (last commit from August 2010).
Clara supports any add-ons or custom Vaadin components if you provide the proper namespace. See the code example below with my
RatingStars add-on used as an example.
<VerticalLayout xmlns:a="urn:package:org.vaadin.teemu.ratingstars">
<a:RatingStars id="rating-field" caption="Add-ons work too" />
</VerticalLayout>
Thanks Teemu,
I agree VulComposer does appear to be a bit zombie.
On the XML syntax, I’m not a major fan of XML at the best of times, and I understand the need for the URN, but is there any other way to simplify the syntax? One small suggestion would be to either make the component name case insensitive, or all lower case, which is what I liked about VulComposer, very quick to write, no URNs etc.
As I think I mentioned, I have a lot of experience with ZK and the XML syntax they use is very clean in their case, and it is very feasible to write a very decent UI in a text editor.
Which is what I like about Clara as a concept. Plus, having a Back to the Future link never hurts.
Hi Teemu,
I’m starting a Vaadin 7 project and wanted to also use Clara as well. I’ve run into a small issue- how do I declare an option group (i.e. Radio Buttons)?
The … part works fine. However, what do i fill inside the XML with? I’ve tried using Button but it just shows a regular button, I’ve also tried plain text which produces nothing.
The syntax for OptionGroup would need me to call .addItem(…) in the code. Any suggestions?
I understand I can reference it with @UiField and then add the details in the code of controller. Which raises a second question, what method is called in the controller before or after initialisation of the Clara object into regular Vaadin?
at least for the moment there is no way to fill the data via XML, but you should use the databinding with @UiDataSource instead.
Let me use the demo application to illustrate my point:
See the
DemoController class of the demo application. To be more specific, see the method
getPersonContainer() which is annotated with @UiDataSource(“person-list”) annotation.
[/font] element in the example with an [font=Courier New]
OptionGroup
[/font] element bound to the same data source by copying the line from below:
[font=Courier New]
[/font]
Now you should see radio buttons with two options presented.
Currently no callback methods are called before or after initialization. Of course you could call some init method from your own code after calling the
Clara.create method. Perhaps I could provide some way to define callback methods. I’ll need to think about this before Clara 1.0 release.
My suggestion would be to have an annotation such as @Init which the Clara.create method can call after building the UI (assuming the @UiField bindings are done). This would allow any post create but pre-display to be done.
The only potential issue is that when @Init is called, the component has not yet been added to the main page… not sure if this would be a problem.
*) The project logo is a reference to one of my favorite movies Back to the Future (part III).
Here are quick comments.
