# 9 - Hierarchy

- You can create more complex entities by using hierarchy by composing entities from differents parts.
- As an example, this tutorial show how to attach two wheels to a car.
  # myView.xml

      1
      2
      3
      4
      5
      <Alloy>
        <Window>
          <TIGLView module="fr.dzzd.tigl" onInit="init" onResize="resize" onLoop="loop"/>
        </Window>
      </Alloy>

  # myView.js

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      /*
       * Import TIGL manager
       */
      const TIGLManager = require("tiglmanager");

      /*
       * Some globals vars
       */
      var tm;
      var car;
      var wheel1;
      var wheel2;
      var width;
      var height;

      /*
       * Init must be declared as an attribute of the Alloy tag TIGLView (eg: onInit="init")
       */
      function init()
      {
          /*
           * Create and initialise TIGL manager
           */
          tm = new TIGLManager(this);
          car = tm.addSprite({url: "Resources/car.png", px: 256, py: 100});
          wheel1 = tm.addSprite({url: "Resources/wheel.png", px: 40, py: 40, x: 123, y:153});
          wheel2 = tm.addSprite({url: "Resources/wheel.png", px: 40, py: 40, x: 430, y:153});

          /*
           * Set wheels as childs of car
           */
          wheel1.parent = car;
          wheel2.parent = car;
      }

      /*
       * Resize must be declared as an attribute of the Alloy tag TIGLView (eg: onResize="resize")
       */
      function resize(e)
      {
          width = e.width;
          height = e.height;
          car.x = width /2;
          car.y = height /2;
      }

      /*
       * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
       */
      function loop()
      {
          /*
           * Rotate wheels
           */
          wheel1.r = wheel2.r = Date.now() * 0.5;

          /*
           * Rotate car
           */
          car.r = 10*Math.sin(Date.now() * 0.001);
      }