Difference between revisions of "Changing the DOM"

Revision as of 02:04, 13 March 2017

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:

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

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:

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

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

// 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;

Using the document

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

// 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! */  };
}

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.