Android Prototyping Templates

I couldn't find much in the way of Android prototyping tools on the internet so I decided to create one of my own.

This is for hand sketching ideas out. When printed on 8.5x11 it comes out almost the exact size of the G1 screen.

T-Mobile Address Manager export "Hack"

Edit: Thanks to yincrash for pointing out that they changed their namespace on this object to TMO.ABPORTAL.

My friend Candice got a 1st Gen iPhone on the cheap and needed to get her numbers from T-Mobile's new online Address Manager (TAB). It does syncing to and from a regular T-Mobile phone but the iPhone isn't a regular T-Mobile Phone. The app is new and they have a note about it not syncing changes made on the website to the phone yet and either by design or evil plotting there was no way to export the contacts.

My vocation to the rescue! They were using the prototype.js library to run the app and after some digging around I found the data store.
TMO.ABPORTAL.ABIHM.ContactManager is the object that manages the contacts' actions and the _datas property is an array of contact javascript objects. So in the firebug console I wrote some code to get the contacts and wrote a csv file to an empty div. I then took that div into Wordpad to get the lines to break correctly on Windows and did an import into Windows Address Book. The rest is history!

Here's the code I used:

var data = ["firstname,lastname,name,homeMobile,homePhone1,homePhone2,workMobile,workPhone1,workPhone2"];
TMO.ABPORTAL.ABIHM.contactManager._datas.each(function(person) {
    var a = [];
    a.push(person.firstname);
    a.push(person.lastname);
    a.push(person.name);
    a.push(person.homeMobile);
    a.push(person.homePhone1);
    a.push(person.homePhone2);
    a.push(person.workMobile);
    a.push(person.workPhone1);
    a.push(person.workPhone2);
    data.push(a.join(","));
});
$('L_footer_pane').update(data.join('\r\n'));

Prototype/Javascript rules

I was doing some work with the new prototype this week to display some tables that represent a part of the file system. Since each one of them was a folder and could have numerous files I needed each one to collapse, but I wanted to keep all the info in the same table so divs where out.
This isn't ground breaking, but it shows the power of the prototype.js 1.6. This code closed each row after the header row and I didn't need to provide unique id's for each row on each table! All I did as you'll see below is pass the link that was toggling the collapse and expansion.

function _toggle(a) { 
            a = $(a); 
            var trs = a.up('tbody').childElements(); 
            trs.without(trs.first()).invoke('toggle'); 
            a.update(a.innerHTML == "-"?"+":"-"); 
            return false; 
        } 
        Event.observe(window, 'load', function() { 
            $$('a[rel="toggle"]').each(function(a) { _toggle(a);}); 
        });

The table would be rendered something like this. You can see the toggling link. I added a "rel" attribute to be able to identify and collapse all the tables when the page loaded.

<table> 
        <tbody> 
                <tr>
                     <td class="name" colspan="2">
                        <div><a href="#" onclick="_toggle(this); return false;" rel="toggle">-</a></div>Template Something
                     </td>
                 </tr>
     </tbody>
</table>

So little code that does so much. But it really isn't that much. It's just that doing this the old way required you to put in so much code with id parsing to get it done. So really it's just the right about of code for the perceived work. I like it!