[Update: I added a screencast of the process]

[Update: Interesting discussion of this post over on StackOverflow]

In the XCode 4.2 beta, MainWindow.xib is no longer included by default in some project templates. This means that you have to get your application to work by writing some code, using another method, or by manually reconstructing MainWindow.xib. This post shows the latter. Let’s get started.

Start with Empty Application template

If you create a new project in XCode 4.2 beta, and choose the Empty Application template to start from, change nothing and try running it in your iPhone 5.0 simulator, you will see an empty – black – screen. The only thing you get from the template is an xAppDelegate.h and .m.

We will now reconstruct our own MainWindow.xib, to get started with development the way you’re used to. So the next thing we do is add a New File to the project. Choose iOS > User Interface > Empty as template. Add Empty Interface Builder documentNext, choose iPhone, next give it the name MainWindow (.xib will be added automatically). By the way, the name of the file is not very important, but it’s nice to choose MainWindow, because that’s familiar.

Select the new File we just created. What we have now is an empty design surface, in what used to be Interface Builder. Here we’re going to change some things.

The empty design surface of MainWindow.xib

  • Change the class of File’s Owner to UIApplication

Change class of File's Owner to UIApplication

  • Find Object in the Library and drag it onto the Objects pane on the left.

Add Object to the document

  • Change the class of that Object to the xAppDelegate class that was created by the template, you might also want to clear out the “Object” label.

Change class of the object to xAppDelegate

  • Add a Window to the Objects pane on the left.

Add a window to the document

Now, let’s bind it all together. To do this, we first need to change some of the code in the xAppDelegate.h. We have to add IBOutlet to the window property it has, so that we can  hook it up in Interface Builder. The xAppDelegate.h should read something like this:

@interface DemoAppDelegate :
      UIResponder <UIApplicationDelegate>
@property (strong, nonatomic) IBOutlet UIWindow *window;

Don’t forget to save the file, otherwise Interface Builder will not be able to pick up the Outlet. Next we continue editing the MainWindow.xib

  • Control-Drag from the delegate outlet of the File Owner to the xAppDelegate object.

Link the application delegate

  • Control-Drag from the window outlet of the xAppDelegate to the Window.

Link the window outlet of the app delegate

  • Just for this demo, I’m adding a label to the window.

Add a label for testing

We’re not done yet, but we’re almost there.

  • Navigate to the project, and in the Summary tab, select MainWindow as the Main Interface.

Set the Main Interface to MainWindow

You can now run the project in the Simulator, and the window should show up. However there’s one last thing you might want to clean up. In xAppDelegate.m, there was actually code that creates a window as well. Just put the method

- (BOOL) application:didFinishLaunchingWithOptions:

in comment.

we're done



I hope this helps to understand exactly how an iOS app starts. The next thing you should do is add a ViewController, and push it onto the MainWindow. I’m not going to cover that here. Please leave your feedback in the comments.


Yesterday Microsoft announced the availability of an iOS specific SDK for Azure development.

It’s great to see that Microsoft is supporting iOS devices. Recently also iOS support for the Bing Maps API had been announced. There’s great momentum going on. The ideal time to jump on the train.

Find the original announcement on the Official Microsoft Blog.

You can get the Windows Azure Toolkit for iOS – even all the source code – on github.

Update: the easiest way — in my opinion — to consume the RestFull Azure API’s is using RestKit.

A while ago, I wrote about my VLAN setup for the Telenet local network.

Today, Bert, the Telenet technician came in for a modem-swap, and activated Fibernet40 on my subscription. It is the same price as the older “Gold-Shake” that we had, but you get a lot more bang for your buck: 100GB limit instead of 60GB and 40Mbps instead of 10Mbps download speed. (and some other extra’s)

Another advantage is that now they installed a Modem with integrated Wireless router and wired switch. So my old-setup is now obsolete. This is the new topology:

New network topology. Blue lines are Coax, Purple ethernet, Green: HDMI

So it eliminated the use of an extra router in my home, it is actually built into the modem itself. It supports 802.11N, so it is way faster than the one I had. The speed is really great!

In my home, I’m using 200Mbps Powerline Ethernet boxes to transmit the signal without the need for other cables. I have a switch under the tv, to get network to my XBox, I have another switch in the other corner of the room to get the network to my printer and PC. The laptops use wifi (duh) at equal speed as the wired network.

I don’t really understand yet how Telenet actually achieves this setup, because devices behind the modem get an internal IP, in the 198.168.0.* range, while the digicorder still gets an IP in the 10.166.179.* range. I should sniff my local network to really know what is going on. I will do that if I have a little bit more time. For the moment I’m just enjoying the Internet in high speed.

Do the test yourself at http://speedtest.telenet.be
Do the test yourself at http://speedtest.telenet.be

Note that the managment UI for the modem is reached through mijn.telenet.be, which is kind of nice. This means that they can remotely manage my modem/router. I don’t really mind doing that myself, but it’s nice to know they can help less knowledgeable users.

So don’t sit around, pick up the phone and make an appointment with Telenet today, to upgrade your internet experience for free. I didn’t have to pay activation or installation costs at all!

I was looking for a plugin that could take an image and put it fullscreen as a background on this blog. But I didn’t immediately find one, so I created one myself. I looked at the code in the google home page and started with the Hello Dolly plugin as a base template. It is just an <img> tag that is dynamically resized using jQuery. Here is the full source:

 * @package Full screen background
 * @version 0.1

Plugin Name: Full screen background
Plugin URI: http://www.trappers.tk/share/fullbg.tar.gz
Description: Full screen background, like the google home page 
Author: Jeroen Trappers
Version: 0.1
Author URI: http://blog.trappers.tk

function wp_full_bg() {
   <img id="wpfullbg" src="http://www.example.org/wallpaper.png" >
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
   <script type="text/javascript" language="javascript">
     $(function() {
     function fullbg() {
       var imgw = $('#wpfullbg').width();
       var imgh = $('#wpfullbg').height();
       var vpw = $(window).width();
       var vph = $(window).height(); 
       var imgratio = imgw / imgh;
       var viewportratio = vpw / vph;

       var w = vpw;
       var h = vph;
       if( viewportratio > imgratio )
         // screen is wider than picture -> increase the heigth of the picture;
         h = w / imgratio;  
         w = h * imgratio;

             'left': '0px',
             'width': w,
             'height': h,
             'z-index': '-2',
             'top' : '0px',
             'position' : 'fixed',
             'opacity' : '0.999999999'
add_action( 'wp_footer', 'wp_full_bg' )

This wordpress plugin is quite simple. It defines a function wp_full_bg which will be called by the wordpress system on the action wp_footer. That’s what you can see in the final line of code. The actual code of the php-function is quite simply outputting the html and javascript.
The first thing I do is create an image with a <img> tag.
Next I import the jQuery library from the Google CDN.
Now comes the real work: I use jQuery to wait for the document to be loaded. Then I call the javascript function fullbg. I also set up a jQuery event handler to listen for changes in the size of the window with the resize function.
In the fullbg function I first find the image and get it’s height and width. I do the same for the window. Then I use the size of the window to set to size of the image using an inline css style that I apply dynamically with the jQuery css function. In between I make sure to keep the original aspect ratio of the image, and smartly resizing it to always fully fit the window.
In the style, also the position and z-index are changed, so that the image is positioned underneath the content as a wallpaper or background.

I published the plugin on wordpress.org, so it should become available directly from the wordpress admin console soon. But if you can’t wait, you can download it here or here as well.