Nui basic example

Intro

Here is a basic example of a small NUI Window.

1. Create a new file called : `nui_example.nss` using contents below.

2. Then Setup OnNuiEvent as such:

#include "nui_example"
	void main()
	{
		object oPlayer = NuiGetEventPlayer();
		int nToken	   = NuiGetEventWindow();
		string sEvent  = NuiGetEventType();
		string sElement   = NuiGetEventElement();
		int nIndex	   = NuiGetEventArrayIndex();
		string sWindowId  = NuiGetWindowId(oPlayer, nToken);

		if (sWindowId == NUIEXAMPLE_WINDOW_ID)
		{
			NUIExample_Events();
			return;
		}
	}

3. Finally you need to call ```NUIExample_NewWindow(oPlayer);``` from something. This could be an Item's Unique Power, or Placeable a OnUsed Event, etc.

You should hopefully see your new window now:

Code

"nui_example.nss"

#include "nw_inc_nui"

// This is our window id, it's used to differentiate between NUI Windows
const string NUIEXAMPLE_WINDOW_ID = "nui_example";

// This creates our new window.  You can call this from anywhere.
// Examples would be: Module (item) OnActivateItem, Placeable OnUsed, Module OnPlayerChat, etc.
void NUIExample_NewWindow(object oPlayer);


// This will refresh data on window.
// This depends on application, but should be called anytime you think the state has changed.
void NUIExample_Update(object oPlayer, int nToken = -1);

// This handles events.
// This should be called from OnNuiEvent
// https://nwnlexicon.com/index.php?title=OnNuiEvent
/* Example:
	#include "nui_example"
	void main()
	{
		object oPlayer = NuiGetEventPlayer();
		int nToken	   = NuiGetEventWindow();
		string sEvent  = NuiGetEventType();
		string sElement   = NuiGetEventElement();
		int nIndex	   = NuiGetEventArrayIndex();
		string sWindowId  = NuiGetWindowId(oPlayer, nToken);

		if (sWindowId == NUIEXAMPLE_WINDOW_ID)
		{
			NUIExample_Events();
			return;
		}
	}
*/
void NUIExample_Events();


// Helper function for debugging.
// Log it however you want.
void LogMessage(string sMessage)
{
	// WriteTimestampedLogEntry(sMessage);
	SendMessageToPC(GetFirstPC(), sMessage);
}

void NUIExample_Events()
{
	// Get all our inputs.
	object oPlayer	 = NuiGetEventPlayer();
	int nToken		 = NuiGetEventWindow();
	string sEvent	 = NuiGetEventType();
	string sElement	 = NuiGetEventElement();
	int nIndex		 = NuiGetEventArrayIndex();
	string sWindowId = NuiGetWindowId(oPlayer, nToken);

	// Not our window!
	if (sWindowId != NUIEXAMPLE_WINDOW_ID)
	{
		LogMessage("NUIExample_Events called for wrong window, expecting: " + NUIEXAMPLE_WINDOW_ID + " but got: " + sWindowId);
		return;
	}

	// If events aren't working, log what is going on.
	// If you don't see a bunch of stuff, then likly it's not being called from OnNuiEvent correctly.
	// LogMessage("NUIExample: sElement: " + sElement + " sEvent: " + sEvent);

	// Here is all our events, we need to sort out what to do, depending on Event and Element.

	switch (HashString(sEvent))
	{
		case ("blur"):
		{
		}
		break;
		case ("click"):
		{
		}
		break;
		case ("close"):
		{
		}
		break;
		case ("focus"):
		{
		}
		break;
		case ("mousedown"):
		{
		}
		break;
		case ("mousescroll"):
		{
		}
		break;
		case ("mouseup"):
		{
			// Yikes, switch inside a switch.
			// But this filters Event mouseup by Element with these Ids (in this case, buttons mostly)
			// Ie, when a user is done clicking a button, process what to do for that button type.
			switch (HashString(sElement))
			{
				case ("buttonUpdate"):
				{
					// They want to call an update.
					NUIExample_Update(oPlayer, nToken);
					return;
				}
				break;
				case ("buttonCancel"):
				{
					// They want to close a window.
					NuiDestroy(oPlayer, nToken);
					return;
				}
				break;
			}
		}
		break;
		case ("open"):
		{
		}
		break;
		case ("range"):
		{
		}
		break;
		case ("watch"):
		{
		}
		break;
		default:
		{
			LogMessage("NUIExample: Unknown event occured: " + sEvent + " Element: " + sElement);
		}
		break;
	}
}


void NUIExample_Update(object oPlayer, int nToken = -1)
{
	// If caller doesn't have our token, be nice and look it up for them.
	if (nToken == -1)
	{
		nToken = NuiFindWindow(oPlayer, NUIEXAMPLE_WINDOW_ID);
	}

	// Window isn't open, so let's not spend time processing updates.
	if (nToken == 0)
	{
		return;
	}


	// This is our only update for now.
	// For Nui Id "labelMain" it will update it's value with a random number between 1 and 100.
	NuiSetBind(oPlayer, nToken, "labelMain", JsonString(IntToString(Random(100) + 1)));
}

void NUIExample_NewWindow(object oPlayer)
{
	// This checks if window is already open.  If so, we want to close it and create a new one.
	// You CAN have multiple windows of same time, but most use cases if you just want one instance?
	int nToken = NuiFindWindow(oPlayer, NUIEXAMPLE_WINDOW_ID);
	if (nToken != 0)
	{
		NuiDestroy(oPlayer, nToken);
	}


	/////////////////////////////////////////
	// Build the main root pane here
	/////////////////////////////////////////

	// This is going to be our entire window that is passed into NuiWindow.
	json jRoot = JsonArray();


	json jRow;
	// Build the first row
	{
		// Create an array to hold our first row.
		jRow = JsonArray();

		// Create a label, notice it uses bind "labelMain", instead of static value.
		json jLabelMain = NuiLabel(NuiBind("labelMain"), JsonInt(NUI_HALIGN_CENTER), JsonInt(NUI_VALIGN_MIDDLE));


		// Add our label to the row
		jRow = JsonArrayInsert(jRow, jLabelMain);

		// Apply a Layout too it (you can't have widgets hanging about, outside of layout groups)
		jRow = NuiRow(jRow);

		// Finally we add our finalize row to our main root window.
		jRoot = JsonArrayInsert(jRoot, jRow);
	}

	// Build the second row
	{
		// Same as before, start with a fresh array to hold our row data.
		jRow = JsonArray();

		// Make two buttons.
		// Notice they have NuiId!  If you want to capture events on widgets they MUST have an ID
		json jButtonUpdate = NuiId(NuiButton(JsonString("Update")), "buttonUpdate");
		json jButtonCancel = NuiId(NuiButton(JsonString("cancel")), "buttonCancel");


		// Same as first row, but we goign to add a spacer, then both buttons.
		jRow = JsonArrayInsert(jRow, NuiSpacer());
		jRow = JsonArrayInsert(jRow, jButtonUpdate);
		jRow = JsonArrayInsert(jRow, jButtonCancel);


		// again, wrap all the widgets up in a nice group layout.
		jRow = NuiRow(jRow);
		// then add to main root
		jRoot = JsonArrayInsert(jRoot, jRow);
	}


	///////////////////////////////////////////
	// Build final group
	///////////////////////////////////////////

	// Again, needs a group layout, his is just one big column for window (with 2 rows inside it)
	jRoot = NuiCol(jRoot);

	/////////////////////////////////////////
	// Create new window here
	/////////////////////////////////////////

	// Creates new window and gets token.
	json jNuiWindow = NuiWindow(jRoot, NuiBind("windowtitle"), NuiBind("geometry"), NuiBind("resizable"), NuiBind("collapsed"), NuiBind("closable"), NuiBind("transparent"), NuiBind("border"), JsonBool(TRUE));
	nToken			= NuiCreate(oPlayer, jNuiWindow, NUIEXAMPLE_WINDOW_ID);

	// Good example of how to use bings. "windowtitle" is just a place holder.  We want to update it here.
	NuiSetBind(oPlayer, nToken, "windowtitle", JsonString("NUI Example"));

	// x, y, width, height.
	// -1.0f, -1.0f, means to "center" the new NUI Window.  Otherwise you can manually place it were you wish.
	NuiSetBind(oPlayer, nToken, "geometry", NuiRect(-1.0f, -1.0f, 512.0f, 512.0f));

	NuiSetBind(oPlayer, nToken, "collapsed", JsonBool(FALSE));
	NuiSetBind(oPlayer, nToken, "resizable", JsonBool(TRUE));
	NuiSetBind(oPlayer, nToken, "closable", JsonBool(TRUE));
	NuiSetBind(oPlayer, nToken, "transparent", JsonBool(FALSE));
	NuiSetBind(oPlayer, nToken, "border", JsonBool(TRUE));

	// Refesh the data after window is made.
	NUIExample_Update(oPlayer);
}