6 - Using touch events (without TIGL Manager)

  • Unless you are doing a demo without interaction, at some point you will need user inputs. that's when come the TIGL view "touch" event, that you need to declare in your alloy tag (or add an event listener for classic apps)
  • Look at the code below to learn more.

    # myView.xml
    1
    2
    3
    4
    5
    6
    7
    <Alloy>
      <Window>
        <ActionBar/>
        <TIGLView module="fr.dzzd.tigl" onInit="init" onResize="resize" onLoop="loop" onTouch="touch" />
        <WebView/>
      </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
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    /*
     * Init must be declared as an attribute of the Alloy tag TIGLView (eg: onInit="init")
     */
    var spriteId;
    var spriteX;
    var spriteY;
    function init()
    {
    	/*
    	* For Alloy project, at runtime "assets" folder become "Resources" folder
    	*/
    	spriteId = this.addSprite({url: "Resources/dragme.png", px: 128, py: 170, touchEnabled: true});
    }
    /*
     * Resize must be declared as an attribute of the Alloy tag TIGLView (eg: onResize="resize")
     */
    function resize(e)
    {
    	/*
    	 * Set sprite positions to center
    	 */
        spriteX = e.width * 0.5;
        spriteY = e.height * 0.5;
    }
    
    /*
     * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
     */
    function loop()
    {
    	this.setEntityPositionById(spriteId, spriteX, spriteY);
    }
    
    /*
     * Initialise some value for dragging
     */
    var dragging = false;
    var dragStartX;
    var dragStartY;
    var dragStartPosX;
    var dragStartPosY;
    
    
    /*
     * Touch must be declared as an attribute of the Alloy tag TIGLView (eg: onTouch="touch")
     */
    function touch(e)
    {
    	var action = e.action;
    	var pointer = e.pointer;
    	var entityId = e.entityId;
    	var x = e.x;
    	var y = e.y;
    	var sceneX = e.sceneX;
        var sceneY = e.sceneY;
        
    	switch(action)
    	{
    		case "down" :
                if(entityId == spriteId)
                {
                    dragging = true;
                    dragStartX = sceneX;
                    dragStartY = sceneY;
                    dragStartPosX = spriteX;
                    dragStartPosY = spriteY;
                }
    		break;
    
    		case "move":
                if(dragging)
                {
                    spriteX = dragStartPosX + sceneX - dragStartX;
                    spriteY = dragStartPosY + sceneY - dragStartY;
                }
            break;
            
    		case "up":
                dragging = false;
    		break;
    	}
    }