We are happy to announce the new Xomega.Net release 8.11, where your generated Blazor apps got an awesome facelift with the latest Bootstrap 5 framework, which provides responsive and customizable layout for the views and modern style for the Xomega Blazor components.
In addition to the default Blazor components, Xomega partnered with Syncfusion to allow you to generate Blazor apps using powerful and stylish Syncfusion Blazor components, including support for editable grids.
Among all the improvements, we also made it easier for you to localize the generated Blazor apps, and introduced a framework that allows you to control the state of the view actions from the reusable presentation layer code.
Keep reading to learn more about these new exciting features.
Bootstrap 5 responsive layout and styles
One of the major highlights of this release is the new modern responsive layout for the Xomega Blazor apps, as described below.
Labels on top
First thing that you will notice when generating Blazor apps with the new Xomega.Net release, is that the labels will be placed above the corresponding controls rather than to the left of them, as before. This makes it easier to align the fields, and can also help you keep the same layout for the right-to-left languages, such as Hebrew or Arabic.
In fact, the generated views no longer have separate controls for the labels, as the labels are just a part of the corresponding property-bound controls. The controls get the text for the label and the access key from the bound property, which will take them in turn from the localized resources, as you will see later. The access key gets automatically underscored in the label to give you a visual cue.
With no separate labels, the generated markup looks much cleaner, and allows you to easily hide both the control and the label when the bound property becomes invisible. The labels for controls bound to a required property will automatically get a red asterisk in front of them to help you communicate the required fields to the users.
From the screenshot above, you can also notice that the controls are now styled using the Bootstrap 5 library, including highlighting valid fields.
Sidebar criteria and menu
Now that the labels are on top of the controls, it made sense to change the layout of the search views to have the search criteria panel as a collapsible sidebar rather than as a panel on top of the results grid.
In the same vein, we made the main navigation menu as a collapsible sidebar, which allows you to show longer text in the menus, and provides more vertical space for the actual screen.
Bootstrap 5 styled controls
We have styled all Blazor controls that were available in the Xomega.Framework.Blazor package using the Bootstrap 5 library, and added some new components to that package that are used in the generated views.
The most notable suearch component is XGrid, which supports multi-column sorting and row selection. This, again, made the markup of the generated views much more readable and concise. Xomega model also allows you to customize the relative widths of the grid's columns either based on the logical types of the column's field or directly in the field configuration in the model.
Listed below are some other controls that have notable upgrades in this release.
Tri-state checkboxes
The XCheckBox component now supports indeterminate state to represent a null value of the bound property.
You can also display checkboxes as switches now, following the modern UI standards.
Field validation messages
Validation messages for the property-bound controls are now automatically displayed below the actual controls instead of being just a plain tooltip.
Bootstrap styling is also applied to invalid controls, highlighting them with the red color.
XDatePicker control for entering a date or date and time is based on the native HTML5 controls and calendars now instead of the jQuery UI.
Pick List
XPickList component for selecting multiple values from a list is now styled with Bootstrap and looks like this.
Multi-value auto-complete
We implemented the XAutoComplete control entirely in Blazor without dependencies on third-party JavaScript libraries, with support of multi-valued properties, meaning that it will properly show suggestions for the value that is currently being edited.
Responsive layout
Bootstrap provides a great framework for building responsive views based on the size of your browser window. Yet, it falls short when it comes to dynamic views, such as master-details, where you can open or close a details panel for the selected record on the side.
As you open a number of such views dynamically, they will be allocated only a certain portion of the browser window, which is not necessarily known at design time. So your statically assigned layout classes would not work correctly, especially if you want to reuse the same view in multiple places, e.g. both in the full screen and embedded as a details side panel.
Xomega enhanced Bootstrap’s approach to responsive layout and provided a framework to dynamically calculate the layout classes for controls and their containing panels, so as to ensure the desired width of the fields as much as possible.
For example, here is a master-details screen, where the details panel is laid out in 4 columns when open on a wide screen.
Notice that when you open the details panel on such a screen, Xomega will hide half of the columns in the results grid on the left, instead of jamming all the columns into half the space, or adding a horizontal scroll bar. Presumably, you will be able to see the details on the right panel, so the left-side grid will just need to show the key columns to identify the rows. If you close the details panel now, you will see all the columns in the results grid again.
However, if you try to shrink the width of the browser with the details panel open, you will notice that it will lay out the details into 3 columns first. At a certain threshold though, instead of shrinking the details further, it will completely hide the results grid, which will open up more space, and we'll make the details panel go back to 4 columns.
If you continue to shrink the browser, it will be changing the layout to use 3 columns, 2 columns, or 1 column for the smallest devices. Here is what this screen will look like on a smaller device, with the results grid hidden, and the details panel laid out in 3 columns.
Customizable details views
Another great feature in the new Xomega release allows you to precisely customize the layout of individual details panels in the generated views. You can specify the desired maximum number of columns for the fields in each panel, set custom titles for the panels, and indicate which child data objects you want to lay out using tabs rather than plain panels. With tabs, you can also specify a custom title of each tab, and with panels, you can indicate how many columns they should be laid out within their parent object’s panel.
The screen below shows an example of a complex custom layout for a sales order details view. The direct fields of the sales order data object are laid out into up to 6 columns in a top panel with a custom title “Order Info”. The child objects are grouped into tabs right under the main panel.
The child data object Customer has in turn its main panel and the panels of its own child objects laid out in 2 columns, and has a custom title “Customer Info” for its main panel. The fields in its panels are laid out in 2 columns, except for the Billing and Shipping address panels, where they are laid out in 3 columns.
In the new version of Xomega model, you specify the custom layout configuration for each data object under its ui:display element - both for the layout of the main panel and for any of the child data objects.
For example, here is a configuration of the main SalesOrderObject for the above view.
<xfk:data-object class="SalesOrderObject" customize="true">
<xfk:add-child name="customer" class="SalesOrderCustomerObject"/>
<xfk:add-child name="detail" class="SalesOrderDetailList"/>
<xfk:add-child name="payment" class="SalesOrderPaymentObject"/>
<xfk:add-child name="sales" class="SalesOrderSalesObject"/>
<ui:display>
<ui:fields field-cols="6" panel-cols="1" title="Order Info">
<ui:field param="sales order id" hidden="true"/>
</ui:fields>
<ui:tabs>
<ui:tab child="detail" title="Line Items"/>
</ui:tabs>
</ui:display>
</xfk:data-object>With this new flexible per-object configuration for responsive layout, the previous global model element ui:layout is no longer being used for Blazor views, and only remains to be used for older technologies, such as WebForms or WPF.
Action Buttons and Action Properties
Another awesome addition to the Xomega Framework is the ability to define Action Properties and bind them to Action buttons on your view.
Similar to data properties, Action properties maintain the Enabled and Visible state of the action, notify listeners of any changes in those states, and can be added either on specific data objects or directly on the view models, but they don’t carry any data.
This allows you to maintain the state of your actions in the platform-independent presentation layer, such as view models and data objects, and is especially valuable with the Blazor technology, which does not allow you to directly manipulate the state of controls.
Action Buttons bound to reusable Action Properties
Xomega Framework got a new Blazor Bootstrap-styled component XActionButton, which you can bind to your ActionProperty in order to drive its enabling and visible states, as well as to set its localized label.
Here is an example of the typical Delete, Save and Close action buttons for a Details view.
<XActionButton Action="@VM?.MainObj?.DeleteAction" OnClick="OnDeleteAsync"
Class="me-auto"/>
<XActionButton Action="@VM?.MainObj?.SaveAction" OnClick="OnSaveAsync"
IsPrimary="true"/>
<XActionButton Action="@VM?.CloseAction" OnClick="OnCloseAsync"/>As you can see, they are bound to standard actions that are defined in the framework, and the framework implements the default logic for enabling or disabling these actions. For example, the Save action is enabled only when the main object has been modified, while the Delete action is disabled when creating a new object.
Note also that you don't have to provide the text for the action button, as it gets set from the label of the bound property, but you do need to implement the click handlers for the buttons.
Computed state for action buttons
The cool feature of Action properties, which they share with the regular data properties, is that you can set enabling or visibility conditions as Lambda expressions that may use the data object or its properties, and the framework will automatically maintain the action’s state based on this condition.
For example, the above mentioned enabling conditions for the Save and Delete actions would look as follows.
// add save action, and make it enabled only when the object
// is modified or doesn't track modifications
SaveAction = new ActionProperty(this, Messages.Action_Save);
Expression<Func<DataObject, bool>> saveEnabled = (obj) => obj != null &&
(obj.Modified || !obj.TrackModifications);
SaveAction.SetComputedEnabled(saveEnabled, this);
// add delete action, and make it enabled only when the object is not new
DeleteAction = new ActionProperty(this, Messages.Action_Delete);
Expression<Func<DataObject, bool>> deleteEnabled = (obj) => obj != null && !obj.IsNew;
DeleteAction.SetComputedEnabled(deleteEnabled, this);
This feature will make it super easy for you to write the logic for the action states in your reusable presentation layer.
Localization of labels and titles
Xomega Framework already has support for localization of error messages both on the server and the client sides. In the new release we added support for the localization of other UI resources, such as property labels and titles for various panels and views.
Resource localization
Previously all labels and titles were output directly in the generated views using either explicit texts that you provide in the model, or ones derived from the names of the corresponding properties or other model elements.
The latest Xomega version includes a new generator that creates a resource file with all these labels and titles using specific key formats, which allows Xomega Framework to automatically use these resources for data properties’ labels and titles for child objects and views.
The generated Blazor views now use these resource keys to look up and output localized titles, and the updated Blazor controls use the localized label from the bound data property, which allows you to build fully localizable applications with little to no extra effort.
Resource customization
Xomega Framework provides a powerful CompositeResourceManager that lets you combine resources from an ordered list of multiple resource managers, and return resources from the first resource manager that has the specified key. So, for instance, if you include your custom resources before the standard framework resources, you will be able to override the text of the specific framework error messages or labels.
Similarly, you can override resources that are generated from the model for specific objects or properties in your custom resource file. For example, if you want the text for the standard Save button on the authentication form to say “Login” instead, you can override the resources for the corresponding data object as shown below.
Syncfusion Blazor components with editable grids
Another major feature in the new Xomega release is support for Syncfusion Blazor components, such as date/time controls, filterable dropdown lists and combo boxes, multi-select boxes etc, with all their bells and whistles.
This also includes powerful Syncfusion grids with baked-in searching and filtering, column choosing, resizing and reordering, as well as inline editing of grid rows.
When you create a new Xomega solution and select a project for shared Blazor components, you will have a choice between the standard Xomega Framework components and the ones that are based on Syncfusion framework, as shown below.
This will set up Syncfusion initialization code and will enable the Syncfusion Blazor Views generator. If you don't have any Syncfusion-specific UI customizations, you will be able to easily switch between the Xomega standard and Syncfusion components to see the difference.
Syncfusion Blazor components
Here is an example of the generated master-details Sales Order list and details forms using Syncfusion components with bootstrap 4 style.
While it may look very similar to the standard Xomega Blazor components, you can notice that it uses the Syncfusion’s MultiSelect control for selecting multiple sales reasons, since the Pick List control is not available in the Syncfusion framework.
Also the validation message for invalid fields is displayed as a tooltip on invalid controls rather than under the field, in order to be consistent with the grid editing, as shown below.
Syncfusion editable grids
We have enhanced Xomega Framework to support fully-featured inline grid row editing using Syncfusion’s grid. You can still write the platform independent UI logic in your presentation layer data objects, and just bind them to an editable grid.
For example, here is a screenshot of our updated sample, where we enabled editing of the line items of a sales order directly in the grid.
The list of products is automatically displayed as a dropdown, and the items in the Special Offer list depend on the selected product. So does the price, which is not editable and grayed out, just as other calculated fields like the discount (which is based on the special offer) and the total amount.
If you try to update the row with invalid fields, the validation errors will be shown under those fields. All this presentation logic is defined in reusable list data objects and data properties, which you can test independently, and use with various UI technologies.
Conclusion
As you have seen from the above, the new Xomega release introduces a ton of new cool features for generated Blazor apps - from upgrading to Bootstrap styles and layouts, to supporting powerful Syncfusion Blazor components.
This will allow you to generate and build modern and complete apps in no time with little to no coding. We are planning to keep improving Xomega platform and its documentation to minimize the learning curve for you, but feel free to download and check out the new release now, and let us know should you have any questions or issues.
