>> Welcome back everyone to the Xamarin show,
I'm your host James Montemagno.
And today, I'm super
happy to have my second favorite Wisconsinite,
Matthew with me. How's it going Matthew?
>> Thanks James. Thanks for having me on.
Second favorite, wow, working up there.
>> Working up there. It's going to be
hard to be the first one.
So, Matthew all the way in,
Cloud Developer advocate now here at Microsoft,
which is awesome. Congratulations.
>> Thank you very much.
>> Welcome to the team. Yes, so
what are you going to be showing us today?
>> Today, I want to talk about
some little gems of awesomeness called,
Behaviors in Xamarin forms.
>> How awesome. I actually
don't know too much about behaviors,
so that's why I had the expert come
on to tell us about it.
But if people don't know who you are,
maybe you can let them know a little bit.
>> Sure. All right, my name is Matt Soucoup.
As James mentioned, I'm a Cloud
Developer Advocate here at Microsoft.
And so, what I do is,
I advocate for Azure as a Mobile Developer.
So I'm going to help Mobile Developers
learn how to use Azure.
And also, if you're having issues,
I can go back to the Engineering teams
and help you out that way, too.
>> You've been in the Xamarin community for a long time.
>> Yes, I've been using it since way back
when we were calling it MonoTouch and MonoDrawing.
>> I am, me too.
>> So, yes.
>> And we connected a long time
together back in Wisconsin.
And you ran a user group there,
and I've been trying to hire you for years.
Little did anyone know that it only
took whole acquisition of Microsoft to make it happen.
So, we're super happy to have you here.
>> I love being here. Thanks, James.
>> So, Behaviors. So, everyone,
we've had lots of videos on Xamarin forums,
I've talked to a lot about MBBM.
What is a Behavior?
Like, why would someone use a Behavior?
>> So, Behavior is nothing but
a C sharp class that
extends the functionality of a built in control.
>> Okay.
>> So, here's an example. Let's say
you have an entry and you
want that entry to validate an email address.
>> Okay.
>> And that way you can just put on a Behavior,
type in an email address,
and you can tell then on
an entry control whether it's good or not.
>> So, it's like a, it's
a little piece of the, let's see if I got it right.
It sounds like a little piece of
reusable photocanality that you attach to any control.
>> You can attach it to any control.
>> Got it.
>> And, the utility of these
guys really sneaks up on you.
>> Okay.
>> And, let me explain that for just a little bit.
So, I was talking about like,
validating an e-mail address.
You can also do cool things like make a control,
be a command where you don't
have a command like on an entry text change event.
>> Oh, cool. Got you. So, usually you'd have
to register for all those events,
be up say, "Hi, when someone enters
it. We're on this I command."
>> Right. Right. Admirable. Then we're
not messing up our code behind in the background,
or in the case of that entry control,
subclassing the whole entry control,
and then we have just an entry that's
an e-mail validator entry which is maybe a bit much.
>> Got it.
>> So, do you have
access to the control as well in the Behavior?
How does that work? What is the structure of a Behavior?
>> Yeah. Well, let's jump in some code and find out.
>> Yeah. Let's do it.
>> All right.
So, first let me show you the app that
we're going to be customizing here.
I'm adding a Behavior to.
>> Okay.
>> All right. So, let's bring it up.
James, I use this app all the time.
So, I'm going to show it to you.
You can use it too if you want.
How does my beard look every day?
>> Today, It looks real good.
>> Right. And so, it does one thing,
you wake up in the morning and you can just
say my beard look very good,
cool, great, or magnificent.
>> Mine's like at a good,
yours probably at a magnificent.
>> I mean, I would say we're both at magnificent.
But that's all this does here.
And, what we're going to do is
based on what we pick down here in a "Picker",
we're going to change the background color
of this, of the "Picker".
>> Yeah. And, I would think as of if I was to do
this manually, I'm thinking,
I would probably register for
an event whenever the value changed,
and then I could do if I want it two ways.
That could be listening to a bindable property,
and then the background color could
be another bindable property,
but I'm kind of mixing my UI together.
So, maybe I just register for the event,
and then manually change it with the: Switch".
That's like my mind.
Which is like ugly code.
It's ugly code. It's not magnificent.
I mean that's probably rate down at a fair.
>> Right.
>> So, let's do a "SimplePickerValidator".
Where you do not the greatest code
but are the more of the fair code,
but it will work.
So, what a Behavior is?
Is that we inherit from the Behavior class.
>> Okay.
>> And then, we say that we want to attach to a "Picker".
>> So, it's strongly type then?
>> It's strongly type. And, it
doesn't necessarily need to be at "Picker",
could be an "Entry", or could be
further down the inheritance tree.
>> Like a "View".
>> Could be a "View"
>> Oh, cool. Because if it's something generic like,
oh I just want to change
the background color based on the time of day,
right? That could be it.
>> Exactly. And then,
there's two functions here that we can
override, that we want to override.
And one is called "OnAppearing".
So, override "OnAppearing", "OnAttachedTo",
and this is where you're getting for before, James.
And, we have access to the "Picker" here.
>> Okay. So, "OnAttachedTo". That's the main one.
Is that when it's loaded?
>> That's when the Behavior
gets added to the "Control" itself.
>> Got it.
>> This gets called.
>> Okay.
>> And, this is where we can start doing
fun things like handling events here where
we want to actually do the
overriding or extending of the control.
>> Got it. Cool. And, you rename,
it was just generic and used "Picker",
because you know it's [inaudible].
>> Exactly.
Because that right now I know it's a "Picker",
so before it was just bindable objects,
so I'd change that over.
>> Cool.
>> So, what I'm going to do here
is I'm going to say "Bindable",
the name of my variable,
and then all the way up here I'm going to
handle my event "SelectedIndexChange",
and then I will do
that name my event handler and put it down there.
>> Perfect.
>> And then, I have another function I want to override,
and that's going to be "OnDetachingFrom".
>> So, "AttachedTo", "DetachingFrom" I'm going to
imagine you may want to unsubscribe to this event.
>> Exactly.
>> Clean up a little bit of your memory. Got it.
>> Right.
And that's going to be "SelectedIndexChanged" again.
>> There you go.
>> "Picker".
>> Cool.
>> Minus, equals, and then,
"Bindable". A strong one.
>> Cool.
>> All right. So, this is pretty easy.
So, a Behavior, this
looks familiar to an effect in a way.
>> All right.
>> That's my imagining because
I remember there's "AttachedTo", "Detached" too.
>> Right.
>> Then maybe if developers have made in effect.
How would this Behavior differ from in effect?
>> It's very similar to in effect.
It's almost analogous to it
except you're not dealing with
any platform specific functionality.
>> Got it. I'm essentially attaching to
this Behavior which is this control,
and I really only care about the cross platform UI.
>> Exactly.
>> Okay, cool. That makes sense. Got it.
>> So, then we actually have one
this function handler gets called, Event handler.
This sender coming in is actually going to be our picker.
>> Got it.
>> So, what I'm going to do is to save "Var",
I'll just call it "Bindable", equals,
and I'm just going to assume
it's going to be the picker right away.
And go like that. So now, I have
a reference from my picker.
>> Cool.
>> And so, my logic here is going to be very simple.
I'm going to check whether it's valid or not,
just based on the number of items in my list.
>> Okay.
>> So, I'm going to say if,
let's see "Bindable.SelectedIndex" is
greater than equal to "Bindable.Items.Count_/2".
So, if it's in the greater half of the overall,
there we're just going to keep it as the same color.
>> This is magical thing that you have.
What is that? What's going on here?
>> Right here?
>> Yeah. What is that?
>> It's a ligature in the,
I'm not sure the "Font" community.
And it's called [inaudible] Code.
>> Okay, got it.
>> It's an open source coding,
and what it does it puts these cool ligatures on it so
it makes these things look more like.
>> Little bit nicer.
>> Yeah.
>> Got it.
>> Okay. Just so anyone was curious.
>> I'm curious. I have no idea. This is the defaults.
I'm a default type of guy.
>> So, if it's valid, then what we're going to say,
The "bindable.BackgroundColor" is going to be equal to,
we'll just keep it that "Color.Default".
Else, if we're not bound or if we're in
the bottom half of our colors,
we're going to do Bindable.Background.Color,
and my favorite invalid color is always by Salmon.
>> Got to have. Here you go Salmon.
>> Yes.
>> Yeah, okay. This looks easy. I like it.
I like easy code. Understandable.
>> Right. Straightforward. Really, this is the same stuff
that we would be writing in our code
behind file if we're going that way.
But we're making it reusable putting it in
its own file and this is sole purpose and
this behaviors life is to validate
that we're in the top half of
our total number of items in the list.
>> And this could be anything. It could be
another picker for something
else that's not beard related per se.
>> Exactly, yes. We're just.
>> Cheese related.
>> Exactly.
>> Got it. So how do you get it in the Xamel?
Because to me I'm a Xamel type of guy.
>> Me too.
>> Hook it up.
>> All right. So here's the
"BehaviorsPage" that I'm calling
it and I have the picker rate down here.
>> Got it.
>> So all we need to do,
there is a collection on
every control called "Behaviors".
>> Got it.
Because there's "Behavior" and they go into "Behaviors".
>> Right. Exactly.
>> And you get multiple "Behaviors".
>> You can add multiple hit behaviors
to a single control.
>> Got it.
>> So it's called "Behaviors".
And then all you need to do is because I already
added the name space is like this.
So I added the local namespace up here just
for references and then local simple picker behavior.
>> That's it. That's very similar to if you done any on
platforms or you've done
a fax or anything that was very similar code.
>> Exactly.
>> It's in I think
the important part here is that it's
in the behaviors list.
>> Exactly.
>> Got it, Okay.
>> So let's run it now and see what happens.
>> I'm ready.
>> Yes.
>>Yes.
>> So, it's going to redeploy,
bring it back up
and initially we're fair. Not that great.
>> Not that great.
>> Click on it and we'll go
right to magnificent, perfect.
>> Nice.
>> Perfect. Very cool.
So reusable and what's
nice is that you didn't have to interact
with your view model,
your model because what you're actually doing is
kind of control related activity
to the UI related activity.
>> Right.
>> To the behavior codes.
>> Right. Exactly.
>> Nice. So that's
pretty simple but, what else do you got?
Because you were telling me about
some really cool crazy stuff you can do. Yeah.
>> So what I wanted to do next is,
these things are gems of awesomeness.
And what you can do with them,
is that you can start putting
bindable properties into these behaviors.
So I have another one I'm calling picker color behavior.
>> Okay.
>> So what I can do with this is I can actually bind
to the valid values that I'm sending in.
So I can say I want the magnificent value
to be the valid value,
and all the rest of them to be bad or
good and magnificent to be the valid values.
>> Got it, okay.
>> And I can say what color I want to be valid.
So we can start studying all these from the Xamel page.
>> Got it.
>> And then down here it's the exact same functionality
than the unattached to and unattached from.
>> Got it.
>> And then in a selected index change,
what I'm doing is a little more safe coding.
>> Got it.
>> Making sure of that. And then getting
the selected items like
the text using some reflection to get it out.
>> Yeah.
>> And then checking to see if it
contains the selected text and get it out.
>> Got it. Okay, so what you're doing in this instance,
you're kind of now extending the control of
the behavior to add custom bindable properties.
>> Right.
>> Because there wasn't a "is
valid" before or a "valid color" invalid.
>> Correct.
>> You're adding value. You didn't subclass anything,
you didn't create anything
>> No.
>> But it was behavior.
>> It's a behavior, it's changing the behavior of
the picker to get an "is
valid" values got onto
it but it's really properties of behavior.
>> That's the key, right? So you're not
extending the control you are,
but you're kind of extending
the behavior. Well, that's cool.
>> Yes. Sending the behavior,
which in turn extends the control.
>> And then you could pass by
bindable properties down into the behavior?
>> Yes.
>> Let's do it. That's good. Okay, got it.
>> So, let's do that next.
So, in my view model behind the scenes what I have
is an observable collection of Beard Ratings,
which we were looking at before.
And then down here I also have a static of valid ratings.
So that's what's going on behind the scenes.
And then I have
commented out so you can just go and grab it.
You don't have and I'll
pop it in here so we can see what it looks like.
>> To get rid of this simple picker.
>> To get rid of the. Get this simple picker
and we'll put more of
the advanced one in here.
>> So this is valid values,
those are things that obviously
didn't exist on the behaviour
before but you added the bindable properties.
>> Right.
>> So we're saying the valid values
coming from the view model.
>> Got it.
>> And I'm saying invalid color
being "Fuchsia" this time.
>> Got it.
>> And so we run it again.
>> And then "Fuchsia" since it is a color of a bindable,
it knows how to do it on match.
>> Exactly.
>> Cool.
>> Yeah. So we could set that from the new model as well.
>> Cool.
>> So fair is bad,
but in this case, good is good.
Cool's bad great's bad, but magnificent good.
>> That's good.
>> And that's kind of nice because you may be adding
stuff into the picker in different orders, right?
And you may really want to
figure out which one is which. Exactly.
>> Very cool. I like that.
>> So, the last thing I wanted
to show here with "Behaviors" is
actually making a control that doesn't have a command,
have a command so we can do our MBVM goodness.
>> So maybe first, what is a command?
So maybe if you're brand new to MBVM or you saw
some bindable stuff in there but
what is a command and why would you use one?
>> So, a command is a way to tell a viewmodel
to do something in return
from an event happening in the view.
>> Whats an example?
>> An example would be a button click.
>> Got it. Okay.
>> So you click a button,
it goes out to the view model and the view model goes
downloads your favorite list of cheeses from our website.
>> Exactly. So that's normally what it would do.
>> Yeah.
>>So that replaces that
plus equals click plus equals click event.
>> Exactly.
>> Okay, got it.
So you don't have to have access to the control you
say is that bindable to that command.
>> Exactly.
>> And what does a command do?
It just does some stuff?
>> The command just then does some stuff.
It either calls out to a service of some sort
or whatever you need it to do.
But it doesn't have access back to the view.
>> So why doesn't every single
event handler have a command?
>> That's a good question.
>> Yeah.
>> I don't know.
>> Yeah.
>>So that's what you want to do.
>> That's what I want to do, yeah.
>> Okay. Got it So cool how would you do that then?
>> So, I'm going to add that to an entry.
>> Okay.
>> And what I want for that entry is to have on its,
on attaching to, on its TextChanged.
I want to actually, every time we head up
a keystroke to listen to
that keystroke and then execute a command.
>> Okay. Got it, that makes sense.
>> So, again I have
a bindable property called the command.
It's ICommand here so I
can set all that up in a Xamel on OnAttachedTo.
All I'm doing is making sure that the bindable coming in,
the entry, if not the binding
or the binding context is not equal.
Well, now what I'm doing here is a little bit different,
I'm setting the binding context of
the behavior to be the binding context of the entry.
>> Okay.
>> To make sure they both have the same binding context.
>> Okay.
>> And then just handling the TextChanged event.
>> Got it. Okay.
>> And so all we do in the TextChanged event
make sure the command's set to
something and then execute it.
>>Oh nice, cool. That's easy busy.
>>Yeah. So then in the view model,
here I have a really,
really impressive text analytics
sentiment analysis, Deep Machine Learning.
>> Okay.
>> All right. So what we're doing is if
the input contains "fair", "good", "cool",
or "great" just changing
a selected Beard Rating property it'll update the picker,
the picker will change its color, and here we go.
>> Cool.
>> All right. So back into the Xamel.
I'm going to grab this.
Pop in here, and now we have a beard diary.
>> Okay. So not only are we picking our beard looks,
we can also just type in how it looks. Yes.
>> And then very similar stuff here
that local entry press command.
>> Yes.
>> But then it is to that EntryPressCommand.
>> It's going back to the EntryPressCommand
behind the scenes of your model,
which is just calling and this first beard text.
>> Nice.
>> All right.
So, right now is just says "fair" but today,
my beard is "good" and automatically updates.
So every keystroke or every tap on
the keyboard is update
calling that command and going out.
>> Very cool. Yes. That's really awesome,
I like that it's for
any control easily extend but I think
the key that I'm noticing is that you didn't have to
create a custom renderer
or you didn't get a custom control.
You didn't do
anything, you're just kind of extending it naturally.
>> I'm extending the control naturally in
a behavior that is self-contained.
And what's cool is that I can start
adding multiple behaviors to that same control,
and I can reuse these behaviors wherever.
I can put them into my own third party library
let's call them put them with all my projects.
>> That's nice. So if you're creating
your own custom reusable controls boom,
you could start by sending it easy
with behaviors. That super cool.
And now I want to go take all my apps
replace a bunch of logic that is
definitely hardcoded into my view models
and put it in behaviors, awesome.
Thank you Matthew for coming on,
>> Thanks for having me.
>> And chit chat about behaviors, I love it.
Also and we'll put all the links and
the awesome beard application in the show notes below.
So make sure to go check those out.
That's it. This has been another Xamarin show.
Until next time, don't forget to subscribe up over there,
down there, over here, who knows?
Ring that bell, make sure you get
those great notifications right in
your inbox whenever a new Xamarin show is posted.
So, until next time,
I'm James Montemagno and thanks for watching.