Tutorial Code - border not showing

I'm working my way through the basic tutorial. The 'Changing Content Appearance With Skins' section has an example that's supposed to add a border:

http://kinoma.com/develop/documentation/kinomajs-tutorials/containment-hierarchy/#the-kinomajs-containment-hierarchy-content-objects-changing-content-appearance-with-skins

var borderedSkin = new Skin({ fill: "#202020", borders:{left:5, right:5, top:5, bottom:5}, stroke: "#1ACC45" }); var borderedCon = new ScreenTemplate({ skin: borderedSkin }); application.add(borderedCon);

I copied and pasted this code into the IDE and ran it, but there's no border. Did I miss something?

Screenshot: http://i.imgur.com/CVR3jW5.png

Answers

  • Did you include the definition of ScreenTemplate?

    var ScreenTemplate = Container.template($ => ({ 
        left:0, right:0, top:0, bottom:0, 
        skin: $.skin,
    }));
    
    var borderedSkin = new Skin({ fill: "#202020", borders:{left:5, right:5, top:5, bottom:5}, stroke: "#1ACC45" });
    var borderedCon = new ScreenTemplate({ skin: borderedSkin }); 
    application.add(borderedCon);
    

    This code works as expected for me. Here's my screenshot:

    bordered container

  • No, i didn't have that included. Why didn't it fail, being unable to find an object called ScreenTemplate? I would have expected it to let me know it wasn't defined.

  • That is strange that it didn't fail--when I remove the definition it does (screenshot here). Are you using Kinoma Code or Kinoma Studio?

  • Kinoma Code. I think i might have had the console minimized! Sorry, n00b mistake. I saw the screen go dark and assumed it was kind of working...

Sign In or Register to comment.