Clara - Declarative UI and Bindings for Vaadin Framework

Great work. Looks cool and somewhat familar ;) Here are quick comments.

• I would not use word View in API (ViewInflater) as it has a special meaning in Vaadin 7
• Would inflate/deflate be the best terms for serializing UI. Would load/save be more down-to-earth?
• Controller API looks nice and simple

Nice. I'm doing the same thing ... https://github.com/ahoehma/vaadlets :D

Joonas Lehtinen:

[*]I would not use word View in API (ViewInflater) as it has a special meaning in Vaadin 7
• Would inflate/deflate be the best terms for serializing UI. Would load/save be more down-to-earth?

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

Extending WYSIWYG Vaadin Eclipse Plugin

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.

kinds and goodluck in your master thesis..
Alper.

Andreas Höhmann: Nice. I'm doing the same thing ... https://github.com/ahoehma/vaadlets :D

Alper Turkyilmaz: 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

Extending WYSIWYG Vaadin Eclipse Plugin

Thanks Andreas and Alper for sharing your ideas! I'll definitely take a look of your projects.

Nice to know that I'm not alone in the quest for declarative syntax for Vaadin. :)

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!

Johannes Häyry: 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!

Great! Thanks for the encouragement!

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 !

Dmitri

Dmitri Livotov: 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 !

Dmitri

Hi Dmitri,

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!

- Teemu

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)

1. Attribute sizeFull="true" doesn't work
2. Attribute width in "VerticalLayout" , doesn't work. Any value that i wrote == 100% size
3. How can i declare 100% of size ( width,height)

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

1. Attribute sizeFull="true" doesn't work
2. Attribute width in "VerticalLayout" , doesn't work. Any value that i wrote == 100% size
3. How can i declare 100% of size ( width,height)

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

- Teemu

Hi,

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.

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

Anthony Davie:
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?

Hi 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>

- Teemu

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.

Great component and concept.
Thanks,
Anthony

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 <OptionGroup>...</OptionGroup> 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?

This would be to initialize objects, etc.

Thanks in advance for your response!
Anthony

Anthony Davie: The <OptionGroup>...</OptionGroup> 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?

Hi Anthony,

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:

1) See the DemoController class of the demo application. To be more specific, see the method getPersonContainer() which is annotated with @UiDataSource("person-list") annotation.
2) Open the Clara demo application.
3) Replace the <Table ... /> element in the example with an OptionGroup element bound to the same data source by copying the line from below:
<OptionGroup id="person-list" itemCaptionPropertyId="Name" />

Now you should see radio buttons with two options presented.

Anthony Davie: 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?

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.

- Teemu

Thanks for the super-fast response Teemu!

Teemu Pöntelin:
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.

Thanks again for the prompt response.
Anthony

Anthony Davie: 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.

I'm having a meeting about the final API and features for Clara later this week and this is definitely something I'll bring up in the meeting. Thanks for the suggestion!

- Teemu

is now released in the Vaadin Directory. The API should now be stable and I expect to get the final 1.0.0 release out very soon.

Please notice the two important changes you need to make to your XML files or otherwise you only get errors after upgrading your project from older versions.

• URN namespace identifier changed from "urn:package:xyz" to "urn:import:xyz".
• Parent attribute namespace changed from "urn:vaadin:layout" to "urn:vaadin:parent".

Also now the @UiField annotation only assigns controller fields that are null. The annotated fields that are already assigned to some Component will be used in the component hierarchy instead of creating new instances (see the issue #17 for details).

Really interesting work. One question: the examples only show UIs and Clara.create(stream) returns a Component. Is it possible to define Views for use with a Navigator ? Thanks in advance.

@Edoardo
Should be simple to implement your own com.vaadin.navigator.ViewProvider,
Load the component associated with the view name , check that it implements View , and return the result casted as View.

Excelent work, but i have a question:
How can I make one component ocupy 2 columns in one GridLayout, and how to set the source of an Embedded component via binding annotations

André Silva: How can I make one component ocupy 2 columns in one GridLayout, and how to set the source of an Embedded component via binding annotations

I'm afraid these cannot be easily completed using just XML. In my Clara demo application I have an example of how to extend the Embedded class and provide the source in Java.

See the following links:
ClaraLogoEmbedded.java
DemoApplication.xml

André Silva: Excelent work, but i have a question:
How can I make one component ocupy 2 columns in one GridLayout, and how to set the source of an Embedded component via binding annotations

Andre, Teemu --

I've been looking at the same issue. There does not appear a way to persuade Clara to pass additional arguments to the layout.addComponent() call in the constructor, which appears to be required to get both initial x,y and hspan,vspan. I don't see a way around subclassing Grid to deferring the actual .addComponent() until a secondary call to the subclassed Grid.

Something like deferredGrid.addComponent(c) followed by deferredGrid.setRC(x,y) or deferredGrid.setRCWH(x,y,w,h)
where the set will pop the component out of the holding slot in DeferredGrid.

It's ugly, but seems required by the current implementation of Clara. Thoughts?

-- Sean

Andre, Teemu --

Actually, adding a setPosition handler to the Layout, then removing and re-adding the component when it is called via Clara
l:setPosition() seems to do the trick. Still a bit ugly, but not as bad.

-- Sean

Excellent work.
I'm currently using it in a project deployed in an OSGi container and I'm getting some problems due to the restrictions for the classloaders in the OSGi environment and how the classes are loaded is the component factory.
I could make it work by making a minor modification in the class org.vaadin.teemu.clara.inflater.ComponentFactory. I changed the line

componentClass = Class.forName(qualifiedClassName);

with

componentClass =Thread.currentThread().getContextClassLoader().loadClass(qualifiedClassName);

to use the context classloader what is recommended for OSGi compatibility.

Could you please consider to include that change in the next version?
It would be great to get the add-on packaged as an OSGi bundle. If you are interested on it, I can provide a pom.xml for that.

Oscar Jesus Diez: Excellent work.
I'm currently using it in a project deployed in an OSGi container and I'm getting some problems due to the restrictions for the classloaders in the OSGi environment and how the classes are loaded is the component factory.
I could make it work by making a minor modification in the class org.vaadin.teemu.clara.inflater.ComponentFactory.

Thanks for the feedback and for reporting this issue.

I created issue #22 in GitHub and will look into this when I work on the next release of Clara.

Hi,

is there a way to set a custom TableFieldFactory using your XML syntax? How would I do it in a controller? Something like this?

final Table table = (Table) Clara.findComponentById(content, "myTable");
table.setTableFieldFactory(new CustomTableFieldFactory());

Kai Stapel: Hi,

is there a way to set a custom TableFieldFactory using your XML syntax? How would I do it in a controller?

Unfortunately there is no way to set a custom TableFieldFactory in the XML. The code snippet you posted should work, but as another option you could also use the @UiField("myTable") annotation on an instance variable instead of Clara.findComponentById.

Best regards,
Teemu

Hiii

For my app, the users(admin) would be creating their own forms and I create the clara layout xml based on the admin placing of the components in the workbench. I use the generated xml to pass it to clara to generate the components needed when a normal user logs in. Essentialy the admin has the rights to create a lot of forms on the fly in runtime, For those components in the XML for which the id is defined and the corresponding annotation is there, the call backs work but what about those omponents which I add in the xml layout and the id is not defined as an annotation in the controller class.Is there some function in the controller which would catch all possbile events and I in the controller I have some common  function where I decide which function to call from where, 
Fo eg, I want to dynamically assign a new action for a new button I add in the template, but I might not be having an annotation defined, The intention is that I wanna allow the users to create is own forms on the fly in runtime and also define the actions to be performed at the backend

Regards
Kartik

Hi,

Thanks for the very good work. It was quite easy for me to switch to Clara for some existing test components. I prefer the clear XML structure of the component tree.

Perhaps you can even improve the Clara experience:
Since there is no XSD, yet, I had some typing errors for the XML attribute names and sometimes I did not know, if there exists a matching setter in Java (e.g. clickShortcut="ENTER" does not call setClickShortcut(int keyCode, int... modifiers) because the parameter count is not 0 or 1).

These errors are not signalled by Clara and I had to manually verify the result in the browser (AttributeHandler.assignAttributes simply ignores attributes when no setter is found). Is there a way to set be more strict, when attributes are assigned? (An XSD would be even more helpful, of course.)

Best regards,
Winfried
 

Tamás Kimmel:
I have created a maven plugin to generate xml schemas for clara.
https://github.com/kumm/claraxsd-maven-plugin

 

Awesome! This sounds really good. I will definitely give this plugin a try.
 

Tamás Kimmel: Hi,

I have created a maven plugin to generate xml schemas for clara.
https://github.com/kumm/claraxsd-maven-plugin

Feedback is welcome.

Many Thanks! It worked for me in Eclipse.

To add the generated 'catalog.xml':
Preferences > XML > XML Catalog > User Specified Entries > Add > Next Catalog

To make schema validation work in my XML files, I had to replace "clara:" with "file:". E.g.
xsi:schemaLocation="urn:import:com.vaadin.ui file://myproject/com.vaadin.ui.xsd"

Thanks for the eclipse info.
Eclipse maybe check the protocol in the url. And well... "clara://" is not valid.  yet ;)
Can you try with "http://"?
For example generate with: '-D baseSystemId="http://myproject/clara/"'
I think it would be less confusing than "file://".
If it works, I will change the default protocol in systemID to http.

Webstar Csoport: Thanks for the eclipse info.
Eclipse maybe check the protocol in the url. And well... "clara://" is not valid.  yet ;)
Can you try with "http://"?
For example generate with: '-D baseSystemId="http://myproject/clara/"'
I think it would be less confusing than "file://".
If it works, I will change the default protocol in systemID to http.

Yes, "http://" works.

In my "catalog.xml" the attribute "xml:base" has an absolute URL (starting with "file:///C:/"). Since I want to check-in this file (my schema will not change to often), it won't work for others. Eclipse still works fine, if I remove this attribute completely. Does this work in Netbeans, too?