Mobile Themes and Templates
Silk Themes
This lesson is part of the Developing OutSystems Mobile Apps course.

Welcome to the mobile themes and templates session. In this session
we'd like to cover a number of topics, including the Silk UI themes and templates
that are available which would be the phone, tablet and universal. We'd like to
talk about the properties of themes and each theme has layouts, so the layout that
is available for a theme defines the different types of components that are
in that theme, and that theme is then supported by different types of common
user interface elements so we will talk about all of the different pieces that
make up the themes that help us define the look and feel of the screens and the
user interfaces that we create. So ,we've mentioned that there's the website and that the templates and themes are available in
the main link at the top, so we can get to the phone template and the tablet
template download those and be able to use them inside of our OutSystems
server. So as we begin creating new applications one of the things that will
happen is it will ask you to select a template for your app, so if you choose a
mobile application it will say do you want a phone a tablet or a universal
template, and it will go ahead and define that as the theme that it's going to use
from that point forward. So once Service Studio opens and we begin to look at our
module if our module was the ModuleName so here we have a module called
ModuleName there are a bunch of defaults inside of the module that help define
its look and feel and the way it's going to behave so here you can see the theme
gets the exact same name as the module so our module's name is ModuleName and
our theme gets that exact same name it does say that there is a default screen
for this app and that's the HomeScreen in the MainFlow
there's a Splash screen for this app in the Common flow, and inside of the Common
flow there's an exception handler that handles all the things that might occur
default transition and a default time out of 10 seconds for any type of server
There are also validation messages and other types of things but when we think
about the look and feel of our app a lot of that is defined by the module and
how it's going to work and a good bit of that is which theme are we using for
this particular module. So if we look at the theme's properties if we weren't
looking at the module itself but we went down to the theme which is called
ModuleName. The ModuleName has the base theme that it's based upon as the PhoneTheme
and you can see that this ModuleName theme has its own style sheet. It has
a grid type which is fluid but it's inheriting that from the PhoneTheme and
then it has a particular type of layout so when we create a new module it gets
its own theme and that theme is basically defined by the Styles, the grids, and the
layouts of how it is set up. Now in this case it's basically building upon the
PhoneTheme, so themes because they're based partially on styles do cascade so
in this particular case we built a module called ModuleName and it's based
on the PhoneTheme but if we actually went in and looked at the PhoneTheme
itself which is available under themes under the mobile patterns, the phone
theme is based on the BaseTheme so there is a BaseTheme that we can base the
phone and the tablet types of templates upon, and then those phone and tablet
templates or themes can be extended when we create our own modules. So that same
type of cascading thing that we may be familiar with in cascading style sheets,
because part of the themes are stylesheets, we get that same type of
So how would we get to see the style sheets that are helping define our theme
well if we came in and we wanted to say since our module's based on the
What does the PhoneTheme's stylesheets look like? Well we could get to that
relatively easily by double-clicking on the style sheet and it would open the
style sheet in the style sheet editor and it would show us what the PhoneTheme
looks like. There's a lot of different things in here there's some setup for
text and image formatting, there's some layout of the pages controls for buttons,
and forms, and different types of validations, and then all of the widgets
and silk blocks and patterns, as well as utility classes and colors. So the base
theme in this case the PhoneTheme which isn't the actual BaseTheme but this
BaseTheme for us has quite a lot of definitions about what is out there and
we could get to that either by looking at the theme itself but for each screen
the screen is going to be inheriting the theme of the application so the theme
defines the overall look and feel here we can see a HomeScreen and it has some
sort of default look and feel, it's got blue header and things like that if we
wanted to see how this HomeScreen's styles have been set up
we can either click inside of the editing area at the top where the style
editor is or we can just double-click on the Styles down below and it will go
ahead and open a set of tabs and in this case what we showed before is that the
HomeScreen is part of our module. The module is basing its theme on top of the PhoneTheme
which is based on top of the BaseTheme so if we want to start at the
bottom and look at everything that's there we could see all the types of
elements that are defined in the BaseTheme we'd then be able to step up and
look at the PhoneTheme and see what the phone is overriding and changing in the
BaseTheme, how it's extending it, and then we could get to the module and this
is where it can tell that we're customizing the PhoneTheme
and because when we created our app we chose a color so the primary color here
is now available and it's available both for the links and the menus and the header
area so it begins customizing the default PhoneTheme to be able to do
things. Now one thing that's interesting to note if i go back for just a second
the PhoneTheme is grayed out and has green text both the PhoneTheme and the
BaseTheme are part of the overall templates and we can't edit these directly
what we can do is inside the module override or change some of the
capabilities for the phone or the base theme and define those here, and then
above the module each individual screen could customize some of what's happening
and we could go ahead and do that here so we can customize anything because
we're inheriting everything off of the ModuleName and then we could customize
those pieces here. So lots of interesting things happening in the Styles. Now let's
talk about the layouts so we said that the themes are sort of defined by the
styles and how things are going to look as far as look and feel with the colors
but also how does the layout work and we can see that the HomeScreen by default
with the theme that we've chosen gets the Common Layout, and the Common Layout
has a title area some header areas and then a Content area so the HomeScreen
has this basic layout where there are some placeholders for us to put
different types of content. Now the layout itself, is a layout block so again
if i go back real quickly you can see that the common layout is a block that
is going to be definable and when we open that layout block which is from the
Common area you can see that there are a lot of different things inside of it.
There are variables to configure how it works there are actions that control its
life cycle and help with some of the event handling and then there are these
placeholders where we would be able to put content and then the description of
the Layout block below shows the different types of life cycle events
that can occur and whether or not we want to interact with any of them and
you can see by default the Layout does worry about the On Ready event that is
inside of the life cycle of the screen so the Layout block has a lot of
information about how it's going to sort of do its work. If we open the Layout to
see given this layout where are all these placeholders and information.
The Menu is at the top so the Menu is a Common block that goes ahead and makes
the Menu available now what we see here is actually the Menu icon so the Menu
will slide out because it's a page overlay when we go ahead and interact
with the icon, so again these are Common elements, there is a utility on the page
that says if someone sort of pulls on the page it will pull to refresh so
that's been built into the overall layout the BottomBar can be used to
store things and maybe put icons for navigation and then below everything
there's an OfflineDataSync block so you can see that we begin using the
Layout block and we use other blocks inside of it to go ahead and build up
the overall functionality of the page so the HomeScreen inherits lots of things
like PullToRefresh and data synchronization and the menus and the
icons. So the layout gives us those capabilities. If we wanted to see some of
those individual blocks those blocks are in the Common UI flow and you can see
that the Layout that we've been working with does have access to the menu and the
menu icon blocks the BottomBar block this OfflineDataSync block
so these are all part of the Common area if we want the icon will change from the
hamburger to go back when we begin navigating so there are menu actions
that are part of the menu icon and the menu icon is helping us control the Menu.
The menu is that overlay and this would slide out and it will allow us to
see by default information about the user potentially login and logout at the
bottom and then in here we'd be able to put all of the different screens we'd
like to be able to navigate to, from the menu, so we have to customize this and
add things to it but there's lots of things that are available and we
can customize the way the menu's going to render and look it has a lot of
different variables and it can react to different types of gestures so there is
some ability for us to kind of work with the Menu in and customize it if
necessary. We also have the BottomBar block which is down at the bottom, but
when you double-click it opens that small area up at the top of the editor
and the BottomBar is going to be able to hold different types of information.
By default we would use the mobile pattern from SilkUI called the
BottomBarItem and the BottomBarItem gives us a place to put an icon and some
text so that we can quickly go ahead and create these items and then probably add
links to them so that we can navigate to different areas from the BottomBar
because that's where people sort of have the easiest places to reach with their
thumb and and some of the navigability of working with the phone. Now the last
piece is the OfflineDataSync block and this will help us when we are offline to
go ahead and if we're storing things eventually when we get back online
we're going to want to be able to do synchronizations so this block is a
fairly complicated block that has a lot of interesting information about it and
there's a special section just on this because it can do things like detect
changes in the network and then trigger whether it
should do synchronizations or not so these blocks can be a little bit
complicated just on their own
we're getting all of this built into the Layout because we chose a particular
theme and template. Now you may be saying I want to design my own page and I don't
need all of that stuff.
Well those blocks are there and you can reuse them at anytime you might need them
so instead you may wish to use what we call LayoutBlank, and LayoutBlank only
has one set of capabilities built in and that is the OfflineSync block
so the LayoutBlank is completely blank
it just has a container at the bottom holding the synchronization capabilities
and if you really didn't want those you could you could go ahead and create a
even more blank layout but this is nice to have and you can configure the data
synchronization to happen when you want
so this is truly the blankest and simplest type of layout that you can
work with so you may choose to go ahead and do that. Now there are some other
Common UI elements so we did look at the Common UI area and we looked at the
layouts with all of these other blocks that are available to us, and you can see
all of those here so if we opened up the Common UI it would show us all these
blocks and the ability to redirect to different URLs but there are also three
screens available the Splash screen the Login screen and the InvalidPermissions
screen and some exceptions, so those are also sort of made available to us as
part of the setup for our themes and templates, and when we look at the exceptions
there is a communication exception so that if we don't get information back
from the server during that timeout we looked earlier we said the timeout was
set to 10 seconds by default, then it will go ahead and throw a communication
it can catch all of the other types of exceptions and it also looks for
security exceptions so if you try to get to a particular page it can check your
user Id
and you may not have permission to be able to get to that page and if you
don't we'll end up on the invalid permissions page so handling the
exceptions is useful and we should have a sort of highest level way to handle
that and that's what we have in our Common OnException area. Now we also
have the different screens for a mobile app you'd want a Splash screen you
probably want people to login so you need a Login screen and then again if
security occurs you want to be able to say hey you don't have permissions to be the
required screen go back and login and change things they may be logged in as a
different user but here we have a Splash screen that will show us loading the
application and the resources will have the ability to log in on the Login
screen and then get the security exceptions from the invalid one. Splash
screen is is relatively simple it will go ahead and track loading all of the
resources that it needs it will also show the progress on updates so when we
upgrade an application and make changes to it if we're not changing significant
parts of the structure it will automatically upgrade the app itself so
we'll also show us the upgrading status of how it's working for the phone
theme we may wish to login so we have a default login and once we have the
ability to log in the login screen will call the server and make sure that we
are authenticated as far as who we are
there is this little eye that will show us the password so that as you're typing it
in if we can't see it and we seem to have typed something wrong we can go back
look at that and when we think about logging in
once we login we do want to call the server so here's a do login server
action but once we log in we may wish to synchronize all the data because we may
been offline or doing work and we may wish to then make sure that we are in
sync with the server so to do that once we log in it will check the offline data
configuration to see whether or not we should sync when we login, so one of the
settings that can be set is automatically sync when we log in and if
that happens then we will call sync on login to go ahead and do that and
syncing on login calls our OfflineDataSync capability and as long as we sync
successfully it will take us to the next page that we had asked to go to, during
the login process. If it doesn't work properly and we have some sort of
exception it will automatically log us out so if we have it configured to sync
we login successfully but we don't sync successfully it will still log us out
and give us the exception message of what went wrong and then finally we
talked about the InvalidPermission screen where it's just going to show us
the blank slate saying you tried to get to something and you are a registered user
or you're an anonymous user and you can't get to that information.
So in this section on themes and templates we looked at the properties of
themes and templates which include the style sheets that help define how it's
going to look the layout the structures the overall pages, and then some of the
other things that are available from the theme like the Splash screen and the
Login screen so there's a lot of information here and the theme gives us
a great head start with all of these resources but it will take some time to
get familiar with and get comfortable with these resources so it's important
that you go back and work with these and look at them a little bit more so that
you're able to use them very effectively.