In previous articles, I shared the features and gameplay of our nsNiuniuSkin interface online design engine. This tool is personally used by me to efficiently and effectively create interface designs for installation packages. It allows for quick previews of the installation package interface without the need for actual packaging, compiling, and running. You can rapidly preview and perform real-time debugging and modifications to achieve a "what you see is what you get" effect!
The main features of this tool (with the last two items being updates) are as follows:
The nsNiuniuSkin interface online design engine is a tool for previewing and debugging nsNiuniuSkin interfaces, similar to Chrome's developer tools. It allows for rapid viewing of various interface effects, greatly enhancing the efficiency of interface configuration. Its main functions and features include:
We have optimized the debugging engine. After loading XML files in the skin directory, we find the Languages directory in the nsNiuniuSkin multi-language configuration according to install.xml and load languages in real-time rendering.
At the same time, we display the language selection box on the installation window and bind dropdown box selection events in JavaScript. According to the actual switching logic in the nsis script, we modify relevant elements in the window to achieve multi-language switching effects:
Actually, in the entire installation package interface configuration, the most complex part is often the configuration in config.xml. Other pages only have a few simple elements, but the config.xml page includes address bars, installation buttons, license agreements, and custom installation buttons, among other elements. Especially when clicking the custom installation button, elements in the window need to be hidden or shown differently.
To conveniently control the position of control elements, we use a float layout for some elements, which means specifying the global coordinates of controls. This might be confusing for friends who are not very familiar with Duilib.
Now you don't have to worry anymore. In the debugging tool, we use checkboxes to control whether the current display is in custom installation mode or quick installation mode, allowing you to intuitively see all changes on this page. You can also adjust the properties of each element online to determine the best property values.
Switching effect is as follows:
Open and log in to the design engine.
Follow the on-screen instructions to open the debugging page (https://www.ggniu.com/duidesigner/duidesigner.html).
If the controls load successfully, it means you can start interface debugging and preview normally!
Enter the UI resource path for nsNiuniuSkin's installation package (there must be an install.xml file in the skin directory).
Click "Load UI" to display the UI interface of the installation package. Then, click "Installation Configuration," "License Agreement," "Installing," "Installation Completed," "Start Uninstall," "Uninstalling," "Uninstallation Completed," and other buttons to quickly switch between different installation status interfaces.
Click the "Show Popup (Confirmation)" and "Show Popup (Inquiry)" buttons to preview the prompt and inquiry windows.
Select different zoom factors on the interface, then click "Load UI" again to display interfaces at different zoom factors.
You can also click the "Process Preview" button, which will sequentially display various installation interfaces and pause for approximately 3 seconds for viewing each installation interface.
Isn't it simple? When I use this debugger to assist in developing installation package UIs, efficiency and quality are both significantly improved.
During the installation process, a beautiful UI can leave a deeper impression on customers about the installed product and reflect the software service provider's dedication to user experience!
We hope our efforts can make the creation of installation packages a little easier and more enjoyable!
May there be no difficult installation packages in the world!
