Javascript inside a Class

How-to Discussions
1

Hi!

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

<Panel>
  <Panel ux:Class="rndRect" Width="100" Height="100">
  <float4 ux:Property="BackgroundColor" />
  <JavaScript>
      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;

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

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?

Regards

Jonatan

2

Edit- Nvm miss read your code

3

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.