Skip to end of metadata
Go to start of metadata

This page discusses how you can apply unified modern theme in WebUI application.

As a pre-requisite, you will need to be able to apply theme in WebUI application, which can be found in Applying Theme in WebUI Application page.

On this page:

Introduction

WebUI Studio 2016 includes major improvements to WebUI Framework and adds unified theming features, allowing you to easily create a UI theme that looks consistently throughout your application. Prior to unified theming, each WebUI component is typically styled individually. For instance, WebCombo has its own styles, so does WebInput and the rest of WebUI components. It becomes difficult and challenging to create a theme that presents consistent look and feel among multiple component types with similar semantics. You will not be able to share and reuse a style for multiple component types.

The new unified theming framework is introduced to address this challenge. Instead of individual component styles, the new unified theming  lets you create unified styles that can be shared across multiple component types with similar semantic. For example, the input element in WebCombo and WebInput could share the same style, the result popup in WebCombo and editors in WebInput could share the same style as well.

To learn more about unified theming, see Unified Theming.
Enabling unified theming is simple and straightforward. There are only two steps to enable unified theming:

  1. Enable UseCssFramework.
  2. Add StyleSheets collection to your theme configuration.

Enable UseCssFramework

Find the theme file and add UseCssFramework="true" attribute at the ISTheme node.

The theme file represents a single file (*.ISTHEME)  that contains configurations for all the components, pages and/or controls that are contained within the Web application. Its location is defined in Location attribute in SelectedTheme node at theme project config file.

The following is an example of theme project definition with UseCssFramework="true" attribute added.

webui-bootstrap.istheme

 

Add StyleSheets Collection to The Theme Configuration

Add style sheets collection to the theme file. For reference, here's a complete definition of WebUI theme file configuration.

webui-bootstrap.istheme

In the above example, notice that there are two stylesheets defined in the theme. As the result, any web pages that contain WebUI components defined in the theme will automatically include links to the specified stylesheets. See the example output of the html markup below.

Default.aspx


Last but not least to mention, there are two key components when applying the unified modern theme in WebUI application:

  • Component Layout Files – a set of files with ISL extension containing the CSS classes contract
  • CSS Files – the stylesheet files that contain CSS3-compliance output

As shown on those images above, inside the Theme folder contains:

  • a theme configuration (.istheme),
  • the component layout files (.isl), and
  • the CSS folder containing the stylesheet files

When styling with unified theming, there are several important points to note:

  • The component layout definition files (.isl extension) should contain CSS class names corresponding to the actual CSS class defined in the stylesheets.
  • Do not use the native styles or custom rules in the component layout definition. Instead, specify the CSS class of the corresponding styles.
  • In the WebUI component markup (.aspx), remove all style nodes as they are no longer necessary. At runtime, the theme framework automatically applies the styles from the defined component layout definition.

Here's an example of component layout definition that complies to unified theming best practice.

webdesktopmanager.isl

To verify if your project has applied the unified modern theme correctly, please refer to New WebUI Modern Theme and browse through the comprehensive style reference of each WebUI component.

Running WebUI Application with Unified Modern Theme Applied

Save all the changes and build your web application. When the application is running and requested through browser, WebUI.NET Framework (through Theme architecture) will detect for istheme.config file and automatically apply the contained theme information and component's style definition to the requested page. the stylesheet files that will be injected to the page at runtime.

Theme framework will injects the stylesheet files - as declared in component's style definition - at runtime.

The screenshot below shows a simple page with WebDesktopManager with WebUI theme applied.


The result of WebDesktop Manager with Unified Modern theme will look like following:

If you prefer to create a new WebUI application with unified theming instead, please see Creating a New WebUI Application with Unified Modern Theme.

In addition, you can also learn how the unified theme works by opening the provided WebUI.Unified.Samples solution which you can locate under the Windows Start Menu > Intersoft Premier Studio 2016 R1 > WebUI group.