open in new window

Demos : Resizable UI

Code:

<html>
<head>
     <script type="text/javascript" src="http://lib.ivank.net/ivank.js"></script>
     <script type="text/javascript" src="Button.js"></script>
     <script type="text/javascript">
          var stage, bg, main;
          
          function Start()
          {
               stage = new Stage("c");
               // when stage is resized, "resize" will be called
               stage.addEventListener(Event.RESIZE, resize); 
               
               bg = new Bitmap(new BitmapData("winter.jpg"));
               stage.addChild(bg);
               
               main = new Main();
               stage.addChild(main);
               
               resize();
          }
          
          function resize(e)
          {
               var w = stage.stageWidth, h = stage.stageHeight;
               bg.scaleX = w / 1024;  // spreading the bitmap across the stage
               bg.scaleY = h / 512; 
               
               var min = Math.min(w, h);
               main.scaleX = main.scaleY = min / 2000;
               main.x = (w-min) / 2;
               main.y = (h-min) / 2;
          }
          
          function Main()
          {
               Sprite.call(this);
               
               this.graphics.beginFill(0xffffff, 0.2);
               this.graphics.drawRect(0,0,2000,2000);
               
               // let's put all the content into a square 2000 x 2000 px
               var f1 = new TextFormat("sans-serif", 94, 0xffffff, true, false);
               f1.align = TextFormatAlign.JUSTIFY;
               
               var t1 = new TextField();  this.addChild(t1);  
               t1.width = 1800; t1.height = 800;    t1.x = t1.y = 100;
               t1.wordWrap = true;
               t1.setTextFormat(f1);
               t1.text = "The main content of the app can be inside this square, which is always centered and scaled "
               + "according to dimensions of the Stage.\nOpen it in a new window and try to resize it.";
               
               for(var i=0; i<5; i++)
               {
                    var b = new Button("My Option "+(i+1), 94);
                    this.addChild(b);
                    b.x = 700;  b.y = 900 + 200*i;
               }
          }
          Main.prototype = new Sprite();
     </script>
</head>
<body onload="Start();"><canvas id="c"></canvas></body>
</html>