Click here to Skip to main content
13,298,965 members (41,501 online)
Click here to Skip to main content
Add your own
alternative version

Stats

6.1K views
6 bookmarked
Posted 5 Oct 2017

Wisej: The Easy Button for Enterprise Software

, 5 Oct 2017
Rate this:
Please Sign up or sign in to vote.
Wisej is a powerful platform that abstracts away the nuances of client/server interactions while embracing all the web has to offer, including third-party HTML5-based solutions, it is the perfect tool for building enterprise web applications.

Editorial Note

This Review is from our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

Wisej provides a platform and set of tools designed to ease the burden of developing, testing, deploying, and maintaining complex business software. It bridges the gap between traditional WinForms-style desktop applications and the web by empowering developers to leverage their existing .NET and C# skills. Developers are able to use the tools they are familiar with, like a pixel-perfect design surface and drag-and-drop controls with the languages they are comfortable with (C# or VB.NET) to build real-time web applications without having to learn HTML, CSS, or JavaScript. They can stay in their favorite IDE like Visual Studio to take advantage of features like IntelliSense, integrated debugging, design surfaces and source control integration. Front-end developers can leverage their knowledge of web technologies to augment applications and seamlessly integrate third-party packages like HTML5 charting libraries and ASP.NET controls.

To bridge the gap between legacy desktop applications and modern web applications, Wisej provides several features that create a straightforward path to migrate existing applications or build green field projects without having to learn a new set of technologies. Support for touch and gestures is built into the software with emulation to support the desktop experience, localization is a first-class citizen, and the applications Wisej produces are out-of-the-box responsive. That means they are readily accessible from desktop browsers, mobile smartphones and tablets.

Obtaining the Software

To get started, visit the Wisej site:

http://wisej.com/

There you can browse the various pricing options and download a trial.

The sample application is available at:

http://demo.wisej.com/codeproject

You can download the source code at:

http://wisej.com/examples

You will need at least Wisej version 1.4.16 to run the demos. You should be able to compile and debug the application. The application uses a 64-bit SQLite driver. There are two options to ensure that you are able to successfully debug. You can either run as Administrator and use the full IIS server locally, or you can set IIS Express to run in 64-bit mode as shown in the following dialog.

Figure 1: 64-bit IIS Express

One advantage of Wisej is that it can generate local executables to run the same application you access from your web browser as a standalone or self-hosted application. In the folder for the project, you will find a "Wisej.Application.exe" that you can execute to test this functionality.

A Demo Walkthrough

The first thing you’ll notice when you access the site is the desktop experience. The code to create the desktop experience is as simple as adding a desktop control to the application. Wisej automatically handles allowing users to drag components, scale, resizing, minimizing, etc. Tap on the grid of squares in the lower left to expand a "start menu" of options.

Figure 2: Start Menu

Instantiating Controls

In the Visual Studio, navigate to the "Popups" folder and double-click "StartPopup." This will open the designer experience for the pop-up menu. You can see the various buttons, click once to view properties and double-click on them to view the code-behind. Launching another component is simple. Double-click on the "Background Task" button in the designer. You will see the following code that simply creates an instance of the "BackgroundTask" control and then invokes it.

Real-time Updates

The first example we’ll review is the "Background Tasks." Traditionally, building a real-time pipeline between a web browser client and server host involves scaffolding technologies like WebSockets or SignalR and building logic on both sides to handle dataflow and exceptions. Run the Background Tasks example press "Start" to see it running:

Figure 3: Background Tasks

The same dialog is available in the design-time view through Visual Studio:

Figure 4: Background Tasks in the Designer

Note the list of controls on the left side that are ready for drag-and-drop positioning on the canvas with the same experience that WebForms developers are used to. The controls to maximize, tile, and close the dialog are all built-in and require no additional code to work. Right-click on the control to view the code-behind.

The important code is in the "button1_click" event.

The code iterates through 100 items and pauses for one half second each loop. The browser app still runs asynchronously and is not blocked by the operation. The Wisej platform provides the "StartTask" method to initiate a background task, and refreshing data real-time is as simple as calling the "Application.Update" method! All of the real-time connections between the browser and server are handled automatically, so the developer can focus on what’s important (the core code logic) and not worry about the nuances of how the client and server connect. Wisej support for real-time communications handles Websockets, HTTP, or Websockets with HTTP fallback, all selectable via a simple configuration setting.

Third-Party Integration

Next, click on "Widget Integration" in the demo app. You will be presented with an editing control:

Figure 5: Widgets Integration

The control allows you to edit a document and use advanced features like formatting, inserting links and emojis, even embedding images. The control actually uses the open source HTML project CKEditor. This example illustrates how easy it is to integrate third-party open source libraries, even when they are not .NET-based projects.

Data-binding at Scale

Grids are often the centerpiece of enterprise applications and building interactive grids that provide basic Create/Read/Update/Delete (CRUD) capability and advanced features like filtering, grouping, and sorting can be difficult in web-based applications. Wisej features a data-binding system for controls that is both intuitive and easy to implement. To see the results in action, choose the "Data-binding" example in the demo app. You should see a grid like this:

Figure 6: Data-Binding Grid

The grid is full-featured. Tap on a column header to sort, and tap again to toggle the order between ascending and descending. Tap on any row to edit in the associated dialog, or double-tap on the grid to edit inline ("Excel-style"). You can insert new rows and tweak your updates until they are ready to be saved to the server. The save features a dismissible alert notification that indicates success or a modal dialog to diagnose failure.

Open the grid in Visual Studio and right-click to view the code-behind. This is an incredibly powerful feature of Wisej that many web developers likely wish they had in the past. The grid is fully implemented through C# server-side code, and Wisej automatically handles all of the binding, updates, and dataflows without the developer having to write any client JavaScript code!

Loading the initial data set is as simple as filling a standard data adapter. The demo app uses a SQLite database to store and update sample data:

The code to save a record provides a success alert and shows a modal error dialog when an issue is encountered, again all done with straightforward C# code that automatically controls the browser experience.

It is important to note how easy it is to provide client modals with server-side code. This is often a challenge in other frameworks due to the logic necessary to handle the asynchronous dialog and ensure that the modal successfully disables other content in the app. Notice the previous code example provides a straightforward, sequential, server-side C# workflow but successfully provides an interactive modal experience in the browser.

In more advanced scenarios, you may have to write code to page and skip records in the database and filter based on advanced criteria. Wisej simplifies this process by allowing you to focus on one set of code. If you can make the code work on the server, Wisej will connect it to the browser and display the appropriate output for you. No more writing two sets of code, one for the server and one to handle all of the events in the browser!

Embedded Media

Click on the "Media" option from the start menu to view the media experience. The dialog box includes embedded video with position tracking and an embedded PDF document that you can view and navigate without leaving the current webpage.

Figure 7: Embedded Media

You can open the media control in Visual Studio and click on the individual components to see their properties. Wisej has built-in "Video" and "PDFViewer" controls that can simply be dragged onto the design surface to use and are bound to their related documents. The properties control shows how the PDFViewer control is bound to a document that is included with the project:

Figure 8: PDF Viewer Properties

The PDF viewer control is flexible and offers support for pdf.js, native PDF documents, Google Docs and custom viewers.

For the position tracking in the media element, a simple event is wired in to trigger when the time position changes and handled with the following code:

The code is handled just like a desktop app and all of the updates to the browser are coordinated automatically by Wisej.

Custom Painting

The final dialog to cover in this review is "Custom Painting." Tap on the option and you’ll see a modal dialog with a fully rendered Mandelbrot set and a smiling face.

Figure 9: Custom Painting

Despite the number of pixels and level of detail, you can see the Mandelbrot renders exceptionally fast – just over 50ms on my machine. If you look at the code behind, the image is rendered on the server using a bitmapped object. Once it is completed, a special "DrawImageUnscaled" call is made to transfer the bitmap contents onto the browser-based canvas (again, without the developer having to learn or create any client-side code).

The smiling face is a "canvas" control that enables you to write server-side code to render a client-side HTML5 canvas. This allows you to create complex custom web controls entirely in .NET that are fully HTML5 compliant.

Standalone Executable

In addition to supporting web-based deployments, the Wisej platform allows you to package your application as a local executable that can be run from the desktop. It supports identical functionality to the web-based project as a standalone program. This enables distribution without a web server. The executable is generated in the root directory of the project, and this is an example of running it with the canvas widget.

Figure 10: Standalone Executable

Conclusion

For developers, the challenge of building a complex enterprise web application with features like large customizable grids and real-time data updates can be daunting. It may seem even more complex when the requirement is to migrate a legacy WinForms-style application to the web without losing the features business users have grown accustomed to, like being able to use their keyboard for data entry and editing values inside a live grid. Fortunately, Wisej is a tool that eases the burden of the challenge and provides a direct path from desktop applications to the web. As a powerful platform that abstracts away the nuances of client/server interactions while embracing all the web has to offer, including third-party HTML5-based solutions, it is the perfect tool for building enterprise web applications.

This review just scratched the surface of the capabilities Wisej provides. In addition to what was covered here, there are dozens more out of the box controls and features like comprehensive theming that can be applied while the application is running. It is possible to target both a web application and a desktop application from the same codebase. All of the functionality is available as a drag-and-drop, designer-based .NET application that leverages existing C# or VB.NET skills. Why not see for yourself how powerful the Wisej platform is? Head over to the website and start your free trial if you haven’t already to follow through this review.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jeremy Likness
Instructor / Trainer Microsoft
United States United States
Note: articles posted here are independently written and do not represent endorsements nor reflect the views of my employer.

Jeremy Likness is a Cloud Developer Advocate for Azure at Microsoft. Jeremy has spent two decades building enterprise software with a focus on line of business web applications. Jeremy is the author of several highly acclaimed technical books including Designing Silverlight Business Applications and Programming the Windows Runtime by Example. He has given hundreds of technical presentations during his career as a professional developer. In his free time, Jeremy likes to CrossFit, hike, and maintain a 100% plant-based diet.

Jeremy's roles as business owner, technology executive and hands-on developer provided unique opportunities to directly impact the bottom line of multiple businesses by helping them grow and increase their organizational capacity while improving operational efficiency. He has worked with several initially small companies like Manhattan Associates and AirWatch before they grew large and experienced their transition from good to great while helping direct vision and strategy to embrace changing technology and markets. Jeremy is capable of quickly adapting to new paradigms and helps technology teams endure change by providing strong leadership, working with team members “in the trenches” and mentoring them in the soft skills that are key for engineers to bridge the gap between business and technology.

You may also be interested in...

Pro
Pro

Comments and Discussions

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171207.1 | Last Updated 5 Oct 2017
Article Copyright 2017 by Jeremy Likness
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid