WebUI Quick Start¶

This sample code shows how to add a basic page using HTML+JavaScript with the new WebUI class.

Note

The following code runs on Client.

Inside your Package’s Client folder, create a new folder (optional) called UI to separate the UI files from the Scripting (lua) files:

Inside UI let’s create a simple HTML file index.html which you can write your own HTML code:

<html>
    <head>
    </head>
    <body>
        Hello World!
    </body>
</html>

In your Package’s Index.lua, create the WebUI:

-- Spawns a WebUI with the HTML file you just created
MyUI = WebUI("My UI", "file:///UI/index.html")

Result:

Adding Events and Callbacks to communicate with your Package¶

First, create a file index.js where we will put our JavaScript code.

And let’s modify our HTML to include our index.js file:

<html>
    <head>
        <script src="index.js"></script>
    </head>
    <body>
        Hello World!
    </body>
</html>

Let’s add some JavaScript code (into index.js) to communicate with your Package:

// Register for "MyAwesomeEvent" from Lua
Events.on("MyAwesomeEvent", function(param1) {
    console.log("Triggered! " + param1);

    // Triggers "MyAwesomeAnswer" on Lua
    Events.Call("MyAwesomeAnswer", "Hey there!");
})

Let’s modify our Lua code to add some handles for JS events:

-- Spawns a WebUI with the HTML file you just created
MyUI = WebUI("My UI", "file:///UI/index.html")

-- When the HTML is ready, triggers an Event in there
MyUI:on("Ready", function()
    MyUI:CallEvent("MyAwesomeEvent", {"Hello! You are ready!"})
end)

MyUI:on("MyAwesomeAnswer", function(param1)
    Package:Log("Received an answer! Message: " .. param1)
end)

Results (on console):¶

[WebUI] Triggered! Hello! You are ready!
[Script] Received an answer! Message: Hey there!