Eclipse Community Forums: Eclipse Scout » Custom Field with additional state

Home » Eclipse Projects » Eclipse Scout » Custom Field with additional state

Custom Field with additional state [message #1840832]

Mon, 26 April 2021 06:50

Eclipse User

Hello,
I am trying to implement a custom BigDecimal field with an additional boolean state (lets call it "calculated") that is also part of the model.

The intended use is:
If the calculated state is true then the field is displayed as a read only field with the value from the form data (calculated in the server and persistet in the database).
If the calculated state is false then it is a normal BigDecimal field, which can be edited (and persistet in the database).
I would like to display the state as an additional icon inside of the input field (like the eye-icon in password fields) which can be toggled by clicking on it.

I think I have at least 4 ways to implement this:
A) a borderless group box with a BigDecimalField and a master BooleanField
B) a borderless group box with a CustomBigDecimalField and an invisible master BooleanField. The state of the hidden BooleanField has to be synchronized with the "calculated"-state of the CustomBigDecimalField
C) a CustomBigDecimalField which also implements ICompositeField and contains an invisible BooleanField
D) a CustomNumberField for a CustomBigDecimal which holds the value of the BigDecimal plus the calculated state

Does anyone have any other ideas or can give me a hint as to which option I should investigate further?

Thanks.
Nils

Re: Custom Field with additional state [message #1840889 is a reply to message #1840832]

Wed, 28 April 2021 04:41

Eclipse User

Hi Nils

> I would like to display the state as an additional icon inside of the input field (like the eye-icon in password fields)
In order to place an icon inside a field, you need to write a custom JavaScript widget (take a look at the SmartField.js for instance). This cannot be done with Java only.

As for your Java-only options: I would solve that with an AbstractSequenceBox that is a composite of an AbstractStringField and an AbstractBooleanField (aka checkbox). You could style the checkbox differently in the UI by using a @ModelVariant. The sequence box handles all the state logic, like setting the string field to read only when the calculated flag is set. It register property change listeners to update the two fields when something on the model changes.

Instead of the BooleanField you could also simply add a property "private boolean m_calculated" to your AbstractSequenceBox and use an AbstractImageField to display two different icons depending on the calculated state.

In Scout this concept is called "Template Fields". You find additional infos on that subject here:
https://eclipsescout.github.io/11.0/one-day-tutorial.html#sec-contacts_form_templatefields

Cheers
André

Re: Custom Field with additional state [message #1840891 is a reply to message #1840889]

Wed, 28 April 2021 05:12

Eclipse User

Hi André,
this sounds very promising. I'll try this out.
Thank you.
Nils

Re: Custom Field with additional state [message #1840974 is a reply to message #1840891]

Thu, 29 April 2021 11:18

Eclipse User

Hi André,
it worked like a charm and I didn't have to write a single line of JavaScript code.
I tried to use the @ModelVariant annotation, but for that I would have had to define a custom JavaScript implementation of the field. Maybe I used it incorrectly but instead I now used getConfiguredCssClass.
Here is a demo screenshot:
index.php/fa/40422/0/

Thanks again,
Nils

Attachment: calc_widgets.png
(Size: 13.53KB, Downloaded 309 times)

Re: Custom Field with additional state [message #1840994 is a reply to message #1840974]

Fri, 30 April 2021 01:15

Eclipse User

Hi Nils

Your new field looks great, good job! :) You're right: the @ModelVariant is indeed only needed when you need to change the behavior of an existing JS widget or need to make changes to DOM of the widget. For that you must write JavaScript. For a lot of cases setting a CSS class and do some styling with pure CSS/LESS is sufficient.

Cheers
André

Previous Topic:	Microsoft Azure App Service deployment error
Next Topic:	Session Unload Error Page

Goto Forum:

-=] Back to Top [=-

Current Time: Sun Apr 27 22:03:04 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter