[Release] DecUI: A declarative approach to UI development

[NewK]

DecUI

After having to deal with some of the issues and annoyances that come along with the experience of building a GUI in VCMP, I decided to create DecUI (declarative UI), a library to address the main pain points related to GUI development in VCMP and make it easier and more readable overall.

This library provides an abstraction over the existing GUIElements and allows you to create them and relate them to each other in a declarative manner instead of using the default imperative based VCMP approach. You can see a comparison here.

In addition to providing an abstraction layer for creating GUIElements, this library also provides many new components like:

• DataTables
• Tabs
• ComboBoxes
• Tooltips
• Right click context menus
• Popups

There's also many new features that have been added to already existing GUIElements like GUIElements ID's, a hide()/show() function, an autoResize property for the GUIWindow and GUICanvas which will automatically resize your windows and canvas according to their contents, a fadeIn()/fadeOut() function and many more new properties which can be seen here. All the existing properties and functions like .Size, .Position and the others mentioned on the VCMP wiki are still applicable when using this library so they will still work.

Downloading and getting started

• Follow the instructions on this page
• Read the documentation here

The documentation is still incomplete but it's a good starting point for now.

Any questions feel free to ask

[umar4911]

A job done very well. You made client-side scripting quite easy and short. I can just say thanks as it will help me.

[MatheuS]

Great job! This will help me a lot.

[ℛḝξ☂]

Good job, I hope I could get used to it soon.

[Sebastian]

From now on, when you gonna join a server, decgui will be there for download
Good job!

[NewK]

I made a visual studio code extension for the DecUI library that  will assist you when using the library. It has autocompletions and snippets for all the GUIElements and components currently present in the library. Here's a demo of it in action:



If you're not using visual studio code, I highly recommend it. Download it and make sure to install the squirrel extension first before installing the DecUI extension or else it won't work. After installing the squirrel extension, you can get the DecUI extension here. Click the "clone or download" button and click on "Download ZIP". After downloading, extract the folder inside the .zip file to your visual studio code extensions folder ( %USERPROFILE%\.vscode\extensions ). After extracting the folder, restart visual studio code (if you have it open) and that's it.

[D4rkR420R]

I made a visual studio code extension for the DecUI library that  will assist you when using the library. It has autocompletions and snippets for all the GUIElements and components currently present in the library. Here's a demo of it in action:



If you're not using visual studio code, I highly recommend it. Download it and make sure to install the squirrel extension first before installing the DecUI extension or else it won't work. After installing the squirrel extension, you can get the DecUI extension here. Click the "clone or download" button and click on "Download ZIP". After downloading, extract the folder inside the .zip file to your visual studio code extensions folder ( %USERPROFILE%\.vscode\extensions ). After extracting the folder, restart visual studio code (if you have it open) and that's it.

Now that's rad. Awesome work, dude.

[AroliS^]

remember to check out the github, for viewing out new updates..

[NewK]

After 2 years, more than 100 commits and a few community contributions, version 1.0.0 has been released. The code for custom components has been rewritten and now supports the creation of DecUI components dynamically. This means it supports the creation of new DecUI components without needing to add or modify any code inside DecUI so if you want to create DecUI components you dont need to know anything about DecUI internals, you just need to create a class that extends the parent DecUIComponent, register that class with DecUI and that's all. If you're familiar with React, you'll feel right at home since it's very similar.

You can see the tutorial on how to create DecUI components here

You can see the changelog here