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:
- add footr.fireEvent(‘MYDEBUG_Event’) in ApplicationWindow.js,right after you declare ‘myv’ as an instance of MyNestedView.js.
- add listener for ‘MYDEBUG_Event’ in MyNestedView.js after you declare the visual subview you’re trying to position (var headerImage).
- 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).
- 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.
timshaya 