Learning C# iPad Programming

LEARNINGIPADC#

PROGRAMMING(REV 001)

Rich HeltonRhelton_1@yahoo.com

August 28, 2012

What is MonoDevelop?

• MonoDevelop is an open source integrated development environment for the Linux platform, MAC OS X, and Microsoft Windows, targeted for the development of software that uses Mono and the Micorosft .NET frameworks.

• See http://en.wikipedia.org/wiki/MonoDevelop

What is Mono?

• Mono is a free open source project led by Xamerin (formally Novell and originally by Ximian) to create an Ecma standard compliant .Net framework-compatible set of tools including, among others, a C# compiler and Common Runtime Language.

• See http://en.wikipedia.org/wiki/Mono_(software)

• See http://www.mono-project.com/Main_Page

Mono end-to-end

• Mono is a series of wrappers around Android, Mac, iOS, and more.

• There is the base Mono framework, the IDE, and MonoTouch is the framework for compiling on the iPad device.

• Pieces of code can be reused for other Mono frameworks.

• Just to get MAC diagnostics written in C# is enough to get me looking into it.

Still iOS

• iOS is the operating system for the iPhone, iPod, and iPad.

• We cannot escape learning bits of iOS by focusing on Mono, because Mono is a wrapper around iOS, but it helps us focus on the C# frameworks instead of getting lost in iOS.

• Mono allows us to use C# frameworks around iOS and other operating systems.

MonoGame

• MonoGame is an Open Source implementation of the Microsoft XNA 4 Framework.

• This allows us to build games in XNA for the iPad.

• http://monogame.codeplex.com/

XNA

• Microsoft’s XNA is a set of tools with a managed runtime environment provided by Microsoft that facilitates video game development and management.

• http://en.wikipedia.org/wiki/Microsoft_XNA

MonoMac

• MonoMac is the Mac OSX, not iOS, binding to .NET in Mono.

• By using MonoMac and MonoGame, XNA/C# games can be written for the Mac OSX, like Lion.

• http://www.mono-project.com/MonoMac

MonoMac Sample• A MonoMac sample for WhereisMyMac has

geolocated my Mac and me.

What is MonoTouch?

• MonoTouch allows developers to create C# and .NET based application that run on the IPhone.

• http://en.wikipedia.org/wiki/MonoTouch#MonoTouch

• There is a cost for licenses.• https://store.xamarin.com/

How does MonoTouch work?

• The MonoTouch platform compiles directly to the ARM assembly code.

• Even things like generics, which used to rely on Just In Time (JIT) compilation are available via Mono’s Ahead Of Time (AOT) compiler.

• http://docs.xamarin.com/iOS/getting_started/Introduction_to_MonoTouch#How_Does_MonoTouch_Work.3f

Default Assemblies

• There are many default assemblies in MonoTouch, many in support of XML, Linq, WCF, SQLite, Sockets and more.

• Assemblies can be added by adding DLL’s to the MonoTouch project as references.

• http://docs.xamarin.com/iOS/about/assemblies • http://iOSapi.xamarin.com/?link=root%3a%2fcl

asslib

There are many Apps in the App Store• There are many Apps from MonoTouch in the

App Store, but there is always a concern when relying on a proprietary licensed product like MonoTouch, but I always say that it is better to have something done quickly than not at all.

• Sample App Store Apps http://xamarin.com/apps

There are many Samples• https://github.com/xamarin/MonoTouch-sam

ples

• http://samples.xamarin.com/iOS • https://bitbucket.org/mrshrinkray/MonoTouc

h-samples/src

• http://MonoTouchexamples.com/• https://github.com/chrisntr/MonoTouch-Exa

mples

MONODEVELOP IS NOT

VISUAL STUDIO

There are many differences

• Just because something supports .Net 4, it doesn’t mean it supports Visual Studio 2010 functionality.

• It supports C# functionality wrapped around iOS.

• For Instance, I can set up a UnitTest directly with Visual Studio tools, while Mono uses Nunit, so just be aware that you may be missing Visual Studio features.

There are many differences

• For Instance, I can set up a Test Project for Visual Studio Test,

There are limitations

• Besides some of the Visual Studio plugins and extensions, MonoTouch does have C# language limitations, such as limited Generics Support.

• See http://docs.xamarin.com/iOS/about/limitations

INSTALLATION

You can play for free• An evaluation version of MonoTouch can be

used in the iPad simulator for the MAC OSX, but a license will have to be purchased when running the MonoTouch program on the physical device.

• The Trial can be downloaded from http://xamarin.com/trial/

You can play for free• An evaluation version of MonoTouch can be

used in the iPad simulator for the MAC OSX, but a license will have to be purchased when running the MonoTouch program on the physical device.

• The Trial can be downloaded from http://xamarin.com/trial/

Install…• Ensure Xcode is installed.• Install the Mono Framework• Install MonoDevelop• Install MonoTouch

Ensure that Xcode is installed• Install the correct Xcode for the MAC OSX,

get Xcode from https://developer.apple.com/devcenter/iOS/index.action

• Check Xcode Installation by using the Terminal and typing “/Developer/usr/bin/xcodebuild –version”

Install Mono• Install mono SDK from

http://www.go-mono.com/mono-downloads/download.html

• Install the MonoDevelop from http://monodevelop.com/

• Install MonoTouch http://xamarin.com/trial/

MVC

Model-View-Controller (MVC) The Model-View-Controller is the most common design pattern in Software Architecture. There is the .NET MVC3, or MVC4, framework that can be used to implement it in MonoTouch for iPad design as well as for ASP.NET design. An intro to MonoTouch MVC can be found at http://www.infoq.com/articles/MonoTouch-mvc

Model-View-Controller (MVC)• Here are the pieces:

UIKit MVC Microsoft’s MVC3 project is a ASP.NET implementation of MVC. For the iPad MVC, the iOS UIKIT will have to be used. When working with MonoTouch, a basic knowledge of iOS will have to be established. MonTouch adds C# .Net on top of iOS, it does not replace it. Let’s start with a MVC UIKit example.

An MVC Example Microsoft’s MVC3 project is a ASP.NET implementation of MVC. For the iPad MVC, the iOS UIKIT will have to be used and it will use it from the Xcode installed on the MAC OSX. When working with MonoTouch, a basic knowledge of iOS will have to be established. MonTouch adds C# .Net on top of iOS, it does not replace it. http://docs.xamarin.com/iOS/getting_started/intro_to_mvc_in_iOS

AppDelegate One of the classes defined in the UIKit is the AppDelegate which is automatically defined in all MonoTouch projects in Main.cs. Its function is to receive the notifications from the OS that may affect application. I like to the think of of it as the global handling of the application. http://escoz.com/blog/MonoTouch-uiapplication-and-appdelegate-explained/

AppDelegate functions Normally, there will be a function named FinishedLaunching that will have “window.makeKeyAnd” that will display the window from MainWindow.xib.

AppDelegate example

Other Delegates iOS contains other delegates that are used to pass information between the application and OS. Examples are UIAccelerometerDelegate, MPMediaPickerControllerDelegate, MKMapViewDelegate, UITableViewDelegate and more. These Delegates may use Protocols and Events for some of their communication.http://docs.xamarin.com/iOS/tutorials/Events%

2c_Protocols_and_Delegates

UIView UIView is the base class that contain all the screen elements and properties to be managed by the UIViewController. The UIView has many default subclasses that can be used, such as UIControl, UIScrollableView, UITableView and more. https://developer.apple.com/library/iOS/#documentation/uikit/reference/uiview_class/UIView/UIView.html

Some UIView subclasses

Notice that Interface Builder matches UIKit

UIViewController A default controller that controls the view. It comes with a lifecycle for functions to check if the ViewDidload, ViewDidUnload, and more.https://developer.apple.com/library/iOS/#do

cumentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html

UIViewController-> ViewDidLoad ViewDidLoad is very important because after the View loads, then many of the pieces are added here to the, like buttons, labels, and more views.

Starting with Controllers Many controllers will be derived from the UIKit UIViewController for the main UI View. Some examples can be found at http://www.infoq.com/articles/MonoTouch-mvc and http://www.knowing.net/index.php/MonoTouch-custom-viewcontroller-adding-stepwise-subviews/

Starting with Controllers Many controllers will be derived from the UIKit UIViewController for the main UI View. Some examples can be found at http://www.infoq.com/articles/MonoTouch-mvc and http://www.knowing.net/index.php/MonoTouch-custom-viewcontroller-adding-stepwise-subviews/

NIB File The NIB file is the compiled set of XIB files, the XML, for the App. It will be packaged in the deployed App. http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/LoadingResources/CocoaNibs/CocoaNibs.html

XIB File There are many XML file formats to help generate GUI’s, for example in Microsoft's WPF, there is the XAML file format. For iOS, it is the XIB file format. These file formats offer a good base to initialize the graphics based on the devices grid system, but tighter control of the graphics will rely on the MVC code.

XIB Code Generation

http://docs.xamarin.com/iOS/advanced_topics/xib_code_generation

Interface Builder The XIB file can be managed in Xcode’s Interface Builder.See http://en.wikipedia.org/wiki/Interface_Builder Pro’s and Cons of IB and XIB can be found at http://mobile.tutsplus.com/tutorials/iphone/interface-builder/

Outlets An outlet connects Interface Builder to the code. It is is the plumbing for the code behind for the MonoTouch to Objective-C bridge. http://docs.xamarin.com/iOS/advanced_topics/xib_code_generation#Outlet_Properties

Adding an Outlet An outlet can be added in the Interface Builder (IB) or programmatically. It can be added to the AppDelegate through IB. Programmatically, it can be added through the OutletAttribute:

[Outlet]UIButton ButtonTap { get; set; }

http://docs.xamarin.com/iOS/getting_started/hello_iphone#Adding_an_Outlet

Actions Actions in Objective-C are equivalent to control events in C#. Actions deliver notification signals to various objects.http://docs.xamarin.com/iOS/tutorials/Event

s,_Protocols_and_Delegates

Adding an Action An action can be added in the Interface Builder (IB) or programmatically. The IB will generate action code that can be done programmatically with the Action annotation:[Action ("actnButtonClick:")]partial void actnButtonClick (MonoTouch.Foundation.NSObject

sender);

http://docs.xamarin.com/iOS/getting_started/hello_iphone#Adding_an_Action

FIRST APP

MonoDevelop->New->Solution

Many pieces are created The AppDelegate.cs, Main.cs, default Controllers, and default XIBs are created now. The iPad application should compile and run already.

Many pieces are created

Code was generated The AppDelegate.cs and Main.cs were generated to start the application. For the main screen, a MainViewController.xib, MainViewController.cs, and the code behind that links the MainViewController to the XIB, as MainViewController.designer.cs. A similar second screen is created when “info” is pushed as FlipSideViewController.

Run-> Start Debugging (iPad Simulator Launches)

The showInfo Action will call the showInfo function, calling the FlipsController

We can see showInfo Action and MainController in the XIB view

Double Click -> FlipsideViewController.xib(Xcode Interface Builder Launches)

Add a Label

Run again, now it has a Label

There was a “done” button, notice the Action for done in the code behind and the function in the Controller

Some notes … We just changed the FlipsideViewController.xib, which may update the interface to the FlipSideViewController with the code behind code FlipSideViewController.designer.cs.

This also means that the label is in the XIB code and the object is embedded

Let’s add a label programmatically in ViewDidLoad

Executing it, we see the new (HomeView) label.

ADDING A VIEW

Add a ViewController to the Project

Which creates a default template for both the controller and XIB.

And an empty XIB that works as the View

Xamarim Recipe for Add a New View

Running the Add New View

MONOTOUCH.DIALOG

Intro MonoTouch.dialog is a framework for MonoTouch that can be found at https://github.com/migueldeicaza/MonoTouch.Dialog The purpose of MonoTouch.Dialog is to save time in building dialog boxes and showing table based information.

Many Demo Apps

Switching it to iPad

Demos in iPad

Xamarin offers a Tutorial

MonoTouch Elements(Extended classes of MonoTouch.Dialog)

MonoTouch Elements Running

Xamarin Elements Tutorial

Xamarin Reflections Tutorial

Running Reflections Tutorial

Reflections Tutorial Notes

• Notice that there is no XIB file or Controller class.

• There is a decorated class with the attribute values.

• A UITableView will be created with section SectionAttributes.

•

Set the values for the Dialog

Create the Controller Flow for the Dialog in the AppDelegate

WORKING WITH TABLES AND CELLS

Tables and Cells Intro

• UITableView is the most common layout and data display tool in iOS.

• A normal display could be simply displaying the rows of tables.

• See http://docs.xamarin.com/iOS/tutorials/Working_with_Tables_and_Cells

Xamarin Tutorial

Running the Basic Table

Running the Table Edit Mode

INTRO TO STORYBOARDS

Storyboards -- Apple

• In iOS5, Apple introduced a concept called Storyboards.

• A Storyboard is a visual representation of the user interface of an iOS application.

• See http://developer.apple.com/library/mac/#documentation/General/Conceptual/Devpedia-CocoaApp/Storyboard.html

Storyboards -- MonoTouch

• Xamarin offers a Tutorial and sample code for a Storyboard.

• See http://docs.xamarin.com/ios/tutorials/Introduction_to_Storyboards

Storyboards – The sample

• The sample will show Controllers, AppDelegate, plist, and Main as normal, but there is a also a storyboard file.

The Storyboard file in Xcode

Storyboards -- segue

• The segue manages the transitions between the scenes and passes data with a “sender”.

Storyboards -- dock

• The dock is used to define outlets and actions between the view controller and views.

Storyboards -- dock• The iPad can have multiple scenes appear at

once, but the scene is similar to a View.

Running the sample shows navigation

COMMANDSAND TOOLS

mono has several command line tools

mtouch Commands

Multiple IDE’s

• Multiple MonoDevoleps can be run on Mac OSX with “open -n /Applications/MonoDevelop.app”

• See http://microsoft2apple.com/2010/09/26/multiple-instances-of-monodevelop-on-a-mac/

MonoTouch Profiler

CONCLUSION