[Open-Source][Module] SimpleWindows Desktop UI Container

Introduction

SimpleWindows is a module that contains a window class which implements desktop-like windows from your average OS. These windows can be resized, dragged, folded, closed, as well as dynamically customized in-game. All of these options can also be disabled.

Specifics

The window contains a “Contents” frame for your UI elements and 5 buttons for closing, folding, resizing and dragging. By default, “Close” and “Fold” are located on the top right, “ResizeX” and “ResizeY” are the handles on the right and bottom edges, while the “Drag” button covers the top. All of these can be moved in case you want fold and close to be on the left or resized. Everything will also dynamically scale with your Roblox window.

A folded window can still be moved around but not resized. Closing a window will not destroy it and it can still be opened through a script. You have to call the :Destroy() method on it manually, or just bind it to the OnClose event. There is also a limit to how high and low you can move the window and the size is limited to positive numbers to avoid breaking or leaving the window unreachable.

Window focus is automatic, but can be forced with the :SetFocus() method. Focus can also be locked with the .FocusLocked property. While unfocused windows can still be moved around and interacted with, only the focused window will stay on top in case it is locked; otherwise, focus will automatically change when opening, dragging, resizing or folding.

Customization

The main reason I created this module is to simplify in-game customization, such as themes or button size. This is achieved through the :UpdateAppearance(data) method which applies the changes to every existing and future window. The data argument is a table containing the properties you want to change. You can also change the ScreenGui’s parent with the ScreenGui property of the module. The DefaultData module contains the default data used when creating windows. It can easily be modified by using the mentioned method or by replacing the values in the DefaultModule.

Every property of the window’s UI elements can be changed if there is an instance property for it. As mentioned, there are 6 elements inside a window, but the window frame itself can also be modified, making it 7. Size and Position get treated slightly differently. They are parsed as an array of 4 doubles with the values representing the 4 arguments of UDim2.new. Scale acts the same way as it does usually, but the offset also gets scaled depending on the Roblox window’s size. There is a minimum scale multiplier so that the elements don’t become too small to be used. To change the window’s background color, you need to apply the properties under a “Main” category. You can find an example in the DefaultData and OtherStyles.

Usage in plugins

As ModuleScripts don’t have the required security level to access CoreGui, the ScreenGui containing the windows will not be parented to anything and can be accessed through the “ScreenGui” property of the module.

A few images

Just an empty default window.

The same window but folded.

My pitiful attempt at making an iOS like theme.

The same, but folded.

NOTE:

Resizing or dragging a window with a large amount of descendants WILL cause a considerable lag. Make sure to keep the element count within reasonable limits.

Methods and properties:

<table> SimpleWindows

	<Instance:ScreenGui> ScreenGui					-The parent ScreenGui of the windows.
	
	(<table:class> Window) .new (<void>)			- A constructor method. Returns a closed window.
	(<void>) :UpdateAppearance (<table>Appearance) 	- Updates the appearance and proportions of all existing and new windows.
														An example of such table can be found in the "DefaultData" module.
														
<table:class> Window

	<Instance:ImageLabel/Frame> Instance			-The instance itself. It is an ImageLabel because of the rounded corners.
	<Instance:Frame> Content						-A frame inside the previous Instance. This is where all the GUI elements are stored.
	
	<Event> OnOpen
	<Event> OnClose
	<Event> OnFold
	<Event> OnUnfold
	<Event> OnDestroy
	<Event> OnResize
	<Event> OnDrag									
	<Event> OnFocus
	<Event> OnFocusLost								-Events for specific actions.
	
	<bool> 	IsOpen			(false)
	<bool> 	IsFolded 		(false)
	<bool> 	IsFoldable		(true)
	<bool> 	IsDraggable	 	(true)
	<bool> 	IsResizable  	(true)
	<bool> 	IsClosable 		(true)
	<string>Label			("")					-The string content of the window's label.
	<bool> 	FocusLocked 	(false)
	<bool> 	Layer =			(nil)					-The current Z position.
	<table>	ZIndexList								-Contains the base ZIndices of all descendants. The index is the descendant and the value the ZIndex.
														Used for focusing.
		
	(<void>) :Open (<void>)							-Opens a closed window.
	(<void>) :Close (<void>)						-Closes an open window.
	(<void>) :Fold (<void>)							-Folds the window if unfolded.
	(<void>) :Unfold (<void>)						-Unfolds the window if folded.
	(<void>) :Destroy (<void>)						-Destroys the "Container" frame and clears all references.
	(<void>) :SetPosition(<UDim2>Position)
	(<void>) :SetSize(<UDim2>Size)
	(<void>) :SetFocus(<void>)						-Makes the selected table the current focus.
	(<void>) :SetLabel(<string>Label)				-Sets the window's label.
	
	<table> __bindables					
	<UDim2> __LastWSize								-Internal values				

The documentation is also available in the module.

The library link.
An example file of how to use this plugin: SimpleWindows.rbxm (18.8 KB)

@Stelrex’s Roundify plugin was used in this module’s creation.

25 Likes

You made a mistake in the title of this post, I think you mean desktop, not dektop.

Anyway, are we allowed to change everything like modifying the complete window design?

3 Likes

Thanks. I finished this around 3am so I was barely capable of reading or typing at that point.

As for the editing, I will add the fact that this is open-source to the post.

No windows showed up after I made a window and :open()

1 Like

Any errors or warnings? Also, did you call :Open() or :open()?

Updated the module to include an auto focus feature, as well as 2 new events and the ability to lock the focus. The windows now have a space of 10 ZIndices between eachother to avoid elements peeking through.

Also added the ability to customize the window’s background itself and a few example themes.

I’ll also add the ability to label each window later.

Added window labels which are empty by default. You can now use :SetLabel(label) to name your windows.