Jmix 1.4 release candidate

[gorelov (Gleb Gorelov)]

Hi,

@klaus

Ok, thanks, is it also already possible to define a custom component for usage in the view descriptor xml? So I could make a e.g. <myapp:myupload id="testUpload" /> element?

Sure. The process of registering any UI component is the same as for the classic UI. You need to provide a io.jmix.flowui.sys.registration.ComponentRegistration bean, e.g.:

@Configuration
  public class ComponentConfiguration {
 
      @Bean
      public ComponentRegistration extJmixButton() {
          return ComponentRegistrationBuilder.create(MyUpload.class)
                  .withComponentLoader("myupload", MyUploadLoader.class)
                  .build();
      }
  }

XSD schema doesn’t require registration.

@klaus

another question: is view extending already possible? (like Extending Functionality :: Jmix Documentation )

Currently, there is no extend attribute in XML descriptor, so if any view needs to be extended, then you need to override it by providing a view with the same Id.

Regards,
Gleb

[gorelov (Gleb Gorelov)]

Hi,

@mortoza_khan

ResponsiveSteps setting worked like a charm when defined from controller but it doesn’t work when setting from the xml file.

The ResponsiveStep's minWidth attribute works absolutely the same in XML and Java code as we simply pass minWidth value from XML to the ResponsiveStep constructor without modifications. For proper work of minWidth the size unit must be defined, except 0. We do not plan to alter XML loader logic (e.g. adding default unit size) because it must be the same as Java code.

@mortoza_khan

Theme:
I didn’t come across any option to select of use of customized theme.

1. I expect there will be options in the final version
2. In Vaadin, there is a theme editor which we can download and use in simple steps. How can we do the same in Jmix?

A newly created project already contains extended theme under <root>/frontend/themes/<theme_name> directory. That means that any output from Vaadin Lumo Editor can be easily applied to the Jmix Application, just copy generated code to the style.css file, excluding HTML tags, e.g.:

Regards,
Gleb

[gorelov (Gleb Gorelov)]

@mortoza_khan

or example the column data type attribute in the view XML file can be selected when it is generated.

Could you please describe in more detail? I still don’t get the problem.

@mortoza_khan

You may also consider default alignment like the right alignment for numbers.

We do not plan adding default alignment. if it is needed the alignment can be easily changed using:

• themeNames="align-right" for input fields
• textAlign="END" for DataGrid columns

[mortoza_khan (M Khan)]

Thank you Gleb.
I tried to use Vaadin lumo editor generated styling codes as follows

inteaccpf.css

/* Define your styles here */
<custom-style>
  <style>

    html {
      --lumo-space-xl: 1.875rem;
      --lumo-space-l: 1.25rem;
      --lumo-space-m: 0.625rem;
      --lumo-space-s: 0.3125rem;
      --lumo-space-xs: 0.1875rem;
    }

    [theme~="dark"] {
    }

  </style>
</custom-style>

and getting the following errors-

Webpack Error Close

No issues were found.

WARNING in InjectManifest has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.

ERROR in ./themes/inteaccpf/inteaccpf.css (../node_modules/.pnpm/css-loader@5.2.7_webpack@4.46.0/node_modules/css-loader/dist/cjs.js??ref--5-2!../build/plugins/theme-loader/theme-loader.js??ref--5-3!./themes/inteaccpf/inteaccpf.css)
Module build failed (from ../node_modules/.pnpm/css-loader@5.2.7_webpack@4.46.0/node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(16:3) /Users/mak/Projects/inteaccpf/frontend/themes/inteaccpf/inteaccpf.css Unknown word

  14 |     }
  15 | 
> 16 |   
     |   ^
  17 | 
  18 |

[gorelov (Gleb Gorelov)]

As I mentioned above, you have to exclude HTML tags from generated code, i.e.

<custom-style>
  <style>

and

  </style>
</custom-style>

are not CSS code and must be removed.

[mortoza_khan (M Khan)]

Thank you Gleb, removed the tag and now it’s running. I see the radius has been changed as expected but the dark theme is not working, always showing the light theme.

html {
  --lumo-border-radius: 0.6em;
  --lumo-space-xl: 1.875rem;
  --lumo-space-l: 1.25rem;
  --lumo-space-m: 0.625rem;
  --lumo-space-s: 0.3125rem;
  --lumo-space-xs: 0.1875rem;
}

[theme~="dark"] {
  --lumo-base-color: hsl(214, 87%, 12%);
}

Output of theme (not a dark theme!)

[klaus (Klaus Pfeiffer)]

@gorelov

Currently, there is no extend attribute in XML descriptor, so if any view needs to be extended, then you need to override it by providing a view with the same Id.

Thank you for your answer @gorelov , I’m not sure I understand this point though. Could you please elaborate a bit on this please? How would I deal now with a situatino where I have e.g. an AbstractInvoiceEditView and then two views that extend from this abstract view - e.g. OutoingInvoiceEditView and OfferEditView.

[mortoza_khan (M Khan)]

@krivopustov

Created issue: https://youtrack.jmix.io/issue/JST-3353

This issue has been targeted to 1.4 which is released yesterday but I don’t see this is working!

[krivopustov (Konstantin Krivopustov)]

For Studio issues, assigning Milestone 1.4 when the feature release 1.4.0 is already out means that the issue is targeted to one of 1.4.x patches.

[gorelov (Gleb Gorelov)]

In order to switch to the dark theme variant, you need to set it in the main application class using the @Theme annotation, e.g.:

@Theme(value = "<theme_name>", variant = Lumo.DARK)

Vaadin doesn’t provide runtime variant switching.

Gleb

[gorelov (Gleb Gorelov)]

Sorry, I didn’t get your question right. A view can extend any base class on your choice, the only limitation is that io.jmix.flowui.view.View must be in the inheritance hierarchy.

Gleb

[mortoza_khan (M Khan)]

@gorelov

In order to switch to the dark theme variant, you need to set it in the main application class using the @Theme annotation, e.g.:

Copy

@Theme(value = "<theme_name>", variant = Lumo.DARK)

Vaadin doesn’t provide runtime variant switching.

Gleb

Hi Gleb
Thanks. It worked.

@Theme(value = "inteaccpf", variant = Lumo.DARK)
@PWA(name = "Inteaccpf", shortName = "Inteaccpf")
@SpringBootApplication
public class InteaccpfApplication implements AppShellConfigurator {

    @Autowired
    private Environment environment;

    public static void main(String[] args) {
        SpringApplication.run(InteaccpfApplication.class, args);
    }

[mortoza_khan (M Khan)]

@krivopustov

Yes, you can use ANY Vaadin component as if you were building a plain Vaadin application. An example for file uploading:

Copy

Hi Konstantin
Tried and looks good

A couple of questions:

1. How can we handle if it is an image (byte[])
2. How can we display the file/image on a screen?

The second part of my exchange is:

@krivopustov

The DataGrid component is very different from classic UI tables, so please do not expect the same API and functionality. See the available methods and description in the Vaadin docs .

Hi Konstantin
Thanks for clarifying, we may lose that functionality in Flow to control the cursor. But I hope we’ll not loose many. How can you please help how we use the inline editor in datagrid?

I see in Vaadin grid we can perform it easily as described here and the non-buffered datagrid looks like as follows:

I tried the code-snipped in Vaadin site but it looks like some functions are not recognized in Jmix.

        Grid.Column<BankCashEntryLine> descriptionColumn = bankCashEntryLineTable.getColumnByKey("description");
        Binder<BankCashEntryLine> binder = new Binder<>(BankCashEntryLine.class);
        Editor<BankCashEntryLine> editor = bankCashEntryLineTable.getEditor();
        editor.setBinder(binder);

        TextField description = new TextField();
        description.setWidthFull();
        addCloseHandler(description, editor);
        binder.forField(description)
                .asRequired("Description must not be empty")
                .withStatusLabel(firstNameValidationMessage)
                .bind(BankCashEntryLine::getDescription, BankCashEntryLine::setDescription);
        descriptionColumn.setEditorComponent(description);

        bankCashEntryLineTable.addItemDoubleClickListener(e -> {
            
            editor.editItem(e.getItem());
            Component editorComponent = e.getColumn().getEditorComponent();
            if (editorComponent instanceof Focusable) {
                ((Focusable<Component>) editorComponent).focus();
            }

           
        });

The following lines are not recognized in the code above:

addCloseHandler(description, editor);
 editor.editItem(e.getItem());
            Component editorComponent = e.getColumn().getEditorComponent();

Can you please help?

[gorelov (Gleb Gorelov)]

@mortoza_khan

The following lines are not recognized in the code above:

By default, in the Vaadin’ doc the code snippets are collapsed and display only a Sample related code, hence if you just copy-paste code, it might not work. To see the full sample code you need to expand it

In the full code snippet, you can find the missing method

Gleb

[gorelov (Gleb Gorelov)]

@mortoza_khan

How can we handle if it is an image (byte[])

The Upload SucceededEvent contains the MIME Type of the file, which can be used to recognize file type.

[mgiammarco (Mario Giammarco)]

Is there a “label” component? I cannot find it.

[gorelov (Gleb Gorelov)]

No, instead you can use one of HTML components like span, p, div, headers, e.g.: <span text="Some text content"/>

Gleb

[mortoza_khan (M Khan)]

Thank you Gleb. That’s a nice tips seeing the full-code. Honestly, I didn’t notice until you mentioned.

I have tried but still have something missing in Jmix environment and didn’t appear the Edit column added as well as edit mode of the columns.

I have attached a demo project, it will be appreciated if you please help fixing where is the problem. This will be a very useful in many projects and Views for many developers for sure. BTW, any plan to simplify?

To use, go to CustomerContact Details view and create contact lines and try to edit the lines.
jmixDatagridFlowDemo.zip (232.9 KB)

[mortoza_khan (M Khan)]

@krivopustov

Created issue: https://youtrack.jmix.io/issue/JST-3353

@m.fedoseev I see you’re assigned to this issue. Any plan by when this is going to be available?

[mgiammarco (Mario Giammarco)]

Thanks for reply!
Regarding layouts, are hbox and vbox enough?