Building Outlook: Setting up the Prism Project

[Music] well hello hello hello everyone good morning my time good evening good afternoon wherever you're at hmm thanks for joining me today coach stencil how you doing good to see ya thanks for joining so if you haven't noticed I've redesigned this screen right you just don't get this weird white background I have some new co-workers behind me I told them to stay very still while I record so they don't interrupt me so they just froze in place looking sharp HD today I thought it was HD every day I guess I guess not SMAP UK how you doing now for this new redesigned besides seeing my my co-workers being super super still right I have a little chat thing here too I thought that was kind of cool so everyone can see everyone right so we can have YouTube and mixer and twitch all communicating together Oh coach stencil your left foot Facebook why man Facebook is just it's a cesspool right now you know what I'm saying like when you get frustrated with family because of the stuff they post it's time to just take a break and leave I mean theoretically I could have just like unfollowed them so I don't see they're they're really bad poor taste racist tweets and are not tweets but posts but you know what I like you to it let's just let's just get rid of it for a while and take a break cuz I don't want to fight with family over stupid stuff you know and their family you're stuck with them right but yeah so I'm going to take a break off of a Facebook and I'll see how it goes though I got a lot of international friends so I don't see myself like completely getting on Facebook I think I'll go back to Facebook but I have to find a way to use it to where it's not super annoying you know what I'm saying and plus like I just found myself self getting sucked into checking Facebook all the time I'll be at line that blaze pizza and like oh I'm in line I'll just check Facebook you know I'm on the toilet what am i doing oh I'm checking Facebook oh crap I've been here twenty minutes up it I was done fifteen minutes ago you know I'm saying like it's a it's a time suck as well so I'm gonna see if I can just do a better job at not being on Facebook so much I'm gonna really focus more on Twitter that's my wider audience anyways but I just deactivated so if you happen to be a friend already we could still talk via messenger office yeah yeah so this office picture I was just playing around I think I'll switch it off like a beach picture I don't know what I was really looking for was the bridge of the what's it called the oh my god I can't believe I'm blinking out on this this freaking massive planet destroyer and star wars how could I not remember the name of that my mind went completely blank it's not the Star Destroyer come on help me out Death Star that's it thank you how did I forget that my gosh yeah so I was trying to look for like a bridge like I'm overlooking I'm about to destroy some planet or something but that's all I had with time right coach essentially you look really great in HD display Oh awesome you know this is actually a 4k camera but I never stream in a 4k I only stream in 720 just because quality and bandwidth and all that stuff a gr struggle they'll remember to look at Facebook a few times a week yeah to see anything else awesome okay so I hope everyone had a great Labor Day weekend well if you're US based right we had a Labor Day weekend this past weekend I had a crazy busy weekend started on Friday Friday night we had a friend from Hawaii they flew in for the what's called family game day right friends and family game day I don't know if you guys have this but I highly recommend it essentially every year my family puts on what's called a family game day this year we had eight teams of four people and it's made up of friends close friends and family and we compete all day long and games for the to crown the champion at the end of the day and then top it all off with a major barbecue so we had crazy games like it started like 7:00 a.m. with a relay race right so you have eight teams and then we'll go to this park that has this like massive hill right and the first thing is one person has to eat six Donuts then they run up this freaking hill grab a bag come back down and then the next team member has to chug beers right I think the team had to actually take down like six beers and only four people right and then another person runs up the hill runs back down and then you have to do a puzzle so all these bags you're grabbing right they have puzzle pieces in it so you wind up running up like three times you grab like three bags you open them all up and then you all do a puzzle first team to win wins that event right just stuff like that it's it's really fun there's bowling there's basketball there's nerf gun wars balloon wars you know water balloon Wars trivia like just tons and tons of great games it's super fun it's exhausting but you top it off with a great food great company it's really good keeps the family close right life's short you got to keep keep family close yeah so and then sunday was another busy day yesterday was a I'm exhausted friend's birthday party was yesterday she turned 36 and we went to a club I don't go to clubs I'm too freakin old to go to clubs but she's 36 she's still young so you know what I'll support you we go to a club I don't get home like 4:00 a.m. are you kidding me that's ridiculous ridiculous uh John Peter yeah you made it we're about to start coding just tell them my story here oh yeah and then just because I'm old I wake up at the same time every frickin morning no matter what time I go to bed so woke up at 7:00 and I was exhausted and I had stuff to do yesterday so I couldn't just go back to sleep I had stuff to do anyways busy crazy weekend now it's time to start my week with some code and so today we're going to start a full-on project a full application and I figured we would start by writing outlook because it's such a well-known application it has just about every like major challenge that you'll have in any production app you'll run into right you'll have to you have ribbon right you have outlook bars and groups you have dialogues you have to pin it views like yeah I'm gonna click on this and I'm gonna show a view and then the ribbon changes right the tabs change at the top depending on the view you're looking at I mean there's lots of challenges in there that apply to every app you're gonna write that's a matter what kind of app so I thought outlook would be a good demo app to right now I'm not gonna focus on design right I'm not gonna care about that we just want functionality we'll put some stupid data out there it's not going to actually connect to a server or anything although technically you could by the time we're done and then well yeah we'll just go through all the problems and come up with solutions a lot of these things I have solutions for and by little handy bag of tricks that I'll just makes the copy and paste from so you don't guys have you don't have to like watch me type all that yeah this should be fun it should be a good time and we'll use prism of course we're going to use prism because prism will make this so much easier and you'll see why as we start implementing these features so I guess Harrison yes this is going to be from file new actually why don't we just go ahead and start with file new right now you see I switched my screen you notice I'm floating I'm floating in the screen now I don't have that white background so you'll see even more code and I think if I'm in the way of some code I just go like this I think it's you the code right I need a keyboard camera see them keys you know what I have I have this this camera I could probably just like angle that down and put that to the left but you don't want to watch me type it's ugly it's ugly I've never you know like think my my nine-year-old daughter calls it home row yeah I don't use home roll I finger pick that's just it's ugly you don't to see that code stencil so you got new machine already heck no I don't have my new machine it's gonna take them three weeks to build it did like two weeks to ship it to me this can be ridiculous but I got an email from them saying they have my order right and they're gonna start processing it soon so I'm really excited about that yes green screen for the wind I've actually had this green screen for a long time so what you've normally sees you see the white you know you would see white back there well on the other side of that behind it was the green I just flipped it around threw some lights on it called it good I also have a black screen and a blue stream very versatile so yeah hgr why do people want keyboard cams I guess people like to see what keys are typing it may also help for hearing impaired possibly is I don't know actually that's a good question does twitch have real-time captions I don't know I've never tested it so maybe the keyboard will actually help with hearing impaired or any other type of disability screen readers I'm not sure I'm not sure that's a good idea though someone should tell me if twitch has real-time captions a better idea would be keystroke display oh no would that be kind of busy right if you had like cheese popping up everywhere I don't know I can look into it Karnak what the heck is Karnak I've never heard of Karnak I'll have to check it out okay so today normally only four control characters today I thought we'd start just by getting the initial application structure going right so we're gonna create a new application it's gonna be our shell the main executable then we'll have some modules we'll have to identify those maybe we'll have times to throw in some region adapters and kind of design the shell real quick just lay the shell out and then we could probably get that done in the next 40 minutes 35 40 minutes because I'm gonna be talking as we question so it should we should go to get that knocked out a card act shows keys and shortcuts that you type oh so there's kind of pop up on screen you know I've seen that where have I seen that where have I I think I think Jeff Fritz actually was doing that was it him that did that on a past stream I know what you're talking about I've seen that actually I don't remember where that might have been it see Triggs yeah Fritz has it yep okay that's where I saw it awesome ooh a link sorry I gotta click on this link I'm gonna click on this link I like links oh and it's on github perfect let me bookmark dis and I'll come back to it I will check that out later okay so let's start with a file new project you know I should probably add this to my github repo Ashley to my organization so let's make sure we do that - don't let me forget to add this to github so everyone can grab the code after each stream and let's do a prism blank app for WPF so I'm just gonna use the prism template pack we'll hit next I do not want it there I want it because that is my throwaway how about here I'll put it there and I will call this how about I just should I call this just twitch outlook that works twitch out or stream outlook what should I name this outlook although what I name is just outlook John Peter not core you know I could do core but it's changing so much what if it blessed us like what if it breaks us I'm gonna get him a place where we just can't move forward I know what do you guys think you want me to do Joe I could back this out I can do that net core instead whatever you guys want yeah prism outlook there we go thank you spam UK AGR yeah prism outlook everyone agrees earnest yep okay so let's go ahead and we'll just go with we'll just go with net it's fine it's all the same we'll create this it doesn't matter what container we use honestly but I'll just choose unity because that's what I used last time yeah John Peter why I'm not in core oh yeah I don't know if you saw my love my last streams playing with blazer and dotnet core breaks you every time everything changes so I'm gonna wait just a little longer and till it's a little more stable I if I remember correctly it's supposed to come out artyom what November of this year right or is that 2020 no this this year wait crap I don't remember don't remember okay so we have our outlook project [Music] Darren Clarke uh this month really no not Archie m-maybe I release candidate I thought really I September 3.1 in November Wow okay thank you I had my dates all messed up alright so we have our main executable so this is our shell app right and so we need to create some other projects we know we need some modules now for those not super familiar with prism they give a module as a major functional area of your application right so take a feature if you will it's almost like a feature based thing take a big feature that it exists on its own that's a module right so this allows you or your teams to work on different parts of the app without stepping on each other toes or even having to build those projects to debug your stuff so we're gonna separate these out the modules John Peter it's an RT M pre no new features are being added just okay nice good to know so we're really close crap that means I got to get on the inferences WPF controls and make sure I update those NuGet packages very soon to add them to the toolbox thanks for reminding me actually hold on I gotta write that down Don that core three let me just make a note because I have to I have to do that okay so if we think about outlook and we think about what it provides us we can start knocking out modules so we know we have mail right off the bat we have mail right it does contacts it does calendar so let's start by creating another project hold on before we do that I'm gonna add a new solution folder I'll call it module so I'm gonna stick everything in this folder we'll create a new project WPF blank note it's not an app not an app module yes I need a module right dear personal module ok location let me create a new folder in here called modules and I'm gonna place all my modules in the modules folder and we're gonna call this prism outlook dot dot mail and misspell anything no looks good now I want you to notice something do you notice right there we didn't get prompted for a container right you didn't see that when we created the main executable we got prompted for a container but this time we did not and that's because with the newest release of prism we have removed that dependency of a container on modules the abstract we have a new abstraction layer now let me open up this module file and so we have an eye container provider and an eye container registry so this is our abstraction around a tea container so now your modules do not have to reference a specific container which is amazing especially if you ever truly want to change containers you only have to change it in the executable this also makes them much easier to reuse across applications in your enterprise because one app may be using unity one app may be using a structure map or an inject or dry IOC but if you have like an authentication module that's standardized in your company you can reuse that module and every single app it doesn't matter the container and that's one of the beauties of this new abstraction we've added so ultralord unleashed a giant squid I've never seen that before okay that's pretty awesome that's pretty awesome I've never seen that alright so we have our mail now we have what contacts so to add a new project will do another module let's do a prism outlook dot dot what we call this contacts Oh change my folder here almost made a mistake create and then you think we're good with the two we'll add one more just let's just add one more we'll probably only implement just a couple but just for fun we'll add one more another module prism Outlook dajjal's dot calendar or schedule calendar schedule I will go to calendar and we'll put it the modules folder slick folder great perfect okay so now we have to let our prism application know about all those modules however we probably want to just do one at a time we'll do one at a time okay is a separate model folder not not be using more so I think what you're referring to is maybe you would have a folder in here called models like with folder models what's that I missed it thank you for the new follow I missed the username I'm very sorry for that so I think what you're talking about is the models folder right foot is fine oh but thank you so much for the follow there you are and so I think what you're talking about is this so the rule of thumb is whatever makes sense for you whatever your naming convention is some people call this business some people call this data models data whatever you want to call it you call it if your business objects are specific to a module keep it in that module okay which reminds me this brings up a good point we need to add another project we need to add a core project and this is just a class library however let's do WPF I really hate this new user control I'm gonna create a WPF user control library instead of a class library and I'm gonna show you why and I'm gonna call this prism outlook.com so this is a project that we're going to use to put all our share code in right so anything we share across all three of our modules needs to go in here mainly interfaces will go in here so we'll put this in there we'll call that good persona I looked at core looks good you could call this whatever you want Darren Clarke calls his plumbing plumbing is fine infrastructures a common one I like core because the namespace is short that's the only reason I do it it's cuz it's only four characters but call it whatever you want call it shared whatever whatever you like now the reason I like to use a user control library is because when you right-click and say add new item you get WPF Fain's like a page and user controls and windows and resource dictionaries right otherwise if you created a class library you would not get these options and you'd always have to go to new item and that's really annoying plus it brings in all the proper references right the presentation framework and all that stuff so when I do a core project I always do a user control and just delete the user control hello al ahmar good to see ya l Mir I bet it's allomere sorry al Amir I'm getting better pronouncing names if I if I Jack your name up I'm sorry I have a difficult last name that always gets messed up too so I understand the struggle okay so the first thing we have to decide before we play around in here is how are we going to let the prism application know about these modules right we have a couple different things we can do whatever we do we have to use what's called a Risa ie module catalog so I'm gonna come in here looks like I need to do a build right quick let me do a build so I get rid of those squigglies squiggly squiggly is okay there squigglies gone all right so what we want to do is we want to go into our app sam'l dot CS and we're gonna override a configure module catalog now I'm going to use the hard-coded catalog write the code catalog if you were gonna use a different catalog you would actually override create module catalog and then you return the module catalog like for example we have a directory module catalog right it has you would put a path in here wherever it's at but depending on the catalog you're going to use you would return that and create module catalog maybe doing a configuration one like you're you're defining a modules in your in your app config or a sam'l file well not doing that we're just gonna do it in code because it's easy so we're just gonna take the default code based catalog and I'm gonna say module catalog on module catalog dot add module of T this is the easy way to do it and what is the name of our module mail module maio module now hopefully our quick action here will add a reference and automatically bring in the namespace for our mail module perfect work like a charm okay so all we did is let the prism executable know that this is a module that we're going to load into our application let me delete that for now and I don't know if I remember answering that question but yeah that models that models folder if the data object belongs just to that module then you have your models folder and keep it in there however if it's used across modules create a separate project to contain your business objects like you might wait we might create a prism outlook that business project to hold our objects I don't know yet we'll decide okay so for now what we have is we have a module so just to make sure I'm going to hit a breakpoint and on initialize and I'm just gonna run it I just want to make sure that we're building them the application knows about the module and that the module is initialized and loaded so let and we hit our breakpoint so there it worked and this is our default application that we get which will fix this in a minute so we know that our module loads that is a good thing I will actually close that because we will come back to that later okay so next what should we do next we're loading a module I guess I guess now we should probably work on our shell a little bit right we need to design our show and so our shell let me actually get rid of this let me think so when we think about Outlook we're thinking this oh you know we're building Outlook we're building Microsoft Outlook yes and Outlook clone so we need a ribbon we need outlook bars it means we need a ribbon a window we probably need a status bar so none of this this whole view is no good to me so what I'm going to do is I'm going to w so I missed it I'm so slow I swear I need to rearrange my monitors I might get a move my notifications over uh let's see I'm gonna use in for just six WPF controls so I'm gonna manage my nougat packages and I think I had them installed locally if not I can hit the server but it's faster if I hit local and let me just search for ribbon I need a ribbon bow I'm right there okay so I'm going to install the infra just expand control into my prism application 1/1 band thanks for the follow that's fast enough that time got it alright no errors looks like we're good there let's go ahead and build because for some reason sometimes at least for me Visual Studio will not give me proper and tellus it's unless I built the project after adding a nougat package I don't know if that's the same for you guys but that's what happens to me okay so first thing I'm gonna do is I'm gonna create a woops xmlns we'll call it IG is I need to add a namespace to see you see I'm not getting mine oh hey hey sorry would help if I probably did that ah now I get it hey sorry my bad schema is that if we just like comm slash WPF I'm gonna delete that and I should now have I G ribbon window where's my web ribbon window Sam ribbon window there we go so I'm gonna be honest it's actually been a while since I've created a WPF app because I have been in web space for the past seven or eight months now so I'll be a little rusty but I'm hoping you guys can help me out okay so let's jump to our code behind which if I remember correctly is f7 I'll change that the same ribbon window flatterer using statement looks good I think we're working there and then I'm trying to remember the syntax for this actually let me bring up this is why if you use a component vendor such as if artistics install the sample browser please I am constantly using this because it's just impossible to remember every single thing oh so let's go display ribbon window let me just check out my snippet here okay so oh that's not what I'm looking that does not help me one bit this is what I'm looking for ah right there I need that you see that that's what I'm talking about I need that will copy that in this is where the ribbon is going to go that's the content host then let me copy we got more to this we got more to this so the ribbon goes inside of the content host okay and then IG oh yeah IG Zam ribbon and we'll put that there I do change this cuz that copying pace got me there we go okay so we have oh we see something boohoo yes okay so some a bouquet hard for me to believe I've never used up you pet holy crap really dude I've been using WPF since I don't want to age myself over 10 years 11 years since it first came out really and yeah she gave it a try it's kind of fun so never use prism what is it good for this is actually a great question a lot of people even if you've heard of prism you might not really know what it is right you probably hear oh it's an MVP and framework well it's actually not an ambient framework it has a lot of things that support and be view however it's more of guidance okay it's it's a library that uses a bunch of patterns development patterns right commanding a very aggregation what else of course that has mvvm but you don't have to use mvvm with prism modularity right it has a lot of concepts in it that help guide you to a path of success writing WPF applications it solves all those problems that you run into that you'll see in this the stream series because I'm actually we're gonna do this for the next month probably we're gonna build this out over the next month but it helps you solve all these complex problems about writing highly maintainable testable modular applications that are easy to extend over time for example we have these modules here and as you'll see we'll be able to create and work on each of these modules and inject them into our app as we see fit so as we add new features they just show up and anything I do in this module say I'm working on male we'll have no impact on any of the other modules at all so very loosely coupled it's it's a very powerful flexible framework it has its back in the day it had a pretty bad reputation of being big but I'm trying to fix that because it's not a big framework it just uses a lot of patterns that people may not be familiar with so great question uh yeah this actually a great question if for all other questions have not been Touche my friend SMAP UK it won't age you I've been writing coach to the 70s ok you got me I was born in the 70s so I wasn't writing code that long ago a gr 95% of your development is desktop that's awesome hopefully don't hear all these machines in the background I'm having a big backyard project done ok so I'm done we're just gonna stub that ribbon out for now something else that I think we know we need is an Outlook we need an Outlook bar right let me look at my sample browser here so I fully understand that's the menu that's the content host let me just scroll down I want to make sure that I am doing this correct we have I don't have to worry about that this is all ribbon stuff ribbon okay yes I know to do now okay so let's put a dock manager in here or no manager a dock panel well I said I'd manager we'll put a dock panel in here and then we need an outlook bar and actually I need to do this what it's called last child fill it goes true we need to put an Outlook bar in here because that's that that's that left side navigation those groups where you have your inbox and it has like the tree of you know of all your inbox or your email folders and then you have another group that's contacts and you have another group that's the calendar scheduling stuff so let me go ahead and add another nougat package because in four to six heads one of these as well I think it's call the outlet group bar outlet bar that's what it's called alik bar so we'll install that see oh there we go okay uh outlet bars installed so I'm trying to think of where that needs go well just will the start here will start here should be IG Sam outlook bar boom perfect and then I want to dock this to the left and then I know we're gonna have a Content control Sonia Sonia lecturer welcome thanks for the follow I know we're gonna have a Content control that's going to be a region that we're gonna be injecting views into right so I can I make this make this bigger maybe you need to look at a screen for Outlook to see what you're aiming for I have Outlook ingrained in my head I use it every day like I woke up this morning and had 600 emails like that's how much I live in Outlook you see me working without a plan of course I'm working without a plan geez isn't that how we always work they said hey build this okay I'm agile you know but agile may just work and he goes to work just just start coding I have I have a checkbox I need to check off implement this check implement that check okay so that looks pretty good I think I want to set a min width on this let me look at some let's go cuz I don't like how I need a I need that whiter 100 nope too small 200 that looks good uh so I'm just gonna run gonna run it and see where we're at for now it's gonna be kind of ugly kind of empty but I just want to see what we're working with what what monitors is popping up on but oh there we are come on alright well we have a ribbon and we have an Outlook bar in that ribbon I don't like that style we have to change the theme on that well change the theme in a minute that's an ugly theme I don't like that don't like that at all okay so I know that this is going to be a region so we'll say prism region manager region name and what I'm gonna call this content region sure it's it that the 2008 theme I think that is the 2008 theme that's we should probably update the default theme that's kind of old school and actually you know what now would probably be a good time to throw something in core we probably don't want these magic strings everywhere so let's create a new class that's gonna be shared and we'll call it region names public will make it static dibadeaux and what public read-only string content region and now we do not do something wrong Oh what thought read only made it ok we'll do this and then we'll take content region and we'll get rid of okay now if I remember correctly let's go ahead and make sure that we add a reference to our core project so I can actually access this thing are you aiming for the 2007 look no actually I'm going for like the more the current the current look maybe like the 2013 right so we did that now we have to add a namespace X xmlns core equals a prism outlook where's my table for is about looked at core we're not done yet I'll build that let's build this let's try that again there's an outlook.com what the heck what am I missing guys it's public prism I looked at core I mean I'm not going crazy am i let's just do this then because I did not get intelligence for that reference missingno the reference is there missing it totally I have a reference right here person table we've got core I don't know why I'm an I'll do a rebuild just do a rebuild Simpson hello there welcome from YouTube alright that built I'm gonna cut that out oh great I got the Oh then it normally that last longer so prison provides this sort of zamel UI elements templates no no prism doesn't provide any UI templates whatsoever all this stuff here this is all I'm using it for just 6 WPF controls to create the UI prism is more of an application architecture library it helps you architect your apps and what I'm doing here is this region this region is actually a placeholder this is a prism thing right so a region essentially is a placeholder that allows me to inject views into that into that element from anywhere right so later on you'll see that when we have a new mail or a new contact or something like that we can inject that entire view into this content control from a view model so this is just a placeholder for content that's that's all the region is and we'll be navigating our views into this area okay and any control can be a region and we'll so we'll see how we do that now back to this I want to see prism outlook so I had to rebuild it worked that time very very strange now I have to remember ecstatic core region names dot content region they're no more magic string a so so does that mean that like prism is something like angular adept yes actually that is a very good correlation there right it's very similar it's good comparison because angular and prism are very similar in fact a lot of the same concept so you can think of prism as angular it's a structure it's a framework for building WPF applications and angular is a framework for building you know static JavaScript applets spa applications okay so we have that we have our outlet bar so now okay first let's do this let's do this what's the name of this of you if you a ok so what I'm gonna do now is just to prove that this is working I'm gonna take this view a what's it say I think it just says view a yes probably just view a I'm gonna take that view a this view was created with the with the project template and we're going to inject that into this content region so let's go ahead and add a reference to our core and then okay so we have our I container provider and Ike retainer registry we're not dealing with containers yet so what I actually want to do so I'm going to add a seat or here and I'm going to ask the eye region manager and we will create initialize and then after this is initialized I'll come on raise your manager dot register of you with region the region name which is region names dot content region and then the few is type of view a now this is a temporary we're not gonna keep this here I just want to make sure it's working so let's go ahead and start this and I'll explain what all this is don't worry I went a little fast there and I'm gonna watch my monitors to see where this pops up which mutter cuz there's always a different monitor for me I wish visual studio was smart enough to like hey when I debug to this it was on this screen when I last closed it okay there we go alright so our view a is properly being ejected so if you've noticed so good to go back let me just doc I can't really talk dead kid I so if we go back to our main window here we said that this content control was going to be a region in a region like I said is a placeholder that allows us to inject content into okay so without this mail module having any knowledge of this control of the shell of this project zero knowledge of it we just said hey inject that type into that region wherever that region exists and then what happens is it takes that view and it puts it in there okay so this is kind of getting into we're not region navigation yet but I hope this helps explain how a region behaves right so that content region here right there is a placeholder for some view whatever it is for us it's going to be a list a grid of males and then you have your your preview window for the actual mail that you read right so that's what this is gonna be here so we knew that now we need to make a region for this left side we need to make this a region and then we'll need to make the tab area a region too because you know first we need to inject the inbox folders right so that's going to go here and when I select unlike inbox deleted sent right on this side we're gonna show a males and then as we change we're going to have the tabs for males show up the top so we know that we have three regions here we have the tab region and an outlook region so let's go ahead and create those I'm gonna start just by creating some names here public static string Outlook group no out whoa yeah l-look group region that'll work and then we need public static string oops we're gonna call this ribbon region that'll work okay well just copy paste that in there nope alright so we have our region names I think that's all the region's we need if we want if we really want to down over here nope I think where's my sample browser I see yeah I think it does IG Sam no no not Sam it's a ribbon it's a ribbon content host content ribbond window content host dot status bar you have a status bar so if I wanted to I could throw a status bar in here and then we can make data region if we wanted to right I'm not sure I'm gonna need that so I'm just gonna remove that for now we can come back to that if we feel it's something we need to do okay so next we need to make the outlook bar region so Harrison with all the stuff you are using work in all xamarin projects that use prism or is it so what I'm using now this is WPF only xamarin prism does have a version vores xamarin right zammurd forms but it's it's different because the platform's were completely different and then like there's no like ribbon control for mobile from m4 gistic city ways so depending on the platform you're gonna have different controls regions do not exist in zammurd forms because zevran forms has its own way of navigating it has a paged based navigation and in WPF if you've been to a WPF for a while there's no real good navigation built in so that's why you would want to use prism navigation because it gives you a much better experience for navigating within a prism application and we'll get more into navigation later on as we build this application out okay so we need to make the outlook bar or Regent so is a prism region manager region name and give it a name in this case it's ecstatic core how come I'm not getting intellisense that drives me nuts content no not content region Outlook group region and then what I called it I think that's what I called it okay you're getting an underline here are we going for the new cleaner 2019 outlook ribbon the old store they know where to go with the new one we're gonna go oh thank you Darren Clarke there we go we're gonna go with the new look so I'm still getting region names outlook group region outlook group region I don't think I misspelled that nope didn't spell that static static region name region name this build could be a false false alarm yeah false alarm I totally built okay all right so actually you know what let's go ahead let's make this look better now we have a couple different ways to do this in our application one way I could do it here but I think I'd rather do it in the code behind here I believe I have the nougat theme it's a theme manager we have to it's this one set theme yeah this one sometimes the animal compiling updates don't appear right away it's annoying yeah it is annoying application theme equals new oh we need a theme we need a theme let's go ahead and bring in what do we want bring in let me look let's go themes huh forced green office 2013 ah 2013 that's not bad I guess let's do 2013 yep so we could do it this way or we could do it on the control I'll show you both and we'll pick which one we prefer so equals new office 2013 theme that right I think that's right oh that's right I think that's how we do it now so let me run this and zamel preview for xamarin is so bad yeah it is but they're uh I think they're getting better their live preview it's getting better okay most likes occur Outlook Reaper oh yeah totally forgot so let me comment something let me take this I'll explain what happened let me take that off because I know exactly what is going on there okay and those so putting that theme on there now it looks much much cleaner right much cleaner we got that boom looks a lot better so much better we don't have any backstage or anything to find yet so we'll do that later yeah okay yeah this is tons better this is a lot better and I should be able like zoom in and all that stuff okay so the reason that crash this is actually a good point the reason that crashed I'm gonna run it again so we can actually read at the error because if you're doing prism for WPF development it's very important you understand the air as you're running into so let's look at we got to read it so it's an update region exception right such has been thrown and that's because an error occurred while creating a region named Outlook URP region the eye region adapter for the type Sam outlet bar is not registered in the region adapter mappings say what what did you just say to me Bryant's say that to my face buddy okay all that says is that prism doesn't know how to adapt the incoming views to the component you're trying to use as a region now by default prism has a handful of region adapters okay Brian you're going too fast what the heck are you talking about so let's back up when we talk about creating making something a region right we said hey this content control this content control we're gonna use as a region placeholder that we're going to injected views behind-the-scenes what happens is prism has a region adapter for that content control so it knows if you make a Content control a region it knows how to take that incoming view and adapt it to that content control element however in the case of our outlet bar the outlet bar is a component prism has no idea about so when prism starts it's gonna go load all its region adapters and this link oh ho whoa whoa whoa I don't know what this outlet bar is I don't have a region adapter for that I can't adapt incoming views to that outlook bar component so I'm just gonna stop here right peace out talk to you later so out of the box prism has adapters for like selector items control content control there's one more I can't remember off the top of my head but just there's just like four I think built-in reaching adapters that means we have to write our own region adapter for any components that we want to use such as this outlet bar it also means we're gonna have to write a region adapter for a SAM ribbon control because prism doesn't know what a ribbon is you have to tell it so I put the region name back right this means we have to write our region adapter so let's go ahead and we're going to add a new folder just I don't know what I'm going to call this you know I can call this core and we'll kind of keep it the same namespace and I'm going to add make sure that it will call this region adapters or shall just call it regions maybe regions because we're gonna have more more than just adapters in here and anything related to regions should probably go in there so now creating a region Tector is pretty easy i'm gonna create a new class let's call this out look group region adapter now pay attention to where I'm putting this Oh a gr so Zam outlook Bar didn't inherit from items control no Zam outlook bar does not inherit from items control which is why it didn't work so this is why we have to create our own region adapter okay SMAP UK off-topic Google just released an Toit in go update your ass because I'm sure they're all broken now Android likes to do that okay so let me come over here I actually already have one of these built on my website so instead of redoing it all let's go Brian lagunas outlook bar region I think it's on my website oh did I not put this on my website I hope I did I'll just search my I'll search my website uh outlook bar no outlet I'll just say I'll look keyboard shortcuts well crap I know I had this where's it at I have this I know I do I just gotta find it Wednesday found it told you I knew I had it so let me copy this and I will explain it because that's much easier than sitting here watch me type this all freaking day we'll just make sure we add our using statements make sure this is all good oh and I even have important comments here okay what's this say Oh cuz I named it something different here we'll do this yeah well rename that sounds good okay so to create our reagent adapter is very easy and actually if you have time even I'm gonna go over to here I have to plug that's the shameless plug in anyways I'll get my browser over here I actually have a video on this on my youtube channel where is it scroll down scroll down uh it's around here somewhere I'm sure if you find it it's there I don't want to waste everyone's time looking for but it's all my youtube channel creating custom region adapter okay so essentially to create a custom region adapter all you have to do is derive from region of debt adapter base of teeth t is the type of control in this case the control is a Zam outlook bar control okay so this is our generic you'll have a constructor that takes your eye region behavior factory and behaviors are amazing we will actually go over this is a very advanced topic that we will get into later make sure you pass that to the base implementation and then there's two methods you have to worry about let's scroll down here first create region this method allows you to specify what type of region you're dealing with okay what I mean is actually this is wrong this is a single active region so there's there's three different types of regions there's your generic just region then there's your single active region and then all active region which that one was that all active region now the difference between these is that if you say for example new region it's just gonna be a region it's just a placeholder you get nothing nothing fancy with it right that's that's that's just it it's it's a region if you do a single active region prism has this concept of AI active aware and it actually keeps track of what's view is active in that region okay so for example if this was a tab control only one tab can be active at a time so as you're selecting tabs only one is active so that would make it a single active region however if you're like an items control and you have a whole bunch of views in a list that can all be selected at once like control click selecting that is an all active region means every view in that region can be selected it's all active everything can be active okay hope that helps for the most part the majority of the time you will be using a single active region you better have a very good reason for an all active region okay for salmon uh forms I use live sambal for a while now and it's great yeah in case someone is disappointed was built-in previewer use the like yet so the live sambal that they're working on is really good I actually did a stream you can watch one of my past streams I did on the hot reload of their new of their live player so they're making good progress there okay so after we've defined our region type in this case single active region we have to adapt the control and what adapt means is it means I have to take the incoming view whatever that is I don't know what it is I just know there's an object that's coming in to this into this into this region and I have to take that object and I have to add it to the hosting component okay so in this case and act the heck this is wrong too that's wrong where was I using this adapter because that was totally wrong okay so in this adapt method you have your region and then your region target the region target is the hosting element that's that is your region and so what you want to do is you want to hook into the collection changed event of the views collection now there's two here there's views and then there's active views okay we care about views now going back to that that the active talk I active aware as you select items in the tab control for example you might have five tabs right in this case five objects in your views collection however because this is a single active region when you make a selection the active views would contain the selected tab only makes sense so I must have been using this somewhere weird because that was wrong 100% wrong okay so what we do is to say hey if we're adding an object we're gonna loop you know what I don't think I wrote this this does not look like my code why I never use Y X oh yeah I might have borrowed this from somewhere else maybe internally we're gonna have to debug this now we got to debug this cuz I gotta make sure this works however no matter you're gonna handle the add changed event right so the collection changed what is the action okay we're adding something you're gonna loop through all the new items that are being added and simply you're gonna add them to the region the control so in this case the Zam outlook bar has a groups collection and we're simply going to add that group now there's a note in here saying that the outlet bar does not automatically select the first group in its collection so we must manually select the group if it's the first one but we don't want to execute this every time a new group is added okay so we're just doing a check to select the first group so that's all it is I might actually comment this out just to verify that they're right on that because they were doing something weird okay then you want to handle the remove right so what we're removing a view what do we do well we look through all the items that are being removed and then we remove them from the control in this case we remove it from the group's collection we're removing the group very easy okay this is very easy stuff I mean I don't like the coding format or the naming but it is what it is we can reformat this later if we want okay so now that we have our region let's go back into our app that sam'l at CS and we're going to override I think it's configure reagent adapter mappings and they'll say region oops reagent adapter mappings dot register mapping the type of the control alright so this is type of a a Sam outlook bar like a type and then the the reagent adapter itself now what we want to do actually want to make sure cuz we're I'm getting this they might have got this wrong so I'm gonna double check I think they got it wrong yep they did morons oh sorry yeah this was not my code I copied that from not me so what I just saw someone doing was newing up the Sam Outlook group wait wait I'll call it outlook bar outlook Alec bar region adapter like this yeah but the problem with that is it takes reach behavior factory so now you're getting net and that's no bueno you don't want to do that instead just ask for it from your container okay so let's say container resolved and then we'll say outlook bar Alec bar region adapter there we go that looks better so what this is gonna do is this is gonna have the container create an instance of this adapter for us and inject the proper behavior Factory for us and actually I should get I got to rename this because that's confusing me there so when we say hey container I want you to resolve this Outlook bar region adapter anytime you run into exam outlook bar component so when the Apple loads up and it starts to render out this Outlook mark opponent let's say oh hey that's a region let me check my mappings my region adapter mappings so it's gonna go through these mappings hey look I have a SAM outlook borrower mapping Oh what do I need to use for its adapter oh I need to use this adapter the container will create that adapter it's going to create the region behaviour factory inject it in for you and then it should all just work beautifully so let's go ahead and run this application now we're not injecting anything yet however we should not crash because prism now knows how to handle the outlook bar as a region and come on kip our team started using prism at the beginning of the year i must say it made our lives easier the code samples especially we're really helpful thank you brian huge fan thank you for your support and thank you for joining today prism has been a big part of my life for a very long time and i just hope i could keep making it better and providing you guys content and training material and hopefully one day I'll get to the docks and actually update those talks but okay so it doesn't look much different right however it didn't crash didn't crash because now it knows about an adapter we have an adapter so surely damn good evening all vaguely remember hearing prism years ago when it rocks could someone please give me the 15 minute hour 15 second 15 second lift speech 15 second lift speech 15 seconds okay prism is a is a library of guidance to help you architect a loosely coupled maintainable extensible and testable applications in WPF and xamarin forms there you go okay so don't you get a copy and paste this now copy let's make our ribbon a region and I think we just called this ribbon region yep hey I got Intel uh since that time okay so now we're gonna run this and now we are expecting the crash because you now have experience right what's going to happen when you try to define a region on a control prism doesn't know anything about and that's the exact same region we got last time our error exception little blah that's exact same exception we got last time but now we know how to handle it okay so what do we have to do we have to create a region adapter for it so let's go ahead and I'm gonna right click I'm gonna create a new class and we'll call this Sam ribbon region adapter you know what we do I had this one you bring up my I know I had that I gotta have this one on my Brian lagunas Sam ribbon Eugen dock manager I got dock manager oh I can't even type it's my keyboard I promise I hit the keys custom region adapters here see I'm ribbon an outlet bar prism oh then I put that on them it for just six blog cuz I know I had oh no that's someone else nevermind see I definitely have the up dock manager uh I can't believe I didn't put that on my blog on I know where I can get it see I keep all my code and I know exactly where to find this stuff oh yeah alright I was having using statements now remember reach injector a base of T T is our component that we're using as a reagent in this case it's the Zam ribbon and we're going to just make sure that matches we need our go okay so this is yep this is code I wrote actually so I can't complain if it's broken let me clean up the namespaces surely they if you have a lot of bright laguna searches in your history yes I do because when I solve a problem I blog about it because that's my notepad because I mean it might be months or years before I hit that problem again and I'll have to go back to it and I might not I won't I won't remember I'm not gonna remember so it's easier just to put it on my blog for my for myself i blog selfishly you think it's to share with all you guys know i do it for myself I'm sorry I'm a selfish guy but yeah so I use my own blog as my own historical notepad I just like these I could have swore these are on there if I'm gonna put them on there this week because I didn't realize they weren't on there because I use them all the time I'm gonna put these on there this week that wait anytime I need it I'll just search my blog get a pop-up and I'll copy and paste it right off there it's really Deb that's funny I have the same issue I sometimes why must my Stack Overflow questions yeah exactly okay so first things first create region it's a single active region because a ribbon control has tabs but you can only select one tab at a time right so single active then we're adapting right and the adapt method that we override on the views collection anytime we add a view or a remove of you if we add a view we're gonna loop through the new items and we're gonna add that view to the region what does this look like all we do is we take the incoming view make sure it's a ribbon actually there's a new syntax since I wrote this there's a if wait how do we do this there's a new syntax is it there if ribbon tab item not equal null as ribbon tab item right in that it I don't ever use this but I think that's it I'm pretty sure that's it someone tell me quick no that's not it oh not not ribbon tab item is it view I don't ever use this syntax as ribbon - oh wait a minute I think I remember that's what I got to do ha then I could say zan tabs dot ad right and that it no that's not it a few Oh Oh if you is ribbon tab item okay and then we could delete that see I need to get used to writing this new syntax I just have such a bad habit of doing it this way but now I can copy this so that's all we do we hey it's the view coming in it's not null and as a ribbon tab item then we're gonna add it to the tab so let's do the same thing here except we're actually removing this time pretty easy right and that's all we do for adding we add the view to the region if we're removing we remove the view for the region pretty simple thank you for the help on that syntax so the next step let me just copy that we're going to go to our app that saml we're gonna go to our configure region adapter mappings and once again regions after mappings register mapping type of Zam ribbon and then container oops resolve of T that is our region adapter will add our using statement there yeah so now we're we're good so theoretically we should better run this and it won't crash again because we now have our region adapters for both the ribbon and the outlook bar and voila no more crashes so now we've set ourself up to actually start injecting some stuff right so let's let's do that let's just let's create something real quick and I want to make a note right here before I do that so I actually put my region adapters in the core project yeah I'm that core project excuse me and the executable the main application of our solution I see a lot of people put the adapters and behaviors and their core project they don't go in the core the only place that has to know about the region adapter classes is the executable the shell application that's it so any like custom region behaviors or region adapters or any of that stuff don't put that in your shared project that does not need to be exposed to any module it only goes in the executable so just just keep that in mind okay so let's go ahead we're done there we're done there we will let's put a Duke to do here because we need to come back and remove this eventually I want to make sure I remember to do that okay so we got all our regions to fine I think that's all the regions we're gonna have I'm pretty happy with the ribbon right now so let's let's get a tab in the ribbon shall we let's go I have cuz I kind of forgot right tads let me look at the sample browser right quick where's the Sam oh I don't even have it up anymore and you guys can't see it it's overload the monitor so let me bring this over here so we can all see it so Sam ribbon here and I just needed one tab just give me a tab no I don't need that tab ok display yeah there we go okay no not the applique I don't care about the application menu I tab item header you have groups I've been tab item okay ribbon tab item okay that's all I need so there's a couple of different approaches to this first let's create a place for this we need a folder I don't know how do you guys wanna how do you guys wanna do this do you want to have a folder that says ribbon tabs or just menus and we put all our menus in there like should we do like menus and put everything in there how do you want to structure this it doesn't matter to me this is all this is for you guys have to admit to attempting to write a custom control vp6 oh my gosh bb6 because the salesperson at our company suggested that an app I was working look like Outlook trust me the enterprise loves their applications to look like Microsoft products for a couple reasons one they look good might be they look they do they look great but to their familiar right the pattern is the navigation patterns is familiar to their end users so if they can stretch their application to function like an Excel or an Outlook or something like that then people already know how to navigate their app so if their app looks like Outlook people know how to use outlook they know how the group's work and all that kind of stuff right so that's why they do it and it makes complete sense Java 25 new module No not a new module that would be a mistake the whole point of a module is to encapsulate every view every view model all the logic everything that this feature needs to function belongs in itself okay don't get crazy with it keep it simple these are these are modules a plug-and-play right so imagine you have an enterprise app I may use that authentication of module is an example that has a UI and everything imagine that authentication module standardized across all your ass in your tire enterprise and you can have a thousand applications out there you can put that authentication module and your internal nougat feed and every one writing an app can add that nougat feed as a module and just use it boom and if you update it they can update it it just works right so you want everything encompassed in your module that's responsible for the functionality of the feature you're working on okay so for now I'll call it menus a module could be a standalone app but needs another project for context yes a module technically could be as like technically you don't have to use modules in a prism application you can write that huge monolithic beast that you're used to writing in non prism applications I just went recommended and yes a module can have an executable and you can also expose a module interface so it can be used as a module in another app right so it can be executable but have that expose that interface that you can use in another application that you bring in so I guess I should talk a little bit more about how you set a module up now to set the module up all I did was create a new prism module project template however all you have to do if you're not using the prism template pack which you can get from the marketplace or go tools no extensions may have extensions installed and for just X where is it oh right here prism template pack install this prism template pack and you'll get all the project and item templates and coach snippets and all that crazy stuff but if you're not using that all you have to do is create a new project and add a single class to it that implements I module okay this is all it takes to identify that this class library or this user control library or whatever it is is a module and this has two methods on its interface on initialized and registered types now this is where this container registry comes in a container provider so prism relies on dependency injection to function okay all a dependency injection container is is let's say okay let me back up there's actually kind of two concepts here you have something called inversion of control and then you have dependency injection inversion of control in a nutshell says you know I gotta take the responsibility of creating this object to something else I don't know what it is but to something else so for example bar person equals new person I'm creating this object okay if I want to finish the injection I'm gonna have something else create that object for me I'm just gonna ask for it's gonna give it to me that's what's happening here right I never nude up a Regional Manager and we'll talk more about reaching managers later on but just think I had this interface you don't see me newing this up you don't see raging manager equals new region manager right I'm using inversion of control with the help of a dependency injection container to inject that for me it's already constructed and so all the dependency injection container does think of it as like a dictionary of types right so it has a mapping this dictionary type say for this type create this object and so the container says oh for the eye region manager type I'm gonna create the region manager object and I've got to give it to anything that asks for it so I can say I event aggregator oh my god I can't spill okay I'm not doing this up I just added this to the constructor of this class but watch this I didn't do I didn't say new this new that I didn't do anything I I added the interface requirement to the constructor of that class yet I didn't crash adding a compile error at all because my dependency injection container yeah I cancelled sorry my defense the injection container knew how to construct that object it just gave it to me automatically okay so that's why you see this container provider and container registry the registry and I module this is what you're going to register your types with the container so for example will say container registry dot register type for navigation view a we'll get to this we'll get to this not not now not today but we'll get to this but I could say hey I'm registering a few a for navigation with my container and it's just gonna work or if I had a service I could say register singleton my service and then it's just gonna give me that service wherever I asked for it one copy I don't have to ever new it up you will never see in a prism application you'll never see this VAR service equals new service you'll never see that in a prism application it's not necessary but that's all a module is it's a class that implements a module and it gives you access to register your types with the container and the ability to create objects from the container that you may need to read data from otherwise you're going to inject your dependencies via this class constructor in the constructor just like I did here okay basically prism helps make ILC in dependency injection seamless you're using it you don't even know it and the more you use prism the more you'll forget what's prism and what's WPF cuts it just makes it so easy you'll you'll never want to write an app without using a DI container again okay so what we're gonna do oh yeah menus we need a menu so let's go ahead and right-click this and I'm gonna add a new user control this is gonna be a tab we'll call this home tab we can change the name if we don't like it okay and that means Brian would you say that the dependency framework like unity or an injector auto effect functions under the hood like a service locator no no no I wouldn't say that at all actually the whole point of a DI container is to get away from the very bad service locator even prism use this service locator internally and it drives me nuts I've got it removed everywhere except in like two places and I just haven't figured out how to do it yet but I will figure out how to remove that but I have to be very careful because I I can't risk breaking every single app right but no di does not equal service locator now a lot of DI containers will provide an AI service locator implement a so you can use their container via a service locator pattern so brief that's word I'm looking for when you go off on another topic whatever that word is we're gonna do that so in this case you know I'm using a dependency injection container to inject my dependency so in the case of a service I know the dependencies of this class I know what's required for this class to function however what a lot of people do is they'll say yeah my region manager equals service locator dot get service you know whatever blah blah blah blah blah right yadda yadda yadda that's that's very very bad you don't ever want to do this from what you are not testable at all your testability just went out the window forget about tests and if you don't write tests I guess that's okay then but if you do write tests you care about that this also hides the dependencies of that class like what does this class need to work in order to function properly what's its requirements well I don't know any consumer of that app doesn't know so don't use service locator if you can help it of course there's always cases where you might need to use it and that's okay just be pragmatic get the job done but try your best not to use it okay now we need to convert a tab here okay off topic anyone know a quick way before start resource you know how to get unity container to ignore internal constructors oh yeah I don't know about that one you could try the unity github repo so there's two approaches we can take for populating tabs in this ribbon right so I forgot about my main my main window here there's actually two approaches we can take one approach is we can try data binding right we have objects that represent a button or groups and has all their icons it has all the actions on it all that stuff right sighing hi thank you for joining us Cesar you're on YouTube welcome welcome to the stream we're just talking a little bit about a prism in WPF we're building we're building outlook from scratch and it's so much fun okay so we can take the approach of having objects data buying representing the tabs and the groups and the nested groups and the the buttons and the different sizes with the icons and the actions and don't do that you're making it so much harder on yourself so much harder I'm gonna take the simple approach I'm gonna hard code it because for one my UI is not dynamic I know what buttons belong on what tab for the view I'm looking at right so the approach I'm gonna take is I'm just gonna make this an actual ribbon tab that means I need to add a new get packaged for the ribbon to my modules because they will all have tabs and you know what well we'll get to that and I might as well add core because they're gonna need core all right well add those shouldn't take too long since it's on my local Drive oh no I what's it no no that's installed okay you see this hope it's not looking at new get out org that would be dumb it is isn't it no don't look there look locally I already have it installed no a cramp can I cancel that cuz I actually didn't want to add it to core whoops that's fine that's fine I might need it in core I don't know I was actually yeah I don't know what I was thinking I had a brain fart what's my output yeah see it went to nougat no don't do that okay see this again local got that install okay this should go much faster now there we go see that all right we're good there so now let's add our using statement here well xmlns:xmp m'as and for just extinct it's just called ribbon tab well ribbon tab item okay we'll get rid of that I hate that ignore will D I never use any of that don't care about that yeah don't care I don't really pay attention to designers much and will go what am i oh header I think it has a header yup header mail no home yeah it's a home okay and then I need to get the code behind here this is a ribbon tab item got that oh let's see where is my here okay ribbon tab item they have a header property looks like we had need a group okay let's just copy that and we'll throw okay we're gonna do a little replace here current document and then we won't worry about this I'll just say new so I really don't know what this is gonna say yeah I know what this looks like yet and we probably don't need all those groups I just want to get a single button up there caption button and then we can come back and fix this and it looks pretty good I think that will give us what we need I'm eight I may not need this rat panel but we'll leave it there just in case I don't need that ID okay now so we have that what we want to do is we're going to say Regent manager register a few with region region names dot Outlook group region type of home tab now I know what you're asking so we're not want to remove that that's actually good like Brian what what is this register view with region what are you doing here okay we haven't really got the navigation yet however this is part of navigation okay register view with region what this does is it takes the type of the view and the moment that that region is available it's going to create that view and add it to that region automatically this is called view discovery okay that's the term we use in prisms called view discovery and essentially you have no control over this process it's here's the type and whenever that region is created at whatever point in the life cycle of the application let's go oh I felt an Outlook group region well I have a Home tab now I'm going to take this view and throw it in there right what the biggest mistake the biggest mistake I see people use this as navigation and so they'll put this in their thinking oh this is how you navigate no no no no no this is a very specific use case only use this for items that need to appear on the screen immediately and are more static like menus status bars navigation items right don't don't use these like the default tab or the default view that shows that's the gun when we get here I'm not gonna use this for that main view to get to the show first I'm gonna use actual navigation so only use this for things that need to appear then are more static when it comes to the UI okay all right so let's let's just see what we got let's run this and let's let's see what we're working with come on man I can't wait for that new machine mmm it's me a long month okay Home tab Oh oh my gosh come on guys come on you didn't catch that that was a test and you guys failed miserably failed miserably you didn't catch that we're putting a tab into the ribbon we're not putting a tab into an outlet bar come on guys I tested you a tool I totally knew what I was doing I'll be testing you through this whole series I'm gonna do stuff like that just to test you there we go there we go so now we have our home tab you see that and we have our button pretty slick however however I notice a problem I think I know it's a problem doesn't the tab doesn't look right to me that shouldn't be rounded those corners it shouldn't be rounded this should be squared I have a solution for that we will worry about UI later hey gr we notice but you make so many mistakes that we decided you had to learn from them hey no those aren't mistakes those should be testing you okay now you know those are tests and in my mind you're failing all of them rubber key thanks for the follow thanks for joining us okay so this is pretty cool now because keep in mind we have it nude up anything why I keep getting a task was canceled from stopping a debug session I think Visual Studio might have an issue okay keep in mind this is pretty freaking cool because we have not created any instances of any objects anywhere in this codebase we don't have any hard references to any UI anywhere in this code base everything is extremely loosely coupled we have this shell application that is a dumb empty shell there's nothing to it except some regions just some controls that we said these are regions however we are injecting views from a different assembly into these regions ah I hope you're starting to see the power of what prism provides you I mean this is pretty bad this is awesome okay so now let's do one one outlook bar group let's do one of those ah just to make sure we got this got this working right okay so let's where's my where's my being here I need I'll look bar Alec bar adding groups yeah how do you add accrued let's see the sample so we didn't Outlook Bart group oh that's it this outlook Bart group yes sir okay sweet I could do that well that means we're gonna add another nougat package yeah local make sure we're local this time outlook bar and let's just add it to all the modules because we'll be using them in all the modules yep I like I like you too I like ya the navigation concept in prism is pretty awesome we will actually we will take that navigation service to places it's never been before we're going to extend it and make it do what we want because it's not built for what we're gonna do okay so we added that let's add a group now I'll put it in menus sure sure why not user control I'm gonna call this the male group male as in like email that male is in like the XY chromosome type male okay so now let's get rid of that I don't like that and we'll get rid of this one no believe it I think we can leave that okay XML xmlns G schemas and for just six WPF and then this is gonna be I G oops outlook bar you know look I'll look bar group that's what I need right there it has a header header header okay we'll call this male and you know what when I when I end the stream I'm gonna go search for some some icons some images that we can use to make it look a little better I won't do that now but then waste your time but I'll see if I can find time to find some images for this stuff okay so we got to go the code behind and let's go out look bar group they're clean that up cuz that's ugly and I just wanna put like like a text block in here and say testing I just want to see something show up that's all I want to see okay that looks good so now let's just copy this paste which is dangerous now we're gonna go male group and let's run it see what happens see things are going I think they're going quick now things are going quick we totally got this okay here we go so we have a ribbon check this out we have our male group here you see that and we have our view all from our male module being injected into our region's how freaking cool is that that's awesome that's what that is a gr so in case anyone is curious I used a factory method to create my object because unity picks the biggest constructor for injection okay talk about the unity stuff the the what's Yuma call it constructor or I don't remember that off the top my head the resolution stuff constructor resolution patterns thanks for the tip a gr thanks for sharing but yeah so I think we accomplished something pretty cool so let's see what happens hold on why does that keep happening okay let's actually go to contacts let's add our menus here we want to keep it consistent whatever you do in one module keep the pattern the same that way you always know where to go let's add a user control and this is gonna be called contacts group right let's go ahead and add this real quick Oh eat that mess that rid of that xmlns G equals because now we're gonna see this really work IG outlook bar group copy that go to the code-behind swap that bad boy out and are using clean those up okay we'll add a textblock they're testing again from contacts yeah we have that's will close that we are going to need to go into our contacts module we need our region manager for this so we're gonna inject it we're just gonna ask for it the seat or okay.i region manager and we'll create a field to hold that bad boy and whoops right here the heck is happening Rach a manager register view of the region region names let me control dot that bad boy add a reference to core and this is the outlook group region type of what I call it customers group customer yeah customer screw customers our customer will find out nope what's it that what I call that thing Oh contacts what I say customers man I'm still recovering from this weekend ok let's go back to our contacts group now I need a header that says contacts so the last step because we didn't let prism know about this module so let's go into our app code and we'll copy that and now we'll say contacts module there we go so now let's run our application and just like that like that quick I mean you can see once you get your infrastructure in once you get your shell defined once you get your region adapters created you know things start to move pretty fast like prism just makes it really easy once you start following these these patterns okay so now we have male contact so I can switch between those oh I lost it mm-hmm so yeah pop up now one thing we're gonna solve is you know I switch to contacts and I have to change my tab right so switch males switch to mail I get the mail tab switch the contacts I get the tabs for contact and I get this view so that's a problem we're gonna have to solve how are we gonna do it well we're gonna have to find out next week well maybe Friday I might I might start streaming twice a week maybe what do you guys think about that if I did Tuesday and Friday at the same time could you guys join or just Tuesdays at this time good for you guys you let me know I guess I might I might go to twice a week pizza Friday fajita Friday my friend fajita Friday it's got a rhyme who doesn't like fajitas man love fajitas delicious so yeah and I misspelled testing okay so I'm gonna see if I can continue this on Friday that's up now I'm out of time because it's my lunch time and I'm starving and I think to eat two hours is enough of your time I don't wanna take any more of your time I know your time is very valuable and I really appreciate you spending your time with me and this prison map were building that twice a week would be nice if I have the time hgr he thinks once a week is good twice sometimes that really you won't won't be a burden great I will take that into consideration and I will see how I feel on Friday so make sure you follow because you will get the email when I do decide to just live stream I always start the stream like five minutes before I actually jump on to give people time to join check their email write things like that so I think next week or maybe Friday I think Friday we are going to start what will knock out this last tab for the contacts I want I want the context the mail and the what is it Oh calendar I want all those groups and those three tabs created and I want us a sample view like a view that we're gonna use and then then I'm gonna start tying this all together like this is the hard freaking question you know what happens when I click on context and I switch groups like the entire context has to change my view has to change my tabs have to change everything has to change based on the context of where I'm clicking so we will solve that problem probably on Friday thank you once again for joining me I hope you have a wonderful day and I will talk to you very soon thanks again and I'll see you next time

Channel: Brian Lagunas

Views: 21,283

Keywords: brian lagunas, prism for wpf, region adapters, prism region adapters, xamoutlookbar, xamribbon, xamribbon region adapter, prism navigation wpf, xamoutlookbar region adapter, prism wpf tutorial, prism wpf mvvm, prism library, dependency injection c#, prism modules, eventaggregator prism, .net core 3, dependency injection c# unity, xamribbon prism region adapter, prism tutorial for beginners, getting started with prism, .net core 3.0, prism wpf, wpf prism

Id: yd_DtUKf3pc

Length: 119min 3sec (7143 seconds)

Published: Mon Sep 09 2019