Page History
Warning | ||
---|---|---|
| ||
MVC UI is deprecated from Blueriq 11.0. The alternative for the MVC UI support is to only use the UI REST API endpoints. |
Table of contents
Table of Contents |
---|
Subpages
Children Display |
---|
Getting started
Blueriq provides an API for interacting with a Blueriq session and obtaining page changes, see UI REST API for documentation on all endpoints and their request/response bodies. This section describes the theming possibilities that may be used to let Blueriq serve a context-dependent page, configured according to the theme/language settings of e.g. shortcuts.
Info |
---|
In essence, one can do with only the REST endpoints to interact with a Blueriq session. Doing so will no longer let Blueriq be in control of theme/language settings, so you would have to account for this yourself then. |
Key benefits MVC UI
Modern web application architecture
Provides clean separation of concerns (SoC)
Easy integration with JavaScript frameworks
Enables the full control over the rendered HTML
- Less server load
Better User experience
- Single page
- Partial updates
- More responsive user experience
- Easy integration with UI libraries
- Responsive web design
Guidelines
The following guidelines are advised while developing a custom theme for the Blueriq MVC UI.
- Single page oriented application design
- Separate content in small relevant blocks of information, only deliver relevant and valuable content.
- Use conditions to show only context relative information
- Page model size constraints
- A large page model can have significant impact on the performance of the frontend. It is especially advised that lists/tables, which have a large page model representation, are limited to 10-20 items per page.
- The performance on mobile devices strongly differs per device, having a small page model is even more important here.
Info |
---|
For information on how to setup your development environment when creating a custom MVC UI theme or plugin, see Creating a MVC UI theme. |
Initial Page
The purpose of the initial page is to load all the required resources (eg javascript or css) and to provide a base layout.
StringTemplate is used as the template engine, the main template file is expected to be:
- A Template Group File: meaning multiple templates can be used and referred to.
- The main template name has the context as parameter. The name of the main template can be configured.
The Main Template accepts the context parameter. On this object the following properties are available:
- theme: The name of the current theme
- apiBasePath: The path to the root of the web api
- webResourcePath: The path to the root of the webresources
- extensions: The extension context with the following properties:
- cssExtensionUrls: List of custom css files
- jsExtensionUrls: List of custom javascript files
- sessionId: The id of the current session
- currentPage: Content object of the current page
- currentPageJson: Current page serialized in json form
- isDevelopmentMode: Indicator whether the development mode is activated.
- sessionTimeout: session timeout in milliseconds
Configuration
In java the following options can be configured in the aquima.properties file:
Code Block |
---|
mvc.themes=forms,dashboard
mvc.forms.templateGroupFile=UI/mvc/forms.stg
mvc.forms.templateName=main
mvc.dashboard.templateGroupFile=UI/mvc/dashboard.stg
mvc.dashboard.templateName=main
mvc.developmentMode=true |
The corresponding configuration in .net:
Code Block | ||||
---|---|---|---|---|
| ||||
<webApplication>
...
<!-- UI -->
<ui>
...
<mvc developmentMode="true">
<themes>
<theme name="forms" templateGroupFile="UI/mvc/forms.stg" templateName="main"/>
<theme name="dashboard" templateGroupFile="UI/mvc/dashboard.stg" templateName="main"/>
</themes>
</mvc>
</ui>
</webApplication> |
Rendering
The mvc UI does not restrict to a particular mvc framework. However Blueriq has chosen for Knockout for the implementation of our default themes.
Blueriq provides the forms and dashboard theme. Themes can be developed from the ground up or the default themes can be extended/customized.
After the initial page is loaded the knockout implementation retrieves it's data via the json web api. This data is transformed using the knockout mvc framework.
...