MobDevCon MvvmCross Workshop

Transcript

1. Developing Cross Platform Apps Using Xamarin and MvvmCross Jason Steele and Jake Henning http://sdrv.ms/15a7rYp
2. Model View View-Model Model Commands ViewModel MvxView View MvxViewModel Data Binding Inherits MvvmCross
3. Xamarin.iOS User Interface App Architecture Xamarin.Android User Interface Portable Class Library Core Project Windows Phone User Interface
4. Windows 8 Prerequisites Visual Studio Professional 2012 http://www.microsoft.com/visualstudio/eng/downloads Visual Studio 2012 Update 2 (or VS Tools, Extensions and Updates) http://www.microsoft.com/en-gb/download/details.aspx?id=38188 Nuget Package Installer (or VS Tools, Extensions and Updates) http://docs.nuget.org/docs/start-here/installing-nuget Windows Phone 8 SDK http://www.microsoft.com/en-us/download/details.aspx?id=35471 Xamarin Tools http://xamarin.com/download
5. Windows 7 Prerequisites Visual Studio 2010 http://www.microsoft.com/en-gb/download/details.aspx?id=2890 Visual Studio 2010 SP http://www.microsoft.com/en-gb/download/details.aspx?id=23691 Nuget Package Installer http://docs.nuget.org/docs/start-here/installing-nuget Microsoft .NET Framework 4.5 http://www.microsoft.com/en-gb/download/details.aspx?id=30653 Windows Phone SDK 7.1 http://www.microsoft.com/en-gb/download/details.aspx?id=27570 Windows Phone SDK update for Windows Phone 7.8 http://www.microsoft.com/en-gb/download/details.aspx?id=36474 Xamarin Tools http://xamarin.com/download
6. Preparation 1) Make Xamarin Portable Class Library (PCL) aware http://slodge.blogspot.co.uk/2013/04/my-current-pcl-setup-in-visual- studio.html Copy the files Xamarin PCL Fix to C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\ .NETPortable\v4.0\Profile\Profile104\SupportedFrameworks. 2) Update Nuget Package Manger via the Extensions Manager, restart VS. 3) Run Android SDK Manager and install the Tools if necessary.This will prevent the error "The "Aapt" task failed unexpectedly" when trying to compile. 4) If you do not have your own Android phone we will need to create an emulator. Run AVD Manager. Create a Galaxy Nexus. Run it and click the tutorial buttons in the emulator. Close it and run it again, leave it running. 5) In VS New, Project, Android, select Android Ice Cream Sandwich and click OK. If you may be prompted to Begin Trial, do so and setup a Xamarin account. 6) Run the project so that Mono gets installed on the Android emulator.
7. Core Project 1) In VS select File, New Project, Portable Class Library. Name it FirstDemo.Core and the solution FirstDemo. 2) Select Windows Phone 7.5 and higher and the two Mono frameworks from the available frameworks. 3) Delete Class1.cs. 4) Right-click the solution in Solution Explorer and select Manage NuGet Packages. Select Online in the left and search for “MvvmCross”. Select and install MvvmCross. 5) Have a look in the Todo-MvvmCross project folder that has been added. There is nothing to do as Nuget has done it for you! But it does serve as useful instructions if starting with a bare project.
8. Android Project 1) Right click Solution and select Add, New Project, Android, Ice Cream Sandwich and name the project FirstDemo.Droid. At this point you may be prompted to Begin Trial. If so setup a Xamarin account. 2) Delete Activity1.cs. 3) Add a project reference to FirstDemo.Core (right-click References, Add Reference, Projects tab, FirstDemo.Core, OK) 4) Right-click the solution in Solution Explorer and select Manage NuGet Packages. Ensure Installed Packages is selected on the left. Select MvvmCross, click Manage and select FirstDemo.Droid. 5) Build solution (right click Solution, Build Solution (or F6)). 6) Right click the project, Debug, Start new instance. WARNING: First deployment takes a long time (10 mins) as it copies the Mono framework to the device. This happens in Debug, but when the Release build configuration is chosen it pulls out only what is required from the framework.
9. What do we have now? • SplashScreen.cs has Mainlauncher=true so it is the start point. • Setup.CreateApp is then called by the framework, its like a bootstrap to get Core.App.Initialize to be called which then registers which ViewModel to start. • The naming convention of XView and XViewModel is used to determine which View to show for the VewModel. • The ViewModels are in the core and are therefore cross platform, the Views are platform specific and are kept as thin as possible to ensure as much code is cross platform as possible. MvvmCross Android data binding: • xmlns:local="http://schemas.android.com/apk/res-auto" in the.axml files. • The resource MvxBindingAttributes.xml in Resources/Values • In FirstView.axml we are binding the Text attribute to the Hello property of the ViewModel. Note that's its two way.
10. iPhone Project 1) Right click Solution and select Add, New Project, iOS, iPhone, Hello World Application and name the project FirstDemo.Touch. At this point you may be prompted to Begin Trial. 2) Delete MyViewController.cs. 3) Add project reference to FirstDemo.Core (right-click References, Add Reference, Projects tab, FirstDemo.Core, OK) 4) Right-click the solution in Solution Explorer and select Manage NuGet Packages. Ensure Installed Packages is selected on the left. Select MvvmCross, click Manage and select FirstDemo.Touch. 5) Copy the contents of AppDelegate.txt over the top of AppDelegate.cs. This creates the Setup class and calls Initialize, exactly as the Droid one does. 6) Double click the Project Properties, iOS Application tab, and enter "First Demo" as the Application name, "com.YourName.FirstDemo" as the Identifier, 1 as the Version. 7) Build solution (right click Solution, Build Solution(or F6))
11. What do we have now? • AppDelegate.FinishedLaunching is called which calls Setup.Initialize • This causes Setup.CreateApp to be called by the framework, which then calls Core.App.Initialize. • Which we already know, then registers which ViewModel to start (FirstViewModel). • The FirstView view is then shown. • In FirstView we have programmatically created the UILabel and UITextField. We could have used the XCode designer to layout our form and create outlets which we can use in our code. • We then have to manually bind the label and textField to the ViewModel property. We don't have the declarative binding we do in Android and Windows Phone because the iPhone xib files are not extensible.
12. Debugging on the Mac Pre-requisite: Xamarin must be installed on the Mac. 1) Ensure Mac's firewall is off (Apple Menu, System Preferences, Security and Privacy, Firewall). 2) In VS Build, Configuration Manager, select iPhone or iPhoneSimulator for the project's platform. 3) In VS Tools, Options, Xamarin, iOS Settings click Configure and select the MAC (or manually enter the IP of one). 4) Right Click the project, Debug, Start New Instance. (You may need to Set as Statup Project). 5) Should see simulator start and the app launch (can take some time the first time around, but nothing like the Android emulator!). Break points work (although problems after removing them in VS 2010).
13. Windows Phone Project 1) Right click Solution and select Add, New Project, Phone, Windows Phone App. Name the project FirstDemo.Phone. Select Windows Phone OS 7.1 (look in Silverlight for Windows Phone in VS 2010). 2) Delete MainPage.xaml. 3) Add a project reference to FirstDemo.Core (right-click References, Add Reference, Projects tab, FirstDemo.Core, OK) 4) Right-click the solution in Solution Explorer and select Manage NuGet Packages. Ensure Installed Packages is selected on the left. Select MvvmCross, click Manage and select FirstDemo.Phone. 5) Follow the instructions in the ToDo to perform the bootstrap and hook into navigation. 6) Build solution (right click Solution, Build Solution(or F6)) In VS2012 you may need to go to Properties, Debug tab and choose Emulator 7.1 7) Right click the project, Debug, Start New Instance.
14. What do we have now? • We added the bootstrap code ourselves. • See how FirstView.xaml and FirstView.cs have to inherit from MvxPhonePage instead of the usual PhoneApplicationPage. • In FirstView.xaml the TextBlock has to be explicitly set to TwoWay binding as by default Windows Phone binding are one way (i.e. the control is updated by the ViewModel, but the control does not update the ViewModel).
15. Hungry for more action? In FirstDemo.Core Copy FirstViewModel.cs and name it SecondViewModel.cs and replace "First" with "Second“ within the code. Add: private MvxCommand _goSecondCommand; public ICommand GoSecondCommand { get { _goSecondCommand = _goSecondCommand ?? new MvxCommand(DoGoSecondCommand); return _goSecondCommand; } } private void DoGoSecondCommand() { ShowViewModel<SecondViewModel>(); } to FirstViewModel.cs. In FirstDemo.Droid Copy FirstView.cs and name it SecondView.cs and replace "First" with "Second“ within the code and FirstView.axml. Add:
16. Hungry for more action? <Button android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Next" local:MvxBind = "Click GoSecondCommand" /> to FirstView.axml. In FirstDemo.Touch Copy FirstView.cs and name it SecondView.cs and replace "First" with "Second“ in the code. Add: var button = new UIButton(UIButtonType .RoundedRect); button.SetTitle("Next", UIControlState .Normal); button.Frame = new RectangleF(10, 90, 300, 40); Add(button); and set.Bind(button).To(vm => vm.GoSecondCommand); to FirstViewModel.cs. In FirstDemo.Phone Copy FirstView.cs and name it SecondView.cs and replace "First" with "Second“ within the code and FirstView.xaml. Add: <Button Content ="Next" Command="{Binding GoSecondCommand}" /> to FirstView.xaml.
17. What next? Visit http://docs.xamarin.com/ to read the Xamarin tutorials and http://blog.xamarin.com/ to keep up with the changes. Follow @xamarinhq Visit http://slodge.blogspot.co.uk/ and follow the N+1 days of MvvmCross. Follow @slodge Visit http://sdrv.ms/15a7rYp for this workshop’s materials.