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

Some Notes on an Unsuccessful Install Attempt of Particle Code for AS3.0 Developers on OS X 10.5.8

Particle Code (BETA) is a new Eclipse plugin that aims to allow AS3.0 & Java developers (and soon C#) to be able to port their applications to HTML5, iOS, Android, WindowsPhone, Blackberry & WebOS via the Particle SDK.

After lots of back & forth, it looks like the reason this install failed is because I tried to install Python 2.6 manually while using MacPorts to install the Python Image Library. The recommended way is to use Macports (or similar) to install both with all necessary components.

1. Sign up for their website account & they’ll email you a login/pass
2. To install on OS X 10.5.8, you need:

  • JDK 1.6 (64-bit)
  • Python 2.6
  • – Python Imaging Library (PIL) 1.1.7 or newer
  • – Eclipse 3.4+ (64-bit)

3. Check if you have JDK 1.6 installed:

  • go to Applications/Utilities/Java Preferences
  • if you see Java SE 1.6 under the General tab, drag it up to the top of the list
  • then open Terminal, type “java -version” at the prompt, you should see something like ‘java version “1.6.0_24″‘

4. Check if you have Python 2.6 installed

  • in Terminal type “python -h”
  • you should see a path like: /System/Library/Frameworks/Python.framework/Versions/2.5/…. (Mac OS X 10.5 comes with Python 2.5)

“/2.5/” in that path means you have to install Python 2.6 [1]:
http://www.python.org/download/releases/2.6.6/

After you run the installer, entering “python – h” in Terminal should show “/2.6/” as your default Python version: /Library/Frameworks/Python.framework/Versions/2.6/

5. Download the Python Image Library 1.1.7

  • it should auto unzip into a folder on you desktop, open it
  • There’re manual ways to install it that take a bunch of steps & possible manual installs
    of additional components required; look for a file named README in the PIL folder
  • there’re 2 tools that are supposed to simplify installing PIL: MacPorts & Fink, both require Xcode to be installed on your machine.
  • Main advantage of MacPorts in general: “Installs automatically any required support software, known as dependencies, for a given port.” http://guide.macports.org/
  • I installed MacPorts for Leppard from here: http://www.macports.org/install.php
  • run “sudo port -v selfupdate” to make sure MacPorts is up to date

I ran “sudo port install py26-pil” and got a whopping list of dependencies to be installed for PIL (which MacPorts did for me):

—> Computing dependencies for py26-pil
—> Dependencies to be installed: freetype zlib jpeg lcms tiff py26-tkinter python26 bzip2 db46 gdbm gettext expat libiconv gperf ncurses ncursesw openssl python_select readline sqlite3 tk Xft2 fontconfig pkgconfig xrender xorg-libX11 xorg-bigreqsproto xorg-inputproto xorg-kbproto xorg-libXau xorg-xproto xorg-libXdmcp xorg-libxcb python27 xorg-libpthread-stubs xorg-xcb-proto libxml2 xorg-util-macros xorg-xcmiscproto xorg-xextproto xorg-xf86bigfontproto xorg-xtrans xorg-renderproto tcl xorg-libXScrnSaver xorg-libXext xorg-scrnsaverproto…

This took a little while… wait until you see this line: [Process completed]…

NOTE: MacPorts may try to make Python 2.7 or later your default version of Python.
Since ParticleCode doesn’t work with Python 2.7 or 3.x, you might need to manually switch to 2.6:
“To make python 2.6 the default (i.e. the version you get when you run ‘python’), please run: sudo port select –set python python26”

6. Install Eclipse, if you need to.

I already have Eclipse 3.6 installed, so the only thing that needs doing is the memory allocation part specified on ParticleCode.com’s download page.

7. Install ParticleCode plugin for Eclipse….

NOTES:
========
1. “The Particle Platform will not work with Python 2.7 or Python 3 distributions.”
http://www.particlecode.com/account/download/#python

Eclipse links for Android w/ Java

Add Missing Import Statements: Cmd-Shift-O
“An easy way to add import packages to your project is to press Ctrl-Shift-O (Cmd-Shift-O, on Mac). This is an Eclipse shortcut that identifies missing packages based on your code and adds them for you.”

More shortcuts:

Eclipse themes w/dark background & light text

How to auto align “{” braces of statement blocks for Java in Eclipse

Eclipse 3.4 for Java EE came with a default code style for Java where the braces of statement blocks are not aligned. It looks like this: 

public class MyClass
{
    private String myVar; 

    public MyClass() {
       myVar = "Some text here for now";
    }
}

Instead, some people prefer to align statement block braces because it’s easier to keep track of them that way. Aligned braces look like this:

public class MyClass
{
    private String myVar; 

    public MyIntStack()
    {
	 myVar = "Some text here for now";
    }
}

Here’s how to change this so that any auto-generated Eclipse code (like Source > Generate Getters and Setters) shows up with aligned braces.

Step 1. Go to Eclipse Preferences.

  • On OS X go to Eclipse > Preferences.
  • Click on arrow next to Java in the list on the left
  • In the expanded menu, click on arrow next to Code Style
  • Click on Formatter
  • Click the Edit… button ( In EasyEclipse 1.2, it’s the Show… button)

3

Step 2. Create a custom Profile.

  • Select the Braces tab
  • Change the “Profile name” to something unique
  • And now a somewhat tedious task: Select “Next line” for each of the elements under “Brace positions” (wouldn’t it be great if there was a “Change All” drop-down option? Mmmm, Usability?)

4

How to set up Connector/J in Eclipse

Connector/J is a “Type IV JDBC driver for MySQL.”

Assumptions

You have downloaded & installed MySQL 5.1, Connector/J for 5.1 (the JDBC driver for MySQL) from mysql.com, Tomcat 5.5 or 6, Eclipse 3.4 for Java EE. I’m assuming this is a Dynamic Web Project in Eclipse with Tomcat 6 as the Target Runtime. I did this successfully on OS X 10.5 (Leopard) & on Windows XP.

The Steps:

  1. Select your project folder in Eclipse’s Project Explorer (just click on it so it’s highlighted).
  2. Open project properties. There’re several ways to do this. For example, you can go to Project > Properties in Eclipse’s top menu.
  3. Click on Java Build Path. Click “Add External Jars.” Navigate to where you unzipped Connector/J on your hard drive. Choose the .jar file (in my case mysql-connector-java-5.1.7-bin.jar) & click Open. It’ll now show up under JARs and class folders in the build path.
  4. Click on Java EE Module dependencies in the menu on the left.
  5. Check the checkbox next to the Connector/J path under JAR/Module. Hit Apply and OK.
    Run a skeleton test Servlet to see if it works:

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TestJDBC extends HttpServlet {

    public void init(){
        try {
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            System.out.println("JDBC driver loaded");
        } catch (ClassNotFoundException e) {
            System.out.println(e.toString());
        } //Eclipse may auto-force some extra catch blocks here
     }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        out.println("Check the Console tab in" +
		" Eclipse... it should say \"JDBC driver loaded\"");
    }

}