112 lines
3.1 KiB
Lua
112 lines
3.1 KiB
Lua
local basalt = require("basalt")
|
|
|
|
-- Create main frame
|
|
local main = basalt.getMainFrame()
|
|
|
|
-- Create a complex form using states for managing its data
|
|
local form = main:addFrame()
|
|
:setSize("{parent.width - 4}", "{parent.height - 4}")
|
|
:setPosition(3, 3)
|
|
:setBackground(colors.lightGray)
|
|
-- Initialize form states with default values
|
|
:initializeState("username", "", true) -- true = triggers render update
|
|
:initializeState("email", "")
|
|
:initializeState("age", 0)
|
|
:initializeState("submitted", false)
|
|
-- Add computed state for form validation
|
|
:computed("isValid", function(self)
|
|
local username = self:getState("username")
|
|
local email = self:getState("email")
|
|
local age = self:getState("age")
|
|
return #username > 0 and email:match(".+@.+") and age > 0
|
|
end)
|
|
|
|
-- Create form title
|
|
form:addLabel()
|
|
:setText("Registration Form")
|
|
:setPosition(2, 2)
|
|
:setForeground(colors.black)
|
|
|
|
-- Username input with state binding
|
|
local usernameInput = form:addInput()
|
|
:setPosition(2, 4)
|
|
:setSize(20, 1)
|
|
:setBackground(colors.white)
|
|
:setForeground(colors.black)
|
|
-- Update username state when input changes
|
|
:onChange(function(self, value)
|
|
form:setState("username", value)
|
|
end)
|
|
|
|
form:addLabel()
|
|
:setText("Username:")
|
|
:setPosition(2, 3)
|
|
:setForeground(colors.black)
|
|
|
|
-- Email input
|
|
local emailInput = form:addInput()
|
|
:setPosition(2, 6)
|
|
:setSize(20, 1)
|
|
:setBackground(colors.white)
|
|
:setForeground(colors.black)
|
|
:onChange(function(self, value)
|
|
form:setState("email", value)
|
|
end)
|
|
|
|
form:addLabel()
|
|
:setText("Email:")
|
|
:setPosition(2, 5)
|
|
:setForeground(colors.black)
|
|
|
|
-- Age input
|
|
local ageInput = form:addInput()
|
|
:setPosition(2, 8)
|
|
:setSize(5, 1)
|
|
:setBackground(colors.white)
|
|
:setForeground(colors.black)
|
|
:onChange(function(self, value)
|
|
-- Convert to number and update state
|
|
form:setState("age", tonumber(value) or 0)
|
|
end)
|
|
|
|
form:addLabel()
|
|
:setText("Age:")
|
|
:setPosition(2, 7)
|
|
:setForeground(colors.black)
|
|
|
|
-- Submit button that reacts to form validity
|
|
local submitBtn = form:addButton()
|
|
:setPosition(2, 10)
|
|
:setSize(10, 1)
|
|
:setText("Submit")
|
|
-- Button color changes based on form validity
|
|
:onStateChange("isValid", function(self, isValid)
|
|
submitBtn:setBackground(isValid and colors.lime or colors.gray)
|
|
end)
|
|
:onMouseClick(function()
|
|
if form.computedStates.isValid() then
|
|
form:setState("submitted", true)
|
|
end
|
|
end)
|
|
|
|
-- Status message that updates when form is submitted
|
|
local statusLabel = form:addLabel()
|
|
:setPosition(2, 12)
|
|
:setForeground(colors.black)
|
|
|
|
-- Listen for form submission
|
|
form:onStateChange("submitted", function(self, submitted)
|
|
if submitted then
|
|
local username = self:getState("username")
|
|
local email = self:getState("email")
|
|
local age = self:getState("age")
|
|
statusLabel:setText(string.format(
|
|
"Submitted: %s (%s) - Age: %d",
|
|
username, email, age
|
|
))
|
|
end
|
|
end)
|
|
|
|
-- Run basalt
|
|
basalt.run()
|