Introducing Wisej
Development of Web Applications with Wisej

Development of Web Applications with Wisej: Introduction

Over the past few years, the pressure to implement business applications for browsers increased. Therefore, there are 2 types of developers required: First, web developers for front-end developing in CSS and JS and second, developers for the business logic.

For a very long time, the framework Visual WebGui by Gizmox offered the possibility to implement such business web applications. The backend developers were still able to use their Visual Studio environment to develop the business logic in C#. Web developers were not necessarily required because Visual WebGui offered the ability to use the Windows Forms Designer. Only when it came to the visual refinement or client-side optimizations, Know-how was needed in CSS, XSLT and JS.

In 2016, the development of Visual WebGui was discontinued. There was an effort to keep Visual WebGui alive but as the sources of the main libraries were not public, the bailout ultimately failed. A call for an alternative raised through the developer world because, despite its outdated client-side technology, Visual WebGui was the most comfortable, fastest and most cost-effective way to bring a business application to the Web. The fecher GmbH also used this technology for years, in cooperation with the American company Ice Tea Group, LLC., for bringing "legacy" Gupta, WinForm and VB6 projects to the Web.

At BASTA 2017, Sebastian Gingter from Thinktecture gave a talk with the title "From Winforms & WPF to the New HTML5 World". This lecture roughly describes how existing applications can be converted with the help of CEF and CEFSharp, form by form, into a web application. In my opinion, however, this approach will be very expensive and long running.

In November 2016, the Ice Tea Group released the first version of the real-time web application framework Wisej. This framework provides the ability to develop business applications in C# or VB.NET and Visual Studio. Wisej is used to program Single Page Applications (SPA) or to migrate existing applications.

Developing with Wisej: Example


In this and other articles I want to talk about the development of Wisej applications. I’ll start with an introductory example.

First, we download a recent version of the framework from the Wisej website. Since I’m a developer myself, I use a development build. Wisej gets improved on a regular basis, so it's worth using the development builds.

The current development build has version number 1.4.54.

Wisej can be tested 30 days for free, then it is recommended to buy a license – otherwise a banner at runtime indicates the missing license. The detailed documentation contains further information regarding the license as well as a range of information about the concepts used in Wisej.

During the installation it can be specified for which Visual Studio version Wisej should be installed. All Visual Studio versions since Visual Studio 2012 are supported. A small note from me: If you currently, for example, have installed VS2015 and selected this during installation, the project templates are installed only for VS2015. If you install another version of VS at a later date, you must restart the installer and select the new VS version in the selection box. Thus, when creating a new project, you’ll also have the Wisej templates available.

The installation of Wisej is no big deal.

After the installation, we start our VS and create a new Wisej project. Wisej offers us several entries. First, let's create a web application.

After creating the project, the "pixel-perfect" designer from Window1 presents itself to us.

We want to add a combo box and a button.

For the combo box we change the following properties either via the property window or in the code:

this.comboBox1.AutoSize = false;
this.comboBox1.DropDownStyle = Wisej.Web.ComboBoxStyle.DropDownList;
this.comboBox1.Watermark = "Pick a location";

With a double-click on the form we add a load handler containing the following code:

// load the enumeration in the combobox.
this.comboBox1.Items.AddRange(Enum.GetNames(typeof(ContentAlignment)));

With a double-click on the button we add a click handler. In this click handler, we set the following action:

// parse the selected alignment and default to TopCenter
// if the selection in the combo is not a valid ContentAlignment.
ContentAlignment alignment = ContentAlignment.TopCenter;
if (!Enum.TryParse(this.comboBox1.Text, out alignment))
	alignment = ContentAlignment.TopCenter;
 
// hello world!
AlertBox.Show("Hello World!", alignment: alignment);

Then the application can be started.