How to Create a Desktop App Using CSS and HTML5? Windows UI Example

Native applications are increasingly replaced by their Web analogues. More and more companies are developing cross-platform products and services, and you can do the same with Webix. The powerful javascript widgets library is capable of repeating any interface and, to prove this, let’s replicate Windows 10 interface in a web application.

Our goal is to create a shell that will provide a desktop-like environment where users can access the remote data and work with it. They should be able to launch the inner apps, organize them on the screen, switch between them, etc. And it should work in most browsers including IE8.

Structuring the Application

To get started, you need to download the free version of the library (license “GNU GPLV3”). Then you need to copy the “codebase” folder from the package and place it into the project’s folder with the libraries (“libs/webix/”).

The same action should be performed with other dependencies we need to use in our project.

The taskbar is located below the main layout. Normally, it is visible most of the time, but it can be hidden when a user enters the fullscreen mode. So, we will separate it from the main app and initialize it with another webix.ui() call.

For the taskbar we will use the following widgets: Toolbar, Button to imitate Windows start button, and Template to render current date and time.

Creating Windows-like menu

As a part of the command menu, we will take the ready-made Webix Winmenu widget that comes from repository of custom widgets and can be used under GPL license. We need to download it and place the “winmenu.js” and “winmenu.css” in the “js /views” folder of our project.

Apart from the Winmenu we will use such standard widgets as Popup, Layout, Template, Label and List:

Implementing Application Windows

To avoid the spaghetti code, we separated the handling of application windows and moved it to the “wins.js” file.

We used the standard Window widget for the application windows. Its head displays the application name alongside with minimizing, maximizing and closing icons, while the window itself can be moved and resized, which is achieved via the related settings.

Each time a user clicks on the application icon on the desktop, the window with the corresponding application in its body shows up:

At the same time we need to render the application icon on the taskbar between the start button and the “date/time” part. So, we call the Toolbar’s addView() method, which allows us to dynamically initialize a widget within an existing layout.

Conclusion

As a result, we got a cross-platform web application for rendering a desktop-like UI by using Webix GPL functionality only. Its live demo and source code are available on Github.

As you can see, the creative mind and coding skills let anyone implement smart and bright solution without paying a penny. But please note that according to the GPLv3 license you must provide the source code of your application to your users and allow them to modify it.

For non-open source solutions you need to obtain the commercial license for the UI library. Webix Commercial (PRO) edition features numerous bonuses and powerful functionality, apart from being paid 🙂

And, please, do remember that there are a lot of free handy widgets and integration patterns outside of the main package, in the Components repository. If you feel that you can contribute by a nice widget, you can make a pull request and after our review it may be included into the repo.