Hey guys,
because some of you guys have got some questions like: “I want to create an UI in Game to create a cool Login or whatever”, I decide to spend some time for you to write this Tutorial.
I’m not an English person so be gentle if I do some grammar mistakes 
!!!IMPORTEND!!!
This Tutorial is not for ppl who did not know what is scripting or for absolute beginners, because I’m not going into every detail!
So you need exp. in the following:
- LUA
- HTML
- CSS
- Javascript (or better jQuery)
- a lot JSON EXP is also good
Copyright
This Tutorial is based on @Eraknelo 's “UI with mouse input” (http://forum.fivereborn.com/topic/795/ui-with-mouse-input) every coding copyright is on his own!
Theoretical Stuff
The first thing you got to know is how the Native User Interface (NUI) works.
There is ALLWAYS! a simple communication between a client script and your UI, but what is the UI?
It is simple, very effective and it comes with a lot of functions!
I’m talking about HTML, CSS and and the powerful jQuery Lib (Javascript).
So basically the communication goes every time like this:
- Client Call a function to trigger UI functionality
- Client send via NUI an array of data (JSON) to a javascript
- Your Javascript file triggers a function which is triggered by your Clientscript (1. ; 2.)
- Your Javascript file send back a JSON array to your script
- (Optional) Your Client File now triggers a callback function and do what it has to do (maybe to handle Login Data, Register a Player, …)
Simple right?
Now let get started in detail
Check out the full files on GitHub :)
1.) Create your HTML File, JavaScript File and your CSS File
visit GitHub Repro for an Example
2.) Setup your __resource.lua
client_script('client/client.lua') --your NUI Lua File
ui_page('client/html/index.html') --THIS IS IMPORTENT
--[[The following is for the files which are need for you UI (like, pictures, the HTML file, css and so on) ]]--
files({
'client/html/index.html',
'client/html/script.js',
'client/html/style.css',
'client/html/cursor.png'
})
ui_page -> This is needed to tell your Resource where your UI is located (have to be inside your Resource!!!)
3.) Trigger a function from your client file
At first I introduce you a function: SendNUIMessage(JSON Array)
This function is necessary to send data in JSON Format to your Javascript File.
The Format is every time:
{
type = value,
type2 = value2,
...
}
“type” is a the name you later call use on your JavaScript File.
“value” could be everything like a boolean, a string, a number or something else
Look at this Example:
function EnableGui(enable)
...
SendNUIMessage({
type = "enableui",
enable = enable
})
end
4.) Handle your NUIMessage in your Javascript file
window.addEventListener is the Javascript function which is waiting for the JSON (NUIMessage)
Now take a look at the following line:
if (event.data.type == "enableui") {
event.data.type : This is the type you used before in your “NUIMessage”
- if your type name is hello, it looks like this event.data.
hello - if your type name is fivereborn, it looks like this event.data.
reborn
and so on.
The value is always the datatype you use like true, “World” or 1
Some Examples:
LUA:
SendNUIMessage({hello = "world"})
Javascript:
if (event.data.hello == "world") {
...
LUA:
SendNUIMessage({fivereborn = true})
Javascript:
if (event.data.fivereborn == true) {
...
5.) Send Back Data From Javascript
Now if you are done with whatever on UI Side, send back a result to your client file.
This has to be the same format like in SendNUIMessage but in case of = your simple need a : on UI Side
This looks like this
$.post('http://ui-mouse-example/event', JSON.stringify({
username: "Five",
password: "reborn"})
);
The http link is the destination where your NUI Callback is located in and is build like this:
http://YOUR_RESOURCE_NAME/YOUR_EVENT_NAME
6.) Handle the Event on Clientside
Now we are almost done the only thing we have to do is create a Callback Event.
This is done by a function called RegisterNUICallback(String eventName, function(data, callback))
data has the same format as the in point 4.) like data.username
And this looks like this:
RegisterNUICallback('YOUR_EVENT_NAME', function(data, cb)
-- Do something here
cb('ok')
end)
And that is how NUI works and I hope this is a great introduction for everyone of you who want to get started in NUI
If you’ve got question, feel free to ask
