Xamarin target: iOS native UI

Monkey Targets Forums/User Targets/Xamarin target: iOS native UI

Beaker

(Posted 2013) [#1]

[Edit: you can get it here: https://github.com/Beaker13/monkeyxamarin ]

I had a fun weekend doing my own MonkeyJam. The idea was to learn some Xamarin, get my head around the new monkey target system, and learn some more about the iOS native UIKit. So far Ive implemented (useful parts of) the following:

UIButton
UITextField
UITextView
UILabel
UISwitch
UISlider

UIImageView
UIWebView
MKMapView
UITableView

UIImagePickerController
UIActionSheet
UIAlertView

UIViewContoller
UITabBarController
UINavigationController
UIScrollView

UIImage
UIFont
UIColor
..and lots of other classes to make it all work and deal with events.

Still to do? Spinner, SegmentedControls, SplitViewController. I could go on forever as the list is endless: GL, Video, Sound, Email, Social Networking etc.

Works really well, but there is no mojo (not that you need it particularly), or support for Android UI (yet).

This is just a hobby.

Difference

(Posted 2013) [#2]

You are not alone.

It does sound interesting.

Beaker

(Posted 2013) [#3]

I nice feature of Xamarin for iOS is MonoTouch.Dialog which lets you construct large parts of business type apps using json (amongst other ways - including one really cool way which isn't possible in monkey). For example the json below turns into a multiscreen app with lots of different controls and stylings.

{
  "title": "Load from local file",
  "sections": [ 
  	  { 
  	  	"header": "Nested Elements",
  	  	"id": "section-1",
  	  	"elements": [
  	  	  {
  	  	    "type": "root",
  	  	    "title": "home",
  	  	  	"sections": [
  	  	       {
  	  	     	 "header": "Nested view!",
  	  	     	 "elements": [
  	  	     	   {
  	  	     	     "type": "boolean",
  	  	     	     "caption": "Just a boolean",
  	  	     	     "id": "first-boolean",
  	  	     	     "value": false
  	  	     	   },
  	  	     	   {
  	  	     	     "type": "string",
  	  	     	     "caption": "Welcome to the nested controller"
  	  	     	   }
  	  	     	 ]
  	  	       }
  	  	     ]
  	  	  }, {
  	  	  	"type": "root",
  	  	  	"title": "Favorite Fruit",
  	  	  	"radioselected": "2",
  	  	  	"sections": [
  	  	  	   {
  	  	  	     "header": "Select your favorite",
  	  	  	     "elements": [
  	  	  	        {
  	  	  	          "type": "radio",
  	  	  	          "caption": "Apple"
  	  	  	        },
  	  	  	        {
  	  	  	          "type": "radio",
  	  	  	          "caption": "Banana"
  	  	  	        },
  	  	  	        {
  	  	  	          "type": "radio",
  	  	  	          "caption": "Coconut"
  	  	  	        },
  	  	  	        {
  	  	  	          "type": "radio",
  	  	  	          "caption": "Watermelon"
  	  	  	        }
  	  	  	     ]
  	  	  	   }, {
  	  	  	      "header": "Multiple radios"
  	  	  	      
  	  	  	   }
  	  	  	]
  	  	  }, {
  	  	  	"type": "root",
  	  	  	"title": "Summary counts",
  	  	  	"group": "counter",
  	  	  	"sections": [
  	  	  	   {
  	  	  	      "header": "Using checkboxes",
  	  	  	      "elements": [
  	  	  	        {
  	  	  	          "type": "checkbox",
  	  	  	          "caption": "English",
  	  	  	          "value": true,
  	  	  	          "group": "counter"
  	  	  	        },
  	  	  	        {
  	  	  	          "type": "checkbox",
  	  	  	          "caption": "French",
  	  	  	          "value": false,
  	  	  	          "group": "counter"
  	  	  	        },
  	  	  	        {
  	  	  	          "type": "checkbox",
  	  	  	          "caption": "Spanish",
  	  	  	          "value": true,
  	  	  	          "group": "counter"
  	  	  	        }
  	  	  	      ]
  	  	  	   },
  	  	  	   {
  	  	  	      "header": "Using booleans",
  	  	  	      "elements": [
  	  	  	        {
  	  	  	          "type": "bool",
  	  	  	          "caption": "Portuguese",
  	  	  	          "value": true,
  	  	  	          "group": "counter"
  	  	  	        },
  	  	  	        {
  	  	  	          "type": "bool",
  	  	  	          "caption": "German",
  	  	  	          "value": false,
  	  	  	          "group": "counter"
  	  	  	        }
  	  	  	      ]
  	  	  	   },
  	  	  	   {
  	  	  	      "header": "Mixing them",
  	  	  	      "elements": [
  	  	  	        {
  	  	  	          "type": "checkbox",
  	  	  	          "caption": "Italian",
  	  	  	          "value": false,
  	  	  	          "group": "counter"
  	  	  	        },
  	  	  	        {
  	  	  	          "type": "bool",
  	  	  	          "caption": "Dutch",
  	  	  	          "value": false,
  	  	  	          "group": "counter"
  	  	  	        }
  	  	  	      ]
  	  	  	   }
  	  	  	]
  	  	  }
  	  	]
  	  },
      {
          "header": "Booleans",
          "footer": "Slider or image-based",
          "elements": [
              { 
                  "type" : "boolean",
                  "caption" : "Demo of a Boolean",
                  "value"   : true
              }, {
                  "type": "boolean",
                  "caption" : "Boolean using images",
                  "value"   : false,
                  "on"      : "favorite.png",
                  "off"     : "~/favorited.png"
              }
          ]
      }, {
      	"header": "Entries",
  		"elements" : [
			{
				"type": "entry",
				"caption": "Username",
				"value": "",
				"placeholder": "Your account username"
			}, {
				"type": "password",
				"caption": "Password",
				"value": "",
				"placeholder": "You password"
			}, {
				"type": "entry",
				"caption": "Zip Code",
				"value": "01010",
				"placeholder": "your zip code",
				"keyboard": "numbers"
			}, {
				"type": "entry",
				"return-key": "route",
				"caption": "Entry with 'route'",
				"placeholder": "captialization all + no corrections",
				"capitalization": "all",
				"autocorrect": "no"
			}
  		]
      }, {
      	"header": "Strings",
      	"elements": [
      		{
      			"type": "string",
      			"caption": "Plain label"
      		}, {
      			"type": "string",
      			"caption": "Plain label with value: ",
      			"value": "Value"
      		}, {
      			"type": "string",
      			"caption": "Styled label with subtitles",
      			"style": "subtitle",
      			"value": "This is a subtitle"
      		}, {
      			"type": "string",
      			"caption": "Styled label",
      			"style": "value2",
      			"value": "Like the addressbook"
      		}, {
      			"type": "string",
      			"caption": "Tapping on this cell invokes a C# method",
      			"ontap": "Sample.AppDelegate.JsonCallback"
      		}, {
      			"type": "string",
      			"caption": "the background color is set",
      			"background": "#f0f"
      		}, {
      			"type": "string",
      			"caption": "Background color set from a URI",
      			"background": "http://www.google.com/images/logos/ps_logo2.png"
      		}, {
      			"type": "string",
      			"caption": "To render multi-line strings, set both the 'lines' value to a positive value and the 'line-break' mode to 'word-wrap' for example",
      			"lines": "5",
      			"linebreak": "word-wrap"
      		}, { 
      			"type": "string",
      			"caption": "Show a checkmark",
      			"accessory": "checkmark"
      		}, { 
      			"type": "string",
      			"caption": "Show a detail disclosure",
      			"accessory": "detail-disclosure"
      		}, { 
      			"type": "string",
      			"caption": "Show a disclosure indicator",
      			"accessory": "disclosure-indicator"
      		}, {
      			"type": "string",
      			"caption": "Using a custom font: Chalkduster 20",
      			"font": "Chalkduster-20",
      			"linebreak": "word-wrap",
      			"lines": "0"
      		}, {
      			"type": "string",
      			"style": "subtitle",
      			"caption": "Styled main and subtitle font",
      			"font": "Chalkduster-12",
      			"textcolor": "#d88",
      			"value": "Subtitle with font Gurmunkhi MN",
      			"detailfont": "Gurmukhi MN-12",
      			"detailcolor": "#8d8"
      		}
      	 ]
      }, {
      	"header": "Dates and Times",
      	"elements": [
       		{
       			"type": "datetime",
       			"caption": "Date and Time",
       			"value": "Sat, 01 Nov 2008 19:35:00 GMT"
       		}, {
       			"type": "date",
       			"caption": "Date",
       			"value": "10/10"
       		}, {
       			"type": "time",
       			"caption": "Time",
       			"value": "11:23"
			}       		
      	]
      }, {
      	"header": "Web View",
      	"elements": [
      		{
      			"type": "html",
      			"caption": "Miguel's blog",
      			"url": "http://tirania.org/blog" 
      		}
      	]
      }
  ]
}

You load it like this in monkey:

Global rootElement:DialogRootElement
Global rootVC:DialogViewController

Function Main()
	window = CreateWindow(UIScreen.MainScreen.Bounds)	
	rootElement = Dialog.RootElement ("To Do List")
	
	Local jsonElement:= Dialog.JsonElement("data/test.json")
	
	Local section:= Dialog.Section()
	section.Add(jsonElement.jsonElement)
	
	rootElement.Add(section)
	
	rootVC = Dialog.ViewController(rootElement)
	
	Local rootNavigationController:= New UINavigationController()
	rootNavigationController.PushViewController(rootVC, False)
	
	'---- set the root view controller on the window. the nav controller will handle the rest
	window.RootViewController = rootNavigationController
	window.MakeKeyAndVisible ()
End

Pretty neat.

Beaker

(Posted 2013) [#4]

To access a particular control in the structure you can do this:

Local booleanElement:= DialogBooleanElement(jsonElement.ElementFromId("first-boolean")

Skn3	(Posted 2013) [#5]

Oooo very nice :D does it have anything like gadget painting for customising?

Beaker

(Posted 2013) [#6]

I think so. You can definitely set the "appearance" of controls. But I'm not yet sure how to set it up for all controls. For example you can create a 9-grid image and then apply that to the background of a button. I pretty sure you can do this for other controls as well. Xamarin definitely exposes everything you can do, and for good or bad that means its quite complex.

Beaker

(Posted 2013) [#7]

Did a complete rewrite of the way I was handling events. Now you can do something like:

Class ButtonDelegate Extends UIButtonDelegate
	Method Clicked:Void(button:UIButton)
		Print "ButtonDelegate: "+button.Title(UIControlState.Normal)
	End
End
...
Local button:UIButton = CreateButton(110,10,110,50, "Click me")
button.Delegate = New ButtonDelegate()
View.AddSubview (button)

All controls now have a Delegate field that works consistently (unlike obj-c or xamarin!).

I also added a WebClient class for downloading data/strings etc.

CopperCircle

(Posted 2013) [#8]

Sounds great, will you be releasing it as a target?

Beaker

(Posted 2013) [#9]

Yes, I hope to.

MikeHart

(Posted 2013) [#10]

@CopperCircle: Did you look at the licensing cost of this Xamarin stuff and Mono Touch? Holy cow!

Beaker

(Posted 2013) [#11]

$300 for Indie license?

MikeHart

(Posted 2013) [#12]

A year, per platform. And Mono Touch? Doesn't that cost something? I thought it does.

CopperCircle

(Posted 2013) [#13]

Yeh, I think Xamarin is Mono Touch now, the cost is not great, but it could save time on building a native project.

MikeHart

(Posted 2013) [#14]

Ah ok. I wasn't aware that they are the same.

Beaker

(Posted 2013) [#15]

I've been making some examples. So far I have:

button_example - button, switch, segmented controller
text_example - label, text field, text view
slider_example

actionsheet_example - select from buttons that popup from bottom of screen.
alertview_example - with Cancel and OK buttons.

imagepicker_example - image picker and image save (to camera roll).
webview_example
scrollview_example

tabbedapplication_example - demonstrates tabs with system images, normal images and text. As well as badges.

enumeratefonts_example
touchdrawing_example - demonstrates extending UIView with touches and ellipse drawing.

webclient_example - download image and text.

Todo: multiscreen application example, mapview example.

Beaker

(Posted 2013) [#16]

You can take a look here:
https://github.com/Beaker13/monkeyxamarin

Interested to hear how you get on, and I'm happy for people to make changes/additions.

All examples should run ok in the free version of Xamarin.

Enjoy.

Todo: more examples: multiscreen app, dialog app, image view example.

Beaker

(Posted 2013) [#17]

I forgot to mention that there is still much to do. Skinning and appearance stuff needs some work, Dialog needs some more work, and there are lots of field and method that could be added to make it all more complete. Having said all that you can certainly do a hell of a lot with what we have already.

CopperCircle

(Posted 2013) [#18]

Thanks, I will have a play soon.

Beaker

(Posted 2013) [#19]

I've added a multiscreen example.

Beaker

(Posted 2013) [#20]

Added a Table View example.

CopperCircle

(Posted 2013) [#21]

Had a quick go at building transcc for this, but just get module not found error in builders.monkey on all the target imports?

Beaker

(Posted 2013) [#22]

Have you placed each folders contents in the relevant folder inside your existing monkey folder? The examples folder can go anywhere you like.

CopperCircle

(Posted 2013) [#23]

Yes everything is copied over, it fails on the import of each target, first one is "android", never built transcc before so maybe something I don't know?

Beaker

(Posted 2013) [#24]

Hi. Just tried a fresh install and compile here, and everything worked fine. It sounds like you might've accidently deleted/overwritten your targets or something. Are you mac or pc?

CopperCircle

(Posted 2013) [#25]

I tried on Mac and PC with fresh install of Monkey v70?

Beaker

(Posted 2013) [#26]

I'm on mac and it definitely works on v70/69, but it does look like you have to copy the individual unique parts over to each folder, otherwise it seems to want to overwrite/delete other stuff in each folder. I'm sorry this isn't easier but I can't really control github/zip.

So, to summarize (after downloading zip file: monkeyxamarin-master.zip):
1) Copy "monkeyxamirin-master/modules/xamarin" folder to "MonkeyPro***/modules/" folder.
2) Copy "monkeyxamarin-master/targets/xamarin" folder to "MonkeyPro***/targets" folder.
3) Copy "monkeyxamarin-master/src/transcc/builder.monkey" to "MonkeyPro***/src/transcc/" folder.
4) Copy "monkeyxamarin-master/src/transcc/transcc.monkey" to "MonkeyPro***/src/transcc/" folder.
5) Copy "monkeyxamarin-master/src/transcc/builders/xamarin.monkey" to "MonkeyPro***/src/transcc/builders/" folder.
6) Copy "monkeyxamarin-master/src/transcc/builders/builders.monkey" to "MonkeyPro***/src/transcc/builders/" folder.
7) Compile "MonkeyPro***/src/transcc/transcc.monkey".
8) Close monkey/ted.
9) Copy and rename "MonkeyPro***/src/transcc/transcc.build/cpptool/main_macos.app" to "MonkeyPro***/bin/transcc_macos.app". (*ON MAC*)
9b) Copy and rename "MonkeyPro***/src/transcc/transcc.build/cpptool/main_winnt.exe" to "MonkeyPro***/bin/transcc_winnt.exe". (*ON PC*)
10) Open monkey/ted again.

Also make sure you are compiling transcc to "c++ tool" target, probably with Release (not debug) on.

Hope this helps.

Beaker

(Posted 2013) [#27]

Also, I've noticed that in monkey v70 only, you have to change a line in "modules/brl/gametarget.monkey". Just comment out line 4:
#Error "Native Game class not found."

..otherwise it will throw this error when you compile to xamarin app target.

CopperCircle

(Posted 2013) [#28]

Thanks, my bad I had not copied the transcc builders.

CopperCircle

(Posted 2013) [#29]

Ok, im getting closer! I have built a xamarin example but when I try to open it in Xamarin Studio I get:

Load Failed MonkeyApp.csproj' with unknown item type '{6BC8ED88-2882-458C-8E55-DFD12B67127B};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}'

Thanks

Beaker

(Posted 2013) [#30]

Not sure, but in Xamarin Studio you might need to set any items (images etc) in the data folder to Content. You can do this in the panel on the left. Not at computer at the mo, but will check later.

Beaker

(Posted 2013) [#31]

Also, just checking, you need to open the .sln (solution file) and not the .csoroj file.

CopperCircle

(Posted 2013) [#32]

Hi, I am opening the .sln, it just fails with that error during opening.
I am using Xamarin Studio v4.0.3(build 13), I could email you the project to see if you can open it?

Thanks.

Beaker

(Posted 2013) [#33]

Weird. Same Xamarin version as me and it all works if I start from scratch. I hope the solution files aren't locked to my machine in some way. Send the project so we can make sure.

CopperCircle

(Posted 2013) [#34]

I have emailed you the project, thanks.

Beaker

(Posted 2013) [#35]

Got your email thanks. Try this: close Xamarin, delete the MonkeyApp.userprefs file, and re-open the project in Xamarin. See if that works.

CopperCircle

(Posted 2013) [#36]

Still get the same error and Xamarin creates a new MonkeyApp.userprefs.

Beaker

(Posted 2013) [#37]

I'll look into it tomorrow, but in the meantime if you want to play you can create a new iOS iPhone project in Xamarin and then copy the code files from your monkey compile to the correct places and try again.

CopperCircle

(Posted 2013) [#38]

Hi, I did some testing and it seems to be my install of Xamarin, I think it may have issues with some previous Mono Touch install.

Beaker

(Posted 2013) [#39]

Any joy getting it going in the end?

CopperCircle

(Posted 2013) [#40]

Got Xamarin re-installed and opened the .sln now, but it now says Xcode is not installed in the default location eventhough it is! and in the Xamarin preferences it shows a green tick under the SDK location!

I will try re-installing Xcode when I get a chance.

Thanks.

CopperCircle

(Posted 2013) [#41]

I found out Xamarin is not compatible with Xcode 4.6.2 + will have to revert back to 4.6.1

http://forums.xamarin.com/discussion/1942/error-a-valid-xcode-installation-could-not-be-found-if-your-copy-of-xcode-is-installed-to-a-non-st#latest

CopperCircle

(Posted 2013) [#42]

Xamarin has been updated and now works with Xcode 4.6.2, finally got it to compile and its good stuff!, are you planning to continue adding functionality?

Thanks.

Beaker

(Posted 2013) [#43]

I've already added a load of stuff and will probably continue to do so. I haven't uploaded a new version yet tho.

New examples include:
Enumerate directories
Local notifications
Open in (open a file from another app)
Reachability example (test web connection)
Data picker example

I've also improved and added to:
Button example - added Stepper control, and added event delegates to all button types.
Webview example - added URL click events.
Map example - added overlays and annotations.

Loads of other extra bits and bobs.

CopperCircle

(Posted 2013) [#44]

Sounds good, keep up the good work :)
How about Andriod? Also can the native UI be skinned using Xamarin?

Thanks.

Beaker

(Posted 2013) [#45]

I'm not sure what to do about Android. Obviously it would be a lot of work to add, and you would still have to rewrite your apps ui code. I've made good progress on a cross platform mojo GUI that uses the same commands as iOS, which could make porting apps easier with much less ui code changes, but I'm not yet sure where this is heading. I'm unlikely to completely recreate CocoaTouch/UiKit.

It is possible to skin your iOS xamarin apps, but there are still parts of the Appearance system missing from my module. Skinning is a huge subject, but you can learn a little here:
http://docs.xamarin.com/guides/ios/user_interface/introduction_to_the_appearance_api
More discussion here:
http://forums.xamarin.com/discussion/2917/advanced-custom-styling-in-xamarin-ios

CopperCircle

(Posted 2013) [#46]

Thanks for the info, I think the basic UiKit colour changing would be cool to allow the app to fit the brand/style. I will look to add that.

nigelibrown

(Posted 2013) [#47]

Just installed and initially very impressed, thanks for sharing.

Beaker

(Posted 2014) [#48]

This still seems to work on the latest monkey (v79e). Xamarin has also added a neat cross platform Forms UI thing which could make it easier to build cross platform apps.

Beaker

(Posted 2014) [#49]

BTW Xamarin does a seriously great discount if you are a small company (<20 employees or your company is <3 years old).

frank

(Posted 2015) [#50]

Xamarin will probably give you for free if you can prove you are a student. Just mail them; I know people who did with success. Also ; the cross platform Forms UI isn't very good yet; one year in it's unstable on Android and very basic on iOS. I think it'll take a while longer to stabilise fully.