The new release of CUBA Platform and CUBA Studio has recently been published. While in version 6.3 we focused on architectural and technical improvements, this release introduces a number of features, that make development faster and more convenient for developers. The new version brings new visual components for the generic user interface, a new mainstream validation mechanism, an engine for an alternative JavaScript front-end generation and other important improvements.
This article covers major enhancements of Platform and Studio. The full list of changes is available in the corresponding release notes:
platform-6.4-release
studio-6.4-release
Contents
Studio Templates
Screen Layout Controls
Lookup Type
Value Datasources
Bean validation
Cross-Datastore References
Transaction Listeners
Side Menu
Data Grid
Pivot Table
Polymer UI
Summary
Studio Templates
Previously you could use only a few hard-coded screen templates. Now Studio offers an extendable and customizable set of templates for creation of Generic UI screens and Polymer UI components.
You can open the list of Generic UI templates by clicking New on the Generic UI navigator tab, or by selecting an entity and clicking New and then Generic UI screen. In the latter case, the list of templates will be filtered and only the templates relevant to the entities will be shown.
You cannot edit templates distributed with Studio, but you can copy them and modify for your needs. So if you want to create a custom template, select a base template and click Copy template. Then you will be able to modify the template properties and write code for the screen XML descriptor, controller and localized messages. The template content will be stored in the studio-templates folder of your project and you can commit it to your source code repository.
The same is true for Polymer UI templates, the difference is that the template will contain an HTML file with the Polymer component.
Screen Layout Controls
Using controls on top of the screen layout designer, you can specify the canvas size or toggle lines designating component borders. If the canvas size is set to absolute values like 1600x900 and the content does not fit, the canvas will display scrollbars.
Lookup Type
When defining a reference property, you now can specify how this reference should work in UI. By default, a reference is selected from a lookup screen, but you can also choose the DROPDOWN value to select the reference from a drop-down list, and specify what actions will be present in the PickerField component. This settings affect the following:
-
If the lookup type is set to DROPDOWN, Studio will generate options datasource when scaffolding editor screen. Besides, the Filter component will allow a user to select parameter of this type from a drop-down list instead of lookup screen.
-
If you select certain Lookup actions checkboxes, these actions will be used in a FieldGroup component by default, so you don't have to configure actions in the controller code.
Please note that Lookup type parameter should be set before generation of an entity editor screen.
The lookup type settings are saved in the source code with the help of @LookupType annotation on the entity attribute.
Value Datasources
Regular collection datasources can load only whole entities, which is fine for CRUD operations. But sometimes you need to display some arbitrary data containing single attributes and aggregates. Previously you had to define non-persistent entities, populate them in custom services and add returned instances to a collection datasource in the screen controller. Now you can use value datasources to execute JPQL queries returning arbitrary results and display these results in standard data-aware visual components.
Value datasources contain instances of the special KeyValueEntity which has no predefined structure. You have to define the structure in the datasource by specifying properties according to the fields returned by your query.
Bean validation
Bean validation allows you to define attribute values constraints directly in your entities, and these constraints will be checked by various platform mechanisms, such as data-aware visual components, editor screens and REST API. You can also validate service method parameters and return values.
This feature is based on the JSR 349 - Bean Validation 1.1 and its reference implementation: Hibernate Validator.
Cross-Datastore References
Now you can create relations between entities from different data stores. For example, if your Order entity is stored in the main data store and Customer is in an additional store, Studio will allow you to create an Order.customer many-to-one association attribute. The attribute will be non-persistent, and an additional persistent attribute of the type of Customer's primary key will be automatically added to Order. After that, you can just include the customer attribute in views and connect it to data-aware visual components - the related Customer instance will be saved and loaded from the additional data store.
Transaction Listeners
Transaction listeners allow you to write code that will be executed on transaction commit. Transaction listeners can be used instead of entity listeners when you need to perform some computations using entities of different types. In this case you can consolidate all your logic in one place and achieve better performance.
Side Menu
SideMenu is a visual component that can be used in the main window to display the main menu of the application. In addition, it has a rich API that allows you to add items, set icons and badges dynamically.
In order to use SideMenu in your project, create a Generic UI screen using the Side menu main window template in Studio.
Data Grid
DataGrid is a visual component alternative to Table. It has much better performance, especially on large data sets, and provides different ways to display dynamic content. DataGrid is a wrapper around Vaadin's Grid component. We are working on support for all of its native features, as well as providing compatibility with CUBA mechanisms and implementing Table features.
Pivot Table
PivotTable is a visual component for data analysis. It can display a data set as a summary table or a chart, and it allows a user to restructure data using drag-n-drop. It is based on the JavaScript library github.com/nicolaskruchten/pivottable and can be declared in a screen XML descriptor and connected to a datasource. PivotTable is included to Charts and Maps premium add-on.
Polymer UI
Polymer UI is a new way to quickly create front-end portals with mobile-first responsive interface. We recommend to use this technology to create custom and mobile-ready customer-faced front-ends, keeping administrative UI and back-office screens developed using the standard generic user interface as the most efficient and rapid way.
The Polymer UI is based on Google Polymer framework and works with CUBA middleware through the standard REST API. The platform provides the following facilities for Polymer UI portals creation: fully integrated build system, a set of web components for working with CUBA middleware, and Studio templates for easy scaffolding of CRUD web components.
Summary
As you see, this release introduces many brand new features. Along with them, we have covered a number of requests and ideas coming from CUBA community through our support forum. The list of such changes can be found in the platform's issue tracker. We would like to thank all proactive members of our community, who participated in the platform development and helped with testing the release candidate version.
Finally, you are welcome to watch the recorded video of the live webinar session about the release.