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. |
A custom MVC UI theme can be created if the use of default Blueriq themes is not desired. This could be the case if for example you want to create your own client application and Extending themes is not sufficient.
Introduction
The MVC UI has two default themes (Forms theme and Dashboard theme) and bootstrap3 and bootcards) and has support for custom made themes. A theme is basically a set of files and some configuration that consists of the following components:
...
Description | Location | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Index file | StringTemplate index file | JAR or
| ||||||||||||
Web resources | JavaScript, CSS, images, etc. | JAR or
| ||||||||||||
Configuration | Properties in the
|
|
...
The base of a theme is the index file from which the main page is built. Blueriq uses a template engine called StringTemplate to to make server properties available in the client.
A default Blueriq index page is injected with a template context that features the following properties:
Variable | Type | Description | theme|
---|---|---|---|
context.sessionId | Stringstring | Name Blueriq Session ID of the theme currently selected | |
apiBasePath | String | Base path for the web API | |
webResourcesBasePath | String | Base path for web resources | |
extensions | Object (ExtensionContext) | Contains all registered CSS and JavaScript files | |
cssExtensionUrls | String[] | URLs to all registered CSS files | |
jsExtensionUrls | String[] | URLs to all registered JavaScript files | |
sessionId | String | Current session id | |
currentPageJson | String | Current page in JSON format | |
developmentMode | boolean | Indicates whether or not the application runs in development mode | |
sessionTimeout | int | Configured session timeout in seconds |
When creating a custom theme you need to provide a StringTemplate index file.
current Blueriq session | ||
context.theme | string | Current theme of the Blueriq session |
context.webResourcesBasePath | string | Location from root where web-resources are located |
context.apiBasePath | string | Relative path of API endpoints, always "../api/" |
context.currentPage | { [elementKey: string]: Element } | Full pageModel, see REST Page Models |
context.developmentMode | boolean | Indicates if developmentMode is active or not |
context.sessionTimeout | integer | Session timeout in seconds |
Creating the index file
The index file is the starting point of a custom theme and is a StringTemplate template that follows a certain structure. For full details on the StringTemplate syntax and usage please check the official official documentation. The purpose of the initial page is to load all the required resources (e.g. JavaScript or CSS files) and to provide a base layout.
...
First the delimiters to use around StringTemplate variables are set to "$" instead of the default "<" ">" delimiters to be able to use variables within HTML. StringTemplate uses a function call to generate the template: main(context). The context object that is passed with this function call contains all properties as described above. In the function body (between "<<" and ">>") the actual index page is placed, which is a full HTML page.
...
Save the custom index file as a a .stg file file so it is recognized by StringTemplate.
...
Installing your custom theme is easily done by putting all files in the
Include Page | ||||
---|---|---|---|---|
|
Java
- Create a a UI/mvc folder in folder in
and put the custom index file (for example example custom_dashboard.stg) here.Include Page _ConfigLocation _ConfigLocation - Create a webresources/mvc folder in
and put the JavaScript and CSS files here (optionally in /js and and /css sub sub folders).Include Page _ConfigLocation _ConfigLocation - Add a configuration section for your custom theme to to
inInclude Page _PropertiesFileJava _PropertiesFileJava
root, as described in the Configuration section below.Include Page _ConfigLocation _ConfigLocation
.NET
- Create a UI/mvc folder in the Configuration folder in the .NET webapp installation and put the custom index file (for example custom_dashboard.stg) here.
- Create a webresources/mvc folder in the Configuration folder and put the JavaScript and CSS files here (optionally in /js and /css subfolders).
- Add a configuration section for your custom theme to Web.config in the wwwroot folder, as described in the Configuration section below.
Configuration
In order to configure your theme so it will be known by the Runtime several properties must be set. The following example shows properties for registering a theme named "custom_dashboard" in both Java and .NET:
...
Info |
---|
Working with multiple themes is possible by adding comma separated theme names to the mvc.themes property. |
.NET
Code Block | |
---|---|
language | text | title | Properties for registering a custom theme in. | NET
<ui>
<mvc developmentMode="false">
<themes>
<theme name="custom_dashboard" templateGroupFile="UI/mvc/custom_dashboard.stg" templateName="main"/>
</themes>
</mvc>
</ui> |
The mvc.themes or or name property specifies the name for the theme which will be displayed in the Runtime theme selector. The other two properties specify which StringTemplate index file should be used and which StringTemplate function should be called to render the index page (see "Creating the index file" above). The path to the index file is relative to either the JAR/DLL or the
/Configuration folder. When a file name is specified which is located in in Include Page _ConfigLocation _ConfigLocation
/Configuration and that is already loaded from a JAR, the file from Include Page _ConfigLocation _ConfigLocation
/Configuration will be used and the file from the JAR/DLL will be overridden. More information about overriding existing themes can be found on Extending themes. Include Page _ConfigLocation _ConfigLocation