This document discusses creating a scrollable view in Alloy and controlling it using JavaScript. It includes code snippets for creating the scrollable view in Index.xml, styling it in Index.tss, defining variables and functions in the controller file, and using animations and 2D matrix transformations to control elements. The animations can be applied to properties like height, width, position and transform using properties like duration, delay, repeat and autoreverse.

1. Slides made by / Abd El-star Ahmed & Hany Mohamed

2. The task

3. scrollable view
Index.xml :
<Alloy>
<Window>
<ScrollableView id=‘list’>
<View id=‘background’>
<ImageView id=‘avatar’/>
<label>Welcome in SCCI</label>
</View>
</ScrollableView>
</Window>
</Alloy>

4. scrollable view
Index.tss :
‘#list’:{
height : Ti.UI.FILL,
width : Ti.UI.SIZE,
layout : ’Horizontal’ ,
backgroundColor : ‘blue’
}
}

5. Controller file

6. variable var X=5 ;
function
function Say_welcome () {
alert(“ Welcome”);
}
controller
Controlling
objectives
<ImageView id=“avatar” />
$.avatar.left=5;

7. The animation

8. animation
Var animation= Ti.UI.createAnimation({
. });
height : Ti.UI.FILL,
width : Ti.UI.SIZE,
right : “20%” ,
left : 5 ,
top : “50 px” ,
bottom : “2 cm” ,}
repeat : 6, (number)
delay : 1000 , ms ( 1000 ms= 1 s)
duration : 1000 , ms
autoreverse : true / false ,
transform : Ti.UI.2DMatrix ,

9. The 2d matrix

10. 2d matrix
Var Matrix= Ti.UI.create2DMatrix ( );
Matrix.translate { (X,Y);
(from X, from Y, to X, to Y);
Matrix.rotate { (angle);
(from angle, to angle);
Matrix.scale (X,Y);

11. Let’s code

12. The recap

13. Ui&
controller
Controller
var function $
Animation 2D Matrix
Scrollable view

14. Any question ?

15. Thank you…