ViewBuilder
The ViewBuilder extension allows you to create Wisej.NET application layouts using plain JSON.
Features
Build Wisej.NET views dynamically from JSON, streams, or C# object models.
Create complete ContainerControl instances at runtime with Create().
Load declarative view definitions into existing containers with LoadView().
Define nested control hierarchies using controls collections.
Add non-visual components such as extenders and helper components through a top-level components section.
Set standard Wisej.NET properties directly from the view definition.
Assign nested sub-properties using property paths such as label.text.
Populate collection and list properties from array data in the model.
Resolve property values with built-in type conversion during assignment.
Wire events by naming handler methods in the view definition.
Resolve event handlers from the root container, fully qualified method names, or a custom resolver.
Support deferred control/component references so properties can point to elements created later in the view.
Support extender-provider properties, including patterns like tooltip assignments.
Add data bindings using {Binding } expressions.
Configure binding source path, member path, format string, parse/format handlers, and update modes.
Customize reference lookup through ResolveReference.
Customize event-handler resolution through ResolveEventHandler.
Cache resolved types for faster repeated parsing.
Code Example: TextBox and Button
This code snippet has a JSON string with several WIsej.NET controls in it. In detail:
Top level, it defines a form:
"_type": "Form": create a Wisej.NET Form.
"size": "500, 500": set the form size.
"headerBackColor": "Red": make the form header red.
"text": "Test Form 1": form title text.
"padding": "20": inner spacing.
"autoSize": true: let the form size itself as needed.
Inside "controls", it adds the form’s child controls. There is one main root panel:
"_type": "FlexLayoutPanel": a flexible layout container.
"layoutStyle": "Vertical": stack its children vertically.
"name": "panel1": control name.
"dock": "fill": stretch to fill the form.
That panel contains two main child controls:
A horizontal FlexLayoutPanel
Holds two text boxes side by side.
First textbox uses "label.text": "Test".
Second textbox uses `"labelText": "Last Name"``.
Both are examples of setting label text properties.
A Button
"text": "Click Me": button caption.
Finally, the ViewBuilder extension is used to build the Wisej.NET UI view from the json with the following lines of code:
Let's break it down: this.LoadView(json1); parses the JSON string in json1 and builds a Wisej.NET UI view from it. this is the current Window1 instance, so the view is being loaded in the context of that window. view.Show() displays the object returned by LoadView(), which in this JSON is a "Form".
If you run this code, the resulting Form displayed will look like this:
Code Example: Datarepeater
This creates a datarepeater that shows an alertbox when a button inside of it is clicked. Like in the simpler example above, it consists of JSON that is loaded and displayed as Wisej.NET controls. In this example however, a datarepeater is displayed.
Let's dive into the JSON:
What the DataRepeater does:
itemTemplate.controls says each repeated item should contain a single Button.
dataSource: "bs1" connects the repeater to a component named bs1.
itemSize: "20,30" sets each repeated row/item size.
What bs1 is:
In the components section, bs1 is a BindingSource.
Its dataSource is the array [1, 2, 3].
So in practice, the repeater renders 3 items, one for each value in bs1, and each item contains a button.
About the button text:
"text": "{Binding Source=bs1, Format=Value: 0000}"
This is a binding expression. It means:
bind the button text to the current value from bs1
format it as Value: 0000
For values 1, 2, 3, the displayed text would be along the lines of:
Value: 0001
Value: 0002
Value: 0003
About the click handler:
"click": "ViewBuilderTest.Window1.button_Click"
This wires button clicks to the button_Click method in Window1, which does:
AlertBox.Show($"I'm {sender}");
So clicking a generated button shows an alert with the sender object.
This code sample uses ViewBuilderTest.Window1.button_Click for the button click handler. This will vary based on the namespace of your project.
The code above generates a Form that shows a datarepeater. An alertbox is shown when the button in the datarepeater is clicked, like this:
How To Use
The ViewBuilder extension can be added to a Wisej.NET project using NuGet Package Manager.
Last updated
Was this helpful?