Coding 101 7 (Transcript)
Shannon Morse: Hey, listen! Today on Coding 101, we are reviewing function returns, we're checking out your homework — really good stuff, too — and we are getting graphical!
Netcasts you love ... from people you trust, this is TWIT!
Leo Laporte: Bandwidth for Coding 101 is provided by CacheFly at Cachefly.com.
Fr. Robert Ballecer: This episode of Coding 101 is brought to you by Lynda.com. Learn what you want, when you want, with access to over 2,000 high-quality online courses and training videos, all for one low monthly price. To try it free for seven days, visit Lynda.com/c101. That's Lynda.com/c101.
Welcome to Coding 101. It's the TWIT show where we give you the knowledge to live in the wonderful world of the code monkey. I'm fr. Robert Ballecer.
Shannon: And I'm Shannon Morse. And today, we are going to get you all coded up on all sorts of function returns and fun stuffs.
Fr. Robert: Stuffs, yeah.
Shannon: Plus some graphic awesomeness.
Fr. Robert: Yeah.
Shannon: Ooooh.
Fr. Robert: Yeah.
Shannon: Looking forward to that.
Fr. Robert: Now, Shannon, before we get to the graphic awesomeness, because — and I — I think it's time for us to do that, right? We've had — we've had six solid weeks of coding —
Shannon: I think so.
Fr. Robert: — we want something to show for it.
Shannon: I'm ready.
Fr. Robert: But first, I was thinking maybe we should go back over that function thing because I had a couple of people concerned.
Shannon: That was tough.
Fr. Robert: It was tough.
Shannon: It was tough.
Fr. Robert: It was tough. I know, I know.
Shannon: I was a little puzzled when I was writing my own, but I did end up giving an example. So let's start off with function returns. So first off, what are function returns? So they start off with a visibility; a return type; your name; and then a parameter, which is in parenthesis. So the example that we gave last week was a public int. "Answer" was the name, and then it used int A and int B to give you a total. And it would return that total. So a little math equation inside of your parenthesis. So for Lou's example, I went ahead and pulled it up on my computer. So go ahead and jump over to my machine. So I have Lou's code up here, and basically, he has a function in here. So it says, "Minutes until your appointment"; and then it asks you, "Distance that you have to travel in miles"; and it gives you back a return statement that ends up doing a little calculation of math and telling you how fast you have to go to get to your appointment in time.
Fr. Robert: Right. Now, Shannon, remember, the reason why we're writing functions in the first place is because we always want to have a way to encapsulate code that we're going to use over and over and over, right?
Shannon: Exactly.
Fr. Robert: We don't want to have to rewrite the same bit of code.
Shannon: Right.
Fr. Robert: So instead, we put it inside of a function, and then we can call it.
Shannon: So with his example, we end up getting 80 miles per hour nonstop when I put in 90 and 120 for the miles that I have to go. So I have to drive really fast to make sure that I get there in time. I think I could drive the speed limit in Kansas because I'm pretty sure it's still 80 miles per hour; at least, last time I drove through there, it was. So my next example is my personal one. I decided — so sometimes, I'll go to a dinner/movie date —
Fr. Robert: Oh, anyone does this.
Shannon: — and I'll be running late to the movie because —
Fr. Robert: Yeah.
Shannon: — because I don't get out of dinner on time. So I made this one to tell me how soon I have to leave dinner in order to get to the movie, which is right next door. Now, this does not include accounting for times like the ticket line or getting popcorn, so just figure you're going to skip the trailers whenever you look at this. And this'll return the time that you need to get there. So I'm going to hit "Start." "Your dinner/movie date locations are next door to each other. Minutes until your dinner reservation." So let's say we're going to have dinner in 120 minutes. Okay? So a couple hours.
Fr. Robert: Oh, I'm way hungrier than that.
Shannon: Yeah, me, too. So let's say 60.
Fr. Robert: Thank you.
Shannon: (Laughs) No problem. After the show. "Minutes until the movie." So the movie is going to be a later time, so let's say we're going to go to the movie in 130 minutes. So it'll be about two hours and ten minutes from where we are right now. So it tells you you should leave dinner after 70 minutes. So you should be at dinner for 70 minutes to be at the movie on time. And if you leave at that time, then you will be at the movie right when it's starting.
Fr. Robert: Right. Now, this is a quirky little program that you just threw together in a couple of minutes —
Shannon: (Laughs) Yeah, it's totally silly.
Fr. Robert: — but it's nice because it does use function and it does use function return.
Shannon: Exactly.
Fr. Robert: This is one of the fundamental pieces of programming, that any time you have something that you would like to reuse or even use in a different program, you should encapsulate it within a function with a proper name, with the right return variables, so that you can make it a useful piece of your library. Yeah.
Shannon: Right. It makes it much easier to do, and it saves you a lot of time.
Fr. Robert: Yeah, yeah.
Shannon: So we had a couple of" really cool viewer feedback information for us, some codes.
Fr. Robert: Oh, I love this part.
Shannon: Yeah. So these are really cool. The first one is from Dean. So back in the day when we were kids, do you remember playing all those silly little paper games? Like, you had to —
Fr. Robert: Oh, yeah! Like, the Origami crane thingy, the —
Shannon: The origami ones, yeah.
Fr. Robert: What was that called, the —
Shannon: There was Mash and there was the one that says, like, Oh, if you hit it this many times, then you're going to fall in love.
Fr. Robert: Yeah.
Shannon: Or you're going to get married.
Fr. Robert: Pick a number! Like, 7. 1, 2, 3, 4, 5, 6, 7 —
Shannon: So he took that idea, and he turned it into a code.
Fr. Robert: Oh!
Shannon: Into a little program.
Fr. Robert: No way!
Shannon: So this program takes the amount of times that the words from love are in your name, and chooses a percentage of compatibility based upon that fact.
Fr. Robert: It's match.com.
Shannon: It's really — so it's very long. It looks a little confusing. It starts with the love calculator.
Fr. Robert: I see a lot — a lot of functions, lots of While Loops —
Shannon: Yes.
Fr. Robert: — a lot of console commands. Okay.
Shannon: There's a little bit of math involved in here.
Fr. Robert: Nice.
Shannon: And then, it gives you a return.
Fr. Robert: Love calculation. Okay, that is the best function I've ever heard before.
Shannon: (Laughs) It's really cute. So let's pull this up. Love calculator. So my name is Shannon.
Fr. Robert: No, no, no, no, no, no, no, no, no. You know what?
Shannon: What?
Fr. Robert: You know what? We need to find Alex someone.
Shannon: Oh, okay.
Fr. Robert: Okay.
Shannon: Well, here. Okay. Let's see. Alex —
Fr. Robert: (Laughs)
Shannon: Gumpel. I think that's how you spell his name.
Fr. Robert: Yeah, that's — that's good.
Shannon: And then — okay. Who should you be with?
Fr. Robert: (Laughs)
Shannon: (Laughs)
Fr. Robert: Put "Tibbs."
Shannon: Tibbs.
Fr. Robert: (Laughs)
Shannon: I think his name is Mr. Tibbs.
Fr. Robert: Oh, that's right.
Shannon: So Mr. Tibbs.
Fr. Robert: Mr. Tibbs.
Shannon: 47 percent. (Laughs)
Fr. Robert: No! (Laughs) Now, okay. We don't understand what he did to get to this 40 percent — 47 percent, but we could jump into the — the actual code to look at the functions —
Shannon: Yes, we can.
Fr. Robert: — and see what he was doing. He was probably doing some sort of match-up on the letters and the names.
Shannon: Yes.
Fr. Robert: Which again, you know —
Shannon: It includes looking at all the letters of "love," and then combining those together with their names. It's adorable.
Fr. Robert: Right. Awwww. So evidently, Tibbs no heart Alex.
Shannon: No. (Laughs)
Fr. Robert: Hmmm.
Shannon: And last week, I also discussed making my own text adventure game.
Fr. Robert: Yes.
Shannon: Well, our next one is from Razelda. I love that name, Razelda. Razelda in our Google+ community decided to post this function, where they took a class, a type of character, and a name and combined those to give you a — basically, a D&D output of what your math would be for your dexterity, your strength, and things like that.
Fr. Robert: Wow! Okay, this is actually kind of useful. I like this.
Shannon: Yeah, it's pretty cool. So if I hit Start with this one, it's going to ask me for a name. I'm going to give it my Elvish name, Minyalathien, because I'm a nerd.
Fr. Robert: You have an Elvish name?
Shannon: Yeah, I might.
Fr. Robert: Oh, I love you.
Shannon: She's an elf. And what level is this character starting out at? So I'm going to say I'm just a level 5. Class type — I'm going to say I'm a wizard because I like wizards.
Fr. Robert: Of course. Everyone wants to be a wizard, right?
Shannon: So it gives you the output of your name, level, race, and class; and then whatever your strength, dexterity, constitution, intelligence, wisdom, and charisma would end up being for that specific character.
Fr. Robert: Now, this is kind of cool. This is basically character generation —
Shannon: It is.
Fr. Robert: — for anyone who likes those MUD's, who likes those dungeon games.
Shannon: Yes, exactly. (Laughs)
Fr. Robert: Okay. See, folks, this is what always has just made me just chuckle about the community that's surrounding Coding 101, which is, you'll take what we give you, and then you'll turn it into something that you could actually use.
Shannon: I love it.
Fr. Robert: I like that.
Shannon: Very fun. And we've gotten plenty of other codes in our Google+ community as well. We don't, of course, unfortunately, have time to go over every single one, but there are plenty and I love checking every single one out. And I've run every single one. They're very, very cool. So thank you so much for sharing those with us.
Fr. Robert: Yeah, yeah. How about a little Ivory Tower?
Shannon: I think it's time. Let's do it.
Fr. Robert: Okay. Now, I've got to put a disclaimer here because up to now, it's been all fun and games, right? We've had six episodes where we're talking about console commands. We —
Shannon: (Laughs) It's been really hard.
Fr. Robert: It's been a little hard, yeah, but, you know, it's more or less some of the really basic programming types in C-sharp.
Shannon: That's true.
Fr. Robert: Console commands — even all the colored, even the graphings are just console commands.
Shannon: Right.
Fr. Robert: We've been talking about loops; we've been talking about functions; that's pretty much it. You know, a little bit of variables, a little bit of explaining why things work. I was thinking maybe we needed to go beyond functions.
Shannon: Oh. Oh. You can go beyond? (Laughs)
Fr. Robert: Yes, we can. Now —
Shannon: Where are we going, Padre?
Fr. Robert: We are going to go into the runtime library. Now, okay. Before we get there — because I don't want to freak you out too much just yet — here's a disclaimer. You are probably going to get lost. There are going to be a few of you out there who are experienced programmers for whom this is going to be no problem. The rest of you are going to have trouble. Please, please, please don't get frustrated. Stay at it. We're going to give you all the code; we're going to stay with you; and next week, we're coming back on this exact same topic. But the reason why I want to bring you here is because, as we approach the end of this C-sharp module, I wanted to give you a way to actually build apps.
Shannon: Awesome.
Fr. Robert: Yeah. Not just something that's going to run at the C: prompt, but something that will run in Windows, that would run on Windows Phone, that could be developed for a mobile device.
Shannon: Oh, no way!
Fr. Robert: This is what we're doing, yeah.
Shannon: Oh, this is cool. Okay.
Fr. Robert: Okay. It's cool, but it's kind of ... (makes an exploding noise)
Shannon: Very advanced.
Fr. Robert: A little advanced.
Shannon: Okay.
Fr. Robert: All right. Now, let's just talk about the theory. We've talked about functions before, right?
Shannon: Right. Yeah.
Fr. Robert: They allow us to encapsulate code and then run it over and over, call it whenever we need it. what we're doing now is we're essentially evoking — invoking part of the programming language that gives us access to functions. There are actually classes and methods, but a lot of functions that we wouldn't be able to write. These are all really low-level pieces of the compiler itself.
Shannon: Right.
Fr. Robert: Yeah. Now, when I talk about the runtime system, what I'm talking about is the thing that actually allows a language to exist.
Shannon: Yeah.
Fr. Robert: Yeah. So —
Shannon: I've heard of that several times in my different hacking courses and things like that.
Fr. Robert: Exactly. You've got to know the runtime system. Because what the runtime system does is it converts what you're typing into something that a computer will actually understand.
Shannon: Cool.
Fr. Robert: Yeah. Because a computer — if I type "Console.write" into — just straight into the processor or straight into the operating system, it has no idea what I'm trying to do. What the runtime system —
Shannon: It means to turn it into 1s and 0s.
Fr. Robert: There you go. It'll actually turn it into something that can interact with the operating system. So that is my runtime system. However, part of my runtime system are these things called runtime libraries.
Shannon: Yeah.
Fr. Robert: And runtime libraries give me access to a bunch of functions, to a bunch of classes, to a bunch of methods —
Shannon: Oooooooh.
Fr. Robert: — to a bunch of procedures that I wouldn't have access to otherwise.
Shannon: Okay. (Laughs) Sounds confusing.
Fr. Robert: Okay? Now, the reason why we have to do this — it's confusing, it's confusing. But the reason why we have to do this is because — well, if we want to move beyond just simple ASCII art, we're going to have to access the computer and the resources of the computer at a more basic level, right?
Shannon: "Right. Yeah.
Fr. Robert: We've got to get into the video card. We've got to get into DirectX. We've got to get into the graphical user interface. We can't do that if all we're doing is writing console commands.
Shannon: Yeah, that makes sense. Okay.
Fr. Robert: Yeah, yeah. So that's what we're going to be doing. In fact, we're talking about a specific type of runtime library. What we're going to be talking about is the Windows Presentation Foundation.
Shannon: Cool.
Fr. Robert: It's also known as WPF.
Shannon: (Laughs) WPF.
Fr. Robert: Yeah, not WTF. That's totally different.
Shannon: (Laughs)
Fr. Robert: But it's a library —
Shannon: Like, WTF?
Fr. Robert: Totally, like, oh, my God, is there really? Why?
Shannon: What? (Laughs)
Fr. Robert: No, but WPF is actually part of the .net framework. You may have heard about that.
Shannon: Yes.
Fr. Robert: We're not going to talk about whether or not people hate it or love it, but it does have a lot of functionality. It gives us a lot of options when we're programming because we can do things like do 2-D smooth effects and 3-D effects and window effects —
Shannon: Oh.
Fr. Robert: — without having to program them.
Shannon: Oh, okay, that's interesting.
Fr. Robert: Yeah, yeah.
Shannon: This is just for Windows.
Fr. Robert: This is just — well, yeah, for .net. So WPF is just for Windows.
Shannon: Okay.
Fr. Robert: It's not going to work on Mac; however, you can use this — Lou was actually going to show us code that will work in MonoDevelop for Mac —
Shannon: Oh, cool.
Fr. Robert: — if you were building applications for .net in Windows.
Shannon: Okay.
Fr. Robert: Okay?
Shannon: All right. I'm looking forward to that.
Fr. Robert: It's extensible. It's actually pretty, pretty cool. Now, WPF, remember, resembles XML objects. If you've ever programmed in XML, you're going to feel right at home. It's the same sort of thing — you've got an object; you've got attributes to that object; and you can play around with them in your code. So if you've used XML, WPF is going to feel right at home. Now, WPF also — this is important — works in all versions of Windows — Windows 8, Windows 7, Windows Vista, will work with Windows XP and Windows Server 2003 —
Shannon: Oh, wow.
Fr. Robert: — if you run the .net package.
Shannon: Okay.
Fr. Robert: Yeah. So it —
Shannon: If you're running anything older than that, though, you might just want to —
Fr. Robert: If you're running something older than Windows XP, you've got issues.
Shannon: (Laughs)
Fr. Robert: Seriously, there's something wrong with you, I'm sorry. (Laughs)
Shannon: (Laughs)
Fr. Robert: Okay. All right. Now, what we want to do now is we want to bring in our code warrior. I didn't want to give you an example code because I want him to show us from the start to the finish how he's going to take something that we've already done — a function that we've already created — and put it into WPF to make it pretty.
Shannon: Okay.
Fr. Robert: So you want to bring Lou in?
Shannon: I love it. Ring, ring, ring, ring, ring! Lou!
Lou Maresca: Hey, guys.
Shannon: Hi!
Lou: How's it going?
Lou: Hey hey!
Fr. Robert: Welcome to Lou Maresca! He's from Microsoft; he's our code warrior. He's been with us for the last six weeks. Now, right now, Lou, you're — you're on a stage, right?
Lou: Yeah, I am.
Fr. Robert: You're, like, presenting something?
Lou: Yeah, I'm here in Atlanta, Georgia; I'm on the practice stage at Convergence 2014 for Microsoft.
Shannon: Wow.
Fr. Robert: Nice, nice. Now, Lou, you are going to talk to us about WPF, right?
Lou: I am.
Fr. Robert: I mean, because WPF is one of these things where, once you learn how to use it, it is almost impossible to not use it because it makes things pretty.
Lou: That's right. Yeah, with WPF, it's kind of interesting. It's kind of the roots of Windows Store apps today. So if you build a Windows Store app, it uses what you were talking about, the markup language, which is what we call XAML, or X-A-M-L; and its roots are from, like, HTML. So if you've ever done web programming, XAML or WPF is very similar to how HTML is, it's just it's more — it's more descriptive around objects and things and real-world objects and giving it properties and attributes and stuff. So that's kind of where WPF's roots are at. It's basing a UI off of markup, like you do a webpage, per se; and you can make a Windows form to look very similar. And the cool thing about — like you were talking about, is you can do some really neat things, like animations and shading and alpha channels and all these cool — coloring and all that stuff just right in the markup. So it kind of makes it really neat.
Shannon: So I could totally use this to make my own video game.
Lou: You could.
Fr. Robert: Yeah.
Shannon: (Laughs)
Lou: It's very powerful.
Shannon: Awesome.
Fr. Robert: Yeah, one of the things I really like about WPF is it has access to all the DirectX functions.
Lou: Right.
Fr. Robert: So all the advanced features of your video cards, of your graphic subsystem, you can now manipulate within your software.
Shannon: Wow!
Fr. Robert: And because we like doing things that are graphical, that's actually really, really important.
Shannon: It's amazing!
Fr. Robert: Yeah, yeah. Now, Lou, you're going to freak people out, I know this.
Lou: (Laughs)
Fr. Robert: Because, again, this is going to be difficult. I want you to take us from start to finish; but before we get there, just so people can pull the ripcord for a little bit, I want to take a moment to talk about a vendor — a supporter of this show — who can actually fill in some of the blanks that I'm sure there are going to be when people walk away from episode 7. And of course, the blank filler-inner is going to be lynda.com. Now, when we talk about lynda.com, we talk about the premiere online learning company. Lynda.com is an online company that can help anyone learn creative, software, and business skills to achieve both personal and professional goals. With a lynda.com subscription, members receive unlimited access to a vast library of current and engaging video tutorials across a wide variety of subjects — everything from creative and software skills to business negotiation and programming. At lynda.com, you'll learn how to code, create, and build applications from the foundations of object-oriented programming in C and C++be to desktop and mobile apps for today's popular operating systems. You'll explore the fundamentals of programming; build web applications with .net, PHP and MySQL; manage data with SQL databases; connect to the cloud; and oh so much more. Now, here's why I'm really excited to have Lynda. I know that we're going to leave some people behind. I know that people are going to see this lesson and say, "Oh, there's no way I can do that." Well, you can if you follow lynda.com. If you watch episode 7, if you watch episode 8, if you watch what Lou does with WPF and realize that you want that, you want that kind of graphical interface, you want that control of slick elements within your program — well, then, go to lynda.com because they've got tutorials, step-by-step videos that show you how to use WPF, how to build apps. They can help you where you need help, and that's just one of the reasons why we love them being part of Coding 101. Now, Lynda has something to improve your skills, no matter what your skills may be, no matter what you need. You get to learn new software and keep up with technology. They have over 2,000 courses with more added daily. Their popular courses include: Foundations of Programming; HTML; PHP with MySQL; Objective-C; Java; JavaScript; and WordPress. Their instructors are working professionals at the top of their fields and expert teachers, and they have high-quality video productions from state-of-the-art studios. These aren't homemade videos like you'll find on YouTube, where the audio or the lighting is off. I mean, those are great. That content is awesome — I love the amateur — but there's something that's nice about having professional, crisp, detailed content from lynda.com. Lynda offers curated course content. Each lynda.com course is carefully structured so that users can learn from start to finish or jump to a specific chapter. They also have easy-to-follow videos that can help you find the answers that you need, and — this is my personal favorite — searchable transcripts that let you search within a video to save time and find exactly what you're looking for. No more scanning through the video or jumping from video to video, trying to find the — the one question you need answered. Now you can search for it and jump straight to that time index. Lynda offers courses for all experience levels — beginner, intermediate, and advanced — covering a wide range of technical skills, creative techniques, business strategies, and oh so much more. Lynda lets you watch from your computer, tablet, or mobile device. You can switch and pick up on the chapter where you left off. Learn at your own pace, on your own schedule, on your own time, when you want, where you want, how you want to. So here's what we want you to do. We want you to try lynda.com, especially if you're struggling with today's lesson. It's only $25 a month for access to Lynda's entire course library; or for $37.50 a month, you can subscribe to the premium plan, which includes exercise files that let you follow along with the instructor's projects using the exact same assets. And you can try lynda.com free right now with a seven-day trial. Visit lynda.com/c101 to access the entire library. That's over 2,000 courses free for seven days. That's lynda.com/c101. And we thank Lynda for their support of Coding 101.
(Takes a deep breath) Okay.
Shannon: Woo!
Fr. Robert: So now that we've got our parachute for the people who are going to be totally freaked out by what Lou's about to do —
Shannon: I'm ready.
Fr. Robert: Lou? Hit us.
Lou: You ready? All right. So the first thing I wanted to show you is just kind of like what it's supposed to look like. So this — if you guys remember from last week — Snubs kind of made some modifications to the app — is, behind the scenes, you basically put how many minutes you have left and then how long you have, how far you have to go, and then it'll calculate how fast you've got to go in order to get there, and it basically converts it to kilometers per hour, too.
Fr. Robert: Whoa, whoa, whoa. Okay. Lou, I remember that, but it didn't look like this. Yours —
Shannon: It wasn't that pretty.
Lou: That's right.
Fr. Robert: Yours had a text menu inside of a console box, and then it just popped up a number and loops through. This has graphics, it has a border, it has a window. Whoa. So obviously, the code for this has to be super, super complicated.
Lou: Sure looks like it, doesn't it?
Fr. Robert: It does.
Shannon: (Laughs)
Lou: So let's go and — I want to basically start from scratch real fast. So what we're going to do is we're just going to go directly to Visual Studio, and I'm just going to do a new project. And from a new project, I'm going to just, instead of selecting what we did before which was a console application, I'm going to select WPF application. And just to note, if you ever wanted to build, like, a Windows Phone or Windows Store application, if you were to choose either one of these, you'll notice all of them have this little XMA — XAML extension on the end of it, meaning these apps are also built in XMAL, or the XAML markup language. But WPF itself is — that's the basis of it.
Fr. Robert: Right.
Lou: So again, don't care what the name is right now; I'm just going to click "Okay." It's going to generate my project for me. And so if we go take a look while this is doing that, I'll bring the — kind of the example that I have over here. What it'll bring in is, it'll bring in this file, which is the app XAML file; and the main window XAML file. And we don't really necessarily need to worry about the app one for right now. It's for, like, if you want to add resources and pictures and templates and all that stuff. But we don't really need any of that stuff right now.
Fr. Robert: Right.
Lou: The main one we want to focus on is the main window XAML file. And so — okay. So this file I generated, the "my template." And so the main window will open up here, and you'll notice nothing will really be in there. It'll just be a blank, white slate of nothing. And basically, if I just ran this application, it would be just a blank window. So if I were — once the designer loads — and if I run this, it'll actually pop a window — give it a second; it's still loading. So as it's loading, I'll show you what the main window will look like. So basically, it would be just a white window of this guy right here. And if you notice down below, there's two sections: one is the designer section, which is the visual version of it; and then there's the bottom location, which is what we call the XAML, or the markup, of it. And so if you ever built a webpage in, like, let's say if you build it in — even in Visual Studio, as you change the XML, or the markup, below, it will then, obviously, render or show up in the designer part of it. So here's that white window that I was talking about. So it —
Fr. Robert: Right. So it ran the application, but since there was no code, it was a blank window.
Lou: That's right. Yeah, no code, no nothing in that. I just went and ran it. And it basically showed me that. So that's basically what an empty project will do. If you don't —
Fr. Robert: Now, what I like is — this is important about the fact that you're using the XAML files. If you've done any sort of web development, where you have, like, PHP and CSS files, it's not an exact translation, but you're going to be comfortable with this type of programming. You're going to have your data, and then you're going to have the — the section that's going to actually tell what the data looks like.
Lou: That's right. So what'll get a little more complex, if you ever used XAML before — HTML — is, HTML might describe things like buttons and things, and it has attributes; but with XAML, it's more about objects and things. Like for instance, here we have a grid. There's a grid that makes up this window; and if I wanted to, let's say, add a button here, I can type below the word "Button," and I could basically — notice it gives me IntelliSense, and then I can just plop a button in here. And it basically will then render up here a button. And so, if I wanted to put it in a specific spot, I could kind of cheat, too, and I could use this nifty little toolbox over here to the left, and I can just drag a button onto the screen.
Shannon: (Laughs)
Lou: And so now you'll notice down below there's basically — I can pretty much remove this that I typed —and you'll notice that down below, there's the markup for the button. And you can resize it, move it around, do whatever you want; and as you're doing that in the designer, you'll notice down below, it's changing the attributes of it.
Shannon: Oh!
Lou: Like, how far in the margin; the width of it; the content — the contents; what it says. If I wanted it to say, like I had before, my example — if I wanted it to say "Calculate," I could say, "Calculate." And then it says it on the button. So now, again, if I run this app, it will basically just show me a white window with a button on it.
Fr. Robert: But now it has a button. Woohoo!
Lou: Exactly right. Okay. So now —
Shannon: Seeing all this, it makes me feel like you're cheating.
Fr. Robert: (Laughs)
Lou: Yeah. I don't — it is really kind of like I'm cheating.
Shannon: (Laughs)
Lou: So we close that, and so if we — let's say we wanted the button to actually do something. And so in this case, we wanted it to calculate the speed for us. So what I would do is — I could do two things: 1. I can go over here to the properties, and again, I can use the designer to click on this little lightning bolt, which is what we call event handlers. But for right now, we're not going to get into any of that because I don't want to get too complex. What I'm going to do is just going to double click on the button. And what that normally does is it says, "Hey, this event that normally is the Click is the click event on that button." I want to do something" —
Shannon: Oh.
Fr. Robert: Right.
Lou: — "when that gets created." And it's — they call it the click event, or in this little generated function that gets generated here, it's called the event handler. It's a function that basically happens when you click.
Fr. Robert: Now, Lou, if I could — if I could break in for just a second here?
Lou: Yep.
Fr. Robert: Now, Snubs — see, we talked about this, right? Because this is essentially what we did when we designed a function.
Shannon: Yeah.
Fr. Robert: And when we talked about — in the last episode — about objects, what Lou is doing right now is he's creating an object. He's creating a — an event, a button called Calculate.
Shannon: Right.
Fr. Robert: And now he can put the code within that event, which becomes a self-contained object that he can move anywhere in that program.
Shannon: Yeah, I totally get that.
Fr. Robert: Yeah, see?
Shannon: That's really cool.
Fr. Robert: That's why it's important to understand how object-oriented programming works because that's what Lou is doing now.
Shannon: I see.
Lou: Right.
Shannon: Okay.
Fr. Robert: All right, Lou, I'm sorry. Go ahead.
Lou: No, no worries. So basically, this — this function that gets created here is in another file called the XAML.CS file, and it's got that .cs extension, meaning it's a C-sharp file. And they call that the code behind file. It's kind of like the man behind the curtain sort of thing, and basically, you've got this pretty UI, but then you have to sometimes have the UI do something when you click on things or do things or touch things or move things; and so those are called event handlers. Those are things that — you are doing things when an event happens. And so this case, it's a click. So when I double-clicked on it — and the code behind, again, like Padre said, it generated this function, and we don't have to worry about what the function — its scheme is right now or its parameters, but — all we know is that this function will get called when the button is clicked. So if we remember the code that we had in the last example around speed, I had some functions that basically converted speed based off of time and so on. So I'm going to actually just paste those in here. And the nice thing about that is now, if I — let's say I wanted to do some calculations in here. When the person clicks the button, I can do that. And so — and in this case, if I — I don't necessarily have any text yet to do that, but if I wanted to call, like, convert in here to — or if I wanted to call required speed, I can do that just by typing the function "Required speed." And it will give me the function to call. So if I want to call right here and I could just call it, and then, so that means when I click the button, it will call that function. So what I want to do is, I want to go back to the UI really fast, and I'm just going to drop some other fields on here, some other little text fields. And one would be — for instance, if I wanted a to user to enter in the time they have left to get to their destination; and then another one would be, potentially, the time — the distance they have to go; and then I could add another text box for one that basically is for my speed; and then the kilometer per hour. So I have three text boxes here. And you notice down below, they all pretty much generate the same exact markup; the only difference is where they are from the margin.
Shannon: Oh, yeah. That makes sense.
Lou: So you see it down there. So let's — yeah. So pretty easy. So what I want to do, too, here is now I want to be able to differentiate these when I'm in my code. So I'm going to give them some names. So I can do that in two places. One is — the easiest place is in the properties window right up here. It says "No name," so I'm going to give it the "minutes left," and then I'm going to click on the other button — I meant — sorry, the other text box, and this one I'm going to call "distance." And then finally, this one right here, I'll just do "miles per hour," and we'll call it quits. And so then what I want to do is I'm going to go back to my code file where I have that button; and I can basically do a quick — I could put some code in here to basically do the conversion for the — and what I'm going to do is, I'm going to steal that — the "minutes left" from the — minutes left. Let's see ...
Fr. Robert: Yeah.
Lou: And I think what did I name it down over here? And —
Fr. Robert: And folks, remember that this is the code that we played with last week when we were talking about the — the collection of functions, so he's taking the code from that text version of the program and dropping it in here. The only thing that he's making different is that, instead of writing it out to the console, he's writing it out to those — those objects on the screen that he just created.
Lou: That's right. So you notice here I'm — basically, all I changed, like Padre just said, is I'm just changing — instead of getting it from the console read, which is what we had before, I'm just getting it from the "Minutes left" text field.
Shannon: Oh.
Lou: And so I'm saying, "Get it from that instead, and don't worry about the console stuff." And then down here, all I'm doing is calling the functions that I pasted in here from the other code, and it's basically saying — you know, it's doing the calculation. So if I were to run this, all it would do is return the speed in mile per hour and the speed in kilometer per hour. What I wanted to do is actually send it to — send it back over and display it on the screen. And so what I can do is, here, I can do my miles per hour field that I have, and I can set the text of that field, which is the same thing I did up above, and I'm going to set that to the speed — I'm sorry, the speed in mile per hour variable that I created here. And I — again, I have to convert it to text because right now it's in a number. So I'm going to do this handy little — what I call a helper function called 2-string. And that basically converts it to a string. And so now, if I run this — once it loads up here ... And so what it'll end up doing is it'll run, basically, and look exactly like — oh, this builder isn't sure what this — oh, I spelled it wrong. I put "speed in" —
Fr. Robert: Now, while you go ahead and correct that, just let me explain really quickly.
Lou: Yeah.
Fr. Robert: What Lou was doing right here — it — again, I know people are going to be freaked out because we're using a different type of screen, we're using WPF, we've now got graphical objects. But when he makes those buttons, when he makes those text boxes, just consider them as replacements for functions calls. So instead of calling a function like, "Drive to here" —
Shannon: Right.
Fr. Robert: — as my function, instead, clicking that button is the same thing as calling that function.
Shannon: Yeah.
Fr. Robert: instead of writing, "Console write" or "Console read," we're now replacing them with those text boxes that we've just created on the screen. So all the same elements exist. Don't freak out and say, "Oh, this is totally new." This is actually everything that you've already learned; it just works in a graphical user interface.
Shannon: It's basically taking the code that you know and sticking it behind a pretty picture. (Laughs)
Fr. Robert: That's it. That's all we're doing. And remember, this is why we started with the console command because we didn't want to start you here and have you just go, "No, I quit." It's the same thing. Every program that you wrote, from the very first binary to decimal converter to the — the While Loops, will work here. The only difference is that now you can actually call each one of them by pressing buttons, and you can now write to a pretty screen.
Shannon: I just got a fun idea for next week's episode.
Fr. Robert: Oh, no. I hate giving Snubs ideas.
Shannon: (Laughs)
Fr. Robert: Something bad's going to happen. Lou, what else?
Lou: Sure. (Laughs)
Fr. Robert: (Laughs)
Lou: So basically, I wanted to show you the windows. The window loaded up, and here I'm just going to type in some data, and here's my — I think, how long I have left, and I think this is my — my distance. And if I hit Calculate button, you'll notice that over here, add 40.
Shannon: Yay!
Lou: That's my miles an hour. So basically ran the exact same code that we wrote last week that does all the math and conversion and stuff that you have in your console application, but then we just output it to this window.
Fr. Robert: Yeah.
Lou: And —
Shannon: But it doesn't look as pretty as the one that you showed us.
Lou: No, it doesn't, does it?
Fr. Robert: (Laughs)
Lou: So basically, what I did in the other application — so let me drag that over and I'll show you the XAML in that guy. And you'll notice in the background —
Fr. Robert: There it is.
Lou: I have some things. So what I have here is I have the window background. I have an image that I'm setting, and I'm setting it to this nifty little speeding road image in the background. And then also, I have — I actually have a template that I created called a "rounded button," and so it makes this little — nice, nifty little button that has some shadows and stuff on it. And then — and this is all done in markup. So again, I didn't want to get too deep into it because it gets a little cumbersome when it comes to all the details and attributes and stuff, as you can see. But again, all I did was change a bunch of properties. So in this case, I changed the text and the alpha channel so you can kind of see through this text box. And you notice the font is different, and so I added some labels.
Fr. Robert: Right.
Lou: These are labels. Basically just has some text labels —
Shannon: Okay.
Lou: And — again, so that each user knows what they are. And again, it — when I run it, it's basically the same application as the other app; it just looks nicer —
Fr. Robert: It's just prettier.
Lou: — because I've added some special markup.
Fr. Robert: It's just prettier.
Lou: Yeah, prettier.
Fr. Robert: Now, folks, remember this, because you are using a decent developer, like MonoDevelop or the Visual Studio, the same thing will happen when you're using WPF as what happened when you were using the console, which is, if you start typing a command, it will give you your menu. It will give you the toolbar that shows you what could go in there. This is the perfect time to play. I know that you want to play with rounded buttons.
Shannon: I do. (Laughs)
Fr. Robert: You probably want to play with opaque windows, right? These —
Shannon: I do. (Laughs) A lot.
Fr. Robert: These things will all be available for you, and then you can just go back and forth. Just play with them and see if you can break it.
Shannon: That sounds awesome.
Fr. Robert: See if you can make it look the way you want.
Shannon: See, this is the kind of stuff that gets me really excited because —
Fr. Robert: Yeah.
Shannon: — it reminds me so much of making beautiful websites when I was in middle school and things like that. Now I want to create these — these really cool GOOEY's and turn it into a video game. You know, I want to make a — some kind of adventure game out of the one that I did last week.
Fr. Robert: Yeah. Someone's saying, "Well, it's just like a VBA, a visual basic — yes, yes. Actually, it is a lot like VBA. It's working the same way; it's in the same framework. The other thing to know is, yes, this will work with MonoDevelop. So people who are developing on MonoDevelop, don't worry about it. Yep, this — they actually have a module there that will work with WPF. The other thing that I'd really like for you to do is, if you start to freak out, if you have that moment of panic, bring up the code for this exercise, for the program that Lou just showed you, because we've made that available on the GitHub already. It's actually up there right now. And bring up the code for last week's program, from his code warrior program, because you'll see the code looks almost exactly alike. Sure, they're in different spaces; sure, they're encapsulated by different things because they've been put into classes; but the code itself will look almost identical except for changing the console command. This is what Lou was trying to show us, which is, why would you be stuck with console and ASCII and text —
Shannon: Right.
Fr. Robert: — if you could have something like that.
Shannon: Something pretty.
Fr. Robert: Something pretty.
Shannon: Yay! (Laughs)
Fr. Robert: Lou, what else do people need to know before they go off on their — their merry WPF way?
Lou: Sure. So, like, what you were talking about before is, you can actually do it in a Xamarin studio, what they call MonoDevelop, and this is just an example. Unfortunately, they don't necessarily have true WPF integration, so they don't have, like, the XML kind of backing or a markup backing; but what they do have is a form builder that's very similar to the one in Visual Studio. So if I wanted to drag some buttons over here or if I wanted to drop some fields like I did on here — and again, if I double-click on the button here, it takes me to the — the backing code. And again, it has exactly the same code as I have in Visual Studio, and all I'm doing is the exact same code; and if I were to run this, it will run, and look — it'll look not as nice because it doesn't have all the fancy schmancy stuff on it, but it will run exactly the same. So if you were to basically copy this into your Mac and run it in Xamarin Studio, the same code would run the same — a similar GOOEY would show up.
Fr. Robert: Right.
Shannon: Cool.
Lou: So that's kind of a nice thing if you can — if you wanted to have a cross-platform Windows application. So —
Fr. Robert: Lou, thank you so very, very much. Again, this is a lot of information, but I'm hoping that the code monkeys — members of our community — will be able to look at this and realize, Oh, it's not that — it's not that different. Yeah.
Shannon: Oh, yeah. I've got faith.
Fr. Robert: This — yeah, I've got faith, I've got faith. There's some smart guys.
Shannon: Yes.
Fr. Robert: And we want to see what you do with it. Lou, we're going to have you back next week, right?
Lou: Definitely.
Fr. Robert: And next week, I think we're going to be going back into some more graphical goodness, so what have you got cooking?
Lou: Sure. So one of the things that's really powerful about WPF is, like you were saying, it's backed by the graphical engine that they use for, like, Xbox and other gaming platforms called DirectX. And so it's very powerful. It can create animations; it can create really cool touch-type UIs; and so what I'm trying to do — what I have is a little bit more — more advanced, I guess, WPF version of application. It's touch-sensitive and it simulates some, like, touch-type feeling where you maybe swipe a book and a page will turn, and the page will show shadow and all that stuff. And so I wanted to simulate that for you so you can kind of see what the power is once you start getting a little bit more advanced.
Fr. Robert: Hmmm, developing a touch-based program. Lou, it sounds almost as if you're trying to help us move into a mobile device.
Shannon: Oooooh.
Lou: Yeah, it definitely could potentially move you there, sure.
Fr. Robert: (Laughs) All right. Now, Lou, for the folks at home who maybe don't know you — maybe they haven't been watching the last six weeks of Coding 101 — can you tell them where they can find you, what you've been doing, and what you're up to.
Lou: You bet. So I'm a developer at Microsoft, been here for ten years, and you can find me on Twitter at @loumm. Again, I'm here at beautiful Atlanta. Unfortunately, it's a little cold here, but I'm here at Convergence 2014, so come check out my session if you guys are here and if you're interested in Microsoft business applications. And you can also find me on the [unintelligible] dynamics.com website as well.
Fr. Robert: Lou Maresca from Microsoft, we love you. Thank you, code warrior.
Shannon: Thank you.
Fr. Robert: And we'll see you next week. Now, I — the first thing we've got to tell people, right, we've got to tell them that everything is in our show notes.
Shannon: Oh, absolutely. Over at twit.tv/code is where you can find all of our show notes, as well as links to our GitHub and links to all the different code that we have shown, and some examples that will definitely help you out with your everyday coding needs.
Fr. Robert: Yeah, especially that GitHub. Go ahead and bring up the code from this week and last week. And like I said, put it side by side and put your fears to ease. This is really not much more complicated than what we've already done. It's just, as Snubs says, so much prettier. And don't forget to subscribe to us on iTunes. Believe it or not, we're actually still really highly ranked.
Shannon: Are we really? Wow!
Fr. Robert: Which is weird. We're, like, in week seven now.
Shannon: That's great.
Fr. Robert: If you like what you see, please share us with your friends. Tell them to subscribe to the show. Tell them to jump into iTunes, and help us get the word out about Coding 101.
Shannon: We're on YouTube, too.
Fr. Robert: Oh, go figure. Really?
Shannon: Yep. Youtube.com/twitcoding101. That's where you can watch all of our episodes, and you can catch updates about any upcoming Google Hangouts or anything that we're doing over there.
Fr. Robert: Yeah, go figure. And speaking of our Google Hangouts, we've got a Google+ community. This —
Shannon: Yes, we do.
Fr. Robert: It's — I think it's growing. We're going to get up there soon. I think it's going to catch the Know How community, which is at 6,000 members right now.
Shannon: Definitely. Yeah, we have just over 500 right now in the Google+ community.
Fr. Robert: It's getting up there, yeah. What I like about the G+ community is it's a really good place to post your questions. If something is catching you — if you can't get past a certain error — or if you have a question about a program that you would like to make, it's filled not just with our standard code monkeys, but there are plenty of code warriors in there. People like Joe, who can give you some solid knowledge on how to solve your coding woes.
Shannon: Yep, absolutely.
Fr. Robert: Now, also, if you're not into the Google+ groove, I think —
Shannon: We're on Twitter.
Fr. Robert: Yeah, we're on Twitter.
Shannon: Yeah.
Fr. Robert: What are you?
Shannon: I'm @snubs, A — S-n-u-b-s. (Laughs)
Fr. Robert: (Laughs) And I'm at —
Shannon: As I forget how to spell it.
Fr. Robert: Yeah, @snubs, and I'm @padresj. You can find us, twitter.com/padresj; twitter.com/snubs. I think — beyond that, I think the only thing left to say is that I'm Father Robert Ballecer.
Shannon: And I'm Shannon Morse.
Fr. Robert: End of line.
