As recall, our data are stored in the Assignments property of the MyDocument class. As in the video, the first step is to implement the two methods related to our encoding/decoding in the Assignment class. The first is a constructor that will build the instance based on the encoded data.

[Export ("initWithCoder:")]
public Assignment (NSCoder coder)
{
	Name = coder.DecodeObject ("name") as NSString;
	Grade = coder.DecodeInt ("grade");
}

The second returns the encoded data corresponding to the instance.

[Export ("encodeWithCoder:")]
public void Encode (NSCoder coder)
{
	coder.Encode(new NSString (Name), "name");
	coder.Encode(Grade, "grade");
}

Note that both method need to be exported using the Export attribute to make sure that the backend knows what and when to call.

Now that our Assignment class contains the methods for decoding and encoding data we can save and load the list. Go back to the MyDocument class. We need to override GetAsData and ReadFromData. Let’s start with the method that will encode the data.

public override NSData GetAsData (string documentType, out NSError outError)
{
	outError = NSError.FromDomain (NSError.OsStatusErrorDomain, -4);

	var mutableData = new NSMutableData();
	var archiver = new NSKeyedArchiver (mutableData);
	Assignments.EncodeTo (archiver);
	archiver.FinishEncoding ();

	return mutableData;
}

Next, we need to load the data and update the Assignments property.

public override bool ReadFromData (NSData data, string typeName, out NSError outError)
{
	outError = NSError.FromDomain (NSError.OsStatusErrorDomain, -4);
	var unarchiver = new NSKeyedUnarchiver (data);
	Assignments = Activator.CreateInstance(typeof(NSMutableArray), 
	                                       new object[] { unarchiver }) as NSMutableArray;
	return true;
}

We can enjoy the Cocoa framework that manage the open/save windows, and the saving of the file. All we need to implement is archiving and de-archiving the datas.

To edit the info about the document type, go to Xamarin Studio and right-click on the project and then select Options.

In the new window, click on Mac OS X Application and go the Advanced tab. There you can find the same options as the one provided in Xcode.

And we’re done. You can now save and open files.

As usual, you can download the code here. Stay tuned by liking our Facebook page and following us on Twitter.

First, we will create a document-based project. To create such a project, select Monomac Document Project when creating the new project.

First, create the class that will represent an assignment. Note that it is important that the class extend NSObject and to be registered using the Register attribute. The properties needs to be exported (as explained in Lesson 19).

[Register("assignment")]
public class Assignment : NSObject
{
	[Export("name")]
	public string Name {
		get;
		set;
	}

	[Export("grade")]
	public int Grade {
		get;
		set;
	}

	public Assignment ()
	{
		Name = "Calc Quizz";
		Grade = 95;
	}
}

In the MyDocument.cs file, add a new property that will contain the list of assignments. Since we will be using the Cocoa Bindings, you need to export the property.

[Export("assignments")]
public NSMutableArray Assignments {
	get;
	set;
}

Of course, you need to initialize it:

void Initialize() {
	Assignments = new NSMutableArray ();
}

Don’t forget to call Initialize in the constructors. The rest of the video is only about the interface builder

You can download the code here. Don’t forget to like our Facebook page and to follow us on Twitter.

First, build the interface, as indicated in the video. Next, we will declare the necessary properties in the window controller.

public bool CheckBoxIsEnabled {
	get;
	set;
}

public int Amount {
	get;
	set;
}

To reference these properties in the interface builder, we need to export them. So, for both properties, add the Export attribute. For example

[Export("checkBoxIsEnabled")]
public bool CheckBoxIsEnabled {
	get;
	set;
}

In the interface builder, you can now make the connection in the Binding inspector. Make sure you select File’s Owner in the list for Bind to:. The model key path shall correspond to the exported value.

And we’re done. Remember to check the box Continuous if you want the slider to update the value when you move the knob. To set initial values, you can define them in the Initialize method.

void Initialize ()
{
	CheckBoxIsEnabled = true;
	Amount = 20;
}

You can download the code here. Don’t forget to like our Facebook page and to follow us on Twitter.

To create a new window, right-click on the project item in the left sidebar, go to Add and hit New File….

In the new window, choose Cocoa Window with Controller, specify a name and hit New

You can now edit the window by double-clicking on the Downloads.xib file. Note that you don’t need to create the controller by hand, it is automatically created by Xamarin. Same applies for the window outlet.

You can create an action connected to the menu item in your AppDelegate.h file.

Go back to Xamarin Studio to implement the method. As usual, go the the corresponding file (AppDelegate.cs in our case), type partial and hit space. This will trigger the autocompletion, select the method to complete and hit enter.

All you need to implement is to create a download controller and call the ShowWindow method with null as parameter. To avoid creating the controller multiple time, we will instantiate it if the field contains null. Your code should then look like this:

DownloadsController downloadController;

partial void showDownloads (NSObject sender)
{
	if (downloadController == null)
		downloadController = new DownloadsController ();
	downloadController.ShowWindow (sender);
}

And, we are done. As usual, you can download the code here. Don’t forget to like our Facebook page and to follow us on Twitter.

This is the first tutorial about Core Animation. Core Animation is a technology developed by Apple to animate interface in Cocoa. You can do simple and basic animations as well as complex ones. I’ll we be using Xcode and Xamarin Studio to develop the examples.

If you want to know more, the tutorial and the original video is based on the (sadly out-of-print) book by Bill Dudney “Core Animation for Mac OS X and the iPhone: Creating Compelling Dynamic User Interfaces”.

We will first start with an example where we do not have an animation so I make sure that you understand what is an animation. So, consider the following where the image is on the left and then on the right with no elapsed time between the two. There is no smooth transition from one position to the other.

Animation is the idea that we progressively change the value over time. So we consider a set of intermediate step between the first and last positions (and other properties). In the following video, we animated the size, position and opacity of the image.

Now, let’s dive into the real work and code that using Xamarin Studio and Xcode. So start Xamarin and create an new empty project. See the Lesson 1 in our Cocoa programming serie for how-to create such a project.

Once your project is created we will first build the interface. So double-click, in the left sidebar, on the file MainWindow.xib to open Xcode. Once Xcode is loaded, drag’n’drop an NSView in the window. See Cocoa Programming L10: NSImageView for more details about how to create a window with an NSView in it. Once drag’n’dropped, go to the Identity inspector in the right toolbar of Xcode and edit the field Class to be set to MoveView.

MoveView will be our custom NSView where the animation will take place. Now, we will create that class. Go back to Xamarin Studio and create a new file (hit ⌘N or File > New File…). Then select MonoMac in the left sidebar and Cocoa View in the right one. Give it the name MoveView and hit New.

For this tutorial, we will use the constructor taking a rectangle (or a frame) as parameter. This constructor is not added by default in your new file. So add a new constructor with a RectangleF frame as parameter. We also need to export it with the Export attribute so that Xamarin.Mac framework knows that this C# constructor corresponds to the Objective-C constructor. So basically your constructor should look like this:

[Export ("initWithFrame:")]
public MoveView (RectangleF frame) : base (frame)
{
	Initialize ();
}

This view is a sort of canvas for our animation. We will move an NSViewImage from one rectangle to another, as shown in the previous video. First, we will create our imageView and our two frames: one for the start and one for the end. Frames are represented by RectangleF. To do that, declare the three private fields.

NSImageView imageView;
RectangleF startFrame;
RectangleF endFrame;

The key idea is to create the start frame as rectangle on the bottom left (see video) and the end frame at the center right. The size of the frames will be different. Our first frame will be a third of the width and height of the window and the end one will be half of the width of the window. In our constructor, we can first get the width and the height of the window using the frame parameter.

var width = frame.Width;
var height = frame.Height;

Now that we have these two local variable set, we can create our two frames. As explained before, the first frame will be anchored in (0,0) and its width will correspond to the third of the window width whereas the height will be a third of the window height.

startFrame = new RectangleF (0, 0, width/3f, height/3f);

Our end frame is created very similarly

endFrame = new RectangleF (width/2f, 100, width/2f, height/3f);

Now, we can focus on the image. First, we need to include the image in our project. To do so, you can drag’n’drop the image from the finder to Xamarin Studio. So click on the image in the finder and drop it on the project name in the left sidebar of Xamarin Studio. When you drop the file, Xamarin Studio asks you what to do with the file. Select Copy and hit Ok.

One last thing to do before being able to access the image is to make it available as a resource. Right-click on the image, go to Build Action and select BundleResource. Now, we can access it easily in our code.

We now want to create an NSImageView that will contain our image and display it in the correct frame. First, let’s instantiate a new NSImageView with startFrame as parameter. The second step is to tell the image view the image to display. This is achieved by setting the Image property to a new NSImage instance. When an image is known as a BundleResource, you can use NSImage.ImageNamed ("image.jpg") to create a new instance corresponding to the image named as specified in parameter. The last step concerning our image view is to allow the framework to scale the image to the frame dimensions. Set the ImageScaling property to NSImageScale.AxesIndependently.

imageView = new NSImageView (startFrame);
imageView.Image = NSImage.ImageNamed ("image.jpg");
imageView.ImageScaling = NSImageScale.AxesIndependently;

To display our image, we need to add the NSImageView as a subview of our MoveView.

AddSubview (imageView);

Now, we have our constructor implemented. It should look like this:

[Export ("initWithFrame:")]
public MoveView (RectangleF frame) : base (frame)
{
	Initialize ();

	var width = frame.Width;
	var height = frame.Height;

	startFrame = new RectangleF (0, 0, width/3f, height/3f);
	endFrame = new RectangleF (width/2f, 100, width/2f, height/3f);

	imageView = new NSImageView (startFrame);
	imageView.Image = NSImage.ImageNamed ("image.jpg");
	imageView.ImageScaling = NSImageScale.AxesIndependently;

	AddSubview (imageView);
}

If you launch the application, you will have a window with the image at the bottom left.

Now, we want that the image change when a key is pressed. The first step is to allow our view to respond to keys. The second step is to change the frame of the NSImageView subview. To allow the view to catch key events, you need to make it accept first responder. To enable that, override the property AcceptsFirstResponder.

public override bool AcceptsFirstResponder ()
{
	return true;
}

Next, we can react when a key is pressed. To react, override the method KeyDown to change the Frame property.

public override void KeyDown (NSEvent theEvent)
{
	imageView.Frame = endFrame;
}

If we want the animation to got back and forth we need to introduce a boolean field memorising whether we are at start or not. So add a field, set it to true in the constructor and update KeyDown method to react differently whether we are at start or not.

public override void KeyDown (NSEvent theEvent)
{
	if (atStart) {
		imageView.Frame = endFrame;
	} else {
		imageView.Frame = startFrame;
	}
	atStart = !atStart;
}

Now, we can change the opacity of the image. To change the opacity, you need to update the property AlphaValue of the imageView. For example, the following line set the opacity to 25%.

imageView.AlphaValue = .25f;

Now we have the version without the animation. This amount to what was presented in the first demo video.

The next tutorial will present in details what is an Animator Proxy but this tutorial will simply show you how we can use the default, basic, animator for moving, scaling and fading our image. All we need to do is to update not the imageView itself but the animator of the imageView. For example:

public override void KeyDown (NSEvent theEvent)
{
	if (atStart) {
		((NSImageView) imageView.Animator).Frame = endFrame;
		((NSImageView) imageView.Animator).AlphaValue = .25f;
	} else {
		((NSImageView) imageView.Animator).Frame = startFrame;
		((NSImageView) imageView.Animator).AlphaValue = 1;
	}
	atStart = !atStart;
}

Note that the animator has the same type as our image view so it is really convenient! And, now, we are done. We created our first animation in Cocoa.

To sum up, what did we learned in that tutorial?

• How to create a project
• How to add an image to an NSView
• How to change the image location, size and opacity in an NSView
• How to use the proxy animator to make smooth transitions

See you in the next tutorial If you need, you can download the code CoreAnimation-Lesson1. Don’t forget to like our facebook page, to follow us on twitter and to let comments or ask questions in the comments!

As in the previous lesson, we first build the interface in the interface builder. Then create an outlet for the label and bind the two buttons to the same action. Once you’re done, you can go back to Xamarin Studio, open the MainWindowController.cs file, and start implementing the partial method toolbarAction we just created in IB.

The sender is bound the element that caused the action to be raised. In this case, the sender is then a NSToolbarItem. This class has a property called tag that correspond to the tag we set in the IB. Using this tag, you can deduce what button was clicked.

partial void toolbarAction (NSObject sender)
{
	var item = sender as NSToolbarItem;

	if (item.Tag == 0) 
		this.label.StringValue = "Hello!";

	if (item.Tag == 1) 
		this.label.StringValue = "Computer!";
}

And we are done. As usual, you can download the source code here. Don’t forget to like our Facebook page and to follow our tweets.

To add the label to the main window, proceed as we did before by editing the MainWindow.xib file. To edit the menu, you need to edit the MainMenu.xib file. Now that our example menu is created, we will create the needed outlet and actions.

We will proceed slightly differently from the video as we do not have an AppController. Create an outlet in the MainWindowController for the label, as we usually did. So, your MainWindowController.h shall look like

@interface MainWindowController : NSWindowController {
    NSTextField *label;
}
@property (assign) IBOutlet NSTextField *label;

@end

For the actions, we will use the AppDelegate.h file. After creating two actions for our menu, you should have a file that looks like this:

@interface AppDelegate : NSObject {
}
- (IBAction)sayGoodbye:(id)sender;
- (IBAction)sayHello:(id)sender;
@end

Now, we can go back to Xamarin Studio and implement the behavior. What will do for the actions is to simply forward the call to the main window controller.

partial void sayGoodbye (NSObject sender)
{
	mainWindowController.SayGoodbye ();
}

partial void sayHello (NSObject sender)
{
	mainWindowController.SayHello ();
}

We now have to extra methods to write in our controller for the main window. These methods will contain the real behavior for the actions.

public void SayGoodbye ()
{
	this.label.StringValue = "Goodbye!";
}

public void SayHello ()
{
	this.label.StringValue = "Hello!";
}

And we are done. As usual, the code is accessible here and don’t forget to like our facebook page and to follow us on Twitter.

The first step is to add a new action to our MainWindowController.h for the button Remove. So open Xcode and drag’n’drop the button to create such action. Your file should now look like this

@interface MainWindowController : NSWindowController {
	NSTableView *_tableView;
}

@property (nonatomic, retain) IBOutlet NSTableView *tableView;

- (IBAction)add:(id)sender;
- (IBAction)remove:(id)sender;

@end

Now we can specify the behavior. So go back to Xamarin Studio and edit the file MainWindowController.cs to implement the partial method remove we just created in Interface Builder. Here we just want to remove the selected item. To know what is the selected row, you can use the property SelectedRow. So in our architecture, we will first implement the partial method add in MainWindowController. This method will delegate most of the work to our table controller.

partial void remove (NSObject sender)
{
	if (this.tableView.SelectedRow > 0)
		this.tableController.Remove (this.tableView.SelectedRow);
}

In our table controller, we will remove the element at specified index and tell the table to reload its data.

public void Remove (int selectedRow)
{
	list.RemoveAt (selectedRow);
	tableView.ReloadData ();
}

And now, we can remove data from our table. Our next step is to edit values in the table. To do so, we need to implement a new method in our table controller. Open the class TableController and override the method SetObjectValue. Here, the code is very similar to the one we developed in previous lesson for returning the value contained at a specific row and column position.

public override void SetObjectValue (NSTableView tableView, 
                                     NSObject theObject, 
                                     NSTableColumn tableColumn, 
                                     int row)
{
	if (tableColumn.Identifier == "name")
		list[row].Name = ((NSString) theObject);

	else if (tableColumn.Identifier == "age")
		list[row].Age = int.Parse (((NSString) theObject));

	else
		throw new NotImplementedException (string.Format ("{0} is not recognized", 
		                                                  tableColumn.Identifier));
}

To fix the last problem depicted in the video, just add the following line to the remove method in the MainWindowController class.

this.tableView.AbortEditing ();

Feel free to download the code Lesson15, like our facebook page and follow us on Twitter! Also, don’t hesitate to make comments and ask questions

Before continuing the video, I’ll use a different architecture for this project. We have our MainWindowController that will contain an instance of TableController. TableController will contains all the actions related to the table (no surprise) and the MainWindowController will just delegate the generated actions to the corresponding action in TableController. This helps in keeping a clean separation of concerns between classes, and also works better with the Xamarin Studio/Xcode integration. So first, create an outlet for the table view in MainWindowController. Your MainWindowController.h file shall look like this:

@interface MainWindowController : NSWindowController {
    NSTableView *tableView;
}
@property (assign) IBOutlet NSTableView *tableView;

@end

Back to Xamarin Studio, we add a new private variable holding the table controller and initialise it with our corresponding instance.

private TableController tableController;
public override void AwakeFromNib ()
{
	base.AwakeFromNib ();
	this.tableController = new TableController (this.tableView);
}

Now that this setup is done, we can continue to follow the video instructions. So, the first step is to add an action on the Add button. So open the MainWindow.xib file and drag’n’drop the button, while holding Ctrl key, in the file MainWindowController.h. Select action and give it a name (here add). Your file should look like this

@interface MainWindowController : NSWindowController {
    NSTableView *tableView;
}
@property (assign) IBOutlet NSTableView *tableView;
- (IBAction)add:(id)sender;

@end

Now, go back to Xamarin Studio and open the file MainWindowController.cs to implement the method add. As I explained before, we will invoke the corresponding method on our table view controller.

partial void add (NSObject sender)
{
	this.tableController.Add ();
}

For now, the method is not yet defined. You can right click on Add (), select Refactor and hit Create method.

Then select the best place to implement the method and hit enter.

You will then a auto-generated method stub

public void Add ()
{
	throw new NotImplementedException ();
}

There, we will just add a new element to our list.

public void Add ()
{
	list.Add (new Person ());
}

Now, we have a list that will populated every time we hit the Add button. For now, nothing is displayed in our table. We have to implement the interface NSTableViewDataSource. So let’s edit our table view controller.

public class TableController : NSTableViewDataSource
{
  ...
}

Note that NSTableViewDataSource is a class that already extend NSObject, you then need to get rid of the previous NSObject reference. The two methods we will override are GetRowCount and GetObjectValue.

The first method returns the number of elements contained in our list. This is a reasonable implementation:

public override int GetRowCount (NSTableView tableView)
{
	return list.Count;
}

The second method asks for a specific element. For instance, the age in the second row. First, let’s setup the identifiers in the interface builder. So go back to Xcode and set the identifiers as explained in the video: select the column, go to the Identity inspector and specify the identifier in the corresponding field. Once the identifiers were specified, go back to Xamarin Studio and continue editing our table controller.

For our method GetObjectValue, we will get the element corresponding to the row and return the property value corresponding to the column. Note that such pattern is common in Apple development and it is known as key-value coding. We need to return instances of NSObject, I decided here to return basic NSString.

public override NSObject GetObjectValue (NSTableView tableView, 
                                         NSTableColumn tableColumn, 
                                         int row)
{
  if (tableColumn.Identifier == "name")
    return new NSString (list[row].Name);

  if (tableColumn.Identifier == "age")
    return new NSString (list[row].Age.ToString ());

  throw new NotImplementedException (string.Format ("{0} is not recognized", 
                                     tableColumn.Identifier));
}

We are mostly done. If you followed correctly, our two new methods are not bound nor called by anyone. This is the last step for that post. We need to proceed differently that the way presented in the video. In the video, you can setup the datasource by connecting elements in Interface builder. In C#, we need to do it programatically. According our architecture, it is best to bound the table controller and the table view in the TableController constructor. So edit the file TableController.cs and update the constructor to set the DataSource property of our tableView.

public TableController (NSTableView tableView)
{
	this.tableView = tableView;
	list = new List ();

	this.tableView.DataSource = this;
}

Now, if you run the application you will not see anything displayed in our table. Even if you hit the Add button several times. In fact, when a new data is added to the table, the view is not notified for this change and we need to do it manually. To do so, go to the Add method the TableController class and add the following line :

tableView.ReloadData ();

Now you’re done As usual, you can download the code Lesson14. And don’t forget to like our Facebook page and to follow us on Twitter so that you don’t miss an update.

So we create a new project, and build the interface. As recall, to build the interface, double-click on the file MainWindow.xib.

Create a new class, named Person and contains two properties: a string Name and an int Age. You end up with a similar code

public class Person
{
	public string Name {
		get;
		set;
	}

	public int Age {
		get;
		set;
	}

	public Person ()
	{
		Name = "Yoda";
		Age = 300;
	}
}

We now create the controller for the table. So we create a new class, named TableController. This class also extends NSObject and contains two private variables: one for referencing the table view and the other for maintaining the list of datas.

public class TableController : NSObject
{
	private NSTableView tableView;
	private IList list;

	public TableController (NSTableView tableView)
	{
		this.tableView = tableView;
		list = new List ();
	}
}

You can download the code Lesson13. And don’t forget to like our Facebook page and to follow us on Twitter so that you don’t miss an update.