This document discusses different components of the Titanium mobile framework user interface. It covers layout types like absolute, horizontal, and vertical positioning. It provides an example of using tabs to create multiple windows within a tab group. It also demonstrates implementing a scrollview with content that can be scrolled and formatted using CSS styles. The document aims to recap key UI components like layout, tabs, and scroll views.

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

2. componentsui

3. layout
Absolute Horizontal Vertical

4. tabs
Index.xml :
<TabGroup>
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window title="Tab 1">
<Label> I am Window 1 </Label>
</Window>
</Tab>
<Tab title="Tab 2" icon="KS_nav_views.png">
<Window title="Tab 2">
<Label> I am Window 2 </Label>
</Window>
</Tab>
</TabGroup>

5. scrollview
Index.xml :
<Alloy>
<Windows>
<ScrollView id=‘list’>
<View id=‘background’>
<ImageView id=‘avatar’/>
<label>Hany</label>
</View>
</ScrollView>
</Windows>
</Alloy>

6. Index.tss :
‘#list’:{
height : Ti.UI.SIZE,
width : Ti.UI.SIZE,
layout : ’vertical’,
backgroundColor : ‘blue’
}
‘#background’:{
backgroundImage : ‘/images/row.png’,
width : ‘100%’,
hight : ‘20%’,
top : ‘5%’,
left : ‘5%’
}
‘#avatar’:{
image : ‘/images/Hany.png’,
width : ’20%’,
top : ‘5%’,
left : ‘65%’
}
‘label’:{
height : Ti.UI.SIZE
width : Ti.UI.SIZE
top : ‘10%’,
left : ‘35%’,
color : ‘white’,
font : {fontSize:18}
}
scrollview

7. Recap

8. ui
layout
Absolute Horizontal Vertical
Tabs
Scroll view

9. Any question ?

10. Thank you…