Titanium Mobile: API Reference
Titanium Mobile: API Reference
Titanium.UI.View Class
API October 6, 2010
Appcelerator Titanium API Reference
Copyright © 2010 Appcelerator, Inc. All rights reserved. Appcelerator, Inc. 444 Castro Street, Suite 818, Mountain View, California 94041
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, mechanical, electronic, photocopying, recording, or otherwise, without prior written permission of Appcelerator, Inc., with the following exceptions: Any person is hereby authorized to store documentation on a single computer for personal use only and to print copies of documentation for personal use provided that the documentation contains Appcelerator's copyright notice. The Appcelerator name and logo are registered trademarks of Appcelerator, Inc. Appcelerator Titanium is a trademark of Appcelerator, Inc. All other trademarks are the property of their respective owners. No licenses, express or implied, are granted with respect to any of the technology described in this document. Appcelerator retains all intellectual property rights associated with the technology described in this document. Every effort has been made to ensure that the information in this document is accurate. Appcelerator is not responsible for typographical or technical errors. Even though Appcelerator has reviewed this document, APPCELERATOR MAKES NO WARRANTY OR REPRESENTATION, EITHER EXPRESS OR IMPLIED, WITH RESPECT TO THIS DOCUMENT, ITS QUALITY, ACCURACY, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE. AS A RESULT, THIS DOCUMENT IS PROVIDED "AS IS," AND YOU, THE READER, ARE ASSUMING THE ENTIRE RISK AS TO ITS QUALITY AND ACCURACY. IN NO EVENT WILL APPCELERATOR BE LIABLE FOR DIRECT, INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES RESULTING FROM ANY DEFECT OR INACCURACY IN THIS DOCUMENT, even if advised of the possibility of such damages. THE WARRANTY AND REMEDIES SET FORTH ABOVE ARE EXCLUSIVE AND IN LIEU OF ALL OTHERS, ORAL OR WRITTEN, EXPRESS OR IMPLIED. No Appcelerator dealer, agent, or employee is authorized to make any modification, extension, or addition to this warranty. Some states do not allow the exclusion or limitation of implied warranties or liability for incidental or consequential damages, so the above limitation or exclusion may not apply to you. This warranty gives you specific legal rights, and you may also have other rights which vary from state to state.
2
API, 10/6/10
Appcelerator Titanium API Reference
Contents
Contents Overview ...................................................................................................................... 5 Titanium.UI.View Class ............................................................................................... 6 Instance Methods Summary ......................................................................................................6 Object Properties ....................................................................................................................... 6 Events ........................................................................................................................................ 7 Event Properties ........................................................................................................................ 7 Methods ..................................................................................................................................... 8
Example Programs ................................................................................................... 12 Generic Use of View ................................................................................................................ 12 Single Image View ................................................................................................................... 13 Two Image View ....................................................................................................................... 14 Two Image Manipulation Game ............................................................................................... 16
API, 10/6/10
3
Contents
4
Appcelerator Titanium API Reference
API, 10/6/10
Appcelerator Titanium API Reference
Overview
Overview A View object is created by Titanium.UI.createView and represents a generalized drawing surface or container. Many other Titanium classes are subclasses of View, including among others TableView, ImageView, Label, Button. Although these classes are specialized for different types of display elements, they all share some similarities. For example, you'll notice some overlap among instance methods, object properties, events and event properties. You can use a View in a very general way. Even if you're planning to use a TableView, ImageView, or another subclass of View, it's helpful to understand the functionality available with the generic View class. You can think of views as being arranged in a vertical stack, like papers on a desk. In general, the topmost view will be displayed, possibly obscuring views below it. For example, if you have two views arranged side-bysize, they would both be visible. However, if one view partially overlaps the other, then it's the topmost view that will be fully visible; the other view(s) would be partly blocked. You can use the zIndex property to arrange multiple views within this conceptual vertical stack. The view with the highest zIndex will be topmost. If you don't explicitly specify the zIndex, then Titanium assumes zIndex to be 0. For views with the same zIndex value, the most recently added one will be topmost.
API, 10/6/10
5
Appcelerator Titanium API Reference
Titanium.UI.View Class
Titanium.UI.View Class The View is an empty drawing surface or container. The View is created by the Titanium.UI.createView method.
Instance Methods Summary Name
Description
add
add a child to the view hierarchy
addEventListener
add an event listener for the instance to receive view triggered events
animate
animate the view
fireEvent
fire a synthesized event to the views listener
hide
hide the view
remove
remove a previously added view from the view hiearchy
removeEventListener
remove a previously added event listener
show
make the view visible
toImage
return a Blob image of the rendered view
Object Properties Name
Type
Description
anchorPoint
object
A dictionary with properties x and y to indicate the anchor point value. Anchor specifies the position by which animation should occur. Center is 0.5, 0.5.
animatedCenterPoint
object
read-only object with x and y properties of where the view is during animation
backgroundColor
string
the background color of the table view
backgroundGradient
object
a background gradient for the view with the properties: type,startPoint,endPoint,startRadius,endRadius,backfillStart,backfillEnd,colors.
backgroundImage
string
the background image to render in the background of the table view
borderColor
string
the border color of the view
borderRadius
float
the border radius of the view
borderWidth
float
the border width of the view
bottom
float, string
Property for the view bottom position. This position is relative to the views parent. can be either a float value or a string of the width.
center
object
a dictionary with properties x and y to indicate the center of the views position relative to the parent view
height
float, string
Property for the view height. Can be either float value or a string of the width.
left
float, string
Property for the view left position. This position is relative to the views parent. can be either a float value or a string of the width.
opacity
float
the opacity from 0.0-1.0
right
float, string
Property for the view right position. This position is relative to the views parent. Can be either a float value or a string of the width.
size
object
the size of the view as a dictionary of width and height properties
top
float, string
Property for the view top position. This position is relative to the views parent. Can be either a float value or a string of the width.
touchEnabled
boolean
a boolean indicating if the view should receive touch events (true, default) or forward them to peers (false)
transform
object
the transformation matrix to apply to the view
visible
boolean
a boolean of the visibility of the view
6
API, 10/6/10
Appcelerator Titanium API Reference
Name
Titanium.UI.View Class
Type
Description
width
float,string
Property for the view width. Can either be `auto`, a float value or a string of the width.
zIndex
int
the z index position relative to other sibling views; largest is topmost
Events Event properties provide detail about the specific event. Note that not all properties apply to every event type. Event Type click dblclick doubletap singletap swipe touchcancel touchend touchmove touchstart twofingertap
When fired fired when the device detects a click (longer than touch) against the view the device detects a double click against the view the device detects a double tap against the view the device detects a single tap against the view the device detects a swipe (left or right) against the view a touch event is interrupted by the device (for example, in circumstances such as an incoming call to allow the UI to clean up state) a touch event is completed as soon as the device detects movement of a touch; event coordinates are always relative to the view in which the initial touch occurred as soon as the device detects a gesture the device detects a two-finger tap against the view
Event Properties Event
Description
Triggered Event Types
direction
direction of the swipe - either left or right
globalPoint
a dictionary with properties x and y describing the point of the all event in screen coordinates
source
the source object that fired the event
all
type
the name of the event fired
all
x
the x point of the event, in receiving view coordinates
all
y
the y point of the event, in receiving view coordinates
all
API, 10/6/10
swipe
7
Appcelerator Titanium API Reference
Titanium.UI.View Class
Methods
add Add a child to the view hierarchy. Arguments Name
view
Type
object
Description the view to add to this views hiearchy
Returns void Example myView.add(anotherView); myView.add(myTableView);
addEventListener Add an event listener for the instance to receive view triggered events. Arguments Name
Type
Description
name
string
name of the event
callback
function
callback function to invoke when the event is fired
Returns void Example myView.addEventListener('click', function(e) { alert('Click at index: '+e.index); });
animate Animate the view.
8
API, 10/6/10
Appcelerator Titanium API Reference
Titanium.UI.View Class
Arguments Name
Type
Description
obj
object
either a dictionary of animation properties or an Animation object
callback
function
function to be invoked upon completion of the animation
Returns void Example myView.animate({opacity:0,top:10,left:10,width:100,height:100,delay:150,duration:1100});
fireEvent Fire a synthesized event to the views listener. Arguments Name
Type
Description
name
string
name of the event
event
object
event object
Returns void Example myView.fireEvent('click',{index:2});
hide Hide the view. Arguments This function takes no arguments. Returns void Example myView.hide();
remove Remove a previously added view from the view hiearchy.
API, 10/6/10
9
Appcelerator Titanium API Reference
Titanium.UI.View Class
Arguments Name view
Type object
Description the view to remove from this views hiearchy
Returns void Example myView.remove(myScreen1);
removeEventListener Remove a previously added event listener. Arguments Name
Type
Description
name
string
name of the event
callback
function
callback function passed in addEventListener
Returns void
show Make the view visible. Arguments This function takes no arguments. Returns void Example myView.show();
toImage Return a Blob image of the rendered view.
10
API, 10/6/10
Appcelerator Titanium API Reference
Titanium.UI.View Class
Arguments Name f
Type function
Description Function to be invoked upon completion. If non-null, this method will be performed asynchronously. if null, it will be performed immediately.
Returns object Example var myImage = myView.toImage();
API, 10/6/10
11
Example Programs
Appcelerator Titanium API Reference
Example Programs The following example programs illustrate View. Each of these programs replaces your app.js file in your Resources folder. You can make changes to these programs to experiment with the View, and the related classes and methods. • Generic Use of View on page 12 • Single Image View on page 13 • Two Image View on page 14 • Two Image Manipulation Game on page 16
Generic Use of View This following code shows a generic usage of the View class. It uses a combination of three views: a container, a content view (in which we would place other UI elements), and a drop shadow view. This app works for iPhone 4.0 and Android APIs 1.6. // app.js // Create a container view var container = Titanium.UI.createView({ width:200, height:200, top:10, left:10 }); // Create a drop shadow view which we will place in the lower right corner // of the container var shadow = Titanium.UI.createView({ width:195, height:195, right:0, bottom:0, borderRadius:5, opacity:0.5, backgroundColor:"#787878" }); container.add(shadow); // Add a view to our container. Since this view is added to the parent last // it is z-indexed above the drop shadow view we just added. var content = Titanium.UI.createView({ width:195, height:195, top:0, left:0, borderRadius:5, backgroundColor:"#cdcdcd"
12
API, 10/6/10
Appcelerator Titanium API Reference
Example Programs
}); content.add(Titanium.UI.createLabel({ text:"Here is some content", textAlign:"center", color:"#000" })); container.add(content); // Add it to a window, then open our app’s main window var win = Titanium.UI.createWindow({ backgroundColor:"#fff" }); win.add(container); win.open();
Generic Views, for Android
Generic Views, for iPhone
Single Image View This is a minimal program that demonstrates a view. This app works for iPhone 4.0 and Android APIs 1.6. // app.js // Create a container view for the image var container = Titanium.UI.createView({
API, 10/6/10
13
Example Programs
Appcelerator Titanium API Reference
width:100, height:100, top:10, left:10, backgroundColor:"#2aaaad", backgroundImage:"myphoto1.jpg" }); // Create a window var myWindow = Titanium.UI.createWindow({ backgroundColor:"#fff" }); // Add the image to the window and open it myWindow.add(container); myWindow.open();
Single Image View, for Android
Single Image View, for iPhone
Two Image View This example shows how you can add two views to a window. Each view uses a JPEG as a background image. This program assumes that you have two image files named myphoto1.jpg and myphoto2.jpg in your Resources directory. (This is the same directory where your app.js is located.) This app works for iPhone 4.0 and Android APIs 1.6.
14
API, 10/6/10
Appcelerator Titanium API Reference
Example Programs
// app.js // Create container views for each image var container1 = Titanium.UI.createView({ width:100, height:100, top:10, left:10, backgroundColor:"#2aaaad", backgroundImage:"myphoto1.jpg" }); var container2 = Titanium.UI.createView({ width:100, height:100, top:10, left:200, backgroundColor:"#2aaaad", backgroundImage:"myphoto2.jpg" }); // Create a window var myWindow = Titanium.UI.createWindow({ backgroundColor:"#fff" }); //Add the images to the window and open myWindow.add(container1); myWindow.add(container2); myWindow.open();
API, 10/6/10
15
Example Programs
Appcelerator Titanium API Reference
Two Image View, for Android
Two Image View, for iPhone
Two Image Manipulation Game This example uses several View methods (addEventlistener, animate, hide) to manipulate two images in a simple game called 2 Pic Monte. We also change some of the image properties as we shuffle them. The game can easily be enhanced by adding logic and more images. Two image files are used: myphoto1.jpg and myphoto2.jpg. Read the comments for more details. This app works for iPhone 4.0. // app.js // // // // // // // //
2 Pic Monte Simple example of manipulating two images using views inside a window. Instructions: Using an image, create duplicates named mypic1.jpg and mypic2.jpg. Put some type of mark on pic 2 so you can identify it but other players cannot. Launch the app and have players try to choose the image that has the mark. For this example, the images are the same except pic 1 is color and pic 2 is grayscale. Pick grayscale (pic 2) and you're always the winner.
// Initialize variables to be used with positioning and scoring
16
API, 10/6/10
Appcelerator Titanium API Reference
var var var var
Example Programs
left1 = 10; left2 = 200; numberLost = 0; numberTries = 0;
// Create views for each image var view1 = Titanium.UI.createView({ width:100, height:100, top:10, left:left1, backgroundImage:"pic1.jpg" }); var view2 = Titanium.UI.createView({ width:100, height:100, top:10, left:left2, backgroundImage:"pic2.jpg" }); // Add instructions using another view with a gray background var instructions = Titanium.UI.createView({ width:100, height:230, top:200, left:125, backgroundColor:"#a1adad" }); // ... and here is the label with the instructions instructions.add(Titanium.UI.createLabel({ text:"2 Pic Monte. Click the correct pic and you're a winner!", textAlign:"center", color:"#000411" })); // Create a window to hold the 2 images and the instructions var win = Titanium.UI.createWindow({ fullscreen:false, backgroundColor:"#fff" }); // Add the views to the window and open win.add(view1); win.add(view2); win.add(instructions); win.open();
API, 10/6/10
17
Appcelerator Titanium API Reference
Example Programs
// Add an event listener to move the images with animation, and keep score view1.addEventListener('click', function() { // Simple score-keeping numberLost = numberLost+1; numberTries = numberTries+1; // Shuffle first -- the "shuffling" is pretty simple for (i=0; i
Titanium.UI.View Class
API October 6, 2010
Appcelerator Titanium API Reference
Copyright © 2010 Appcelerator, Inc. All rights reserved. Appcelerator, Inc. 444 Castro Street, Suite 818, Mountain View, California 94041
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, mechanical, electronic, photocopying, recording, or otherwise, without prior written permission of Appcelerator, Inc., with the following exceptions: Any person is hereby authorized to store documentation on a single computer for personal use only and to print copies of documentation for personal use provided that the documentation contains Appcelerator's copyright notice. The Appcelerator name and logo are registered trademarks of Appcelerator, Inc. Appcelerator Titanium is a trademark of Appcelerator, Inc. All other trademarks are the property of their respective owners. No licenses, express or implied, are granted with respect to any of the technology described in this document. Appcelerator retains all intellectual property rights associated with the technology described in this document. Every effort has been made to ensure that the information in this document is accurate. Appcelerator is not responsible for typographical or technical errors. Even though Appcelerator has reviewed this document, APPCELERATOR MAKES NO WARRANTY OR REPRESENTATION, EITHER EXPRESS OR IMPLIED, WITH RESPECT TO THIS DOCUMENT, ITS QUALITY, ACCURACY, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE. AS A RESULT, THIS DOCUMENT IS PROVIDED "AS IS," AND YOU, THE READER, ARE ASSUMING THE ENTIRE RISK AS TO ITS QUALITY AND ACCURACY. IN NO EVENT WILL APPCELERATOR BE LIABLE FOR DIRECT, INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES RESULTING FROM ANY DEFECT OR INACCURACY IN THIS DOCUMENT, even if advised of the possibility of such damages. THE WARRANTY AND REMEDIES SET FORTH ABOVE ARE EXCLUSIVE AND IN LIEU OF ALL OTHERS, ORAL OR WRITTEN, EXPRESS OR IMPLIED. No Appcelerator dealer, agent, or employee is authorized to make any modification, extension, or addition to this warranty. Some states do not allow the exclusion or limitation of implied warranties or liability for incidental or consequential damages, so the above limitation or exclusion may not apply to you. This warranty gives you specific legal rights, and you may also have other rights which vary from state to state.
2
API, 10/6/10
Appcelerator Titanium API Reference
Contents
Contents Overview ...................................................................................................................... 5 Titanium.UI.View Class ............................................................................................... 6 Instance Methods Summary ......................................................................................................6 Object Properties ....................................................................................................................... 6 Events ........................................................................................................................................ 7 Event Properties ........................................................................................................................ 7 Methods ..................................................................................................................................... 8
Example Programs ................................................................................................... 12 Generic Use of View ................................................................................................................ 12 Single Image View ................................................................................................................... 13 Two Image View ....................................................................................................................... 14 Two Image Manipulation Game ............................................................................................... 16
API, 10/6/10
3
Contents
4
Appcelerator Titanium API Reference
API, 10/6/10
Appcelerator Titanium API Reference
Overview
Overview A View object is created by Titanium.UI.createView and represents a generalized drawing surface or container. Many other Titanium classes are subclasses of View, including among others TableView, ImageView, Label, Button. Although these classes are specialized for different types of display elements, they all share some similarities. For example, you'll notice some overlap among instance methods, object properties, events and event properties. You can use a View in a very general way. Even if you're planning to use a TableView, ImageView, or another subclass of View, it's helpful to understand the functionality available with the generic View class. You can think of views as being arranged in a vertical stack, like papers on a desk. In general, the topmost view will be displayed, possibly obscuring views below it. For example, if you have two views arranged side-bysize, they would both be visible. However, if one view partially overlaps the other, then it's the topmost view that will be fully visible; the other view(s) would be partly blocked. You can use the zIndex property to arrange multiple views within this conceptual vertical stack. The view with the highest zIndex will be topmost. If you don't explicitly specify the zIndex, then Titanium assumes zIndex to be 0. For views with the same zIndex value, the most recently added one will be topmost.
API, 10/6/10
5
Appcelerator Titanium API Reference
Titanium.UI.View Class
Titanium.UI.View Class The View is an empty drawing surface or container. The View is created by the Titanium.UI.createView method.
Instance Methods Summary Name
Description
add
add a child to the view hierarchy
addEventListener
add an event listener for the instance to receive view triggered events
animate
animate the view
fireEvent
fire a synthesized event to the views listener
hide
hide the view
remove
remove a previously added view from the view hiearchy
removeEventListener
remove a previously added event listener
show
make the view visible
toImage
return a Blob image of the rendered view
Object Properties Name
Type
Description
anchorPoint
object
A dictionary with properties x and y to indicate the anchor point value. Anchor specifies the position by which animation should occur. Center is 0.5, 0.5.
animatedCenterPoint
object
read-only object with x and y properties of where the view is during animation
backgroundColor
string
the background color of the table view
backgroundGradient
object
a background gradient for the view with the properties: type,startPoint,endPoint,startRadius,endRadius,backfillStart,backfillEnd,colors.
backgroundImage
string
the background image to render in the background of the table view
borderColor
string
the border color of the view
borderRadius
float
the border radius of the view
borderWidth
float
the border width of the view
bottom
float, string
Property for the view bottom position. This position is relative to the views parent. can be either a float value or a string of the width.
center
object
a dictionary with properties x and y to indicate the center of the views position relative to the parent view
height
float, string
Property for the view height. Can be either float value or a string of the width.
left
float, string
Property for the view left position. This position is relative to the views parent. can be either a float value or a string of the width.
opacity
float
the opacity from 0.0-1.0
right
float, string
Property for the view right position. This position is relative to the views parent. Can be either a float value or a string of the width.
size
object
the size of the view as a dictionary of width and height properties
top
float, string
Property for the view top position. This position is relative to the views parent. Can be either a float value or a string of the width.
touchEnabled
boolean
a boolean indicating if the view should receive touch events (true, default) or forward them to peers (false)
transform
object
the transformation matrix to apply to the view
visible
boolean
a boolean of the visibility of the view
6
API, 10/6/10
Appcelerator Titanium API Reference
Name
Titanium.UI.View Class
Type
Description
width
float,string
Property for the view width. Can either be `auto`, a float value or a string of the width.
zIndex
int
the z index position relative to other sibling views; largest is topmost
Events Event properties provide detail about the specific event. Note that not all properties apply to every event type. Event Type click dblclick doubletap singletap swipe touchcancel touchend touchmove touchstart twofingertap
When fired fired when the device detects a click (longer than touch) against the view the device detects a double click against the view the device detects a double tap against the view the device detects a single tap against the view the device detects a swipe (left or right) against the view a touch event is interrupted by the device (for example, in circumstances such as an incoming call to allow the UI to clean up state) a touch event is completed as soon as the device detects movement of a touch; event coordinates are always relative to the view in which the initial touch occurred as soon as the device detects a gesture the device detects a two-finger tap against the view
Event Properties Event
Description
Triggered Event Types
direction
direction of the swipe - either left or right
globalPoint
a dictionary with properties x and y describing the point of the all event in screen coordinates
source
the source object that fired the event
all
type
the name of the event fired
all
x
the x point of the event, in receiving view coordinates
all
y
the y point of the event, in receiving view coordinates
all
API, 10/6/10
swipe
7
Appcelerator Titanium API Reference
Titanium.UI.View Class
Methods
add Add a child to the view hierarchy. Arguments Name
view
Type
object
Description the view to add to this views hiearchy
Returns void Example myView.add(anotherView); myView.add(myTableView);
addEventListener Add an event listener for the instance to receive view triggered events. Arguments Name
Type
Description
name
string
name of the event
callback
function
callback function to invoke when the event is fired
Returns void Example myView.addEventListener('click', function(e) { alert('Click at index: '+e.index); });
animate Animate the view.
8
API, 10/6/10
Appcelerator Titanium API Reference
Titanium.UI.View Class
Arguments Name
Type
Description
obj
object
either a dictionary of animation properties or an Animation object
callback
function
function to be invoked upon completion of the animation
Returns void Example myView.animate({opacity:0,top:10,left:10,width:100,height:100,delay:150,duration:1100});
fireEvent Fire a synthesized event to the views listener. Arguments Name
Type
Description
name
string
name of the event
event
object
event object
Returns void Example myView.fireEvent('click',{index:2});
hide Hide the view. Arguments This function takes no arguments. Returns void Example myView.hide();
remove Remove a previously added view from the view hiearchy.
API, 10/6/10
9
Appcelerator Titanium API Reference
Titanium.UI.View Class
Arguments Name view
Type object
Description the view to remove from this views hiearchy
Returns void Example myView.remove(myScreen1);
removeEventListener Remove a previously added event listener. Arguments Name
Type
Description
name
string
name of the event
callback
function
callback function passed in addEventListener
Returns void
show Make the view visible. Arguments This function takes no arguments. Returns void Example myView.show();
toImage Return a Blob image of the rendered view.
10
API, 10/6/10
Appcelerator Titanium API Reference
Titanium.UI.View Class
Arguments Name f
Type function
Description Function to be invoked upon completion. If non-null, this method will be performed asynchronously. if null, it will be performed immediately.
Returns object Example var myImage = myView.toImage();
API, 10/6/10
11
Example Programs
Appcelerator Titanium API Reference
Example Programs The following example programs illustrate View. Each of these programs replaces your app.js file in your Resources folder. You can make changes to these programs to experiment with the View, and the related classes and methods. • Generic Use of View on page 12 • Single Image View on page 13 • Two Image View on page 14 • Two Image Manipulation Game on page 16
Generic Use of View This following code shows a generic usage of the View class. It uses a combination of three views: a container, a content view (in which we would place other UI elements), and a drop shadow view. This app works for iPhone 4.0 and Android APIs 1.6. // app.js // Create a container view var container = Titanium.UI.createView({ width:200, height:200, top:10, left:10 }); // Create a drop shadow view which we will place in the lower right corner // of the container var shadow = Titanium.UI.createView({ width:195, height:195, right:0, bottom:0, borderRadius:5, opacity:0.5, backgroundColor:"#787878" }); container.add(shadow); // Add a view to our container. Since this view is added to the parent last // it is z-indexed above the drop shadow view we just added. var content = Titanium.UI.createView({ width:195, height:195, top:0, left:0, borderRadius:5, backgroundColor:"#cdcdcd"
12
API, 10/6/10
Appcelerator Titanium API Reference
Example Programs
}); content.add(Titanium.UI.createLabel({ text:"Here is some content", textAlign:"center", color:"#000" })); container.add(content); // Add it to a window, then open our app’s main window var win = Titanium.UI.createWindow({ backgroundColor:"#fff" }); win.add(container); win.open();
Generic Views, for Android
Generic Views, for iPhone
Single Image View This is a minimal program that demonstrates a view. This app works for iPhone 4.0 and Android APIs 1.6. // app.js // Create a container view for the image var container = Titanium.UI.createView({
API, 10/6/10
13
Example Programs
Appcelerator Titanium API Reference
width:100, height:100, top:10, left:10, backgroundColor:"#2aaaad", backgroundImage:"myphoto1.jpg" }); // Create a window var myWindow = Titanium.UI.createWindow({ backgroundColor:"#fff" }); // Add the image to the window and open it myWindow.add(container); myWindow.open();
Single Image View, for Android
Single Image View, for iPhone
Two Image View This example shows how you can add two views to a window. Each view uses a JPEG as a background image. This program assumes that you have two image files named myphoto1.jpg and myphoto2.jpg in your Resources directory. (This is the same directory where your app.js is located.) This app works for iPhone 4.0 and Android APIs 1.6.
14
API, 10/6/10
Appcelerator Titanium API Reference
Example Programs
// app.js // Create container views for each image var container1 = Titanium.UI.createView({ width:100, height:100, top:10, left:10, backgroundColor:"#2aaaad", backgroundImage:"myphoto1.jpg" }); var container2 = Titanium.UI.createView({ width:100, height:100, top:10, left:200, backgroundColor:"#2aaaad", backgroundImage:"myphoto2.jpg" }); // Create a window var myWindow = Titanium.UI.createWindow({ backgroundColor:"#fff" }); //Add the images to the window and open myWindow.add(container1); myWindow.add(container2); myWindow.open();
API, 10/6/10
15
Example Programs
Appcelerator Titanium API Reference
Two Image View, for Android
Two Image View, for iPhone
Two Image Manipulation Game This example uses several View methods (addEventlistener, animate, hide) to manipulate two images in a simple game called 2 Pic Monte. We also change some of the image properties as we shuffle them. The game can easily be enhanced by adding logic and more images. Two image files are used: myphoto1.jpg and myphoto2.jpg. Read the comments for more details. This app works for iPhone 4.0. // app.js // // // // // // // //
2 Pic Monte Simple example of manipulating two images using views inside a window. Instructions: Using an image, create duplicates named mypic1.jpg and mypic2.jpg. Put some type of mark on pic 2 so you can identify it but other players cannot. Launch the app and have players try to choose the image that has the mark. For this example, the images are the same except pic 1 is color and pic 2 is grayscale. Pick grayscale (pic 2) and you're always the winner.
// Initialize variables to be used with positioning and scoring
16
API, 10/6/10
Appcelerator Titanium API Reference
var var var var
Example Programs
left1 = 10; left2 = 200; numberLost = 0; numberTries = 0;
// Create views for each image var view1 = Titanium.UI.createView({ width:100, height:100, top:10, left:left1, backgroundImage:"pic1.jpg" }); var view2 = Titanium.UI.createView({ width:100, height:100, top:10, left:left2, backgroundImage:"pic2.jpg" }); // Add instructions using another view with a gray background var instructions = Titanium.UI.createView({ width:100, height:230, top:200, left:125, backgroundColor:"#a1adad" }); // ... and here is the label with the instructions instructions.add(Titanium.UI.createLabel({ text:"2 Pic Monte. Click the correct pic and you're a winner!", textAlign:"center", color:"#000411" })); // Create a window to hold the 2 images and the instructions var win = Titanium.UI.createWindow({ fullscreen:false, backgroundColor:"#fff" }); // Add the views to the window and open win.add(view1); win.add(view2); win.add(instructions); win.open();
API, 10/6/10
17
Appcelerator Titanium API Reference
Example Programs
// Add an event listener to move the images with animation, and keep score view1.addEventListener('click', function() { // Simple score-keeping numberLost = numberLost+1; numberTries = numberTries+1; // Shuffle first -- the "shuffling" is pretty simple for (i=0; i
