CARL FRANKLINE:
Hi, I'm Carl Franklin. You might know me
from Blazor Train, or The.Net Show, or even
before that from.Net Rocks. I'm here with Don Wibier from DevExpress. How
are you doing, buddy? DON WIBIER:
Very good Carl. Very good. CARL FRANKLINE:
I wish I was at Build and wait a minute, maybe I'm at Build. I don't actually know
if I'm there or not, but we are here and we're
going to talk about taking a Blazor app and
migrating that or using Blazor components
in a Maui app. Blazor goes everywhere and it
even goes into a Maui app. You can build Maui
apps with XAML, or you can build Maui apps with Blazor and you get
all the benefits of the Blazor
component model like the easy binding
and all that stuff. XAML is a little trickier, but here's one caveat
that I learned. You can't on the same page
combine XAML controls and Blazor controls because they are two totally
different systems, but you can have XAML
pages and Blazor pages, and you can navigate back
and forth between them. This is all stuff that I
talked about on The.Net Show. But you have a demo here,
a Blazor application, and you're going to
show us how it works, and then we're going to see
it in use in a Maui app. Tell me what we're
looking at here. DON WIBIER:
Yeah, absolutely Carl. We have obviously a set of very nice Blazor controls but we also have a
set of Maui controls. I'm going to show you how you have a Maui application
and how you can incorporate your
existing application which you build on Blazor
into this Maui application. It's absolutely cool. It will save you a ton of work. CARL FRANKLINE:
Sure. DON WIBIER:
Yeah, let's have a quick look. I have set up a small Blazor
server application here. Let me quickly run it. We'll have an idea of
what we're looking at, and here it is. What you see here is a page that holds our
DevExpress data grids. We have some grouping enables and it shows a list of issues. CARL FRANKLINE:
Very nice. DON WIBIER:
In this case, we have a click mechanism that once you click
on one of the items, to go to another
view and you can see the details of this
particular issue and here we can go back. CARL FRANKLINE:
Okay. DON WIBIER:
Yeah, so then we have a couple of things which are out of the
box in the Blazor data grids. Well, let me find one. CARL FRANKLINE:
Make sure that you picked one where those
things are little. DON WIBIER:
Yeah. CARL FRANKLINE:
Prior we go. DON WIBIER:
This works out of the box here by
just enabling it. What we also did is that we have a grid which has a
number of columns. You can actually
customize that and show or hide columns or
change the order. CARL FRANKLINE:
Nice. DON WIBIER:
This is all standard behavior. I won't go over too much into detail over
how we set this up but there are a couple
of things that are important to mention and that's why we're going
back to Visual Studio. As you can see, we have the
server application and I also have a shared project. The shared project is actually
a razor class library. Because what we did is, and that is something
that you can also do with an existing Blazor application. You can move your
components out of the application project and
move it into a class library. Because what we did
is very simple, we have a grid control, and that determines
whether to show the grid details
or the grid list. These controls are also in here. The list is holding the grids, I had a DevExpress data grid with all the settings
and everything in there. A couple of things are
interesting to mention, but you will see that once we import this into the Maui app, yes, it's a typical and
invisible component basically a Blazor
component which allows us to bind certain breakpoints
off the device to a property. CARL FRANKLINE:
Nice. DON WIBIER:
What this basically does is that whenever the browser that runs the application has
a max with 400 then it's going to toggle a small
device property to true. CARL FRANKLINE:
Nice. DON WIBIER:
This is typically a bit bootstrap-ish but we can
do a bit more with this. If the minimum width is 401, then this property
is going to be true. CARL FRANKLINE:
Nice. DON WIBIER:
These properties are just down below here. Here we have the Boolean
small and large. Now, we can use
these properties to the visible properties of
certain columns in the grid. What you see is that if we are looking by default
on a large device, this column, the fixed
date will be visible. While if we're on
a small device, this will be false and this
column will automatically be hidden because of
those break points. This is the typical-merged trick and specifically for grids, and we're going to run it on a mobile phone so that it's like a bit
of a smaller screen, so we want to not outline
all the information. CARL FRANKLINE:
Yeah, exactly, only specific properties
or specific columns. DON WIBIER:
Exactly. With these breakpoints, it's very easy to set that up. But the main point, if you want to migrate
into the Maui app, you'll have to make sure that
you have your components set up in a way that they can be put into a class library. What we also did in
the class library is our data which shows the
issues and the users, etc but that's beyond
the scope of this demo. This is typically
what's been done. What leaves us then in the
Blazor application well, if I go to the pages and
I go to the grid page, the only thing that
we have here is the grids which was in
the Cloud standard. CARL FRANKLINE:
So that's a grid Razor component or Blazor component. DON WIBIER:
Yeah, exactly. We have put all the
components into this library. How can we get this
into the MAUI app? Well, for that, I
have already prepared a Maui application which
is also in the solution, and it has a couple of pages, and it's got a couple
of things here. What I did, I created a Hybrid Blazor Maui application that is a project
template that comfort Visual Studio and
that allows us to run Maui controls as well
as Blazor controls. If we're going to take a look at the program she asked and we'll see that we have added
some stuff here. We are using the
DevExpress controls. We use a couple of
other things which are interest here, the
MauiBlazorWebView, obviously because this makes
sure that we're able to host those Blazor pages inside the MAUI app
in the web view. CARL FRANKLINE:
Basically, you still have a main XAML page but the only thing in there
is this web view, which is a very
lightweight web control. That's exactly what
you need in order to show Blazor content. DON WIBIER:
Exactly. That's also the reason why you should go for the Blazor MAUI hybrid projects because it sets it up
altogether for you. What we also did in this demo is we have created a
couple of MAUI views. CARL FRANKLINE:
Or pages. DON WIBIER:
MAUI pages basically. Obviously, a best
practice with MAUI you see MVVM design patterns. We have a couple of few
models here as well. CARL FRANKLINE:
I should note that that's really necessary for XAML pages which you are combining XAML pages
and Blazor pages. The XAML pages have the
MVVM and the ViewModels, but the Blazor pages don't. DON WIBIER:
They don't need it. Not exactly. This ViewModels, they
come with the MAUI views. As you can see, we have a folder
pages where we can put in Blazor pages basically. If we go to this one, you'll just have a
regular Blazor code. What I also did is
obviously I put a reference after class library to introduce MAUI application. We'll have access
to everything that comes in the Blazor
class library. CARL FRANKLINE:
Nice. DON WIBIER:
Let's take a look at what we already
have running now. You have an idea how our
existing MAUI app looks. Did I mention that we put some DevExpress MAUI controls
in this app as well? Let me reload it. Here you see our MAUI app. It does not include
the grids yet, but we're going to
do that in a minute. Let me log in. CARL FRANKLINE:
By the way, this app is a public repo. You can just go
download it and use it. DON WIBIER:
No problem. This is one of our controls that is just displaying these blog posts. These are also DevExpress
MAUI controls. If I go to the analytics, what you'll see here
is that we already have chart for MAUI
available as well. These are native MAUI controls
in a native MAUI view. CARL FRANKLINE:
This is XAML. DON WIBIER:
This is absolute XAML. You can also see it right
here in the MAUI view. We have the PageViewAreaChart, we have the ChannelsDonutView. This is all the stuff. What we're looking at right now. CARL FRANKLINE:
Nice. DON WIBIER:
If I will go to the tasks. This is actually hosting
that GridPage.razor. It doesn't have anything yet, but you can see that as well and the code there is
nothing in there yet. If we want to load in
that functionality, it is really a matter of
including that grid control, which is coming out of
the Blazor class library. Because that control is
basically self-containing, so it has everything it
needs to display the data, I get the data, etc. This is all we need. If I would rerun
the application, let's quickly do that. Then we're going
to log in again. Here we have the
native MAUI XAML. Now will be loading our grid. CARL FRANKLINE:
Nice. DON WIBIER:
As you can see, remember that I talked about those breakpoints, the
breakpoint control. As you can see, we only
have two columns here now. That is because we have coded that functionality already
in the grid Blazor control. CARL FRANKLINE:
Very cool. It has all the other features that it had in the desktop version. DON WIBIER:
For sure. You can filter on one of those guys. Let me see that we pick one
that is actually in the list. I see. CARL FRANKLINE:
Mike Rollers there. DON WIBIER:
Rollers there. You see this is just working exactly the same as
it did on the Blazor page. CARL FRANKLINE:
I need to just point out and reiterate here what
you're looking at. You are looking at the same Blazor control that was running in the
browser on the desktop. This isn't an interface-compatible
MAUI control. DON WIBIER:
No. CARL FRANKLINE:
You're using the same control. It's the same code. Just running on a MAUI app, on an Android phone or whatever. That is really, really exciting. DON WIBIER:
It is. What we also did maybe you remember that on the Blazor app we
had on top of the grid, we had this column chooser. But because we have these responsive features that just work in MAUI as
well as you can see, we now have that button here. Now we get a column
chooser, again, but now it is totally geared toward a mobile
phone in this case. CARL FRANKLINE:
It's a responsive. DON WIBIER:
Exactly. Now I can actually say, I want to get rid
of the assignee. I want to put the status in. Maybe I want to have
something else. Well, but still everything
works as expected but because it's responsive,
it's displayed differently. CARL FRANKLINE:
Don, this is great stuff. I can't think of any questions, but because it's
just IJW technology, the MAUI team has
done a great job of letting us use Blazor everywhere and now
it's no exception. It's funny right after we're
done with this recording, I'm going to be doing a
demo for a user group, showing them how
to write a WPF app with Blazor. Isn't that crazy? DON WIBIER:
Yeah. That is totally cool. CARL FRANKLINE:
Well, Don this is great and thanks a lot. Where can we get this? We show the URL here on
the screen somewhere? DON WIBIER:
We're going to put this on GitHub and you can just download it. Make sure that you install
our components as well. You can test them out
for 30 days and even use our unmatched technical
support for any questions. CARL FRANKLINE:
I agree with that. It's great. Thank you Don. Everybody out there have a great
time at build. DON WIBIER:
Absolutely.
