Javascript inside a Class


I’m triying to create a component that is simply a rectangle that random changes the color every seccond. This is my code:

  <Panel ux:Class="rndRect" Width="100" Height="100">
  <float4 ux:Property="BackgroundColor" />
      var randomBg = function(){
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        return color;

      var Observable = require('FuseJS/Observable');
      var Timer = require("FuseJS/Timer");
      Background =  new Observable(randomBg());
      console.log("Hey Ho");
      Timer.create(function() {
          Background.value =  randomBg();
          console.log("Lets go");
          this.BackgroundColor = Background;
      }, 1000, true);
      this.BackgroundColor = Background;

  <Rectangle Layer="Background" Width="100" Height="100" Color="{Property this.BackgroundColor}" />

But it dont work. Not even the console.log lines. Obviously i’m doing something wrong, but still can’t figure out what. Any idea?



Edit- Nvm miss read your code

Hi, your <Panel ux:Class="rndRect" Width="100" Height="100"> just creates a definition for the rndRect class. Since you never actually use this class anywhere, the code inside it isn’t run.

Try adding for instance <rndRect/> right between the two </Panel> tags at the end of your ux document, and you’ll see the code running.