Released version Jmix 2.2

Released version Jmix 2.2

We have released a new version of JMIX 2.2.

As a reminder, Jmix is ​​an open source platform for rapid development of B2B web applications in Java. It is built on the technological core of Spring Boot, includes tools for the productive development of fullstack applications based on IntelliJ IDEA Community Edition, a visual BPMN modeler and ready plug-in add-ons. The platform helps in the development of both typical CRUD applications and large-scale corporate information systems. You can get to know Jmix more closely on the website https://www.jmix.ru.

What’s new in version 2.2?

Most importantly, Jmix Studio has become free for small projects. If the number of entities and roles in the project does not exceed 10, there is no large data model and high security requirements, the premium RAD features of the platform can be used for free. Learn, experiment, create pet projects or even small-scale commercial applications!

Full information about the changes is available on the documentation page What’s new.

This article provides an overview of the main features of the new version.

Charts application

Perhaps the most notable new feature in Jmix 2.2 is the long-awaited addition of Charts. It integrates Apache ECharts, an open source JavaScript charting library, into the Jmix UI. Now you can use the full power of ECharts charts by customizing them via XML or Java in your Jmix application, and easily connect charts to server-side data just like other UI components.

For example, for an entity VehicleCountwhich stores the number of different vehicles by year in attributes cars, motorcycles, bicycles and yearYou can customize the chart to visualize the data as follows:

<data>  
    <collection id="vehiclesDc"  
                class="com.company.demo.entity.VehicleCount">  
        <fetchPlan extends="_local"/>  
        <loader id="vehiclesDl" readOnly="true">  
            <query>  
                <![CDATA[select e from VehicleCount e order by e.year]]>  
            </query>  
        </loader>  
    </collection>  
</data>
<layout>
	<charts:chart id="chart">  
	    <charts:dataSet>  
	        <charts:source dataContainer="vehiclesDc"  
	                       categoryField="year"  
	                       valueFields="cars motorcycles bicycles"/>  
	    </charts:dataSet>  
	    <charts:series>  
	        <charts:bar name="Cars"/>  
	        <charts:bar name="Motorcycles" stack="stack"/>  
	        <charts:bar name="Bicycles" stack="stack"/>  
	    </charts:series>  
	    <charts:xAxes>  
	        <charts:xAxis/>  
	    </charts:xAxes>  
	    <charts:yAxes>  
	        <charts:yAxis>  
	            <charts:axisLabel formatter="{value}"/>  
	        </charts:yAxis>  
	    </charts:yAxes>  
		<charts:title text="Vehicles" subtext="By Year"/>  
		<charts:legend/>
	</charts:chart>

As you can see, the chart is connected to the data container using an element source and defines how to display the data in the element series. The resulting diagram is shown below:

We tried to make the XML and Java chart APIs as close as possible to the native JavaScript API of the ECharts library, which makes it easy to customize the chart in Jmix by referring to the comprehensive ECharts documentation.

The Charts application is freely available on the Marketplace and can be used in any project based on Jmix 2.2.

Improvements to the Maps add-on

The Maps add-on received important new features: the ability to display MultiPoint, MultiLine and MultiPolygon, a heat map layer and clustering.

A MultiPolygon is simply a collection of polygons in a single geometry. In the example below, we create a MultiPolygon consisting of two rectangles:

It will be shown on the map as follows:

The clustering function allows you to display a large number of markers on the map by combining them. In the following example, the map shows the most famous cities founded by the Romans:

This is achieved by simply rotating the vector data source per element cluster in the XML screen:

<maps:geoMap>  
    <maps:layers>  
        <maps:tile>  
            <maps:osmSource/>  
        </maps:tile>  
        <maps:vector id="cityLayer">  
            <maps:cluster distance="30">  
                <maps:dataVectorSource dataContainer="citiesDc" property="point"/>  
            </maps:cluster>  
        </maps:vector>  
    </maps:layers>  
    <maps:mapView centerY="41.9" centerX="12.48" zoom="4.5"/>  
</maps:geoMap>

The same data can be visualized in the form of a heat map, where values ​​are represented by color:

The heat map is adjusted with a special layer heatmap with its own data source connected to the same data container:

<maps:geoMap>  
    <maps:layers>  
        <maps:tile>  
            <maps:osmSource/>  
        </maps:tile>  
        <maps:heatmap radius="15">  
            <maps:heatmapDataVectorSource dataContainer="citiesDc" property="point"/>  
        </maps:heatmap>  
    </maps:layers>  
    <maps:mapView centerY="41.9" centerX="12.48" zoom="4.5"/>  
</maps:geoMap>

Improvements in BPM

To shorten the feedback loop when developing processes in Studio, we implemented hot deployment of process definitions to the running application. You can see the button Hot Deploy Process in the top panel of the BPMN designer. The application outputs a message to the log when the process is successfully deployed:

The process form wizard in Studio can now generate a form for the initial event. Such a form will contain a button Start processwhich calls the process engine API.

This wizard also contains a new item Process form for entity instance in the drop-down list Form template. If you choose this option, the wizard will allow you to select or create a type variable Entity. The result will be a process form containing a data container and a field for editing the selected entity.

RichTextEditor component

New component richTextEditorbased on the Quill JavaScript library, allows you to edit text with formatting and save it as HTML:

The component supports working with data and can be easily connected to your data model:

<richTextEditor id="descriptionField" width="100%"  
                dataContainer="stepDc" property="description"/>

Home screen improvements

New component menuFilterField allows users to filter main menu items.

It is enough to place the filter field on the screen and connect it to listMenu:

<menuFilterField menu="menu"
                 placeholder="Search..." classNames="ms-s me-s"/>
<nav id="navigation" classNames="jmix-main-view-navigation" ariaLabel="msg://navigation.ariaLabel">
    <listMenu id="menu"/>
</nav>

Menu filtering in action:

The next improvement related to the main screen is the ability to declaratively define content when there are no child screens open. Use an element for this initialLayout component appLayout:

<appLayout>
    <navigationBar .../>
    <drawerLayout .../>
    <initialLayout>
        <h2 text="Hello world!"/>
    </initialLayout>
</appLayout>

Then the application will look like this:

And probably the most anticipated improvement in this area is the horizontal main menu:

It is implemented using a component horizontalMenuwhich derives the menu structure from the same handle menu.xml. Thus, you can easily replace the standard vertical listMenu to the top horizontal menu at any point in your project. The easiest way to do this is to click New → View and select a template Main view with top menu. If you select the check box Use as default main view in the second step of the wizard, Studio will install the new home screen as an application jmix.ui.main-view-id and in the attribute layout annotations @Route for all existing screens, for example:

@Route(value = "users", layout = MainViewTopMenu.class)

As a result, the new main screen with a horizontal menu will work immediately after launching the program.

Improvements in DataGrid

Double-clicking on a data table row now opens the details screen or, when searching through the list screen, closes the selection. It will be very convenient for desktop users, because now it is not necessary to first select a line and then press a button or menu item.

We’ve also finished working on the filter in the column headers: it can now be displayed in the URL to create a deep link and save the screen state when going to and from the detail view. Use a new element for this dataGridFilter facet urlQueryParameters.

Another useful feature is a new component gridColumnVisibilitywhich allows users to hide and show table columns:

Collection properties in a universal filter

Previously, to filter an entity by its collection attribute using a component genericFilterneeded to define the JPQL condition with join and where– With expressions. Obviously, this was difficult to achieve for the end user.

Filtering for “to-many” links and their nested attributes is now as easy as for “to-one” links: they are displayed in the dialog Add condition of the general filter, and the necessary JPQL conditions are automatically generated by the framework.

In the following example, the list of users is filtered by attribute completedDate linked collection steps:

Shortened assembly time

While hot deploy technology makes it possible to shorten the feedback loop during UI development, it does not apply to business logic development. Therefore, a quick restart of the program remains important.

In version Jmix 2.2, the entity bytecode modification stage (enhancing), which takes a significant amount of time during compilation, is performed only if the data model has changed since the last compilation. So if you work on Spring beans without modifying the entity, the build and restart process is now much faster, especially in projects with large data models.

New code snippets

If your project includes the Reports, Email sending, BPM, or Notifications add-ons, you can use the new snippets related to these add-ons’ APIs.

For example, if you need to run a report when the user clicks a button, you can generate a button click listener method and then drag the snippet Run report using UiReportRunner in the listener’s code. Studio will prompt you for the report you want to run and generate the appropriate code:

The generated code will start working immediately and can be a starting point for further customization.

Add components using wizards

As the collection of UI components expands, it becomes increasingly difficult for beginners to find the right component for a specific task.

So we decided to provide an additional, even more declarative way to create screens Instead of selecting a component from a palette Add Component the developer can run a wizard that prompts a series of questions. The wizard then generates an entire fragment containing pre-configured data components and visual components.

In fact, Studio already included such wizards for DataGrid and data containers, but these wizards were only launched when the corresponding component was explicitly selected from the palette. Now the developer may not be aware of the existence of a particular component and simply choose a wizard that, given its name, fits the task.

In the next video, the master Edit entity attributes creates formLayout with fields connected to the data container:

This feature is currently experimental and we plan to expand it in the future by adding more wizards and making them more useful in different usage scenarios.

Test generation

When you open a project in a new Studio, you will see a new item Tests in the Jmix tools window. Double-clicking on this item will take you to the tools window Project to the catalog src/test/java.

actions New → Advanced → Integration Test and UI Integration Test allow you to quickly create blanks for business logic tests and UI integration tests.

Free Studio for small projects

Last but not least, Studio’s premium RAD features are now available for free for small projects with fewer than 10 entities and roles. This means you get access to all of Studio’s visual tools for exploring, experimenting, and creating personal projects or commercial applications without requiring an active commercial or trial subscription. The only restriction is that these projects must not contain a larger data and security model.

We expect the free tools to make the process of learning and adopting the technology easier for developers, thereby making Jmix accessible to a wider audience.

Conclusion

In the next feature release in June 2024, we plan to implement integration with Apache Superset, the leading open source data visualization platform.

On the Studio side, we’re going to provide an approach to aggregate Liquibase changelogs and actions to quickly convert similar UI components such as entityPicker and entityComboBox.

As always, we’re going to spend a lot of time fixing bugs, adding small features, and improving performance.

Our detailed plan for future releases is available as a project on GitHub. Patches for the current version 2.2 will be released approximately once a month.

We will be glad to see your feedback on our forum!

Thanks to everyone who sent us PRs, shared ideas, suggestions, and bug reports!

Related posts