Titanium for iOS: Manipulating Width, Height, Left, Top of Views in the iOS Simulator Using the Debug View

I learned this useful technique from Charles Loflin, a brilliant developer I’ve had a chance to work with recently. This approach lets you reduce the amount of guess work involved in trying to set the x, y positioning and width, height of elements on screen. Instead of having to Run after every time you make a change to the left, top or width properties of a View, you can just Run once, figure out the correct values with live preview in the Simulator and update your code once.

Using Eclipe IDE’s DEBUG View to set width, height of a Ti.UI.View via the Simulator

The steps involved:

  1. add footr.fireEvent(‘MYDEBUG_Event’) in ApplicationWindow.js,right after you declare ‘myv’ as an instance of MyNestedView.js.
  2. add listener for ‘MYDEBUG_Event’ in MyNestedView.js after you declare the visual subview you’re trying to position (var headerImage).
  3. set break point for a Ti.API.info line inside the ‘MYDEBUG_Event’ listener – this will give you access to module’s variable (‘var headerImage’) in the Variables View of the Debug perspective (Window > Open Perspective > Debug).
  4. Select the class member whose width/height you’re trying to manipulate in the Variables View. In this case, select ‘headerImage’ var and drill down to it’s ‘width’ property. Select it ‘width’. It’s value should show up in the bottom input text panel of the Variables View. Change the value to something new (don’t use quotes, it’ll add it for you) and hit Cmd+S to Assign Value. You should see the view’s width change in the Simulator.

Here’s the fireEvent call for Step 1:

//Application Window Component Constructor
module.exports = function ApplicationWindow() {
	
	//load component dependencies	
	var MyNestedView = require('ui/MyNestedView');	
    ... 
	var myv = new MyNestedView();
	self.add(myv);
	
	//FOR DEBUG ONLY: 
	myv.fireEvent('MYDEBUG_Event');
    ...
    return self;
}

ApplicationWindow.js is loaded in from app.js in the same way the Single Window application template does in the Titanium IDE.

Here’s the listener call for Step 2:

module.exports = function MyNestedView() {
	
	var OS = Ti.Platform.osname;
	var SLASH = Ti.Filesystem.separator;
	var imgPath = SLASH + 'images';	
					
	//create component instance
	var self = Ti.UI.createView({
		bottom: (OS==='ipad') ? '10dip' : '20dip', 
		//backgroundColor: '#FF00FF', //for debug only
		width: Ti.UI.FILL,
		height: Ti.UI.SIZE //keep the view only as tall as needed to fit the text, otherwise it'll cover up links below 		
	});

	var headerImage = Ti.UI.createView({			
		left:'11dip', 
		width: (OS==='ipad') ? '751' : '314dip',   // 314/751 = x/100 --> 31400 = 751x --> x = 31400/751 --> x = 41.81 ~ 42%
		height: (OS==='ipad') ? '135dip' : '57dip', // 42% of 135dip = 56.7 ~ 57		
		backgroundImage: imgPath + SLASH + 'shared' + SLASH + 'my_header_image.png' 
	});		
	self.add(headerImage);

                //FOR DEBUG ONLY: 
		self.addEventListener('MYDEBUG_Event', function(){ 		
			Ti.API.info("break point point in MyNestedView"); //set breakpoint on this line
		});
	
...

    return self;
}

The fireEvent and its associated listener allow us to access the scope of MyNestedView module after MyNestedView’s “return self;” fires. Once we’re in this scope, we have access to it’s “var headerImage” member.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s