I am trying to understand how storyboards work in iOS development and how MVVMCross fits in. I thought the best solution would be to build an iOS version of the MVVMCRoss TipCalc Tutorial
I am using Storyboards as you cannot edit XIBs in Visual Studio. My current thinking is one Storyboard per screen.
I have it working but it feels like i did it with more luck than judgement. Therefore I want to check my understanding.
In TipCalc.UI.Touch I have
TipViewController.cs
TipViewController.storyboard
I have added a custom Mvx View Container as suggested in this SO answer. In the CreateViewOfType method of that container I am calling Storyboard.InstantiateViewController and casting that to an IMvxTouchView.
How can a controller be a View as well?
I am planning on having a "View" per storyboard.
If you have multiple views in a storyboard, would you have a controller per view?
When I bring up the Properties window for a "View" in the storyboard designer it has a Name and a class in the Identity section. What is the purpose of the Class property? Does that create a code-behind file?
I am creating the View-to-ViewModel bindings in the ViewDidLoad method of the Controller
public override void ViewDidLoad()
{
base.ViewDidLoad();
this.CreateBinding(this.tipValueText).To<TipViewModel>(vm => vm.Tip).Apply();
this.CreateBinding(this.subTotalTextBox).To<TipViewModel>(vm => vm.SubTotal).Apply();
this.CreateBinding(this.generositySlider).To<TipViewModel>(vm => vm.Generosity).Apply();
}
These bindings work but again I just wanted to check that it is how others do it too.
The iOS ViewController is actually the View in an MVVMCross application. You can think of the view controller as the code behind for the view (so just like a Windows Phone/Windows Store app will have a XAML and related .cs file, or an Android app will have an axml and a java view class)
Yes, when using multiple views in a single storyboard each one will actually be a viewcontroller (since that's what a screen in a storyboard is)
The class property defines which viewcontroller class the layout in the storyboard uses (so which code behind class to use, and if it doesn't exist it will be created)
I prefer a single storyboard as most of my apps don't have too many screens so these are the steps I follow when creating a View in an existing storyboard
Add a ViewController
Type in the view name in the Class field (this name would correspond to the ViewModel name, so HomeView for HomeViewModel, etc.). As soon as you hit enter the ViewController class should be created.
Type in the same view name as the Storyboard Id (this is used to fetch that view)
Add controls and set their names. Setting a control's name will updated the .designer file that was created for the ViewController
Create the ViewDidLoad override in the ViewController class and set up my bindings
If you use a storyboard per view, creating that storyboard with the correct name (HomeView for example) should create the ViewController and designer files for you and give you a storyboard with that one viewcontroller ready to go
edit:
in your bindings, you can use one set.Apply(); at the end
Related
When creating a WatchKit (WatchOS) Interface controller in the storyboard designer/editor, I cannot set it's class to something that is not itself type WKInterfaceController nor an immediate derived child of WKInterfaceController.
Basically in the hope of abstraction and better code reuse, better design overall, I would like to be able to use classes that are how to say, a more distant relative of their base WKInterfaceController
Basically right now it seems that your stuck using the storyboard designer to make a new WatchOS project. And using the storyboard designer you only have the option to select the WKInterfaceController class:
public partial class WKInterfaceController
or one that directly inherits from it:
public partial class ChildInterfaceController : WKInterfaceController
but nothing else such as:
public partial class GrandChildInterfaceController: ChildInterfaceController
So is there any way to do this that doesn't risk the chance of getting corrupted when you reenter the storyboard designer at some point?
Note: I've already asked if it is possible to avoid using a storyboard all together, but that has gone unanswered so I'm assuming no.
For clarity I'm talking about this dialog for "class":
I have a lot of view controllers that xib is the same. How can I do to associate a Xib to same viewcontrollers in MonoTouch?. I have created a xib only in IB but Xamarin Studio doesn't creates a ".h file".
The simplest and cleanest way is to do a base UIViewController with the nib and inherit from it. This way you follow the DRY principle.
I would like to add a custom view XIB to my UITable views header. Following this link How to add a custom view to a XIB file defined view in monotouch i created a XIB with a view. It has just two labels in it.
I then have a cs file. Called XIB as mention in the link
public override UIView GetViewForHeader(UITableView tableView, int sectionIndex) {
var myHeader = new UIView();
var views = NSBundle.MainBundle.LoadNib("CustomHeaderView", this, null);
CustomHeaderView loginView = Runtime.GetNSObject(views.ValueAt(0)) as CustomHeaderView;
loginView.UpdateWithData("test","test");
myHeader.AddSubview(loginView);
return myHeader;
}
When i run the app it is crashing, dont see any error.
Make sure that your .XIB is not using AutoLayout and you are using an older iOS. The AutoLayout is new for 6.x and will cause a crash on the 5.x based devices. I see this quite often.
I am just getting my feet wet with MonoTouch and have the most basic of questions. In their tutorials, they cover adding controls to the XIB directly through XCode's Interface Builder. However, I cannot figure out how to add a custom control to the XIB.
I have seen a number of examples of subclassing the base UICollectionView to customize it for your own purposes, and have done this in C# code in my project. My question is, how do I add that specific subclass of the UICollectionView to the XIB for use in the project?
For a normal UIView, the basic steps you need to go through are:
Create your custom view in C# as a class
public class MyView
{
}
Add the UIView base class to it, add a Register attribute and add two constructors:
[Register("MyView")]
public class MyView : UIView
{
public MyView() {}
public MyView(IntPtr handle) : base(handle) {}
}
To make it do something useful, then add a Draw implementation:
public override Draw(RectangleF rect)
{
var context = UIGraphics.CurrentGraphics();
UIColor.Red.SetFill();
context.FillEclipseInRect(rect);
}
Save and Build your project
Now in the XIB editor for the UIViewController in which you want to use your custom view, add a UIView to the design surface
Select that UIView and in the Identity Inspector, set the UIView's "Custom Class" to "MyView"
Save everything in xCode
Return to MonoDevelop, build and run
There's a video of this flow available at:
- http://www.youtube.com/watch?v=ggwO46dd-50&feature=youtube_gdata
For a custom UICollectionView, UILabel, UITableViewCell, or any other UIView base class, then you follow similar steps, just with a different base class and with different constructors too in order to support the specific View.
For a video about custom Table cells, see: http://slodge.blogspot.co.uk/2013/01/uitableviewcell-using-xib-editor.html
I'm a C# programmer dabbling in a bit of iPhone development using MonoTouch.
I add a new View Interface Definition to my project and double click to open it up in Interface Builder. I add a UIButton. I save the file, and inspect the xib.designer.cs file, and I can see no reference to the new button.
I downloaded the code from http://monotouchexamples.com/ where I could see an example of autogenerated code behind :
[MonoTouch.Foundation.Connect("infoButton")]
private MonoTouch.UIKit.UIButton infoButton {
get {
return ((MonoTouch.UIKit.UIButton)(this.GetNativeField("infoButton")));
}
set {
this.SetNativeField("infoButton", value);
}
}
I opened up MainWindow.xib in interface builder. I notice a few differences. File's Owner is of type UIApplication instead of NSObject. What is the importance of this? There is an App Delegate object of type AppDelegate. I can't add an AppDelegate to my own view, or at least I can't find it in the Library. Do I need to add one? I can see that the existing controls on MainWindow.xib have Referencing Outlets to the App Delegate. I add a new button and I want to hook it up. When I click and drag a New Referencing Outlet to the App Delegate a context menu appears that lists the existing controls. How do I add a new element to this list, or where does this list come from?
I've been spoilt by the Visual Studio world where I just dump a button on a form and start writing code for the click event. Could someone provide some pointers about the steps needed to get this working on MonoTouch?
Thanks,
Patrick
Adding a button by itself is not enough. The button is not accessible outside the Interface Builder. You need add an Outlet, and connect the button with the outlet in Interface Builder.
Remember: Outlets are the members in your Controller class that get a reference to the controls, you can't just access the controls without them.
As Dave says, you need to add an outlet to your controller class, and connect your button to that outlet, before any auto-generated code will appear. This caught me out too initially.
You choose your controller class in the Interface Builder library window, choose 'outlets' in the bottom part of the library, and add an outlet there. You then need to select your button, choose the connections tab of the inspector window, and drag from the "New referencing outlet" circle over to your controller class. Interface Builder will then prompt you to choose an outlet to connect to. Then when you save, you should get the auto-generated code appear in the .xib.designer.cs file, and then you should be able to reference your button via that outlet variable in your .xib.cs file.
It sounds like the project I created is out of date - I remember there were quite a few changes around how the generated buttons are created in the designer file. I will update the project soon for you.
As Dave said, to get the code to be auto generated you need to add an outlet with Interface Builder. There should be an example on this video here - http://bit.ly/aWoItN but the server seems to be down at the moment.
Hope this helps,
ChrisNTR