Vice City: Multiplayer

Server Development => Scripting and Server Management => Client Scripting => Topic started by: NewK on Jun 26, 2019, 05:07 AM

Title: [Release] DecUI: A declarative approach to UI development
Post by: NewK on Jun 26, 2019, 05:07 AM
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 (https://github.com/newk5/decui#comparison).

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

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 (https://github.com/newk5/decui/wiki#new-global-properties-and-functions). 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


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

Any questions feel free to ask
Title: Re: [Release] DecUI: A declarative approach to UI development
Post by: umar4911 on Jun 26, 2019, 09:26 AM
A job done very well. You made client-side scripting quite easy and short. I can just say thanks as it will help me.
Title: Re: [Release] DecUI: A declarative approach to UI development
Post by: MatheuS on Jun 26, 2019, 11:24 AM
Great job! This will help me a lot.
Title: Re: [Release] DecUI: A declarative approach to UI development
Post by: ℛḝξ☂ on Jun 27, 2019, 04:09 AM
Good job, I hope I could get used to it soon.
Title: Re: [Release] DecUI: A declarative approach to UI development
Post by: Sebastian on Jun 27, 2019, 12:02 PM
From now on, when you gonna join a server, decgui will be there for download 8)
Good job!
Title: Re: [Release] DecUI: A declarative approach to UI development
Post by: NewK on Jun 28, 2019, 12:08 AM
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:

(https://imgur.com/THxfEdI.gif)

If you're not using visual studio code, I highly recommend it. Download it and make sure to install the squirrel extension (https://marketplace.visualstudio.com/items?itemName=deldrid1.SquirrelLanguageExtension) first before installing the DecUI extension or else it won't work. After installing the squirrel extension, you can get the DecUI extension here (https://github.com/newk5/decui-vscode). 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.
Title: Re: [Release] DecUI: A declarative approach to UI development
Post by: D4rkR420R on Jul 08, 2019, 10:02 PM
Quote from: NewK on Jun 28, 2019, 12:08 AMI 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:

(https://imgur.com/THxfEdI.gif)

If you're not using visual studio code, I highly recommend it. Download it and make sure to install the squirrel extension (https://marketplace.visualstudio.com/items?itemName=deldrid1.SquirrelLanguageExtension) first before installing the DecUI extension or else it won't work. After installing the squirrel extension, you can get the DecUI extension here (https://github.com/newk5/decui-vscode). 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.
Title: Re: [Release] DecUI: A declarative approach to UI development
Post by: AroliS^ on May 16, 2021, 12:37 AM
remember to check out the github, for viewing out new updates..
Title: Re: [Release] DecUI: A declarative approach to UI development
Post by: NewK on Oct 05, 2021, 09:54 PM
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 (https://github.com/newk5/decui/wiki/How-to-create-a-DecUI-component)

You can see the changelog here (https://github.com/newk5/decui/releases/tag/v1.0.0)