Friday, July 30, 2010

Create UIView, UILabel and UIButton programmatically.

A year ago, when I needed to make my first iPhone application, Interface Builder looked for me very complicated. I came from the Microsoft Windows Mobile world where we created all GUI created programmatically (the standard controls are very poor, MFC worked too slow, etc.). My task has nothing to do with the GUI. I needed a test-wrapper for my code that was supposed to test a 3rd party framework. Google helped me to find few tutorials but all of then proposed to work with Interface Builder. It is really nice and simple to choose a control and put it on my application window in the Interface Builder. But how to connect this control with my code? In the beginning it was a kind of a rebus I had to solve. It was not very obvious for me to catch all these outlets, actions and bindings, Command- and Control-clicks, six different Inspectors,...
I hope this article will help to someone who likes me a year ago is looking for a way to make his first program without Interface Builder.

Let's assume that we know nothing about Xcode, Objective-C and Cocoa Touch - these are my conditions a year ago.

The following steps will help us to create a simple iPhone program with a label and a button:

1. Create Window-based iPhone application.
Launch Xcode. In menu File choose item "New Project...". In the project wizard that comes next, in the left panel select "Application" item in the "iPhone OS" section. Select "Windows-based Application" icon on the right and press "Choose". Next window asks to set a name for the project. Type "First" and press "Save" button. By default the project is created in the "My Document" folder.

2. Add UIView programatically.
In the project window, on the left panel that looks like the Finder sidebar you need to find FirstAppDelegate.m file. This sidebar represents as a tree all files of the project. The root of that tree is the project file. You can open this item and all others in the same was as you do with the folder in the Finder. If you have found the FirstAppDelegate.m file, click on it and its content will be shown in the right panel. There is a lot of code but we need only one function application didFinishLaunchingWithOptions. Make it look so:
/- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
        (NSDictionary *)launchOptions 
{    
    // Window bounds.
    CGRect bounds = window.bounds;
    
    // Create a view and add it to the window.
    UIView* view = [[UIView alloc] initWithFrame: bounds];
    [view setBackgroundColor: [UIColor yellowColor]];
    [window addSubview: view];
             
       [window makeKeyAndVisible];
    
    [view release];
    
    return YES;
}

3. Build and Run.
In Xcode, in project window, in the left-up corner you can a toolbar that now, probably, contains text "Device - 4.0. Debug. First". It is a popup button. You need to click on it and select Simulator. Now press on "Build and Run" button. If you see the simulator ruuning, if you see an ugly yellow window on it - you did everything perfect. Close the simulator and go back to Xcode - there is "Quit" item in the main menu of the simulator.

4. Add a label.
Here is the code that should be added to the same function after the line [window addSubview: view};:
CGRect labelFrame = CGRectMake( 10, 40, 100, 30 );
UILabel* label = [[UILabel alloc] initWithFrame: labelFrame];
[label setText: @"My Label"];
[label setTextColor: [UIColor orangeColor]];
[view addSubview: label];
You can Build and Run the program again to check the label is on the application screen.

5. Create and the button.
After the label code in the same function we need to add the following:
CGRect buttonFrame = CGRectMake( 10, 80, 100, 30 );
UIButton *button = [[UIButton alloc] initWithFrame: buttonFrame];
[button setTitle: @"My Button" forState: UIControlStateNormal];
[button setTitleColor: [UIColor redColor] forState: UIControlStateNormal];
[view addSubview: button];
Build and Run the program. These orange label and white button with the red title is our art.
If something goes wrong, verify our working function:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
        (NSDictionary *)launchOptions 
{    
    
    // Override point for customization after application launch.
    

    // Window bounds.
    CGRect bounds = window.bounds;
    
    // Create a view and add it to the window.
    UIView* view = [[UIView alloc] initWithFrame: bounds];
    [view setBackgroundColor: [UIColor yellowColor]];
    [window addSubview: view];

    // Create a label and add it to the view.
    CGRect labelFrame = CGRectMake( 10, 40, 100, 30 );
    UILabel* label = [[UILabel alloc] initWithFrame: labelFrame];
    [label setText: @"My Label"];
    [label setTextColor: [UIColor orangeColor]];
    [view addSubview: label];
    
    // Create a button and add it to the window.
    CGRect buttonFrame = CGRectMake( 10, 80, 100, 30 );
    UIButton *button = [[UIButton alloc] initWithFrame: buttonFrame];
    [button setTitle: @"My Button" forState: UIControlStateNormal];
    [button setTitleColor: [UIColor redColor] forState: UIControlStateNormal];
    [view addSubview: button];
                         
        [window makeKeyAndVisible];
    
    [button release];
    [label release];
    [view release];
    
    return YES;
}

6. Add an action.
In our program the button does nothing. Let's add an action. In the header file (FirstAppDelegate.h) you need to add one line:
- (void)buttonClicked: (id)sender;
In Xcode, Alt-Cmd-Up keyboard shortcut will switch the editor to the header file from the m-file. If you have added this line, use the same keyboard shortcut to switch back to the m-file. and implement the action:
- (void) buttonClicked: (id)sender
{
    NSLog( @"Button clicked." );
}
Now modify the code creating the button and add the following code:
[button addTarget: self 
               action: @selector(buttonClicked:) 
     forControlEvents: UIControlEventTouchDown];
Now if you will build and run the program in the Xcode console you will see "Button clicked" text.

Tuesday, July 27, 2010

Cocoa: Implicit Animation

This program will help to begin with the Core Animation.
1. In Xcode create Max OS X Cocoa Application.
2. In the Application delegate implementation file (automatically created by Xcode on Snow Leopard) add a button to the content view:
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification 
{
    // Create new button in content view.
    NSRect frame = NSMakeRect(10, 40, 90, 40);
    NSButton* pushButton = [[NSButton alloc] initWithFrame: frame];
    pushButton.bezelStyle = NSRoundedBezelStyle;
    [pushButton setTitle: @"Move"];
    [self.window.contentView addSubview: pushButton];
    
    // Set the button target and action.
    pushButton.target = self;
    pushButton.action = @selector(move:);
    
    [pushButton release];
}
3. As you see from the code above the method -move is set as the button action. So add IBAction move to the application delegate class. The interface should look so:
#import <Cocoa/Cocoa.h>

@interface ImplicitAnimationAppDelegate : NSObject <NSApplicationDelegate> 

@property (assign) IBOutlet NSWindow *window;

- (IBAction)move: (id)sender;

@end
And -move method in the implementation file:
- (IBAction)move: (id) sender
{
    // The button frame.
    NSRect senderFrame = [sender frame];
    
    //The view bounds. The button belongs to this view.
    NSRect superBounds = [[sender superview] bounds];
    
    // Calculate new position within the view bounds.
    senderFrame.origin.x = (superBounds.size.width -
                            senderFrame.size.width) * drand48();
    senderFrame.origin.y = (superBounds.size.height -
                            senderFrame.size.height) * drand48();
    
    // Move the button.
    //[sender setFrame: senderFrame];
    [[sender animator] setFrame: senderFrame];
}
The commented line [sender setFrame: senderFrame]; simply moves the button. Line [[sender animator] setFrame: senderFrame]; creates an animation effect - the location change was split up for few movements.
Short description: each thread maintain an automation context. It is possible to object the object of this context as:
[NSAnimationContext currentContext];
Then, it is possible to customize this object, for example, change the duration:
[[NSAnimation currentContext] setDuration: 1.0];

Monday, July 26, 2010

Jailbreak is legal?

I even don't know if it is true:
Now Legal to Jailbreak Your iPhone in the U.S.

"Not only is jailbreaking now okay, but ripping DVDs and cracking video game or software encryption is too, in certain special circumstances. It doesn’t exactly mean it’s open season for any and all piracy, but it does relax things quite a bit, and will probably make it much harder to prosecute those kinds of violations."

More about it:
Money. CNN. Jailbreaking iPhone apps is now legal
EFF Wins New Legal Protections for Video Artists, Cell Phone Jailbreakers, and Unlockers

Sunday, July 25, 2010

Template program to learn Cocoa graphics

The standard way to learn new programming language is very boring for me - endless reading of heavy books, typing useless programs that calculates factorials,... Since my student times, since GWBASIC I begin from the graphics, simple graphic, rectangles, circles - the graphic primitives. When I know how to draw them, I can go on and learn the basic language constructions, language semantic and programming techniques.
This way works for me in my Cocoa period. In this post I'd like to show two methods to create a template project that allows to learn the Cocoa graphical primitives. This template can grow in your hands and become a real Cocoa (or Coco Touch) application.
As any Cocoa application this application has a main window and a view inside. That's all. First method uses Interface Builder. The second one fully ignores the Interface Builder.

Method with Interface Builder.
1. Create new project in Xcode from the Cocoa Application template, add new Objective-C class derived from NSView, give a name to this class, for example DrawingView.
2. Launch Interface Builder by pressing on the MainMenu.xib file. Find "custom view" in the Library, drag and drop it onto the application window. Set the view size - almost the whole window. In the Size Inspector (Cmd+3) set the autosizing options. In the Identity Inspector (Cmd+6) set the view name as DrawingView. Save the project (Ctrl+S).
3. Switch to Xcode and open DrawingView.m file. In -drawRect method we can add our drawing code. For example:
- (void)drawRect:(NSRect)dirtyRect {
    // Drawing code here.
    
    [NSGraphicsContext saveGraphicsState];
    
    NSRect rect = NSInsetRect([self bounds], 5, 5 );
    [[NSColor blueColor] set];
    NSRectFill( rect );
    
    [NSGraphicsContext restoreGraphicsState];
}
The application runs:

Method without Interface Builder.
1. The first item is the same - create new project in Xcode from the Cocoa Application template, add new Objective-C class derived from NSView.
2. Open the implementation of the application delegate class (AppDelegate.m) and create the view object in the launching method:

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
    // Insert code here to initialize your application 
    DrawingView *view = [[DrawingView alloc] 
                         initWithFrame: [self.window.contentView bounds]];
    [self.window.contentView addSubview: view];
    [view setAutoresizingMask: ( NSViewWidthSizable | NSViewHeightSizable) ];
    [view release];
}
3. Open the view implementation class and add the drawing code.
Launch the application.

Sunday, July 18, 2010

Cocoa: NSScanner

sscanf is a standard C function. We use it so rarely, but it exists and can be the fastest method to parse a string. In order to remind I post this short program that uses sscanf to retrieve two float number from a string:
#include <stdio.h>

int main (int argc, const char * argv[]) 
{
    float x, y;
    const char* string = "3.1415 6.28";
    sscanf(string, "%f %f", &x, &y);
    printf("x = %.4f, y = %.2f\n", x, y);
    return 0;
}

How to parse this string in Objective-C?
Firstly, this is Objective-C, so the same code will work:
#import <Foundation/Foundation.h>
#include <stdio.h>

int main (int argc, const char * argv[]) 
{
    NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
    
    float x,y;
    const char* string = "3.1415 6.28";
    sscanf(string, "%f %f", &x, &y);
    
    NSLog(@"x = %.4f, y = %.2f", x, y);
    
    [pool drain];
    return 0;
}
Secondly, this is Objectve-C. So there is a special class NSScanner that does the work.
#import <Foundation/Foundation.h>

int main (int argc, const char * argv[]) 
{
    NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];

    float x, y;
    NSString* str = @"3.1415 6.28";
    NSScanner* scanner = [NSScanner scannerWithString:str];
    [scanner scanFloat: &x];
    [scanner scanFloat: &y];
    NSLog(@"x = %.4f, y = %.2f", x, y);
    [pool drain];
    return 0;
}

Let's make a more complicated example. The following program will create a text file and save three basic graphical structures in it: NSPoint, NSSize and NSRect.
#import <Foundation/Foundation.h>

int main (int argc, const char * argv[]) 
{
    NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];

    NSString* fileName = @"coordinate.txt";
    NSError* err = nil;
    
    NSPoint point;
    NSSize size;
    NSRect rect;

    // Write NSPoint, NSSize and NSRect to file.
    point = NSMakePoint( 3.1415, 6.28 );
    size = NSMakeSize( 2, 14 );
    rect = NSMakeRect( 10, 10, 200, 100 );
    
    NSString* outString = [NSString 
stringWithFormat:@"point = %@; size = %@; rectangle = %@;",
      NSStringFromPoint(point), NSStringFromSize(size), NSStringFromRect(rect) ];
    
    [outString writeToFile: fileName 
atomically: NO encoding: NSASCIIStringEncoding error: &err];
    
    [pool drain];
    return 0;
}
The output file looks so:

Of course, this file can be parsed in the standard C with the simple sscanf. The next Objective-C program does it with NSScanner class:

#import <Foundation/Foundation.h>

int main (int argc, const char * argv[]) 
{
    NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];

    NSString* fileName = @"coordinate.txt";
    NSError* err = nil;
    
    NSPoint point;
    NSSize size;
    NSRect rect;

    NSStringEncoding encoding;
    NSString* inString = [NSString stringWithContentsOfFile: fileName 
                                               usedEncoding: &encoding 
                                                      error: &err];
    
    NSString* strPoint = @"point =";
    NSString* strSize = @"size =";
    NSString* strRect = @"rectangle =";
    
    if ( err == nil )
    {
        if ([inString length] > 0)
        {
            NSString* str;
            NSScanner* scanner = [NSScanner scannerWithString: inString];
            
            if ( [ scanner scanString: strPoint intoString: NULL] )
            {
                [scanner scanUpToString: @";" intoString: &str];
                [scanner scanString: @";" intoString: NULL];
                point = NSPointFromString( str );
            }
            
            if ( [scanner scanString: strSize intoString: NULL])
            {
                [scanner scanUpToString: @";" intoString: &str];
                [scanner scanString: @";" intoString: NULL];
                size = NSSizeFromString( str );
            }
            
            if ( [scanner scanString:strRect intoString: NULL] )
            {
                str = [inString substringFromIndex: [scanner scanLocation]];
                rect = NSRectFromString( str );
            }
            
            NSLog( @"point = %@", NSStringFromPoint( point ) );
            NSLog( @"size = %@", NSStringFromSize( size ) );
            NSLog( @"rectangle = %@", NSStringFromRect( rect ) );
        }
    }
    
    [pool drain];
    return 0;
}
Program output:

Program loaded.
run
[Switching to process 57339]
Running…
2010-07-18 21:48:24.201 CoordinatesToString[57339:a0f] point = {3.1415, 6.28}
2010-07-18 21:48:24.205 CoordinatesToString[57339:a0f] size = {2, 14}
2010-07-18 21:48:24.206 CoordinatesToString[57339:a0f] rectangle = {{10, 10}, {200, 100}}

Mac OS X Reference Library:
NSScanner Class Reference
String Programming Guide. Scanners.