welcome to the mobile widget session in this session the number of topics that
we'd like to discuss include answering the question of what is a widget talk
about the toolbox which holds all the widgets and patterns and then look at
two different sets of widgets there are some basic widgets and then what we
might refer to as the input widgets so we'd like to discuss each of those and
look at some examples of how those work so what is a widget well a widget is a
simple building pattern that represents some basic screen component and all of the
widgets can be found in the toolbox so what can the widgets do well a lot of
the basic widget widgets do things like lists navigation displaying content or
creating pop-ups and then there's another set of widgets that are more
input related and these are form and individual inputs so why do we have
widgets at all
well the widgets are common components and they are highly reusable so these are
sort of the building blocks that help us build our user interfaces and when we
did an analysis of all the applications that are out there in the world that are
very popular there were a number of built-in widgets and composite patterns
that kept popping up so it was important to go ahead and have those available if
we want to be able to be very productive and create sites very quickly
so to be able to do that we've created a number of widgets and we placed all
those widgets on the left-hand side of the editor area and we refer to that
area as the toolbox now the toolbox area is searchable so you can find any of the
widgets or silk UI patterns that you might be looking for but in general
there is a divider and the divider allows us to kind of see that there's an
area for widgets at the top and an area for patterns at the bottom
so that sort of gives us a divider and if you hover on top of any of the
widgets or patterns that will tell you what they are so it's very easy to kind
of get an idea of what you're looking for and then to be able to use the
widgets
well we would just drag and drop it and if we drag and drop it from the toolbox
onto the canvas or in this case the sort of representation of the device in the
canvas then as we drag and drop things we'll be able to begin seeing blue
guide bars that show us where we can drop that particular item sometimes our
user interface that is trying to display how things will look makes it very
difficult to see exactly where that widget is going to be placed so as we're
doing that the right-hand tree area switches into the widgets area and here
you can see that we would know that we're no longer trying to drop this
block in the header because now you can see the blue line showing that it's
going to be in the content area and it's going to appear just above the list so
as you begin dragging and dropping you will see the widget area activate and
you can begin trying to place things here and see where it's going to go by
looking at the widget tree the right-hand side now another way to kind
of try to select a particular area to place it in is to think about where it's
going to go ahead of time and then you can begin looking at the widget
hierarchy at the bottom and you may want to select these to highlight something
before you pick something out of the toolbox and then you'll know exactly you
know where the divider is about where to place it because choosing something from
the widget hierarchy will highlight it and make it easier to kind of see
so we now know where the widgets are they are in the toolbox
what are some of the widgets that we might work with well the very basic
widgets are simply a container which you can think of as a div and expression
that is almost like a variable so when we put an expression in anything that we
can get out of the expression editor would be able to to be available in an
expression we have a list that's going to be able to create a scrollable list
of Records and inside that list there will be a list item another widget that
we would have is an if so that we can decide to display one thing or the other
depending on the type of condition that might exist we also may want to have a
link that will link us to some sort of destination and sometimes we want those
links to kind of just be text based but sometimes we want those links to be a
little more interesting
so maybe we'll put an icon or an image and relate them to the icon or the image
we also have the capability of adding custom HTML at any point inside of a
screen and then creating our own blocks so we have talked about themes and
things like that having blocks we can create our own custom block to be able
to do that there's also a button group widget which shows a number of buttons
that allows only one to be selected at any given time we also have a popover
menu that gives us a number of different sort of menu options including just a
pop-up window and then a special control that allows us to go ahead and upload
files to the server whenever we need to so those are some of the basic types of
widgets so they were probably 12 to 15 widgets how many of those widgets do you
think we might need to actually be able to build a simple to do screen like this
well let's begin looking at some of the things that are here we probably can see
that this is a button bar across the top we have some sort of list we have some
icons so let's try to break down the screen to see what might be available
here
well by default we can put in containers pretty much wherever we want but over in
this area where we're trying to add a a new to do we may want to have a new to
do container and that container actually has an icon inside of it if we select
the container the container can have a name and the containers are really nice
because it allows us to control the width and the margins and then we can apply a
style to the container and it will apply to everything inside of it and
occasionally we want the container because we want to be able to create a
click that when we click on that particular container anything inside the
container that whole area becomes active instead of just one individual place so
we also have the icon the icon is inside the container we could have put in an
event to click on the icon itself but the icon being a little bit smaller
maybe we wanted on the container to go ahead and give us more area the icon
itself may have some sort of style associated with it and it does have a
size to go ahead and change just how big those icons are going to look and
then we could wrap that whole thing in a link and then that link could have
some sort of confirmation message to make sure do we really want to go to the
next page those links can either be enabled or disabled and visible or
invisible
but with the links there will always be some sort of on click event so instead
of being optional it's preset and that on click event will typically go to a
destination so that it makes sense for us to go ahead and link and navigate to
that area when we do those links there will be some sort of transition now our
app has a default transition described for it in each part of the module so the
module has this and in this case we're just using the default transition that
would be available so we had you know a container and icon and a link just in
one particular area across the top we do have a button group and here you can see
the button group is made up of four buttons so the button group can be
renamed and in this case it's priority group and then we have four button group items
so those button group items change between high medium low and all that we
can see here and what happens when we click any one of these the group will
automatically call PriorityGroupOnChange so we may want a reaction to
occur and in this case because we're looking at a list let's filter the list
based on the priority so we would call PriorityGroupOnChange refresh the list
and go ahead and be able to see what's going on now inside those button groups
there are button group items and those button group items can be styled
differently so here we chose to change the colors depending on the type of
button that we're actually using so all of that can be customized which is quite
nice now below that there's a list and we can already see that inside of the list
there's a list item so the list will have to have some sort of source data to
allow us to go ahead and create the list and here it says do we want to animate
the list so if we change the list add something to or remove it will the
animation occur so that we can see something has changed so that's
definitely an interesting and good thing and in this particular case whenever we
create a list there is a list group style to go ahead and be able to create
the list of information that we're looking for lists also have an automatic
event with them called onscroll now we don't have to setup and use the OnScrollEnding
ending but if we use OnScrollEnding ending that means that it can load a certain
amount of data and then when it gets to the bottom it will load more as needed
so that can help us with performance and overall usability now inside those lists
there are individual list items and here you can see we're sort of implying that this
list item can be swiped and that it would then allow us to either select
done or automatically make it done with a fast swipe so in this case when we
look at the list items it says do we want a full swipe left and this will
full swipe right to go ahead and activate whatever the action might be
there so the list has list items inside of it and you can see that down
below there may be list item actions that are actually going to occur also for
this particular list item if someone just touches it in the main area
what do we want to do on clicking or on touch to actually make that item happen
so we may go to the details but when we swipe it we go ahead and complete it and
make it finished so the list item actions will show up and they have their
own area it's part of the overall swipe it can have its own style and it can
have its own event and in this case on click we can swipe it open and then
touch it which would be the on click event but if we have full swipe left or
full swipe right set it would also be able to automatically do that when we
swipe across that takes us to inside the list and inside the list there is a block so
here we've created a little block this block has the capability of showing the
details of a particular to do and when we're working on the to do the to do
has this priority we might be able to change the priority and it has a star
inside of it as well we might be able to change the star so when we create a
block we have to be able to define what is going to handle the changes that
might occur that could affect the parent so if our parent list and sorting may
need to know that information we have to be able to provide it
so blocks will often interact with the parent in this case the list and it's
important to be able to have those changes have some sort of client action
to handle those changes now here we see the block itself with the different
types of priorities and the different types of
importance as far as whether it's start or not so the to do block itself sort of
acts like a normal screen or component that we might be working with now inside
of this block we're using an expression and the expression is just getting this
particular to do's title so we're using the expression as a variable we were
pulling back all of the to do content and when we passed in the to do to this
particular block we put the title in the middle of the to do and then there's an
if if this is starred so if this one is an important to do we'll show the
activated star and if not we'll show the empty star and when we work with the if
tool if widget the first first . will actually show both the next would only
show the true choice or show the false choice so we have the capability of
changing those and the if needs to know what condition will go ahead and set
whether it's true or false
so it's a typical if type of thing but this isn't if that is related to the
user interface so those are some of the basic widgets we also have a lot of
input widgets and when we talk about input widgets we would be thinking about
having a form we would then have some sort of input coming into the form and
this would be just regular text type input we might have multiple lines of
text so we want something a little bit bigger and we can have a label that
might be related to the input we could have dropdowns checkboxes the checkbox
and the switch are very similar as far as in between two different options and then
if we were getting ready to submit all of the information at once we may have a
button to go ahead and be able to do that
so if you think about setting up some sort of form where we're going to define
what a to do is we would have a title a date some sort of note and text area
whether or not it's complete what its priority is and some sort of label to
describe what it is
so here we have the Save button so we have a fairly large form and that form
has lots of containers those containers would actually be holding all of the
different input widgets so if we expand that a little bit more we can see that
the title has a label and an input title that would just be regular text so
there's the title widget we would be using the input widget here for the
notes we have a larger text area widget we have the switch we have the drop-down
that has different types of labels and we're using the button so as we begin
building up these pages these individual widgets are truly fairly basic building
blocks that we will use very often so it's important to sort of get used to
the widgets and and feel comfortable with how they're doing what they're
doing so in this session we talked about what a widget is we looked at the
toolbox and generally how to work with the widgets and find the different
widgets and patterns that we need and then we looked at examples of the basic
widgets and the input widgets but you'll need to spend some time and work with
these to get more familiar with them and be able to get them to do what you want
them to do but since they are basic they're relatively easy to work with you
just drag and drop them and set the set the parameters