Clara - Declarative UI and Bindings for Vaadin Framework

Flow
21

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
22


Clara 1.0.0-beta1
 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).

23

Ten months after the first experimental version was uploaded into the Vaadin Directory, I finally released the first stable 1.0.0 version of Clara add-on today.

Many thanks for all the feedback, contributions, bug reports and ideas I’ve gotten from the community. Of course the work does not stop here and I already have some ideas for future releases. I’m also planning to improve the documentation and provide more comprehensive tutorials.

Download the add-on from
Vaadin Directory
 or use Maven/Ivy and let me know what you think. Thanks!

  • Teemu
24

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.

25

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

26

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

27

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

28

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

29

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

30

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.

31

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.

32

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());
33

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

34

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

35

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

36

Hi,

I have created a maven plugin to generate xml schemas for clara.

https://github.com/kumm/claraxsd-maven-plugin

Feedback is welcome.

37

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

38

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”

39

Thanks for the eclipse info.
Eclipse maybe check the protocol in the url. And well… “clara://” is not valid. yet :wink:
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.

40

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?