web app table design
naomi black: all right. actually, i think yourname is thomas, yes? tom burleson: yes, it is. i almost forgot. naomi black: yes. it's good to know. ok. so who are we? i'm naomi black.
i work for google. i'm a tech manageron the angular team. tom burleson: my nameis thomas burleson. i'm the team leadfor angular material, and we are reallyexcited to be here today. naomi black: we areso excited to be here. so last year at ng-europe, weannounced angular material. we showed you guyssome components, we pointed you to our websitematerial.angularjs.org,
where you can finddemos and online docs. but we've done that. what should we do now? tom burleson: today, we'regoing to do something different. today, we want to build[inaudible] an angular material application, from scratch. [applause] naomi black: so whatshould we build? we were thinking, since werecently posted a starter app
to material.angularjs.org,we would step through it, and show you how you canactually build it, and take these componentsthat we've made, and connect them togetherto make a real app. tom burleson: awesome. let's start building the app. so let me take a stepback and actually show you what we're going to build. so up here, we've got a toolbar.
it looks like we're going to usesome-- these look like buttons. we've got icons. we have md list and listitems, some content. this looks like bottomsheet over here. we've got a lot of componentswe can put together. tom burleson: and it supportsresponsive breakpoints. naomi black: this is exciting. all right. let's get started.
tom burleson: i'mready to start coding. naomi black: no, not yet. not yet. let's tell people whatwe're going to do first. so first up in thistalk, we're going to tell you how toplan your layout and figure out what componentsyou're going to need. next, we're going to talkabout adding angular material and dependencies to your app.
tom burleson: andthen afterwards, we're going to start adding some html. we're going to startoff with hard-coded html and mock content. and then once we seethat it lays out properly and looks the waywe want it to, then we'll replace that withdynamic html and wire in our custom application logic. naomi black: we'll also showyou how to add responsive break
points so that yourcontent flows appropriately on different sized screens. and last, we're goingto talk a little bit about accessibility testing. tom burleson: are weready to start coding? naomi black: i think so. are you guys ready? should we write some live code? tom burleson: all right.
oh, false start. i misdirected you. i did this on purpose. i want you guys toreally get in your heads that it's important to planout your app and your layout before you get started. so let's think a littlebit about what we actually want to build on the page. so we're going to have atoolbar area at the top.
it looks likewe're going to need a sidebar on the side andsome content next to it, and then some kindof a div or something to hold all thosepieces together. tom burleson: right. and what we're looking athere is a master detail type of view. we're all familiar with that. but more than that,this thing is actually
going to adjust its layout andresponsiveness and fashion. tom burleson: now arewe ready to start? naomi black: now we are ready. let's switch overto your code screen. tom burleson: ok. oh, that's your machine. naomi black: that's my machine. that won't help you. so the first thingwe would need to do
is we need to download ourangular material libraries and the dependent librariesof angular material needs. normally, we would usebower, or we could use npm, or we could use jspm. we've alreadydownloaded with bower. we've download and installedthe angular material libraries. now what we need to dois load those libraries into our html page. let's do that.
naomi black: so what youhave here is just a skeleton. i see you've got a bodyand not much else going on. that's a completely blankangular js application. there we go. so now we've given the scripttags to load the angular material libraries. so here's the angularmaterial library. oops. let me try to reduce thesize here a little bit.
naomi black: i see you'reloading those from the bower components directoryand not pulling them from rawgit like i didearlier the angular io site. this would be agood time to mention that although it's really usefulto use something like rawgit for prototyping andtesting, before you go to a live productionsite with lots of people looking at it,it's good to point to a cdn. tom burleson: now thatwe've loaded the libraries
into the page, the nextthing we need to do is adjust ourstarter application to have a dependencyupon angular material. so we're just goingto come down here, and we're going toadd a dependency. and then last butnot least, we have to remember to load thestylesheets for angular material. so we'll go up to the top,and we'll add the stylesheet.
naomi black: so there'sthree main things that you need to dofor angular material. one, you need to actuallyadd angularmaterial.js plus our other javascriptdependencies on aria and animate. you need to add our css. and you need to make surethat you're adding us into your module down here. tom burleson: now, thenext thing we need to do
is start addingsome html content. and we'll use some mock content. so let's see if i can remember. we had the toolbar at the top. let's see if i cankeep up with this. so we had the toolbar. naomi black: and thenunder the toolbar, some kind of a div to holdall the content together. tom burleson: got it.
naomi black: specifyhow that lays out. and then we have the sidebar. naomi black: and thennext to that side nav, we're going to have somekind of content, right? tom burleson: got that. naomi black: ok. let's drop some content in. maybe you can throw somebuttons and some icons into there so we can see whatthis looks like on the page.
tom burleson: excellent. let's use an md listcomponent, and we'll add it to the sidenav where we're going to display our list of users. so now we have the angularmaterial list component, and we have two list items. we have two buttons, ora button in each item. and we have an icon, and thena label for the user's name. that's in the user's list.
now we have the detail view. let's add some mockcontent to that. i think it's looking good. let's go look at theweb page, shall we? naomi black: let'ssee how this looks. tom burleson: let'sclose out of this. so that's looking pretty good. naomi black: that'slooking pretty sharp. but didn't we have a side nav?
tom burleson: we do. let's take a lookat the elements and see what's going on there. there's our toolbar. and ah. so the side nav, whenyou initially create it, it's rendered in a closedmode offscreen to the left. so if you want itto be visible, you need to make sure thatit's in a locked open mode.
naomi black: oh, let'sgo look up the api docs. i can't remember thesyntaxes for that. so our documentation has afull suite of information. and let's closethe service section and scroll down to the componentfor the side nav, shall we? here in the sidenav, if i look down, i can see that there's anattribute-- md is locked open-- that we can use to make surethat side nav is locked open. naomi black: that lookslike exactly what we need.
why don't we take thatand put it in our app. tom burleson: let's add that in. i'm going to scrollback up here. excuse me. so now it's locked open. tom burleson: if we come backto the screen here-- let's go to this here. that's looking better. naomi black: actually,this is looking terrible.
what's with all theicons that are up there? oh, you know what? we forgot something else. we haven't actuallytold our app where to put this content on the page. tom burleson: correct. naomi black: we need theresponsive layout api. so we actually havenot told the web page how to use the layout apiavailable in angular material.
so let's do that. tom burleson: but before wedo that, let's go to the docs and take a look atthose real quick. so to take a step back and tellyou guys about our layout api, this is based on css3flexbox, but we've done a lot of thinkingabout it to try and make it as easy for you to usethe syntax as possible and to make it really natural. so if you lookhere-- i don't know
if you can see my laserpointer-- if you look here, we have names like layout-sm. and what that does, thedash sm says, only use that on a screen that is small. so layout-gt-sm isuse this on something that is greater than small. and so we have a wholebunch of these defined, and you can use them to,in a very granular way, specify exactly how youwant your content to show up
on different screen sizes. tom burleson: so let's goahead and add that to the html. naomi black: let's do that. tom burleson: so the layoutattributes are pretty unique. we use those oncontainers to define how the children of thecontainers should be laid out. so the first thing we want todo is tell the body container that we want to layout its children in top down fashion, sothe toolbars at the top
and the rest of theinformations below. so we want to use alayout column mode. the next thing we want todo is tell the div area that its children-- theside nav and the content-- need to be laid out leftto right, side by side. so that would belayout row mode. the side nav, we want tolay that out-- its content, and in this case,it's just one-- but we'll lay thatout in a column mode.
and let me add a space there. and then the content,we're not going to have to worryabout at this point, so let's save this andgo back to the web page and take a look at that. naomi black: that'slooking much better. tom burleson: sothat's looking better. let's take a lookat our markup here. so i'll screen this.
naomi black: oh. but you know what? we're not using thefull space on the page. we have all this extra space,and we're not making use of it. we should go tell ourapp how to do that. tom burleson: so anotherfeature of the layout api is this optioncalled flex where you can tell thecontainers how to adjust their size relativeto their parent
if the space is available. so let's go back tothe html and we're going to tell thetoolbar-- excuse me-- we want to tell the div areahere that the toolbar is going to occupy a certainvertical space, and we want thecontent area that has the side nav andthe content to occupy the rest of theavailable vertical space. so we want the div toadjust in a flex fashion.
the side nav hasa specific by css width that we're going to use. but we want thecontent to adjust to the available horizontalspace that's left over. so we'll tell the contentto adjust or flexed its size to fill the available space. now if i go back here,we can see that things are looking pretty good. naomi black: this islooking much better.
but i notice that there's nota lot of visual distinction between our sidenav and the page, and i'm curious to see whathappens as we resize that box. so let me closethe console here. we can see that it's goingto close here in a minute. oh, it's not evendoing that, is it? naomi black: yeah. that's not looking so great. let's fix that.
tom burleson: well,let's fix both things. first, we need to addsome visual difference between the side nav. and we can use somethingcalled white frames that are part of material design. naomi black: somaterial design has this idea that youwant things that are online to be representedwith weight and responsiveness in the same way thatthings in the real world
have a physical interaction. and white frame isa way to represent-- if you imagine twolayers of paper sliding one over theother, they would have a different amount of shadow. so here we're usingwhite frame z-2, and the z-index gives us anindication of how much depth we want that shadow to have. tom burleson: so now theshadow is looking good,
and it's starting tolook the way we want. but it still doesn'thave any response. but maybe we shouldfix that first. naomi black: let's go do that. so one of the thingswe did say was we told the side nav that itneeded to be locked open. well, that's only usefulin a limited sense. we can actually usea media query service that angular material publishesto query for the break points.
and then we can respondtrue or false whether or not the side nav shouldbe locked open or not. naomi black: thatsounds very useful. tom burleson: and in fact,a lot of our services are actuallydocumented online here. and you can see thatwe have a bottom sheet service, a dialogue service,and the md media query service. and if i click onthis here, you can see that it's looking atthe breakpoint attributes
that you can also plug in. let's replace in the html page--instead of-- go ahead, naomi. naomi black: these areagain using the same syntax that we were using inour layout elsewhere. here, we're usinggt-sm, so this is saying when it's greaterthan small, apply this rule. tom burleson: if we goback to the web page-- naomi black: oh, that'slooking much better. on a small screen, like ifi open this on my phone,
how would i be ableto open the side nav? we should really add a button. this isn't actuallydoing very much. tom burleson: it isn't yet. we'll add some buttons. but the great thingthat we can already see coming out of angularmaterial out of the box are even transitions. you'll get transitions, and inkeffects, and ripple effects all
built in as part ofangular material. so let's add somebuttons, shall we, naomi? tom burleson: so nowshould we add some-- let's do the buttons first. there's a button for the menu. and we'll come down hereto the content here. and we also should probablyat this point, naomi, actually modify our mock content to usesome of the dynamic content. let's turn this intoa real angular app.
tom burleson: sothe first thing we want to do beforewe even try to start doing mock content is let'shook in our application lodge. we're going to load that. then we'll replace ourmock content with dynamic, and then we can comeback to the buttons. how about that? so i want to come back downto the script section here. so here, we've loadedthe user's module.
we've loaded a usercontroller that will allow us to manage theinteractions with these views. and we have a user servicethat will actually be used to load the user's data model. now that i've gotten thesemodules loaded into the page, i also need to make surei set a dependency here on that module name. we've got that. the next thing i need todo is come up to the body
and make sure that i'mgoing to use that controller within our view. here we go. so now i've registereda controller to use the user controller. now we can start replacingour hard-coded content with dynamic content. so we'll come back to this list. so here, we've replacedthe hard-coded version
with a dynamic, andwe're using ng repeat, and we're iterating overall available users that have been loaded. let's go down to the detailview and replace that with some more dynamic content. here again, we'reusing a selected user, and we're updating the contentbased on the current selected user. and if i go backto the page now,
we can see that it shouldbe laying out-- ah, it's laying out pretty good. naomi black: yeah, that'slooking pretty good. but what happened to thelayout in your title bar? and we're alsomissing some icons. what's with the icons? tom burleson: well,naomi, i thought it would be cool to-- insteadof using individual urls for our svgs, i wanted to gatherthe svgs up into an icon set
and use that. i see you're usingour talk as an excuse to show some newfeatures in md icon. tom burleson: we are. in fact, we try to plan fora lot of enterprise features within angular material. so we actually havean md icon service where you can register iconsets and all sorts of icons. so why don't we do that?
why don't we register theicon set here for our avatars? naomi black: that sounds great. let's do it. tom burleson: so downhere where i've actually created our starter appmodule and our application, i'm going to create aconfig section where i've injected a new providerfor the md icon service. and with that provider, i'mgoing to actually register a default icon set-- let mescroll this over here-- where
i'm actually registering theavatar's icon set with the md icon provider. and you can't quite see it here. we'll go-- naomi black: scroll it alittle further, brother. tom burleson: there we go. and i've also said that everysingle avatar within that set is 128 by 128 pixels. if i come back to our page here,things are looking pretty good.
naomi black: they'relooking pretty good. i think we probably havea typo with that button, because that titleis not looking right. tom burleson: ithink you're right. let's go back real quick. i'm not sure what'sgoing on there. we'll come back to that. naomi black: go up to theline with your controller where you added [inaudible].
tom burleson: let's get rid ofthis button just for a moment. let's make sure itlays out correctly. and now if i come inhere-- ah, we forgot. so this is a good point. what did we forget here? we forgot to saythat it is going to lay out things ina horizontal fashion, its content. naomi black: ah, more layout.
tom burleson: sooften, when it's not laying out the wayyou want, start looking at the layout api. might want to lookat it and layout row. now it's startingto look pretty nice. naomi black: ah, much better. i'm having a goodfeeling about this. so we have buttons, we canclick them, they have ripples. can you resize the screen soi can see how pretty this is?
naomi black: yes, i can. and can we click onthat button and have our bottom sheet pop up? tom burleson: yes. ah, no we can't, becausewe haven't hooked up our buttons to our eventhandlers within our controller. naomi black: oh, we have toadd them into the data model. let's go do that. tom burleson:let's do that next.
so if i come back down here toour share button right here-- now we're telling it touse the share event handler feature within our controller. and let's go up hereto our menu button. we've also told it toprogrammatically toggle the side nav open and closed. if i come back to ourweb page, there we go. there's our bottom sheet. that's looking pretty nice.
and ah, but that's not working. and the reasonthat's not working is that the side navis currently open. and really, what weshouldn't be doing is showing this open and closebutton if the side nav is open. we really only wantto see that when it's been responsively hidden. let's add that. so if i come back up hereto the button, what i really
want to say is i want to useanother feature of our layout api to say that thisbutton should be hidden when it's greaterthan 600 pixels, so when is greater than small. if i come back here, wecan see that it's hidden. naomi black: ah, that'slooking much better. tom burleson: it's visible. and if i click on this here, nowthings are looking pretty nice. naomi black: witness the powerof our fully functional angular
application. naomi black: wohoo! wait. there's somethingi've forgotten. my friend lucy is blind. and if she can't usethis app on her phone, she's going to kill me. tom burleson: that's true. naomi black: have wemade this accessible?
tom burleson: itshould be accessible. naomi black: itshould be, right? because angular materialhas accessibility built in. but we actually need you,the application developer, to help us with this. we've done a lot using ngaria toinfer the correct accessibility rules that we shouldadd to things, but we don't know how you'regoing to put them together in an app.
so when we don't haveenough information, we actually post a warning. so let's go look in theconsole window quickly. tom burleson: certainly. ah, we do see twowarnings from the buttons. naomi black: ah. so this reminds us thatour buttons are images, and we need to add some text. so if you don't havelabels on your buttons,
our angular material usesngaria and actually determines that there's some informationmissing and will give you a warning. so let's fix that. naomi black: actually, we'rerunning a little short on time. so i'm going to askyou all to trust us that we've added our aria labelcorrectly to these buttons. naomi black: let's goback to the slides. we have written code.
so we've talked to you abouthow we can do all this in es 5, and that was pretty exciting. we wish we had time to show youhow we can do all this in es 6. naomi black: i love es 6. naomi black: we don't have time. es 6 lets us doreally cool things to make the structure of ourapp much tidier and cleaner. to prove this to you,we've posted this as part of our starter app, andyou can go find it at the links
here. or if you don'tremember them, just go look for our angularmaterial main page, and there's a linkthrough to them. and you can see how we'veworked all this same stuff through in es 6. tom burleson: so you can useangular material 1.x right now with es 6. tom burleson: ok,so what's next?
naomi black: what's next? i think people are gettingpretty eager for us to land 1.0. we've heard some feedback. naomi black: we have a littlemore work to do, though. we're missing a few components. do you remember what they are? tom burleson: so we'remissing the chips component and the date picker,and i think that's it.
naomi black: is itperhaps something that rhymes with menu? tom burleson: ah, wealso need to do the menu. we've had a lot of vocalfeedback on that one. naomi black: yeah, ifwe don't land menu, i think people may huntus down and kill us. tom burleson: they'redefinitely going to throw vegetables at me. so we're going to landthree more components
before we declare 1.0. we're also going to spendsome time making sure that everything is reallyperformant and fast. we're going to look atpolish on multiple devices and get everything naileddown really solidly. we're also not goingto take too long. we're going to have all of thisready for you by this summer. maybe sooner. tom burleson: i hope so.
with a little work. naomi black: we're goingto try really hard. tom burleson: iguess-- so thank you. naomi black: thisis our last slide. and we are out of time. so thank you so muchfor listening to us. oh, i forgot one more thing. i forgot-- tom burleson: whatdid you forget?
frosty is going tokill me, but i'm going to steal two moreseconds to tell you guys that you are surelywondering about angular 2. and we are working on a fullversion of angular material in angular 2. it's very rough now. we have nothing to show you. but later thisyear, you should be able to see the firstsets of components.
and we'll becontinuing to develop angular materialon the 1.0 branch with additionalcomponents like data table and other things that are comingout of the material design spec. tom burleson: reallyexciting times. naomi black: weare super excited. we've got to get off the stage. thank you so much.
tom burleson: thankyou, everyone.
Tidak ada komentar:
Posting Komentar