WEBVTT
00:00:00.210 --> 00:00:03.850
- Hello, everyone.
Welcome to Connect(); 2017 Day 3.
00:00:04.460 --> 00:00:05.910
My name is Adrian Stephens.
00:00:05.910 --> 00:00:08.520
- And I am Mark Smith.
- And we are part of Xamarin University,
00:00:08.520 --> 00:00:11.100
and we are here to tell you
about building cross-platform
00:00:11.100 --> 00:00:14.560
applications with Visual Studio,
Xamarin and .NET.
00:00:15.140 --> 00:00:17.550
- Awesome.
- So, should we tell them
00:00:17.550 --> 00:00:19.300
a little bit about Xamarin University
before we get started here?
00:00:19.300 --> 00:00:21.960
- Absolutely.
- Well Xamarin University really,
00:00:21.960 --> 00:00:25.810
it is the premier place to learn
cross-platform mobile development
00:00:26.310 --> 00:00:28.120
for Microsoft and Microsoft technologies.
00:00:29.260 --> 00:00:31.680
- So what sort of things can I get
at Xamarin University, Adrian?
00:00:31.680 --> 00:00:34.000
- There's a lot of great things
you can get at Xamarin University.
00:00:34.000 --> 00:00:37.660
So much talk about, we've got a ton
of free training content, a ton of free training.
00:00:37.660 --> 00:00:39.530
So you learn cross-platform
mobile development,
00:00:39.530 --> 00:00:43.940
Azure attach, and then when you are
ready to move beyond the basics,
00:00:43.940 --> 00:00:46.660
we've got a subscriber model
with live training.
00:00:46.660 --> 00:00:51.860
- Yeah, expert trainers that you can come in
and actually get deep training on a variety of topics,
00:00:51.860 --> 00:00:56.250
such as architecture and design patterns
and async use inside your mobile app.
00:00:56.250 --> 00:00:56.620
- Absolutely.
00:00:56.620 --> 00:01:01.140
We've got over 70 courses, the content
is always growing, and we also have office hours,
00:01:01.140 --> 00:01:04.440
which means you can interact
with instructors one on one.
00:01:04.440 --> 00:01:08.530
So you can ask them questions about really anything
related to .NET cross-platform mobile development.
00:01:08.530 --> 00:01:12.710
So you could have a question about
a technology or an approach or a strategy
00:01:12.710 --> 00:01:15.200
or even ask about your own code,
about your own projects.
00:01:15.200 --> 00:01:18.030
- Yeah, I think this is one of the coolest
features of Xamarin University,
00:01:18.030 --> 00:01:22.020
because you get actual time,
one on one, with an expert developer,
00:01:22.020 --> 00:01:25.340
where you can bring your code up, you can ask questions
and you can get answers.
00:01:25.340 --> 00:01:26.590
- Pretty fantastic.
00:01:26.590 --> 00:01:28.850
And you've got exclusive time
with those instructors.
00:01:29.590 --> 00:01:31.400
We also have certification.
00:01:31.400 --> 00:01:34.200
This is the place to go for
mobile certification with Microsoft.
00:01:34.980 --> 00:01:36.640
We've got two certifications here.
00:01:36.640 --> 00:01:39.650
One can be earned by completing the free
training through Xamarin University,
00:01:39.650 --> 00:01:41.710
and then we have a higher level
training certification
00:01:41.710 --> 00:01:44.550
which really just shows off
your cross-platform mobile expertise,
00:01:44.550 --> 00:01:47.160
and it shows that you have got experience
building mobile applications,
00:01:47.160 --> 00:01:48.630
deploying to Android, iOS.
00:01:48.630 --> 00:01:51.650
And you understand architectural
patterns, code sharing.
00:01:51.650 --> 00:01:52.670
- Right, right.
00:01:52.670 --> 00:01:56.090
And then, we actually have a job
connect site called Dev Connect.
00:01:56.090 --> 00:01:58.420
So you can go and actually register
your account with Dev Connect,
00:01:58.940 --> 00:02:02.930
show off your skills and find employers
that are looking for mobile developers
00:02:02.930 --> 00:02:06.970
and so we can connect those two things together
and actually build some awesome apps.
00:02:06.970 --> 00:02:07.720
- That's fantastic.
00:02:07.720 --> 00:02:11.440
So learn development, get certified, find a job.
- Yeah.
00:02:11.440 --> 00:02:13.310
Check out university.Xamarin.com.
00:02:13.310 --> 00:02:14.890
- Excellent.
- Awesome.
00:02:14.890 --> 00:02:18.400
Well we are here to talk about
building mobile apps with Xamarin technology.
00:02:18.910 --> 00:02:24.990
And one of the things we have found
as we kind of have explored this whole mobile scenario,
00:02:24.990 --> 00:02:26.740
it's really grown over time.
00:02:26.740 --> 00:02:31.520
And what we're seeing today is that users
consume their data on a variety of devices.
00:02:31.520 --> 00:02:36.880
In fact, it is very likely that you probably own
one or more devices that you actually do your data on.
00:02:36.880 --> 00:02:42.050
It might be your TV or your gaming system
or your phone or your tablet or your PC.
00:02:42.050 --> 00:02:43.690
- Absolutely.
I think I have got three with me right here,
00:02:44.750 --> 00:02:45.700
and many more at home.
00:02:45.700 --> 00:02:49.030
But yeah, it's not just developers,
consumers as well use a lot of different devices
00:02:49.030 --> 00:02:50.630
over a lot of different
ecosystems as well.
00:02:50.630 --> 00:02:53.280
- Absolutely, and I think that's just a pattern
that is becoming more and more prevalent.
00:02:53.280 --> 00:02:57.080
And not only are they using more devices,
they expect to see their data
00:02:57.080 --> 00:02:59.030
actually moving between those devices.
00:02:59.030 --> 00:03:01.210
- Right, and they are not thinking about
who makes the device or what version they are on.
00:03:01.210 --> 00:03:01.670
- No, absolutely not.
00:03:01.670 --> 00:03:04.160
- They want their data to be there
with them on the device they are using.
00:03:04.160 --> 00:03:06.920
- Yeah, a common example is
if I start a book on one device,
00:03:06.920 --> 00:03:09.740
I might be travelling and actually
pick up a different device,
00:03:09.740 --> 00:03:13.380
and I want to be exactly where I left off in that book
and be able to continue reading.
00:03:13.380 --> 00:03:16.400
- Absolutely, I expect it.
- Yeah, and so how do we do this?
00:03:16.400 --> 00:03:21.140
How do we actual make sure that our data is
moving between those devices in a cross-platform way?
00:03:21.140 --> 00:03:24.120
Because I don't want to enforce
my expectations
00:03:24.120 --> 00:03:27.000
on what the user is going to buy
or use in terms of their device.
00:03:27.000 --> 00:03:29.700
- Well I think it comes down
to making cross-platform applications
00:03:29.700 --> 00:03:33.050
that are backed by a cloud
back end, probably Azure.
00:03:33.050 --> 00:03:36.290
- Hey, we like that.
- We like that, absolutely.
00:03:36.290 --> 00:03:40.740
- Awesome, well when we actually start
building mobile applications with the Xamarin tool set,
00:03:40.740 --> 00:03:43.590
really there are a couple of
different approaches you can use.
00:03:43.590 --> 00:03:48.440
And it comes down to how much you
actually want to share with your code.
00:03:48.440 --> 00:03:52.830
So a traditional developer approach
that we often see is where
00:03:52.830 --> 00:03:56.410
a company or an individual
actually build multiple apps,
00:03:56.410 --> 00:03:59.040
and so they want to target
multiple platforms,
00:03:59.040 --> 00:04:01.070
in this case iOS,
Windows and Android,
00:04:01.580 --> 00:04:03.220
and if they use the traditional approach
00:04:03.220 --> 00:04:04.850
where they are actually
using the vendor tools,
00:04:04.850 --> 00:04:08.200
they will often have to build
that same app multiple times.
00:04:08.200 --> 00:04:11.700
- Right, so there is a cost involved
and it's going to take longer, most likely.
00:04:11.700 --> 00:04:14.630
- Most likely, and very likely
as you add features,
00:04:14.630 --> 00:04:17.720
at lease what we've experienced,
you will have one platform
00:04:17.720 --> 00:04:20.280
that is significantly more
advanced than another.
00:04:20.280 --> 00:04:24.840
You'll have the same sorts of bugs
that are often happening in different code,
00:04:24.840 --> 00:04:26.010
but across different platforms.
00:04:26.010 --> 00:04:29.210
- Right, if you are executing different code, you are
fixing it in multiple places, different languages.
00:04:29.210 --> 00:04:30.630
- Yeah, that's right.
- Now it's not all bad though.
00:04:30.630 --> 00:04:31.780
- No.
- Of course, using the vendor tools
00:04:31.780 --> 00:04:33.300
means that you
get native performance.
00:04:33.300 --> 00:04:34.490
- That's right.
- And a native feature set.
00:04:34.490 --> 00:04:35.680
- That's exactly right.
00:04:35.680 --> 00:04:38.710
Right, you get access to the latest
of the platform features,
00:04:38.710 --> 00:04:42.480
so those are great reasons to actually
look at using those native tools.
00:04:43.380 --> 00:04:45.490
But we actually would like
to do it a different way.
00:04:45.490 --> 00:04:49.220
So if you are doing iOS you would do
Swift or Objective C, and you would use XCode.
00:04:49.800 --> 00:04:52.490
For Windows, of course,
you would use C#, potentially .NET.
00:04:52.490 --> 00:04:53.740
- Absolutely.
- Visual Studio.
00:04:54.440 --> 00:04:59.210
And then of course for Android,
we would be using Android Studio with Java
00:04:59.210 --> 00:05:00.430
when we actually build our app.
00:05:00.430 --> 00:05:02.780
- Right, so not only using different languages,
but different tools as well.
00:05:02.780 --> 00:05:05.630
- That's right, exactly.
It's a completely different IDE, yeah, that's right.
00:05:05.630 --> 00:05:07.070
The Xamarin approach
is a little bit different.
00:05:07.070 --> 00:05:10.570
So our idea is, we want to be able
to target all of those platforms,
00:05:10.570 --> 00:05:15.630
but do it in a cross-platform way,
so that we use one language, one toolset.
00:05:15.630 --> 00:05:17.840
I don't have to learn
all those different tools,
00:05:17.840 --> 00:05:21.670
I can actually share the code
between all those platforms so when I
00:05:21.670 --> 00:05:25.870
Implement a feature, very likely I can get it
to those other platforms very quickly.
00:05:25.870 --> 00:05:30.620
When I fix a bug, I can get that bug fixed on every
single one of those platforms simultaneously.
00:05:31.280 --> 00:05:32.130
- Fantastic.
00:05:32.130 --> 00:05:35.300
While still maintaining the native feature
sets and native performance.
00:05:35.300 --> 00:05:36.980
- Yeah, exactly, that's exactly right.
00:05:36.980 --> 00:05:41.550
And so I am going to build my code in C#, I am going to
use Visual Studio, I am going to use the power of .NET
00:05:41.550 --> 00:05:45.570
and then I am going to actually deploy
that to Windows, iOS and Android.
00:05:45.570 --> 00:05:48.600
And I should mention, by the way, that we are
kind of talking about mobile apps here,
00:05:48.600 --> 00:05:50.540
but the ecosystem is much bigger than that.
00:05:50.540 --> 00:05:50.910
- Absolutely.
00:05:50.910 --> 00:05:52.250
We have seen a lot
of new platforms being added.
00:05:52.790 --> 00:05:57.080
Mac OS support is not final yet,
but it is in release.
00:05:57.080 --> 00:05:59.420
- Yes, it is in the release packages.
- Tizen.
00:05:59.420 --> 00:06:00.720
- Tizen.
- The mobile platform.
00:06:00.720 --> 00:06:04.930
- Yes, so Samsung's big appliance
platform on TVs and refrigerators.
00:06:04.930 --> 00:06:06.570
You can build apps for your refrigerator.
00:06:06.570 --> 00:06:09.160
- And recent announcements for things like WPF.
- That's right.
00:06:09.160 --> 00:06:11.550
- And even Linux support.
- That's exactly right.
00:06:11.550 --> 00:06:14.590
And so we are looking
at a very broad ecosystem.
00:06:14.590 --> 00:06:20.550
So IoT, desktop and mobile, all combined
with one shared code platform.
00:06:20.550 --> 00:06:22.750
- Fantastic.
- Which is pretty cool, yeah, that's exactly right.
00:06:23.580 --> 00:06:27.270
So one of the things that people always ask
when we talk about cross-platform development,
00:06:27.270 --> 00:06:29.170
and one of the concerns
that they have is,
00:06:29.170 --> 00:06:32.700
well gosh, what kind of penalty am I going
to pay in terms of performance?
00:06:32.700 --> 00:06:35.580
Well the thing with Xamarin is,
we actually compile down to a native app.
00:06:35.580 --> 00:06:40.280
So we talked a little bit about the native platforms,
where I'm using the tools the native vendor tools,
00:06:40.280 --> 00:06:42.130
and one of the things
that you just said Adrian is,
00:06:42.130 --> 00:06:43.850
well an advantage is,
you get a native app, right?
00:06:43.850 --> 00:06:47.740
So we get high performance, we can take advantage
of all those platform features.
00:06:47.740 --> 00:06:48.710
Well Xamarin is the same way.
00:06:48.710 --> 00:06:51.260
When we actually compile down,
we are building a native app.
00:06:51.260 --> 00:06:54.590
You are getting the same app package that you would if
you had used the vendor tool.
00:06:54.590 --> 00:06:56.840
- It's pretty exciting,
and we actually leverage the vendor tools.
00:06:56.840 --> 00:07:01.710
So Xamarin is using the build chain, you are
getting a native application, but it is written in C#
00:07:02.580 --> 00:07:04.120
and you get to leverage
the power of .NET.
00:07:04.120 --> 00:07:05.850
- That's exactly right.
That's a huge feature.
00:07:06.390 --> 00:07:10.170
Another thing that is really important today
is that Xamarin is all open source.
00:07:10.170 --> 00:07:13.060
And so there is no black box magic
that is happening here.
00:07:13.060 --> 00:07:15.750
Instead, you can actually go
right into open.Xamarin.com
00:07:15.750 --> 00:07:18.080
and you can go and see exactly
how something is implemented.
00:07:18.080 --> 00:07:20.270
If you don't understand how to take
advantage of a feature,
00:07:20.270 --> 00:07:25.230
or you are looking just to see maybe
how a renderer is built or how something is connected,
00:07:25.230 --> 00:07:27.340
you can actually go download
the GitHub repository,
00:07:27.340 --> 00:07:31.210
you can build it yourself, or just explore
the code, which is pretty awesome.
00:07:31.210 --> 00:07:35.110
- Yeah, and that's something I love because you can see
how the Xamarin engineers are building the tools,
00:07:35.110 --> 00:07:36.470
the patterns that they are following.
00:07:36.470 --> 00:07:40.580
And you can dig into the features
and see how things are working,
00:07:40.580 --> 00:07:42.210
and maybe even contribute features.
00:07:42.210 --> 00:07:44.810
- Yeah, that's right, they do take pull requests,
so that's pretty awesome too.
00:07:45.970 --> 00:07:48.710
So there are really two different
approaches when we use Xamarin.
00:07:49.960 --> 00:07:53.670
When you are building an app, and this is one of
the choices that you are often going to have to choose
00:07:53.670 --> 00:07:55.450
when you start the development process.
00:07:56.080 --> 00:07:59.680
You can choose to use the original
approach which was called a native UI.
00:07:59.680 --> 00:08:05.050
And this is where my user interface is going to
be described using the tools that are vendor specific.
00:08:05.050 --> 00:08:08.690
- And this goes back to talking about
how Xamarin uses the native tool chain.
00:08:08.690 --> 00:08:09.470
We are using the native tools.
00:08:09.470 --> 00:08:11.790
- That's right.
- And we can use the native UI tools as well.
00:08:11.790 --> 00:08:17.470
Now again, still leveraging C#, but we get all of
the same features that native vendor tools supply.
00:08:17.990 --> 00:08:18.790
- That's exactly right.
00:08:18.790 --> 00:08:21.410
So in iOS for example we would be using storyboards,
00:08:21.410 --> 00:08:23.530
and Android we would
be using layout files.
00:08:23.530 --> 00:08:26.470
And of course in UWP
or whatever other platform
00:08:26.470 --> 00:08:28.260
you are choosing you would use
XAML or something like that.
00:08:29.220 --> 00:08:31.440
- Right. Using Blend.
- Yeah, and one of the things
00:08:31.440 --> 00:08:34.890
that a lot of people said was we love
the idea of being able to share code,
00:08:34.890 --> 00:08:38.840
but we don't like having to actually
re-implement the user interface multiple times,
00:08:38.840 --> 00:08:40.210
because that's the penalty, right.
00:08:40.210 --> 00:08:42.610
When we use a native UI,
we are having to redraw
00:08:42.610 --> 00:08:45.290
or kind of redesign the UI for each platform.
00:08:45.290 --> 00:08:48.370
- Well it's duplicating work,
and we are showing the three platforms,
00:08:48.370 --> 00:08:51.470
but now we are looking at possibly
six, seven, even more platforms.
00:08:51.470 --> 00:08:55.470
It would be nice to have some sort of abstraction
that allows us to implement that UI once
00:08:55.470 --> 00:08:56.910
and have it apply to all of those platforms.
00:08:56.910 --> 00:08:57.770
- Yeah, that's exactly right.
00:08:57.770 --> 00:09:00.200
And that's where we came up
with this idea of Xamarin Forms.
00:09:00.200 --> 00:09:02.200
Xamarin Forms is not Xamarin,
I want to make that clear.
00:09:02.200 --> 00:09:07.330
It's part of the Xamarin framework, but Xamarin Forms
is a cross-platform UI toolkit.
00:09:07.330 --> 00:09:09.420
So it allows us to describe the user interface
00:09:09.420 --> 00:09:13.420
using the sort of things that you already
probably use today, XAML for example.
00:09:13.420 --> 00:09:14.910
- Right.
- Using a set of elements
00:09:14.910 --> 00:09:18.640
that are common across all of our
visual platforms like buttons and labels.
00:09:18.640 --> 00:09:22.250
And then it will actually build a native
user interface from that description.
00:09:22.760 --> 00:09:27.560
So we are still getting a native UI,
but we are able to describe and sort of build
00:09:27.560 --> 00:09:31.210
or design our user interface
with one implementation.
00:09:31.210 --> 00:09:32.790
- Fantastic.
I can't wait to see this in action.
00:09:32.790 --> 00:09:33.510
- Yeah, it's pretty awesome.
00:09:33.510 --> 00:09:35.680
So let's actually just sort of compare those two.
00:09:35.680 --> 00:09:37.330
So I am going to switch over
to Visual Studio here.
00:09:38.120 --> 00:09:39.450
I already have it up.
00:09:39.450 --> 00:09:42.220
I am on the preview edition,
and I am just going to do a new project.
00:09:42.220 --> 00:09:43.560
- We are using 2017.
00:09:43.560 --> 00:09:45.730
- I am using 2017, and again, I am on the preview,
00:09:45.730 --> 00:09:48.150
so I am on 15.5.3,
something like that.
00:09:48.150 --> 00:09:49.150
- 15.5 I believe, yeah.
00:09:49.150 --> 00:09:51.060
- The latest, and you can get that as well if you go
00:09:51.060 --> 00:09:56.940
to VisualStudio.com/preview you can actually download
this exact same version of Visual Studio.
00:09:56.940 --> 00:10:01.280
I'm going to go to the cross-platform section
under visual C#, and pick cross-platform app.
00:10:01.280 --> 00:10:03.170
Now it says Xamarin Forms.
00:10:03.170 --> 00:10:05.040
I'm going to just change this to native app.
00:10:05.040 --> 00:10:08.370
And I am going to put it on my desktop.
00:10:08.370 --> 00:10:10.300
And I get a little wizard here that comes up.
00:10:10.300 --> 00:10:12.210
And notice that I have blanked
out the master detail,
00:10:12.210 --> 00:10:14.530
so I have two different templates
I can choose from here.
00:10:14.530 --> 00:10:17.630
And you can see that it gives you some details
about what you're going to get out of this.
00:10:17.630 --> 00:10:18.840
I can pick my platforms.
00:10:18.840 --> 00:10:22.980
In this particular case, I have Android,
iOS and Windows, or UWP.
00:10:22.980 --> 00:10:25.450
I can pick my UI technology,
so Xamarin Forms or native.
00:10:25.450 --> 00:10:27.600
So even though the template says Xamarin Forms,
00:10:27.600 --> 00:10:30.390
you can actually build native UI
with this exact same template.
00:10:30.390 --> 00:10:32.500
And then I have two different
code-sharing strategies.
00:10:32.500 --> 00:10:35.570
Shared project where all of
my source files and XAML files
00:10:35.570 --> 00:10:38.460
and things like that would be sucked
into each one of the native projects,
00:10:38.460 --> 00:10:41.420
and so there's no binary deliverable
with a shared project,
00:10:41.420 --> 00:10:44.890
it's actually just a list of source files
that get compiled directly into the app.
00:10:45.410 --> 00:10:47.000
And then .NET Standard.
00:10:47.000 --> 00:10:50.030
So .NET Standard 2 is a new feature of Xamarin Forms.
00:10:50.030 --> 00:10:53.430
- I'm excited about.
- That allows us to share code at the binary level
00:10:54.080 --> 00:10:58.100
and it generates assemblies that actually
are usable across a wide, wide set of platforms.
00:10:58.100 --> 00:11:00.670
- Absolutely, which means they are
shareable, they are testable.
00:11:00.670 --> 00:11:01.830
- Yes, exactly right.
00:11:01.830 --> 00:11:04.390
- And of course, they work with more than
just these three platforms with .NET
00:11:04.390 --> 00:11:05.720
Standard.
- Right, it's .NET Standard.
00:11:05.720 --> 00:11:06.760
The idea is it is standard.
00:11:06.760 --> 00:11:08.240
So we can use it in a variety of places.
00:11:08.240 --> 00:11:11.540
So I am going to do a native UI
in this case, and click OK.
00:11:11.540 --> 00:11:16.910
And it's going to build me three applications
plus one more library, which is my .NET
00:11:16.910 --> 00:11:17.710
Standard library.
00:11:17.710 --> 00:11:18.880
And it's super-fast, I love that.
00:11:18.880 --> 00:11:22.120
- It is super-fast, the new version is very quick.
- Yeah, so notice
00:11:22.120 --> 00:11:26.250
I have an Android app here, and if I look inside here
you can see it has got some references,
00:11:26.250 --> 00:11:31.280
mono.android, that's the equivalent
of essentially the MS Core lib
00:11:31.280 --> 00:11:32.900
that you would see in a desktop app.
00:11:32.900 --> 00:11:36.530
We also have& - That's our .NET library.
- It is, well, it's the runtime.
00:11:36.530 --> 00:11:37.000
It's the runtime.
00:11:37.000 --> 00:11:38.300
- Sorry, yeah.
- That's right.
00:11:38.300 --> 00:11:40.740
We also have systems,
system.core and system.xml.
00:11:40.740 --> 00:11:43.670
Those are the same assemblies
that you are used to, so if you are doing .NET
00:11:43.670 --> 00:11:45.490
development you are probably
familiar with those.
00:11:45.490 --> 00:11:49.600
And then of course we have a reference
to the .NET Standard library that is at the very top.
00:11:49.600 --> 00:11:54.040
Notice it just has this single class
in it with really nothing there.
00:11:54.040 --> 00:11:58.140
So it's really just a single class
that has no implementation.
00:11:58.140 --> 00:12:00.700
- It's a blank slate.
- It is, it's a blank slate.
00:12:00.700 --> 00:12:05.800
Now notice inside my Android app
I also have a resources folder that has, for example,
00:12:05.800 --> 00:12:08.640
an AXML file, this is the description of the UI.
00:12:08.640 --> 00:12:09.890
- Right, so of course, if you were a data vendor,
00:12:09.890 --> 00:12:12.530
a developer using Java,
this would all be very familiar to you.
00:12:12.530 --> 00:12:13.480
- Yes, that's exactly right.
00:12:13.480 --> 00:12:15.740
And then I have this class called main activity.
00:12:15.740 --> 00:12:20.680
Main activity is essentially Android is composed
of activities when you build an Android app,
00:12:20.680 --> 00:12:23.340
you have an activity typically
for each page or screen
00:12:23.340 --> 00:12:26.100
that you are going to display
that's a unique page.
00:12:26.670 --> 00:12:31.520
And in this particular case, notice it derives from
a class called activity that comes out of Android.app.
00:12:31.520 --> 00:12:35.620
Now this looks like C#,
because the code itself is,
00:12:35.620 --> 00:12:38.640
but this class right here
that we are actually deriving from,
00:12:38.640 --> 00:12:41.470
I want to point out that it is
actually a native wrapper.
00:12:41.470 --> 00:12:45.600
So it is a C#, it's a thin little wrapper
around the activity class,
00:12:45.600 --> 00:12:50.120
but the activity class itself is actually
a Java class coming from the Android SDK.
00:12:50.120 --> 00:12:52.230
- So we're using the native types.
- That's exactly right.
00:12:52.230 --> 00:12:54.480
- From the Android SDK.
So there's no interpretation there,
00:12:54.480 --> 00:12:56.560
there's nothing
being reinvented by Xamarin,
00:12:56.560 --> 00:12:57.920
we are leveraging the native types and APIs.
00:12:57.920 --> 00:13:00.310
- Absolutely.
Really, Xamarin is just a way
00:13:00.310 --> 00:13:02.470
of being able to interact
with these other platforms.
00:13:02.470 --> 00:13:06.540
So we allow C# to be able to interact
with these other types,
00:13:06.540 --> 00:13:10.910
whether it is Java types in the case
of Android or Objective C
00:13:10.910 --> 00:13:13.900
and Swift types
in the case of iOS.
00:13:13.900 --> 00:13:15.090
That's exactly right.
- Fantastic.
00:13:15.090 --> 00:13:18.810
And so notice it's got a button
and it is pulling this button out of the UI
00:13:18.810 --> 00:13:20.990
and then it has got a little delegate
handle there for the click handler.
00:13:21.620 --> 00:13:24.430
- And really quick, notice that although
we are using the native types,
00:13:24.430 --> 00:13:26.970
we are also coding in a C#
way, where we are using delegates.
00:13:26.970 --> 00:13:28.420
- Yeah, that's exactly right.
- For our description.
00:13:28.420 --> 00:13:31.970
- And then on the iOS side, we've got an app delegate,
so that's really our starting point.
00:13:31.970 --> 00:13:36.080
And notice it derives from something called
UI application delegate that comes on a UI kit.
00:13:36.080 --> 00:13:37.820
UI kit is an Apple thing.
00:13:37.820 --> 00:13:39.430
- Native type.
- Yeah, it's a native type.
00:13:39.430 --> 00:13:44.300
So the same sort of thing is happening here
where we are actually leveraging native types
00:13:44.300 --> 00:13:46.670
from the platforms coming from
the vendors, which is pretty cool.
00:13:46.670 --> 00:13:48.100
- Fantastic.
- And in fact, if you want,
00:13:48.100 --> 00:13:50.380
you can actually pull up
decompilers here.
00:13:50.380 --> 00:13:52.130
So here is mono.android.
00:13:52.130 --> 00:13:59.530
It's really, really ugly, but if I go into Android.app
I can find activity here, and let it decompile that.
00:14:00.810 --> 00:14:03.170
So if I double click on that it should decompile.
00:14:03.170 --> 00:14:06.280
And you will be able to see exactly
what that code looks like.
00:14:06.280 --> 00:14:12.320
Now in this particular case, you can see
that it is really, really nasty kind of looking code,
00:14:12.320 --> 00:14:15.160
and the reason why is because
we don't actually write this code.
00:14:15.160 --> 00:14:19.960
We actually have tools, and you can
see them in the open source repository,
00:14:19.960 --> 00:14:25.540
that take the existing Java things and they
actually build all this sort of layer for us.
00:14:25.540 --> 00:14:29.140
So the binding layer is actually
machine generated based upon that.
00:14:29.140 --> 00:14:31.420
And then we've got some partial classes
that sort of fill in the gaps.
00:14:31.420 --> 00:14:33.880
- I'm not seeing much code here.
- No, that's right.
00:14:33.880 --> 00:14:37.030
In fact you can see, for example,
that most of this stuff is really
00:14:37.030 --> 00:14:40.750
just J&I type work that is happening here,
that is the Java native interfaces.
00:14:40.750 --> 00:14:45.320
So we are just kind of transitioning
from the managed C# world into the Java world.
00:14:46.450 --> 00:14:48.510
And we can see the same sort
of thing with iOS as well.
00:14:48.510 --> 00:14:53.190
But let me just go ahead and run one of these.
00:14:53.190 --> 00:14:54.950
We will do it on the Android device here.
00:14:55.550 --> 00:14:57.080
- And while Mark is doing that,
we do have a question.
00:14:57.080 --> 00:15:00.110
SO Samuel asked, PCL or share project?
00:15:00.110 --> 00:15:03.560
So I will say that moving forward,
we definitely recommend .NET
00:15:03.560 --> 00:15:08.360
Standard over PCL, but it's kind of a question
of compiled library project versus shared project.
00:15:08.360 --> 00:15:09.580
Many opinions on this.
00:15:10.240 --> 00:15:12.010
I tend towards the library.
00:15:12.010 --> 00:15:13.410
I like .NET Standard.
00:15:13.410 --> 00:15:14.320
I like the encapsulation.
00:15:14.320 --> 00:15:18.080
There are definitely use cases where shared
projects are just a little bit easier to work with.
00:15:18.080 --> 00:15:19.570
- Yeah.
- It comes down to whether you want
00:15:19.570 --> 00:15:20.940
to test that library independently.
00:15:20.940 --> 00:15:22.570
Do you want to share the compiled library.
00:15:23.420 --> 00:15:26.410
I love them both, I think they are both great
solutions for Xamarin and Xamarin Forms.
00:15:26.410 --> 00:15:30.450
- Right, the reality is there is not a lot you can do
in one that you necessarily can't do in the other.
00:15:30.450 --> 00:15:32.700
It just may require more work
one way or the other.
00:15:32.700 --> 00:15:36.170
And so it all comes down to how
you actually want to share your code.
00:15:36.170 --> 00:15:39.820
So this has gone ahead and deployed,
and it's on my Android device.
00:15:39.820 --> 00:15:42.560
You can see I have an Android
phone here that's plugged in.
00:15:42.560 --> 00:15:45.020
And it put a little button up here
and every time I click the button you can see
00:15:45.020 --> 00:15:46.650
I'm going to get a little click handler.
00:15:46.650 --> 00:15:51.860
And in fact, if we just minimize this
for a second and go back to that activity,
00:15:53.340 --> 00:15:55.250
where did it go, there it is.
00:15:55.250 --> 00:16:00.450
I can even can come over here and put a breakpoint
like into this delegate handler,
00:16:01.930 --> 00:16:07.250
and then if I tap on this button,
well yeah, you can see
00:16:07.250 --> 00:16:09.360
I've actually stopped on
that handler right there.
00:16:09.360 --> 00:16:12.540
And so I can actually see this
is an Android widget button
00:16:12.540 --> 00:16:14.010
and I can see all
the details about it.
00:16:14.010 --> 00:16:15.130
So that's pretty darn cool.
00:16:15.130 --> 00:16:20.540
This is a native UI, we're actually leveraging
completely the Android and iOS
00:16:20.540 --> 00:16:23.390
UI kind of constructs in order
to actually construct and build the UI,
00:16:24.530 --> 00:16:26.490
so that's pretty darn cool.
00:16:26.490 --> 00:16:27.540
- Yeah, pretty fantastic.
00:16:27.540 --> 00:16:29.360
- It is.
- It is those familiar Windows
00:16:29.360 --> 00:16:33.680
development patterns, but we are deploying to iOS,
Android, even Linux in the future.
00:16:33.680 --> 00:16:36.030
- So the other option
that we have is Xamarin Forms.
00:16:36.030 --> 00:16:36.880
Tell me about Xamarin Forms.
00:16:36.880 --> 00:16:38.150
Why would I choose Xamarin Forms?
00:16:38.150 --> 00:16:39.630
- Well I mean, we talked
about it a little before,
00:16:39.630 --> 00:16:42.810
and it really comes down to it
is the single UI definition.
00:16:42.810 --> 00:16:44.460
It's the shared UI definition.
00:16:44.460 --> 00:16:47.020
So this is a great slide to look at this.
00:16:47.020 --> 00:16:50.110
We see iOS, Android, Windows and there are actually
a couple of flavors of Windows
00:16:50.110 --> 00:16:51.800
being supported by Xamarin Forms.
00:16:51.800 --> 00:16:53.950
So we are talking six, seven plus platforms.
00:16:53.950 --> 00:16:57.500
That's possibly seven different
UIs we have to construct, we have to test.
00:16:58.110 --> 00:17:02.230
And so using Xamarin Forms means
that we can create a single UI definition
00:17:02.730 --> 00:17:04.510
that applies to all these platforms.
00:17:04.510 --> 00:17:08.390
But again, as you said earlier,
that shared UI definition
00:17:08.390 --> 00:17:12.040
is actually creating native
controls and native UI
00:17:12.040 --> 00:17:13.900
when it is runtime on the platforms.
00:17:13.900 --> 00:17:16.040
- Yeah, that's exactly right.
- So really, why?
00:17:16.040 --> 00:17:17.390
It's a huge time saver.
00:17:17.390 --> 00:17:18.030
- Yeah.
00:17:18.030 --> 00:17:21.240
And the reality is when Xamarin Forms
was originally introduced,
00:17:21.240 --> 00:17:26.690
there were a lot of concerns about things
that weren't necessarily available in Xamarin Forms,
00:17:26.690 --> 00:17:28.790
because it is an abstraction, right?
00:17:28.790 --> 00:17:33.530
So for example, we have got buttons and labels
and entries to be able to enter in text.
00:17:33.530 --> 00:17:36.790
But some of the more custom controls
that you find on a platform,
00:17:36.790 --> 00:17:38.820
for instance, iOS has a segmented control,
00:17:38.820 --> 00:17:43.590
so it is like a toggle box
that you can pick one of the choices from.
00:17:43.590 --> 00:17:45.580
- But it's unique to iOS.
- But it's unique to iOS.
00:17:45.580 --> 00:17:47.240
And so it is not exposed in Xamarin Forms,
00:17:47.240 --> 00:17:53.400
because there is no corresponding control
that's available in Android or in UWP for that matter.
00:17:53.400 --> 00:17:56.850
- Right, so Xamarin Forms,
it's a generalization of UI,
00:17:56.850 --> 00:18:01.930
so we have got the components or elements
that are common across all of these platforms.
00:18:01.930 --> 00:18:06.210
So we are going to build often line of business
applications are a great use for Xamarin Forms.
00:18:06.210 --> 00:18:11.000
But we are not necessarily leveraging all of
the individual controls on the platforms.
00:18:11.000 --> 00:18:12.310
- Right.
- But we can.
00:18:12.310 --> 00:18:12.940
- That's right.
00:18:12.940 --> 00:18:15.670
So one of the newest features that was
just introduced into the platform
00:18:15.670 --> 00:18:19.820
was something called
Xamarin Forms native forms.
00:18:20.750 --> 00:18:24.930
So native forms, what they allow us to do,
is actually build a page in Xamarin Forms
00:18:24.930 --> 00:18:26.500
which you are going to see in just a moment,
00:18:26.500 --> 00:18:32.100
and I can actually integrate it into a native iOS
or Android application, or a UWP app.
00:18:32.100 --> 00:18:37.030
And so the idea being that I don't have to pick
and choose between native UI or Xamarin Forms,
00:18:37.030 --> 00:18:40.650
I can go down a path and then decide well,
for this particular screen,
00:18:40.650 --> 00:18:45.730
I want to use a native UI
or I want to use a forms UI, and it will just work.
00:18:45.730 --> 00:18:49.200
- And this really exciting,
because the honest truth is most of the time,
00:18:49.720 --> 00:18:52.750
many applications don't
leverage those unique controls,
00:18:53.380 --> 00:18:56.050
but there are times you want them
and those are often the things
00:18:56.050 --> 00:19:00.240
that you�re your application feel unique
or feel like it is integrated well with the platform,
00:19:00.240 --> 00:19:02.100
so it is really nice
to have that flexibility.
00:19:02.100 --> 00:19:05.260
Use Xamarin Forms for a lot of your UI,
pull in the native components
00:19:05.260 --> 00:19:07.610
when you need to for a little extra polish.
00:19:07.610 --> 00:19:11.330
- And prior to the native forms,
you had the ability to create custom renderers,
00:19:11.330 --> 00:19:13.360
and the idea behind a renderer
is it is just a thing
00:19:13.360 --> 00:19:16.230
that is going generate
the native UI for the abstraction.
00:19:17.420 --> 00:19:19.940
And so our general advice
now with native forms
00:19:19.940 --> 00:19:22.670
and with the ability to kind of
do embedding of native controls
00:19:22.670 --> 00:19:26.940
within forms itself is if you find yourself
creating a bunch of renderers,
00:19:26.940 --> 00:19:28.910
maybe it is time to switch to a native UI
00:19:29.470 --> 00:19:33.980
and then use Xamarin Forms pages to backfill
the specific pages that you want to ship.
00:19:33.980 --> 00:19:36.140
- And I am really excited
that we have that flexibility.
00:19:36.140 --> 00:19:37.730
- Yeah, it's totally cool.
- And we are not locked in.
00:19:37.730 --> 00:19:39.960
We can go back and forth as needed.
- Yeah, totally cool.
00:19:39.960 --> 00:19:42.880
So let's talk just a little bit
about what we want to build today.
00:19:42.880 --> 00:19:45.920
So we are going to be part
of Frugal's Garden Center.
00:19:45.920 --> 00:19:47.680
- Excellent.
- So you and I have just joined in the business
00:19:47.680 --> 00:19:50.430
and we know nothing
about plants, unfortunately,
00:19:50.430 --> 00:19:53.080
but we are going to open a garden center
because we hear there is a lot of money in that.
00:19:53.080 --> 00:19:56.060
- We know more about monkeys, I think.
- That's right, that's right.
00:19:56.060 --> 00:19:58.010
- Well we are going to hire some monkeys.
- Excellent.
00:19:58.010 --> 00:20:00.300
- Or teenagers, because again,
this is Frugal's Garden Center,
00:20:00.300 --> 00:20:04.640
we are going to hire some teenagers, and unfortunately,
teenagers don't know a lot about plants either.
00:20:04.640 --> 00:20:08.070
But luckily, teenagers always
have their phone with them.
00:20:08.070 --> 00:20:09.680
- Perfect.
- In fact I think it's kind of attached
00:20:10.500 --> 00:20:11.820
in some way to their pocket.
00:20:11.820 --> 00:20:15.780
- They are born with them now.
- They come out of the hospital with a phone.
00:20:15.780 --> 00:20:21.180
And so they have phones and so what we are going to do
is we are going to commission to build an app
00:20:21.180 --> 00:20:22.960
so that students
that are part,
00:20:22.960 --> 00:20:28.830
or some of our employees that are
our helpers in the garden center,
00:20:29.770 --> 00:20:33.100
they can take their phone and when a customer
comes up and asks a question,
00:20:33.100 --> 00:20:36.880
they can just take a picture of the plant
and have the phone actually identify it.
00:20:36.880 --> 00:20:42.540
OK, so we commissioned a great design center
to build some mock-ups for us.
00:20:42.540 --> 00:20:45.820
- Also a teenager.
- Well we paid a lot of money for this, so.
00:20:46.800 --> 00:20:48.960
And so this is sort of the screen
that we would like to build.
00:20:48.960 --> 00:20:50.760
We are going to focus more
on this first screen here.
00:20:51.590 --> 00:20:55.770
And the idea is we want to be able
to put a label at the top that has take the photo,
00:20:55.770 --> 00:20:57.440
make sure everything is in the photo.
00:20:57.440 --> 00:21:00.360
We are going to have two buttons,
take photo and a use photo.
00:21:00.360 --> 00:21:03.570
We will have an activity indicator in there
to say that we're doing something,
00:21:03.570 --> 00:21:06.040
and then we'll have an error message
that can be presented at the bottom -
00:21:06.040 --> 00:21:10.100
Now this app looks great, but do teenagers
all use the same type of phone?
00:21:10.100 --> 00:21:11.330
- No, see that's the problem.
00:21:11.330 --> 00:21:13.040
Because again, we are not
going to give them a phone.
00:21:13.040 --> 00:21:15.460
This is, remember,
this is Frugal's Garden Center.
00:21:15.460 --> 00:21:19.100
And so we want them to bring their
own device, which is a common thing.
00:21:19.100 --> 00:21:22.930
Often, a lot of enterprises are allowing people
to bring devices into the enterprise.
00:21:22.930 --> 00:21:26.280
- Absolutely.
- So it is BYOD, but we are going to install the app.
00:21:26.280 --> 00:21:29.280
And so we don't care if you have
an Android phone or an iOS phone,
00:21:29.280 --> 00:21:34.010
or even a Windows phone, if for instance,
you still have a Windows phone.
00:21:34.010 --> 00:21:35.690
- I do.
- I do too.
00:21:35.690 --> 00:21:37.020
I think there is one in my bag, in fact.
00:21:37.620 --> 00:21:39.310
- And so we are going to have
a couple of different screens,
00:21:39.310 --> 00:21:41.820
but we are going to focus primarily
on this first screen here,
00:21:41.820 --> 00:21:43.390
and we are going to use
Xamarin Forms to do it,
00:21:43.390 --> 00:21:45.480
because we want to actually
use a cross-platform UI.
00:21:45.480 --> 00:21:48.720
And so I am going to go back to Visual Studio here,
and I am going to say file, new
00:21:48.720 --> 00:21:50.440
and we are going to go back to that project,
00:21:51.400 --> 00:21:53.590
and same cross platform,
00:21:54.960 --> 00:21:56.410
but this time I am going
to say Garden Center.
00:21:56.410 --> 00:21:58.370
Actually I am going to
call it Garden Helper.
00:21:59.610 --> 00:22:00.590
Create a new solution.
00:22:00.590 --> 00:22:03.210
The same thing that we had before, and we are going to
start again with a blank app.
00:22:03.210 --> 00:22:05.870
Master detail does add a bunch
of other things into it,
00:22:05.870 --> 00:22:10.530
so it is not things that I typically
need when I am starting an app.
00:22:11.880 --> 00:22:14.950
If you are building a master detail app,
and that's what you need,
00:22:14.950 --> 00:22:17.040
then that could be a good
template to start with.
00:22:17.040 --> 00:22:18.590
- Absolutely.
- But more often than not,
00:22:18.590 --> 00:22:19.960
you are probably going to
start with Xamarin Forms.
00:22:19.960 --> 00:22:21.890
- Yeah, and you saw that plumbing
for that navigation paradigm.
00:22:21.890 --> 00:22:22.690
- Yeah, that's exactly right.
00:22:22.690 --> 00:22:25.460
So I am going to click OK and I
am going to use shared project, Xamarin Forms.
00:22:26.650 --> 00:22:27.880
Let it go ahead and build.
00:22:27.880 --> 00:22:30.030
So here you go, we've got
a little shared project up here.
00:22:30.030 --> 00:22:32.550
It has a couple of files, app.xaml, mainpage.xaml.
00:22:32.550 --> 00:22:38.150
So in Xamarin Forms, we describe our UI with XAML,
typically, but you can do it in C#
00:22:38.150 --> 00:22:41.640
as well, so you can build it up constructively
using object sort of methods.
00:22:42.310 --> 00:22:47.030
And then of course Android, iOS and UWP app here.
00:22:47.030 --> 00:22:52.530
So even though we're using Xamarin Forms, we still have
these platform-specific applications,
00:22:52.530 --> 00:22:55.260
because that's what is actually
going to get published to the store,
00:22:55.260 --> 00:22:58.220
and that's what we are actually
going to install on the device.
00:22:58.220 --> 00:22:59.780
- Right, so we're still making
those Android applications.
00:22:59.780 --> 00:23:00.480
- That's exactly right.
00:23:00.480 --> 00:23:04.430
It is still a fully native app, so when we build
the Android app, you are going to get an APK file.
00:23:04.430 --> 00:23:09.540
When you build the iOS app, you are going to get an app
bundle that you would then submit up to the App Store
00:23:09.540 --> 00:23:11.210
and be able to make
a bunch of money from.
00:23:11.210 --> 00:23:13.100
- The same as we saw when using the native UI.
00:23:13.100 --> 00:23:17.250
And just show you, Xamarin Forms,
it is a UI layer on top.
00:23:17.250 --> 00:23:20.330
- That's exactly right.
- Or say a UI, a cross-platform UI definition.
00:23:20.930 --> 00:23:22.450
- Yes, that's correct.
00:23:22.450 --> 00:23:24.410
And so here we've got our mainpage.xaml.
00:23:24.410 --> 00:23:27.030
Notice it just starts with a content page.
00:23:27.030 --> 00:23:29.850
A page just represents a single page
in your application.
00:23:29.850 --> 00:23:33.590
Content page is a page representation
that has one piece of content,
00:23:33.590 --> 00:23:37.010
so it is very similar to
if you use UWP, a page in UWP.
00:23:37.860 --> 00:23:39.180
And we have a label here.
00:23:39.180 --> 00:23:42.850
And I am going to go ahead and use
a somewhat new feature called Live Player.
00:23:43.920 --> 00:23:47.960
And so I am going to go ahead
and connect up to Live Player.
00:23:49.340 --> 00:23:50.600
And let's see here.
00:23:51.230 --> 00:23:53.320
Let me see if I can actually, let me build this first.
00:23:53.320 --> 00:23:54.620
- Excellent.
And this is a real exciting tool.
00:23:54.620 --> 00:23:56.120
It is in preview.
00:23:56.120 --> 00:23:56.930
- it is in preview.
00:23:56.930 --> 00:24:01.910
And so sometimes it is a little tricky to get it
connected, but more often than not it is pretty stable.
00:24:01.910 --> 00:24:04.830
- But I am pretty excited, as you are about to see,
it's a really handy tool,
00:24:05.450 --> 00:24:07.080
especially for getting your UI set up.
00:24:07.080 --> 00:24:08.510
- Yes, that's exactly right.
00:24:08.510 --> 00:24:10.960
- And we do have a question actually,
while that's deploying.
00:24:11.510 --> 00:24:15.040
So Colin asked, does Xamarin
support app tethering, so i.e.
00:24:15.040 --> 00:24:18.010
Android app or iOS apps
interacting with the desktop app?
00:24:18.010 --> 00:24:20.220
And so there is nothing built in
to Xamarin framework,
00:24:20.220 --> 00:24:22.790
because again, we are just
leveraging the native API sets.
00:24:22.790 --> 00:24:26.770
We are using native APIs, native vendor
APIs, or say UWP for example.
00:24:27.990 --> 00:24:32.890
But of course there are lots of ways we can interact
and connect a mobile app to a desktop app,
00:24:32.890 --> 00:24:35.330
or a mobile app to another mobile app or desktop app.
00:24:35.860 --> 00:24:39.170
I mean Azure is really the perfect foundation
for these kinds of things.
00:24:39.170 --> 00:24:44.600
We can create a rest API, you know, a web app
or an API app in Azure.
00:24:45.110 --> 00:24:46.580
We can leverage Azure services.
00:24:46.580 --> 00:24:51.790
We can share data using a multitude
of table storage options on Azure.
00:24:51.790 --> 00:24:55.840
So nothing built in, but yeah, there's lots
and lots of options to connect applications.
00:24:55.840 --> 00:24:59.800
And we are going to talk a little bit
about that later on today, actually.
00:24:59.800 --> 00:25:00.430
- Yeah, that's right.
00:25:00.430 --> 00:25:03.510
And so what I've done here as Adrian
was talking is I've gone ahead
00:25:03.510 --> 00:25:05.730
and paired my Samsung device to the Live Player,
00:25:05.730 --> 00:25:08.320
and you can see that it's showing up
here, Samsung device.
00:25:08.320 --> 00:25:11.460
And then I can just right click on my XAML
here and I can click live run.
00:25:12.430 --> 00:25:16.890
And what that will do is that will
actually interpret this content page here,
00:25:16.890 --> 00:25:19.470
and it will display it on my device,
which is pretty darn cool.
00:25:19.470 --> 00:25:23.120
You can see here, that welcome to Xamarin
Forms, that's the label being displayed here,
00:25:23.120 --> 00:25:25.710
and the reason we called it live run
is because it's live.
00:25:25.710 --> 00:25:27.200
I can say font size is large.
00:25:27.860 --> 00:25:33.940
And I can say text color is& No, no, no.
00:25:33.940 --> 00:25:35.080
Stop, stop, stop.
00:25:35.080 --> 00:25:37.050
Text color is red.
00:25:38.300 --> 00:25:44.440
And I save that and it should, in just a second,
update over here as well on the phone.
00:25:44.440 --> 00:25:48.760
- And this is the phone on your desk right here.
- It is the phone sitting here, right on my desk.
00:25:48.760 --> 00:25:49.470
And so there you go.
00:25:49.470 --> 00:25:52.110
You can see this is the device
that is actually running.
00:25:52.110 --> 00:25:53.400
And we can see the view that's here.
00:25:54.340 --> 00:25:55.800
And so that is live run.
00:25:55.800 --> 00:25:58.490
And so this is a nice way
to actually design out a screen,
00:25:58.490 --> 00:26:01.690
because I can use this to sort of
see my screen as I build it.
00:26:01.690 --> 00:26:09.750
So remember that we had three sort of
things that were present in our screen.
00:26:10.290 --> 00:26:13.700
- Right, so we had our initial text
at the top, we had some buttons.
00:26:13.700 --> 00:26:15.710
- Yep.
00:26:15.710 --> 00:26:17.340
We had some buttons and then what else was there?
00:26:17.340 --> 00:26:20.460
- I think we had a&
- You tell me what we want to build here.
00:26:21.130 --> 00:26:22.840
- All right, well I think definitely
want a section at the top.
00:26:22.840 --> 00:26:23.530
- Yep, all right.
00:26:23.530 --> 00:26:25.330
- For our label, for some text, for our application.
00:26:25.330 --> 00:26:27.690
- All right, so we will say
we've got three rows, how is that?
00:26:27.690 --> 00:26:29.270
- Perfect.
All right, and this is a grid.
00:26:29.270 --> 00:26:33.440
And the grids allow me to sort of describe
my data in a tabular kind of form.
00:26:33.440 --> 00:26:36.380
- Right, and this should be very familiar
to many developers who use anything else,
00:26:37.030 --> 00:26:38.170
any other XAML technology.
00:26:38.170 --> 00:26:39.230
This is very similar.
00:26:39.230 --> 00:26:39.780
- Yep.
00:26:39.780 --> 00:26:41.710
- Android has the same concept of tables as well,
00:26:42.490 --> 00:26:43.910
or very similar, I should say.
00:26:43.910 --> 00:26:44.940
- Yeah, that's right.
00:26:44.940 --> 00:26:47.150
And so we are going to set
our background color to dark green,
00:26:48.580 --> 00:26:52.400
and it should hopefully
pick that up here in a second.
00:26:52.400 --> 00:26:55.360
All right, and what we will want
to do is we want to put the label across the top.
00:26:55.360 --> 00:26:56.870
- Correct.
- So we will stick that in the first row.
00:26:56.870 --> 00:26:58.630
And I am going to go ahead
and stick it in a frame.
00:27:00.730 --> 00:27:04.480
Three, four, five six, and then
we will put our label in there.
00:27:04.480 --> 00:27:13.660
And we will just say, take a photo, or actually
make sure the plant is completely in the photo
00:27:15.460 --> 00:27:21.180
with all the distinguishing characteristics.
00:27:21.180 --> 00:27:21.450
OK.
00:27:21.450 --> 00:27:23.570
- You are braver than I am.
- I know.
00:27:24.620 --> 00:27:26.540
OK, let's see if that comes up there.
00:27:26.540 --> 00:27:27.400
So there it is.
00:27:27.400 --> 00:27:29.380
- And it's fast, that's very quick.
- Yeah, you can see here it is,
00:27:29.380 --> 00:27:30.380
it's green, here's my piece.
00:27:30.380 --> 00:27:32.450
But of course, we want that
to be just at the top.
00:27:32.450 --> 00:27:35.450
And so what we can do is say the height
for this is just going to be auto.
00:27:36.500 --> 00:27:39.970
- And again, very similar
to other XAML-based technologies.
00:27:39.970 --> 00:27:40.840
- Yeah, absolutely.
00:27:40.840 --> 00:27:42.890
And so you can see now it is just auto.
00:27:42.890 --> 00:27:44.350
All right, the next thing
that we want is what?
00:27:45.310 --> 00:27:48.410
- Well our input, our controls.
- All right, so we can put a couple buttons,
00:27:48.410 --> 00:27:50.500
and so we can say
text equal take a photo.
00:27:53.190 --> 00:27:54.490
And so that will be my first button.
00:27:56.440 --> 00:28:01.200
And boy, it's too quick, it's like catching it
while I type and it is giving me an error there.
00:28:01.960 --> 00:28:06.270
And then the other one we are going to want to do
is go ahead and use an existing photo.
00:28:06.270 --> 00:28:07.710
Right, something stored
on the phone already.
00:28:07.710 --> 00:28:08.780
- That's right.
00:28:08.780 --> 00:28:13.170
OK, now these are two buttons and what is
going to happen here when we put it in here
00:28:13.170 --> 00:28:14.700
is it is going to stick it up at the top here.
00:28:14.700 --> 00:28:17.560
And so if I tell it to go ahead
since it had that error,
00:28:17.560 --> 00:28:20.560
it didn't do it, you can see that now we have got
these two buttons here at the top.
00:28:20.560 --> 00:28:22.830
So these really need to be in the second row.
00:28:22.830 --> 00:28:23.420
- Absolutely.
00:28:23.420 --> 00:28:27.300
- Right, the way we do that is we just tell the control
I want this to be in grid row 1,
00:28:29.050 --> 00:28:30.870
and this will also be in grid row 1.
00:28:31.540 --> 00:28:34.100
And then it is going to move it down,
you can see that I just have this one button
00:28:34.100 --> 00:28:36.140
and then this other button
is now sitting on top of it.
00:28:36.140 --> 00:28:39.290
- Right.
- Now we want these to be side by side,
00:28:39.290 --> 00:28:41.760
or I guess we can put them top to bottom,
but I want them side by side.
00:28:41.760 --> 00:28:43.620
- Side by side I think is nice.
- That's what the designer showed us
00:28:43.620 --> 00:28:46.280
in our little piece,
and so I am going to say grid.column.
00:28:47.030 --> 00:28:49.830
- Now wait, now Mark, now you haven't defined columns
yet though on your grid.
00:28:49.830 --> 00:28:50.930
- I haven't, actually.
00:28:50.930 --> 00:28:54.870
And this is one of the areas, so a lot
of people ask about Xamarin Forms
00:28:54.870 --> 00:28:59.120
XAML, is it the same as the XAML
that I am used to with say
00:28:59.120 --> 00:29:02.010
UWP or WPF or even Silverlight
if we go back.
00:29:02.700 --> 00:29:04.270
The answer is, sort of.
00:29:04.270 --> 00:29:07.090
- Similar.
- So the XAML is a specification,
00:29:07.090 --> 00:29:09.780
and it describes a way
of inflating an object raft
00:29:09.780 --> 00:29:13.820
where we use elements to create
objects and properties to then set,
00:29:13.820 --> 00:29:16.850
or rather attributes on
the XAML to set properties.
00:29:17.940 --> 00:29:20.690
But the things we are creating
are going to be different, that's the first thing.
00:29:21.270 --> 00:29:24.350
- Right, we're creating Xamarin Form types.
- That's right.
00:29:24.350 --> 00:29:26.330
And some of the behavior is going
to be a little bit different as well.
00:29:26.330 --> 00:29:30.780
So notice all I said was grid column 1
and grid column 0, grid column 1,
00:29:30.780 --> 00:29:32.810
and I ended up with
my buttons side-by-side.
00:29:32.810 --> 00:29:37.660
I didn't have to define a column definition here
because the Xamarin Forms XAML engine just said,
00:29:37.660 --> 00:29:41.350
well I see that you are doing columns,
I am assuming that you want columns,
00:29:41.350 --> 00:29:43.930
so I am just going to create
two equally spaced columns.
00:29:43.930 --> 00:29:44.660
And it does that for us.
00:29:44.660 --> 00:29:48.750
Now if you want, you can actually just do
a grid column definition as well,
00:29:48.750 --> 00:29:52.520
we can put two column definition objects in there,
it would accomplish the same thing.
00:29:52.520 --> 00:29:56.590
It's up to you whether or not you want to be explicit
about it or not, some people really prefer that.
00:29:57.420 --> 00:30:00.460
- I love this personal preference
for simple applications,
00:30:00.460 --> 00:30:03.080
like a small amount of UI,
it is great to throw it in there.
00:30:03.080 --> 00:30:04.960
It's a little less tightening,
a little less work.
00:30:05.730 --> 00:30:09.030
For bigger chunks of UI, more complex pages,
I like to be explicit.
00:30:09.030 --> 00:30:11.640
Like really clear, read my code, what's going on.
00:30:11.640 --> 00:30:13.040
But it's personal preference.
00:30:13.040 --> 00:30:14.750
- I get that.
I totally get that.
00:30:14.750 --> 00:30:19.290
And so I am going to put a label in here as well,
we will say the text color is going to be red
00:30:19.290 --> 00:30:21.080
and we are going to set the text to be
00:30:21.080 --> 00:30:23.040
Argos here.
00:30:24.500 --> 00:30:30.800
OK, and that's in grid row 2, and again,
it kind of gave us a little bit of a, it caught me
00:30:30.800 --> 00:30:32.030
while I was trying to type.
00:30:32.030 --> 00:30:33.260
So notice what's happened here.
00:30:33.870 --> 00:30:36.740
So we've got this little frame down here
at the bottom, and it says Argos here.
00:30:36.740 --> 00:30:39.780
The problem is that it is only sitting
in that first column.
00:30:39.780 --> 00:30:41.790
And in fact, we have the same problem with this.
00:30:41.790 --> 00:30:44.680
- Right.
- Because now we have used two columns,
00:30:44.680 --> 00:30:49.180
the system create two columns for us, even though
we didn't deliberately say that, it does it anyway,
00:30:49.180 --> 00:30:51.950
and now I am going to have to go back
to those other two elements and say, you know what?
00:30:51.950 --> 00:30:55.360
I want it to actually stretch
across those two columns.
00:30:55.360 --> 00:30:58.150
So the way we do that is again, we are just
going to apply another property value here,
00:30:58.150 --> 00:31:01.240
and we will say grid,
column span is going to be 2.
00:31:02.570 --> 00:31:03.690
And I'm going to copy that.
00:31:03.690 --> 00:31:07.510
- And you can see it is updated already.
- It is updating already, which is, that's pretty cool.
00:31:07.510 --> 00:31:09.580
That's why we call it Live Player.
00:31:09.580 --> 00:31:11.080
And so now I can see my frame is there.
00:31:11.080 --> 00:31:13.530
But these two are kind of oddly spaced here.
00:31:13.530 --> 00:31:16.660
The first thing I'm going to do is
I really want this to be at the bottom,
00:31:16.660 --> 00:31:18.920
and so I am going to say
my vertical options are going to be end.
00:31:21.340 --> 00:31:22.820
It catches me too quick there.
00:31:22.820 --> 00:31:24.610
All right, my vertical options
are going to be at the end.
00:31:26.110 --> 00:31:29.360
And then the other thing that we're going to do,
and so now notice it went down to the bottom here,
00:31:30.190 --> 00:31:33.380
the other thing that I want to do here is go
and put an activity indicator in this.
00:31:34.530 --> 00:31:40.630
So remember we had an activity indicator, and
our activity indicator, you know what I'm going to do?
00:31:40.630 --> 00:31:43.740
Just to kind of keep this from happening,
because it is a little bit annoying,
00:31:43.740 --> 00:31:47.300
I am just going to lock that in place
and kind of move that down,
00:31:47.300 --> 00:31:52.520
so that way it can throw things
in there and I don't care.
00:31:53.630 --> 00:31:56.130
And we'll put it in the same row,
so I am going to say grid row 2,
00:31:57.230 --> 00:31:58.470
and I'm going to say is running.
00:32:01.930 --> 00:32:04.790
Is running equal true, I don't know why I don't have
my IntelliSense there, that's all right.
00:32:05.630 --> 00:32:13.690
And then what we will do is we will say
width request is 48, and height request is 48.
00:32:13.690 --> 00:32:17.300
- A reasonable size for our& - Yeah,
and then let's go ahead and say vertical options
00:32:18.320 --> 00:32:20.730
is going to be center
and horizontal options
00:32:22.020 --> 00:32:25.210
is going to be center,
and let's just see what that looks like.
00:32:25.210 --> 00:32:28.370
So let's try forcing that to live run,
see what it says.
00:32:29.260 --> 00:32:30.930
- Activity, oh that's why.
00:32:30.930 --> 00:32:31.630
That's why I didn't have any.
00:32:31.630 --> 00:32:32.880
You should have pointed that out to me.
00:32:32.880 --> 00:32:34.350
- Oh, your indicator, yes.
- Indicator.
00:32:34.350 --> 00:32:35.900
Got to have an indicator there.
00:32:35.900 --> 00:32:37.830
- Excellent.
- So that is what it did though.
00:32:37.830 --> 00:32:42.930
It gave me a nice little builder here,
saying it can't find whatever that property is.
00:32:42.930 --> 00:32:46.200
And in fact, if we look at the errors,
it does sort of tell you
00:32:46.200 --> 00:32:48.230
no bindable property
verification options
00:32:48.230 --> 00:32:50.090
because I am a horrible typer.
00:32:50.090 --> 00:32:52.810
- You had a typo.
- And so we need to just change that,
00:32:52.810 --> 00:32:55.510
and so now I get my IntelliSense back,
which is kind of nice.
00:32:55.510 --> 00:32:56.340
- Fantastic.
- All right.
00:32:56.340 --> 00:32:59.800
- And so what it should do now
is let me just hit the live run.
00:32:59.800 --> 00:33:03.060
And we should then get
a little activity indicator.
00:33:03.060 --> 00:33:05.190
And so there it is, a little blue
spinning activity indicator,
00:33:05.190 --> 00:33:08.700
but I want it to also be
spanning both of those columns.
00:33:08.700 --> 00:33:12.600
- Get that centered.
- So grid, column span
00:33:12.600 --> 00:33:14.470
is going to be 2 so
it will be centered.
00:33:15.210 --> 00:33:18.170
And the other thing that I might want to do
is just change the color of it,
00:33:19.220 --> 00:33:21.530
just so that it fits on that background.
00:33:21.530 --> 00:33:24.200
So we will make it white, and now you can see
I have got my nice little activity indicator.
00:33:24.200 --> 00:33:25.640
- Really nice, really nice.
- But you can see we
00:33:25.640 --> 00:33:27.760
just sort of constructed
this by hand, typing things in.
00:33:28.640 --> 00:33:31.190
Let's do one more thing here, because
I think that would be kind of cool,
00:33:31.820 --> 00:33:36.570
and then I will show you the app
with multiple pages in it.
00:33:36.570 --> 00:33:41.130
So I am going to go here and I've got some assets,
and just minimize this for just a second.
00:33:41.730 --> 00:33:44.090
And specifically I have got
some drawable assets here.
00:33:44.090 --> 00:33:48.040
I am just going to grab these assets
and throw them into my Android app.
00:33:49.190 --> 00:33:52.900
Now assets in Android all go
into a resources folder here,
00:33:53.680 --> 00:33:56.410
and here are my resources
and here are the drawable.
00:33:56.410 --> 00:34:00.320
Now normally what you would do is you
would actually have multiple sized assets.
00:34:00.320 --> 00:34:05.280
We don't have time, really, for that and plus
we're cheap so, this is Frugal Garden.
00:34:05.280 --> 00:34:06.790
- The low cost, yeah.
- Yeah, that's right.
00:34:06.790 --> 00:34:08.690
And so I am going to put them
in here, but notice
00:34:08.690 --> 00:34:11.280
that we get an Android resource
and an Android resource,
00:34:11.870 --> 00:34:15.490
so I have two pngs that are
a camera and a tulip,
00:34:15.490 --> 00:34:21.340
and then I have a background jpeg that we're actually
going to put as the background of the app itself.
00:34:21.340 --> 00:34:24.420
- And really, that build, actually is
set appropriately when the files are added.
00:34:24.420 --> 00:34:26.310
- Yes, it has set the build action automatically
00:34:26.310 --> 00:34:28.550
when I just drag them in,
which is pretty cool.
00:34:28.550 --> 00:34:31.850
And so I am go ahead and say
the source is background.png.
00:34:33.870 --> 00:34:37.820
So source equal background.png,
actually, I think it is jpeg.
00:34:38.720 --> 00:34:44.690
And then we will say aspect is going
to be aspect fill, because I want it to fill the area.
00:34:44.690 --> 00:34:47.360
- But maintain its shape.
- But maintain its shape, yeah.
00:34:47.360 --> 00:34:52.510
And then we will say grid, row span is going to be 3,
because I want it to be across all the rows.
00:34:52.510 --> 00:34:56.000
- Perfect.
- And grid column span is 2,
00:34:56.000 --> 00:34:58.890
because I want it to
sit across both columns.
00:34:59.470 --> 00:35:02.810
All right, so let's just see if we can
capture that, and what we should see is, boom.
00:35:02.810 --> 00:35:03.690
We get a nice little image.
00:35:03.690 --> 00:35:05.440
- Just like that.
- Super cool.
00:35:05.440 --> 00:35:07.910
- Super quick.
- Yeah, and the other thing we probably want to do here
00:35:07.910 --> 00:35:11.610
is let's just put a different
background color on our buttons,
00:35:11.610 --> 00:35:16.030
so maybe what we will
do here is like 503456,
00:35:17.760 --> 00:35:19.240
and there you go.
00:35:19.240 --> 00:35:21.970
So it's partially transparent.
- Right, so that's the alpha.
00:35:21.970 --> 00:35:22.920
- That's our alpha.
- RGB.
00:35:22.920 --> 00:35:24.180
- And then RGB.
00:35:24.180 --> 00:35:25.970
And again, we can pick
some other colors here,
00:35:25.970 --> 00:35:28.630
you know, our designer probably
should give us some better colors.
00:35:29.360 --> 00:35:35.030
But now we can kind of see the image
behind the buttons, which is pretty darn cool.
00:35:35.030 --> 00:35:36.560
- That's great.
- Yeah, and then the other thing
00:35:36.560 --> 00:35:39.870
we will probably want to do is just say
vertical options is going to be center.
00:35:41.310 --> 00:35:43.030
Now notice that one of the things
that is happening here
00:35:43.030 --> 00:35:47.870
is I am ending up putting a lot
of kind of XAML into these buttons,
00:35:47.870 --> 00:35:50.630
and a lot of it is very, very similar, right.
00:35:50.630 --> 00:35:53.300
So I'm kind of copying these tags.
00:35:53.300 --> 00:35:56.120
What we will want to do with that is
we will want to move that into a style,
00:35:56.120 --> 00:36:00.410
and so when I pull up the final,
at least the completed project for this session,
00:36:00.410 --> 00:36:02.470
you'll be able to see that we've
actually moved that into a style,
00:36:02.470 --> 00:36:05.880
so that the buttons only specify
the things that are unique to that button,
00:36:05.880 --> 00:36:07.780
and then we move everything
else off into a style.
00:36:07.780 --> 00:36:10.360
- Which of course is great
for maintenance and updates as well.
00:36:10.360 --> 00:36:11.360
- Yeah, that's exactly right,
00:36:11.360 --> 00:36:13.570
because then I can change
the property value in one place
00:36:13.570 --> 00:36:16.510
and it affects everybody that uses it.
00:36:16.510 --> 00:36:18.560
So the other thing I want to put in here,
and unfortunately Live Player
00:36:18.560 --> 00:36:20.160
is not going to support this,
00:36:20.160 --> 00:36:24.350
is I am going to say
camera.png is the icon for this,
00:36:24.350 --> 00:36:27.770
and actually I think not icon, it's image.
00:36:27.770 --> 00:36:33.710
So we will say camera.png and so
it is not going to actually display this
00:36:33.710 --> 00:36:36.020
because Live Player is ignoring
this particular field.
00:36:36.630 --> 00:36:38.890
And then the other one we have is tulip.png.
00:36:38.890 --> 00:36:41.640
- And again, it is in preview,
so we will get these features added.
00:36:41.640 --> 00:36:43.130
- Yeah, that's exactly right.
00:36:43.130 --> 00:36:46.370
And so normally what we would see is
a little icon that would be sitting there.
00:36:46.370 --> 00:36:47.080
- Which is pretty exciting.
00:36:47.080 --> 00:36:48.880
This is actually a new feature of Xamarin
Forms as well.
00:36:48.880 --> 00:36:49.590
- It is.
00:36:49.590 --> 00:36:52.560
Yeah, a lot of people always ask,
well how do I get an image into that button?
00:36:52.560 --> 00:36:55.120
Well now we give you an image property
that you can actually set on the button
00:36:55.120 --> 00:36:58.960
and you do have to have the image
in your platform-specific project,
00:36:58.960 --> 00:37:01.370
so in this case I have got it
in my Android app.
00:37:02.430 --> 00:37:06.690
But it will drag it in and it will actually place
it just to the left over here on the button itself,
00:37:06.690 --> 00:37:08.510
and it will a space
that is put there for it.
00:37:08.510 --> 00:37:10.440
- Fantastic.
I am just going to jump to a couple of quick questions,
00:37:11.190 --> 00:37:13.410
there are a couple of others that we will
get to at the end of the session,
00:37:13.410 --> 00:37:16.040
but someone asked, is there an example
of Frugal Garden available?
00:37:16.040 --> 00:37:18.400
Yes, we have it on GitHub and we will share
the link at the end of our session.
00:37:18.400 --> 00:37:20.000
- Yeah, that's exactly right.
I am going to go ahead
00:37:20.000 --> 00:37:24.830
and open up the next iteration
of this app, just so we can see it.
00:37:24.830 --> 00:37:28.710
But I wanted people to be able to see kind of
building up that screen with Live Player,
00:37:28.710 --> 00:37:30.960
because it is fantastic
as a design resource.
00:37:30.960 --> 00:37:35.000
I can display it and it runs right on my app,
and you can also run it on an emulator,
00:37:35.000 --> 00:37:37.700
so you can actually go
and download the APK,
00:37:37.700 --> 00:37:39.780
to go look in the docs for Live Player.
00:37:39.780 --> 00:37:43.060
They give you a link for the Hockeyapp
distribution, which has an APK.
00:37:43.060 --> 00:37:46.000
You can download that APK and then
drag it onto the emulator.
00:37:46.000 --> 00:37:50.340
And so if you don't have a physical device,
I actually prefer to use physical devices,
00:37:50.340 --> 00:37:52.580
I find them to be just
a little bit easier to work with.
00:37:52.580 --> 00:37:55.810
But if you don't have one or if you just want
to try it on a variety of other things,
00:37:55.810 --> 00:37:58.310
you can actually run it within
the Android emulator as well.
00:37:58.310 --> 00:38:01.280
- Which is really exciting, and we had
a question earlier, are we going to demo that?
00:38:01.280 --> 00:38:03.800
We won't demo that today, but yes,
it is absolutely possible
00:38:03.800 --> 00:38:05.360
and there is great documentation available.
00:38:05.360 --> 00:38:09.460
- Yeah, so I have actually gone ahead
and opened up the next iteration of this,
00:38:09.460 --> 00:38:13.360
and so you can see here that
I've actually got a couple more pages,
00:38:13.360 --> 00:38:16.120
and my main page is going to look
pretty similar to what we just built.
00:38:16.720 --> 00:38:20.650
We've got our background, we've got our frame
with the label, we've got our buttons.
00:38:20.650 --> 00:38:24.450
Notice that the buttons themselves
only have stuff in them that is unique to the button,
00:38:24.450 --> 00:38:27.370
so the text, the image,
grid column, grid row.
00:38:27.370 --> 00:38:31.050
We are doing commanding to be able to get it
into a view model that I will show you in a second,
00:38:31.050 --> 00:38:32.770
and then there's
an automation ID
00:38:32.770 --> 00:38:36.110
so that I can identify that button
when I write UI tests for this.
00:38:36.110 --> 00:38:37.610
- Ah, excellent.
- And then of course
00:38:37.610 --> 00:38:39.670
we have got
our activity indicator.
00:38:39.670 --> 00:38:44.620
Notice that we've changed our activity indicator
to actually use an is running flag with an is busy,
00:38:44.620 --> 00:38:46.580
and an is visible
with the is busy,
00:38:46.580 --> 00:38:49.010
so that we have a property
in our view model
00:38:49.010 --> 00:38:53.000
and we can just change that
properties value from false to true,
00:38:53.000 --> 00:38:55.400
and the activity indicator
just shows up on the screen.
00:38:55.400 --> 00:38:59.840
When we're done, we can reset that is busy back
to false, and the activity indicator goes away.
00:39:00.370 --> 00:39:03.630
So this is kind of the idea
behind the design pattern model view,
00:39:03.630 --> 00:39:06.980
view model, where my view model
is driving the logic
00:39:06.980 --> 00:39:09.190
and all it's doing
is changing properties.
00:39:09.190 --> 00:39:14.290
And the binding engine is setting properties
on the visual elements to be able to make them show up,
00:39:14.290 --> 00:39:17.430
make them go away, change their values,
colors, that sort of thing.
00:39:17.430 --> 00:39:20.290
- You are not naming any of your
visual elements here, for example.
00:39:20.290 --> 00:39:23.480
We don't have to actual ask them.
- No, no, that's exactly right, yeah.
00:39:23.480 --> 00:39:26.590
None of these have names so there
are no fields that are created from these,
00:39:26.590 --> 00:39:28.700
it's strictly driven
by the view model.
00:39:28.700 --> 00:39:32.170
Which is really helpful, because it means
that I can write unit tests against a view model
00:39:32.170 --> 00:39:34.290
to test the majority
of my application.
00:39:34.290 --> 00:39:38.380
But I can't necessarily test
the UI presence, we use UI tests for that.
00:39:38.380 --> 00:39:41.280
- Absolutely.
- But what I can do is I can test the logic
00:39:41.280 --> 00:39:43.770
that is being driven by the application
through those properties.
00:39:44.400 --> 00:39:46.820
So the other thing that I want to
show you here that is kind of cool,
00:39:46.820 --> 00:39:49.880
or at least I think is cool,
is we have got our label here.
00:39:49.880 --> 00:39:52.070
So this is where we are going
to display our error, right.
00:39:52.070 --> 00:39:53.970
Our frame at the very bottom.
00:39:53.970 --> 00:39:56.030
And now we are going to set
the text to a binding of error.
00:39:56.030 --> 00:39:58.750
So we have got a property in our view model
that I will show you here in a second.
00:39:58.750 --> 00:40:00.980
- Excellent.
- It's just an error property that has a string,
00:40:01.530 --> 00:40:06.550
and we're going to go ahead and have a second property
called has error that's a Boolean,
00:40:06.550 --> 00:40:09.370
and so if there's a value
set on the error,
00:40:09.370 --> 00:40:12.490
will trigger that Boolean,
has error, to be true,
00:40:12.490 --> 00:40:16.070
and we're setting that to be
the is visible state for the frame.
00:40:16.070 --> 00:40:19.750
So the frame will actually show up
when there's an error,
00:40:19.750 --> 00:40:21.990
and then it will disappear
when there's not an error.
00:40:21.990 --> 00:40:26.590
And so again, this is just a way of reporting
feedback to the user that's using our app,
00:40:27.200 --> 00:40:29.130
but it's driven through
the view model, which is great.
00:40:29.130 --> 00:40:29.550
- Really nice.
00:40:29.550 --> 00:40:34.280
Letting the view model kind of give
some guidance to the view without taking over,
00:40:34.940 --> 00:40:37.830
without actually manually
adjusting properties on the views.
00:40:37.830 --> 00:40:39.310
- Yeah, that's exactly right.
00:40:39.310 --> 00:40:43.100
Now so I created this little view model's .NET
00:40:43.100 --> 00:40:46.720
Standard library here,
and it has got a view models folder,
00:40:46.720 --> 00:40:50.120
and again, all of this code is in GitHub,
so you guys can access all this.
00:40:50.120 --> 00:40:52.460
We have got it in the slides towards
the end, you'll be able to see it.
00:40:53.820 --> 00:40:58.700
And so this has actually been connected up
with commanding and all that kind of stuff,
00:40:58.700 --> 00:41:00.550
and so I just want to show you
a couple of things.
00:41:00.550 --> 00:41:04.570
First of all the is busy, so this is
the is busy property that we just saw
00:41:04.570 --> 00:41:06.560
that was bound
to that frame at the bottom.
00:41:06.560 --> 00:41:11.570
And so notice it's just a Boolean field here,
but one of the things that we're going to drive on this
00:41:11.570 --> 00:41:14.450
is we're going to drive the commands,
and so remember we have two buttons.
00:41:14.450 --> 00:41:19.160
We have one that takes a photo and one that is going to
pull something from our photo library.
00:41:19.160 --> 00:41:23.840
We've chosen to use a plug-in for this so there's some
common code that we use called cross media,
00:41:23.840 --> 00:41:25.840
that you can actually
install into your app
00:41:25.840 --> 00:41:28.780
and it basically will handle
the abstractions between iOS,
00:41:28.780 --> 00:41:30.160
Android and UWP for you.
00:41:30.160 --> 00:41:31.590
- This actually ties nicely
to a question we had.
00:41:31.590 --> 00:41:34.390
William asked, how do we handle
platform-specific issues,
00:41:34.390 --> 00:41:36.420
such as working in Bluetooth
or maybe like the camera?
00:41:36.420 --> 00:41:39.150
- Yeah, that's exactly right.
So William, there are a couple of ways you can do it.
00:41:39.150 --> 00:41:43.210
One thing that you can go look at is there is
a GitHub repo out there with a bunch of plugins,
00:41:43.210 --> 00:41:44.950
and so we have already
got plugins that are built
00:41:44.950 --> 00:41:47.140
for a lot of specific scenarios
00:41:47.140 --> 00:41:51.790
like dealing with the camera or dealing
with say for instance, authentication.
00:41:51.790 --> 00:41:53.800
- GPS.
- Or GPS, location maps.
00:41:53.800 --> 00:41:55.520
- Navigability.
- Yeah, those kinds of things.
00:41:55.520 --> 00:41:57.890
So we have these cross-platform
plugins that you can actually use,
00:41:57.890 --> 00:41:59.470
and they are all available on NuGet.
00:41:59.470 --> 00:42:03.170
And most of them are open source, so you can even go
look at the source code that is behind them.
00:42:03.170 --> 00:42:06.960
The second thing you can do is if you
don't have an abstraction available to you,
00:42:06.960 --> 00:42:09.240
you can build one and the way
it typically works
00:42:09.240 --> 00:42:13.180
is you create an interface that is going
to sort of represent it generically
00:42:13.180 --> 00:42:15.560
and then you have an implementation
of that interface
00:42:15.560 --> 00:42:17.550
in each one of the platform-specific projects.
00:42:17.550 --> 00:42:18.970
- Because we have platforms
that are projects,
00:42:18.970 --> 00:42:21.780
and we are ultimately compiling
platform-specific binaries.
00:42:21.780 --> 00:42:22.140
- That's right.
00:42:22.140 --> 00:42:26.140
And those platforms actually have APIs
to deal with the camera and deal with GPS
00:42:26.140 --> 00:42:30.080
and deal with the gyroscope of the phone.
00:42:30.080 --> 00:42:33.720
So you can go read those values
in a platform-specific way,
00:42:33.720 --> 00:42:37.490
and you will have an implementation that somehow
reports that back through the abstraction.
00:42:37.490 --> 00:42:41.230
Your view models use the abstraction,
so they depend completely on the interface,
00:42:41.230 --> 00:42:43.920
but the implementation behind it
is done in a platform-specific way.
00:42:43.920 --> 00:42:47.040
- And we'll mention quickly,
we do have courses and XamU,
00:42:47.040 --> 00:42:49.560
and we actually have
a free course, Xamarin 110,
00:42:49.560 --> 00:42:52.050
which shows the basics of doing&
00:42:52.050 --> 00:42:54.830
- Of how to do this.
- The abstractions in JSON, so yeah, absolutely.
00:42:54.830 --> 00:42:57.250
Check out XamU as well
for some free training on this.
00:42:57.250 --> 00:43:01.050
- Yeah, so just to give you an example, William,
this is how we are doing it for the photos.
00:43:01.050 --> 00:43:03.280
We actually have a NuGet package
that is added to this.
00:43:03.920 --> 00:43:08.720
And it is got a couple of methods on it,
so let me just scroll down here.
00:43:09.280 --> 00:43:10.630
So here's how we're going to pick a photo.
00:43:11.610 --> 00:43:13.310
We first make sure it's initialized,
00:43:13.310 --> 00:43:16.070
so we're going to call this
cross media current initialize,
00:43:16.070 --> 00:43:18.640
so notice cross media current
just comes back with an imedia,
00:43:18.640 --> 00:43:20.120
that's our abstraction, imedia.
00:43:21.280 --> 00:43:23.600
There is a different
implementation for Android,
00:43:23.600 --> 00:43:26.530
there's an implementation for iOS
and there is an implementation for UWP.
00:43:27.390 --> 00:43:29.740
And then we are going to say OK,
can we pick a photo?
00:43:29.740 --> 00:43:31.530
So is that supported on this platform?
00:43:31.530 --> 00:43:34.690
Because we might be running on a device
that doesn't support a gallery of photos.
00:43:35.470 --> 00:43:39.530
If we do support that, then we are going to call
this pick photo async, and again,
00:43:39.530 --> 00:43:43.590
that's going to be implemented
by the platform-specific feature that's going to go in
00:43:43.590 --> 00:43:45.280
and pull up the gallery
and do something with it.
00:43:45.280 --> 00:43:46.660
But all defined in your abstraction.
00:43:46.660 --> 00:43:48.030
- Yeah, but all defined in the abstraction.
00:43:48.030 --> 00:43:52.990
And then we will, ultimately what we are going to
get back is this abstraction again called a media file,
00:43:52.990 --> 00:43:56.220
and the media file has in it a path, the alpha path
00:43:56.220 --> 00:43:58.330
and then it allows you
to get the stream to the path,
00:43:58.330 --> 00:44:01.340
so you can actually retrieve
whatever that image happens to be.
00:44:01.870 --> 00:44:05.000
And so we have got methods here,
to pick a photo or to take a photo,
00:44:05.000 --> 00:44:06.670
so you can see here
is how we are going to take a photo.
00:44:07.200 --> 00:44:10.280
And then what we are going to do
is process that photo.
00:44:10.280 --> 00:44:15.680
And so in this particular case, you can see here that
we are going to again use kind of an abstraction here.
00:44:15.680 --> 00:44:18.140
We've got an abstraction called idependency service.
00:44:18.140 --> 00:44:23.060
So we are using a very common pattern here,
an inversion of control where I can go and retrieve,
00:44:23.060 --> 00:44:26.460
it's called a service locator,
it can go and retrieve a dependency for me.
00:44:26.460 --> 00:44:32.860
We could also inject those, so I could, for instance,
take the required things that I need inside this code
00:44:32.860 --> 00:44:35.670
as part of my construction of the object
and we can construct it that way.
00:44:36.470 --> 00:44:38.720
In this case, I'm just going
to use the service locator.
00:44:38.720 --> 00:44:41.680
Now we've got another package
that's been installed here.
00:44:41.680 --> 00:44:47.130
Often when you use MVVM you have
some base view model requirements,
00:44:47.130 --> 00:44:50.810
so things to raise, property
change notifications, stuff like that.
00:44:50.810 --> 00:44:54.700
We have a lot of great Xamarin University
that we walk you through in one of our classes
00:44:54.700 --> 00:44:57.200
when we talk about MVVM
and you kind of build some of that stuff.
00:44:57.780 --> 00:45:01.990
It's exposed as a NuGet package and I have just added
it here because we often just tend to use that.
00:45:01.990 --> 00:45:04.460
And one of the things it has in it
is just an abstraction
00:45:04.460 --> 00:45:07.050
around a built-in dependency service
that's in the forms.
00:45:07.050 --> 00:45:11.050
- Right, it was actually built into Xamarin Forms,
so we have that in there already, that tool.
00:45:11.050 --> 00:45:13.580
- Yeah, and so we could actually take
a dependency on it directly.
00:45:13.580 --> 00:45:15.540
I can say dependencyservice.get.
00:45:15.540 --> 00:45:19.790
The problem is, is then my view model
is now dependent on Xamarin Forms.
00:45:19.790 --> 00:45:22.790
And one of the things I'd like to do
is kind of keep it loosely coupled,
00:45:22.790 --> 00:45:25.520
so it's not really aware
of the UI platform.
00:45:25.520 --> 00:45:29.300
- We've got C# code, we could potentially go
outside of the platform supported by Xamarin?
00:45:29.300 --> 00:45:33.200
- Sure, I could use this code with an iOS app,
for example, or directly with a native UI.
00:45:33.200 --> 00:45:34.900
- Or a Xamarin Forms app.
- Yeah, you know,
00:45:34.900 --> 00:45:37.420
one of the things that people will often ask is,
00:45:38.090 --> 00:45:40.130
what if I've built my app
with Xamarin Forms,
00:45:40.130 --> 00:45:42.370
and then I decide later on that
I want to do a native UI.
00:45:42.990 --> 00:45:43.880
Totally possible.
00:45:43.880 --> 00:45:46.780
And one of the ways you would do that
is you would make sure to abstract out
00:45:46.780 --> 00:45:51.190
or rather separate out all of your
business logic in two different classes
00:45:51.190 --> 00:45:54.030
so they're not combined
directly into our XAML.
00:45:54.030 --> 00:45:59.510
So notice our XAML files, that shared project
and even the Android, iOS and UWP project,
00:45:59.510 --> 00:46:01.550
they don't use these classes directly.
00:46:01.550 --> 00:46:04.510
It's all done through binding which means
I can just drive this view model
00:46:04.510 --> 00:46:05.910
to actually drive that business logic.
00:46:05.910 --> 00:46:07.450
- It's fantastic.
- Yeah, it's totally cool.
00:46:07.450 --> 00:46:09.340
- This is a really nice bit of example code, so yeah.
00:46:09.340 --> 00:46:12.500
- Yeah, so you can kind of walk
through this, but this is the view model.
00:46:12.500 --> 00:46:16.170
It's deriving from a class called error view model
that I just want to point out real quick,
00:46:16.170 --> 00:46:18.520
and this is our class,
the simple view model.
00:46:18.520 --> 00:46:23.130
But notice what we've done here,
we've got this error text field that is just a string,
00:46:23.710 --> 00:46:26.860
and whenever we set an error,
this is kind of cool, Adrian.
00:46:27.500 --> 00:46:30.370
Whenever we set an error, we are going
to go ahead and set the value,
00:46:30.370 --> 00:46:35.250
and if we did change the value,
this little method is just kind of a done method,
00:46:35.250 --> 00:46:37.140
it just changes the field value
00:46:37.140 --> 00:46:39.530
and ensures that it returns true or false
00:46:39.530 --> 00:46:40.870
if the value really did change.
00:46:41.370 --> 00:46:45.640
We raise a property change on has error,
so we're going to tell the system, the binding engine,
00:46:45.640 --> 00:46:47.170
hey this property changed too.
00:46:48.280 --> 00:46:53.400
And this one already has its property
change notification done as part of this method here.
00:46:53.400 --> 00:46:55.850
But then what we are going to do is
we are going to actually wait 8 seconds,
00:46:56.980 --> 00:46:59.210
and then after 8 seconds
we are going to clear the error.
00:46:59.210 --> 00:47:01.000
So here is what happens in the app.
00:47:01.000 --> 00:47:05.270
The error shows up, the frame is displayed,
we see the error text.
00:47:05.270 --> 00:47:08.520
It shows up for 8 seconds,
and then it disappears off the screen.
00:47:08.520 --> 00:47:11.000
And so we don't have to clear the error,
we are actually doing it
00:47:11.000 --> 00:47:12.770
as part of the view model infrastructure.
00:47:12.770 --> 00:47:15.250
- Fantastic.
- The whole thing is, this is all testable.
00:47:15.250 --> 00:47:20.170
We can do all of this directly with
unit tests or anything like that.
00:47:20.170 --> 00:47:21.470
- Pretty fantastic.
- Yeah, it is.
00:47:21.470 --> 00:47:23.930
And so let me just run it actually
on my local machine here.
00:47:23.930 --> 00:47:28.420
- And while he's bringing it up, I just want to mention
that we are going to keep working on this application
00:47:28.420 --> 00:47:29.780
in the next couple of sessions,
00:47:29.780 --> 00:47:31.470
so this is not the end
of Garden Helper.
00:47:31.470 --> 00:47:33.450
- That's right.
You will see more of it as we go.
00:47:34.170 --> 00:47:36.070
We'll explain more of it as we go as well.
00:47:36.070 --> 00:47:39.450
And so this particular version,
one of the things that we have done here
00:47:39.450 --> 00:47:43.820
is we have added those assets
into the iOS and the UWP app as well,
00:47:43.820 --> 00:47:47.450
and so now I can run it not
just on my Android device,
00:47:47.450 --> 00:47:50.730
but you can see here that
I can actually run it in UWP.
00:47:50.730 --> 00:47:51.590
- Pretty fantastic.
- Right?
00:47:51.590 --> 00:47:54.820
And so you see exactly the same interface.
00:47:54.820 --> 00:47:56.740
Right, so although we get our icons there,
00:47:56.740 --> 00:48:00.770
but you see the same picture,
we see the same sort of UI that's here.
00:48:00.770 --> 00:48:02.850
- Pretty fantastic.
And I can pick a photo,
00:48:03.950 --> 00:48:05.780
and I can say let me
just go grab this one.
00:48:06.460 --> 00:48:09.890
And it thinks it is a rose, because
we haven't implemented any of that yet,
00:48:09.890 --> 00:48:11.330
but you see here is my second screen.
00:48:11.330 --> 00:48:12.190
I think it is a rose.
00:48:12.190 --> 00:48:16.430
Current price is $48, it's got some description text
and I can even get some more information.
00:48:16.430 --> 00:48:19.080
And it no license associated with it.
00:48:19.080 --> 00:48:25.860
So we have got some logic that's been added into this,
to be able to sort of figure out what is this photo?
00:48:25.860 --> 00:48:27.380
But we haven't implemented any of that.
00:48:27.380 --> 00:48:28.980
That's later today, Adrian.
00:48:28.980 --> 00:48:31.120
- Excellent.
- And so that's what we're doing here
00:48:31.120 --> 00:48:32.500
in this photo stream,
00:48:32.500 --> 00:48:36.310
we are identifying the picture
and then we're getting the plant details.
00:48:36.310 --> 00:48:40.020
Those are just interfaces,
and what we have inside this project
00:48:40.020 --> 00:48:44.090
at least to implement those
is a set of mocked classes.
00:48:44.090 --> 00:48:46.230
And so the reason why
it thinks it's a rose is
00:48:46.230 --> 00:48:51.100
because our implementation of that,
identify picture says, it's a rose.
00:48:51.100 --> 00:48:54.240
And so, I can take a picture of Adrian,
and he would be a rose.
00:48:55.460 --> 00:48:59.430
And so that's& - Wouldn't that be the case?
- Yeah, that would always be the case,
00:48:59.430 --> 00:49:00.860
that would always be the case, that's right.
00:49:00.860 --> 00:49:01.990
You are a rose.
00:49:01.990 --> 00:49:03.890
- So we did have a couple of questions that went by.
00:49:03.890 --> 00:49:07.480
One question was about using
Blend as a design tool with Xamarin Forms.
00:49:07.480 --> 00:49:09.470
- Yeah, so that's not possible today.
00:49:09.470 --> 00:49:16.580
So Blend is restricted to UWP
and WPF variations of XAML,
00:49:17.750 --> 00:49:21.160
but one of the things that actually
is happening that is very exciting&
00:49:21.160 --> 00:49:24.420
- Which includes the next question.
- Yes, is one of the things
00:49:24.420 --> 00:49:28.400
that was announced even just
this week is Xamarin Forms
00:49:28.400 --> 00:49:31.000
now supports XAML Standard.
00:49:31.000 --> 00:49:38.420
So XAML Standard is an attempt or rather
I should say it is an endeavor to kind of,
00:49:38.940 --> 00:49:41.750
of unifying the dialect that we see of
00:49:41.750 --> 00:49:43.740
XAML between these different platforms.
- Right.
00:49:43.740 --> 00:49:46.010
So you talked about being the same XAML
but the types were different.
00:49:46.010 --> 00:49:46.430
- That's right.
00:49:46.430 --> 00:49:53.190
So when I create, for example, a field
that I can type text into in Xamarin Forms,
00:49:53.190 --> 00:49:55.870
that is going to be an entry in UWP.
00:49:55.870 --> 00:49:57.250
That's a text box.
00:49:57.250 --> 00:49:59.880
And so it is two different controls
with different properties
00:49:59.880 --> 00:50:01.330
and so I have to kind of manage that.
00:50:02.100 --> 00:50:04.380
With XAML Standard, they are going
to kind of unify some of that,
00:50:04.380 --> 00:50:06.900
so they're going to take
the most common UI things
00:50:06.900 --> 00:50:09.610
and they are going to make sure that every
single one of the platform supports it.
00:50:09.610 --> 00:50:11.750
Now the cool thing is, they are not
going to break your existing
00:50:11.750 --> 00:50:14.720
XAML, so you'll still be able
to use an entry if you choose,
00:50:14.720 --> 00:50:18.850
it's just they will have a façade
over it that says, OK, if you type text box
00:50:18.850 --> 00:50:20.560
then we know that's really an entry on Xamarin
00:50:20.560 --> 00:50:24.710
Forms, that's really a text box over here on UWP
and they will kind of manage that.
00:50:24.710 --> 00:50:29.700
And what that kind of opens up for the future
is potentially to be able to have a design tool like
00:50:29.700 --> 00:50:31.860
Blend, because you know,
I am a big fan of Blend.
00:50:31.860 --> 00:50:32.560
- Yes, yes I do.
00:50:32.560 --> 00:50:35.460
And we will talk about that later on.
- Yes, so Blend is awesome.
00:50:35.460 --> 00:50:40.110
If you don't use Blend for your UWP apps,
you should, as I have been sort of telling him.
00:50:40.110 --> 00:50:43.190
So hopefully what we will see
in the future is more of an endeavor
00:50:43.190 --> 00:50:45.950
to have a real design experience for Xamarin Forms,
because that is really the goal.
00:50:45.950 --> 00:50:49.430
- Really exciting.
- XAML standard is in preview today.
00:50:49.430 --> 00:50:52.070
We are not going to show it because it
is a preview, it is very, very new.
00:50:52.070 --> 00:50:53.470
It's just two days old.
00:50:53.470 --> 00:50:56.810
But if you want to try it out, go grab the preview,
install it and give it a shot.
00:50:57.520 --> 00:50:59.070
- Exciting.
- Yeah, very, very exciting.
00:50:59.980 --> 00:51:03.470
All right, so we've got some resources
to kind of cover at the very end here.
00:51:03.470 --> 00:51:07.380
As Adrian mentioned, we have got the source
code available to you so you can go to this AK
00:51:07.380 --> 00:51:09.560
MS link, and go grab the source code.
00:51:09.560 --> 00:51:14.740
I will do a final push to that repo today,
so you might want to wait just a couple of hours
00:51:14.740 --> 00:51:15.950
until all of our sessions are done
00:51:15.950 --> 00:51:18.510
and then you will be able to grab
the fully final version.
00:51:18.510 --> 00:51:20.320
You can also download Visual Studio,
so if you don't have
00:51:20.320 --> 00:51:22.750
Visual Studio today,
you can go grab it.
00:51:22.750 --> 00:51:26.120
Be aware that Xamarin works
with every edition of Visual Studio.
00:51:26.120 --> 00:51:29.010
So you can go grab the free community edition
00:51:29.010 --> 00:51:31.350
and be able to build mobile apps
just like what we showed you here
00:51:31.990 --> 00:51:33.600
- Pretty fantastic.
- Very, very fantastic.
00:51:33.600 --> 00:51:37.530
We've got some getting started tutorials
that are in our documentation.
00:51:37.530 --> 00:51:39.730
Our documentation team is fabulous.
00:51:39.730 --> 00:51:43.900
- Fabulous group, fabulous documentation.
- Yeah, they have got all their documentation
00:51:43.900 --> 00:51:46.710
is completely up to date,
and they are a hard-working team
00:51:46.710 --> 00:51:48.360
that really made sure
to document things well.
00:51:48.360 --> 00:51:50.080
And then of course,
we have Xamarin University.
00:51:50.720 --> 00:51:53.350
- So you can go to Xamarin University,
there is a bunch of free content
00:51:53.350 --> 00:51:56.420
and then if you choose,
you can get into the subscriber tier
00:51:56.420 --> 00:51:59.670
that has a whole bunch
of really deep, technical content
00:51:59.670 --> 00:52:02.690
where you work with trainers
and homework assignments and things like that,
00:52:02.690 --> 00:52:04.500
to be able to really improve
your developer skills.
00:52:04.500 --> 00:52:05.440
- Pretty fantastic.
00:52:05.440 --> 00:52:09.490
Should also mention quickly, don't forget we have got
Microsoft Virtual Academy for other training content.
00:52:09.490 --> 00:52:10.670
A lot of great content there.
00:52:10.670 --> 00:52:11.990
Tons of great content there.
00:52:11.990 --> 00:52:15.400
And of course, Channel 9 is hosting
all these videos, so these will be recorded as well.
00:52:15.400 --> 00:52:19.210
- Yeah.
- And a wealth of content on Channel 9 as well.
00:52:19.210 --> 00:52:20.530
- Yeah, that's exactly right.
00:52:20.530 --> 00:52:22.150
So we are pretty excited.
00:52:22.150 --> 00:52:24.560
Awesome.
- Thank you very much.
00:52:24.560 --> 00:52:26.530
If you have any questions, you can
send them to our Twitter account.
00:52:27.630 --> 00:52:29.040
We are taking questions
live during our sessions.
00:52:29.040 --> 00:52:30.770
We will be back in just a couple of minutes.
00:52:30.770 --> 00:52:34.340
So bring your questions, tweet at us
and we would love to hear from you.
00:52:34.340 --> 00:52:34.890
- Yeah, that's right.
00:52:34.890 --> 00:52:35.350
Thanks so much.