Over a year ago, we developed our own UI interface tool for editing, previewing, and debugging nsNiuniuSkin. We found it increasingly useful and couldn't resist sharing it!

Today, I have reorganized this tool, improving its functionality. Let me introduce the features and usage of this tool below!

Features

The nsNiuniuSkin interface online design engine is a tool for previewing and debugging nsNiuniuSkin interfaces. Similar to Chrome's developer tools, it allows quick viewing of various interface effects, greatly improving the efficiency of interface configuration. The main features and characteristics are as follows:

• Pixel-level positioning of controls, quickly and accurately determining control size, distances between controls, etc. (can be compared 1:1 with design tools like BlueHole and MoDao)
• Viewing the properties of each control, quickly modifying properties such as font, font size, color, size, background image, etc., and seeing the changes in real-time
• Real-time display of XML configuration information and properties for the currently selected control, helping locate the control in the XML and vice versa
• Previewing all installation package sub-pages without the need for packaging and installation, confirming all interface development at once
• Automatically cycling through installation pages, checking each interface at once
• 1x, 1.5x, 2x DPI zoomed effect preview, quickly confirming whether the interface is fully implemented under different DPI zoom levels
• Preview of pop-up windows and prompt windows during the installation process, comprehensive UI viewing without blind spots
• JavaScript binding of various UI button events, simulating the entire process for an immersive experience of the installation process

Interface Effects

After discussing the many benefits, let's take a look at the effects.

Control Positioning and Viewing Properties

Preview of Dialog Windows

Window Scrolling Effects

Real-Time Changes in Modified Properties

We changed the progress of the progress bar from 20% to 40%. The operation and UI changes are as follows: 

Different Magnification Effects

Various UIs with different zoom levels, as clear as ever:

1x Effect:

1.5x Effect:

2x Effect:

Usage Instructions

The usage of the nsNiuniuSkin interface online design engine is very simple. Download the engine package, log in, click to open the debugging page, and you can get started.

1. Open and log in to the design engine.

   

2. Follow the on-screen instructions to open the debugging page (http://www.ggniu.com/duidesigner/duidesigner.html).

   If the control is loaded successfully, it means we can start interface debugging and previewing normally!

   

3. Fill in the UI resource path of nsNiuniuSkin's installation package (there must be an "install.xml" file under the skin directory).

4. Click "Load UI" to display the UI interface of the installation package. Then, click buttons such as "Install Configuration," "License Agreement," "Installing," "Installation Complete," "Start Uninstall," "Uninstalling," and "Uninstall Complete" to quickly switch between different installation status interfaces.

5. Click "Show Popup (Confirmation)" and "Show Popup (Inquiry)" buttons to preview the interface of prompt and inquiry windows.

6. Select different zoom levels on the interface, then click "Load UI" again to display interfaces with different zoom levels.

7. You can also click the "Process Preview" button, which will sequentially display each installation interface, pausing for about 3 seconds to view each installation interface.

It's that simple! When using this debugger to assist in developing the installation package UI, both efficiency and quality are significantly improved.

Introduction

The nsNiuniuSkin interface online design engine may seem simple, but we have invested a lot of effort into it. Some of the core technical points are as follows:

• Wrapping the debugger's call to nsis plugins.

  Usually, we only develop nsis plugins and then integrate them into nsis for use. However, this time, in order to develop this design engine, we took the opposite approach and called the nsNiuniuSkin plugin, allowing us to use the same plugin interface as in nsis. This ensures that the preview effect is the actual effect, and modifying properties on the interface guarantees consistency with the behavior during installation.

• Transforming the plugin capabilities of nsNiuniuSkin into Javascript script capabilities on the browser.

  We aimed to create an open engine debugging platform. To achieve this, we needed a well-known scripting interface to facilitate the integration of interactive features, such as calling nsNiuniuSkin's interface in Javascript scripts. In this part, our design engine acts as a bridge, fully integrating the interface and callback events of nsis plugins with Javascript, ultimately allowing control of the entire interface's behavior in Javascript.

• Handling Duilib's control selection, hover events, and visual representation of control positions and margins.

  This is considered the core capability of the entire engine. With minimal code and minimal intrusiveness into Duilib, we can dynamically draw the relative position, size, etc., of the selected control and the currently hovered control. Additionally, the selected control's information is conveyed to Javascript through events, presenting it in the form of a property list on the interface.

  We believe this feature has a certain level of innovation. In the future, we can expand this design engine to serve as a general Duilib interface debugger, benefiting all Duilib interface developers.

Future Prospects

As mentioned earlier, the current nsNiuniuSkin interface online design engine is similar to the Chrome developer tools. It allows modification of elements' properties on the debugger interface, with real-time viewing of changes. However, these changes do not synchronize with the XML configuration file of the interface, and actual modifications still require editing the XML file. In the future, we plan to:

1. Implement synchronous preview and modification functionality, allowing data modified on the interface to be instantly reflected in the XML file without manual editing.
2. Expand the debugger's application scope by implementing callback interfaces, supporting various external Duilib libraries. Additionally, considering integration with other interface libraries is under consideration.

Conclusion

During the installation package installation process, a visually appealing UI can leave a lasting impression on customers and reflect the software service provider's focus and dedication to user experience! We hope our efforts can make the process of creating installation packages easier and more enjoyable.

May there be no difficult installation packages in the world!