appsplash'16 session (4) "ui components & controller"
TRANSCRIPT
![Page 1: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/1.jpg)
Slides made by / Abd El-star Ahmed & Hany Mohamed
![Page 2: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/2.jpg)
The task
![Page 3: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/3.jpg)
scrollable viewIndex.xml :
<Alloy> <Window> <ScrollableView id=‘list’> <View id=‘background’> <ImageView id=‘avatar’/> <label>Welcome in SCCI</label> </View> </ScrollableView> </Window></Alloy>
![Page 4: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/4.jpg)
scrollable viewIndex.tss :
‘#list’:{
height : Ti.UI.FILL,
width : Ti.UI.SIZE,
layout : ’Horizontal’ ,
backgroundColor : ‘blue’
}
}
![Page 5: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/5.jpg)
Controller file
![Page 6: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/6.jpg)
variable
var X=5 ;
function
function Say_welcome () { alert(“ Welcome”);}
controllerControlli
ng objectiv
es
<ImageView id=“avatar” />$.avatar.left=5;
![Page 7: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/7.jpg)
The animatio
n
![Page 8: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/8.jpg)
animationVar 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 ,
![Page 9: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/9.jpg)
The 2d matrix
![Page 10: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/10.jpg)
2d matrixVar 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);
![Page 11: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/11.jpg)
Let’s code
![Page 12: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/12.jpg)
The recap
![Page 13: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/13.jpg)
Ui & controller
Controller
var function $
Animation 2D Matrix
Scrollable view
![Page 14: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/14.jpg)
Any question
?
![Page 15: Appsplash'16 session (4) "Ui components & controller"](https://reader035.vdocuments.mx/reader035/viewer/2022062902/58edc75c1a28ab9f728b466b/html5/thumbnails/15.jpg)
Thank you …