Reusable Widget Classes

Application IntegrationModule 4The 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

The gauge prototype from Module 1 becomes IntegrationLab.Controls.SimpleGauge, a class that derives from Wisej.Web.Widget, owns its packages, InitScript and default options, exposes typed properties (Value, Minimum, Maximum, Caption, AnimationEnabled, Threshold) and hides the escape hatches. A demo page places one from the Toolbox and drives it with normal .NET properties — no InitScript, no Packages, no vendor name on the page.

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 4

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 4/IntegrationLab"
dotnet run -f net10.0 --urls http://localhost:5074

Then open http://localhost:5074. (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 with the expected warning CS7022 (Program.Main ignored as entry point).

What to click in the Demo page

Button	Code-behind (verbatim)	What you should see
Value = 72	simpleGauge1.Value = 72;	on a fresh page the gauge is already at 72: only the statement is listed, nothing is rendered
Value = 90	simpleGauge1.Value = 90;	the needle sweeps; ThresholdExceeded → red banner; ✓ gauge updated · Value = 90
Maximum = 120; Value = 45	simpleGauge1.Maximum = 120; simpleGauge1.Value = 45;	the scale re-lays out and the needle moves in one round trip; the banner clears
Value = 78	simpleGauge1.Value = 78;	ordinary update, warm band, no threshold event

The right-hand card, DemoPage.cs · code-behind, lists each statement the page runs and the ValueChanged acknowledgement from the gauge. The page never touches an option name.

Where things live

IntegrationLab/
├─ Controls/
│  ├─ SimpleGauge.cs           the reusable class: packages, InitScript, defaults, typed properties, hidden members
│  └─ GaugeEventArgs.cs        typed EventArgs for ValueChanged / ThresholdExceeded / WidgetError
├─ wwwroot/
│  ├─ gauge-init.js            client adapter (embedded resource IntegrationLab.wwwroot.gauge-init.js)
│  └─ vendor-gauge.js          the "third-party" VendorGauge 1.0 library (Package, served as /wwwroot/…)
├─ docs/
│  ├─ ReusableWidgetClass.md   deliverable 1: what moved into the class, constants, versioning, NuGet boundary test
│  ├─ TypedProperties.md       deliverable 2: property table (type, default, validation, client update, read-only)
│  ├─ HiddenMembers.md         which members are hidden, how, why; the OnConfigureOptions escape hatch
│  └─ DemoPage.md              deliverable 3: evidence the page has no InitScript; what each button proves
├─ DemoPage.cs / .Designer.cs  the Demo page: one SimpleGauge from the Toolbox, typed properties only
├─ Program.cs                  Application.MainPage = new DemoPage()
└─ Startup.cs                  Kestrel host (app.UseWisej())