As part of working on a team, expect to have code reviewed before checking it into the repository. If you happen to check in before a code review, I’ll show how to still submit a review request on that change set.

In the Team Explorer tab, go to the Pending Changes panel.

If you have pending changes, you can select Request Review from the Actions list.

In the New Code Review panel, select a reviewer and leave a description of the change.

The reviewer can compare changes by clicking the file names and send back comments.

The reviewer can mark the status as complete.

Finally, you can check in the change.

If the change was checked in before you requested a review, just go into source control explorer and view the change set in the project’s history. Right click the change set and request a review.

I used Git for version control and Jira for ticketing in my previous organization. Now, I am getting used to TFS and DevOps. Luckily, you can start using these at home without installing anything, assuming you have Visual Studio and an account at VisualStudio.com.

Log in to VisualStudio.com and navigate to the My Benefits section. Using My.VisualStudio.com works for now. You’ll be presented with various account benefits in the form of tools or resources. Click on Azure DevOps to get started.

Be careful to use the free tier or you can wind up incurring charges from Azure.

When creating a project, you have the choice between Git and Team Foundation Server Control.

Now you’ll be able to connect to this project from Visual Studio under Team Explorer > Manage Connections > Connect to a Project

Find the project in the Source Control Explorer under the Team Explorer tab. Click the title in the Team Explorer window to toggle between Home, My Work, Pending Changes and Source Control Explorer.

To add an application to your DevOps project, right-click it and select Add New Items to Folder. Navigate to the folder and select finish. Then you should be able to open the solution file from solution control where you have a playground to start branching, merging, shelving and checking in changes.

As a new developer on an existing .NET project, I have run into a few errors while trying to get Visual Studio, Entity Framework and Oracle to play nice together. Things are finally working now and I have a couple of lessons learned that will resolve these errors.

‘Oracle.ManagedDataAccess.Client’ is either not registered in the machine or application config file, or could not be located.

Installing Oracle Managed Data Access Client from NuGet is not all you need. Visual Studio requires the Oracle Data Provider, part of Oracle Data Access Components.

In Visual Studio, go to Help > About and see if Oracle Developer Tools is listed under Installed Products. If not, get it here or look for “Developer Tools for Visual Studio” at oracle.com/downloads/.

 
Your project references the latest version of Entity Framework however an Entity Framework database provider compatible with this version could not be found.

NuGet will default to the latest version of a package, but in this case you need to match the version installed on the project with the version of Oracle Developer Tools installed on Visual Studio. In this case, NuGet originally defaulted to 19.3.0 but downgrading to 18.3.0 fixed the error.

In the MVVM pattern, the ViewModel is aware of the Model and the View interacts with the Model through the ViewModel. Instantiating the ViewModel in the App class allows all the various pages to interact with the single object. With that in place, although it’s not a prerequisite, I’ll move on to store contacts in a SQLite database and Views will interact with the DB through the VM.

1. Contact Model

   Define the object in a class. This becomes the model.

   Contact class

   namespace App3 { public class Contact { public int Id { get; set; } public string Name { get; set; } public int Phone { get; set; } } }

   1 2 3 4 5 6 7 8 9

   namespace App3 {     public class Contact     {         public int Id { get; set; }         public string Name { get; set; }         public int Phone { get; set; }     } }

2. Get and Set Contacts

   Keeping the list in the Main Page, we can add records to it and send it to a ListView to display them.

   Main Page

   public partial class MainPage : ContentPage { private List<Contact> contacts { get; set; } public MainPage() { contacts = new List<Contact>(); InitializeComponent(); } public void OnAdd(object sender, EventArgs e) { Contact contact = new Contact { Name = ContactName.Text, Phone = int.Parse(ContactPhone.Text) }; contacts.Add(contact); } public void OnCancel(object sender, EventArgs e) { } public void OnContacts(object sender, EventArgs e) { Navigation.PushAsync(new ListViewContacts(contacts)); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   public partial class MainPage : ContentPage {     private List<Contact> contacts { get; set; }     public MainPage()     {         contacts = new List<Contact>();         InitializeComponent();     }       public void OnAdd(object sender, EventArgs e)     {         Contact contact = new Contact {             Name = ContactName.Text,             Phone = int.Parse(ContactPhone.Text)         };         contacts.Add(contact);     }       public void OnCancel(object sender, EventArgs e)     {       }       public void OnContacts(object sender, EventArgs e)     {         Navigation.PushAsync(new ListViewContacts(contacts));     } }

   

   List Contacts

   public partial class ListViewContacts : ContentPage { public List<Contact> Items { get; set; } public ListViewContacts(List<Contact> contacts) { InitializeComponent(); Items = contacts; MyListView.ItemsSource = Items; } async void Handle_ItemTapped(object sender, ItemTappedEventArgs e) { if (e.Item == null) return; Contact c = (Contact)e.Item; var result = await DisplayAlert("Hello", c.Name, "Save", "Delete"); //Deselect Item ((ListView)sender).SelectedItem = null; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   public partial class ListViewContacts : ContentPage {     public List<Contact> Items { get; set; }       public ListViewContacts(List<Contact> contacts)     {         InitializeComponent();         Items = contacts; MyListView.ItemsSource = Items;     }       async void Handle_ItemTapped(object sender, ItemTappedEventArgs e)     {         if (e.Item == null)             return;           Contact c = (Contact)e.Item;         var result = await DisplayAlert("Hello", c.Name, "Save", "Delete");         //Deselect Item         ((ListView)sender).SelectedItem = null;     } }

   List View xaml

   <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="App3.ListViewContacts"> <ListView x:Name="MyListView" ItemsSource="{Binding Items}" ItemTapped="Handle_ItemTapped" CachingStrategy="RecycleElement"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Orientation="Horizontal"> <Label Text="{Binding Name}" FontSize="20"/> <Label Text="{Binding Phone}" FontSize="20"/> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              x:Class="App3.ListViewContacts">     <ListView x:Name="MyListView"             ItemsSource="{Binding Items}"             ItemTapped="Handle_ItemTapped"             CachingStrategy="RecycleElement">                      <ListView.ItemTemplate>             <DataTemplate>                 <ViewCell>                     <StackLayout Orientation="Horizontal">                         <Label Text="{Binding Name}" FontSize="20"/>                         <Label Text="{Binding Phone}" FontSize="20"/>                     </StackLayout>                 </ViewCell>             </DataTemplate>         </ListView.ItemTemplate>     </ListView> </ContentPage>

   
   

3. Interact with Model through MVVM

   Now, rather than creating a list in the Main Page to store contacts, move it to the ViewModel which will instantiate the list and handle interactions with it. The ListViewContacts will no longer take a List<Contact> argument and instead get the list from App.vm.GetContacts();

   ContactViewModel

   public class ContactsViewModel { private List<Contact> contacts { get; set; } public ContactsViewModel() { contacts = new List<Contact>(); } public void AddContact(Contact contact) { contacts.Add(contact); } public List<Contact> GetContacts() { return contacts; } public void RemoveContact(int id) { Contact contact = contacts.Find(c => c.Id == id); contacts.Remove(contact); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   public class ContactsViewModel {     private List<Contact> contacts { get; set; }       public ContactsViewModel()     {         contacts = new List<Contact>();     }       public void AddContact(Contact contact)     {         contacts.Add(contact);     }       public List<Contact> GetContacts()     {         return contacts;     }       public void RemoveContact(int id)     {         Contact contact = contacts.Find(c => c.Id == id);         contacts.Remove(contact);     } }

   App.xaml.cs

   public partial class App : Application { public static ContactsViewModel vm { get; set; } public App() { InitializeComponent(); vm = new ContactsViewModel(); MainPage = new NavigationPage(new MainPage()); } // etc. }

   1 2 3 4 5 6 7 8 9 10 11 12

   public partial class App : Application {     public static ContactsViewModel vm { get; set; }     public App()     {         InitializeComponent();         vm = new ContactsViewModel();         MainPage = new NavigationPage(new MainPage());     }       // etc. }

   MainPage.xaml.cs

   public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } public void OnAdd(object sender, EventArgs e) { Contact contact = new Contact { Name = ContactName.Text, Phone = int.Parse(ContactPhone.Text) }; App.vm.AddContact(contact); Clear(); } public void OnCancel(object sender, EventArgs e) { // not implemented } public void OnContacts(object sender, EventArgs e) { Navigation.PushAsync(new ListViewContacts()); } private void Clear() { ContactName.Text = ContactPhone.Text = String.Empty; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

   public partial class MainPage : ContentPage {     public MainPage()     {         InitializeComponent();     }       public void OnAdd(object sender, EventArgs e)     {         Contact contact = new Contact {             Name = ContactName.Text,             Phone = int.Parse(ContactPhone.Text)         };         App.vm.AddContact(contact);         Clear();     }       public void OnCancel(object sender, EventArgs e)     {         // not implemented     }       public void OnContacts(object sender, EventArgs e)     {         Navigation.PushAsync(new ListViewContacts());     }       private void Clear()     {         ContactName.Text = ContactPhone.Text = String.Empty;     } }

   ListViewContacts.xaml.cs

   public partial class ListViewContacts : ContentPage { public List<Contact> Items { get; set; } public ListViewContacts() { InitializeComponent(); Items = App.vm.GetContacts(); MyListView.ItemsSource = Items; } async void Handle_ItemTapped(object sender, ItemTappedEventArgs e) { if (e.Item == null) return; Contact c = (Contact)e.Item; var result = await DisplayAlert("Hello", c.Name, "Save", "Delete"); //Deselect Item ((ListView)sender).SelectedItem = null; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   public partial class ListViewContacts : ContentPage {     public List<Contact> Items { get; set; }       public ListViewContacts()     {         InitializeComponent();         Items = App.vm.GetContacts(); MyListView.ItemsSource = Items;     }       async void Handle_ItemTapped(object sender, ItemTappedEventArgs e)     {         if (e.Item == null)             return;           Contact c = (Contact)e.Item;         var result = await DisplayAlert("Hello", c.Name, "Save", "Delete");         //Deselect Item         ((ListView)sender).SelectedItem = null;     } }

4. Import SQLite

   The MVVM will manage how views interact with the information in memory, but we still need a database to store data when the application is closed. Luckily, SQLite will help us with that. We need to add it to our project from NuGet, then create a db interface that defines a connection and a platform specific class that implements it. Lastly, we’ll add a couple of data attributes to the Contact model.

   
   ISQLite

   public interface ISQLite { SQLiteConnection Connection(); }

   1 2 3 4

   public interface ISQLite {     SQLiteConnection Connection(); }

   
   
   SQL_Android

   using App3.Droid; using SQLite; [assembly: Xamarin.Forms.Dependency(typeof(SQLite_Android))] namespace App3.Droid { public class SQLite_Android : ISQLite { public SQLiteConnection Connection() { var dbName = "MyContacts.db3"; var path = System.Environment.GetFolderPath( System.Environment.SpecialFolder.Personal); path = System.IO.Path.Combine(path, dbName); return new SQLiteConnection(path); } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   using App3.Droid; using SQLite;   [assembly: Xamarin.Forms.Dependency(typeof(SQLite_Android))] namespace App3.Droid {     public class SQLite_Android : ISQLite     {         public SQLiteConnection Connection()         {             var dbName = "MyContacts.db3";             var path = System.Environment.GetFolderPath(                 System.Environment.SpecialFolder.Personal);             path = System.IO.Path.Combine(path, dbName);             return new SQLiteConnection(path);         }     } }

   
   
   Data Attributes

   public class Contact { [PrimaryKeyAttribute, AutoIncrement] public int Id { get; set; } [NotNull] public string Name { get; set; } public int Phone { get; set; } }

   1 2 3 4 5 6 7 8

   public class Contact {     [PrimaryKeyAttribute, AutoIncrement]     public int Id { get; set; }     [NotNull]     public string Name { get; set; }     public int Phone { get; set; } }

5. Create, Read and Delete

   Now the relationship between the ViewModel and the database needs to be established. Since the contact list will reside in the database, we’ll use the ViewModel to pass new contacts to it and retrieve existing contacts from it. The DB will be instantiated in App.xaml.cs to make it accessible everywhere and the VM will be called by the pages as they need it, MainPage and ListViewContacts.
   

   ContactViewModel

   public class ContactsViewModel { private List<Contact> contacts { get; set; } public ContactsViewModel() { contacts = App.Database.GetContacts(); //contacts = new List<Contact>(); } public void AddContact(Contact contact) { App.Database.AddContact(contact); //contacts.Add(contact); } public List<Contact> GetContacts() { return contacts; } public void RemoveContact(int id) { App.Database.RemoveContact(id); //Contact contact = contacts.Find(c => c.Id == id); //contacts.Remove(contact); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   public class ContactsViewModel {     private List<Contact> contacts { get; set; }     public ContactsViewModel()     {         contacts = App.Database.GetContacts();         //contacts = new List<Contact>();     }       public void AddContact(Contact contact)     {         App.Database.AddContact(contact);         //contacts.Add(contact);     }       public List<Contact> GetContacts()     {         return contacts;     }       public void RemoveContact(int id)     {         App.Database.RemoveContact(id);         //Contact contact = contacts.Find(c => c.Id == id);         //contacts.Remove(contact);     } }

   
   
   App db

   public partial class App : Application { private static MyDatabase database; public static MyDatabase Database { get { if (database == null) { database = new MyDatabase(); } return database; } } public App() { InitializeComponent(); //vm = new ContactsViewModel(); MainPage = new NavigationPage(new MainPage()); } protected override void OnStart(){...} protected override void OnSleep(){...} protected override void OnResume(){...} }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   public partial class App : Application {     private static MyDatabase database;     public static MyDatabase Database     {         get { if (database == null)             {                 database = new MyDatabase();             }             return database;         }     }     public App()     {         InitializeComponent();         //vm = new ContactsViewModel();         MainPage = new NavigationPage(new MainPage());     }       protected override void OnStart(){...}       protected override void OnSleep(){...}       protected override void OnResume(){...} }

   
   
   MyDatabase

   public class MyDatabase { private SQLiteConnection database; static object locker = new object(); public MyDatabase() { database = DependencyService.Get<ISQLite>().Connection(); database.CreateTable<Contact>(); } public List<Contact> GetContacts() { lock (locker) { return (from c in database.Table<Contact>() select c).ToList(); } } public void AddContact(Contact contact) { database.Insert(contact); } public void RemoveContact(int id) { database.Delete<Contact>(id); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

   public class MyDatabase {     private SQLiteConnection database;     static object locker = new object();     public MyDatabase()     {         database = DependencyService.Get<ISQLite>().Connection();         database.CreateTable<Contact>();     }       public List<Contact> GetContacts()     {         lock (locker)         {             return (from c in database.Table<Contact>()                     select c).ToList();         }     }       public void AddContact(Contact contact)     {         database.Insert(contact);     }       public void RemoveContact(int id)     {         database.Delete<Contact>(id);     } }

   
   
   ListViewContacts

   public partial class ListViewContacts : ContentPage { public List<Contact> Items { get; set; } private ContactsViewModel vm { get; set; } public ListViewContacts() { InitializeComponent(); vm = new ContactsViewModel(); Items = vm.GetContacts(); MyListView.ItemsSource = Items; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13

   public partial class ListViewContacts : ContentPage {     public List<Contact> Items { get; set; }     private ContactsViewModel vm { get; set; }       public ListViewContacts()     {         InitializeComponent();         vm = new ContactsViewModel();         Items = vm.GetContacts(); MyListView.ItemsSource = Items;     } }

   
   

Xamarin will allow you to build mobile applications for Android, iOS and UWP in Visual Studio. With VS2017 installed, you can get started pretty quickly, although getting the SDK and emulator set up may take some troubleshooting.

1. Install Mobile Development with .NET

   If not already installed, you may need to go back to the Visual Studio Installer to get Mobile Development with .NET. After clicking the Modifying option, it should be under the Mobile & Gaming section.

2. Start a Xamarin.Forms Project

   In Visual Studio, start a project with File > New > Project. I like to use the search function to find my project type, obviously “xamarin” should do the trick, but it can be found under Web > Cross-platform too.

3. Update NuGet packages

   On start up, VS will likely display a long list of errors. Most, if not all, can be taken care of by simply updating the project’s default packages using NuGet.

4. Incompatible Haxm

   The Intel Hardware Accelerator Manager threw an error for me. So, although it appeared that Visual Studio Installer was taking care of the Intel HAXM, finding the .exe and running it fixed the error for me. Mine is located at C:\Program Files (x86)\Android\android-sdk\extras\intel\Hardware_Accelerated_Execution_Manager\intelhaxm-android.exe, but your SDK folder my be elsewhere. The path can be seen in Tools > Android > SDK Manager.

5. Android-sdk

   Likewise, if the installer and SDK manager are not playing nice, try getting the Android SDK from the Android Studio installer at https://developer.android.com/studio/

6. Hello World

   Start with a label, an input field, a button and an event handler to process the click.
   

   Hello World

   <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:App3" x:Class="App3.MainPage"> <StackLayout> <Label x:Name="Greeting" Text="Hello"/> <Entry x:Name="MyName" Placeholder="Your Name"/> <Button Text="Send" Clicked="OnSend"/> </StackLayout> </ContentPage>

   1 2 3 4 5 6 7 8 9 10 11 12 13

   <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              xmlns:local="clr-namespace:App3"              x:Class="App3.MainPage">       <StackLayout>         <Label x:Name="Greeting" Text="Hello"/>         <Entry x:Name="MyName" Placeholder="Your Name"/>         <Button Text="Send" Clicked="OnSend"/>     </StackLayout>   </ContentPage>

   
   
   MainPage.xaml.cs

   namespace App3 { public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } public void OnSend(object o, EventArgs e) { Greeting.Text += ", " + MyName.Text; } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   namespace App3 {     public partial class MainPage : ContentPage     {         public MainPage()         {             InitializeComponent();         }           public void OnSend(object o, EventArgs e)         {             Greeting.Text += ", " + MyName.Text;         }     } }

   
    

7. Navigation Pages push New Pages around.

   Go back the the MainPage.xaml and add a new Button that will show us the About Page. Pressing F12 inside “OnAbout” will generate the method for us. Right click the project in the Solution Explorer and Add > New Item > Content Page. Before you can start handling new pages, the MainPage needs to be upgraded from Content Page to Navigation Page. One way to do this is cast it when calling it in App.xaml.cs
   

   App.xaml.cs

   namespace App3 { public partial class App : Application { public App() { InitializeComponent(); MainPage = new NavigationPage(new MainPage()); } // etc. }

   1 2 3 4 5 6 7 8 9 10 11

   namespace App3 {     public partial class App : Application     {         public App()         {             InitializeComponent();             MainPage = new NavigationPage(new MainPage());         }     // etc. }

   
   
   MainPage with About Button

   <StackLayout> <Label x:Name="Greeting" Text="Hello."/> <Entry x:Name="MyName" Placeholder="Your Name"/> <StackLayout Orientation="Horizontal"> <Button Text="Send" Clicked="OnSend"/> <Button Text="About" Clicked="OnAbout"/> </StackLayout> </StackLayout>

   1 2 3 4 5 6 7 8

   <StackLayout>     <Label x:Name="Greeting" Text="Hello."/>     <Entry x:Name="MyName" Placeholder="Your Name"/>     <StackLayout Orientation="Horizontal">         <Button Text="Send" Clicked="OnSend"/>         <Button Text="About" Clicked="OnAbout"/>     </StackLayout> </StackLayout>

   
   
   MainPage.xaml.cs OnAbout method

   private void OnAbout(object sender, EventArgs e) { Navigation.PushAsync(new AboutPage()); }

   1 2 3 4

   private void OnAbout(object sender, EventArgs e) {     Navigation.PushAsync(new AboutPage()); }

   
   

8. Data Binding

   Data binding will link the xaml view with the data in the scope of the xaml.cs. Just be sure the BindindContext is assigned after any variables you’re referencing.
   

   About.xaml

   <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="App3.AboutPage"> <ContentPage.Content> <StackLayout> <Label Text="Let's talk about cats." FontSize="50" /> <StackLayout Orientation="Horizontal"> <Label Text="My favorite cats are "/> <Label Text="{Binding Cat1}"/> <Label Text=" and "/> <Label Text="{Binding Cat2}"/> </StackLayout> </StackLayout> </ContentPage.Content> </ContentPage>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              x:Class="App3.AboutPage">     <ContentPage.Content>         <StackLayout>             <Label Text="Let's talk about cats."                    FontSize="50" />             <StackLayout Orientation="Horizontal">                 <Label Text="My favorite cats are "/>                 <Label Text="{Binding Cat1}"/>                 <Label Text=" and "/>                 <Label Text="{Binding Cat2}"/>             </StackLayout>         </StackLayout>     </ContentPage.Content> </ContentPage>

   
   
   About.xaml.cs

   namespace App3 { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class AboutPage : ContentPage { public string Cat1 { get; set; } public string Cat2 { get; set; } public AboutPage () { InitializeComponent(); Cat1 = "Parker"; Cat2 = "Lyla"; BindingContext = this; } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   namespace App3 { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class AboutPage : ContentPage {         public string Cat1 { get; set; }         public string Cat2 { get; set; } public AboutPage () {             InitializeComponent();             Cat1 = "Parker";             Cat2 = "Lyla";             BindingContext = this;         }     } }

   
   

9. Displaying a List with Binding

   A List View does just about what it sounds like it should. In this case, notice that the Binding Context is defined in the xaml and not the code behind. Either way will work.
   

   MainPage.xaml

   <StackLayout Orientation="Horizontal"> <Button Text="Send" Clicked="OnSend"/> <Button Text="About" Clicked="OnAbout"/> <Button Text="Staff" Clicked="OnStaff"/> </StackLayout>

   1 2 3 4 5

   <StackLayout Orientation="Horizontal">     <Button Text="Send" Clicked="OnSend"/>     <Button Text="About" Clicked="OnAbout"/>     <Button Text="Staff" Clicked="OnStaff"/> </StackLayout>

   
   
   MainPage.xaml.cs

   private void OnStaff(object sender, EventArgs e) { Navigation.PushAsync(new ListViewCats()); }

   1 2 3 4

   private void OnStaff(object sender, EventArgs e) {     Navigation.PushAsync(new ListViewCats()); }

   
   
   ListViewCats.xaml

   <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="App3.ListViewCats"> <ListView x:Name="MyListView" ItemsSource="{Binding Items}"> <ListView.ItemTemplate> <DataTemplate> <TextCell Text="{Binding CatName}" /> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              x:Class="App3.ListViewCats">   <ListView x:Name="MyListView"             ItemsSource="{Binding Items}">                      <ListView.ItemTemplate>             <DataTemplate>                 <TextCell Text="{Binding CatName}" />             </DataTemplate>         </ListView.ItemTemplate>     </ListView> </ContentPage>

   
   
   ListViewCats.xaml.cs

   namespace App3 { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class ListViewCats : ContentPage { public ObservableCollection<Cats> Items { get; set; } public ListViewCats() { InitializeComponent(); Items = new ObservableCollection<Cats> { new Cats {CatName = "Parker"}, new Cats {CatName = "Lyla"} }; MyListView.ItemsSource = Items; } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   namespace App3 {     [XamlCompilation(XamlCompilationOptions.Compile)]     public partial class ListViewCats : ContentPage     {         public ObservableCollection<Cats> Items { get; set; }           public ListViewCats()         {             InitializeComponent();               Items = new ObservableCollection<Cats>             {                 new Cats {CatName = "Parker"},                 new Cats {CatName = "Lyla"}             }; MyListView.ItemsSource = Items;         }     } }

10. Implementing Styles

    Just like HTML, elements can be styled individually, but that doesn’t scale. You can define some global styles (or other resources) in App.xaml.
    

    App.xaml

    <?xml version="1.0" encoding="utf-8" ?> <Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="App3.App"> <Application.Resources> <Color x:Key="blue">#1694CC</Color> <Color x:Key="grey">#5D8799</Color> <Color x:Key="black">#000000</Color> <Color x:Key="white">#FFFFFF</Color> <Style TargetType="ContentPage"> <Setter Property="BackgroundColor" Value="{StaticResource grey}"/> </Style> <Style TargetType="Button"> <Setter Property="TextColor" Value="{StaticResource blue}"/> </Style> <Style TargetType="Label"> <Setter Property="BackgroundColor" Value="{StaticResource black}"/> <Setter Property="TextColor" Value="{StaticResource white}"/> <Setter Property="FontSize" Value="40"/> </Style> </Application.Resources> </Application>

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

    <?xml version="1.0" encoding="utf-8" ?> <Application xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              x:Class="App3.App">     <Application.Resources>         <Color x:Key="blue">#1694CC</Color>         <Color x:Key="grey">#5D8799</Color>         <Color x:Key="black">#000000</Color>         <Color x:Key="white">#FFFFFF</Color>         <Style TargetType="ContentPage">             <Setter Property="BackgroundColor" Value="{StaticResource grey}"/>         </Style>         <Style TargetType="Button">             <Setter Property="TextColor"  Value="{StaticResource blue}"/>         </Style>         <Style TargetType="Label">             <Setter Property="BackgroundColor"  Value="{StaticResource black}"/>             <Setter Property="TextColor"  Value="{StaticResource white}"/>             <Setter Property="FontSize"  Value="40"/>         </Style>     </Application.Resources> </Application>

    
    

It’s been a little while since I made a new MVC project, so why not start at the end of the universe?

1. Start a new MVC project

   
   

2. Give it a model

   About Me Model

   C#

   using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace RestaurantsEndUniverse.Models { public class AboutMe { public string Name { get; set; } public string Title { get; set; } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13

   using System; using System.Collections.Generic; using System.Linq; using System.Web;   namespace RestaurantsEndUniverse.Models {     public class AboutMe     {         public string Name { get; set; }         public string Title { get; set; }     } }

    

3. Pass the model to the View

   Home Controller

   using RestaurantsEndUniverse.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace RestaurantsEndUniverse.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult About() { ViewBag.Message = "Reviewing restaurants at the end of the universe."; var model = new AboutMe(); model.Name = "Casey"; model.Title = "Tech Lead"; return View(model); } public ActionResult Contact() { return View(); } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

   using RestaurantsEndUniverse.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;   namespace RestaurantsEndUniverse.Controllers {     public class HomeController : Controller     {         public ActionResult Index()         {             return View();         }           public ActionResult About()         {             ViewBag.Message = "Reviewing restaurants at the end of the universe.";             var model = new AboutMe();             model.Name = "Casey";             model.Title = "Tech Lead";             return View(model);         }           public ActionResult Contact()         {             return View();         }     } }

    

4. Display model properties in the View

   About Me View

   @model RestaurantsEndUniverse.Models.AboutMe @{ ViewBag.Title = "About Restaurants"; } <h2>@ViewBag.Title.</h2> <h3>@ViewBag.Message</h3> <p>This site brought to you by @Model.Name, the @Model.Title.</p>

   1 2 3 4 5 6 7 8

   @model RestaurantsEndUniverse.Models.AboutMe @{     ViewBag.Title = "About Restaurants"; } <h2>@ViewBag.Title.</h2> <h3>@ViewBag.Message</h3>   <p>This site brought to you by @Model.Name, the @Model.Title.</p>

    

5. Test that the model exists

   Unit Tests

   using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web.Mvc; using Microsoft.VisualStudio.TestTools.UnitTesting; using RestaurantsEndUniverse; using RestaurantsEndUniverse.Controllers; namespace RestaurantsEndUniverse.Tests.Controllers { [TestClass] public class HomeControllerTest { [TestMethod] public void About() { // Arrange HomeController controller = new HomeController(); // Act ViewResult result = controller.About() as ViewResult; // Assert Assert.IsNotNull(result.Model); } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web.Mvc; using Microsoft.VisualStudio.TestTools.UnitTesting; using RestaurantsEndUniverse; using RestaurantsEndUniverse.Controllers;   namespace RestaurantsEndUniverse.Tests.Controllers {     [TestClass]     public class HomeControllerTest     {         [TestMethod]         public void About()         {             // Arrange             HomeController controller = new HomeController();               // Act             ViewResult result = controller.About() as ViewResult;               // Assert             Assert.IsNotNull(result.Model);         }     } }

   
   

6. Apply fresh paint to Site.css

   Site CSS

   body { background-image: linear-gradient(45deg, white, grey); padding-top: 50px; padding-bottom: 20px; }

   1 2 3 4 5

   body {     background-image: linear-gradient(45deg, white, grey);     padding-top: 50px;     padding-bottom: 20px; }

    

7. Run it

   

8. How did we get here?

   With the help of Global.asax and RouteConfig.cs

   Global asax

   public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); } }

   1 2 3 4 5 6 7 8 9 10

   public class MvcApplication : System.Web.HttpApplication {     protected void Application_Start()     {         AreaRegistration.RegisterAllAreas();         FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);         RouteConfig.RegisterRoutes(RouteTable.Routes);         BundleConfig.RegisterBundles(BundleTable.Bundles);     } }

    

   RouteConfig

   public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13

   public class RouteConfig {     public static void RegisterRoutes(RouteCollection routes)     {         routes.IgnoreRoute("{resource}.axd/{*pathInfo}");           routes.MapRoute(             name: "Default",             url: "{controller}/{action}/{id}",             defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }         );     } }

    

9. Make a new Route with matching Controller

   New Map Route

   routes.MapRoute("Styles", "styles/{name}", new { controller = "Styles", action = "Find", name = UrlParameter.Optional });

   1 2	routes.MapRoute("Styles", "styles/{name}",     new { controller = "Styles", action = "Find", name = UrlParameter.Optional });

    

   Style Controller

   namespace RestaurantsEndUniverse.Controllers { public class StyleController : Controller { // GET: Style public ActionResult Find() { return Content("Some style of food"); } } }

   1 2 3 4 5 6 7 8 9 10 11

   namespace RestaurantsEndUniverse.Controllers {     public class StyleController : Controller     {         // GET: Style         public ActionResult Find()         {             return Content("Some style of food");         }     } }

    

   Curl

   > curl localhost:65006/Style/Find Some style of food

   1 2	> curl localhost:65006/Style/Find Some style of food

    

There are three kinds of lazy.

Let’s make sure we’re in the last category.

The Selenium library is a workhorse for automating your web browser. I use it to automate data entry and integration testing, but you could do much more with it as long as the task involves your browser. Scrape the DOM? Yes. Click buttons? Yes. Fill out forms? Yes. Handle alerts? Yes. Switch windows? Yes. Want more? Go read the docs. We’re just going to scrape the surface.

1. From the Windows terminal

   $ pip install selenium Collecting selenium Downloading https://files.pythonhosted.org/packages/80/d6/4294f0b4bce4de0abf13e17190289f9d0613b0a44e5dd6a7f5ca98459853/selenium-3.141.0-py2.py3-none-any.whl (904kB) 100% |████████████████████████████████| 911kB 2.2MB/s Collecting urllib3 (from selenium) Downloading https://files.pythonhosted.org/packages/62/00/ee1d7de624db8ba7090d1226aebefab96a2c71cd5cfa7629d6ad3f61b79e/urllib3-1.24.1-py2.py3-none-any.whl (118kB) 100% |████████████████████████████████| 122kB 344kB/s Installing collected packages: urllib3, selenium Successfully installed selenium-3.141.0 urllib3-1.24.1

   1 2 3 4 5 6 7 8 9

   $ pip install selenium Collecting selenium   Downloading https://files.pythonhosted.org/packages/80/d6/4294f0b4bce4de0abf13e17190289f9d0613b0a44e5dd6a7f5ca98459853/selenium-3.141.0-py2.py3-none-any.whl (904kB)     100% |████████████████████████████████| 911kB 2.2MB/s Collecting urllib3 (from selenium)   Downloading https://files.pythonhosted.org/packages/62/00/ee1d7de624db8ba7090d1226aebefab96a2c71cd5cfa7629d6ad3f61b79e/urllib3-1.24.1-py2.py3-none-any.whl (118kB)     100% |████████████████████████████████| 122kB 344kB/s Installing collected packages: urllib3, selenium Successfully installed selenium-3.141.0 urllib3-1.24.1

2. Download Chrome Driver

   https://sites.google.com/a/chromium.org/chromedriver/downloads
   Make sure to get the version that matches your chrome version.
   What version of chrome do I have?
   Extract the zip and take note of the destination folder. You’ll need the .exe path in the next step.

3. Open Python and import selenium

   Python

   $ python > from selenium import webdriver # open the browser and go to a page > driver = webdriver.Chrome("C:\\Your\\Path\\Here\\chromedriver_win32\\chromedriver.exe") > driver.get("http://www.caseycodes.com/blog") # get the search box and send it a value > input = driver.find_element_by_xpath("//input[@type='text']") > input.send_keys("essential git") # get the submit button and click it > submit = driver.find_element_by_id("searchsubmit") > submit.click() # get the title of the results and print them > results = driver.find_elements_by_class_name("entry-title") > result0 = results[0].text > print result0

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   $ python > from selenium import webdriver # open the browser and go to a page > driver = webdriver.Chrome("C:\\Your\\Path\\Here\\chromedriver_win32\\chromedriver.exe") > driver.get("http://www.caseycodes.com/blog") # get the search box and send it a value > input = driver.find_element_by_xpath("//input[@type='text']") > input.send_keys("essential git") # get the submit button and click it > submit = driver.find_element_by_id("searchsubmit") > submit.click() # get the title of the results and print them > results = driver.find_elements_by_class_name("entry-title") > result0 = results[0].text > print result0

   
    

4. Selenium + Unittest

   What is the answer to life, the universe and everything?
   
   

   Unittest

   Python

   import unittest import time from selenium import webdriver from selenium.webdriver.common.keys import Keys class TestManager(unittest.TestCase): driver = webdriver.Chrome('C:\Your\Path\Here\chromedriver_win32\chromedriver.exe') def setUp(self): self.driver.get("http://www.Google.com") def tearDown(self): self.driver.close() class TestTheAnswerToLife(TestManager): def runTest(self): # Arrange expected_answer = "42" # Act search_box = TestManager.driver.find_element_by_xpath("//input[@title='Search']") search_box.send_keys("What is the answer to life the universe and everything?") search_box.send_keys(Keys.ENTER) calculator = TestManager.driver.find_element_by_xpath("//h2[text()='Calculator Result']/following-sibling::div[1]") all_txt = calculator.text lines = all_txt.split('\n') Google_said = lines[1] time.sleep(10) # Assert self.assertEqual(expected_answer, Google_said) if __name__ == '__main__': unittest.main()

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

   import unittest import time from selenium import webdriver from selenium.webdriver.common.keys import Keys   class TestManager(unittest.TestCase):     driver = webdriver.Chrome('C:\Your\Path\Here\chromedriver_win32\chromedriver.exe')       def setUp(self):         self.driver.get("http://www.Google.com")          def tearDown(self):         self.driver.close()          class TestTheAnswerToLife(TestManager):     def runTest(self):         # Arrange         expected_answer = "42"                  # Act         search_box = TestManager.driver.find_element_by_xpath("//input[@title='Search']")         search_box.send_keys("What is the answer to life the universe and everything?")         search_box.send_keys(Keys.ENTER)         calculator = TestManager.driver.find_element_by_xpath("//h2[text()='Calculator Result']/following-sibling::div[1]")         all_txt = calculator.text         lines = all_txt.split('\n')         Google_said = lines[1]         time.sleep(10)                  # Assert         self.assertEqual(expected_answer, Google_said)          if __name__ == '__main__':     unittest.main()

5. Run TestDemo.py from the CLI

   Test from command line

   C:\Users\Casey>python TestDemo.py -v runTest (__main__.TestTheAnswerToLife) ... ok ---------------------------------------------------------------------- Ran 1 test in 15.080s OK

   1 2 3 4 5 6 7 8

   C:\Users\Casey>python TestDemo.py -v   runTest (__main__.TestTheAnswerToLife) ... ok   ---------------------------------------------------------------------- Ran 1 test in 15.080s   OK

   
    

For this example, I’ll use my binoculars page to demo the basic commands I use to track changes and move code between my laptop, github and my server.

In a new project folder

Make some changes and save them

I went down a rabbit hole and I wanna go home

Create a branch to track bug fix

Put this gem in GitHub

Make Dolly proud

Clone repo to web server

This book store really needs a search function. One notable difference is whether to return a single value, e.g. one person matching a phone number, or multiple values, e.g. a list of books.

A little modification to the Home Controller and the Index View will get us an input field and an output field for displaying results. For now, this will involve a full postback, reloading the page. In the single result example, it will send the user to the detail page for that item. In the list example, it will refresh the index page with the result. In case there are no results, I’ll provide some feedback that nothing was found.

Index page with form for input. The name should match the action’s parameter in the controller.

Home Controller returning a single result. The Index action with [HttpPost] will be used on a form submit.