Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Features that apply to the whole application, and to all the controls.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Welcome to Wisej.NET - the first Web Integrated Server Environment to design, build, debug, and manage Real Time ASP.NET Applications using C# or VB.NET with JavaScript in Visual Studio.
The first thing to do, now that you have installed Wisej.NET, is to launch Visual Studio and create a new project. Or, launch Visual Studio and open one of our many examples.
Sometimes Visual Studio decides not to show the new project templates. If that happens, please follow the instructions in the missing templates section.
The first time you open the designer, you will get the license activation dialog. Enter your developer (or trial) license and everything should work.
You must have an internet connection to activate the developer license.
The Wisej.NET library can be used with any version of Visual Studio or Visual Studio Code. However, the designer plug in is supported on Visual Studio 2019 and 2022 (Community, Professional, or Enterprise) on Windows.
Make sure that you have installed these 2 workloads:
ASP.NET and web development
.NET desktop development (needed for the designer)
Welcome to Wisej.NET - the first Web Integrated Server Environment to design, build, debug, and manage Real Time ASP.NET Applications using C# or VB.NET with JavaScript in Visual Studio.
Wisej.NET is the most advanced, enterprise-scale, ASP.NET and ASP.NET Core development system in .NET. It covers just about the entire spectrum of features that business developers need to build and manage complex web applications.
It is also a Rapid Web Development system, thanks to its unique WYSIWYG pixel-perfect designer integrated into Visual Studio, and its familiar component object model.
Developers can achieve in a few days what would take months, if at all possible, with any other web framework. The power and versatility of Wisej.NET also mean that it's a large and sophisticated system, with hundreds of features and several ways to accomplish most tasks.
The documentation is organized in multiple cross-linked books. This one is the most extensive, being about the concepts and features for each one of the many available controls.
There is also a full API book, and a book for the extension, integration, deployment, and more.
Wisej.NET 3.5 adds native support for hybrid applications running on all sorts of devices, including full offline support, and many enhancements to the .NET class library and the corresponding JavaScript widgets.
The Visual Studio 2019 and 2022 extension packages are linked below:
Wisej.NET 3.5 is now compiled against .NET 7. This means that existing .NET 6 projects that would like to use the latest version of 3.5 must update the target framework dependency.
Wisej.NET Hybrid includes three new project templates for creating applications:
This project template is used to create a Wisej.NET Hybrid Client. The Client project builds and runs an executable (.exe, .apk, .ipa, etc.) that can be deployed on any desktop or mobile platform.
This template is based on .NET MAUI. You can interact with this project the same way you would with any other MAUI project.
Allows developers to build and deploy a traditional Wisej.NET application with the added ability of interacting with the Hybrid device's native functionalities.
This application is deployed to a remote web server such as IIS, Kestrel, or Nginx on Windows or Linux.
To use native device functionalities, you must access this application through the Wisej.NET Hybrid Client Application
Allows developers to build and deploy applications that run entirely on the Hybrid device. The project template contains similar features to the Remote application template such as a Page control.
This project needs to be linked into the Wisej.NET Hybrid Client Application to use.
In 3.5 we also focused on extending the programming side of Wisej.NET with a number of enhancements to the object model, data a binding, the various components.
All controls that show a label gained a new AutoToolTip
property. When set to true
and the text is truncated, it will automatically use the title attribute to show the full label as a native tooltip.
TextBox.Text
now converts all \n to \r\n when Multiline
is true
. Previously Wisej.NET allowed the browser to strip \r\n and instead return only \n as a new line.
Most controls have gained several new constructors, some with optional and default arguments, that allow developers to use the controls in code adopting a more flexible and easier syntax:
Wisej.NET 3.5 includes a new theme for building dark-style applications. The new Bootstrap Dark theme (BootstrapDark-4) is based on the existing Bootstrap-4 light theme.
The new Chat control can be used to build conversations into an existing Wisej.NET application. The new chat control supports text and custom message types, allowing users to share any type of control or data in the conversation.
The new Signature control can be used to collect and export user signatures. The control includes undo, redo, image import/export, and line customization features.
The new Pull to Refresh component can be used to trigger a refresh of a data source associated with a scrollable panel. All containers inheriting from ScrollablePanel support the Pull-to-Refresh component.
The new TesseractJS component allows developers to add real-time OCR scanning to the Wisej.Web.Ext.Camera control.
Dynamsoft Barcode Reader – JavaScript Web SDK
Dynamsoft Document Normalizer – JavaScript Web SDK
Developers are required to purchase a license from Mobiscroll for use of any components. The Wisej.NET integration uses the Mobiscroll JavaScript integration.
The latest Wisej.NET 3.5 is available on .
Wisej.NET 3.5 is now able to run on iOS, Android, and MacOS devices using the server in a new Wisej.NET Hybrid shell build using MAUI's native integrations.
Alternatively, you can add the NuGet package to an existing Wisej.NET project.
gained the new Visible property. It allows the application to hide items without having to remove and add them back to the collection.
The extender now supports the interface and data binding. We also added the Enabled
property to the base class to allow the code to disable a specific validation rule without removing it from the Validation extender.
exposes the CreateSummaryRow, CreateDataBoundColumn, and CreateDataGridViewColumnFromType methods as public virtual to allow an application to customize the grid's inner behavior and fully control the automatica creation of rows and columns.
The extender allows a derived class to override its methods and fires the new ErrorChanged event to allow an application to customize error message and icons in a single location.
All basic methods in now return this
to allow code to chain calls:
See documentation:
The new Barcode & Scanning premium extension gives developers an enterprise-ready option for barcode scanning and text (OCR) scanning on the web.
Developers are required to purchase the following licenses from :
The new premium extension gives developers a suite of mobile-friendly controls and components to use in Wisej.NET applications.
Wisej.NET 3.2 adds new enterprise-grade features that simplify the development of complex Line of Business (LOB) cloud applications for the enterprise. Our goal is always to help improve developers productivity and make the applications using Wisej.NET more resilient and maintainable.
The latest Wisej.NET 3.2 is available on NuGet. To use the build, make sure to check the Prereleases option in the NuGet Package Manager.
The Visual Studio 2019 and 2022 extension packages are linked below:
We added a new Validation property extender to provide a modern, centralized, and flexible validation system to Wisej.NET applications.
Once you drop the new Validation component on a container at design time, all the controls are extended with a new property ValidationRules. You can assign multiple validation rules to any control.
Using the ValidationRules Collection Editor requires the Wisej.NET 3.2 VSIX to be installed within Visual Studio.
With Wisej.NET 3.2 we are introducing a new concept to build views using a JSON representation. In the future we may add XML or any custom parser, and we are also planning to use the new View Builder as an optional serializer in the designer.
Font support has been enhanced in the JavaScript layer as well as the server side .NET layer in Wisej.NET. Now we support using theme fonts that are not installed on the server.
The DevExpress Dashboard is a control that allows developers to create interactive and customizable dashboards for business intelligence (BI) purposes. The platform offers a wide range of data visualization tools and widgets, such as charts, graphs, maps, gauges, and pivot tables.
Using this extension requires a Developer Express license.
Added Enable HTTPS option to the new project wizard.
Now projects include the full applicationhost.config
file in /Properties, or in /My Project for VB.NET, preconfigured to listen to https://localhost:44391, for IIS Express and .NET 4.8.
For .NET Core it listens to the same https://localhost:44391 URL and it doesn't need to use applicationhost.config
.
improvements across the board.
Consolidated bug fixes and enhancements to all controls.
DataGridView memory footprint for large data sets has been reduced.
Expanded Binding and MVVM ICommand support to ToolBarButtons and MenuItems.
New BindableComponent base class to enable data binding on components.
We added the option to enable the design-time debug mode in the Designer Options dialog. When enabled, Wisej.NET will show the Edge renderer(s) it uses to display each control in the pixel-perfect design view.
We have added a new experimental extension to build all sorts of views using a plain JSON representation. It will eventually allow us to integrate it with the designer and optionally serialize views to JSON or XML rather than code in InitializeComponent.
The Wisej.Web.Ext.ViewBuilder source code is available in our public GitHub extensions repository and on NuGet.
As a simple start, this is what you can do with the ViewBuilder:
In the code above you can see two ways to use the ViewBuilder: as an extension method on any ContainerControl
type (Form, Page, UserControl) to create the child components inside the target control; or as a static method used to create a new view from the model.
You can also see three different input types: Stream, Object, and String:
Stream is any stream that returns a JSON string.
Model is any object of any kind, just like any data object or view model.
String is a JSON string.
In all three cases, the input is an object model that is used to build the view. The code below shows a simple form with a TextBox and a Button:
As you can see in the simple model above, the model is always the same. The representation can be JSON (could be XML or yaml or anything else) or directly a .NET object. These are the most important features to notice:
Lower case field names. The ViewBuilder recognizes lowercase names and resolves them to the correct property. It allows JSON models to follow the JavaScript camel casing convention.
Events are treated like properties. Assigning an handler is the same as calling += or AttachHandler.
Extension properties, like the ToolTip extender", are addressed using the name of the extender component: i.e. "toolTip1.ToolTip". (Note that you don't need to use the ToolTip extender for tooltips, all Wisej.NET controls have the ToolTipText property.)
When declaring a model property, extender properties use the underscore instead of the dot to address the component.
All non-numeric values are in strings. Including Point, Size, Color, Font, etc. The ViewBuilder uses the property's TypeConverter to parse the string.
The object model is simply the same model as the target component, with just one system property: _type
. Use "_type" to define the class of the component to create. It can be a fully qualified type name or a simple name. If it's a single string, Wisej.NET will search in the Wisej.Web.
namespace first.
For the _type value, you may also use a fully assembly-qualified type name. It allows your view models to refer to external assemblies and load them dynamically when the ViewBuilder creates the view.
Collections are assigned as arrays. The ViewBuilder detects what kind of collection is expected on the target and either assigns an array or calls the collection's AddRange method.
Use the components
collection at the root level of the top-level container to add Wisej.NET components and extenders: Animation, ToolTip, ErrorProvider, etc.
The ViewBuilder can also resolve references to other components in the same container by name. If you set a property that expects another component, for example, ContextMenu, or DropDownControl, you can use the name of the component or control in any location of the model.
The ViewBuilder will search for the component or control name at all levels and assign the reference to the property.
Wisej.NET supports the IExtenderProperty system at design time. Now it supports it also in this new ViewBuilder model. There are usually two kinds of extenders: a component and a container.
For example, when you drop a control in a TableLayoutPanel, you will notice that the control has "gained" new properties at design time: Column, Row, RowSpan, ColumnSpan, and others.
The ViewBuilder model fully supports both, extender properties defined by another component and extender properties directly on the container.
In the JSON sample above you can see that button1 sets properties it doesn't have: columnSpan, column and row. These properties are extender properties provided by its TableLayoutContainer.
It also sets two more properties it doesn't have: animation1.name and animation1.event. These properties are provided by the animation1 component declared in the components collection.
Data binding is also fully supported. We used a syntax similar to WPF or MAUI. Any property in the model can be assigned a string that starts with "{Binding"
to become a data-bound property.
The complete syntax is:
"{Binding Name, Source=Source, Format=Format, OnParse=OnParseHandler, OnFormat=OnFormatHandler, SourceUpdateMode=SourceUpdateMode, ControlUpdateMode=ControlUpdateMode}"
Everything is optional except Name.
If the Source is not specified, the current container (this or Me) is assumed to be the source. When the Source is specified, it's also relative to this or Me, unless it's a reference to a component, a BindingSource, for example.
Data binding and parsing is a large and complex system. This is probably one of the areas on the ViewBuilder that will evolve the most in the next builds.
Attach handlers to any event by name. You can refer to static methods using their name or fully qualified type name, or you can attach to local methods simply by name or using this or Me.
Event handlers are resolved through the ViewBuilder.ResolveEventHandler
function , which is overridable. The default resolver looks up the method and returns its MethodInfo object.
You may also create your own, and attach to JavaScript handlers or compile the code on the fly!
Your ResolveEventHandler
implementation (see Custom Resolution) receives the string assigned t the "click" event and it's up to you to return the MethodInfo to attach to the event.
The ViewBuilder class exposes two assignable methods: ResolveReference and ResolveEventHandler:
It's invoked when the ViewBuiler needs to convert a string name to a reference to a component or a control. If you assign your resolver to this method then it's entirely up to your code to resolve those references.
It's invoked when the ViewBuilder needs to convert a string to a MethodInfo reference in order to create a delegate and attach to the event.
If you assign your resolver to this method, then it's entirely up to your code to convert the string to a method. This handler allows you to attach any kind of handler, event one you build on the fly, to any event on any control created by the ViewBuilder.
We added a new Validation property extender to provide a modern, centralized, and flexible validation system to Wisej.NET applications.
Once you drop the new Validation component on a container at design time, all the controls are extended with a new property ValidationRules. You can assign multiple validation rules to any control.
You can use the Validation component also directly in code. Instead of setting the ValidationRules property in the designer, simply call validation.SetValidationRules(control, rules);
There are 7 built-in validation rules:
Required: Validates the presence of any value.
Email: Validates an email entry.
Decimal: Validates a decimal value.
Integer: Validates an integer value.
Currency: Validates a currency value.
Telephone: Validates a phone number using a validation mask.
Regex: Validates any value using a custom regular expression.
Each built-in rule has a set of custom properties in addition to the basic properties inherited from the abstract ValidationRule class.
When design mode, you can add and manage the validation rules using Visual Studio's collection editor; it will automatically load the built-in rules and any custom rule you may have added to your solution.
👉 This is more or less what you do now in code when handling the Validating event. With the difference that now you can reuse the same validation rule for multiple controls in an easy way.
Build your own custom validation rule classes by extending Wisej.Web.ValidationRule. You can add any property and perform any validation procedure required by the application.
Using validation rule classes allows you to implement complex business rules for the validation of user-entered data in a single, reusable, place.
Example of a custom rule to enforce a minimum-age value:
The Validation extender, and each Validation rule, expose the ErrorProvider property (accepting any implementation of the new IErrorProvider interface), allowing the validation system to display the error message anywhere!
On the control itself, the default.
We have also added two new interfaces:
IValidation. All controls Controls that support the InvalidMessage property and fire Validating and Validated now implement this interface. (it's similar to the IReadOnly or ILabel interfaces that normalize common features.)
Now any class can implement the IErrorProvider interface and be connected to either the Validation component or to any (even multiple) ValidationRule implementation.
The Wisej.Web.Label control implements the IErrorProvider interface and it automatically shows or hides itself when an error message is set or cleard.
The code below shows a simple custom IErrorProvider that collects the errors and displays them in a list, all at once, in a MessageBox.
Validation rules are invoked twice, on Validating and on Validated events. A validation rule implementation may alter the text of a control while it's being validated or after it has been successfully validated.
For example, the built-in CurrencyValidationRule exposes a boolean Format property. When set to true, the rule will format the value of the control, if successfully validated, to display the currency symbol and the correct number of decimals.
The Validation extender exposes the same Validating and Validated events that are available to any control. However, for the Validation extender these events are fired for the controls that have been associated to at least one validation rule.
Your handler code attached to the Validation extender will receive the array with all the validation rules associated with the control being validated. This feature allows an application to perform additional custom validation at the Validation extender level, for all the related controls.
Font support has been enhanced in the JavaScript layer as well as the server side .NET layer in Wisej.NET 3.2. Now we support using theme fonts that are not installed on the server and can load all the different variations for a font family.
montserrat-bold.ttf
montserrat-bolditalic.ttf
montserrat-italic.ttf
montserrat-regular.ttf
Wisej.NET will load all the montserrat-*.ttf files in a private Montserrat family and use it at runtime for autosizing and layout calculations.
This new feature is particularly useful when deploying to Azure App Services or other providers that don't allow you to install custom fonts on the servers.
Font sources added to a theme now support specifying the font-style and font-weight properties. It allows a font family in the theme to use different sources (woff, woff2, ttf, etc.) for different styles and weights.
Until now Wisej.NET supported only the "normal" source and let the browser render the different styles and weights.
This is the definition in the theme file:
Note the "version":"1.2.3.4" optional property. It allows the theme to add a custom "version" argument to the source URLs to force reloading the font from a URL that may be cached.
You can also reuse the same .tff files deployed in /Themes/Fonts in the sources for the font definition in the theme or theme mixin.
When enabled, Wisej.NET will show the Edge renderer(s) it uses to display each control in the pixel-perfect design view.
You will see one or more small windows that show the renderers managed by the design view. When debugging the client side JavaScript, we recommend setting the Parallel Renderers to 1 - it's much easier to have only one Developer-Tools window open.
Click anywhere on the renderer window and press F12 to open the Developer Tools window.
With the Developer Tools open you can fully debug everything the designer renderer does on the JavaScript side. In Visual Studio you will also see the same debug view displayed in Chrome or Edge when showing the developer tools.
Using this powerful features allows widget developers to debug and test their JavaScript implementation at design time.
Field | Description | Example |
---|---|---|
Once you add validation rules to a control, the Validation component will automatically attach to the control's Validating and Validated events and invoke the rules in sequence. When a rule fails to validate, it will set the property of the control being validated, and set the e.Cancel property of the event to true.
Validation messages are typically displayed in an error tooltip by setting the property of an editor control. A second way to show validation errors, is to use the extender. However, an application would have to explicitly set the error message in code when processing the Validating event.
Using the extender.
On a separate (which now implements the IErrorProvider interface). The Label is automatically show or hidden.
On any custom implementation of the new IErrorProvider interface: i.e, a , a slide-in Panel, any logger, etc.
IErrorProvider. Exposes the same two public methods implemented by the existing component. Allows an application to have full control of where an how to show error information related to data field validation. The Label control now implements IErrorProvider.
To support private fonts, simply deploy the .ttf files for the fonts used in the theme that are not installed on the server to the /Themes/Fonts folder. For example, in case your application uses the Montserrat font and it's not installed on the server, put the following files in /Themes/Fonts:
Name
Name of the property in the data source to bind to.
{Binding UserName} {Binding Company.Name}
Source
Reference to the data source. Can be any object in the current context (this) or a component in the components collection.
{Binding Name, Sorce=DataContext} {Binding CompanyName, Source=bindingSource1}
Format
Any standard or custom .NET format string.
{Binding Amount, Format=Total: c}
OnParseHandler
An event handler for the Binding.Parse event.
{Binding Location, OnParse=ParseLocation}
OnFormatHandler
An event handler for the Binding.Format event.
{Binding FullName, OnFormat=FullNameFormat}
SourceUpdateMode
One of the DataSourceUpdateMode fields.
{Binding Name, SourceUpdateMode=Never}
ControlUpdateMode
One of the ControlUpdateMode fields.
{Binding Name, ControlUpdateMode=Never}
Wisej.NET 3.1 enhances the milestone 3.0 release by adding several new unique features and a simplified installation procedure.
In addition to numerous bug fixes and considerable performance enhancements to our libraries, 3.1 includes the following notable new features:
Wisej.NET is now easier to use than ever before. It is available as a VSIX installer through the Visual Studio Marketplace or via the Visual Studio Extension Manager. Without using the GAC, the new VSIX installer automatically registers Application Templates and the Wisej.NET designer.
A basic but very useful Typed TextBox is one of the most desired features in practically all web development platforms and is now available in our toolkit
You can use this new editor control to define the type of Value property to which the text should be parsed, a.NET format string (standard or custom), and whether the formatted string should be preserved when editing or removed when entering the editor.
You can also take over the parsing and formatting using the new events and virtual methods.
New "Tiny Tool Icons" have been added to the Property Editor in the designer to indicate some of their attributes or reset New their value.
These new icons may save time for developers by providing information and features that needed several clicks to reach.
Reset. Instead of having to right-click and select the Reset option (if enabled), this tiny tool allows developers to reset the value of a modified property with a single click.
Data Bound. Indicates that a property is data-bound. This information was only available by opening the data binding dialog.
Localizable. Indicates that the property can be localized. Previously, this information was unavailable without inspecting the source code or attempting to localize the value.
Responsive. Indicates that the property is a Responsive Property and can hold multiple values associated with client profiles.
The new property ListBox.Orientation changes the layout of the items in the ListBox from the standard Vertical layout to the new Horizontal Flow layout.
Everything else remains the same, including horizontal scrolling, keyboard selection, and so on.
Previously, the data binding system in Wisej.NET only supported the BindingList<> class for advanced data binding. However, MAUI and WPF support the simpler ObservableCollection<> type for their data binding.
Now Wisej.NET seamlessly supports both. Support for the INotifyPropertyChanged is identical in all data binding implementations.
Together with the Commanding support introduced as an experimental feature in 3.0, it now supports most 3-letter or 4-letter binding models.
The Commanding implementation introduced with 3.0 is now fully supported.
Services and Dependency Injection are now first-class citizens in Wisej.NET 3.1.
Using the Visual Studio Marketplace allows us to provide new project and item templates. You can use the Visual Studio Extension Manager to install our new templates and automatically register them within Visual Studio.
We have moved the Tour Panel Extension's Templates to the Marketplace and added new Navigation App Templates similar to the Blazor startup templates.
When Wisej.NET is installed from the VSIX installer (Visual Studio Market Place or downloaded from our builds page), you can press F1 to get directed to our extensive online documentation.
The system can determine the Wisej.NET class, property, or method by the location of the cursor in the editor. This has support for the main API and all the extensions!
We have selected new automation tools as we built our new automated test suite, which we’ve decided to share using TestProject.io, an end-to-end automation solution for Web and Mobile apps with all the latest browser drivers.
Our Wisej.NET extension helps in several ways like scrolling widgets into View, handling Tree Views, Keystrokes, counting Alert or Message Boxes, and much more.
We have added a new module to our open-source toolkit. The new extension employs the Web Authentication API (known as WebAuthn).
The extension enables developers to add external and platform-specific authenticators into Wisej.NET applications. You can read more about the new extension in our blog post here.
This is a new experimental feature. We added a new Application.OpenWindow(url, ...) method with an optional onclose callback action, and added new onclose callback action to the existing Application.Navigate() method.
Application.OpenWindow() opens the url in a new popup window. If you specify the onclose callback method, it is invoked when the user closes the popup window.
It can be used for several purposes:
Dispose a resource (i.e. delete a file or close a handle) when the user closes the tab or the popup.
Simulate detaching a specific window from the browser and allow the web application to work with multiple monitors.
The same effect can be achieve using a browser tab that the user can detach and move to a second monitor.
Wisej.NET 3 is the first release of Wisej that supports both .NET Framework (4.8) and .NET Core (now .NET 6, will be 7...) and runs on Windows, Linux and MacOS.
Wisej.NET 3 for .NET Framework 4.8 replaces Wisej 2.5 while Wisej.NET 3 for .NET Core 6 is a new build for ASP.NET Core applications that can run on Windows, Linux and MacOS.
Adding support for .NET Core and ASP.NET Core required changes to the HTTP/WebSocket layer and the implementation of a new Wisej Middleware module. Everything else is fundamentally unchanged or enhanced: .NET Controls, JavaScript Widgets, Designer, Themes, Theme Builder.
We have been using Wisej.NET 3 on Linux internally on many test projects and we have run it on several Linux distributions as well as small devices like the Raspberry Pi for over a year. And we are in the process of testing it on even smaller embedded devices running custom Linux builds.
Existing Wisej 2 applications should be able to run on Wisej.NET 3 mostly unchanged. Hopefully, all you need to update is the Visual Studio project format to the new "Sdk" project format.
The designer in Visual Studio is not available for the .NET Core targets and relies on the dual target approach, with the added benefit that Wisej applications can be deployed on .NET Framework 4.8 on Windows and .NET Core on Windows, Linux and MacOS.
The new Sdk project format has many properties that are not available in the project property panel. You'll have to get comfortable editing the .csproj or .vbproj files directly. See Project Properties for an example if the ones we added to our templates.
New projects can target multiple .NET platforms. When you create a new Wisej 3 project, our wizard will allow you to select the target and enable certain options:
You can edit the .csproj or .vbproj at any time and change the <TargetFrameworks> tag. Just make sure that "net48" is always the first, if you want to use the designer.
Multitargeting will inevitably require the use of conditional compilation and excluding certain source code files from some platforms. In our sources we use conditional properties and partial classes to neatly separate code keeping the same class structure.
Now that Wisej applications can run on .NET 6+ they are standard ASP.NET Core applications. When running on .NET 4.8 they are standard ASP.NET applications.
ASP.NET Core applications don't use System.Web anymore and are not integrated with the IIS pipeline. They are all based on OWIN and Microsoft's Kestrel. Which means that they are almost always self-hosted web applications.
Wisej supported the OWIN middleware approach since 1.5, based on Microsoft's Katana.
This is how you add Wisej to a standard ASP.NET Core application:
All ASP.NET pages and all ASP.NET controls will NOT work on ASP.NET Core.
While the vast majority of the work in Wisej 3 has been to split the code between .NET Core and .NET Framework, replacing all of the ASP.NET code with ASP.NET Core, we have also added some cool new features.
All the Application.Download, and Application.DownloadAndOpen methods have a new optional argument: a callback function, invoked when the file has been downloaded by the client.
This is a powerful new feature that allows an additional level of control that was not possible before.
Wisej supports all sorts of very powerful layouts (impossible to achieve with any other web platform). However, all the layouts are implemented in layout engines and are "permanent": you have to set layout properties for the children and the container manages the layout using the specific layout engine.
If you just need to apply a specific layout, or a combination of layouts, by code, without having to change containers, use the Control.LayoutChildren() methods:
LayoutChildren(controls, dock, viewArea, spacing, useMargins, hAlign, vAlign)
LayoutChildren(controls, direction, viewArea, spacing, useMargins, hAlign, vAlign)
Each method is overloaded with multiple variants and most parameters are optional using predefined values.
Calling LayoutChildren without the controls collection and without the viewArea argument, arranges all the direct children using the control's DisplayRectangle as the bounding area.
Otherwise you can specify only a subset of the child controls and define a view area to limit the layout space. You can also try this new automatic layout functionality at design time using the new AutoLayout Panel.
You can call this method as many times as you need and with as many combinations of rules as you like. It doesn't change the layout engine or the layout options, it only moves and resizes the child controls according to the specified arguments.
We have introduced a new experimental feature to extend the current data binding model to make it compatible with MAUI's Commanding approach. In our implementation, commands work seamlessly with the existing data binding and have access to the full context of the command source. In MAUI the command's code is limited to a single parameter.
In this first implementation, Button and SplitButton have a new Command property and CommandChanged event. The Command property can be data-bound to ICommand properties of the data source.
When ICommand.CanExecute returns false, the command source button automatically disables itself. Clicking the button invokes the method attached to the command.
Use the new Command class or Command<T> class to wrap the implementation of a command and to cast the data item coming from the data source.
This new feature is still experimental and may change in future builds.
Added new interfaces that allow code to use common features across controls:
ILabel. Implemented by all controls that have the Label property.
IImage. Implemented by all controls that have the various Image (ImageIndex, ImageKey, ImageSource) properties.
IReadOnly. Implemented by all controls that have the ReadOnly property.
IModified. Implemented by all controls that have the Modified property.
Using these interfaces eliminates the need to cast a control to the specific class.
Wisej 3 adds a new experimental feature to support the dependency injection model natively.
The Application class now is an IServiceProvider and has two new methods to manage services: AddService and GetService with several overloads.
Using this new feature is quite simple, flexible and very powerful. Use Application.AddService() to register a service and Application.GetService() to retrieve it. Services can be added with several scopes:
Global. Only one instance (singleton) is shared among all sessions.
Session. Each session gets its own instance.
Transient. Each request gets a new instance.
When the services instance passed to AddService is null, Wisej will automatically try to instantiate the service class on first use (on demand). As soon as the service goes out of scope, Wisej will automatically dispose of it. If the service implements the IDisposable interface, it gets a call to IDisposable.Dispose()
A service can also be instantiated on demand in a callback.
Using the service is also quite simple. Regardless of the scope, the service consumer simply calls:
The return is just null if the requested service is unavailable.
Our DataGridView control can handle an unlimited number of rows thanks to its built-in virtual scrolling and page caching on the client side. As the user scrolls the rows, the control manages a client-side cache of pages or rows and requests from the server only the pages that are needed to render the current view.
You can control the size of the client-side cache using the BlockSize and MaxCachedBlocks properties. When the DataGridView is in VirtualMode, it doesn't hold any data and can manage any number of rows with minimal memory usage. Your code provides the data as needed handling the CellValueNeeded and CellValuePushed events.
However, the VirtualMode events are fired every single time the application code uses a cell in the grid (in VirtualMode the grid doesn't hold any data). Usually, implementations of a virtual DataGridView must implement some kind of cache management on the server.
The new DataRead event makes this task a lot easier. It is fired when the client requests a page allowing an application to build and manage a small server-side cache in sync with the client scrolling, resulting in a much simpler usage of the VirtualMode events.
This property has been available as an experimental feature for a while and it's now a supported property. It takes an HTML string and it displays filling the entire grid space when there grid contains no rows.
Shows like this when the grid is empty.
Rolled up all bug fixes.
Layout speed improvements on the client and server.
Refreshed all icons in designer and Theme Builder.
The Visual Studio designer in Wisej 3 has been upgraded to support Visual Studio 2022. Everything else is unchanged, and it requires the .NET Framework 4.8 target to work with Visual Studio.
Wisej 3 components are available in the toolbox under the "Wisej 3" tab name. Since Wisej 2.5 we have stopped installing components in the toolbox and instead rely on the automatic installation of nuget components.
Unfortunately Visual Studio still doesn't support toolbox icons for nuget components. You can always install a custom tab and drag & drop /net48/Wisej.Framework.dll to the toolbox to see the icons. Don't use "Wisej 3" for the tab name or nuget will replace your toolbox content.
Extensions added to a project using the NuGet Package manager will show up under the "Wisej 3 Extension" tab name.
If the toolbox doesn't show the Wisej tab and tools, make sure that the Automatically Populate Toolbox option is set to true.
Beginning with Wisej 3, projects will be able to target multiple frameworks.
net48 must always come first in the csproj file to load the Wisej designer.
You use four preprocessor directives to control conditional compilation:
#if
: Opens a conditional compilation, where code is compiled only if the specified symbol is defined.
#elif
: Closes the preceding conditional compilation and opens a new conditional compilation based on if the specified symbol is defined.
#else
: Closes the preceding conditional compilation and opens a new conditional compilation if the previous specified symbol isn't defined.
#endif
: Closes the preceding conditional compilation.
When the C# compiler finds an #if
directive, followed eventually by an #endif
directive, it compiles the code between the directives only if the specified symbol is defined. Unlike C and C++, you can't assign a numeric value to a symbol. The #if
statement in C# is Boolean and only tests whether the symbol has been defined or not. For example:
Multitargeting will inevitably require the use of conditional compilation and excluding certain source code files from some platforms.
If you combine this technique with partial classes you can build very flexible classes that have code that compiles on different platforms:
Visual Studio will show you which targets apply for each file on a drop down at the top left.
Once your main project targets multiple frameworks, all the projects and the libraries it references must also provide their binaries for multiple targets.
This is all done automatically as long as the referenced projects build the binaries using the standard .NET naming convention, and libraries are added using NuGet packages that provide their binaries for multiple targets.
If you use a package only for .NET 6 or only for .NET 4.8 it will still work but you have to exclude the code in the target framework that cannot use the package.
To add multiple targets to your Wisej application, ensure the project uses the format and add the following tag.
In our sources we used and conditional property groups in the project file to compile "net48/Test.cs" only on .NET 4.8 and "net6.0/Test.cs" only on .NET 6.
When building class libraries that target .NET 6+, the assemblies that are referenced via NuGet will not be copied to the bin folder unless the following element is added to the library's csproj file:
All referenced assemblies should be copied automatically in .NET Framework.
If a project or assembly reference is not used in the main Wisej project, the referenced project's dependencies will not be loaded into the App Domain automatically.
In .NET Framework, any assembly referenced by the main Wisej project would have it's dependencies loaded into the App Domain.
For example:
If you create a custom control library that implements a custom Bubbles notification that gets dynamically injected into the main Wisej project, you will need to call Application.LoadAssembly() on Wisej.Web.Ext.Bubbles to load the custom library's dependency into the Wisej project.
Wisej 3 introduces a new approach for creating and working with projects based on ASP.NET Core. The changes include a new SDK Project Format, Kestrel Web Server, and more.
There is no need to change the project format if you are staying with .NET 4.8! Wisej 3 supports both .NET Framework and .NET Core. You only need to change the project format to the SDK format if you are going to use .NET Core and ASP.NET Core.
When migrating a Wisej 2.x project to Wisej 3, it's not recommended to change the existing project but rather create a new Wisej project using the new templates and copy over files.
Moving from older versions of Wisej to Wisej 3 requires updating the project to the new SDK Project format.
Take note of all embedded resources, references and build customizations within the Project.
Unload the Project.
Delete the content of the .csproj file.
Copy the following text into the .csproj file.
5. Reload the Project
6. Add embedded resources, references, and build customizations back.
Files that are Embedded Resources are reset to Content, don't forget to set them again to Embedded Resource.
All the localization .resx files need to be upgraded to Wisej.Framework, Version=3.0.0.0. It's a simple task that can be completed using Visual Studio Search & Replace.
Replace "Wisej.Framework, Version=2.0.0.0" with "Wisej.Framework, Version=3.0.0.0".
It's likely that your projects don't have any Wisej.Framework reference in the .resx files.
A Startup.cs file is required for ASP.NET Core projects (Wisej projects targeting .NET 6+).
Right-Click the Project.
Click Add > Class.
Set the name to Startup.cs.
Click Add.
Copy the following content into the Startup.cs file or download the file below.
Don't forget to update the Namespace.
Wisej 3 projects targeted for .NET 6+ require adding a launchSettings.json file to the /Properties directory of the project.
Click Add > New Item > JSON File.
Name the file launchSettings.json.
Copy the following text into the file.
Profiles define the startup behavior for the application. Don't forget to update the profile names.
The new SDK project format has many properties that are not available in the project property panel. You have to get used to editing the .csproj or .vbproj files directly.
Unfortunately, there isn't a comprehensive list anywhere and many properties are not standard and depend on build targets. All you can do is search around...
These are just a few that we have added to our templates:
GenerateAssemblyInfo = false
AppendTargetFrameworkToOutputPath = false (.NET Framework)
OutputPath = bin/ (.NET Framework)
A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries and settings.
Using Visual Studio Docker Tools, Wisej 3 applications can be packaged and run in these containers.
When creating a cross-platform Wisej 3 application, Visual Studio will prompt the user to add Docker support to the project.
To run the Wisej application in a Docker container, change the runtime target to Docker.
When building and running a Docker project, the first TargetFramework is always used. If Docker can't run the first TargetFramework, it will target the second or third listed framework.
Docker can build images automatically by reading the instructions from a Dockerfile
. A Dockerfile
is a text document that contains all the commands a user could call on the command line to assemble an image. Using docker build
users can create an automated build that executes several command-line instructions in succession.
Below is a sample Dockerfile configured to run a Wisej 3 application that targets .NET 5.
Be sure to update the Dockerfile if the TargetFramework is not .NET5.0.
Wisej 2.5 requires .NET Framework 4.8. This is the last supported .NET version from Microsoft. Wisej 3 will target both .NET Framework 4.8 and .NET Core 5, 6, 7, …
Wisej 2.5 can use the latest Edge/Chrome in the designer, introducing the following features:
Multiple parallel rendering engines
Use widgets based on the latest ES6 ECMAScript
Use JavaScript arrow functions
Accurate SVG positioning
Faster rendering
Visual Studio 2022 64bit
Always make sure that you have the latest WebView2 SDK installer from:
Learn more about WebView2 here:
Theme Builder now can use the latest Edge/Chrome browser to show the preview controls and to run your applications while working on the theme.
As an added bonus, now you can detach the browser tab and work with your application running on a separate window while working on the theme at the same time!
This powerful addition allows you to aggregate and style rows using the standard functions or any custom formula you may need in your code. Aggregated rows are added either above the group, below the group, or can become parent rows in a hierarchical structure.
Wisej 2.5 consolidates several enhancements and bug fixes:
JavaScript Optimization. We have removed all the JavaScript code that could cause the V8 engine to recompile a class improving client side speed.
CharacterCasing Property. All controls that show a text (i.e. Label, Button, MenuItem, ...) have a new CharacterCasing property allowing an app to change the case if the text without having to alter the code.
Design Rendering speed. Several improvements and the new parallel renderers improve the designer experience.
New Bootstrap Theme. We have added a new bootstrap theme and the full bootstrap icon-set in a new Wisej Icon Pack.
This is a major change in the way we deploy Wisej and it prepares for the next major Wisej 3 release with support for dual framework targeting and .NET 6+.
Wisej.Framework.dll will be installed in a local NuGet repository at %ProgramFiles%/IceTeaGroup/Wisej 2.5/nuget as a NuGet package named "Wisej Local". It will not be copied to $ProgramFiles%/IceTeaGroup/Wisej 2.5/bin anymore.
This change will allow developers to switch to any Wisej version without having to run the installer again, or uninstalling and reinstalling. Simply open the NuGet Package Manager and select either "Wisej Local" or nuget.org and filter for "Wisej-2".
The new templates and existing projects will have to use the NuGet Package Manager to reference Wisej 2.5. This is important because it will allow Wisej 3 to deploy the Wisej.Framework assembly for multiple targets.
All the extensions will only be available at NuGet.org.
In order to use the new <PackageReference> syntax in your .csproj or .vbproj project files, instead of the old Packages.config file, make sure this option in Visual Studio is set to PackageReference:
Starting with Wisej 2.5 you will not find the Wisej components in the toolbox in Visual Studio like before. We have stopped installing the toolbox and instead rely on NuGet and Visual Studio automatic population of the toolbox.
Make sure that your Visual Studio has the "Automatically Populate Toolbox" feature turned on.
This change eliminates the common problem of the Wisej toolbox disappearing, allows us to add Wisej to multiple version of Visual Studio installed on the same machine, and gives us the flexibility to add and publish extensions more frequently.
A downside is that Microsoft still doesn't support toolbox icons for NuGet packages. If you really want to add Wisej Components with their icon to the toolbox, follow these steps:
Add a new tab to the toolbox and name it "Wisej" (don't name it Wisej 2.5 or it will be replaced by the NuGet Package).
Locate the Wisej.Framework.dll (or extension dll) and simply drag & drop it on the new toolbox tab.
Wisej is not limited to C# or VB.NET! We have tested it with other .NET languages and made sure it works also with COBOL, x# (CLIPPER, dBase, Vulcan.NET) and F#.
MicroFocus VisualCOBOL, NetCOBOL, Raincode COBOL can build single-page web apps with Wisej!
CLIPPER, dBase, Vulcan.NET, XSharp can build single-page web apps with Wisej!
Wisej 2.1 consolidates several new features from 2.0, while adding several new controls (including a powerful new DataRepeater) and reaches a high level of stability.
All editors have a new Label property. It adds a responsive, localizable and themeable label next to the editor.
The Label supports 5 positions: top, left, bottom, right and inside (this is the material style that shrinks the label when there is content).
The size of the inner label and the inner editor can be set to proportional, fixed, or auto-sized. All the properties can automatically change according to the device profile (e.g. the label can be on top for mobile devices, and on the left for the desktop). Supports mnemonics focus, colors, and many other features.
Use the Shape control to frame content, including images, and to handle the four borders of a plain DIV tag. It lets you rotate the item, display circles, ovals, rectangles, and triangles using a simple data-bindable all-purpose control.
You can place it behind the controls to frame, or use it as a container and place the controls inside.
We have changed all the static events exposed by the Application class to weak events. This new approach (also present in the WPF platform) prevents the source of the static event from holding on the instance handler. It will prevent applications from accidentally leaking memory when attaching to static events exposed by Wisej.
All controls that supports the VirtualScroll mode (TreeView, ComboBox, ListBox, ListView and DataRepeater) now have a new PrefetchItems property allowing the pre-loading of a items outside of the visible area to support smoother scrolling.
This is a new configuration option in Default.json (sessionStorage: "local" | "session", the default is "session"). It allows the Wisej application to select the browser's local storage ("local") to store the session id. When coupled with a longer or unlimited session timeout allows a user to reopen the browser, or the Wisej desktop executable, and find their work exactly where they left it.
This is a new configuration option in Default.json. When set to true, it allows the server application to impersonate the user's Windows credentials on the server (e.g. access the DataBase, the File System, other services, etc.).
This new feature allows your application to modify any Wisej theme at runtime by code. You can create themes on the fly for each specific user, or modify the global theme (shared by all users).
Example: Create a new there only for the current user by cloning the current theme and changing the background color of buttons.
Example: Modify the current theme. If it is a shared theme (from the /Themes folder), the change will affect all users.
Right-Click the project on the \Properties folder .
Wisej 2.5 improves the designer experience using the new Edge/Chrome engine to render the pages at design time in Visual Studio, simplifies the deployment of the growing list of Wisej Extensions, and completes the control with powerful new features.
Wisej 2.5 is deployed as a local and online NuGet. It will not be in the /bin folder in Program Files anymore. See .
The control now integrates and expands the SummaryRows extensions, and fully implements the frozen rows feature.
Finally the supports frozen rows, including frozen cells spanning multiple rows.
Wisej 2.5 adds support for frozen rows at the top of the DataGridView, including support for and to allow a cell to display its content across rows and columns.
Make sure your Visual Studio is configured to use the latest NuGet syntax in .csproj or .vbproj. See .
To add an extension simply select the package and it will be automatically downloaded and installed on your development machine. All it's components will also be automatically added to the .
The new container is a sort of a custom data grid. Instead of rows it repeats a template panel containing child controls in any layout. Child controls are automatically data-bound to the current record.
The infrastructure is virtual, which means that the only creates the visible panels and updates the controls as the user scrolls them into view, allowing the management of an unlimited numbers of records.
It can scroll its items vertically or horizontally, supports touch scrolling, can hide the scrollbar, and it can adapt to the user's device layout. You can use the to build data-bound lists of any kind for mobile or desktop devices.
This is a new simple , based on the class.
This is a new editor similar to the existing and . Handles a value in different localized formats. Supports minimum and maximum values, it’s bindable, nullable, and supports the quick increase of the time part under the cursor using the arrow keys.
It is an all-purpose that can represent simple shapes with different styles.
This new (drop it on a design surface to use it) adds a new property to all containers. If your page or form contains other containers (i.e. Panel, GroupBox) each one can manage the tab order of its children independently.
Supports 3 options: Default, and . Once set, the of all the children is set automatically, and it’s updated automatically when adding or removing children.
We have added a simple new feature to system and custom sounds.
You may also save the newly created theme to /Themes to make it available to all users through .
Upgrading from Wisej.NET 1.X to recent Wisej.NET versions is extremely easy. All you need to do is replace the references and make sure some "using" statements referring to design-time features are updated.
Set target .NET Framework to 4.8
Setting the target .NET Framework to 4.8 is crucial to avoid any issues when installing or compiling your application
Replace project references to Wisej.Web.dll and Wisej.Core.dll with a NuGet Package reference
It's highly recommended that you use the new PackageReference format instead of the old Packages.config file for managing your Packages. Click here for more info.
For Wisej.NET 2.X make sure to use the "Wisej-2" NuGet Package.
For Wisej.NET 3.X make sure to use the "Wisej-3" NuGet Package.
Replace .resx namespaces to Wisej.Web. and Wisej.Core. with Wisej.Framework. You can do that by doing a mass replacement. From Visual Studio, go to Edit > Find and Replace > Replace in Files or simply use the Ctrl+Shift+H Hotkey.
Make sure to edit the File types field to only include RESX files.
Change using Wisej.Core.Design to using Wisej.Design using the same process as the previous step, although this time change the File type from RESX files to CS files.
Change calls from ApplicationBase. to Application, again following the same process as the previous step.
Modify Web.config and replace "Wisej.Core" with "Wisej.Framework"
Wisej.NET 3.0 introduced the ability to target .NET 6, with this change came the need to introduce the new SDK Project Format.
If you're aiming to migrate to .NET 6 or newer, click here for more info.
There is no need to change the project format if you are staying with .NET 4.8! Wisej 3 supports both .NET Framework and .NET Core. You only need to change the project format to the SDK format if you are going to use .NET Core and ASP.NET Core.
Starting with Wisej.NET 3.0, we're now shipping the Designer and Templates as VSIX installers. This gives you the ability to manage updates directly from Visual Studio's Extension Manager.
For Wisej.NET 2.X , you can install the designer as its own NuGet Package.
Templates can also be manually installed, click here for more info.
After launching Visual Studio, click Create a new Project, select your language (either Visual Basic or C#), then select Wisej, and you will see the list of Wisej templates.
If you don't see the templates, follow the instructions here.
Wisej works with any .NET language, including C++, F#, X# or COBOL.NET. However, the designer may not have the necessary support, in which case you'd have to write UI code directly.
After you pick a project type, Visual Studio will create a new solution with the project template you have selected and will start up by showing our welcome page.
And that's pretty much it. Now you can compile the project and open Page1 in the designer.
Pick whatever control you need from the toolbox and you have a web application!
Creates a project containing a custom desktop container. Looks like your Windows desktop. You can add items to the taskbar, show floating windows, change the position of the taskbar, etc.
You are basically building a desktop environment in the browser.
Creates a library project with a custom Wisej control that can be used in other projects.
Creates a web application with a floating window shown in the browser. It's up to you to build a navigation system to manage your application's forms in the browser.
Creates a web application with a main page where you can drop any control. The page fills the browser. You can navigate from page to page simply by creating more pages and calling their Show() method.
Creates a web application with a main page (similar to the Web Page Application). However, it adds the necessary JavaScript and manifest files to make the browser recognize the application as a PWA app.
The app can be installed on the client, and you can control some basic colors and icons in the manifest. Additionally, Wisej creates the client-side web worker that caches locally all the Wisej JavaScript files allowing the app to launch faster.
Wisej applications cannot work offline. However, the PWA template adds and registers with the web worker a folder named Offline. Wisej will automatically preload all the content in /Offline and switch to the /Offline/Default.html page when it detects that the device lost connectivity.
Wisej 2.0 includes a number of powerful new features that can enhance developers productivity, simplify deployment, customize browser widgets, implement responsive design, and speed up server communications.
The new designer adds custom ruler snap lines that can be user defined and saved with the container.
You can select the glyph color and take screenshots of your screens in design mode.
In addition to the action selector you can now also directly setup anchoring by using the arrow buttons.
You can create an infinite number of vertical or horizontal snap lines for your containers.
Just click on the appropriate ruler position.
Snap lines are saved with each container so they are reloaded the next time you design it.
This new button in the designer toolbar gives you a quick overview and access to all objects.
ResponsiveProperties and corresponding profiles simplify Responsive Design a lot.
Read more: ResponsiveProperties
Wisej now supports many more client-side properties and methods on all controls. It makes it much easier to customize Wisej widgets from server-side code.
AutoShowLoader
Buttons and MenuItems have a new property AutoShowLoader that automatically shows the loader when the widget is clicked - this is a client side event - and removes the loader when the processing on the server is completed.
It is intended to be used on actions that typically require some time to complete and should give the user immediate feedback, i.e. a login button.
CssClass
Sets custom css class names to the widget. You can also manage the css class names using these methods: AddCssClass, HasCssClass, and RemoveCssClass.
States
Sets a custom array of states that can be used in a custom theme or theme mixin. You can also manage the list of states using these methods: AddState, HasState, and RemoveState.
ClientEvents
Collection of client-side events and JavaScriot event handlers that you can set from the server. You can use the collection directly or use these methods now available to all controls: AddClientEventListener, RemoveClientEventListener, and HasClientEventListener.
InitScript
Sets a custom script that Wisej will execute in the context of the widget when it is first created in the browser.
CssStyle
Sets a custom css style string that is assigned to the widget.
Wisej already compresses all traffic packages (HTTP and WebSockets) above a certain threshold by default.
We now switched from GZIP compression to the Brotli compression algorithm.
Our internal tests showed that the compressed response stream is only half the size now.
Read more: about Brotli.
A Wisej server instance can now decide when to refuse a new session when it receives the first request from the load balance, allowing it to move on to the next instance seamlessly.
This new feature allows the Wisej instance to accept only a certain number of sessions, or to check the memory usage and refuse a request when the memory reaches a certain threshold, or it can use an application-provided function that can refuse the initial request for any reason.
See Load Balancing for more information.
Theme Settings
Themes now can contain system and value settings. See Theme Settings.
Stylesheet Rules
Theme designers now can embed custom css rules directly in theme. This new feature allows for fine tuning a theme and for greater design flexibility. See Theme Stylesheet.
Inherited Control
Adds a custom control based on any visual Wisej class. Use it to create you extended controls without having to use the UserControl container.
Custom Loader
Replaces the initial loader with one of the new spinners or a custom spinners of your choice.
Brotli
Adds Brotli compression support to the application.
Healthcheck
Enables enhanced load balancing support in your application. See Load Balancing.
Wisej 2.2 introduces built-in PWA support, dynamic integration with all major JavaScript vendors, native iOS and Android integration (available for Technology Partners), enhancements to all controls, improved memory management, and lots of new functionality across the board.
Progressive Web Application (PWA) support is now built-in into Wisej. It allows a Wisej application to be installed in the desktop or a mobile device along with the locally cached libraries and offline pages.
A new PWA project template includes a set of professionally-designed offline pages end the required manifest file. The worker process script is embedded in the Wisej loader. Wisej will automatically pre-cache locally all the resources and offline pages. Enable PWA support in Default.json by setting enablePWA: true.
The improved offline detection process automatically switches to the offline pages when it detects a disconnection and restores the application when the connection is restored.
A new event Application.BeforeInstallPrompt allows the application to detect when it can be installed as a PWA, and a new client-side method Wisej.showPWAPrompt() displays the browser's PWA installation prompt. Using the Application.BeforeInstallPrompt event allows the application to display a custom notification to the user (the browser's default PWA notification is just a tiny + symbol in the address bar.)
At this time it appears that only Chrome fires the BeforeInstallPrompt event.
Additionally, the application can attach a client side event to a button or an icon to show the PWA installation prompt when the user clicks the control.
It is not possible to show the installation prompt from a server side event. To show the prompt on a button click, add a client event handler for the "execute" event and call "Wisej.showPWAPrompt()".
When the application goes offline, Wisej loads the /Offline/Default.html page. The image below is one of the pages included with the project template. However, you can put an entire JavaScript application inside the /Offline folder. Wisej will pre-cache locally all the files at all level.
Wisej will switch back to the application as soon as it detects that the connection is restored. Unless the session expired, the entire previous state is reloaded and the user is able to keep working from where the disconnection occurred.
Currently the native integration packages for iOS (Xcode) and Android (Android Studio) are available for free only to Technology Partners. However, we are planning to add new license options to Wisej to make these packages available without having to sign up for the Technology Partner program.
Our integration packages create a hybrid application, where the Wisej web application is able to interact with all native-only features of the mobile device.
The Wisej app can: show native alerts, use the camera, use the microphone, use the GPS, read the magnetometer read the gyroscope, read the accelerometer, play sounds, switch the flashlight, push notifications, read and write NFC chips, authenticate using TouchID or FaceID, create a native Toolbar, create a native TabBar, manage the StatusBar, read all the device information, handle multiple screens, lock the screen orientation, manage the screen brightness, brew coffee, and more…
You can achieve similar functionality for free by using the PhoneGap open source project. In our view, the learning curve is steeper and the functionality offered by PhoneGap is not as powerful as our integration.
For example, this is all the code you need to authenticate a user using FaceID in C# or VB.NET from the server side.
A Wisej hybrid application can also push notifications, read any property of the device, store files locally, and manage a native toolbar, a tabbar, the status bar, and all the available sensors through the Device object.
Wisej 2.2 also greatly improves virtual scrolling and touch integration.
There are two important enhancements in the Wisej.Web.DataGridView control:
Starting from Wisej 2.2, the DataGridView doesn't create any row when the grid is data-bound or running with VirtualMode set to true. It instead gets the values directly from the data source or the CellValueNeeded event when virtual.
A simple test with 100K rows and 10 columns in VirtualMode uses about 5MB in Wisej 2.1 and only about 400KB in Wisej 2.2. It basically only needs 1 Int32 per row to keep track of the state of each row.
As the code requests rows, the framework converts virtual rows into real rows transparently. However, if the application is changed to use dataGrid.GetValue(col, row ) and dataGrid.SetValue(col, row, value) instead of addressing the cells directly, it will read and save from/to the data source and will not create any row.
Now the DataGridView supports all the standard selection modes (CellSelect, FullRowSelect, FullColumnSelect, RowHeaderSelect, NoSelection) and adds a new mode: RowColumnHeaderSelect.
See DataGridViewSelectionMode for a description of each selection mode.
You can use the SelectedCells, SelectedRows and SelectedColumns collection to read the selected objects.
Note that the collections of selected objects depend on the SelectionMode. For example, if the SelectionMode is set to ColumnHeaderSelect, users can select cells or columns. When the user selects a column by clicking on the header, the SelectedColumns collection will return the selected column, but the SelectedCells collection will be empty. However, testing the DataGridViewCell.Selected property of each cell in the selected column will return true.
Wisej 2.2 includes a new and lighter notification control: Wisej.Web.Toast.
Unlike the MessageBox and AlertBox, which are static classes, the Toast is a component that you create and can hold on to in your application. You can reuse it and you can update the content while the Toast is visible.
It can be located in any of the 9 standard locations. By default it appears at the TopCenter location. It contains an icon and a text that can display any HTML content (by setting the AllowHtml property to true).
Toasts auto close by default after 5 seconds but they do not auto dispose. To auto dispose a toast instance when it's closed, set the AutoDispose property to true. You can detect when the user clicks on a Toast by handling the Click event, and handle the Close event to run code when the Toast is closed.Populate a ComboBox without keeping the binding link with the data source.
Now the DataRepeater supports items of variable height (when in vertical mode) and width (when in horizontal mode). It can auto size the child items to fit the content, or you can set the size of each item programmatically.
Additionally, the virtual scrolling, mobile scrolling, and prefetching have been improved considerably. The DataRepeater can now handle unlimited items seamlessly without a glitch.
Applications using the DataRepeater can set the AutoSize property of the panel template to true to automatically resize each item panel to fit its content, or you can set the height or width of each item while handling the ItemUpdate event
All controls that support data binding have been improved with two new methods:
Fill
Populates the control from a data source object without keeping the control linked to the data source.
Append
Appends the data source object to a previously populated control without keeping the control linked to the data source.
These new methods allow a control to retrieve the data from the data source without keeping the bidirectional binding link. All the properties that specify the fields to bind to are still used, making the population of list controls much easier.
Wisej 2.2 also adds full data binding support to the ListView control, including support for the new Fill and Append methods.
The new ListView control supports the following data binding properties:
DataSource
Returns or sets the data source for the ListView control.
DataMember
Returns or sets the name of the list or table in the data source for which the ListView is displaying data.
ColumnHeader.DisplayPropertyName
Returns or sets the property to display in the ListView items.
ListViewItem.DataBoundItem
Returns the data-bound object for the ListViewItem.
The DisplayPropertyName property can only be set on column headers in order to be able to data bind items and sub-items.
All the premium integration libraries are now free. Each library is a GitHub ongoing project. The libraries for Wisej 2.1 include some extra dynamic code that is not built-in the Wisej.Web.Widget class in Wisej 2.2.
The Wisej.Web.Widget class exposes a new Instance property. It's a dynamic object that is able to convert any method call into a JavaScript call on the third-party widget and can attach custom event handler to events fired by the implementation.
You must buy a license directly from the vendor of the widget library. Wisej doesn't include any free license!
The ComboBox and the ListBox control have a new LazyLoading property, similar to the existing TreeNode.LazyLoading.
When LazyLoading is set to true, the list items (or child nodes in a TreeNode) are sent to the client the first time the ComboBox is dropped down, or when the ListBox "appears" on the client browser. It reduces the size of the data sent to the browser when creating a page and speeds up the initial loading of pages and windows.
All controls in Wisej 2.2 have some enhancement:
Control.ToolTipText
All controls have a new ToolTipText property. It allows an application to set the tooltip text on any control without having to add the Wisej.Web.ToolTip provider.
However, if the application needs to modify some additional aspects of tooltips, it should still use the Wisej.Web.ToolTip provider which exposes the additional tooltip properties.
PictureBox.Filter
Sets a CSS filter on the PictureBox image.
TabControl.ScrollStep
Sets the number of pixels to scroll when the scroll buttons are pressed to bring a tab into view.
ListBox.IncrementalSelection
When true (default) the ListBox caches keystrokes for less than a second allowing a user to type and incrementally select the list items, i.e. typing "ab" selects the first item that start with "ab". When false, typing "ab" will select the first item that starts with "b".
TextBoxBase.SelectOnEnter, ComboBox.SelectOnEnter, DateTimePicker.SelectOnEnter, UpDownBase.SelectOnEnter
When SelectOnEnter is true, the entire content in the editable area is always selected when the control gains the focus.
TreeView.RighClickSelection, ListBox.RightClickSelection
When true, right clicking a TreeNode or a ListBox item (i.e. to show a ContextMenu) will select the item.
TagTextBox.KeepWatermark
When true, the TagTextBox keeps showing the Watermark text in the editable portion of the control after the tags.
DataGridView.SelectionDelay
When set to a value greater than 0 (the default), the grid waits the specified number of milliseconds before notifying the server that the selected element has been changed using the keyboard.
This property prevents the server from being flooded with row selection events when a user rapidly navigates and selects different rows using the up/down keys.
FileDialog.LoadPath, FolderBrowserDialog.LoadPath
The file and folder dialogs expose a new LoadPath event. It is fired for each file and each folder loaded by the dialogs. An application can handle this event and set the icon to display, the size, and the dates related to the file or folder. The event is cancelable, allowing the handler to set e.Cancel to true to filter out specific files or folders from the list.
Application.SetSessionTImeout
Changes the session timeout for the current session only.
The Application object exposes two new global events:
ActiveWindowChanged
This event is fired when the active floating window changes. Allows an application to react to the change of the active window globally.
FocusedControlChanged
This even is fired when the focused control changes, regardless of where it's located. Allows an application to process changes to the currently focused control.
There are two new settings that are supported in the Default.json configuration file:
threadPool
ThreadPool is a map defined as {minWorkerThreads, minCompletionPortThreads, maxWorkedThreads, maxCompletionPortThreads} that corresponds to the system's ThreadPool settings that can be applied by code or in machine.config. See ThreadPool.SetMinThreads. All properties are optionals. A typical settings is "threadPool":{minWorkerThreads: 100}.
enablePWA
Enables PWA support. When set to true, the Wisej bootstrapper will include the built-in service worker. It will preload and cache locally the Wisej libraries and all the assets found in the /Offline directory.
In case Visual Studio decides not to show the new templates try this:
For Visual Studio 2017 and 2019, open the VS command line and run:
For Visual Studio 2022, open the VS command line and run:
Documents\Visual Studio (2019|2022)\Templates\ProjectTemplates\Visual C#
Documents\Visual Studio (2019|2022)\Templates\ProjectTemplates\Visual Basic
Starting with Wisej.NET 3.0, we took the approach of distributing the Designer and the templates in a Visual Studio Extension format.
The path to the templates can vary from one machine to another:
%LOCALAPPDATA%\Microsoft\VisualStudio\17.0_{id}\Extensions\{extension_id}
As an example, it can be something like this:
%LOCALAPPDATA%\Microsoft\VisualStudio\17.0_315d49d1\Extensions\x2rkvlci.xbt
In case the project templates (or item templates) for Wisej.NET are missing, either run the installer again and select Repair, or download the templates below.
We also provide the templates to download as another option:
Unblock the zip (this is important!) and expand into:
Documents\Visual Studio (2019|2022)\Templates
Select to overwrite existing files when asked. The zip archives contain the \ItemTemplates and \ProjectTemplates files in the same structure expected by Visual Studio.
Templates will not show up when starting a Visual Studio Experimental Instance.
Occasionally you may start getting designer errors when opening a container in design mode. The most common error is "Unable to cast type..." It's a well-known issue related to Visual Studio having to load a shadow copy of the assemblies used at design time.
Since assemblies cannot be unloaded in .NET Framework, Visual Studio loads shadow copies of the assemblies loaded by the designer. Sometimes it ends up loading the same assembly multiple times, leading to the "Unable to cast" error because the same type is loaded more than once.
The WebView2 component can be silently updated by Microsoft, these updates can eventually break Wisej.NET's Edge-based renderer.
The current workaround for this type of issue is to switch back to the Internet Explorer renderer, this allows you to use the designer with little to no issues, one side effect would be the use of some complex JavaScript components that don't usually work with IE.
If an opened designer looks empty, that usually means that the WebView2 component is what causing the issue, make sure to click on the "Edge" icon found in the lower left of the Designer window, and report the version number to us.
Usually, it's enough to:
Close all designer tabs
Close all Visual Studio instances
Delete /bin, /obj, /.vs
Open Visual Studio and reload the solution
Recompile
Visual Studio makes shadow copies of the assemblies loaded by the designer here:
%LOCALAPPDATA%\Microsoft\VisualStudio{version}\Designer\ShadowCache
Each installation of Visual Studio has a different unique ID. Visual Studio 2019 versions start with "16.0" and Visual Studio 2022 versions start with "17.0".
Wisej.NET Visual Studio Templates
You can find Visual Studio templates for previous versions of Wisej.NET below:
For each of the below downloads, unblock the zip (this is important!) and expand into:
Documents\Visual Studio (2019|2022)\Templates\ProjectTemplates\Visual C#
Documents\Visual Studio (2019|2022)\Templates\ProjectTemplates\Visual Basic
There are several different licenses:
Developer
One developer license is required for each developer using Wisej.NET.
Server
One server license is required for each server running Wisej.NET applications.
Community
One license is required for each developer or each server using Wisej.NET.
Trial
The trial license works for both: developer and server activations.
Wisej.NET will ask you to enter the developer (or trial) license key the first time you open a window in the designer.
Enter the Developer License Key or the Trial License Key and click the ACTIVATE button.
If you already have a Trial License and want to register the Developer License, open the Registration form by clicking on the small Wisej.NET icon in the designer's toolbar (all the way to the right) at the bottom. It will reopen the registration window where you can enter the new license.
The web server must have write permissions to the project directory or to "C:\ProgramData" to be able to properly activate the license and generate the wisej-server.lic file.
Wisej.NET saves a copy of the activated server license into the project's folder and to "C:\ProgramData\IceTeaGroup\Wisej".
When you create a new Application Pool or change the user for an existing Application Pool, make sure that the account you have selected has write permissions to the project directory and optionally to "C:\ProgramData".
Usually, the user is "IIS_IUSRS".
If you need to deploy a Wisej.NET application to a server that doesn't have internet access and cannot activate the server license, you can activate the server license on a developer machine with internet access and deploy the wisej-server.lic file with the application, in the root project folder.
wisej-server.lic is automatically generated the first time the server activates a server license.
You don't need to do anything else. There is no need to re-register or to change the license key in Web.config.
Developer and Server licenses include one year of free upgrades. You can renew it after the year expired.
While you can of course continue to use the same version for an unlimited time, you need to renew your license in case you want to upgrade to a later (after expiration) or the latest version.
We offer consulting packages which can be purchased and used to provide training on best practices, code evaluations, and more.
Katalon Studio for automation testing in the browser. Any standard .NET testing framework for the server.
Yes, we help you and your developers design and build a stunning new User Interface while keeping most of your application intact.
For the first steps, we need a couple of screenshots of your application. We will deliver a style proposal and show you what your application can look like.
No.
Yes. You know all the internals of your application. We provide data sheets, the UI mockup, assets, support, theme files, etc.
Yes.
Depends. Varies from little to very little. Especially after you see what your app can really look like.
Using a third party web widget in your Wisej application and wiring the properties, methods and events in a neatly built .NET class.
There is virtually no limit to what can be integrated with Wisej. We can check rather quickly once you send us the link to whatever components you’d like to use.
Yes. We have several blogs showing the integration of popular widgets from DevExpress, SyncFusion, Telerik and others.
Hit Run.
This is the recommended project template.
Vendor | GitHub Repository | Live Demo |
---|---|---|
If it still doesn't work, check if the \Wisej 2 or \Wisej 3 templates are present on your development machine under your user name here:
Run the >devenv command above again.
If it still doesn't work, delete the Visual Studio templates cache. Each installation of Visual Studio has a different unique ID. Visual Studio 2019 versions start with "16.0" and Visual Studio 2022 versions start with "17.0".
Run the >devenv command above again.
In case you encountered this issue, please post in our , or contact us via email.
We're constantly updating the Designer component, please make sure to follow the forum for any , usually, those posts would contain links to newer releases of the Wisej.NET Designer.
If you still get the problem, try to clean the designer assembly cache and repeat the steps above.
Reopen Visual Studio, recompile again and the problem should be solved.
For more information about Wisej.NET licenses, see the handbook.
The Server License Key (or Trial Key) goes into Web.config. See . You can change it at any time. Wisej.NET will automatically activate a new license when the application is loaded.
Wisej.NET detects when a license has expired and the application is using a newer build of Wisej.NET. When this occurs, the license manager automatically downloads the new license, provided you have renewed the upgrade period on .
Wisej is licensed per Developer and per Server. There are different license types available: Developer, Server, Mobile Packages, and options for Technology Partners. You can get a first impression with the Wisej Trial license or use the free Wisej Community license. .
Yes, we offer volume licensing including single key deployment through our .
Yes, it's available as an additional option to our .
Yes, it's available at .
Yes, it's available as an additional option to our .
Yes, you can find more information about training options here: .
Yes, there are a number of options available. See for more details.
Check out our and open-source .
Syncfusion
DevExtreme
Telerik
Infragistics
The most common Wisej applications (in the broad sense) have only a single application (in the strict sense). To keep things simple, we will use sub-application to refer to an application in the strict sense.
Wisej sub-applications are different entry points in your application, which are independent URL you can use for whatever purpose you decide. All Wisej projects must have at least one sub-application that is created by default.
When you create a new Wisej project, Wisej creates 3 startup files:
Default.html
Default.json
Program.cs
Default.html is used because that’s the filename we are used to, for a startup page in ASP.NET.
Program.cs is used because that’s where we look for the static (Shared in VB) Main method.
For simplicity, the .html and .json filenames should match, but they don't have to match.
You can rename Default.html and Default.json to anything. You can also use an .aspx file in case you need to run .NET code before the Wisej application is loaded, see Wisej.UserData for an example.
You can create a sub-application in the project's root or in a project's folder.
To create a sub-application, follow the steps:
Right click on the project (or a project's folder), selecting Add -> New Item.
On the Add New Item form, select Wisej on the left side and click on Application in the list.
Set the application Name and click Add.
Supposing you set the Name to Admin, Wisej creates 3 startup files, all with the same name:
Admin.html
Admin.json
Admin.cs
The Admin.cs file is just like the Program.cs default file and looks like this:
We are trained to look for the .html file as the starting point for a web application. In fact, the Wisej sub-application starts by the .json file. Even when we type an URL that includes the .html part, Wisej looks for is the .json file. Later on, we will discuss the rules Wisej uses to get a .json file.
In the Admin sub-application we created, the Admin.json file looks like this:
This file tells Wisej two important pieces of information:
What .html file to show on the browser - the "url" key.
What startup method to run on the server - the "startup" key.
When the user types http://myApp.com/Admin, Wisej will find Admin.json, read the "url" key and load Admin.html and then invoke the startup method in Admin.json.
Browsers need an HTML-like file and Wisej needs the browser to load and execute wisej.wx. More on this later.
Instead of the startup method, we can specify the sub-application's main view. More on this below.
Wisej needs to know what method the server should execute on startup, in this case the method [ProjectName].Project.Main on assembly [ProjectName].
Say that instead of executing the Main method, we want to instantiate an AdminPage. In fact, most of the time, all the Main method does is instantiate a view (Form or Page). In this case, the Default.json file should look like:
Putting it all together, you will find the Wisej startup workflow quite simple. It's composed of the following steps:
Find a .json file.
Tell the browser to load and show the "url" HTML file.
Tell the server what to do, according to the key specified in the .json file:
Execute the "startup" method or
Instantiate (invoke the constructor of) the "mainWindow" view.
If you specify both, the "startup" and "mainWindow" properties, Wisej will execute both.
Replace the extension by .json If you type an URL that ends with an extension (html or any other extension), like http://myserver.com/Startup.php, if the file exists, Wisej tries to find the matching .json file (a file with the same name, but with the json extension instead of supplied extension). In this case it looks for \Startup.json. If Wisej is already loaded and cannot find a matching json file, the wisej.wx script reloads the same page.
Append Default.json to a folder path If you type an URL that refers to a folder, be it the root folder http://myserver.com or an URL that ends with "/" like http://myserver.com/Suppliers/, Wisej uses Default.json file at the specified folder location. In these cases, respectively at \Default.json and at \Suppliers\Default.json.
Append either .json extension or \Default.json If you type an URL that does NOT end with any extension like http://myserver.com/Customers, Wisej tries to find the .json file in two steps:
Wisej appends .json to Customers and looks for \Customers.json.
If \Customers.json doesn't exist, Wisej presumes Customers is a folder and appends \Default.json to the folder path. In this case, it looks for the .json file at \Customers\Default.json.
The Web.config file created by Wisej project templates, by default includes a section like this:
According to rule 2) above, you don't need defaultDocument to be defined in the Web.config file.
If the URL is the web site URL, it refers to a folder and Wisej looks for the .json file at the project's root folder, it looks for \Default.json.
Wisej applications are standard Web Projects in Visual Studio. All the standard Web.config settings are valid.
In addition to Web.config, Wisej applications use individual configuration files using the JSON format. A single project can define multiple Wisej applications and one configuration file for each application.
In addition to the standard Web.config settings that are mostly handled by IIS, Wisej supports:
Wisej.LicenseKey
This is the server license key that you have received required to activate the server. It is located under appSettings.
Wisej.DefaultTheme
This is the name of the default theme (without the extension: i.e. Blue-1) that is used by the Wisej Designer and by all the applications in the project. Each application can override the application's theme in its JSON configuration file - see below. It is located under appSettings.
<compilation debug="true" targetFramework="4.8">
Wisej reads the "debug" value of the <compilation> to determine whether to minify the javascript libraries. When debug is set to false, Wisej automatically bundles and minifies all the javascript libraries that are required by the application, including Wisej's core libraries, all extension libraries, and all custom libraries that may have been added by the application.
Wisej requires the module and the handler settings to be present in Web.config, and we recommend to increase the size of the allowed content to the maximum, as follows:
All the default Wisej settings in Web.config are predefined in the Web.config file added by the Wisej project templates.
Each Wisej application in a project defines its own configuration file using the JSON format. The default application uses Default.json.
The explanation for each setting is also included in the template configuration file:
startup
Full name of the startup static method. i.e. "MyApp.Program.Main, MyApp". Wisej calls this method when a new session is created. You can define either a simple method without arguments or you can define a method with a single NameValueCollection argument that will receive the arguments typed after the application's URL. This setting is optional, you can use the mainWindow setting instead. If you define the startup method, it is your responsibility to create a component to show to the user in the Main method: a main page, or a desktop, or a window.
mainWindow
Full name of a view (Page or Form) created automatically at startup. i.e. "MyApp.MainView, MyApp". Wisej will automatically load, create, and show the window class. It can be either a Wisej.Web.Form or a Wisej.Web.Page.
If both startup and mainWindow are specified, Wisej will create the main window and call the startup method.
theme
Name of the theme to load at startup, without the extension. This setting is optional and overrides the theme setting in Web.config at runtime.
url
The URL of the page that corresponds to the application. This setting is optional. If omitted, users have to type the page URL: i.e. http://server.com/admin.html, unless the application uses Default.html and has defined the defaultDocument in Web.config.
When the URL setting is specified, users can type the name of the application without the extension and Wisej will load the HTML page specified: i.e.: http://server.com/admin.
allowedRoutes
Allows the application to recognize different URL routes separated by a semicolon. i.e. "api;admin;query/users".
When the allowedRoutes property is specified, the application will process the main URL and any child path that starts with one of the specified routes. Any change to the URL will fire the Application.ApplicationRefresh event. The application can check the current URL using the property Application.Url.
allowedRoutes has a known issue that prevents applications with a "." in the project or solution name from working properly.
debug
Enables logging on the client browser console. Default: false. If you enable this setting, Wisej will log all sorts of events in the browser's console.
culture
The default culture of the application. Default: "auto" (or omitted) to detect the culture from the browser.
If you want to force a specific language regardless of the language of the user's browser and OS, you can specify it using this setting.
rightToLeft
Enables or disables Right to Left mode. Default: "auto". Set to "true" forces the application to operate as if the current language was a right-to-left language. Set to "auto" (default) allows the application to automatically read the right-to-left mode from the current culture. See RightToLeft for more information.
sessionTimeout
Specifies the timeout of the session in seconds. Default: 120. Minimum: 60.
This is the time that Wisej will wait (in seconds) when there is no activity from the user before firing the Application.SessionTimeout event. If the event is not handled by the application, Wisej displays the built-in timeout countdown window.
This is not when the session expires. The session expires and it is removed (an unrecoverable event) either when the built-in timeout window reaches the end of the counter, or after twice the value of sessionTimeout (minimum 60 seconds).
You can control what happens when the session times out by handling the Application.SessionTimeout. If you set e.Handled = true, the session will not expire. To terminate the session you have to explicitly call Application.Exit().
The only event fired when the session has expired and disposed it's Application.ApplicationExit. This is an unrecoverable event, at this point the session has already expired and the application terminated
sessionStorage
The location of the session ID can be "local" for localStorage or "session" for sessionStorage. Default: "session".
When sessionStorage is set to "session" (default), the session ID is saved in the browser's sessionStorage which is cleared when the browser is closed, resulting in the abandonment of the user session.
When sessionStorage is set to "local", the session ID is saved in the browser's localStorage which is never cleared. When the browser is reopened, it will try to restore the previous session. If the sessionTimeout is set to a value high enough (or to 0 = never expires), the user can open the application exactly where it left it when the browser was closed.
When using "local", the browser can only handle 1 session at a time resulting in the session being shared among browser tabs or browser windows. In this case, Wisej will automatically refresh the browser tab when it's activated to make sure that the state loaded in the browser is always the latest.
responseTimeout
Specifies the timeout of Wisej ajax requests in seconds. Default: 300. Minimum: 300.
If your application may process long-running tasks in response to regular events (button clicks, for example) increase this value. Otherwise, Wisej may timeout while waiting for a response.
If the session is using WebSocket, this setting only applies to the initial load since the WebSocket connection doesn't time out.
pollingInterval
Interval for the automatic polling in milliseconds. Default: 0 (disabled). Minimum: 1000.
This setting is ignored when the client is connected using a WebSocket connection. You can also call Application.StartPolling and Application.EndPolling when you want Wisej to periodically send poll requests to the server. Both methods are ignored when the client is using a WebSocket connection.
autoReload
When true, the application is automatically reloaded when the session expires or Application.Exit() is called. Default: false.
secure
Forces the client to use SSL. Default: false. When this setting is set to true, Wisej changes the request from HTTP to HTTPS. The underlying WebSocket connection (if available) also uses the wss: secure protocol.
impersonate
When set to true (default is false), Wisej will automatically impersonate the user identity at the start of every request.
Use this option with <authentication mode="Windows"> to allow the server application to access resources using the user's credentials.
showLoader
Loads the Wisej ajax loader. Default: true. When this setting is set to false, Wisej will not show anything while it loads the startup libraries and shows the HTML content (if any) in the application's HTML page.
loaderTimeout
Timeout before the appearance of the Ajax loader in milliseconds. Default: 5000. Set to 0 to disable the automatic ajax loader.
The ajax loader gif is themed using the image named ajax-loader.
notAvailableUrl
URL of a page to display when the server cannot create a new session. Default: "resource.wx/NotAvailable.html,Wisej.Core" (built-in default page).
Wisej checks the maxSessions value and the concurrent users limit set in the license.
notSupportedUrl
URL of a page to display when the browser is not supported. Default: "resource.wx/NotSupported.html,Wisej.Core" (built-in default page).
Wisej checks that the browser supports at least XMLHttpRequest. In addition to this basic requirement, you can add a custom version-check javascript function using the browserCheck expression.
browserCheck
A custom javascript expression that returns true if the browser is supported, or false if it's not supported. The expression must be declared as a string and it can include regular expressions.
enableWebSocket
Enables WebSocket connections, if supported. Default: true.
webSocketCompressionThreshold Since 3.5.5
Size of the response (in bytes) that triggers the compression of the payload on the server. Default: 2048. A value of -1 disables the compression, while a value of 0 always compresses the response.
maxSessions
The maximum number of active sessions (users) before redirecting to NotAvailableUrl. Default: -1 (unlimited).
Setting maxSessions to 0 disables the application and always redirects to NotAvailableUrl.
maxModalStack
The maximum number of nested modal states (dialogs and message boxes). Default: 10.
validateClient
Enables the validation of client requests using the browser's unique client id generates by Wisej. Default: true. Validating the client minimizes the risk of session hijacking. Default: true.
validateResources Since 3.5.5
Enables the validation of image, downloads, and resource requests (i.e. pdf files) blocking requests not coming from the same browser. Default: false.
When validateResources is set to true
, all requests not coming from the user's browser receive the response code 404 (not found). If your application uses external viewers or document processors (i.e. Google Doc Pdf Viewer) they will stop working.
dropDuplicateClicks
When set to true, Wisej will drop all “execute” client events while there is a pending request. The “execute” events generate Click events on the server and are usually related to the execution of business logic. This option minimizes the that users keep clicking a button and cause the multiple execution of the same action. All other pointer events are still queued and executed. Default: false.
disableClientObjectModel
When set to true, Wisej will NOT create the JavaScript Object Model that corresponds to the server-side controls with a valid name. Default: false.
enablePWA
When set to true, Wisej will include a request for the built-in worker process javascript in the initial loader. The worker process script is created and cached dynamically to preload and store locally the core Wisej scripts and all the files in the \Offline folder inside the application. Default: false.
Use the new PWA Application project template with the required manifest.json file or add a manifest.json to an existing application in order to properly enable PWA support.
offlineUrl
Sets the URL to navigate to when the connection to the application fails. If you set it to Offline/Default.html and enablePWA is set to true, it will show the offline pages that are pre-cached locally using the PWA service worker. Default: "".
When offlineUrl is not set, and the application loses connectivity, Wisej will show a localizable simple Wisej.Web.Toast widget at the top with the text "Offline", localizable using the $Offline key in the resource file. See Localization.
threadPool
Allows a Wisej application to configure the thread pool without having to modify the machine.config file or to add startup code that changes the ThreadPool. The value is a map: {minWorkerThreads, minCompletionPortThreads, maxWorkerThreads, maxCompletionPortThreads}. All values are options. If omitted, Wisej will use the default values from the system.
Usually, you only need to set the minWorkerThreads value to a multiple of the CPU cores that is closer to the number of simultaneous requests that you expect to receive.
For example, if you have 1,000 users and want to improve the performance of the server when it receives 100 simultaneous requests, we suggest setting minWorkerThread to 120 on a 12-core CPU.
embeddedResourcesCacheControl Since 2.5.23
Cache-Control for embedded resources. The default is "browser" to cache the embedded resources on the browser for 1 month. Other allowed values are: "server" to cache the resource on the server using the ETag cache header, or any other valid Cache-Control string (i.e.: "private, max-age=600").
options
Map of platform-specific options. i.e. {debug: true, nativeScrollBars: true, ...} These are options that are recognized by the client-side javascript platform, and specifically the qooxdoo web framework.
settings
Map of application settings. i.e. {jquery: "http://cdn...", rootPath: "c:\\users\\...", ...} These are custom settings that you can handle in your application using Application.Configuration.Settings.
Additional applications in a Wisej project use their own configuration file using the application name and the json extension.
The settings are the same described in the previous section.
Wisej applications are standard web applications and work very well with load balancers.
However, Wisej goes a step further and gives you additional features to manage the load across several servers. You can configure each server running a Wisej application to accept a a maximum number of sessions, or to be available for the load balancer only if the CPU load is below a certain percentage and/or the memory usage is below a certain level.
Wisej applications run using WebSocket connections, which may require your load balancer to be configured to route TCP rather than HTTP. More on this below.
There isn't much you need to do to prepare your Wisej apps for load balancing. You may, however, want to configure the healthcheck parameters and decide how much workload can a specific server instance support before returning an error code that signals to the load balance to send the request to the next instance.
Use Add New Item and select Healthcheck from the list of templates, or simply copy and paste the configuration settings below, or download the default HealthCheck.json to override it.
Place it in the application's root folder and set the "Copy to Output Directory" property to "Copy if newer". HealthCheck.json must be in the application's /bin directory to be recognized.
Wisej needs that the requests from client are routed always to the same server instance. This is usually achieved by configuring your load balancer to either use sticky Sessions, or another type of routing that guarantees that a specific server instance is assigned to user.
Some load balancers need to be configured in TCP mode to route WebSocket connections. Reverse Proxy servers like NGINX are designed to handle WebSocket connections and have all he required settings already available: NGINX as a WebSocket Proxy.
Wisej needs the load balancer to support session affinity: the same user/session must be routed to the same server.
It's usually done using a sticky session cookie, or the client IP hash, or other settings that the load balancer uses to make sure that the same session goes to the same server instance.
Load balancers check periodically that the server instances they have in their rotation list are actually turned on. To do that, they use a "healthcheck" URL. You may use a custom html (or aspx) page or use healthcheck.wx if you want to make sure that the Wisej routing component is up and running.
Wisej applications automatically respond to the initial Default.html (or the subapplication's URL) requests either by returning the pageor by returning "503 Service Unavailable" (the return code can be configured in HealthCheck.json).
The following list explains each property in the HealthCheck.json configuration file and how to use them. They are not exclusive, wisej will use all of them, if configured, in the order they are listed below:
maxSessions
This is the maximum number of live sessions that a Wisej server will accept before refusing to take on more. It's a lot better to return "503 Service Unavailable" (or the HTML page configured in Default.json) to a new user instead of crashing an entire server under too much load.
Set this value to 0 to ignore it.
maxMemory
The maximum percentage of memory that the server can use before returning "503 Service Unavailable". Setting this value to 70 means that when the main page request arrives and the server is using 70% or more memory it will return "503 Service Unavailable".
Set this value to 0 to ignore it.
maxCPU
The maximum CPU load that the server can take before returning "503 Service Unavailable". Setting this value to 100 means that when the main page request arrives and the server is using 100% of the CPU time it will return "503 Service Unavailable".
Set this value to 0 to ignore it.
returnCode
This is the return code that the /healthcheck.wx request will receive when the server is unavailable to take new sessions. The default is 503. See Status Code Definitions.
503: The server is currently unable to handle the request due to a temporary overloading or maintenance of the server. The implication is that this is a temporary condition which will be alleviated after some delay. If known, the length of the delay MAY be indicated in a Retry-After header. If no Retry-After is given, the client SHOULD handle the response as it would for a 500 response.
retryAfter
he number of minutes to return in the Retry-After header along with the "503 Service Unavailable" response code.
Most load balancers currently ignore this return header.
You may also install a custom static method that is called by the healthcheck handler. The method returns true if the server is available to the load balancer, or false if it should return 503 (not available).
The code in the IsServerAvailable method can check all sorts of values to determine whether the server is able to accept new sessions.
Client Profiles are a set of device-related properties associated to a name that are matched to the client device when the page is loaded or the browser is resized.
Responsive Properties are standard .NET properties available at design time (serializable) that are decorated with the [ResponsiveProperty] attribute. These properties are capable of holding multiple values associated with a Client Profile.
You can define your custom client profiles by adding the ClientProfiles.json file to the project. Click Add -> New Item, select Wisej.NET 3 and select ClientProfiles:
It will add the file ClientProfiles.json containing the pre-configured profiles:
When using the Chrome mobile emulator and switch to a mobile from a desktop, you may have to hit refresh to update client profiles based on screen width or user agents since these two properties don't change dynamically.
The ResponsiveProfileChanged event is fired on:
Application
ContainerControl (Form, Page, Desktop, UserControl)
DataGridView
LIstView
Handling this event allows your code to adapt the controls to the client profile in any way possible. While responsive properties are useful and easy to use (especially at design time), they are limited. In code, handling this event, you can adjust the control without limitations.
Wisej is the only Web Application system that supports a pixel-perfect designer. It's a unique technology integrated with Visual Studio designer that renders the final HTML directly on the designer surface with very little, if any, limitations.
You can design any JavaScript widget, including custom-built controls, and including C#/VB.NET backed widgets.
There is no limit to what Wisej can display in the Visual Studio designer. Effectively turning JavaScript widgets into fully designable controls.
The first thing you will notice is the new toolbar at the bottom of the design surface:
All controls in the designer provide their own snap lines and snap rules to help developers align controls with each other. Wisej has added custom snap lines saved with the container.
You can create/delete/move any number of horizontal or vertical snap lines in a design surface and save them in the resx file. When other developers open the same control in design mode they will see the same snap lines, helping enforce design location in a development team.
You can create a new snap line by clicking on the ruler, and delete it by clicking again on the ruler at the same location. Move a snap line by dragging it on the design surface.
Unfortunately, when dragging a snap line it doesn't drag along the controls that snapped to it. In any case, it's easy to move a group of controls simply by selecting all of them and moving the group as one block either with the arrow keys or the pointer.
All Wisej controls have extended the quick actions feature of the Visual Studio designer. As soon as you drop a control to the design surface, the designer opens the quick action menu immediately, showing the most common properties.
This feature speeds up the initial building of complex UIs quite a lot.
You can add your own properties to the quick actions menu simply by adding the DesignerActionList attribute to the property.
Without the DesignerActionList implementation in Wisej you'd have to create a custom designer for each control that you want to show the quick action list for.
When designing a Wisej page, form, desktop, or control you can manage multiple "views" for the same container by selecting the current Client Profile in the designer toolbar.
All the responsive properties set at design time are saved in the resx file of the container. You can find which client profiles and, for each profile, which properties are changed by inspecting the (Responsive Properties) collection.
See also:
The document outline view shows the full hierarchy of all the controls in the main container being designed. It's an invaluable tool to understand the structure of complex pages.
You can change the theme used in the designer on the fly without changing the theme used by the application. This feature allows you to see what the screen would look like with another theme and to test your custom themes.
The list is automatically populated with all the built-in themes plus all the themes that Wisej can find in the /Themes folder or embedded resources in referenced assemblies.
The last option ("Select Theme...") lets you pick a theme file from any other location. This setting is saved in the registry on the developer's machine.
The designer is also able to render overlapping controls transparent colors. Since controls are rendered individually, it's a difficult task to "compose" the overlapping parts together for each control in the right order and at any depth.
This feature is off by default. You can turn it on by turning on the ShowDesignerTransparency property on the design container.
The designer also supports this functionality, and is capable of updating the view of the extended controls as they are designed.
This dialog lets you switch the rendering engine between the legacy Internet Explorer (IE) and the new Edge/Chrome. You can also select how many parallel rendering engines are used by the designer and the default rendering timeout.
Wisej always creates the full number of parallel renderers for each designer surface open in Visual Studio. When a designer is closed, Wisej places the renderers in a pool to be able to reuse the instances quickly. However, after a certain timeout, Wisej disposed all the renderers above the number of parallel renderers.
The renderer timeout indicates how long the designer waits for a control to complete its rendering before showing the alert icon in the design view.
A common reason for the timeout icon to display in the designer are broken image links or broken font links.
Custom painting also supported at design time, when the painting is done in the control's class (not in the Paint event handler created in the same design surface).
Animations are obviously not supported at design time.
Extender providers that add visual items that are outside of the extended component's rectangle are not shown at design time. For example, tooltips, error icons, and information bubbles cannot be displayed in the designer because they are typically outside of the frame used by the component that they extend.
Rotations that make the content of a component exit its rectangle cause the outside parts to be truncated at design time. They are visible at runtime.
Wisej.NET includes several built-in layout engines and allows developers to easily build custom layout engines. It allows the application to implement layouts of any complexity, exceeding what is available in the browser using plain CSS.
Web frameworks based on traditional HTML string concatenation and plain CSS layouts (blazor, angular, PHP, ASP.NET, JSP, ...) only support a fraction of the layouts available to a Wisej.NET application.
All controls use the DefaultLayout engine, it supports:
Docking is applied to the child controls in inverse order "away from the viewer". Changing the order of the child controls changes how the docking uses the available space and the intersection between horizontal and vertical docked controls.
Anchoring styles can be applied to any of the four sides of a control, or none.
To keep a control centered in its parent, center it and remove the anchoring.
Padding and Margins are irrelevant to the anchoring.
You can also set these values programmatically by calling flowLayoutPanel.SetFlowBreak(child, value) or flowLayoutPanel.SetFillWeight(child, value).
In the animation below, the green buttons have their FillWeight set to 1. On the left there is a FlowLayoutPanel set to flow horizontally, and on the right there is a FlowLayoutPanel set to flow vertically.
Margins are enforced in the FlowLayout engine. Changing the Margin property on a child control will increase the distance to the controls next to it.
Row, Column, Cell. Determine in which cell of the grid to place the control. Only 1 control can be in a specific cell.
RowSpan. Determines how may rows are occupied by the cell.
ColumnSpan. Determines how many columns are occupied by the cell.
The animation below shows a TableLayoutPanel where button3 spans 2 columns and is anchored left and right and centered vertically in the cell. Adding new controls using the code in the snippet below automatically adds new rows when the cells in the last row are all occupied.
Margins are enforced in the TableLayout engine. Changing the Margin property on a child control will change the distance to the controls next to it.
The animation below shows two FlexLayoutPanels, the first uses the HBox layout and the second uses the VBox layout. Some of the buttons have their FillWeight set to 1, and button3 is set to align vertically.
Margins are enforced in the FlexLayout engine. Changing the Margin property on a child control will change the distance to the controls next to it.
You can build a custom layout engine by deriving from the Wisej.Web.Layout.LayoutEngine class and overriding the Control.LayoutEngine property in your container class.
You may also create just one instance (a singleton) of your layout engine and reuse it, instead of creating a new instance each time the container is instantiated.
A layout engine needs to implement only three methods:
InitLayout(child, specifiedBounds). It's optional, you can let the base implementation do its work. Since layout engines can be cached, this call allows the implementation to refresh any internal cache that it may keep related to a child control it operates on.
GetPreferredSize(container, proposedSize). It's optional, you can let the base implementation do its work. This method is used when the container uses auto sizing (AutoSize property) and needs to "measure" its children to determine its preferred size.
Layout(container, args). This is the method that arranges all the child controls in their container. The most simple layout engine does nothing and allows the controls to use their own Location and Size.
The sample below shows an easy custom layout implementation that always arranges the child controls in a cascading layout from the top left to bottom right.
The CascadeLayout engine above goes with the CascadingLayoutPanel below. It has a new property Gap that is used by the layout engine.
Depending on the value of the Gap property and the size of the container, this is the result.
Since 3.0
The designer's toolbar has a new option to arrange child controls without setting the Dock or the Anchor properties.
Clicking the AutoLayout button opens the AutoLayout floating panel:
Margins are also used by the designer to create proximity snap lines.
When you move a control close to another, you will see the proximity snap line according to the controls' margins.
The vertical snap line between the controls is the combination of the top control's Margin.Bottom and the bottom control's Margin.Top values. Using this feature correctly simplifies the work of UI developers and preserves UI/UX guidelines.
The features described on this page may not be available for all Wisej.NET Server license editions. For more details, please review the for your edition.
Wisej.NET has a unique and extremely powerful responsive system that is not limited to CSS and the media selectors used by plain HTML+CSS systems. The responsive system in Wisej is based on two features: and .
The process is simple, Wisej reads the client profiles in ClientProfiles.json, and from the top down matches the properties with the current information received from the browser; the first match becomes the and fires the event.
When the ActiveProfile changes, all the [ResponsiveProperties] are updated with the value their value associated to the Client Profile. For example, the Visible property or a button can hold the value true when the Client Profile is "Default" and the value false when the Client Profile is "Galaxy Tablet", or the property of a Button or TabControl can be Both on Desktops and Icon on Phone devices.
Property | Description |
---|
Wisej integrates and extends ( a lot! ) Visual Studio's built-in designer. At design time, all Wisej controls, including third party JavaScript widgets, are rendered behind the scenes using an array of headless browsers ( this is one of the patented technologies in Wisej.)
Tool | Description |
---|
Wisej preloads the list with the few built-in client profiles. However, you can create your own by adding a file and see your custom profiles in the designer.
Using the toolbar you can change the level of information shown in the tree and, most importantly, you can move controls up and down their container's collection or move a control in or out a container.
Changing a theme in the designer doesn't change the application's theme. See to see how to change the application's theme.
The colors drop down lets you change the selection and glyphs colors. Doesn't really serve any purpose other than it's a cool features except that in some cases the colors of the controls may interfere with the designer colors...
Wisej supports all sorts of extensions, including . These are components that when added to a container extend (add properties and functionality) to all the qualified controls in the container.
All Wisej control support custom painting using a standard GDI+ context and a simple event.
The task of arranging controls in their container is performed by layout engines. Every control's property returns the current engine and can be overridden in a derived class. The engine is responsible for measuring the preferred size for AutoSize controls and for arranging the position and the size of the direct children of the container.
Absolute positions. Each child sets its own and .
Docking. Children can dock to the parent using one of the .
Anchoring. Children can anchor their sides to the parent using a combination of .
Controls dock using the container's area, which is reduced by the property of the container.
Margins are not used by the DefaultLayout engine. If you need to increase the distance between docked controls, add docked .
When a control has no anchoring (), it will "float" within its container, preserving its relative location. Likewise, if anchoring is not set only for the vertical sides or for the horizontal sides, the control "floats" vertically or horizontally.
The default initial value of the property is Top + Left.
The flow layout engine is implemented for the . Child controls are arranged horizontally or vertically next to each other.
When using a in the designer, it extends all its children and adds a number of that are relevant only for the flow layout:
FillWeight. It's an arbitrary integer that determines whether the child control grows horizontally or vertically (depending on the value of ) to use the remaining available space. The default is 0, which means the child control preserves its size. When using FillWeight you should also set the control's or it may shrink to 0.
FlowBreak. When true, the control causes a flow break and wraps to either the next line or the next column, depending on the of the panel.
The table layout engine is implemented for the . Child controls are arranged in cells in a grid.
When using the TableLayoutPanel in the designer, it extends its children and adds a number of that are relevant only for the table layout:
This layout engine doesn't allow for wrapping but it supports growing. If you add a child programmatically, you can determine whether to add a new row or a new column when all the cells are already assigned by setting the property.
Use the and collections to determine the sizing modes of the cells. They can resize proportionally using a percentage, auto size to fit the content, or have a fixed size in pixels. Additionally, controls can dock or anchor inside the cell they are assigned to.
The flex layout engine is implemented for the . It's actually two layout engines: HBoxLayout engine and VBoxLayout engine. This container arranges its children horizontally or vertically always filling the client area.
Controls can use Margin, , and a number of extension properties to customize the layout:
FillWeight. It's an arbitrary integer that determines whether the child control grows horizontally or vertically (depending on the value of ) to use the remaining available space. The default is 0, which means the child control preserves its size. When using FillWeight you should also set the control's or it may shrink to 0.
AlignX. Determines how to align child controls that cannot fill the container horizontally in a vertical FlexLayoutPanel because their width is constrained. It overrides the default value for the single control.
AlignY. Determines how to align child controls that cannot fill the container vertically in a horizontal FlexLayoutPanel because their height is constrained. It overrides the default value for the single control.
Button | Description |
---|
Wisej provides built-in compression support for all HTTP and WebSocket communications.
Compression is always enabled by default. Both browser and Wisej server use gzip as the default compression system.
Wisej automatically compresses all HTTP and WebSocket packets when the size is bigger than a certain threshold, ensuring that compressing the data doesn't result in larger packets.
You may disable WebSocket compression by setting the enableWebSocketCompression setting to false in Default.json.
Disabling WebSocket compression allows you to debug the frames when looking at the Network packet using the browser's Developer Tools.
Wisej fully supports the Brotli compression library - also on browsers that don't have native Brotli support.
Use Add New Item and select Brotli to add the Wisej.Web.Ext.Brotli assembly. The source code for this extension is on our Github account: Brotli extension source code.
Under some still unknown circumstances, the Brotli implementation from Google may generate the error "Unused space" on the browser. If you get this error, simply remove Wisej.Web.Ext.Brotli.dll.
Wisej recognizes embedded javascript files (.js), style sheet files (.css) and theme files (.theme and .mixin.theme).
You can use any embedded resource in your application and manage them as you would in any standard .NET application. This section is about the type and location of resources that are detected and managed by Wisej.
To use the embedded resources feature of Wisej, you need to add the [assembly:WisejResources] attribute to your assembly in AssemblyInfo.cs.
The attributes takes two optional parameters to let you specify a list of excluded resource names and the root name of the resources when it's different from the default namespace.
\Resources & \Platform Folders
Only *.js and *.css files in these two folders are recognized by Wisej and bundled in wisej.cs and wisej.css. If you want to bundle a resource in your application with the [assembly:WisejResources] and NOT bundle it, place it in a different folder.
For VB.NET developers: The VB.NET compiler doesn't use the folder names to build the embedded resource name. It only uses the default namespace of the project + the file name. Even if you place your embedded resources in \Resources or \Platform they will not be recognized by Wisej when compiling using VB.NET.
You can still place your embedded resources in \Resources or \Platform in VB.NET, but you also have to rename the file like this:
\Resources\my-code-to-bundle.js -> \Resources\Resources.my-code-to-bundle.js
\Platform\my-code-to-bundle.js -> \Platform\Platform.my-code-to-bundle.js
Bundling and Minification
When running in release mode (the debug flag is off in Web.config) Wisej automatically bundles and minifies all embedded .js and .css files found in \Resources and \Platform.
JavaScript (.js) files are bundled in wisej.js. StyleSheet (.css) files are bundled in wisej.css.
The \Themes folder is treated differently:
Embedded themes and mixins (.theme, .mixin.theme) in the application's main assembly are loaded also without the [assembly:WisejResources] attribute.
Embedded themes and mixins in other assemblies are loaded only when the [assembly:WisejResources] attribute is present.
Any theme file in a deployed \Theme folder override the embedded theme file with the same name. This feature lets you override a theme without having to recompile the assembly.
You can use any embedded resource in any assembly in your project with or without the [assembly:WisejResources] attribute by prefixing the path to the resource with resource.wx/.
The resource URL can be used anywhere: in HTML, in CSS, in JavaScript and in any of the ImageSource properties exposed by Wisej controls.
You can fully qualify the path to the resource using the name of the assembly (without .dll) or you can use only the name of the resource.
When the URL doesn't specify the assembly, Wisej will look for a resource matching the name in all loaded assemblies.
Allowed Resource Types
Requesting a resource using the resource.wx URL is allowed only for these file types:
".css", ".js", ".html", ".jpg", ".png", ".gif", ".svg", ".bmp", ".jpeg"
Requests for non allowed file types return a 404 error.
Overriding Embedded Resources
You can override embedded resources by replacing it with a file with the same name in the deployed directory - the file name and path must match.
For example, a request for resource.wx/button.png will return the file button.png at the root of the application, or the embedded button.png.
For example, a request for resource.wx/CoolImages/button.png will return the file button.png in the \CoolImages folder or the embedded button.png in the CoolImages.dll assembly.
name | Unique name assigned to the profile. I.e. "Large Monitor", "Galaxy Tablet", "Airport Kiosk", etc. |
minWidth | When > 0 this is the minimum browser width required to qualify the profile. I.e. set it to 500 and it will qualify only when the browser width is >= 500px. |
maxWidth | When > 0 this is the maximum browser width required to qualify the profile. I.e. set it to 1500 and it will qualify only when the browser width is <= 1500px. |
minScreenWidth | When > 0 this is the minimum screen width required to qualify the profile. I.e. set it to 500 and it will qualify only when the screen width is >= 500px. |
maxScreenWidth | When > 0 this is the maximum screen width required to qualify the profile. I.e. set it to 1500 and it will qualify only when the screen width is <= 1500px. |
device | A regular expression that matches the type of device detected by the browser. The value returned by the browser can only be: "Desktop", "Mobile", or "Tablet". If you set this value to "Desktop", this profile will qualify only for desktops. If you set it to a regular expression like this "(Tablet)|(Mobile)" it will qualify for either a "Tablet" or a "Mobile". |
userAgent |
landscape | This is a simple boolean that is true when the width of the browser is bigger than the height. |
Shows a welcome page with resources, help and tips. |
Switches the theme used in the current design surface. |
Changes the color used to draw selection lines and glyphs. |
Changes the size of the grid in the background of the design surface. |
Takes a screenshot of the selected control or the entire design surface and saves it in the clipboard. |
Hides or shows controls with Visible set to false. Visual Studio designer always shows all controls, including the controls with Visible set to false. When a container has several controls that overlap and may be shown/hidden at runtime, the design view can become quite messy. This toggle button solves this problem. |
Refreshes the select controls or the entire designer surface. It's useful when the rendering of the widget is incomplete because of a complex control or a third party library slow to load. |
Shows or hides the anchor glyhps. In complex screens it is possible to click the anchoring glyphs by mistake, this tool disables the feature. |
Shows the toolbox. |
Shows the Document Outline viewer. |
Shows the property viewer for the selected control. |
Shows the name, location and size of the selected control. |
Shows the current HTML renderer and opens the designer options dialog. |
Shows the Wisej License Panel. |
Arranges the controls horizontally, using the available space proportionally. |
Arranges the controls vertically, using the available space proportionally. |
Docks the controls to the left of the containing area. |
Docks the controls to the right of the containing area. |
Docks the controls to the bottom of the containing area. |
Docks the controls to the top of the containing area. |
Resizes the controls to fill the containing area. |
Toggles using the controls' margin when applying the auto layout. |
Selects the horizontal alignment of the controls within the containing area. |
Selects the vertical alignment of the controls within the containing area. |
Sets the spacing between the controls in pixels. |
Tab navigation concepts.
Managing the tab order of complex screens can become very time consuming. If you add a control in the middle of a set of fields you have to renumber of the following fields. Do that for a form with 100+ fields and you'll appreciate what we have added to Wisej.
Press Manual and the designer enters the "tabbing mode" and now you have to hit every single control from the start to set the correct sequence. Miss one and you'll have to start again.
Press Horizontal or Vertical and Wisej automatically renumbers all the tab indexes using an horizontal or vertical navigation algorithm and enter "tabbing mode".
Sometimes you may want to use an horizontal tabbing in a one container and a vertical tabbing in another or disable the renumbering altogether. The TabOrderManager component allows you to do that at design time.
Drop the TabOrderManager on the designer and all the container in the design surface will expose a new extender property named TabOrder allow you to set the order direction for each container.
The same design-time issue is present at runtime when the application adds or removes controls dynamically. In code you can go through the controls collection and assign new tab indexes. However, the assignment becomes more complicated when there are containers and nested containers.
In code you can create an instance of the TabOrderManager component or use a existing instance already created at design time. This component exposes a number of methods that will help your code update the tabbing order.
The following controls do not fully support RightToLeft at the moment: DataGridView, ListView, PropertyGrid.
This property is localizable.
This property should be set to false if you don't want Wisej to mirror the layout of your pages and windows when operating in right-to-left mode. Set it to true when you want to mirror the horizontal location of direct children when operating in right-to-left mode.
This property is localizable.
All Wisej themes support RightToLeft mode. The changes required in a theme to support right-to-left are minimal. When a widget operates in right-to-left mode it has the state "rightToLeft" which allows a theme to adapt the UI to right-to-left.
In most cases there are no changes required. The most typical changes related to right-to-left mode are to mirror icons and to switch the location of a single side border.
For example, icons can be mirrored just by adding this state style:
TreeView arrows that require a 45 degree rotation when expanded and should also be mirrored can adapt to RTL using this states:
Notice the composite state in the script above. Using "opened-rightToLeft" qualifies the styles and properties only when the widget has both states set at the same time.
Wisej is fully localizable using .NET and Visual Studio standard localization features.
All the top level controls in Wisej support UI localization.
To enable the localization features for a Form, Page, UserControl, or Desktop component, when in design mode set the Localizable property to true. After the localization feature is enabled, you can switch the language in the designer.
To switch the language, use the Language drop down property to select the language to localize
UI localization lets you change a large number of properties in relation to a language switch. The most common are the Size, Location, Text, Colors, and Images.
Wisej also supports the full localization of system resources, such as the buttons in the MessageBox and the labels (month and day names) in the calendar controls, as well as all the standard numeric, percentage and currency formatting and parsing.
Numeric, Percentage, Date, and Currency Formats
You don't have to do anything, it's all handled automatically for just about any language in the world.
Date Labels: Months and Day Names
Also in this case you don't have to do anything, it's all handled automatically for just about any language in the world.
System Resources
In addition to formatting, parsing, system labels and controls, you will most likely need to localize other resources (strings, images, ...) used in the code of your application.
Wisej automatically recognizes the browser's language and switches all the application and system resources to use the browser's language.
You may also always force the user session to use a specific language in two alternative ways:
Set the culture by assigning Application.CurrentCulture property.
When the current culture changes from the original culture loaded when the session was started, Wisej fires the Application.CultureChanged event.
Controls that have been localized using the designer are updated only when they are created. There is no built-in mechanism to change controls that have already been created. If you want to be able to alter controls that have been created with a different culture you have to either re-create the container and invoke InitializeControl again; or write custom code that applies the resource again.
In a program, a modal workflow is a mode of operation in which a particular task or feature must be completed before the user can proceed to other tasks or features. This is typically implemented by displaying a modal window or dialog box that requires the user to interact with it before they can continue using the software.
Modal workflows are often used in situations where it is important to ensure that the user has completed a particular task or provided certain information before moving on. For example, a modal workflow might be used to prompt the user to save their work before closing a document, or to enter their login credentials before accessing a restricted area of the software.
Modal workflows can be useful for guiding the user through a specific set of steps or for drawing their attention to important information or actions. However, if overused or implemented poorly, modal workflows can also be frustrating for users and disrupt the flow of their work.
In a web application, supporting a modal workflow means the ability to suspend the execution of server-side code, waiting for user input, and to be able to resume the execution flow using any information that may have been received from the user.
It's simple when running a desktop application. It's very hard when running a web application where the code is being executed on the server and the UI is completely asynchronous and running on different machines.
The code and images below illustrate how Wisej.NET handles modal execution of code:
Now the server code is suspended, waiting for the user to choose. After the user clicks Yes or No on the client-side, the server code will resume exactly where it was suspended.
Wisej can handle nested modal states, custom dialog results and can reference controls in the modal dialog, as well as any data entered by the user .
Modal workflow works for message boxes and forms (dialog boxes) with any type of control, data binding, and code-behind. The example above, modified to use a modal dialog, looks like this:
Regular modal dialogs or message boxes suspend the current thread while waiting for user input. By default the system can handle about 32,000 threads. While the thread is suspended it doesn't use any CPU time.
Wisej fully supports the async/await programming pattern also for modal dialogs.
Using the await keyword a modal dialog can wait to be closed without suspending the thread. Just use the "Async" version of the ShowDialog method.
The async version of the MessageBox is MessageBox.ShowAsync(...).
Asynchronous modal dialogs or message boxes don't use any thread while waiting for the user input.
You don't need to use a modal dialog or message box to "go modal" and wait for user input. Wisej provides the Application.DoModal(component) method to let your code go modal at any time.
For example, the PropertyGrid uses the Application.DoModal() to suspend the code flow while waiting for the user to close the drop down selection box. Use Application.EndModal(component, result) to terminate the last modal state: modal states are stacked.
The code snippet above opens a drop down and waits for the user to either select an item or close the combo box. If the user closes it without a selection, DoModal returns DialogResult.Cancel, otherwise it returns DialogResult.OK.
It's quite a powerful way to manage code execution and synchronize it with user actions.
We'll add Application.DoModalAsync(component) in a future build.
This is also a regular expression applied to the returned by the browser. You can use this property to detect a specific OS version, or specific browser.
Changes the client profile being displayed in design view. Changing the client profile updates the value of the associated with the client profile.
Enables the and applies the selected auto-numbering order.
Since 3.0 Shows the panel.
At design time use "Tab Order" button in the designer toolbar to enter "tabbing mode" It will give you three options: Manual, Horizontal and Vertical.
Wisej supports Right-to-Left and Right-to-Left-Layout (mirroring) quite extensively in most controls, in the themes, in the , and in the designer.
The property makes a control adapt its internal layout and alignment to operate with right-to-left languages. The default value is Inherit which works in most cases. However, an application can force a control to ignore right-to-left mode by setting the value to No or to operate in right-to-left mode by setting the value to Yes.
The property mirrors the horizontal position of the direct children of a container. The default value is false.
When set to true, the horizontal layout is mirrored only when the value of resolves to Yes.
takes its value from the "rightToLeft" setting or it can be forced to true or false programmatically.
The default value of the property is Inherit, which means that a control inherits the value from its parent. Top level containers and all controls without a parent, when RightToLeft is set to Inherit take the value from the property.
At the time, all Wisej system resources are localized in English, German, French, Italian, Turkish, Spanish and Portuguese. You have to provide the localization in any other language. All you need to do is to create a Resources-[LANG].resx file either in the root folder of the project or in the /Resources folder and add the labels to localize. See .
Label | Description | Default Value |
---|
You may create as many resource files (.resx) as you like and localize them using the same approach explained above and here: .
In your code you can simply create an instance of the and use it to retrieve the localized values. Wisej takes care of switching the culture of the thread that is managing the client request.
You may force the application (user session) to run using a specific language setting the culture property in Default.json. The default value is "auto". See for more information about setting the application's culture.
Add the lang argument to the URL. For example, to switch to German: .