Build Responsive ASP.NET Websites with DevExpress

hey everybody i'm amanda with DevExpress and welcome to today's webinar build responsive asp.net websites presented by DevExpress web program manager mughal harry in this session learned how to use the new dev express asp.net responsive web application template in Visual Studio C how to get started using the template enable add up to it adaptivity and how to extend the template to add more features and functionality this session is being recorded and it will be made available on our dev express YouTube channel later today and we will send the link to you in a in a follow-up email we will also do a live Q&A at the end of this presentation just type your questions in the GoToWebinar control panel at any time throughout the broadcast all right thank you so much for joining us I will now hand things over to Moore Thank You Amanda and welcome everyone to build responsive asp.net web sites with DevExpress now in the latest release we have introduced a new project template that is fantastic and that's what I wanted to show off today so our agenda today is pretty much we're going to take a look at the new project template look at its benefits why it's useful how you can leverage it and then I'm actually going to take majority of the webinar to build and customize this template so you can learn all about it and learn and see how useful it is how easy it is to customize and so we're going to build a couple of pages within it and this way it will help you to learn about the internal workings of its CSS its JavaScript and so forth and layout mainly the layout okay and majority of the webinar today is about asp.net webforms because that's what this template is built on however everything I'm showing is available for a speed MVC and I mean classic asp.net MVC and if you don't know what that means please ping me and I'll tell you all about our different product lines we have raised PD because well it seems like we have a lot today the web is varied there's a lot of different options so we provide a lot of different options for you on the web as well mainly today it's about good ol asp.net webforms and classic a Spadina MVC which is what the two templates are available for however we have plans so I can hear you already saying but wait Mahal what about X platform or white platform well I will address future plans at the end of the webinar so please hang around stay tuned because of course I want you to watch the entire webinar first and then of course we'll address questions and future plans at the end ok so that said let's talk about the new webinar now if you always whenever you're curious about what's new with Democrats just go to DevExpress comm slash new and you will find the what's new information now these are better than the standard release notes these are actually linked to demos and blog posts and all that good stuff and you can always click on the specific platform and as you can see in the latest release for ACM you see we introduced this new project template now this project template was designed after a lot of was a soul-searching but basically we didn't like the previous template it was good for its time but the previous one we knew we could improve on it so what we did is we went back to the drawing board we looked at a lot of support tickets we a lot of the feedback from our customers and one thing we realized is that of course we knew mobile is important as it grows each year but it's really important for our customers because of different scenarios and I'll talk about that in a minute now you can reach this project template by clicking off course on this demo link but let me show you as well that you can always go to it any demo by just go to dev Express calm clicking on demos here I'll click asp.net here and you when you click on this responsive application this will bring up this project template now this project template everything I'm going to show today about it don't worry there is a whole getup project where you can download the sample source code however a lot of what we're talking about today is available in the help as well so if you take a look click on this link here this takes you right to the documentation now in the documentation you'll see that it breaks down what this project template is all the options when you started in Visual Studio the project structure as well as what will be what we'll be doing today which is adding a couple of pages like a map and a form layout so all of this is available in documentation if you prefer that but we're going to actually walk through in Visual Studio today so will hopefully give you lots of great context about what and why we did a lot of stuff all right so let's just dive into this project template now this template as I mentioned we designed it based on your feedback now if you recall as I said we when we first introduced this we had we had some scenarios now we of course wanted to provide responsive design because when we looked at those customers tickets so we knew that a lot of you needed mobile support you know a lot of customers are always asking us well you know Mobile is really important to us how can you do that well over the years you've seen us put a lot of adaptive and responsive features in our controls and so what we wanted to do was we wanted to give you a really great initial we thought we'll make it a demo and we said let's go further than that let's just make it a project template that you can derive off off you can start using it out of the box and so that's why I really love this because you start using it today so it's a ready-made web application that has DevExpress asp.net controls built into it and of course with Visual Studio integration you get a wizard UI which we'll look at and all that stuff now what the what I really want to talk about is the approach we took to this now we did what we call mobile first then you might say what does mobile first mean well if you google mobile first you'll find a lot of great articles about what it is why it is all that good stuff and let's just take a look at a standard image and maybe this yeah so this is a good one from Frederick gonzalo and in it the standard approach with web design initially was responsive that said listen we know there's so tablet sizes out there are so many phone sizes out there that we can't specifically code for each one of them so rather we're going to make the site responsive where we design it on the desktop and then we'll make decisions for what happens when it's on a tablet or a phone well the problem with this approach is that when you have a desktop site we tend to make it with a lot of different components a lot of different elements and we get really a rich interface and the hard part comes in is when you have to take away and you have to make the tough decisions about well what do I take away how do I arrange it now that it's on a smaller device oh I have to go even smaller nouns ok so what comes first and so this can be kind of difficult and mobile-first says well let's flip that around and start with the smallest design a smallest screen that we want to target first and then size up and so we can get richer interfaces as we build our screen sizes up so mobile first is really a great approach for designing your website and getting a really great interface for all the way from the mobile size tablet up to the desktop now mobile first is also important because Google recently has mentioned that they are changing around some of their rules now let's see if we can find the Google first debatable tiptoe back here so mobile first has really become important for Google because Google changed their rules lately and they even put out this whole thing that says prepare for mobile first indexing and what they basically said is they are no longer going to take the desktop version so if you just had a desktop version of your website well guess what they are not going to give you the as much ranking as they did before now we had DevExpress we felt this you know for many years we had a mobile site but Google said yeah your mobile sites just okay but it's not truly mobile well you know and last year in 2018 we did a complete read we got an awesome site now Google ranks us back up higher but Google basically said that they're predominantly going to use a mobile version of the content for index and ranking now that basically means if you don't have a mobile version your site guess what Google's not going to see you the Googlebot is going to prefer that yeah we'd like it if you have a desktop site but you really need to have a mobile version because as we know mobile is super important these days and so not only in they give you some guidance on desktops and responsive and all this good stuff and so we took all of the know-how that we have for our site can be built this fantastic site now I'm going to be using a lot of the chrome tools today so you can see I hit f12 this will come up and I've got the console view so a lot of you'll see a lot of different issues here sometimes so when you're working locally a lot of errors will come up and I'll try to explain what each thing is but I'd rather than you pay attention really to the main content here now as you can see what's nice is this responsive site will automatically adapt now as I mentioned that it was built with a mobile first approach so if I take a look at the device toolbar here and you can see if I'm emulating an iPhone 10 or a galaxy s5 you can see that this responsive site built with DevExpress looks great and it has several elements like a navigation bar sidebars that we'll talk about in just a second all that but it looks great regardless of the layout so let's say I've got an iPad pro and you can see as I size up that it's updating automatically I apologise because if this looks a little small let me make it a little bit bigger here and you can see that the site is responsive it is adaptive regardless of which layout that I have now if I just go to a standard responsive layout you can see that the size will automatically adapt so let's keep this at a hundred percent and now as we adapt the site out it will look fantastic ok so let's talk about the site itself there are several main elements of the site first and foremost is the appearance is built with a DevExpress office365 theme but it's highly customizable as I'll show you in a little bit but then the layout is built with four main elements and that is a navigation bar sidebars and adaptive toolbar and a sticky footer so let's talk about this so this is the navigation bar at the top here now this navigation bar it is a fixed height toolbar at the top of the page and the template uses a sticky navbar essentially that says listen I'm going to stay here regardless of how you scroll the contents on the page now what's great about this is that regardless of and let's hide this here and resize the browser completely we can see that as I resize the browser completely the navigation bar does a couple of things first and foremost its sticky but also as we size down we can see that the menu will now collapse into an icon but it still gives us access to it now this is great for mobile devices so not only does it do that but it gives us some other options for mobile as well so if we take a look we've got not only does this menu collapse but we get this sidebar that as we size down collapses into this hamburger menu and we've also got this image icon with a company logo now I've got several pages which I'll talk about in a second but the logo also acts as the same as the home button as we typically come to expect in any standard website now we've also built in a sign-in button here that when you click will bring up a pop-up for the standard sign in and register icons layouts now what's nice is this is built with DevExpress controls because a lot of times customers say hey we want to use the standard microsoft login or whichever login you prefer but we want to you wanted to leverage DevExpress controls so that it uses the same theme well great news this supports that now on certain pages you also have additional sidebars so for example on the gridview not only do I have the left sidebar I've got an option for a right-hand sidebar as well so that is great so the as you can see these side bars are another element that are collapsible so as we resize we saw that can collapse down or they can be expanded now we saw the grid view has a right sidebar but the scheduler does not and so that's controllable by you as well now great is that each of these pages can also have a sticky top toolbar so as you can see on the scheduler here we've got a sticky top toolbar that when we resize will stay here so as I resize you can see that this toolbar stays here now what's nice is as we resize the toolbar can also collapse those buttons here as well so the sticky top toolbar along with our navigation bar gives us additional options for what's on the page so the menu items can hide their text and display only icons and the items can hide one by one to the pop-up menu so as I resize this that we can see that if we as we start losing room those items will go and be hidden in the menu now as we see when I resize each of these items I've got a rich desktop but it's smart enough that as I lose certain things that this will give me a great view regardless of phone or tablet that I'm on okay so lastly let me talk about the adaptive page layout content now for the content we made a key decision in error and there's two ways to scroll on a page they're scrolling only part of the page which is what this the scheduler does share and this makes sense for the scheduler because it's a big control we needed to take even though it interacts with these other DevExpress controls like the calendar and the list box and so forth in the filter it's really the scheduler that is the star of the page and we wanted to have essentially full control and so it's going to scroll only part of the page however the more popular approach these days is that we scroll only we scroll the entire page and display a scrollbar on the side here and that's what's happening here with the grid view so you can see we've got a sticky navbar and sticky tool bar but as I scroll the page really it's the grid view that gets scrolled and so we said that we wanted to show you how to do this in both ways typically the grid view approach or a scroll the entire page is generally the popular approach where you have sticky elements Andry scrolling the entire content area but you can see that this demonstrates both approaches for you based on how you want to do this now the final bit of things i don't want to talk about is the adapt the readability and so a lot of times our customers have a lot of content text that they want to display and what's nice is that we added CSS rules and so this is adaptive content that's using certain items from DevExpress themes and that's why it looks really nice and so I'm going to be talking a little bit about how you can apply that when you are using this project template so we'll talk about readability as well and what's nice is that we've added for example certain rules so if you if I click print here you'll see that it hides certain elements like the navbar and the sidebars and gives me only content that I want to print and it makes it really nice and so that's all built in to this project template alright so let's just dive now into visual studio I'm going to go kind of fast so as I mentioned don't worry all the code will be available and I have faith in you I know you'll be able to keep up all right all joking aside it's actually pretty easy because we made this available as a project template so if you click on file new project in Visual Studio you'll see under visual c-sharp web or Visual Basic web just DevExpress template gallery now let's just select the standard name here click OK and what we'll see is we've got a under asp.net now you'll find it under all as well you'll see that you know there's all these platforms but I say filter it out by clicking asp.net and if you click on responsive web application under web forms or MVC you'll find this project template as I mentioned today for the sick time I'll go with the response the web forms of course if you want to see other platforms let me know and we can do other webinars in the future the MVC approach just as you remember has some differences in terms of views and controllers and all that kind of stuff and like I said we can do that a whole separate webinar on that if you prefer all right so under web forms I'm going to click run wizard now when I do this what it's going to do it's going to bring up a very simple wizard that really has one major option that you want to focus on and that is the theme settings now what's nice about this as I mentioned that this is using the office 365 theme you say well wait a minimum all in the past you always let me switch the theme to some other DevExpress the thing is we have really you know like Johnny IV level designers that said look we've made a great project template here let's not just you know completely mess it out by completely changing the theme now after you create this project you can still go in the project template and change the theme if you want I suggest you change only these project based color or the font family why because this will still give you access to all of the you know you can make a custom base color and when you do that we will adapt from the base color and say okay well the different highlight color should be dis or you want to change the font family from let's say say go e to trebuchet well will suggest a right font size of course you can still control and change that now I'm going to stick with the basics but you can see that we are giving you guidance here and so this guidance will help you make a great looking website regardless of the color and the fonts that you choose okay now you still have access to the standard a speed without net items like the content lands or the localization options so I'm just going to stick with the standard options and hit create project now while it's creating the project let's take a quick look back again at that documentation as I mentioned the project structure is pretty standard what it's going to do for us it's going create an account folder for the log in register forms and app data folder for the things like the text article content and XML file as well as a sitemap file which we're going to be dealing with as well and there's a code folder for the DB context and the authentication helper code we're not going to be focusing on any data binding stuff today as I mentioned I want to focus really on layout and how to leverage this template I am for source certain that 99% of you know how to take care of data binding with web forms okay and really we're going to be talking about the content folder and it this contains all our assets like images CSS JavaScript and of course the root master file that does a lot of the magic for us and really the root folder that has the grid view and the scheduler okay so now we've got a project template built for us now I'm going to stick with the is Chrome I've got a couple of other browsers installed just like the chrome dev tools and I'm going to hit ctrl f5 so you'll see me do that a lot today and the only difference from that versus f5 as you probably know is that it doesn't attach to the debugger so it's just a little bit faster it just starts to pious Express and runs it to load this up locally okay so from file new I have locally be exact same demo that we saw online and so just from doing that I've got a grid view that has other elements I've got a and what we the reason we did this is we made it interact with other controls so you can see how these controls interact from the client side so for example from the toolbar we've added some buttons that brings up a modal form so you can see how to do that from the code all this good stuff is built right in and as I mentioned it's adaptive it's responsive all those features we've enabled out of the box so you can see that there's a lot available for us now as I mentioned I'm going to be using the dev tools a lot here and as I mentioned that you can test this yourself I recommend testing this on your actual device so you can see how nice it is okay so let's do this let's add a couple items now what are the things is that a scenario that's very common with our customers is in web forms they are building forms for the web meaning that you have forms over data we have a database and we need to expose the the content of that database so one of the things is that's very common is that our customers really need to build several forms and so we've built a control and if you look at the asp.net technical demos you'll see under the navigation and layout there are several great controls one of them is what's called will be called the form layout control now the form layout control essentially solves this issue that lets you build forms so typically to build this form you'd have to say okay well I'm going to drag this text box and I'm going to drag a label or maybe I'll do that and data bind it well this form layout control essentially helps you do that by saying listen you can drop a DevExpress form layout control data bind it and it will let you build that form and customize the heck out of it so it's really great and what's nice is it's got responsive features built into it so when you are on a tablet or so forth and it's got adaptive features as well so I'm going to be let's do that let's build a page where we actually add this specific form to it now as I said today I'm going to be using a lot of the online code and in the past you will see that I recommend a different approach so first let's add a page I'm going to right click on our form I'm going to say add and I'm going to select new item the reason I want to do that is that you want to use the webform with master page now we'll call this form layout because we're going to be able to building a form layout page and it's going to say well what master you want to drive off of we want the Routemaster now the Routemaster page if we take a look has all the smarts built into it so not only have we put in that you know viewport we've got a special content and layout CSS JavaScript that does all the reaction for you know I'll talk about the JavaScript a little bit later but as you can see we've built all the menus out of it we built all the toolbars all of this is built in for you we've even got a footer so you can link to your own privacy policy in terms of service so what's nice is when you drive off of that you can see that we simply give you the sections that you're going to need here's the head section where you want to put in links to CSS and JavaScript we've got the left panel content right panel content toolbar and of course the page content that says here's where we're going to put in our main area so now you can see just by adding a page and deriving off that Routemaster you have a really great layout so now as you can see I've got this content that I've just added myself so let's do this let's build this out now before I built out a page what I want to do is I'm going to add a page control so we don't just have a form layout maybe we have some other pages for content as well so what I want to do is I'm going to bring in a page control and the page control as you'll see is a really versatile control now you can find its demo under navigation layout under tab control and you can see the page control allows you to do that so we call it the page control slash tab control and what I'm going to do is I'm going to bring in this code now why would I do that instead of dragging and dropping in well a lot of times the customers say you know how do i leverage how when you guys show me these demos and I'll show you that you can do that by a lot of times just bringing in the code but you want to be a little bit careful about it so the first thing is I brought in the code and as I mentioned you want to be a little bit careful because as you can see it's referencing a CSS class that I don't have because I just copied it from DevExpress comm and so I'm going to remove a couple items here the active tab index as well as the CSS and we want to replace those images so right now I've got some aspx images for the London Tower Bridge so I don't want that and let's do take away these other tab pages instead I'm going to make a couple items here and we'll call it a page one and so forth and so what this allows us to do is it's going to allow us to create other tab pages ourselves so now I can say listen I've got not just one tab one page two three four and five and so we can come in here and rename this and we'll call this page one page well this will be page five but you get the idea so let's go ahead and change these over to the other names that we want and so we'll change this to three and as you can see that this gives you full control over how to do this so now we created five pages and we just updated their text so now if we take a look at this in the browser just by adding that I've got the form layout uh sorry the page control available on my page now what's nice is that if I hit f12 here and as I start resizing this as you saw we've got all those features I've got the collapsible side panels available but you can see this page control isn't very adaptive well the good thing is this control does have some responsive features built into it so as you can see that if I start resizing this page here that it starts hiding some of those tab controls and gives me these nice scrollable buttons well how does it do that well we'll see that if we use this property called enable tab scrolling it gives us that out of the box so let's do that we'll come in here and say enable tab scrolling and we'll set that to true and as soon as I do that we can see that I have now a [Music] scrollable button available on it now we can see just by adding a simple feature on this control you can really start leveraging the DEM Express controls power all right so let's bring in now the form layout to do that we're going to go back to the demo and simply copy over what we saw earlier so as I showed you we've got this formula out it's got this adaptive grid layout and to use it I'm going to go to the aspx page and copy it over now you can copy the entire page by clicking this little copy to clipboard but that's going to copy the entire HTML page so what I'm going to do is I'm just going to select this form layout copy this and we'll bring that and replace a page one here with the content of that form layout now I do want to make you aware Visual Studio has a lot of shortcuts into it one of them I believe is called control K control D which essentially aligns all of the code here so I'm going to say control K control D now as I mentioned you want to be careful when you're simply pasting code now as I mentioned in the past I recommend that you go to design view drag the control from the toolbox drop it onto the form and then use the properties tab to customize it and yes you can still do that and the reason I'm showing this approach today is because Visual Studio has come a long way in how good it is even on this text view so mainly um today I'm going to be dealing with the text view so let's customize this and as I mention you want to be a little bit careful so when you when we're dropping this in here I want to be careful because I don't have any data binding that I copied over so because I don't have that I want to remove anything with a datasource ID so I'm going to remove the combo boxes data source ID and text field because I don't have this data bound to anything so and I also want to change the form layouts caption so right now it says registration form so let's call this data entry form instead of registration form and therefore we should probably change the text button as the text of the button from signup to something like submit all right so just by doing this and having the form layout from the demo we had a width of 100% so just by doing this we can see that the form layout is now going to be under the tab control and we have now laid out a new page so as you can see not that it's come up and now that I hit f12 we can see the form layout not only do we have the collapsible side panels but the form layout is adaptive and it's going to look great whether it's under mobile tablet or desktop device now let's start adding some content to our pages as well because a lot of times we're not just going to have a form control so I'm going to bring in some content now I'm going to let's put a copy over some of this lorem ipsum text because it's you know Latin and it's the standard text now though as I mentioned a lot of the content for the pages for like for the article page is in the app data folder so if I go to article that HTML you can see I'll just ignore this line endings warning here I'm going to copy over a couple of these paragraphs and we can simply add them to our page as well so not only should let's add it to page two here and it will be interesting to put a some kind of heading that says some content now what's nice is we can also now that we got this content added to our form layout control as well so let's add it to the bottom with form layout control and paste it now as I mentioned visual studio has a nice shortcut if I hold down control and hit K and D it will realign all that text okay so let's see what this looks like now in the browser now as I mentioned we have our text and it looks okay I don't think it looks great though in this case when it's small yes it's readable I can see it but it really doesn't look like that article page in you're seeing yourself in the hole you said it's a readability it was kind of built into this well readability has a lot to do with how the text is formatted and in this case we don't have any margins set on this so let's do that let's see how we can start setting up some CSS and some margins for this text content so to do that what I want to do is I'm going to wrap this stuff inside of a div so let's come in here and first wrap it in a dip now you might say why not just add a width to the form layout yes you can do that but it's really not the smart way to do that what I mean by that is that you can start adding individual CSS items but really the better way to do it is to leverage the items into a central area so we've got a gridview CSS for the grid view page we're going to overall content CSS that has a lot of the content rules for the entire site and so we should really make one called form layout CSS and so we can start applying a lot of the rules there all right so to do that I'm going to wrap this form layout and this content here inside the the dip now as I mentioned visual studio has gotten better so when I first was working on this demo I actually put the div here and I said well wait a minute why is Vicious did you not give me giving me this closing div and I said okay I'll just type it in and visual details like hey wait a minute this end tag has no matching start tag and I'm like wait a minute why is that and that's because I decide the content control area and this div should really be over here because the form layout control is over there and visual studio says oh yeah okay that's good you are now putting the div in the right place and so let's we want to do a similar thing here and wrap this in a div as well and so now when I close this you can see that we can just simply come in here rap the day of here as well and so again I put that in the wrong place we should show your complaint so let's put it in the right place hit ctrl K ctrl D alright so at this point we simply just wrapped it in a div which will do essentially nothing at this point because we actually haven't defined it so to really set this up properly what we want to do is we want to set up a class that we can refer to in our CSS so I'm going to say that this is the form layout container and so this form layout container actually let's call this understood it's good to have the first letter be lowercase and so I'll call this the form layout container class and we should do this with our div here as well and then what I can do is I can say let's create a CSS file that we can reference this form layout container okay so I'll come into the content folder right-click say add and say style sheet and we'll call this form layout and now instead of body I'll say I've got a form layout container of course you need to dot and this formulaic container is going to have a maximum width and now this maximum width can be defined in several ways I'll just set it for 900 pixels and you might say well why so big well actually because and I'll show you this in a second now you might say okay why I've defined a CSS I've got the container is it going to work well of course it's not because we're not actually referencing the CSS and if we take a look at the grid view page in the head section we can see that we've got this stylesheet link and so I'm going to copy this over and bring it in to the head section of our page but instead of grid view we want to call it form layout okay so what we did was we now have a central area for our form layout page that we can put a lot a lot of for rules and if we take a look at this in the browser now we can see that our text is looking a lot more readable and so not only is looking great on this it's looking great here and even if we are going to resize this we can see that text is still going to look great and it's still going to collapse down our main content is here and on the desktop it's going to look great because we defined a maximum width as well so you can see a lot of these stuff in our own content CSS items here as well to see what we did for the text content what we did for the those printing rules all that stuff is built in here and for you to take advantage of so you can even start using some of these rules directly as well now we've made the content readable we've got a form layout let's take a look now at that form layout a little bit deeper because we can see if we take a look at the text selection here element selection and I highlight this here if you see this green area on the left and the right-hand side of the form layout we can see it does not align with our div content here at the bottom now this would make any designer super angry they'll say what is happening here I'm okay with the padding's on the top and the bottom but I don't like those items and so to fix that what we can do is we can come into visual studio and there's a property of the page control I'm sorry another page control the form layout control that we can use and it's called use default padding and so I'll say use default padding and I'll set this to false now what this will do is it's going to say I'm going to get rid of those extra default padding's and now our content aligned however it also got rid of some of the top and bottom of padding's and so let's take a vent äj-- of that CSS file we created and do that so let's add a CSS class to the form layout here and we'll call it form layout and so now we can come back to our form layout CSS and define the uh padding's for this forum layout so now simply by adding that CSS class adding a padding top and a padding bottom and now taking a look at this in the browser again we'll see our form layout not only will have it aligned on the left and right hand side but it's going to give us those extra padding at the top and the bottom now if in case you are working with CSS or JavaScript a lot of times the browser's sometimes they won't breathe they won't refresh those files because they like to cache it to give you better performance you can always hit shift f5 or ctrl f5 which will reinvent it which will invalidate the cache and redownload those files so I recommend doing that if you're working sometimes you're saying well why does it update the way I wanted it to so now we've got a great forum layout and it looks fantastic let's make this page a little more interesting and if we saw in the grid view we've got this really nice left-hand side content so how do we do that let's do that let's bring in some of those items from the grid view page specifically and if we take a look at grid view we can see that it's got a lot of great sections here it's got the toolbar and all this kind of stuff but if I do a search for left panel I've got this left panel content area and in it I've got a nav bar so let's do this let's bring over this nav bar into our form layout page ourselves and so and I'll put it right inside the left pot left panel content area here as well and align all the items now instead of calling it filters let's rename it and call it categories so we'll call this categories and we want to be careful about when we copy this some of this stuff over so as a mission that you if there's some CSS you might need well you want to be careful and I'll mention that in just a second but also let's also change around so instead of having all of these items here let's take out most of these items and instead put in what we called categories so I've got instead like category 1 and we'll change the name to category 1 as well without a space and remove selected two well we'll leave selected to true but we want to make sure that when we cut and paste and make additional categories that only one of the items is selected ok so now I've got a few categories and I've renamed them as category 1 and 2 and so forth now you you let's take a look at this now in the browser because I want to show you that you why you should be really careful about how we cop and a cut and paste when we do this kind of stuff because it is easy we just to do helps us out a lot but that doesn't mean we always solve all the problems and the first thing we'll notice is that if we take a look at the grid view page here the grid view page its side bar has hot tracking it also has the selected item and in stick you'll get ours ours doesn't have any of that stuff and if when I click on a category I don't get anything being selected well what's going on well if you took a look at the browser tools we've got an error here and it has reference error on filter navbar item click ah ha so it looks like I've got a client side event that I don't have the code for so I'll simply remove that so that's one thing we want to be careful about now if we take a look at the code ants are in the content folder for the gridview CSS we can see that there's also some CSS that we can copy over into our own CSS and bring that over so now I've got the some CSS as well and if we take a look at this in the browser we'll see that our form layout should remove that first of all that air that we got rid of but also we've got hot tracking we've got some better-looking categories as well and so I want to point out now a an interesting item of this page control on sorry this navbar and that is it's got a way to navigate to specific URLs so let's say we put in a property here called navigate URL that says listen when I go to this I want you to go to a specific page the form layout page and so let's copy this over and say listen for category two I wanted to put a query string parameter of two and three now you might use this query string parameter for something maybe not well what I want is when I click this item I want it to navigate to it well how do you do that well there's a great property inside the nav bar that you can take advantage of called a sync selection mode and so sync selection mode has a cover options of by default it's of course none and there's a simple one called current path so let's actually first set it to none and so when we set it to none we'll see that when I click on item the crashing parameters there but it's not selecting my item in the navbar or if I navigate using the euro URL it is also not selecting it well sync selection mode helps us solve that by saying listen if I set it to current path in query and then take a look at this in the browser we can see the form layout has that option now so when I go to category three or with our browse to it from the URL string here we'll see that in update all right now we can see in the grid view page we've also got that sticky toolbar so let's do that but instead of bringing it from the grid view page let's bring it over from let's say the scheduler here all right to do that of course we're just going to bring it in from the page itself and if we take a look at the page toolbar area we can see I've got this entire SPX menu copy this entire thing over and we'll bring that in to our toolbar area now if I paste this and hit ctrl K control D now I want to be cute as I mentioned I've learned my lesson so I don't want to keep anything I don't need so I'll remove this client-side event which we don't have a need for let's remove the client instance name as well and we'll remove the we can remove the CSS class I don't think we need to bring in that toolbar but we saw earlier we can simply go in and copy that content over now the one thing is I don't want to call it scheduler this is the form layout toolbar so I'll call the form layout toolbar in case I have any need to reference it and let's change around instead of calling a scheduler we'll call it form layout now we can see that we have other controls in here as well now we can customize this we can hook this up and you can see in from those pages how to do that for now I'm going to remove that just to show you that just by adding this toolbar we have a great toolbar available to us so now if we take a look at this in the browser we have built up a full page in our item it looks almost like the grid view we've got content here that's readable it's adaptive it looks great on different items now you might be saying that's great but how do i navigate to it how do i have a how do i add it to my menu well it's really easy if you go back to the app data folder in it we've got this sitemap file now to add any items in there you simply come in here and say I've got a new item in here and it's called the form layout and of course we'll call it form layout and if we take a look at this in the browser we can see that we've got the form layout and you might say well yeah that looks great but you know what about the icon well you can see that it's missing an icon when it's in the collapsed menu well to solve that all you really have to do is if you go into the images in their content you can see we've added several HV SVG files so what I'm going to do is I'm going to copy and paste a couple of the gridview files I've got grid view - a white and grid view that is available so let's rename this so the way this works is it's by convention so what you need to do is you need to have a file that has the same name as the title of your node so in our case it's form layout so I've got now an SVG called form layout and to find the selected version you need to have it called - white and so let's remove this thing that says copy and rename this to form layout so now I've got form layout and form layout that's white and if we take a look at this in a browser now we can see that we have icons excuse me icons available for this item as well all right so now we've got an icon we've got a menu option that takes us directly to the form layout and it's responsive it's adaptive it's fantastic okay I've got a few more minutes so let's take this opportunity to add a map now we saw earlier that when we add a page we're going to need to add a note now I haven't added the page yet but I know it's going to be called map so I'm already adding the menu option here while I'm inside of this so I've got map here now let's do that let's add the map control by coming up here on the project right-click slike add select new item as we saw before it's going to be derived off of that route master page now I'll call it map I'll hit OK and now we've got the map page now you might say what kind of map do we want to add well let's add something from Google Maps to leverage Google Maps what we can do is if you go to Google Maps and select any area in my case I've selected Los Angeles California so here's Greater Los Angeles here's good old Glendale and that's that's me I'm actually here right now as I speak and so what I want to do is I want to embed this portion to do that Google lets you select this share button and says and it's got the embed a map section so I'm going to copy this little iframe code here I'm going to select copy HTML and what we can do now is we can come into our page content and paste essentially this iframe right in here now if we take a look at this in the browser I'll hit control f5 and this will bring up now our math page oops let's bring it up into the right browser all right so if you take a look at this in the browser this map now is here but it's not responsive or adaptive really well we can easily solve that so the first thing we want to do is we want to change the width from fixed to 100% okay and just by doing that our map is going to give us a responsive map that's going to have already a great way to change this now you might say well yeah but what about the height well we can't set the height to 100% well the reason is because we've got the sticky footer now this is of course one of the elements that we baked into this for you and this could be really important as you know you know rules for web sites are changing I'm sure last year you saw with all of the new items from different items that people have been changing their privacy policies in terms of service and it's important to maybe display this so we've got this footer and you don't necessarily just want to set this canta 200 percent and hide your footer we need to have a smart way to calculate the footer area as well as the window height and do a little bit of math and say listen change this and if the browser changes size changes I want you to change the map as well so how do we do that well this is where we're going to need to do so javascript well okay to do this is actually fairly easy when you see what we've baked into this project template for you so what you want to do is to set up a height we're going to need first we're going to refer to this iframe now we can wrap it in a div but it'll be easier just to give it an ID that we can reference in our case we'll call it map container and now we can refer to this in JavaScript so what I'll do and as I mentioned you might say mole you've been doing great you bringing in a map GS file now yes and that's just to spare you from watching me type all this JavaScript but essentially it's a content that's interesting it's really well documented but we can see we've got something called a just map container that says listen get me that element so it's going to go look for that map container and it's going to go get us that element that iframe element and then via JavaScript it's going to reference it called container and then we're going to get the footer wrapper element grab its height and call it footer wrapper ID and then we're going to do a little bit of math that says calculate the height find out the winner windows inner height the footer and the header panel and then we're going to set the containers height to that so essentially we're doing a little bit of math to figure out how high the the window is and the header panel and the footer wrapper and making putting the wrapper in between them so that's great standard map nothing fancy there what really is interesting in this file what I want you to pay attention to is this delegate method and as it says here this delegate method is called when the available page content area is resized whether the browser is resized expanded or collapsed and you might say Wow well that's fantastic it is fantastic why because this delegate method is baked into the standard script J's file and so this is exposed to you and you can leverage that and at anytime you have something on a page that you say listen this is going to get resized I want to kick it off I want to I want the bra I want this project template to kick off this client-side method and do some calculations and do something on the client side but that's what this method does for you so it's hooked right in several of our controls may take advantage of it and you can as well and so let's do that so we've got our starting that form we've got our map page and so how do we do that we have our code in map GS and it's called a just map container and what we want to do is we want to really call this on map in it to do that what we're going to do is simply we're going to add on map in it so we're going to come in here to our map aspx file and and right after the iframe we're going to add a script tag so I'm going to call a script tag and inside the script tag we can say on map in it and this will call that method and any time the browser resize it's going to call it and do that calculation and adjust this maps height but you might say well is it going to work of course it's not why because we got to bring in and use that file so I'll go I'll go back to grid view file here and I'll take a look at and I'm sorry I'll copy over this script tag that says listen in the map aspx file under the head section I want to call map jas and so now it's going to reference the map GS file so when we call this map in it it knows where to get it ok now let's take a look at this in the browser and as you can see here our map has not only an auto height as you'll see it's also got our footer that it keeps displaying so as I resize the browser the map resizes as well now there's one last thing though that is not looking quite right and that is I've got this scrollbar so regardless of how high I make it that scrollbar is always there and it's annoying and so here I to point out one thing and that is I have to use a little bit of a CSS trick because this is actually a little browser bug and yes it's been reported in Chrome and you might say well chromazone by Google and Google Maps is owned by Google as you know large corporations have several different part departments so I'm sure some team at Google is looking into it but essentially it's just a little browser bug that you can fix with a little CSS and so what I'm going to do and I you know I'm not a huge fan of doing it this way and neither is Julian so you likely want to add your style to a central content area maybe call it you know map CSS and reference it we a CSS class and all that for now I'm just going to put it in this style section and that is this vertical align text to bottom and so if we take a look at this in the browser now we'll see that it has gotten rid of that little item and what's great now and let's take a look at this in the browser tools now you might be going hey wait a minute what's this error and that's because if you remember I didn't define the icon file so I can simply copy over a grid view and rename it map SVG and map - why dead SVG and that'll get rid of this error but essentially it's looking for a resource that it's not finding so let's focus back here because we have built a fantastic site and as you can see regardless of the size it looks great so I've got a responsive layout I've got a standard layout and let's look at look at our form layout I've take a look at our map it's adaptive it's a responsive and as you can see I've got these collapsible panels now one thing I want to mention about these panels is if let's say on the map I didn't want this right-hand panel I can easily come in here and say listen I don't want that content area so we can remove the right panel content and if we take a look at this in the browser and let's bring this back up here and I'll simply refresh this page and now if we take a look at this year it's gotten rid of that right hand content area altogether okay I'm pologize I went a little bit over and I'll stop it here and give it back to Amanda I mean is there any questions that we don't answered hey mol the team has been flying through we had a lot of questions there are a couple that have not been answered yet though could you okay so something but is there a path to update existing projects or just copy case I would say no because this essentially is baking in a lot of smarts a lot of the new CSS and JavaScript so I recommend you're better off to create a new project and then bring in the code as I did from the existing pages and then just rebind and so forth so really what we're doing here is we're leveraging we're building that shell so I would say go with the new shell and use that approach Curtis asked is this available in 17.2 no this is available as of 18.2 so Curtis upgrade you know you want to all right is there a long-term commitment to support this application so I promised you that I would talk a little bit about future plans so let me do that now and when we first released this blog post the comments were great but a lot of them was like yes but what about dev Xtreme so we have already announced that we have plans to bring this over for dev extreme and asp.net core in 2019 it's part of our roadmap and we have also announced that this is going to be available for bootstrap web forms as well so this is coming to bootstrap web forms in 2019 the exact same responsive project template now one of the thing I want to mention is if and again I'll post when this goes up on YouTube I post all these links in the description as well so this is available under DevExpress examples it is one of our awesome code central examples but you can fork this right from ah so there's something about this project template you did not like you can fork it or you can use it right from Visual Studio as I showed so this is fully available to you and as you saw from this Here I am on Twitter so find me on Twitter at Meharry or email me it may hold H&M Express if there's any questions the best thing the best way you can give us some your feedback is use this project template let us know how it's working for you if you find it some kind of issue like a lot of our users are using the new Galaxy Note S 59 and we had this issue let us know I'd love to see what you've built with this I'm always excited to see customer demos and a lot of you have by the way we just can't show you because we respect our users privacy so we don't show you other customers information but we'd love to see it when you share with us privately through support or emails and so forth now there's questions about like how do we make the grid responsive again go to the demos a lot of the demos show you a lot of this stuff as a box there's you don't make just a grid essentially responsive there isn't one feature a lot of times some features make sense to be responsive and some don't the preview is a bit control like the scheduler so as it makes sense there are features that you can enable and say hey I want this part of the grid to be responsive and I'll disable this feature when it goes on mobile so you can make those kind of decisions yourself the greatest largely responsive now if you take a look at the demos now is web forms it's oh here's a great question is web forms app with them express controls lean enough Willem ah I would say yes you know there's a lot of knock about it and this is where how do I say it the short answer is this is where the developer religion comes into it saying hey this platform is better because it's more leaner hey listen whichever platform for you I don't really care right there are great websites out there that you will never believe we're built with web forms or react or so forth you have to take a look at what your developers are good at what works for you and at the end of the day you can make any platform good or bad and yes there's advantages we know these days client-side is way more popular but that doesn't mean web forms is gone we see the numbers as does Microsoft and we know how popular web forms is which is why you know the turnout on this webinar was great so you know it's up to you if you prefer the react approach wait until the dev extreme team puts out a project template based on that but for now this is web forms this is MVC and you can use that today we feel our web controls are very lean very fast they don't have as many client-side features though right that's what the client-side dev extreme library is for so if that's what you want so is there a ton of client-side API yes but these are server-side controls they have a lot of great client-side features and as we see more and more are there but at the heart of them these are server-side controls that means they get rendered on the server side and I would say if you're NHP dotnet developer you love that you love that feature to be able to do that so again let's not really dive too deep into that with that let's end it here I won't give back to Amanda but please feel free to reach out to me you know I love talking to you and here's all my info again I thank you very much for joining us today Amanda I hand it back to you awesome thanks Mahal all right everybody like I mentioned before today's webinar will be available later on our DevExpress youtube channel the link is posted in the chat box while you're on our youtube channel please subscribe and ring the bell so that you're notified when we release any new content you will also get a follow-up email with a link to this rep webinar recording and that is it for this one thank you so much Tim oh cool thank you all for joining us and of course thank you for choosing DevExpress bye bye you

Channel: DevExpress

Views: 29,991

Rating: 4.7232704 out of 5

Keywords: Developer Express, DevExpress, ASP.NET, ASP.NET WebForms, ASP.NET MVC, Responsive, Adaptive, Grid, Scheduler, FormLayout, Google Maps

Id: xXWlLIkg_hM

Length: 68min 10sec (4090 seconds)

Published: Tue Feb 12 2019