Three State HTML Checkboxes

I wanted a 3 state checkbox, using jQuery. Here’s how I did it.

$('input[type="checkbox"]').each(function () {
    // keep a reference to the current checkbox
    var me = $(this);
    // define the three states our checkbox can enter:
    // checked, not checked, and faded out
    var states = [
        function () {
            me.val(true);
            me.attr('checked', 'checked');
            me.css({ opacity: 1 });
        },
        function () {
            me.val(false);
            me.removeAttr('checked');
            me.css({ opacity: 1 });
        },
        function () {
            me.val('null');
            me.removeAttr('checked');
            me.css({ opacity: 0.5 });
        }
    ];
    // start off in the not checked state
    var currentState = 1;
    // whenever the checkbox is changed, loop through our checkbox states
    me.change(function () {
        states[++currentState > 2 ? currentState = 0 : currentState]();
    });
    // force it into the next state:
    // I want it to start off in the faded out state (currentState == 2)
    me.change();
});

Works for me. Whether or not breaking HTML conventions is a good thing… that’s up to you.

Getting Started with Appcelerator Titanium Mobile

Here’s a quick list of steps to get you started with Appcelerator Titanium Mobile. Following them should help you avoid some common pitfalls (well, the ones I fell into at least!)

1. Make sure you have and can run an Android emulator. http://developer.android.com/sdk/index.html If you’re on a Mac, also install the latest iOS and XCode SDK from http://developer.apple.com
2. Download Titanium from http://appcelerator.com
3. The first time you run Titanium, it should ask you to log in then download the latest version of Titanium Mobile. It does this because Titanium lets you build mobile and desktop apps. In our case, we’re building mobile.
4. After Titanium downloads the latest Titanium Mobile release, change to the “Profile” perspective (top left, looks like a single guy). Update the information in here, and set the directory where you installed your Android SDK. Mine is “/Users/dawson/android-sdk-mac_86/” (notice that I did not do android-sdk-mac_86/tools”). Click “Save Profile”.
5. Switch back to the “Projects” perspective (top left, looks like a briefcase).
6. Click “New Project”, and use the following for the fields:

       - Project Type: Mobile
       - Name: MyFirstMobileApp
       - App Id: com.yourname.myfirstmobileapp
       - Directory: the directory you want your project to be in. This is case sensitive, so be careful!
       - Company/Personal URL: your website's URL, or some random website
       - Titanium SDK version: 1.4.2
       - Installed Mobile Platforms: There should be a green checkmark next to "Android SDK Found". If not, go back and verify steps 1 and 3 were done properly.

7. Click “Create Project”, and your project will be created. Make sure it works by clicking the “Test & Package” tab, then the “Run Emulator” tab, and then the “Launch” button.
8. The emulator should launch, and you should see a simple app with two tabs.
9. Now let’s edit your app. Titanium doesn’t include an IDE, so open up your favorite editor, and look in the directory you created your app in. There will now be a “Resources” folder, and in that a “app.js” file. App.js is the entry point to your application, so open it first and take a look.
10. Look at the API online and grow your application to what you need it to do. https://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI-module

If you want, I have released a library to make using Titanium easier and a bit more jQuery like. It’s available here, and includes a test project to demonstrate most of what it does for you: https://github.com/dawsontoth/Appcelerator-Titanium-Redux

Let me know how it goes. There are a lot of steps, but I was pretty verbose. You should fly through it, but if you get tripped up, just comment me. Titanium tends to trip up on some really simple things that are easy to get past if you know what to look for, but you can waste a lot of time if you haven’t been through it before.

Regards,

Dawson

Appcelerator Titanium.include Simulator Works, Device Fails

I’ve been writing a lot of mobile apps for KeyLimeTie, which means I’ve been working with Appcelerator Titanium a lot. The basis of the platform is you write a bunch of javascript, using the “Titanium” namespaces to build up your native iOS and Android app. One particular feature is “Titanium.include(‘myfile.js’);”, which acts just like a PHP include(‘myfile.php’)–inlines whatever code is in the file and runs it.

Here’s where I hit some trouble, and wasted a couple of hours of my time. Everything was working in the iPhone simulator, but when I would deploy to my iPad for testing, the program would hang at the loading screen. Through liberal use of alert(“I made it this far!”), I was able to figure out that a function wasn’t getting included from one of my Titanium.include’d files. In fact, the file wasn’t getting included at all.

The solution? I had messed up the capitalization in my include statement. My file was named Foo.js, and I was trying to include foo.js. The simulator was smart enough to work this out, but the device failed to do so.

Moral of the story? Always check caps.

Making It Easy to Edit your Hosts File

Here’s a way to quickly open your hosts file:

1. Create a f ile named hosts.bat in your C:\Windows\System32 folder
2. Put the following in this hosts.bat file: start notepad C:\Windows\System32\drivers\etc\hosts

Now you can:

1. In Vista or 7, type “hosts” in to your start menu search and press enter
2. Start Menu > Run (or Win+R), type “hosts”, and hit enter
3. At a command prompt, type “hosts” and hit enter

Lots of ways, same result. And it sure saves me a lot of time.

Dude, Where’s My Car? App

Completely unrelated and unlike the portion of a movie I may have seen part of, I just made a tiny app to help me remember if my car is in the driveway or the street. The town I live in is a bit crazy about writing tickets right at 2am if your car is on the street, and I always forget, so this might save me some money. Hopefully…

http://code.google.com/p/dudewheresmycar/

Created it with C# and WPF, source code available on the Google code site.

Just Passed 70-515!

That’s right, Dot Net Dawson is now Dot Net Dawson, MCTS. Boo ya!

My preparation was a bit dubious…  I bought the Measure Up practice exams, but there weren’t many questions and they were all easy. I “memorized” them in about an hour of studying (the questions are about what I do everyday, so I knew 90% of the answers already) then promptly signed up for the test.

I was really surprised.  I breezed through the test, a fifth of which was jQuery related questions, and half of which were practically straight off the Measure Up practice exams. Almost all of the questions tested good, relevant practices that I use in my every day programming life. I didn’t have to know random junk that someone back in the 90′s used and probably won’t use again unless they’re working on a legacy system.

Moral of the story? The Measure Up exam is well worth it.

Here’s some links for ya:

Microsoft 70-515 – http://www.microsoft.com/learning/en/us/exam.aspx?ID=70-515

Measure Up – http://www.measureup.com/catalog/product.aspx?vid=5&cid=All%20MS%20Practice%20Tests&tid=94&pid=2462

I also read through Niall Merrigan’s summary posts of MSDN and various articles pertaining to the exam:

Post 1 of 6: http://www.certsandprogs.com/2010/03/mcts-web-applications-net-4-70-515.html#axzz0itb23Kze

Post 2 of 6: http://www.certsandprogs.com/2010/03/mcts-web-applications-net-4-70-515_22.html#axzz0itbEIovG

Post 3 of 6: http://www.certsandprogs.com/2010/03/mcts-web-applications-net-4-70-515_5119.html#axzz0oCbfdXaw

Post 4 of 6: http://www.certsandprogs.com/2010/03/mcts-web-applications-net-4-70-515_7210.html#axzz0oCbhIwtI

Post 5 of 6: http://www.certsandprogs.com/2010/03/mcts-web-applications-net-4-70-515_23.html#axzz0oCbkS7R4

Post 6 of 6: http://www.certsandprogs.com/2010/03/mcts-web-applications-net-4-70-515_1117.html#axzz0oCblHj8M

Best of luck!

CruiseControl.NET can’t get latest after creating new branch

I’ve got a build server set up for us running CruiseControl.NET. It pulls our latest code from a Kiln (HG) repository, builds, publishes, and will soon run some unit and integration tests.

Today I created our first branch in one of our projects, and CC.NET immediately broke.

I solved this by specifying the branch our CC.NET should use. Open your config file and add the following to your source control block:

<branch>default</branch>

I wanted it building the default branch, so I put in “default”. Replace it with whatever branch you use.

Kiln (or HG) “push creates new remote branches” Fail

I was working with Kiln today (as I do every day), and I got this exception . . .

push creates new remote branches

. . . when I was trying to push some changes I had made. Yes, I had created a new branch. Yet it wouldn’t let me push my changes.

Why? Probably because it hates me (if you have a better answer, please comment–I am genuinely interested in knowing).

I got past this by forcing it to push.

Assuming you’re using TortoiseHg, open up your Repository Explorer. In the “Synchronize” menu, check “Force Push” at the bottom. Now when you try to push, it should go through without complaining. After you push, I’d recommend un-checking “Force Push” because it is good for it to warn you about situations you get yourself in to (not having latest, unknowingly creating branches, etc).

Just signed up for 70-515

Just signed up for my next Microsoft exam on Friday: TS: Web Apps Development with MS .NET Framework 4. I’m actually excited about this one–it leverages a lot of what I use in my every day work flow, so it shouldn’t be as much of a challenge as my last exam. If I don’t post about how it went, it’s most likely because I failed it and feel ashamed. Here’s to hoping I post!

Crashing Google Chrome with Dynamically Sorting Divs

I had the distinct and bewildering pleasure to crash my Google Chrome browser a number of times while developing for a client.

Of course, it was entirely my own fault… boo hoo, read on.

My code looked something like this:

 <script type="text/javascript"> 
     $(function () {
         var newDiv = { timestamp: 2, text:  };
         var newDivHTML =  + newDiv.timestamp +  + newDiv.text + ;
         var wasInserted = false;
         $().each(function () {
             var timestamp = $(this).attr();
             if (timestamp >= newDiv.Timestamp) {
                 $(this).before(newDivHTML);
                 wasInserted = true;
                 return;
             }
         });
         if (!wasInserted) {
             $().append(newDivHTML);
         }
     });
 </script> 
 <div id="#results">
     <div class="result" timestamp="1">Foo</div>
     <div class="result" timestamp="3">Baz</div>
 </div>

It looks through the list of results to figure out where to put the new div. This example is simplified; I was doing this as part of dynamically loading in a lot of information. It’s not the best sorting algorithm, but it should work fine, right?

Wrong. Every time my code ran, it would crash Google Chrome with that unfriendly, unhelpful error page that is a big unhappy dead folder.

Turns out it was because I forgot the “false” on my return statement:

 return false;

That fixed it. Apparently Chrome has trouble (rightly so, in my mind) with adding stuff to the collection you are iterating over.

Makes sense, and now I can move on.