Appsplash'16 session (4) "Ui components & controller"

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

Transcript of Appsplash'16 session (4) "Ui components & controller"

Page 1: Appsplash'16 session (4) "Ui components & controller"

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

Page 2: Appsplash'16 session (4) "Ui components & controller"

The task

Page 3: Appsplash'16 session (4) "Ui components & controller"

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"

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"

Controller file

Page 6: Appsplash'16 session (4) "Ui components & controller"

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"

The animatio

n

Page 8: Appsplash'16 session (4) "Ui components & controller"

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"

The 2d matrix

Page 10: Appsplash'16 session (4) "Ui components & controller"

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"

Let’s code

Page 12: Appsplash'16 session (4) "Ui components & controller"

The recap

Page 13: Appsplash'16 session (4) "Ui components & controller"

Ui & controller

Controller

var function $

Animation 2D Matrix

Scrollable view

Page 14: Appsplash'16 session (4) "Ui components & controller"

Any question

?

Page 15: Appsplash'16 session (4) "Ui components & controller"

Thank you …