Shopping Cart
FiveM script 11abac85b780a6bfb422bb414511bacab31e72a7

[How-To] Use NUI (UI Creation with HTML) – Modding Tutorials

[ad_1]

FiveM Modding Tutorial

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 :wink:


!!!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 :slight_smile:

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:

  1. Client Call a function to trigger UI functionality
  2. Client send via NUI an array of data (JSON) to a javascript
  3. Your Javascript file triggers a function which is triggered by your Clientscript (1. ; 2.)
  4. Your Javascript file send back a JSON array to your script
  5. (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 :slight_smile:

If you’ve got question, feel free to ask :slight_smile:

[ad_2]

Original source: https://forum.cfx.re/t/how-to-use-nui-ui-creation-with-html/1127

Leave a Reply
FiveM ESX Scripts

The best scripts and maps

Best support

Problems? We are there to help!

Wide range of products

We have a wide range of products

100% Secure Checkout

Stripe