Wisej 2

What’s New in Wisej 2

1 DESIGNER
Wisej 2 has modernized and enhanced the design experience with several new features:

1.1 NEW AND MODERN SELECTORS AND GLYPH STYLE.

You can change the color of the selectors and the glyphs in case they conflict with the background of the
design surface or just because you like a different one. The last picked color is saved in the registry.

1.2 ANCHOR QUICK SELECTORS

When a control is selected, it will show the 4 anchoring glyphs which allow you to quickly change the
anchor property by turning each side on or off.
1.3 RULER SNAP LINES

Now you can create custom snap lines from the rulers. Click on the ruler to add a snap line. Click again
on a snap line to remove it. Drag a snap line by placing the pointer on the line and drag it.

Snap lines are saved with the resource of the control being designed. Hide all the snap lines by clicking
on the Show Grid button in the Wisej design toolbar.

1.4 DOCUMENT OUTLINE

The Document Outline View has always been available in Visual Studio but it was hidden in the View-
>Other Windows menu.

Now you can show it using the Document Outline button in the Wisej designer toolbar. We have also
enhanced it by supporting Copy & Paste for DataGridView and ListView Columns.
1.5 TAB VIEW BUTTON

Show or hide the Tab View of the TabIndex order using a button in the Wisej designer toolbar.

1.6 RESPONSIVE PROFILES

You can select the active Responsive Profile from the Wisej designer toolbar. It shows the list of client
profiles that is configured in the ClientProfiles.json file. By default, it uses the built-in one. See the
section “Responsive Profiles” below for more information regarding this new feature.

When you switch the active Responsive Profile at design time, the designer reloads the property values
stored with the selected profiles. You can design the controls as they would appear on the selected
profile.
The image on the left is the designer using the “Default Profile”, the image on the right is the same
design view but showing the property values stored with the “Phone” profile.

2 TEMPLATES & WIZARDS

Inheritance Picker wizards have been updated and there are 3 new item templates:

2.1 INHERITED CONTROLS

Select Add->New Item->Wisej 2->Inherited Control.

Wisej will show the inheritance picker dialog with all the control classes, grouped by assembly, that you
can choose as the base class for your new control. Once you pick the class, the new control will open in
the designer.
You can design any control class by itself.

All the property values that you change in the designer are automatically recognized as the default
values and will not be duplicated when you use your new control. See the “Inherited Controls and
Properties” section below for more information.

2.2 STARTUP LOADER

The startup loader template and wizard let you change the default loader by selecting one of the
provided animated gif images or by selecting a custom one.
2.3 CLIENT PROFILES

This template simply adds the default ClientProfiles.js file to the project. You can edit it to add any
custom profile and detect specific devices according to your requirements.

3 RESPONSIVE PROPERTIES
Wisej 2 introduces the concept of “Responsive Properties”. Responsive properties can hold multiple
values and apply it when the corresponding Client Profile matches with the Responsive Profile.

For example, you can set the property this.button1.Display to Both in the Default Profile and to Icon in
the Phone profile.

Responsive Properties can be identified in the Properties panel by their icon. It’s either the responsive
icon or an overlay icon.
The (ResponsiveProfiles) collection shows all the responsive properties configured for the selected
control:

You can create your own responsive properties simply by adding the [Wisej.Base.ResponsiveProperty]
attribute:
The attribute turns on the responsive behavior by default. To turn it off on an inherited property use:

[ResponsiveProperty(false)]

When Wisej detects a profile change, it updates all the responsive properties and fires the
ResponsiveProfileChanged event in this order:

1. Fires Application.ResponsiveProfileChanged
2. Updates the responsive property values.
3. Fires ResponsiveProfileChanged on the container (Form, Page or Desktop).

4 INHERITED CONTROLS & PROPERTIES

Wisej 2 adds full support for inherited controls and inherited properties. Now if you want to use one of
your custom control classes you have to add a generic control and then change the class name by hand
in the code, unless you have registered the control in the toolbox, which can become quite crowded.

In Wisej 2 you will find a new contextual menu item “Add Control” and a new designer verb “Add
Control” that shows you a full list of all usable controls grouped by type: all button, all textboxes, etc.

You can also filter the list by typing in the filter textbox.
The new control will be added to the container in the top left corner.

This new selection dialog will let you pick your classes quickly even when your project may contain
hundreds of custom controls.

4.1 INHERITED PROPERTIES

Starting from Wisej 2, when you change the values of a control in a custom class and use it in a
container, the new property values are NOT copied.

This feature allows you to design real custom classes that you can change without having to update all
the places where the custom control class has been used.

If you like the old behavior, add [InheritProperties(false)] to your custom control class.

5 AUTO RESIZE ROWS AND COLUMNS

The DataGridView now supports row and column auto sizing and has a new DoubleClick value in the
DataGridViewAutoSizeColumnMode and DataGridViewAutoSizeRowsMode enumerations to allow the
user to auto resize the column or row by double clicking the resize line.

The ListView also supports the AutoResizeColumn(…) and AutoResizeColumns(…) methods.

6 BROTLI COMPRESSION
To enable the new Brotli compression, add the Wisej.Web.Ext.Brotli assembly to your project. That’s it.

You can find the source code on GitHub at https://github.com/iceteagroup/wisej-extensions. We publish

it as an extension because it uses Google’s Brotli C/C++ deflater and JavaScript inflater code and we may
need to update it with newer versions.

In our tests, the Brotli compression manages to reduce the responses by half compared to GZip. A
1.2MB json response from Wisej is compressed to about 35KB using GZip (Wisej 1.5) and to about 15KB
using Brotli (Wisej 2).
7 ASSEMBLY CONSOLIDATION
Wisej.Core and Wisej.Web are consolidated into Wisej.Framework.

Wisej.Core.Design and Wisej.Web.Design are now just Wisej.Framework.Design.

For deployment you only need Wisej.Framework.

8 ASYNCHRONOUS PROGRAMMING
Anachronous programming was introduced in Wisej 1.5 as a development feature. It is now completed
and fully implemented in Wisej 2.

8.1 SERVER CALLS CLIENT

Server code can now invoke any JavaScript code on the client and wait asynchronously for the result:
var result = await CallAsync(…);
var result = await EvalAsync(…);

8.2 CLIENT CALLS SERVER

Also [WebMethod] methods on the client, in JavaScript, support asynchronous calls, if the browser
supports it:
var result await App.MainPage.MyWebMethodAsync(…);

8.3 ASYNC MODAL

All modal dialogs or message boxes are also asynchronous:
var result = dialog.ShowDialogAsync(…);
var result = MessageBox.ShowAsync(…);

8.4 ASYNC CONTEXT MENUS

You can show a context menu and wait for it to close asynchronously.
await contextMenu1.ShowAsync(…);

8.5 ASYNC TEXTUTILS

You can use the TextUtils class to measure strings on the client and wait for the result asynchronously:
var size = TextUtils.MeasureTextAsync(“<b>Hello</b>”, true,
this.Font);
9 NEW WIDGET PROPERTIES & METHODS
We have added new properties and methods to all controls in Wisej that greatly simplify client code
integration. All properties can be set at design time and runtime.

The properties are organized in the Widget category of the property grid:

9.1 CLIENT EVENTS

You can add any number of client events and attach javascript code to each event:

You can register multiple listeners for the same event. Client events are not fired at design time.

Related functions:

 AddEventListener(string, string)
 HasEventListener(string)
 RemoveEventListener(int)
 RemoveEventListener(string)
 GetEventListener(string)

9.2 CSSSTYLE
In CssStyle property you can directly use a css custom style that is applied to the Wisej control:
Changes are already shown in the designer.

9.3 CSSCLASS
In CssClass you can refer to a css class that is defined in your project. Use multiple names separated with
a space, just like in Html.

Related functions:

 AddClass(string)
 RemoveClass(string)
 HasClass(string)

9.4 INITSCRIPT
In the InitScript property you can define additional javascript code to be executed when the control is
created. This also works on refresh of the browser. (it´s not executed at design time).

9.5 STATES
You can add, remove, and check states of the control.

Related functions:

 AddState(string)
 RemoveState(string)
 HasState(string)

10 UPGRADING FROM WISEJ 1.X TO WISEJ 2.0

Only few steps are required to upgrade your applications to Wisej 2.0:

 Replace references to Wisej.Web.dll and Wisej.Core.dll with

Wisej.Framework.dll
 Change using wisej.core.design to using wisej.design
 Change calls from ApplicationBase. to Application.
 Set target .NET framework to 4.6
 Modify web.config:
Change
to