Building IPAD Apps in MonoTouch

1. LEARNING
IPAD
C#
PROGRAMMING
(REV 001)
Rich Helton
Rhelton_1@yahoo.com
August 28, 2012

2. 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

3. 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

4. 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.

5. 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.

6. 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/

7. 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

8. 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

9. MonoMac Sample
• A MonoMac sample for WhereisMyMac has
geolocated my Mac and me.

10. What is MonoTouch?
• MonoTouch allows developers to create C#
and .NET based application that run on the
IPhone.
• http://en.wikipedia.org/wiki/MonoTouch#M
onoTouch
• There is a cost for licenses.
• https://store.xamarin.com/

11. 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_M
onoTouch_Work.3f

12. 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%2fcla
sslib

13. 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

14. There are many Samples
• https://github.com/xamarin/MonoTouch-
samples
• http://samples.xamarin.com/iOS
• https://bitbucket.org/mrshrinkray/MonoTouc
h-samples/src
• http://MonoTouchexamples.com/
• https://github.com/chrisntr/MonoTouch-
Examples

15. MONODEVELOP
IS NOT
VISUAL STUDIO

16. 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.

17. There are many differences
• For Instance, I can set up a Test Project for
Visual Studio Test,

18. 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/limitatio
ns

19. INSTALLATION

20. 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/

21. 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/

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

23. Ensure that Xcode is installed
• Install the correct Xcode for the MAC
OSX, get Xcode from
https://developer.apple.com/devcenter/iOS/i
ndex.action
• Check Xcode Installation by using the
Terminal and typing
“/Developer/usr/bin/xcodebuild –version”

24. Install Mono
• Install mono SDK from http://www.go-
mono.com/mono-downloads/download.html
• Install the MonoDevelop from
http://monodevelop.com/
• Install MonoTouchhttp://xamarin.com/trial/

25. MVC

26. 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

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

28. 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.

29. 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

30. 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/

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

32. AppDelegate example

33. 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%2
c_Protocols_and_Delegates

34. 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/#do
cumentation/uikit/reference/uiview_class/UIVi
ew/UIView.html

35. Some UIView subclasses

36. Notice that Interface Builder matches UIKit

37. 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

38. 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.

39. Starting with Controllers
 Many controllers will be derived from the
UIKitUIViewController 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/MonoTouc
h-custom-viewcontroller-adding-stepwise-
subviews/

40. Starting with Controllers
 Many controllers will be derived from the
UIKitUIViewController 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/MonoTouc
h-custom-viewcontroller-adding-stepwise-
subviews/

41. 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/#do
cumentation/Cocoa/Conceptual/LoadingResour
ces/CocoaNibs/CocoaNibs.html

42. 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.

43. XIB Code Generation
http://docs.xamarin.com/iOS/advanced_topi
cs/xib_code_generation

44. 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/in
terface-builder/

45. 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_topi
cs/xib_code_generation#Outlet_Properties

46. 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]
UIButtonButtonTap { get; set; }
http://docs.xamarin.com/iOS/getting_started/he
llo_iphone#Adding_an_Outlet

47. 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

48. 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/hell
o_iphone#Adding_an_Action

49. FIRST APP

50. MonoDevelop->New->Solution

51. 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.

52. Many pieces are created

53. 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.

54. Run-> Start Debugging
(iPad Simulator Launches)

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

56. We can see showInfo Action and
MainController in the XIB view

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

58. Add a Label

59. Run again, now it has a Label

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

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

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

63. Let’s add a label programmatically in
ViewDidLoad

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

65. ADDING A
VIEW

66. Add a ViewController to the Project

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

68. And an empty XIB that works as the View

69. Xamarim Recipe for Add a New View

70. Running the Add New View

71. MONOTOUCH.DIALOG

72. 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.

73. Many Demo Apps

74. Switching it to iPad

75. Demos in iPad

76. Xamarin offers a Tutorial

77. MonoTouch Elements
(Extended classes of MonoTouch.Dialog)

78. MonoTouch Elements Running

79. Xamarin Elements Tutorial

80. Xamarin Reflections Tutorial

81. Running Reflections Tutorial

82. 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.

83. Set the values for the Dialog

84. Create the Controller Flow for the Dialog in the
AppDelegate

85. WORKING
WITH TABLES
AND CELLS

86. 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/Worki
ng_with_Tables_and_Cells

87. Xamarin Tutorial

88. Running the Basic Table

89. Running the Table Edit Mode

90. INTRO TO
STORYBOARDS

91. 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/#do
cumentation/General/Conceptual/Devpedia-
CocoaApp/Storyboard.html

92. Storyboards -- MonoTouch
• Xamarin offers a Tutorial and sample code for
a Storyboard.
• See
http://docs.xamarin.com/ios/tutorials/Introd
uction_to_Storyboards

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

94. The Storyboard file in Xcode

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

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

97. Storyboards -- dock
• The iPad can have multiple scenes appear at
once, but the scene is similar to a View.

98. Running the sample shows navigation

99. COMMANDS
AND TOOLS

100. mono has several command line tools

101. mtouch Commands

102. Multiple IDE’s
• Multiple MonoDevoleps can be run on Mac
OSX with “open -n
/Applications/MonoDevelop.app”
• See
http://microsoft2apple.com/2010/09/26/mul
tiple-instances-of-monodevelop-on-a-mac/

103. MonoTouch Profiler

104. CONCLUSION