widgets de Studio de construcción

Studio te da el poder de crear widgets personalizados y usarlos como herramientas y extensiones de Studio .Estos widgets se comportan como ventanas/paneles personalizados en Studio, y puedes acoplarlos dentro de tu interfaz o que floten como ventanas separadas.

Crear interfaces de widget

Todos los widgets de Studio comienzan como objetos DockWidgetPluginGui que puedes llenar con GuiObjects, como etiquetas de texto y botones.Para crear una interfaz de Interfaz gráfica (o GUI)widget vacía, llame a la función CreateDockWidgetPluginGui(), pasando un ID y un objeto DockWidgetPluginGuiInfo.

Tenga en cuenta que el constructor DockWidgetPluginGuiInfo.new() espera sus parámetros en un orden específico como sigue:

-- Crear nuevo objeto "DockWidgetPluginGuiInfo"
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float, -- El widget se inicializará en un panel flotante
	true,   -- El widget se habilitará inicialmente
	false,  -- No anules el estado habilitado anterior
	200,    -- Anchura predeterminada de la ventana flotante
	300,    -- Altura predeterminada de la ventana flotante
	150,    -- Anchura mínima de la ventana flotante
	150     -- Altura mínima de la ventana flotante
)

-- Crear nueva Interfaz gráfica (o GUI)de widget
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Optional widget title

Personalizar la interfaz de usuario del widget

Una vez que creas un widget, puedes personalizar su interfaz de usuario con GuiObjects como informativa TextLabels o interactiva ImageButtons .Por ejemplo, el siguiente código agrega un código básico TextButton a la ventana GUI:

-- Crear nueva Interfaz gráfica (o GUI)de widget
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Título opcional del widget

local testButton = Instance.new("TextButton")
testButton.BorderSizePixel = 0
testButton.TextSize = 20
testButton.TextColor3 = Color3.new(1,0.2,0.4)
testButton.AnchorPoint = Vector2.new(0.5,0.5)
testButton.Size = UDim2.new(1,0,1,0)
testButton.Position = UDim2.new(0.5,0,0.5,0)
testButton.SizeConstraint = Enum.SizeConstraint.RelativeYY
testButton.Text = "Click Me"
testButton.Parent = testWidget

Cambiar temas de color de Studio

Los widgets efectivos de Studio coinciden idealmente con la configuración del tema de Studio y se ajustan dinámicamente cuando cambia el tema.Por instancia, si un desarrollador está usando el tema oscuro, el color de fondo del widget, las imágenes y las etiquetas de texto deberían verse bien junto con los colores del tema nativo de Studio.

La siguiente adición de código utiliza una función syncGuiColors() que se llama inicialmente junto con una tabla de objetos de interfaz de usuario para sincronizarDentro de la función, un ciclo de funciones anidado setColors() recorre los objetos y sincroniza aspectos específicos de ellos usando GetColor() con Enum.StudioStyleGuideColor enumeraciones.Esta función setColors() se ejecuta inmediatamente para sincronizar el tema de Studio, luego se conecta al evento ThemeChanged para detectar futuros cambios de tema.

testButton.Parent = testWidget

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in objects do
			-- Sincronizar color de fondo
			guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
			-- Sincronizar color de texto
			guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
		end
	end
	-- Ejecute la función 'setColors()' para sincronizar inicialmente los colores
	setColors()
	-- Conectar el evento 'Cambio de tema' a la función 'setColors()'
	settings().Studio.ThemeChanged:Connect(setColors)
end

-- Ejecute la función 'syncGuiColors()' para sincronizar los colores de los objetos proporcionados
syncGuiColors({testButton})

Personalizar cursores de ratón

Para mejorar la interacción esperada con los elementos de widget, puedes establecer cursores de sistema específicos de ratón a eventos de interfaz de usuario, como MouseEnter y MouseLeave.El siguiente código muestra cómo conectar una función a los eventos MouseEnter y MouseLeave de testButton para cambiar el cursor del mouse:

local function setCursor(cursorAsset)
	plugin:GetMouse().Icon = cursorAsset
end

testButton.MouseEnter:Connect(function()
	setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
	setCursor("")
end)

Consulte la siguiente tabla para obtener una lista de cursores de ratón y sus casos de uso potenciales:

Icono del cursor de ratón	Activos	Uso de caso
	rbxasset://SystemCursors/Arrow	Haga clic y seleccione por defecto.
	rbxasset://SystemCursors/PointingHand	Pase el mouse sobre un enlace/botón activo.
	rbxasset://SystemCursors/OpenHand	Pase el mouse sobre un objetoarrastrable.
	rbxasset://SystemCursors/ClosedHand	Arrastrar un objeto.
	rbxasset://SystemCursors/IBeam	Pase el mouse sobre un campo de texto.
	rbxasset://SystemCursors/SizeNS	Pase el cursor sobre un controladorde redimensión vertical.
	rbxasset://SystemCursors/SizeEW	Pase el cursor sobre un controladorde redimensión horizontal.
	rbxasset://SystemCursors/SizeNESW	Pase el cursor sobre un controladorde redimensión de esquina.
	rbxasset://SystemCursors/SizeNWSE	Pase el cursor sobre un controladorde redimensión de esquina.
	rbxasset://SystemCursors/SizeAll	Pase el mouse sobre un controladorde redimensión multidireccional.
	rbxasset://SystemCursors/SplitNS	Pase el controladorsobre un mango vertical "dividido".
	rbxasset://SystemCursors/SplitEW	Pase el mouse sobre un controlador"división" horizontal.
	rbxasset://SystemCursors/Forbidden	Pase el mouse sobre un objetobloqueado/prohibido.
	rbxasset://SystemCursors/Wait	Indicando que una acción está en curso.
	rbxasset://SystemCursors/Busy	Indicando que el sistema está ocupado.
	rbxasset://SystemCursors/Cross	Pase el mouse sobre una zona de selección precisa.

Reunir la entrada del usuario

Los elementos de interfaz de usuario como TextBox y TextButton funcionan normalmente en widgets de Studio, y puedes construir interfaces como lo harías normalmente en Roblox.Sin embargo, UserInputService y ContextActionService no funcionan porque estos servicios esperan que la ventana del juego principal esté en foco.

Una solución alternativa para eventos de entrada genéricos es crear una transparente Frame y superponerla sobre toda la pantalla.El siguiente ejemplo de código crea un marco, y cuando el usuario hace clic en el marco, el evento GuiObject.InputBegan captura la entrada del teclado en el marco hasta que el usuario haga clic en salir:

local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1  -- Esconder el marco
frame.Size = UDim2.new(1, 0, 1, 0)  -- Cubrir la pantalla
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget

local function onInputBegan(inputObject)
	-- Procesa el objeto de entrada aquí, por ejemplo, detecta presiones de tecla
end
frame.InputBegan:Connect(onInputBegan)

Interacción de arrastrar y soltar

El uso de interacciones de arrastrar y soltar para tus widgets es una manera sencilla de mejorar el flujo de datos.Para crear esta interacción, debes definir el elemento para arrastrar, iniciar el arrastre, crear un objetivo de soltura y procesar la acción de soltura.

Crear de origende arrastre

Puedes iniciar una acción de arrastrado llamando Plugin:StartDrag() cuando el usuario presiona un botón del mouse en algún elemento de interfaz de usuario, generalmente un TextButton o ImageButton dentro de un widget.El siguiente ejemplo de código crea un widget de ventana única con un botón de texto dentro de él.

-- Crea el widget primero
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"

-- Crea un botón de texto que iniciará el arrastre
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

Iniciar el arrastre

Cuando el usuario hace clic en el TextButton, puedes iniciar el arrastre a través del evento MouseButton1Down() que se activa tan pronto como el usuario presione el botón del mouse.

Dentro de la función conectada, determine los datos para arrastrar.El tipo de datos debe reflejarse en la clave , el contenido de la arrastrada debe reflejarse dentro de la clave , y el remitente debe describirse en la clave .Vea la página Plugin:StartDrag() para más detalles.

local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- Los datos que se arrastran
		MimeType = "text/plain",    -- Describe el tipo MIME de los datos
		Sender = "SomeDragSource",  -- Describe de dónde se originaron los datos
		MouseIcon = "",             -- Contenido de imagen para usar para el cursor
		DragIcon = "",              -- Contenido de imagen para renderizar debajo del cursor durante el arrastre
		HotSpot = Vector2.zero      -- Dónde en el DragIcon para centrar el cursor
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

Crear objetivo de caída

El evento PluginGui.PluginDragDropped se activa cuando el usuario suelta el mouse en una ventana durante un arrastre.Cuando esto ocurre, necesitas definir un objetivo de caída como un segundo widget con un TextLabel para detectar caídas.

local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Drop Target", widgetInfo)
dragTargetWidget.Title = "Drop Target"

-- Esta etiqueta de texto mostrará lo que se dejó caer
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Drop here..."
textLabel.Parent = dragTargetWidget

Procesar la acción de soltar

Después de crear un objetivo de goteo, conecte el evento PluginGui.PluginDragDropped en el widget objetivo de goteo:

local function onDragDrop(dragData)
	print("PluginDragDropped")
	if dragData.MimeType == "text/plain" then
		textLabel.Text = dragData.Data
	else
		textLabel.Text = dragData.MimeType
	end
end

dragTargetWidget.PluginDragDropped:Connect(onDragDrop)

Mientras un deslizamiento sigue en curso, estos tres eventos se disparan cuando el usuario mueve el mouse sobre un widget:

• PluginDragEntered – se activa cuando el usuario pasa el mouse sobre una ventana
• PluginDragMoved – se enciende repetidamente cuando el usuario mueve el mouse sobre una ventana. Esto es útil para mostrar un mensaje de "¡Deje caer aquí!"
• PluginDragLeft – se activa cuando el cursor del usuario deja una ventana. Esto es útil para ocultar un mensaje de "¡Deje caer aquí!"