Changing the DOM - Revision history

151.229.136.200: /* Accessing the document */

2017-04-18T22:08:10Z

‎Accessing the document

188.222.158.94 at 02:14, 13 March 2017

2017-03-13T02:14:47Z

188.222.158.94 at 02:11, 13 March 2017

2017-03-13T02:11:19Z

188.222.158.94: Created page with "PowerUI is completely dynamic and you can do anything PowerUI can at runtime (after all, PowerUI is entirely written in C#!) It has a standardised DOM which is exposed to C#/..."

2017-03-13T02:04:42Z

Created page with "PowerUI is completely dynamic and you can do anything PowerUI can at runtime (after all, PowerUI is entirely written in C#!) It has a standardised DOM which is exposed to C#/..."

New page

PowerUI is completely dynamic and you can do anything PowerUI can at runtime (after all, PowerUI is entirely written in C#!) It has a standardised DOM which is exposed to C#/ UnityJS/ Boo and a custom Javascript-like language called Nitro which can all modify the DOM.

PowerUI is multi-threading friendly too so you can, for example, update your UI from a networking thread without any concerns.

== Accessing the document ==

For those of you who use Javascript, the API will be very familiar. The first thing your code will need to do however is get hold of the document. If you want the main UI's document, that's simply like this:

<syntaxhighlight lang="csharp">

// Get the main UI's document:
var document = UI.document;

</syntaxhighlight>

If you're using a WorldUI, or have PowerUI embedded in UnityUI and your script is also a component of the same GameObject then you'll want to access the Document property of the HtmlUIBase component:

<syntaxhighlight lang="csharp">

// Get the local UI's document:
var document = GetComponent<HtmlUIBase>().document;

</syntaxhighlight>

If you have a FlatWorldUI object or the actual WorldUI object, it's just the document property on those:

<syntaxhighlight lang="csharp">

// Create a flat WorldUI (basically render HTML to an image):
var myFlatWorldUI = new FlatWorldUI(gameObject.name, 100, 100);

// Get the FWUI's document:
var document = myFlatWorldUI.document;

</syntaxhighlight>

== Using the document ==

Once you have the document, everything becomes extremely familiar. Here's a quick example:

<syntaxhighlight lang="csharp">

// Get all h1 elements:
var allH1 = document.getElementsByTagName("h1");

// for each one..
foreach(var h1 in allH1){

// Change its font colour:
h1.style.color="red";

// Add a mousedown listener:
h1.addEventListener("mousedown",delegate(MouseEvent e){

// Got a mousedown!
Debug.Log("Clicked on "+e.target+" at "+e.clientX+", "+e.clientY);

});

// Common event aliases are supported too:
// h1.onmousedown = delegate(MouseEvent e){ /* Same as above! */ };
}

</syntaxhighlight>

You can navigate the entire document if you want (document.location), change innerHTML etc - the Web API's are currently very broad and always growing! PowerUI is also very liberal with its internal interfaces too so you can also get right under the hood and call something that might not normally be exposed.

← Older revision		Revision as of 02:14, 13 March 2017
Line 67:		Line 67:

	You can navigate the entire document if you want (document.location), change innerHTML etc - the Web API's are currently very broad and always growing! PowerUI is also very liberal with its internal interfaces too so you can also get right under the hood and call something that might not normally be exposed.		You can navigate the entire document if you want (document.location), change innerHTML etc - the Web API's are currently very broad and always growing! PowerUI is also very liberal with its internal interfaces too so you can also get right under the hood and call something that might not normally be exposed.
		+
		+	== Creating elements ==
		+
		+	To create elements you can, for example, change innerHTML or use createElement ''(We're not kidding when we say the interface is standardised!)'':
		+
		+	<syntaxhighlight lang="csharp">
		+
		+	// (This is actually considered to be C#)
		+
		+	// Create a DIV:
		+	var myDiv = document.createElement("div");
		+
		+	// Using both API's here! Set innerHTML:
		+	myDiv.innerHTML = "Hello dynamic world!";
		+
		+	// Add it to the document:
		+	document.body.appendChild(myDiv);
		+
		+	</syntaxhighlight>

	== Promise ==		== Promise ==

@@ Line 16: / Line 16: @@
 </syntaxhighlight>
-If you're using a WorldUI, or have PowerUI embedded in UnityUI and your script is also a component of the same GameObject then you'll want to access the Document property of the HtmlUIBase component:
+If you're using a WorldUI with the 'WorldUIHelper' script then grab the Document property:
 <syntaxhighlight lang="csharp">

@@ Line 2: / Line 2: @@
 PowerUI is multi-threading friendly too so you can, for example, update your UI from a networking thread without any concerns.
 == Accessing the document ==
@@ Line 65: / Line 67: @@
 You can navigate the entire document if you want (document.location), change innerHTML etc - the Web API's are currently very broad and always growing! PowerUI is also very liberal with its internal interfaces too so you can also get right under the hood and call something that might not normally be exposed.