Difference between revisions of "Changing the DOM"

Latest revision as of 22:08, 18 April 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.

Many example scenes modify the DOM if you need some working tips!

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 with the 'WorldUIHelper' script then grab the Document property:

// Get the local UI's document (.document in newer versions):
var document = GetComponent<WorldUIHelper>().Document;

If you 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.

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

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

Promise

Promise is a wonderful new standard Javascript object which can dramatically shrink the amount of code you need to write. PowerUI fully supports promise (as used by any language), and it's highly recommended you use it! Here's a modified snippet from the screen fading example scene which uses promise:

document.fade(Color.red, 2f).then(delegate(object o){
    
    // This happens after the screen has faded to red.
    // Run another fade now! Returning the promise avoids nesting:
    return document.fade(new Color(1f, 0f, 0f, 0f), 1f);
    
}).then(delegate(object o){
    
    // We're all done! This happens after the screen has faded to red, then back in.
    
});

You can find the fade method itself (which generates the promise objects) in ScreenFade.cs which is in that examples files.