Introduction to Xamarin Forms Shell by Chris Miller || Lightup Conference

Thank you

All right. Thank you and welcome everyone to introduction to Zamorinformed Shell

I'm Chris Miller. I'm a software architect for Tyler Technologies. I can be reached on the usual social media things

Twitter as another lab. I blog at Rajapet.com. I'm on GitHub as another lab

And a lot of what we're going to be seeing today will be taken from my course that's on plural site using

Zamaranform Shell. So let's begin. All right, thank you all for donating

You haven't donated yet. Here is the QR code, just aim your mobile device at it and scan it in

I'd like to take a chance to thank our sponsors. Without this, we couldn't be putting this on today

We also have links for speaker and event feedback. Also scan your phone at each one

And I'm not sure where to get them after we're to the slide, but I'm sure they're going to be on the site somewhere else

So what is Shell? It's a new way of declaring page navigation within Zamaran forums

It was introduced in Zammer forms 4.0 last year. It's open source as part of Zamon forums and lives in GitHub

This is really handy because you can report issues and you can join in on the conversation for new features

It uses a hierarchical layout to lay out your pages, which makes it really easy to set up your page navigation

It provides a mechanism for your eye navigation to go from one page to another

It has a built-in search handler to make searching from lists to detail pages very easy

So why shell? Well, there was a need to be able to quickly define page hierarchy for an application

They've always had the master detail template, but was not enough. You can do a lot with it, but it takes a lot to get there

So Shell was designed around the fast rendering system that's now part of Zaman Forms

It's designed to go faster and take up less resources. So what makes up Shell

Well, we start off with a simple container called Shell. And in it, you can have an optional file menu, also known as the hamburger menu

You can have top tabs. You can have bottom tabs. You have shell content, which are the actual pages that will go into the tabs

And you can have menu items. Here's a sample flyout menu for a made-up application

It has three sections. Each section can be customized. We have a header section at the top

which you can use for branding. The middle section, which is the item pages

and then the bottom section, which is used for menu items. So the fly-out header is typically used

for branding and displaying information. You know, what your app is, your version number

and so forth. And you would use ZAML to define the layout

and the controls used. Here's a sample flyout header. You can see it's just a grid

It has, sorry, I went too little too fast. Go back. It has a grid and just a couple of controls on it

We have an image and then we overlay some text on it. Anything you can do in ZAML

you can pretty much put in your header. The middle section is your shell item template

and that controls the display of your pages to be navigated. There are bindable properties for icon and title and this is usually defined in the zamel So what we have here is a sample shell item template

The first column defines the look of the icon. The second defines the look of the text

And this is where you can, you have all the room for stylizing anything you want for your

make your menu look. If you're supporting a right to left language like Arabic or Hebrew

the layout will not be localized. localized. The menu will come in from the right side of screens to the left side, but the icons will still be on the left of the text. If you need to swap the columns for left to rights support, there's a couple ways of handling this. You can set the column list and the grid column attributes in code, or you could data bind them to a view model that checks the flow direction at runtime

And here is sample data template to define the pages that are navigated when the user selects an item

So for each page, you have a title, you have a flight icon, and you have the content template

Using a data template, the page is not instantiated until the first time it's called

This allows a shell to start up quickly. Here's a slight variation. We're using fly-out display options set to as multiple items

And when you do that, your pages are grouped together. So in the hamburger menu, there'll be a top and vertical bar above it and below it

and then they'll be displayed with bottom tab. to indicate which page

Here's your first page and your second page. When you play, sorry

when you place multiple shell content classes inside a tab class, you get top tabs

where each reach title would be the name of the tab. And when you click on each tab

will go to each individual page. When you have multiple tabs, you're creating bottom tabs

and these will appear at the bottom of the page. the bottom of the page. And this is how to do both top and bottom tabs

The controls defined by the tab class will be the bottom tabs

The controls defined by the shell content class will be the top tabs that appear inside each of the bottom tabs

similar to the shell item template. There's just a slight difference for the name of the binding

properties for both the icon and the text. So here, instead of binding to flight icon

we bind to icon. And our text is bound to the text property

With the menu item, you can use an on-click event to define the action for the menu selection

Or you can use data binding, sorry, and bind a command to the item

Routes are registered, let's talk a little bit about URI navigation. Routes are registered in the shell template and via the register route method

You chain the routes to form a navigation hierarchy. The same page can appear in multiple routes, but the URI must be a unique path

And the URIs usually have three components. You have the route path, the page, and then a query parameter

So here's an example. Wack, Wack route, Wack page, question mark, some parameter equals some value

This makes implementing a search feature very easy. So to implement to actually implement the search the UI support is built in We just need the subclass to search handler class And within the search handler class

we over-guired the on-quiry change and the on-item selected events. So inside the search handle class, in on-quiry change

it gets past a value that the user typed in. With an in-our-code, we will set item sources

to an enumerable t-list of the items that match the search. list of the items that match the search criteria

When you exit on query change, Shell will display a selection list that uses that item source list

When you click on an item from that selection list, on item selected will be fired

This allows you to take the selection and call page with that information

Here's a sample on query changed event from a search handler class

It gets passed in the value that the user typed in as new value. First thing I like to do is check to make sure

that they haven't typed in spaces or null characters or anything non-printable

If it's not null, if it's null or white space, we said item sources to null and then we just return back out

Otherwise, I usually convert it to lowercase because I usually put do case insensitive searches

And then I just get a reference to my data store. And then I'm just going to do a search on that on that data store

And I'm just going to compare house type and address to whatever the user

passes in. And then we'll come back with an innumerable list they get past item sources

And we get a selection list. And if the user clicks on anything in selection list

on item selected gets fired. Excuse me. So the first thing we do is we set item source to null

because we're done with the list, we don't need it anymore. For iOS and Samar Inform, we have to implement a slight little

we have to invent a delay as a workaround. There is a bug. It's still in, it's run out version 4.7

of shell and it's still there. Without this little delay, the item selected event will just fire so quickly

nothing will happen. And then what we do is we use the URI navigation

and call go to sync from the shell and go to slash houses

slash house ID and we're passing in the ID value of the house that we found

And before we get into how we've process that I'll show you how you add the search handler to the page

It comes to Shell, and you just add the search handler class and Shell will build in the UI for you

So right above the content, you would put in shell. That search handler and then namespace your search handler

And then you can just set placeholder to whatever text you want appear in the search field

Set show results to true. I've never been able to figure out what that does, but you do need to

you need that in there. And display member name. That will be the field

that actually gets displayed in the search list. You can customize it

So if you add in a item template, you now have a data template

and then you can define what you want to appear in the search list

So in this case, for each row, we're going to have a grid. We're going to bind, we're going to have an image bound to it

and we're going to have the address field. Now I can show you how we handle the query parameter

We use the query parameter attribute to bind the parameter to the view

I sorry the query property attribute to bind the parameter to the view And then we add a setter method to the parameter to load up an instance of the view model So attribute we saying ID is going to match ID

And then what we're going to do is we're going to take that value

search our data store, and come back with a matching house model

Once you find that, I have a method in my view model where I can pass in the house

and they'll come back with the view model, with a view model and we set that to our binding context

And that's all we need to do. Now we're do a couple quick demos

And let me bring up my quick version of it. All right, so what we have here is our App Shell

And we're going to create a series of menu items in the hamburger menu

Burger menu to show the different ways you can do the layout. We're going to have a couple single pages right here

We'll do this multiple item. We'll do the top tabs and we'll do the bottom tabs and then finally top and bottom

So I'm going to bring this up on Android. All right. I did have extra material prepared in case there were no questions

So let's just keep on going. So one. So when would you use shell

If your app uses a standard layout where you basically have multiple pages where there's a toolbar at the bomb top flat menu

Shell has all that for you and makes it really easy. If you're doing a new development like a news name informs app

using Shell is probably the easiest way to get up quickly. In fact, going forward, that will be the default template

And more importantly, if you want the app to have the same look and feel on

Android and iOS. Shell makes that really easy. They handle everything for you for that

And there is a way to add some style. You're not limited to what comes in basic templates

You can get your own little styling. We saw that you have customizable templates for the fly out

header for the shell, the menu, and the search results. You can control the fonts, you can control the colors

layout, all of that stuff. You can even go. You can even go deeper under the hood and use customer

renderers. If there was something you wanted to show up in that menu and it's just not supported, you can override it and put it

put in your own. Hopefully you wouldn't have to do that because it just becomes more work to support. But that's available to you right out

the box. Also the font icon support that was added in Zamora and

forms four makes it really easy to add scalable icons. So all the

images in your fly out menus, you didn't. Instead of having to have different bit maps for different sizes

you can just use the icon fonts and you just have one. There are multiple sources for icon fonts

I like the ones from material design icons. Font awesome is also well is also really good

If you have a lot of your own vector images and you have a design

department, you can actually create your own font and put everything in there and you have one simple resource

Now way they scale and you can color them and it just makes things much easier

And there's also a new get package, Zamonforms visual material that will make the iOS

renderers look a little more like Android's material design. Now we're back to questions