Introducing WebCombo Modern Theme
In the past versions, WebCombo control is typically styled by specifying the style definition explicitly in the control markup. However, this approach apply their own styles individually and did not support reusing a common style definition. Consequently, you can't easily leverage modern CSS frameworks such as Bootstrap to create a consistent theming around your application.
To address these challenges, WebCombo 7 introduces a brand-new modern theme which was built upon unified theming framework. It's now possible to streamline the WebCombo styles in a unified theme, enabling a consistent look-and-feel across the application.
Here's how the WebCombo controls look like with unified modern theme.
Features
Streamlining the WebCombo styles into a unified theme that promote consistency with the rest of WebUI components, while at the same time supporting all existing features, requires major improvements to the core rendering and foundation of the control. As the result, you can modify the fundamental WebCombo settings through properties as usual, while having the styles applied perfectly.
This section explains WebCombo's features and how they work.
Entry Mode
WebCombo provides you with two entry-mode features which are auto-complete and instant-lookup. This feature allows you to take a peek at the existing data based on what you type in the input box. Here are the figures showing WebCombo's entry-mode features.
Auto-complete feature will show suggestion based on what you type in the input box. Instant-lookup feature allows you to see the existing data by typing the first few letters of the data that you desire and pressing the enter key.
You can specify the LayoutSettings' EntryMode property to apply these features. Look for the code below for examples.
WebCombo's DataTextField property is used for the data you want to display in the control while DataValueField property is used for determining the value of the control.
Multiple Selection
WebCombo contains two multiple selection features which are bound and unbound modes. Bound mode allows you to type ahead the data that you desire and WebCombo will show you suggestions based on what you type. Unbound mode sets the WebCombo to ReadOnly mode and enables you to choose the desired data by ticking the check box.
Here's the example on how to apply the multiple selection bound mode feature.
To apply the unbound mode feature, first you need to specify the data in the code behind. The next step would be set MultipleSelectionSettings' Enabled property to True and set LayoutSettings' TextBoxMode property to ReadOnly. Take a look at the example below.
ValidationState API
WebCombo 7 supports built-in validation styles available in the WebUI unified theme and also adds integration to ASP.NET validators. When the associated validator returns an invalid result, WebCombo automatically updates its styles with an error style. Likewise, the styles will be updated accordingly when the input satisfies the validators. In addition, WebCombo also introduces OnValidate client-side event which will be invoked whenever the validator is performing validation on the WebCombo control. WebCombo also provides a new SetValidationState API allowing you to change the contextual color programmatically.
These new API allows you to implement custom validation process. For instance, you might want to update the WebCombo with success contextual color when the validation returns a valid value. You can easily achieve this scenario by handling the OnValidate event to intercept the validation process, then call the SetValidationState method accordingly. Take a look at the example below.
Size Class Variants
WebCombo's size can be set depending on your needs. See the following figure for example.
To apply a specific size class, see the example below.
Form Group Variants
Depending on the usage, you can also apply form group size. Look at the figure below.
To apply a specific form group size, see the example below.
Input Group
WebCombo also supports Bootstrap's input-group class. To use this feature, you need to put the WebCombo inside webui-control class, see below for example.
Contextual Classes
WebCombo 7 has the same contextual classes as the Bootstrap's which are success, info, warning, and danger. To apply the form group styles, add the style class along with the default class. There are three types of styling that you can add, has-success class, has-warning class, and has-error class. Look for the example below for adding the success state class.
WebCombo 7 also integrates well with ASP.NET built-in validator controls. To apply these styles, add the style class in validator's CssClass property along with common-control-message class and set the Display property with the value of Dynamic. You can use three types of styling: error, warning, and info. Here's the example for the validator style.
Applying Theme
Building on unified theming concept, the WebCombo modern theme is designed as part of the WebUI modern theme. This means that once you applied the WebUI modern theme, it will automatically theme the WebCombo control without additional code. To learn more how to apply the WebUI modern theme, please see Applying Unified Modern Theme in WebUI Application and Creating a New WebUI Application with Unified Modern Theme.
Best Practices
If you're applying the modern theme to an existing web projects, please review your existing code to comply with the following best practices:
- Remove appearance settings that are defined explicitly in the control. For instances, UseDefaultStyle and DefaultStyleMode are examples of settings that might affect appearance.
- Remove style settings that are defined explicitly in the control. Most style settings have Style suffix and are type of either WebStyle or DynamicStyle, such as FrameStyle, FooterStyle, HeaderStyle, and so on.
- If you applied a WebCombo layout file (.isl) from code behind, the code should be no longer necessary and can be safely removed.
Customizing Theme
With unified theming concept, you no longer specify any style settings explicitly in the control markup. Written completely in developer-friendly SCSS language, all WebCombo styles are now streamlined in CSS classes contained in the theme source. This makes it easier for you to review the overall style definitions and make necessary changes to the styles.
WebCombo SCSS Variables
For easy customization, the WebCombo modern theme has provided a number of variables relating to common appearance settings. The following list shows the available SCSS variables for WebCombo.
The complete SCSS variables can be found in _variables.scss, while the WebCombo theme source can be found in the _webcombo.scss file located in the theme source folder.
WebCombo Layout Definition
In addition to the styles defined in the SCSS, one of the main component in a theme source is the component layout definition. The layout definition contains the contracts between the control and the CSS classes. The connection between the layout definition and the corresponding controls are automatically taken care by the WebUI Theme Framework at runtime.
To get a better understanding of the WebCombo styles, see its layout definition below.