Custom Controls & Theming

Application IntegrationModule 5The lesson guide, the walkthrough video, the knowledge check and the hands-on lab this sample was built from are on learnwisej.com — free, with an AI tutor in every lesson.

Open the course

A custom SimpleGaugeControl made of a server class (Controls/SimpleGaugeControl.cs : Wisej.Web.Control) and a client qx class under /Platform (integrationlab.controls.SimpleGaugeControl extends wisej.web.Control), joined to the theme by the appearance key simplegauge, rendering live in the Designer, and dropped four times onto the IntegrationLab — Operations Dashboard page, streaming live.

Nothing here is deployed anywhere; it is a plain Wisej.NET 4 project that runs on your machine.

The source of this sample

iceteagroup/LearnWisej-SamplesApplication Integration Course/Module 5

Browse this folder on GitHub

Or clone it: git clone https://github.com/iceteagroup/LearnWisej-Samples.git — then open IntegrationLab.slnx in Visual Studio and press F5.

Run it

cd "LearnWisej-Samples/Application Integration Course/Module 5/IntegrationLab"
dotnet run -f net10.0 --urls http://localhost:5075

Then open http://localhost:5075. (Visual Studio: open IntegrationLab.slnx, press F5.)

Requirements: .NET 10 SDK, the Wisej-4 4.1.0 NuGet package. dotnet build -nologo -v q passes; warning CS7022 (Program.Main ignored) is expected.

What you see on the Operations Dashboard

• A KPI row (Active lines, Avg. throughput, Alerts, Uptime) and four tiles — Boiler 1, Boiler 2, Turbine, Coolant — each the same SimpleGaugeControl.
• The page streams from load (● live): a Timer drifts the four readings every 800 ms, and only value changes on the wire.
• Boiler 2, Turbine and Coolant cross their thresholds periodically (Boiler 1 never does): the client class fires thresholdExceeded, ThresholdExceeded is raised in C#, the tile shows a red banner and a red border (theme state alarm), the Alerts KPI counts up and the status reads ● alarm (n). The banner clears when the reading falls back.
• A value outside Minimum..Maximum is rejected by the control's setter on the server: nothing is rendered, the tile's banner and a toast show the message, and streaming stops.
• Theming: set "theme" in Default.json to Material-3 or FluentDark-5 (default Bootstrap-4) and reload. The same four controls are restyled by the theme together with every built-in control.
• Design time: open EnterprisePage.cs in the Wisej Designer; the gauges render live (docs/DesignTimeNotes.md).

Where things live

IntegrationLab/
├─ Controls/
│  ├─ SimpleGaugeControl.cs     server control: typed properties, OnWebRender, OnWebEvent, design-time support
│  └─ GaugeEventArgs.cs         event payload types (data, never behavior)
├─ Platform/
│  ├─ SimpleGaugeControl.js     client qx class (embedded, bundled by [assembly: WisejResources])
│  └─ vendor-gauge.js           the "third-party" VendorGauge library, embedded next to the class
├─ Themes/
│  └─ simplegauge.mixin.theme   appearance entry for the "simplegauge" key + colour aliases
├─ Properties/
│  ├─ AssemblyInfo.cs           [assembly: Wisej.Core.WisejResources]
│  └─ launchSettings.json       http://localhost:5075
├─ docs/
│  ├─ ServerControlClass.md     deliverable 1
│  ├─ ClientQxClass.md          deliverable 2
│  ├─ ThemeAppearanceEntry.md   deliverable 3
│  └─ DesignTimeNotes.md        deliverable 4 (screenshot to be added by the learner)
├─ EnterprisePage.cs / .Designer.cs   Operations Dashboard (Wisej.Web.Page, Application.MainPage)
├─ wwwroot/vendor-gauge.js      the untouched shared course library (not loaded by this module)
├─ Program.cs                   Application.MainPage = new EnterprisePage();
└─ Startup.cs                   Kestrel host (app.UseWisej())

Platform/vendor-gauge.js is the shared library plus one optional colors option, so the gauge can be repainted from theme colours; the rest of its API is unchanged.