NanUI | .Net / .Net Core interface component NanUI 0.7 version officially released

On February 10, 2020, NanUI version 0.7 was officially released.

Looking back at the past year, it was muddled. Too much pressure and variables in life and work make me tired physically and mentally. I witnessed the suffering of my loved ones suffering from illness. The unforgiving life and death left me sinking for a long time. I am extremely confused about my future career planning. Too many things make me overwhelmed, so I also put aside the development of the NanUI project. I would like to express my deep apologies to all friends who have given NanUI the expectation. As time went by, unconsciously the time in 2019 passed by in my life, and I came to November in a blink of an eye. Looking at the empty Release Notes on GitHub, I decided that I could no longer let NanUI stagnate, calm down, and empty myself So, the iteration of the new version of NanUI began, and the spread of the Wuhan epidemic, and the company stopped indefinitely, it took nearly four months to complete the iteration of the new version. The iteration of this version can basically be said to start from the bottom. The whole project is basically rewritten: the logic of the hosting window has been rewritten, the core has been replaced with CefGlue, and the API of Chromely has been borrowed. After a preliminary trial, it can be regarded as a iteration of NanUI from scratch, which is quite satisfactory from 0.1 to 0.6.

0.7 core content

• The ChromiumEmbedded framework is upgraded to version 77.1.18.
• Continue to retain ChromiumFX as the bottom rendering core of NanUI.
• Reloaded the borderless hosting window.
• Modified the initialization method of NanUI and used FluentAPI to write the startup process.
• Reconstructed CefResourceHandler, realized the basic framework of CustomResourceHandler, convenient for users to customize their own resource handlers.
• AssemblyResourceHandler and FolderResourceHandler have been stripped from NanUI. These two resource handlers are now separated into independent project maintenance.
• A new RESTfulResourceHandler resource processor has been added. Using RESTfulResourceHandler can easily provide various data to the client. Users no longer need to provide data to the client by injecting JS code. It feels better to use ajax.
• Reconstructed the logic of window presentation. In the new version, users no longer need to pay attention to the creation and design of browser-bearing windows. The factory inside NanUI replaces users to complete these tasks. At the same time, it also leaves a realizable interface for cross-platform in the future.
• Added support for .NET CORE 3.1.
• The NuGet package has been improved. Now the dependent projects of NanUI will automatically generate the directory structure of dependent projects based on the target project's .NET framework (.NET Framework / .NET Core) and platform architecture (x86 / x64 / AnyCPU)
• Fixed various bugs in version 0.6.

Below, I will continue to introduce the basic use of version 0.7.

project address

GitHub: https://github.com/NetDimension/NanUI/
Gitee: https://gitee.com/linxuanchen/NanUI

Documents and columns

• NanUI development documentation
• Know the column NanUI technology inside

Welcome to NanUI 0.7

Thank you for choosing the NanUI open source framework for .NET Framework / .NET Core!

NanUI is an open source .NET project that is suitable for .NET / .NET Core developers who want to use HTML5 / CSS3 and other front-end technologies to build Windows Forms application user interfaces. You can use any front-end technology you are familiar with to build a WinForm application user interface.

It is strongly recommended that you use the single page application (SPA) mode to make the interface, because this can bring users a better operating experience. Mainstream Javascript frameworks, such as Angular, React, and Vue are smart choices that can be used to construct SPA applications.

This framework will bring unlimited possibilities for your software interface design work.

Get started with NanUI

Development environment requirements

To build a NanUI application, your development environment needs to meet the following conditions:

• Development environment preferred Visual Studio 2019

  • If you need to compile NanUI project source code, you must use VS2019, because only VS2019 can compile .NET CORE 3.1 project source code.
  • You can use older versions of Visual Studio (such as VS2012) to develop applications based on the .NET Framework.
  • If you need to develop an application based on the .NET Core 3.1 framework, you currently have only VS2019 to choose from.

• The client operating environment is Windows 7 SP1 and later versions of Windows.

  • Since version 0.7 of NanUI, no support for Windows XP system is provided. If you need to develop applications for Windows XP system, please continue to use version 0.6.2526
  • The implementation of NanUI's HighDPI adaptive function requires Windows 10 Createors Update or a higher version of Windows 10 system.

NanUI dependencies

NanUI is based on ChromiumFX, which is an implementation of .NET's Chromium Embedded Framework (CEF).

The operation of NanUI 0.7 depends on the Chromium Embedded Framework (CEF) 77.1.18 binary file and the corresponding version of the ChromiumFX binary file. You can choose to download or compile these binaries manually, or you can install these dependencies automatically through Nuget package manager.

Download or compile dependencies manually

Chromium Embedded Framework (CEF) 框架

You can download the compiled and corresponding version of CEF binaries from http://opensource.spotify.com/cefbuilds/index.html :

• CEF 77.1.18+g8e8d602+chromium-77.0.3865.120 / Chromium 77.0.3865.120 - Windows x86
• CEF 77.1.14+g4fb61d2+chromium-77.0.3865.120 / Chromium 77.0.3865.120 - Windows x64

If you have rich experience in CEF development, you can also compile the CEF framework according to the official CEF guidelines ^[1] . You can add more customizable functions by compiling the CEF framework yourself ^[2] .

ChromiumFX

You can download the source code of version 77.1.18.0 from the hosting site of the ChromiumFX project, and compile the binary files under the x86 architecture and x64 architecture platform according to the guidelines:

• libcfx.dll-Windows 32-bit
• libcfx64.dll-Windows 64 bit

Install dependencies using NuGet package manager

PM> Install-Package NetDimension.NanUI.Runtime

NuGet package manager will automatically generate project-dependent directory and file structures based on your project's architecture information. You don't need to pay attention to directory structure information, which is also the fastest and easiest way.

Compile NanUI source code or use binary package

You can get all the source code of NanUI from GitHub and use VS2019 to compile the source code, or install the NanUI binary package through NuGet.

• NanUI project source code- https: //github.com/NetDimension/NanUI/
• Install NuUI using NuGet package manager

PM> Install-Package NetDimension.NanUI

NanUI related binary packages

The following table shows the NuGet packages and related information of the NanUI project.

project name	frame	Explanation
NetDimension.NanUI	.NET Framework 4.0+ / .NET Core 3.1	You need to reference this library to build a NanUI application, which is the core library of NanUI.
NetDimension.NanUI.Runtime	.NET Framework 4.0+ / .NET Core 3.1	NanUI's dependencies include CEF framework binaries and CFX binaries.
NetDimension.NanUI.Subprocess	.NET Framework 4.0+ / .NET Core 3.1	NanUI's subprocess executable file, if you use NanUI's UseDefaultSubprocess feature, you need to install this package.
NetDimension.NanUI.AssemblyResourceHandler	.NET Framework 4.0+ / .NET Core 3.1	Embedded resource controller.
NetDimension.NanUI.FileResourceHandler	.NET Framework 4.0+ / .NET Core 3.1	File resource controller.
NetDimension.NanUI.RestfulResourceHandler	.NET Framework 4.0+ / .NET Core 3.1	REST data resource controller.

Create the first NanUI application

NanUI is based on the Chromium browser core, so you can use any front-end technology you are familiar with to build your desktop application. You can also inject .NET objects or methods into the Javascript environment; in addition to using a resource processor, you can also easily provide content such as files, multimedia, and data to the Web environment.

You can think of NanUI as a simplified Chromium browser embedded in WinForm. This browser replaces the canvas of the traditional WinForm interface, so you can use your imagination to design your form interface using any Web front-end technology. .

Not only that, you can also retain all the features of the .NET framework, be able to use EntityFramework, be able to use multiple threads, and even interact with your hardware devices in any way and feed back relevant information to the Web environment. It not only meets the needs of designing a beautiful user interface, but also retains the powerful ecological environment of .NET.

Read the steps below and we will create your first NanUI application together.

Choose a .NET framework

You can choose to use the Windows Form (WinForm) application for the .NET Framework or .NET Core framework according to the needs of the actual project. For both types of form applications, all API interfaces are the same, and you can easily migrate from one framework to another.

Security NanUI

Now, you need to install NanUI and its dependencies. It is recommended that you use NuGet package management to install them. Run the following command in the package manager to install:

Security NanUI

PM> Install-Package NetDimension.NanUI

Install NanUI runtime dependencies

PM> Install-Package NetDimension.NanUI.Runtime

Make a simple HTML form

NanUI uses a new factory to create browser-bearing windows, so we don't need to design forms and controls through the form designer as usual. Therefore, we can directly delete the Form1.cs form automatically created for us in the project template.

Create a new MainWindow.cs and let him inherit the NetDimension.NanUI.Formium base class and implement all abstract interfaces of this class:

using NetDimension.NanUI;
using NetDimension.NanUI.Browser;

class MainWindow : Formium
{
    public override string StartUrl => "https://www.google.com";

    public override HostWindowType WindowType => HostWindowType.Standard;

    protected override Control LaunchScreen => null;

    public MainWindow()
    {
        Title = "第一个NanUI应用"
    }
    
    protected override void OnWindowReady(IWebBrowserHandler browserClient)
    {
        
    }

    protected override void OnRegisterGlobalObject(JSObject global)
    {
        
    }
}

Modify the StartUrl property to specify the Url address to be accessed at startup.

public override string StartUrl => "https://www.google.com";

Specify the WindowType property and choose whether the form is displayed in its native style or borderless style.

 public override HostWindowType WindowType => HostWindowType.Standard;

Use the LaunchScreen property to return a custom user control, used to display the waiting screen when the web page loads, usually he can be a PictureBox, put a static image or GIF image to inform the user of the application startup status. If this function is not needed, return null.

protected override Control LaunchScreen => null;

Using the OnWindowReady overload method, you can set each processor of the Chromium client with the browserClient parameter to implement various behaviors of the Chromium browser, such as: how to handle new windows, how to handle download requests, and how to notify the application web page title Changes and so on.

This method is usually executed after the initialization of the Chromium browser core is completed.

If you do not need to define a behavior processor, just leave it blank.

protected override void OnWindowReady(IWebBrowserHandler browserClient)
{

}

Using the OnRegisterGlobalObject overload method, you can register various .NET objects and methods to the browser's Javascript context. You can regard the parameter of this overload method global as the browser's window object. The specific implementation method can refer to the following chapters.

protected override void OnRegisterGlobalObject(JSObject global)
{

}

Through the above operations, you have completed your first NanUI window, which will use the content of google.com as the interface of your form.

But so far, the application has not been able to run normally, because we still need to initialize the NanUI and CEF environment.

Initialize the NanUI and Chromium Embedded framework environment

We need to put in the Main method to initialize the operation of NanUI and CEF.

using NetDimension.NanUI;

static class Program
{
    /// <summary>
    ///  The main entry point for the application.
    /// </summary>
    [STAThread]
    static void Main()
    {
        Bootstrap
            .Initialize()
            .Run(() => new MainWindow());
    }
}

At this point, your first NanUI application has been able to run normally.

Customize your window further

If you want to further customize your window style, please overload the OnStandardFormStyle method, and use the style parameter to set the window start position, size, icon, border style and other information.

protected override void OnStandardFormStyle(IStandardHostWindowStyle style)
{
    base.OnStandardFormStyle(style);

    style.Width = 1280;
    style.Height = 720;
    style.Icon = System.Drawing.SystemIcons.WinLogo;
    style.StartPosition = FormStartPosition.CenterScreen;
}

Run your first NanUI application

As shown in the figure, your first NanUI application runs successfully.

NanUI basic usage examples

This example will show you how to run NanUI with minimal code.

Station B: https://www.bilibili.com/video/av87654190/

Watermelon video: https://www.ixigua.com/i6791108584999485955

Use borderless styles in your NanUI application

Through the introduction of the document in the previous chapter, you have learned the basics of creating a NanUI application and creating a window for the Formium browser. After creating the application using the same routines as described in the previous document, you only need to set the WindowType of the browser-hosted form to Borderless mode to create a borderless style form.

This chapter will mainly introduce the relevant knowledge points of the borderless style form. The content involves the special CSS in the NanUI system, the html markup attributes unique to NanUI, Javascript objects and global events.

Set the hosting form to borderless style

Specify the WindowType property as Borderless to allow the form to be rendered in a borderless style.

 public override HostWindowType WindowType => HostWindowType.Borderless;

Set draggable / non-dragable area

When the form is presented in a borderless style, the default window loses the title bar of the native window and its control area, so the form cannot be moved by dragging. At this time, you need to determine which part of the web page supports drag and drop by setting a special CSS property -webkit-app-region. You can create drag-shaped and non-dragable regions by flexible design to create a special-shaped drag region .

Set draggable area

.draggable-area {
    -webkit-app-region: drag;
}

Set non-dragable area

.draggable-area {
    -webkit-app-region: no-drag;
}

Use the following sample code to draw a draggable rectangular area and exclude the rectangular area with className = "controls" in the area.

HTML

<div class="titlebar">
    <span>Welcome to NanUI</span>
    <div class="controls">
        <a title="Minimize" class="control-btn">
            <svg x="0px" y="0px" viewBox="0 0 10.2 1" data-radium="true" style="width: 10px; height: 10px;"><rect fill="#ffffff" width="10.2" height="1"></rect></svg>
        </a>
        <a title="Maximize" class="control-btn">
            <svg x="0px" y="0px" viewBox="0 0 10.2 10.1" data-radium="true" style="width: 10px; height: 10px;"><path fill="#ffffff" d="M0,0v10.1h10.2V0H0z M9.2,9.2H1.1V1h8.1V9.2z"></path></svg>
        </a>
        <a title="Close" class="control-btn">
            <svg x="0px" y="0px" viewBox="0 0 10.2 10.2" data-radium="true" style="width: 10px; height: 10px;"><polygon fill="#ffffff" points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1 "></polygon></svg>
        </a>
    </div>
</div>

SCSS

.titlebar {
    // scss ...
    -webkit-app-region: drag;

    > controls {
        // scss ...
        -webkit-app-region: no-drag;
    }
}

Use NanUI's built-in commands

NanUI has built-in html attribute nanui-command, through which you can quickly realize the maximizing, minimizing, restoring and closing window commands of borderless forms.

For example, setting nanui-command = "close" can close the form after clicking this element.

<a title="Minimize" class="control-btn" nanui-command="close">
    // 关闭按钮 ...
</a>

The value of the nanui-command attribute has the following groups:

Attribute name	Command role
maximize	Maximize the window
minimize	Minimize window
restore	Restore window
close	Close the current window

The NanUI object in the browser

NanUI registers the NanUI object in the Javascript environment of Chromium, through which you can obtain information about the current form, or use the built-in functions to change the various states of the form.

NanUI elephant

• version - type: object | NanUI version information object
  • cef - type: string | Display CEF version string
  • chromium - type: string | Display CEF version string
  • nanui - type: string | Display the NanUI version string
• hostWindow - type: object | NanUI host window object
  • use Close () - of the type: function | Close window bearer
  • the Maximize () - of the type: function | maximize carrying window
  • the Minimize () - of the type: function | minimize carrying window
  • Restore () - of the type: function | Restore window bearer
  • the moveTo (x, y) - function: type | position the carrier to the window x, y of
  • sizeTo (width, height) - type: function | set window width is carried width, height height
  • height - type: integer | The height of the current hosting window
  • width - type: integer | The width of the current hosting window
  • state - type: object | Detailed state of the NanUI hosting window
    • clientHeight - type: integer | Height of the client area of ​​the hosting window
    • clientWidth - type: integer | The width of the client area of ​​the hosting window
    • height - type: integer | Height of the bearing window
    • width - type: integer | the width of the hosting window
      • windowState - type: object | The state object that maximizes the window and minimizes it
        • state - type: string | Name of the state of the hosting window [normal | minimized | maximized]
        • code - type: object | The state code of the bearing window [0: normal | 1: minimized | 2: maximized]

Custom events in the browser

In addition to registering objects in the Javascript environment of Chromium, NanUI also registers some notification events that carry window changes. You can capture these events by registering event handlers to achieve various functions.

• hostactived -the host window gets focus and is activated

• hostdeactivate -the host window loses focus

• hostactivestatechange - host window focus state change

  • Parameters: actived- type: boolean | activated state [true: gain focus | false: lose focus]

• hoststatechange - host window maximizes and minimizes state changes

  • Parameters: state- type: string | State name of the bearer window [normal | minimized | maximized]
  • Parameter: code- type: integer | Bearing window status code [0: normal | 1: minimized | 2: maximized]

• hostsizechange - host window state size change

  • Parameters: width- type: integer | The width of the client area of ​​the hosting window
  • Parameters: height- type: integer | Height of client area of ​​hosting window

For example, we can add different styles to the form by capturing the event that maximizes and minimizes the state change of the hosting window:

window.addEventListener("hoststatechange", e => {
    if (e.detail.code === 2) {
        console.log("最大化状态");
    } else if(e.detail.code === 1) {
        console.log("最小化状态");
    }
    else {
        console.log("正常状态");
    }
});

Example using borderless mode

This example will show you how to use React and React Desktop to make a user interface for a .NET CORE 3.1 desktop application.

Station B: https://www.bilibili.com/video/av87654610/

Watermelon video: https://www.ixigua.com/i6791109614734672391/

GitHub project address: https://github.com/XuanchenLin/using-react-desktop-with-nanui-0.7

Thanks

NanUI has gone through four years from birth to the present. Although it has received various insults and abuses from the Internet during this period, it is more encouraged and supported by everyone. Thank you again for your attention and understanding ,Thank you!

NanUI is an open source project based on the MIT agreement and it is completely free. Nevertheless, without proper financial support, project maintenance and the development of new functions cannot be sustained. So if you like this project and recognize my work, you can pay me a cup of coffee and ask me to drink a cup of coffee, or you can also become a long-term project sponsor to help NanUI get better!

Use WeChat or Alipay to scan the QR code below to donate funds.

---

1. CEF official documentation - Branches and Building ↩︎

2. Chromium Embedded Framework does not natively support h.264 video playback (the format is a commercial format), so you need to add the relevant compilation symbols and recompile the CEF source code to realize the playback of h.264 format video. ↩︎