Downloaded from git.ir
so what is a marine forms thyroid forms
is a library that enables you to build
native apps for iOS Android and Windows
using a single c-sharp codebase if you
have any experience with Windows
presentation foundation or Silverlight
xamarin forms will be very familiar to
you so we have this xml-based language
called sam'l which stands for extensible
application markup language and we use
this to define the user interface of our
applications for example we can define
what elements we have on a page
where they are located and what do they
look like
behind every sam'l file we have what we
call a code behind which is basically a
class that implements the behavior for
that page for example what should happen
when we click a button or select an item
from a list so these are the
responsibilities of the code behind now
in terms of architecture xamarin forms
is built on top of two existing
libraries Sam rendered Android and
xamarin iOS so with some reforms we
worked with a single unified API for
creating user interfaces and xamarin
forms will internally map these user
interface elements to their
corresponding native equivalent and this
makes our applications completely native
so we don't have user interface elements
that look the same across different
platforms if you use a button that
button looks different depending on
where you run your application also
because zaman forms is built on top of
some rendered android and hammering that
iOS you can write platform specific code
that uses the API exposed by any of
these libraries so you're not limited to
a common set of features that are
available across all these platforms now
the first question that a lot of
beginners ask me is maash do I need to
know about examined on android or
examined iOS in order to learn xamarin
forms none at all
the only exception is if you want to
write something specific for Android or
iOS otherwise for the most part you can
learn xamarin forms on its own
the second beginners question is how do
I know which xamarin products should I
use should I use them in forms or one of
the more specific libraries the answer
is it depends what makes a marine forms
powerful is the ability to share most if
not all your code across these platforms
so you code the application once and
then build it for different platforms
this building is nothing more than just
a compile in Visual Studio that's all
you have to do so if you don't need to
use much of the platform specific
functionality and code reuse is more
important to you then go for examine
forms otherwise if you're going to do a
lot of customization and have quite a
few use cases for working with platform
specific API then it's better to use
surrender the Android or examined on iOS
in terms of tooling you have a few
options here if you have a Windows
machine you can build and deploy apps to
Android and Windows but not I Oh s for
that you need a Mac either a MacBook Pro
or an iMac on the other side if you're a
Mac user you can build apps for Android
and iOS but not for Windows so if you
want to target all platforms you need
both a Windows and a Mac machine but
this is not a requirement to take this
course or to learn zarion forms in
general it's all about where you want to
deploy your application you can start
with a Windows machine and use Visual
Studio to build apps for Android and
Windows if in the future you want to
build your app for iOS you just add a
Mac to your setup and you're pretty much
done you don't need to write any new
code you just build your project for iOS
alright next I'm going to show you how
to set up your development environment
in this video I'm going to show you how
to set up xamarin on a Windows and a Mac
machine I'm going to start off by
setting up on Windows and then I'll get
to Mac whether you're a Windows or a Mac
user be sure to watch this video
thoroughly so if you're a Windows user
you probably have Visual Studio so we
can install xamarin and that will
install all the required SDKs as well as
project templates in Visual Studio so
simply head over to xamarin comm slash
download fill out this form and be sure
to set the answer of this question I
already have Visual Studio installed to
yes so you don't get Visual Studio you
only get xamarin installer once you run
it you're going to see a dialog box like
this be sure to select the following
items on the cross-platform mobile
development so the latest version of
c-sharp slash net xamarin so you see
I've currently installed version 4.0.3
but there is a newer version so I'm
going to take that
and then under common tools and software
development kits select Android native
development kit you see I have installed
both the 32-bit and 64-bit versions you
also need to install Android SDK and
then you need to install at least one of
Android SDK setups the difference
between these items are there version
number so we see the first item is API
level 19 and 21 and the last one is API
level 23 you can go for the last version
or if you have enough space on your
machine you can install all of them
apache ant is not really necessary but i
have installed it anyway and finally you
need to select java SE development kit
now if you have a typical machine and
are not part of a network with a proxy
server this installation process goes
very smoothly but it may fail if you're
behind a proxy server or if you're
running Windows in a virtual machine on
a Mac this happens mainly because
xamarin installer cannot download some
of the required resources so at this
point you need to manually install some
of these components I've attached a PDF
to this lecture with more details about
manual installation so hopefully you
won't have any problems during the
installation but if you encounter any
issues you really need to troubleshoot
them yourself because every machine is
different in terms of the hardware and
software and I really cannot help you
with that
so just google the exact error message
you get and you will definitely find a
solution I just want to emphasize do not
get discouraged if you get any errors
you only need to spend a bit of time to
travel through these issues and then
everything is going to be fine also it
would be really helpful if you post the
errors you get and the solutions you
find in the discussion board because I
can get all these various errors and
compile them into a PDF and that would
be very valuable resource for future
students of this course
now what if you're a Mac user you have
two options you can either use xamarin
studio on a Mac which is a lightweight
ide similar to visual studio or you can
use Visual Studio but this requires a
Windows machine in my set up I'm running
Windows as a virtual machine using
VMware which option is better samer in
studio is the fastest option you simply
head over to zombocom slash download and
get xamarin studio and you're good to go
we can build apps for iOS and Android
but not for Windows if you want to
target Windows you need a Windows
machine so you can either get a physical
machine or use a virtual machine like me
then you need to follow the same steps
to install Sam rein on your Windows
machine in this video I'm going to show
you how to create a xamarin forms app in
Visual Studio whether you're a Windows
or a Mac user watch this video
thoroughly so here I am using visual
studio 2015 let's create a new project
under visual c-sharp templates select
cross platform for xamarin forms apps we
have two options here portable class
library or shared assets the preferred
way and the best practice recommended by
xamarin is a portable class library if
you want to understand the differences
between these two project types I'll
attach a PDF for you for further reading
but read it after watching this video so
let's go ahead with this portable class
library I'm going to call our
application hello world okay
now this process is going to take a few
seconds so I'm going to pause the
recording
okay next you're going to see this
dialog where we select the target and
minimum version for Universal windows
apps a universal Windows app can run
under Windows 10 or Windows 10 mobile
without the need to be written for each
I'm going to accept the defaults here
okay our solution is ready now before
looking at the structure of this
solution as a best practice whenever you
create a new salmon forms app
right-click the solution and go to
manage NuGet packages for solution then
go to the Updates tab and make sure to
select all packages and update them
because ambereen frequently releases new
libraries
okay as part of this update process one
of the older packages is going to be
uninstalled and for that you need to
restart Visual Studio so we're start yes
okay all the packages are updated
properly now let's see what we got here
so in this solution we have six projects
the first one is our portable class
library and this is where we're going to
do most of the work so all the code that
should be shared across different
platforms should be written here and if
you look inside we only have one class
app which is the starting point of our
application
next we have five platform specific
projects one for Android one for ILS one
for Universal windows apps which can run
on Windows 10 or Windows 10 mobile and
one for Windows 8.1 and the last one for
Windows Phone 8.1 so anytime we want to
write platform specific code will write
it in these projects as I explained
before the whole idea about xamarin
forms is about code reuse we want to
write code that can run across different
platforms that's why we do most of our
work in the portable class library all
these projects you see here have a
reference to this class library now if
you don't have a Mac you're not going to
see this iOS project here also let's say
you only want to build an app for
Android and don't care about other
platforms you can simply delete these
projects here and if in the future you
decide to support them you can simply
right-click the solution add a new
project let's say you want to target iOS
then under iOS expand it universal and
here is the blank app template so you
just add a project to your solution and
you're good to go
okay now let's run this app you can see
that currently hello world that droid is
set as the startup project so if I press
ctrl + f5 is going to be loaded in an
Android emulator here on the toolbar you
can see the list of emulators installed
on my machine these emulators come as
part of installing xamarin so if
everything goes well during the
installation you should see quite a few
emulators here but in my case because
I'm running Windows in a virtual machine
on a Mac I had to manually
all Android emulators if you want to
deploy and debug your application on a
real device you need to set it up for
development first and then you can see
it listed here so you simply select it
and then press control f5 to deploy and
run the app on your device or f5 to
debug it and these are the shortcuts
that we always used in c-sharp
development I've attached the PDF to
this lecture with additional details
about setting up your Android or iOS
device for development now let's run
this app control f5 now the first time
you launch Android emulator you're going
to wait quite a few minutes even up to
10 or 15 minutes depending on your
hardware so please be patient
and here is my Android emulator and you
can see our first summer informs app is
running successfully so this app is just
a single page with a label in the middle
of the screen now your emulator may look
different in terms of its size and the
controls you have here but all these are
settings that can be changed when
creating an emulator manually now let's
say we want to run this app in an iOS
simulator so we right-click the iOS
project and set it as a startup project
then on the toolbar I can either deploy
to my device because I have an iPhone or
use one of these simulators iPhone 4 5 6
ipad and so on
now this simulator actually runs on my
Mac not on the windows and here on the
toolbar we have this icon xamarin Mac
agent if you don't see this toolbar go
to the View menu under toolbars select
iOS we also have a toolbar for Android
but I have disabled it for now so with
this xamarin Mac agent we can select the
Mac on our network that is responsible
for launching the simulator so visual
studio talks to as a Marine agent on a
Mac in order to launch a simulator in
most cases your Mac should be
automatically detected but if not you
can simply click add a Mac add the IP
address here and you're good to go
just remember you need to install Sam
rain both on your windows and on your
Mac machine
now I can press control f5 and this will
launch my iPhone simulator on my Mac
okay and here's the same app running in
an iOS simulator next I'm going to show
you how to create a summary forms app
using xamarin studio alright now I'm
going to show you how to create a
xamarin forms a pin xamarin studio on a
Mac if you're a Windows user you can
skip this video but I encourage you to
watch it just to get familiar with what
your development environment on a Mac
would look like so here I'm using
xamarin studio version 6 and I have
changed my theme to dark let me show you
how to do it so on the top xamarin
studio Preferences under visual style
set the interface theme to dark alright
now let's create a new solution under
multi-platform category select app and
then forms app next I'm going to call
this hello world you can see both
Android and iOS are checked but we don't
have a checkbox for windows because in
xamarin studio you can the target
Windows and for that you need Visual
Studio now in terms of the shared code
the default setting is unused portable
class library the other option is use
shared library which is not something I
would recommend again if you want to
know the differences between a portable
class library and shared assets look at
the PDF I'm attached to this lecture
next I'm going to accept the defaults
here which are about location version
control and test clap so nothing
important at this point create
okay our project is ready and this is
much faster than Visual Studio now as I
told you in the last video as a best
practice whenever you create a new
xamarin forms app make sure to update
all the packages so right-click the
solution and go to update new get
packages you can see xamarin studio is
updating the packages and this is going
to take a little while okay all packages
are successfully updated now similar to
visual studio you can see that the iOS
project is set as the start of project
because it's bold and here on the
toolbar we can select a simulator so
we've got various versions of iPhone and
iPad or we can deploy to a real device
now to run this application you press
command alt and enter and then iOS
simulator launches and loads our
application if you want to try the
Android app right click this project and
set it as startup project now you see
all the Android emulators here so
throughout this course I'll be using
xamarin studio to do my development
because it's much faster and more
lightweight if you want to use visual
studio that's perfectly fine all the
code I'm going to write in this course
is exactly the same and it doesn't
matter which IDE use it's entirely your
personal choice alright next we're going
to explore this application in more
detail and add a bit of functionality so
you will see both zamel and code behind
in action alright this is what I'm going
to build now I want to add a new page to
our app with a button in the middle of
the screen in iOS buttons don't have a
border they look like labels so when we
click this button we get an alert so
let's go ahead and implement this all
right as I explained in the last lecture
I'm going to use xamarin studio in this
course to doing my development if you
want to use Visual Studio that's
perfectly fine all the code I'm going to
write is exactly the same so as I told
you earlier
in summary in forms we use samo which is
an xml-based language
define the visual appearance of our app
and we use code behind to implement how
the user interface behaves so I'm going
to right click our portable class
library and add a new file on the left
side select forms and on the right side
select forms content page
samo and now we give this a name greet
page if you're using Visual Studio again
right click the portable class library
add a new item in the list of templates
select cross-platform and here select
forms zamel page and call it greet page
so this will add two new files to our
project one is greet page that's ammo
and if you expand it here's the code
behind which is just a simple c-sharp
class and we have the same scenario in
xamarin studio so here's our code behind
and here's our sam'l file as you can see
sam'l is based on XML the root element
here content page represents the type of
our page in xamarin forms we have a few
page types we have content page master
detail page navigation page carousel
page and so on we use content page to
present some content to the user whether
that being text images or the
combination of the two now let me break
up this line so you can see more clearly
in our content page element we have a
couple of XML namespace declarations the
first one is owned by xamarin and this
namespace is for elements that have no
prefix like this content page element so
this element belongs to xamarin to
xamarin forms we have another namespace
declaration which identifies a prefix so
this : x syntax is used to declare a
prefix and if you look at the URI
assigned to this XML
namespace you can see that this
namespace is owned by Microsoft which
represents the standards mo that
Microsoft introduced in year 2009 now
what is this : X here that means any
elements or any attribute that is
prefixed with an X belongs to this
namespace look at this attribute the
class attribute it's prefixed with an X
and we call it X class so this attribute
belongs to the Microsoft namespace now
look at the value assigned to this
attribute it's hello world that greet
page which is the fully qualified name
of our code-behind class so if we switch
to the other tab look the name of our
class is greet page and it's placed in
hello world namespace so using X class
attribute we establish a link between
the sam'l file and the code-behind file
now remove the content of this content
page element and instead let's add a
button so button I want to put this
button in the middle of the screen so we
set horizontal options to Center and
vertical options to Center next we set
the text attribute click me so this way
we zamel we are defining the visual
appearance of our page now what about
the behavior when we click this button I
want to display an alert in xamarin
forms buttons have an event called
clicked so we set clicked to a string
and this identifies the name of the
method in the code behind that should be
called when this event is raised you can
see they are in studio or Visual Studio
is suggesting a name for this method
handle underline clicked so we press
Enter that brings us to the code behind
press ENTER again and that generates our
event handler so this event handler as
you see it's a private method because it
doesn't have an access modifier like
public it has two arguments one is an
object which is the sender or source of
the event and the second one is event
args which brings additional
tales about an event if this method
looks strange or unfamiliar to you I
highly recommend you to watch my c-sharp
advanced course because there I have a
complete lecture on events and handlers
now I want to change the implementation
of this method to display an alert we
call display alert method we inherit
this method from content page class
which is the base class for our greet
page so the arguments will supply here
is the title of the dialog box the
message we want to display like hello
world and then label for the cancel
button let's just call this okay
potentially we could supply another
argument if you want to have two buttons
like okay and cancel or yes and no but
for this video we don't have to worry
about it now in terms of clean coding we
should keep the constructor of our
classes on the top so I want to move
this method down
okay we are done with this new page now
we want to make sure that this page is
displayed when our app is started so
back to our solution view in the
portable class library you see we have a
file called apt sam'l let's expand this
here's our code behind you can see here
main page property is set to a new
instance of hello world page main page
is a property that is defined in the
basin class and we use that to set the
starting page of our application so I'm
going to change this to new greet page
now let's run this enzyme rain studio
I'm going to press command alt and enter
in Visual Studio you press ctrl + f5 but
before doing so make sure in the
solution Explorer set one of these
platform-specific projects as the
startup project I'm going to use iOS you
can use whatever you want so let's run
the application okay here's our bun
so now you have an idea of what it's
like to build cross-platform apps using
xamarin forms
so you have seen Dameron forms in action
and you know that with xamarin forms you
can build native apps for different
platforms but you might be curious how's
a Marine actually achieves this so let
me give you a bit of background
alzheimer in products like samurai on
android xamarin that iOS examining forms
are built on top of mano which is an
open-source version of.net that runs on
various non Windows platforms like Linux
UNIX and OSX mono is a project that has
been around since pretty much as long as
dotnet itself but it wasn't very popular
until recent years in the mana world we
had two releases one was called mana for
Android which was later renamed to
xamarin that Android and the other
release was mono touch which is now what
we call xamarin iOS both these libraries
give you access to the dotnet base class
library so you have the same namespaces
you are familiar with you got the same
classes with the same interfaces but
they also give you access to the native
API on their platform so you have access
to additional assemblies and namespaces
that mimic the ones that come natively
with Android and iOS these are the
classes that Objective C or Java
developers work with when they build
native apps for Android and iOS
when using xamarin that Android or
examined on iOS we work with these
classes just like standard Seashore
classes in dotnet and these libraries
will internally call the corresponding
API on the target platform now how that
happens it's pretty complex and it's not
something we need to worry about that's
something that developers at xamarin
have to deal with now that you have an
understanding of xamarin that Android
and stammering that iOS let's get a
little bit more specific here when you
build an application with xamarin
Android xamarin sushar compiler compiles
down your c-sharp code to intermediate
language or IL it also emits the mono
runtime with your application this mono
runtime is similar to CLR
that you should probably be familiar
with so when you launch an Android app
this runtime is loaded into the memory
and then it gets your il code and
compile it to the native code for
Android and this process is what we call
just-in-time compilation or JIT this is
the same mechanism that is in place when
you build a regular dotnet application
with c-sharp
when you build a console desktop or web
application the same magic happens now
with iOS we have a different story Apple
does not allow cheating so when you
build your iOS application zamarons you
sharp compiler first compiles your
sushar code down to IL and then it uses
apple compiler to compile it to native
code and that's why you need an apple
machine so the output is native code
that iOS can understand and there's no
cheating involved here in other words
when you ship your application there is
no model runtime embedded in your
application so this is how xamarin on
android and xamarin that iOS work but
what about xamarin forms well zerrin
forms is built on top of these two
libraries so we have this assembly
called xamarin dot form score and here
we have classes that define a common
unified API to work with different
platforms for example we have a class
called button and this is the button
that we reference in sam o or in code
behind now we have another bunch of
platform-specific
assemblies that map these common objects
in zaman forms to the corresponding
native equivalent let me show you so
here in this blank solution let's expand
this portable class library now under
references under front packages look
we've got xamarin that forms the core
and this is the assembly that defines
that common API that we worked with so
here we've got classes like bun label
list view page and so on now if you look
at one of the platform specific projects
like the Android one
gained under references from packages
now here we have an assembly called
xamarin that forms the platform that
Android and this is the assembly that is
responsible for mapping those common
controls we have in xamarin that forms
that core into their corresponding
Android equivalent and in this assembly
we have a bunch of what we call renders
so these are the classes that know how
to render for example a label or a
button now we have the same architecture
in other projects so let's expand the
iOS project references from packages now
look we've got xamarin that forms the
platform that iOS so this is how xamarin
forms works all right let me quickly
give you an overview of how I have
structured this course and where you
will find the content you are looking
for in the next section you're going to
learn the basics of Zemo and this gives
you a good foundation to progress
through the rest of the course next
we're going to look at layouts which we
use for arranging visual elements on
screen so you will learn how to build
user interfaces like these next you're
going to learn about images you will
learn about downloading images from the
internet or embedding them in your
applications you will also learn about
icons after that we're going to look at
lists so you will learn how to present
data in beautiful interactive lists
following that we're going to look at
navigation you will learn how to
navigate users from one page to another
how to implement master detail how to
implement tabs how to display pop-ups
and so on next you're going to learn how
to accept input from the user and this
will help you build forms and setting
pages but we are not going to talk about
saving or loading settings in this
section that's the topic for the
following section so in data access
section you will learn various ways you
can store application data you will
learn about application properties you
will learn about file system you'll
learn about
boring structured data in a sequel light
database and finally you will learn
about consuming restful services now if
you don't know what restful is all about
don't worry I've got some PDFs for you
so you're in good hands next we're going
to look at mvvm architectural pattern I
will explain what mvvm is when you
should use it and why and how to
implement it but briefly we use mvvm for
decoupling our application from a
presentation framework like xamarin and
we do this for testability so at the end
of this section I've got a short video
where I show you how to unit test your
view models more on this later and
finally in the last section you're going
to look at some more practices and
features that are useful in building
larger complex applications and in this
section I will show you some of the
useful plugins that you can use to
access common device functionality like
using the camera GPS checking the status
of the battery detecting motion
accessing contact book and so on so
there is a lot to cover over the next
seven hours and I hope by the end of
watching this course you will have a
very solid foundation to build
cross-platform mobile apps using xamarin
forms
[Music]
well hello it's mash here I hope you've
been enjoying watching my salmon forms
tutorial in case you didn't know this
tutorial is the first hour of my
comprehensive seven and half hour course
on udemy in this course you will learn
how to build native mobile apps for
Android iOS and windows with c-sharp if
you're interested to have this course
you can get it with a big discount using
the link in the video description and if
not that's perfectly fine continue
watching as the next section is coming
up so as I explained in the last section
samo is an xml-based language that we
use to define the visual appearance of
our applications we're going to use them
a lot throughout this course so in this
section you're going to learn samo in
more detail and by the end of this
section you will have a good foundation
that will help you progress through the
rest of the course so let's get started
okay continuing from the project we
created in the last section in our greet
page first I'm going to delete this
button and then in the code-behind I'm
also going to remove this event handler
now back in the salmon file I want to
put a label on the page so label I want
to put it in the middle of the screen so
horizontal options center vertical
options Center and text hello world now
we can create the same UI using code
instead of zamel let me show you how so
back in the code behind in the
constructor after the call to initialize
component we can set the content
property of our page this property is
derived from content page which is the
base class for our greet page now we can
set this to a new label and set its
properties here so horizontal options we
set this to layout options which is an
enumeration that's Center similarly for
vertical options the center and finally
text now don't worry about this red line
under initialize component I think
there's something wrong with my xamarin
studio now that aside you can see that
we can create user interfaces using code
as well in this case I'm setting the
content property to a new label and this
is exactly equivalent to what we put
between opening and closing tags of
content page element now you might ask
maash why do we want to create user
interfaces in the code as opposed to
sam'l well in more than 90 percent of
the cases it would use samo you would
use code only if you want to add
elements on a page dynamically for
example depending on different
circumstances you may want to add a
label or a button or a slider or whatnot
and all this can happen dynamically but
as I said this is the kind of behavior
that most applications don't exhibit so
all I want you to take away
here is that if you want to put elements
on a page dynamically you can do it in
the code now why is that better than the
code because it's cleaner and less noisy
look at these properties here horizontal
options and vertical options we're
simply setting them to your string value
Center now look at the equivalent in the
code we have to prefix this value with
layout options the name of the
enumeration so there is a little bit of
noise in the code and this can get worse
when you're dealing with complex
hierarchical structures in those
situations sam'l is a definite winner
because XML is naturally hierarchical
now the reality is even when we use demo
at runtime we have a sam'l parser that
reads this demo file and it will
instantiate objects just like the code
we have written here so the exact same
code will be executed by the sam'l
parser let me show you when it happens
so in the solution I'm going to right
click the solution and set display
options to show all files if you look at
the object folder under debug we have a
file here hello world that greet page
that zamel the G which stands for
generated dot C s so this class is
automatically generated for us we can
see it's a partial class so part of that
is here and the other part is in the
code behind
you can see here we have a call to
initialize component method now you
might think this method is inherited
from content page but no it's not there
it's defined in this generated code look
it's here and inside this method we have
a call to load from zamel so when we
compile our our application our example
files are embedded in our assembly and
at runtime when initialize component is
called this sam'l file is extracted from
the assembly and pass to the sam'l
parser then sam'l parser will take that
sam'l and generate a user interface like
this all right so for now I'm going to
delete this code here and we're just
going to stick to sam'l for creating
user interfaces next I'm going to talk
about content property
all right now let me show you something
I want to put a slider below this label
slider but if I run this application now
we only see the label not the slider but
why is that all right let's have a look
at xamarin documentation to figure out
why so I'm going to search for examine
content page class
[Music]
you
alright look at the Declaration of
content page class this class is
decorated with an attribute called
content property and in this attribute
we have a string which specifies one of
the properties of content page in this
case the name of that property is
content and you saw that in the last
lecture we set the content property to a
new label remember now let's look at the
Declaration of the content property
look here's the content property its
type is a view view is the base class
for all our visual elements like buttons
labels sliders and so on so because the
type of content is view we can set it to
an instance of a single view not
multiple views that's why we cannot have
multiple children or multiple widgets or
multiple views inside content page
element so what's the solution let me
introduce you to a new element stack
layout and then I'm going to move these
two widgets inside stack layout with
stack layout we can stack multiple
widgets horizontally or vertically now I
want to make sure both the label and the
slider are in the middle of the screen
so I'm going to grab these two
properties horizontal and vertical
options and apply them to stack layout
now let me run the application again and
here's the result so here's our label
and here's the slider
now let's inspect stack layout class so
we search for xamarin stack layout class
look this class derives from layout of
view now if you look at the Declaration
of layout class you can see the content
property attribute again and look the
name of the content property for the
layout is children so let's look at the
children property now if you scroll down
you're not going to see that children
property you have to navigate up the
hierarchy so we go to the layout class
and layout class implements a layout
controller let's look at this interface
now look at the children property it's
of type I you read only list so these
children property because it's a kind of
list it can contain multiple widgets and
that's the reason we can use a stack
layout to stack multiple widgets on the
screen alright next we want to take this
application to the next level so we want
to add this behavior such that when we
move this slider the label is updated to
show the current value of the slider
alright now we want to take this
application a little bit further so we
want to add this behavior such that when
we move the slider the label is updated
to show the current value of the slider
to implement this we need to handle the
value change event of this slider and
then in our event handler we can get the
current value and then set the label so
pretty basic in the first section you
saw an example of handling the click
event of a button in xamarin forms so
the technique we are going to use here
is exactly the same for the slider we
handle the value changed event and set
this to the name of a method in our code
behind so enter enter now I'm going to
move this down okay inside our event
handler we can use this e argument
passed to this method to get the new
value of the slider but we need a
reference to the label so we can set its
text how do we do it well
back in our demo I'm going to give this
label a name or an ID so we use one of
the attributes defined in Microsoft
namespace so X colon name this X is a
prefix which is declared in the XML
namespace declaration for Microsoft
namespace so this name attribute belongs
to the standards ammo that Microsoft
introduced in 2009 and it's applicable
in other frameworks that use ammo like
Silverlight or Windows presentation
foundation or xamarin forms now we set
this name to an identifier like label
now when I save this file and go back to
the code behind I can type label dot and
here we have access to our label so we
can set the text property I'm going to
use string that format value is provide
an argument here
and then set it to e dot new value now
the value we get here is a
floating-point number between zero to
one and there are a lot of digits after
decimal point so I would like to format
this value to fix point with two digits
after the decimal point so let's run the
application
okay now if I move the slider look the
value is updated and this is a pattern
that you see in a lot of real-world
applications but the value may be
displayed as percentage that there is
just one tiny problem with this
application let me restart it the label
is displaying hello world instead of the
current value of the slider to fix this
in the constructor after the call to
initialize component we can explicitly
set the value of the slider so again we
need a reference to this slider object
so back in our sample file we use X name
attribute and give it an identifier
slider save now back in the code-behind
we can type slider dot value you can set
it to 0 or 0.5
whatever let's run the application again
okay that's much better
now let me give you a bit more insight
about this X name attribute so under the
object folder debug
open up hello world that greet page the
demo the G that's CS look we have two
private fields here one is label the
other is a slider and in initialized
component method after the call to load
from Zemo these private fields are
initialized so we have this method find
by name which is inherited from content
page the base class of our grid page and
we give this method an argument which
specifies the name or the identifier for
our widget with this after initialize
component we can access this private
field like in this case the slider just
remember if you put this line before
initialize component you're going to get
a null reference exception because that
private field is not initialized at that
point so in this lecture you learn how
to access element in code behind using X
name attribute now even though our
application is fully functioning but
there is a simpler and cleaner way to
implement the exact same functionality
and that's called data binding which I'm
going to show you in the next lecture
all right now let's see how we can use
data binding to implement the same
behavior data binding is a concept that
you see in a lot of UI frameworks like
WPF and Silverlight and even in web
applications we have frameworks like
angular and knockout and many others
that provide this concept of data
binding basically what it means is that
we bind a property of a user interface
element to a property of another object
in this case we want to bind the text
property of the label to the value
property of the slider so when the value
of the slider changes the text property
of the label is automatically updated
with this we don't have to manually
handle the value change event of a
slider which means we don't need to
create this event handler either so our
code would be cleaner and more
maintainable internally the framework
itself will create this event handler
based on our binding expression so let's
see how we can do this first of all I'm
going to remove this event handler and
back in zamel I'm also going to remove
the value change the attribute of slider
now we want to bind the text property of
the label to the value property of the
slider so we need to use a special
syntax for this so far all the attribute
values you have seen have been strings
at runtime these strings are converted
to a primitive type or an object using a
type converter in case of data binding
we cannot convert a string value to a
binding expression that's why we need a
special syntax and example this is
called sam'l markup extensions so we use
curly braces to instruct sam'l parser
that this is not a string literal and
it's a mark of extension there are many
different markup extensions available in
zamo and in this video you're going to
learn two of them the first one is
binding so curly braces binding now to
set up binding we need to specify what
object we want to bind the text property
to so we set source to
now here we want a reference to the
slider object that's when we use another
markup extension so again curly braces
now this mark of extension is called X
reference so X colon reference and we
use that to reference another object in
this demo file note that is prefixed
with X which means this belongs to the
standards ammo that Microsoft introduced
in year 2009 if you work with other
saml-based frameworks like WPF or
Silverlight you would see this now after
X reference space we need to specify the
name of the target element in this case
slider and this is based on the value of
X name attribute all right so here's the
source object now what property of this
object are we interested in the value
property which represents the current
value
so after source comma path equals value
we call this path instead of property
because that property itself may be an
object and we may want to use the dot
notation to access another property like
a dot B dot C that's why it's called
path alright that's pretty much all we
have to write now if we run this app
this is what we get note the label
previously we formatted this number with
two digits after the decimal point so
let's go ahead and do this back here so
in our binding expression we have set up
source path and now the third property
string format equals and we use single
quote to differentiate from double
quotes for the value of the text
attribute now here we supply a standard
c-sharp string format so value is curly
braces zero represents the first
argument colon f2 for formatting
now let me break this up into multiple
lines okay this is cleaner and more
maintainable now let's run the
application again okay that's exactly
like before
now let's take this to the next level
what if we also want to bind the opacity
property of the label to the value of
the slider so let's try another binding
expression opacity we use curly braces
for markup extensions the first mark of
extension is binding
now here we need to specify the source
object equals another markup extension
we use ex reference to reference the
slider then we set the path to the value
property of the slider now we don't need
a string format because opacity is just
a number between 0 to 1 now let me run
this application and here's the result
note that the label is a little bit
grayed out and if we move this slider to
the left it becomes transparent or if we
go to the right it becomes opak but look
at our binding expression these bindings
are a little bit noisy in both cases you
are using the slider as the source
object so let me show you how to remove
this noise and make this code a little
bit cleaner and more maintainable we can
set the binding context attribute of the
label to our slider so again we use
markup extension X reference slider now
slider will be the source object for any
properties of the label which means in
our binding expressions for the text and
opacity properties we don't need to
repeat this line remove remove also we
can take this to the next level and
remove path equals value and just add
value like this so we can put this on
the same line binding to value and same
here
definitely cleaner now let's take this
to the next level I want to add a box
view the box view is a box filled with a
color so above the label I'm going to
add a box view set its color to let's
say green and again I want to bind its
opacity property to the value of the
slider so opacity equals markup
extension binding we set the source
another binding expression x reference
slider and pass a closed value let's run
this application okay here's the result
again you see there is a little bit of
duplication in this code both the box
view and the label are referencing the
slider as they're binding context so we
can basically move this binding context
set up from the label to our stack
layout the container for box view and
the label and this will be inherited by
all the elements inside stack layout
which means we can simplify this binding
expression for the opacity of the box
view remove the source and the path so
this is how we set up data binding
now finally we don't really need this X
name for the label because we have not
referenced it anywhere so we can delete
it all right next I'm going to show you
how to deal with device differences
all right now let me show you something
don't type anything just watch for the
stack layout I'm going to remove
vertical options attribute let's run
this application in Android and see what
happens
okay this is what we get note that the
box view is on top of the page just
below the blue bar now I'm going to run
the same app in iOS
okay and this is what we get again note
where the box view is located in Android
our page started right below the blue
bar but in iOS our page starts right
from top of the screen so if you had
some text here instead of box view that
text would clash with the current time
so this is one of the key differences
between Android and iOS in this video
I'm going to show you how to add some
padding to top of the page but only in
iOS
so back in xamarin studio in this video
i'm going to show you how to do this in
code-behind and then in the next video i
will teach you how to achieve the same
thing in zamel the reason I want to
introduce you to code behind is so that
you have better understanding of what
happens under the hood so we have this
class called device and this has a
static property called OS which is an
enumeration of type target platform so
we can check if target platform is iOS
then we set padding of the page which we
inherit from content page class to a new
thickness object thickness has a few
different constructors and the one I'm
going to use now takes four arguments
left top right and bottom it's good to
remember this order because you're going
to use this a lot so left 0 top 20 0 and
0 so with iOS we always want to add 20
pixels on top of our page so the content
of the page does not clash with the
standard bar on top of the screen now
even though this code is perfectly fine
let's just assume you want to have
different padding's for android and
windows so if you want to use the same
technique you would end up writing code
like this else if device that OS equals
target platform Android something
like this now don't worry about these
numbers these are just arbitrary now I
want to show you a cleaner way to write
the exact same code this device class
has a method called
on platform and this method has to
overload one that is generic as you see
here and the other that takes actions
I'm going to start with the generic one
because it's easier to understand
so we supply the generic parameter in
this case I want different thickness
objects for different platforms so the
generic parameter is thickness now we
can supply different thickness objects
for different platforms and to make the
code cleaner we can use name parameters
in c-sharp so i OS new thickness also
you can see that thickness here is
grayed out so we can refactor this code
and remove it now compare this code with
what we wrote earlier we don't have all
these if else if else if the code is
cleaner and more focused so internally
in this method on platform you're
actually going to have code like what
you see on the top so this method takes
care of all these conditional statements
and returns the proper thickness object
based on the current operating system so
then we can get the result from this
method and assign it to padding we can
use this on platform method with pretty
much any objects in this case we are
interested in thickness in your
applications you might be interested on
an integer being different across
different platforms then you would
supply three integer arguments now as I
explained earlier this on platform
method also has a non-generic overload
let me show you how that one works so
the device that on platform
I'm going to use the non-generic
overload you can see here we have four
parameters and they all are optional
because they are set to null so let's
say I want to execute some code only on
iOS then I can supply the name parameter
here iOS and here I need to specify an
action so I'm going to use a lambda
expression for that like this now if
you're not sure what this all means you
really need to watch my C sharp Advanced
Course because I've talked a lot about
lambda expressions and actions there so
here in this block we can write the code
that we want to be executed on iOS for
example we can set padding to thickness
object
this is another way to set the padding
property also for discussions sake let's
say we want to have a different piece of
code to be executed on Android then we
set the name parameter action use a
lambda expression and here we write the
Android specific code so this is how we
use device done on platform method
whether the generic overload or the non
generic one as I explained before we aim
to use zamel to define the visual
appearance of our applications so in the
next lecture I'm going to show you how
to use on platform in Java
all right now let's see how we can set
padding using zamel so in the last
lecture you learn that padding is a
property of the page and we can set it
to a thickness object like this and
obviously this applies to all platforms
now if you want to apply this padding
using zamel we can easily do so like
this so for our content page element we
set the padding attribute to a string
literal now at runtime zamel parser will
get this string and give it to a type
converter which will parse this into a
thickness object and again this will
apply to all platforms now what if you
want to apply this only to iOS then we
need to use an element called on
platform on platform and this element
has attributes like iOS Android and so
on but the problem is we cannot use this
element as the value of the padding
attribute because these values as you
have seen so far are either simple
strings or zamel markup extensions but
they cannot be an XML element that's
when we use a special syntax in demo
called property element syntax let me
show you how it works
so first I'm going to remove this
attribute now inside content page
element I'm going to add another element
content page dot padding so I'm using an
XML element instead of an XML attribute
to set the padding property and that's
the reason this syntax is called
property element syntax because we set C
char properties using XML elements not
attributes now inside this element I can
either add a simple string
or I can add another element to
represent a complex object in this case
I want to use on platform element so I
can take this here and move it
right here now this on platform element
maps to a c-sharp class let me show you
so back in code behind I'm just going to
declare a temporary variable new on
platform so this is a generic class and
here we need to supply the generic
parameter so I'm going to use thickness
here now this class has properties like
Android iOS and so on now I can get this
on platform object and assign it to
padding there will be an implicit
conversion between on platform object
and thickness object okay so we want to
achieve the same thing in samo when
creating this on platform object we need
to specify the generic argument so we
use another attribute here X type
arguments and we set this to thickness
again to emphasize because this is
prefixed with X
it belongs to Microsoft namespace and
it's part of the standards ammo that was
first introduced in year 2009 so this
line in zamel is exactly like this line
in c-sharp okay now we need to set
properties of our on platform object so
back in sam'l for iOS I'm going to use 0
2000 and to refresh your memory these
numbers represent left top right and
bottom in the last video I refer to
these numbers as pixels but the reality
is it's not a pixel for now for
simplicity imagine these are pixels so
now using this technique I can apply
various padding on different platforms I
can apply another padding for Android
and similarly for Windows if you ever
need to so to recap this video we
property element syntax when we are
dealing with complex objects that cannot
be represented using simple strings
all right in this video I'm going to
show you how to catch and prevent zamel
errors so as an example I'm going to
remove this s here now let's run this
application and see what happens
so the application launches
terminate immediately and currently I
have no idea what's going on here in
situations like this the first thing you
should look at is application output tab
in xamarin studio I believe in Visual
Studio this tab is called output now if
you look at this tab you see we have a
sam'l parse exception the exception says
type on platform not found so basically
what's happening here is we don't have
an on platform type that is not generic
so this is one way to find the exception
another way is to run the application in
debug mode in Visual Studio you press f5
instead of ctrl and f5 and xamarin
studio
you press command and enter instead of
command alt and enter another option is
to press this play icon on the toolbar
so let's run this okay we got the
exception so we got the zamel parse
exception and the exception message is
type on platform not found now the
problem we currently have is that we
will not know these exceptions until
runtime and as we're typing Zemo it's
quite possible that we may make a few
mistakes here and there so is there a
better way to catch these errors yes
there is we can include our sample files
as part of compilation so they will be
compiled into intermediate language or
il and this has a number of benefits the
first one is that we can catch errors at
compile time instead of runtime the
second benefit is that because sam'l
files are compiled into il the size of
final assembly will be reduced because
these ml files will not be embedded in
the final assembly and finally
compilation of zamel files but slightly
optimize the load and instantiation time
for sam'l elements now compilation is
disabled by default and we need to
enable it but that's pretty easy let's
go to the solution under properties you
find assembly info and here we have
attributes that apply to the assembly as
a whole like the title the version
copyright information and so on we can
include another attribute here brackets
assembly : and this prefix means this
attribute is applied to the whole
assembly zamel compilation now we get a
red underline here because we need to
resolve the namespace so on top of the
file using xamarin forms zamel now the
parameter to this attribute is an
enumeration called zamel compilation
options the default value is scheme so I
want to set this to compile and that's
all we have to do now if I build the
application again look we got an error
and here's the exact same error we got
at runtime but now we're catching it at
compile time so this is a pretty good
attribute to always include in your
assemblies but just in case you need to
disable it on a particular sam'l file
you can simply go to the code-behind for
that sam'l file for example let's say we
want to disable this on greet page so we
go to the code-behind
import the name space using xamarin
forms sam'l and then apply the attribute
to the class sam'l compilation
compilation options skip all right we're
done with the basics of sam'l now it's
your turn so in the next lecture I'm
going to give you some exercises all
right now it's your turn I want you to
use what you have learned in this
section and build a simple application
like this so this is a cool application
we've got this bun on the top to
navigate through different quotes
and these are decodes by Einstein now
when building this application you don't
necessarily have to use the code I've
used here you can use simple string
values like quote 100 200 3 the point
here is that you have limited number of
cores in your application and as you
click Next when you get to the end of
the list and you start over we also have
this slider for changing the size of the
text so before you get started look at
the PDF I'm attached to this lecture all
the best and I'll see you in the next
section
[Music]
ok you seem to be very enthusiastic
about learning zaman forms so once again
if you're interested to take my seven
and a half hour course with a discount
click the link in the video description
I hope to see you in the course
[Music]