Custom UI component tags - ease of use

Ideas
#1

Hi,

during the development of Wizard – CUBA Platform I was exposed to creating custom UI components tags for CUBA.

It turns out that the way how to write it was not very intuitive for me and therefore I struggled a lot in order to write this extension. I got great help from @artamonov and so I was able to pull if off finally. Still the way to achieve that was different from what I experiences in other technologies.

The following steps have to be done in order to create a custom component:

  • create UI component XML definition
  • create UI component loader interface & impl
  • create UI component interface & impl

(see: Integrating a Vaadin Component into the Generic UI - CUBA Platform. Developer’s Manual)

React custom components

Lets take the React example as one technology which has very good support for custom components.

Component definition

const HelloWorld = ({name}) => (
 <h1>{`Hi ${name}`}</h1>
);

Component Usage

<HelloWorld name="Yuriy" />

Its actually super easy to create those components. And with that a mindset shift happens, because all of a sudden it is possible to easily create abstraction in the UI definitions. This leads to use them all over the place and with that create business relevant components. So instead of dealing with <table> you can think of <masterDataTable> & <summaryTable> or something that is more related to the application. They will just delegate to table at the end of the day, but still add their custom adjustments to the table component.

Grails Taglibs

In Grails it is also fairly easy to create those view-helper abstractions.

Component definition

class HelloWorld {
  def hello = { attrs, body ->
    out << "Howdi, ${attrs.name}"
  }
}

Component usage

<g:hello name="Yuriy" />

I know that for CUBA this is a different story for different reasons, but I was thinking if it is possible to create a similar ease of use functionality for CUBA developers as it is in other technologies.

I saw Define a custom Component through composition of existing ones - CUBA.Platform as an Idea on how do composition of components, which is somewhat similar.

This is an open question and I’m not sure how the solution to it could look like. But what I see is that there is a need for easily creating custom components that are either directly JS based or a composition of other existing components.

Bye
Mario

#2

Hi,

At the moment there are two features that could simplify this:

Unfortunately, they are not implemented yet and will not be included to 7.0 beta. We will try to deliver these new features with the final 7.0 release.

#3

I see that this ticket is still scheduled for the 7.0 release.

I have a pretty important use case that i’ve been delaying for quite some time now until this feature will be available.

Do you have any idea on a timeline?

thanks,
Tom

#4

I’m sorry, we will not be able to deliver composite components feature as part of 7.0 release line.

We have introduced JavaScriptComponent that greatly simplifies custom JavaScript components, but composite components are not that simple and we will continue working on them in 7.1.

#5

Also, you could use Fragments instead of composite components. They provide reusable screen parts and fill almost the same use cases as composite components.

#6

hi @artamonov,

If I get the fragments right, then they are “just” the new version of a frame, right?

Can you show us an example of how you would achieve a <HelloWorld name="Yuriy" /> like in the React example from above?

Bye
Mario

#7

I agree that now it is not so easy and we cannot achieve declarative configuration with Frame / Fragment, as it requires imperative calls from UI controller. Component has different life cycle and it is all about inheritance while Fragment is delegate model. That’s why we are planning to implement composite components. Unfortunately, it takes time.

#8

Hi,

That’s just fine. I was just curious if there is a similar solution with fragments, that is something like <fragment screen=“hello-world“ params=“name: Yuiry“ /> or something along those lines. Just because you mentioned it explicitly.

But if it is planned, that is also just fine… :slight_smile:

#9

the thing is, in vaadin it’s easy to make some composite components.

So basically, we’re actually losing some fundatmental behavior here. Is there at least a possibility to create vaadin compostite components and wrap these?

#10

Of course you can use all the features of Vaadin in platform based applications! I’m talking about full support of XML declarations and reusable components based on UI components of the platform.

The process should be: define XML layout and attach custom class that provides additional API, then just use it as <my-element> in screens with custom attributes. Vaadin Composite and CustomComponent is not enough to implement this, moreover it is not required for our implementation because CUBA uses interfaces and not classes of UI components.

#11

I think this is not accurate. I’ve developed a full custom component which can be used also declaratively. See: GitHub - mariodavid/cuba-component-wizard: This application component let's you create UI wizards through a specific UI component DSL

The point was just that it is quite complicated. This was 70% based on me not knowing the building blocks. 30% based on missing abstractions / documentation. My concern is to get rid of the 30% so that i can concentrate on learning the new abstraction and go for it.

Bye
Mario

3 Likes