Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

To see the example in the KitchenSink application, click on the Base UI tab, then navigate to Views > Images Views > Image File.

View

The view file declares the structure of the GUI. For example, the file below defines a window with an image and label.

Replace the contents of app/views/index.xml with the following:

Code Block
langxml
<Alloy>
	<Window>
		<ImageView id="imageView" onClick="clickImage"/>
		<Label id="l">Click Image of Apple Logo</Label>
	</Window>
</Alloy>

Style

The style file formats and styles the components in the view file declares the structure of the GUI.

Style

. For example, the style below defines the background color of the window; position, dimensions and color of the label; and position, dimensions and location of the image.

Replace the contents of app/styles/index.tss with the following:

Code Block
langcss
"Window": {
	backgroundColor:"white"
},
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
},
"#l":{
	bottom:20,
	width:'auto',
	height:'auto',
	color:'#999'
},
"#imageView":{
	image:"/images/apple_logo.jpg",
	width:24,
	height:24,
	top:100
}

Controller

The style controller file provides the styling to the components in the view file.

Controller

contains the presentation logic, which responds to input from the user. For example, the controller code below create an alert dialog when the user clicks on the image and opens the window when the application starts.

Replace the contents of app/controllers/index.js with the following:

Code Block
langjavascript
function clickImage(e) {
	Titanium.UI.createAlertDialog({title:'Image View', message:'You clicked me!'}).show();
}

$.index.open();

The controller file contains the presentation logic, which responds to input from the user.

Asset

Create a folder called app/asset/images and copy the apple_logo.jpg file from the KitchenSink project. This file will be copied to Resources/images/apple_logo.jpg by Alloy during the build process.

...