welcome to the blocks and events session in this session we want to define what a
block is how to go ahead and create blocks that become custom screen
elements and we want to talk about block interactions when a block is being
contained in its parent it needs to be able to receive information about things
that have changed regarding the parent and if something changes inside of the
block
we'd like to send a notification or trigger an event that will be handled by
the parents so that the parent will know what is happening in the block so
basically these interactions are creating communication in between the
block and whatever the parent happens to be so if we try to define what is a
block it's a container and it's defining some sort of custom-built screen
component so when we start with a block it's basically empty and then we can put
inside of that widgets silk ui patterns and other types of blocks and we can
build up whatever we need
so it does become that completely custom built screen component that we might
want to have the ability to create now blocks are allowed to respond
to life cycle events and they need to because a screen is going to go through
its normal life cycle and this block is now a a smaller component of the screen
and the block itself is going to go through the same thing because it needs
to be initialized it needs to be made ready so that we can have access to the
DOM and then it needs to be rendered and whenever the screen that it's part of
gets destroyed it would get destroyed as well so all of the lifecycle events that
apply to screens also apply two blocks so the blocks are going to be placed
inside of screens or inside of other blocks and whatever the blocks parent
happens to be it can receive input from that parent and if that input were to
change after we originally received it
we'd like to be able to react to those changes in the input
parameter from the parent and again when something changes inside of the block
that may affect the parent we want to be able to define an event and trigger that
event and then it's the parents responsibility to be able to sense that
event and have some sort of reaction to it so the event will definitely be sent
to the parent the question is will the parent do anything with that event so let's
look at a practical example so this makes a little more sense
here we have our to dos and we have a list of to dos and the list of to dos
is instead of just having the list handle itself we have a to do block that
is inside of the list so here you can see this to do screen has the common
layout and inside of the content area we've created a list that has a list item and
instead of putting a bunch of things in the list item directly we've put a to do
block inside of the list item and what this screen is defining is that yes i
understand that inside of the screen we have a place where the content is being
used that the source block is going to be a to do block and that to do block is
taking in a to do structure or element and in this case it is just the same
definition as the entity now below this it says because this block has the
capability and it's great out here this block has the capability of throwing a
priority change and a star change so when we drop and place this block inside
of the screen it immediately can see those things are available and then has
to define the handlers to be able to handle things that that to do block can
do so because the to do block can change its priority and it can change the state
of the stars or importance of this particular to do this screen needs to
have handlers so this is the to do screen
so it's calling the to do priority change to make sure that this to do
screen can handle that change from the block that we are containing and the
same thing for the stars
so that's all the things that this screen is doing to define that the to do
block is there and how it's going to interact with it if we look at the
to do block itself the to do block itself has an input parameter and here
is the entity structure of the to do and then it defines two events that can
occur a priority change and a star change so if someone comes over to this dot and
changes the priority from low and green to medium or high or someone changes
this from unimportant and not starred to starred and important than those events
would we would detect those changes we would need to make the change to the to
do itself and potentially save that and then once it's saved basically kickoff
or trigger the event so that if anything in the parent needed to be able to react
to that it could so our to do has its structure and has the events that it can
throw this priority on click and star on click are actually the actions for these
two things to be able to change so if someone clicks on these icons and has
the ability of changing them then we need to react to that
so here we can see kind of the structure of the to do itself and the to do has a
list item content block inside of it so this is a silk ui block so our to do
block is using a silk ui block inside of it and then it has the structure of the
the icon on the left for the priority which is just the circle we have the
title and the due date as expressions and then we have an if container to show
whether or not it's truly is a star and an important to do
now down below this is where we can see the to do definition itself we can see
the full to do life cycle and we see that in this particular case we're not
doing anything special inside the to do life cycle and we're also not
setting any actions to occur when parameters change so this is sort of
making the assumption that in the parent screen
nothing's going to change as far as the to do itself otherwise we would
need to be able to react to that change and we need to have an action to be able
to handle that
so there's nothing if we go back and look at the to do screen all of the
edits that could occur are going to occur in the to do block the only thing
that could occur is we could swipe the to do and say that it is done but it being
done might remove it from the screen because it would now become a completed
to do it wouldn't be just in the list of to dos but that won't actually change
the way that to do block is going to render things because once it disappears
from the list
there's nothing that's going to change inside of the block to be able to handle
that
so again we have all of the lifecycle events here and we don't have anything
defined because the block isn't really receiving any changes from the parent
that it needs to be able to react to now there is this icon if we want to go
ahead and set an icon and potentially make this block reusable by making it
public if we do those things then this block can actually appear in the toolbox
because the toolbox will once we have a default icon will be able to display
this particular block specifically and it will know what it looks like so if
we're creating a block that could be reused in many screens or in many places
we can give it a custom icon and then get it inside the toolbox to make it easier
for us to use
now what happens if someone clicks on the dot to change the priority if we
want to go ahead and change the priority that on click we'll go ahead and kick
off the PriorityOnClick action inside of our block and the first thing that the
block wants to do is go ahead and change the priority so if the priority was set
to low it will change to it medium if it was medium it will change to high if it's
high it will move back to low so it's just cycling through the priorities it sets
the priority and then it updates the to do in local storage so it says let's
save off exactly what's occurring and we'll do it here locally in the device
we can sync later if we need to but we we are updating it locally and then the
next thing we need to do is trigger the priority change event so we throw the
priority change event that has been defined and then the second that this
occurs
now the parent will get notified of this event being triggered and it will
potentially need to react to that
so if we go back to the parent this is where this to do priority change is its
own action so this is an action that exists in this screen not inside of the
block and the screen is going to go ahead and react to the priority
change now if we we're filtering this list and we're filtering for all of the
low priority things that started as a low priority if someone clicked it it
would become a medium priority and we wanted it to disappear from the list so we
can either in this action do some sort of list manipulation to make sure it
gets removed or gets changed depending on how it has to or because this is a
list and there's lots of data we could just refresh the list with the newest
data and that medium one wouldn't be filtered out because we're filtering on
the low so when we think about blocks it's nice that we have the capability of
creating these custom blocks and then placing them inside of screens or other
blocks but anytime we have a block and there's input coming
in things could change we want to be able to rebuild we want to be able to
react to changes in the things that came in and anything that happens inside the
block needs to communicate back so we have these handlers and notifications
going back and forth and that's why blocks and events are so important to
each other and why we've put them together here
so in this session we wanted to define what a block is how we could go about
sort of building up a custom block and we've spent a lot of time talking about
how those interactions can occur when parameters that are inputs to the block
coming from the parent might change and when things change inside of our block
how we can trigger events to make sure that all of the parents would know that
something has changed inside this block so this can be a very nice thing to do
be able to create your own block and gives you a lot of flexibility to create
really nice UIs and have a lot of control over how that works but because
those components may need to communicate back and forth it's important to
understand how the blocks and events interact hopefully this session has
helped you understand that better