Skip to main content

JavaScript Essentials

A plain jQuery-style knob plugin is proven in an isolated HTML page first, then rewritten as the InitScript of a plain Wisej.Web.Widget named gaugeKnob, with Packages declaring jQuery → vendor CSS → vendor JS in load order and a valueChanged event fired from the vendor callback through a captured widget reference (var me = this).

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

Run it​

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

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

Requirements: .NET 10 SDK, the Wisej-4 4.1.0 NuGet package.

What to try​

  • Knob Demo window — drag or wheel the Pressure knob. Every change reaches .NET as valueChanged; the status in the card shows the value the server recorded (● 72 psi). A vendor failure caught by the adapter shows a red banner.
  • DevTools (F12) — as in the video: app.getWidget("gaugeKnob").instance in the Console returns the vendor object stored on the widget; gauge-init.js is listed in Sources thanks to //# sourceURL; uncomment the debugger; at the top of init to pause and inspect this, options and this.container.
  • Plain-JS proof — http://localhost:5072/wwwroot/proof/knob-proof.html: the same plugin with no Wisej.NET, the callback wired the broken and the fixed way, and load-order checks.

Where things live​

IntegrationLab/
├─ wwwroot/
│  ├─ proof/knob-proof.html    deliverable 1: the plain-JS proof (no Wisej.NET)
│  ├─ gauge-init.js            deliverable 2: the context-safe InitScript (embedded resource)
│  ├─ jquery-lite.js           package 1 — tiny jQuery-compatible subset (window.$, $.fn)
│  ├─ vendor-knob.css          package 2 — vendor stylesheet (+ red fallback for the un-enhanced input)
│  └─ vendor-knob.js           package 3 — the "third-party" jQuery plugin, $.fn.vendorKnob
├─ docs/
│  ├─ PlainJsProof.md          deliverable 1 — what the proof page shows and how it was verified
│  ├─ ContextSafeInitScript.md deliverable 2 — closure / bind / method, annotated gauge-init.js, load order
│  └─ DebuggingNotes.md        deliverable 3 — where the instance is stored, sourceURL, debugger, symptom table
├─ Window1.cs / .Designer.cs   Knob Demo (one Wisej.Web.Widget: gaugeKnob)
├─ Program.cs                  Wisej.NET session entry point
└─ Startup.cs                  Kestrel host (app.UseWisej(), static files from the project folder)