Slide 1: Hello welcome to Friday stormy Wendy kind of yucky but good it's me again Lauren and today we're going to talk a little bit more about event delivery and the interactive hierarchy so let's just give it a go here Slide 2: Just a couple or reminders. Layout part 3 for is due tonight at 10 p.m. Remember git add commit, basically you should be using this on a regular basis to keep track of where things are. You can to roll back if you have a problem but then remember to go to the GitGrade Turning Page. I put a link right here, this is actually a live link. Also remember that accessibility is open. This is a two-part assignment you will accept some code you are going to be running this code and figuring out what you need to fix to make the accessibility work. And then you're going to actually be fixing it so there are two parts. You'll turn one piece into Gradescope which will be this document and the other is the fixing of the code that will go in to GitGrade. Let's spend just a couple of minutes talking about the evaluation feedback from Wednesday and then we're going to jump into talking about event handling. I don't know how much we'll get through today. The assignment that's associated with events is actually going to happen after the midterm, but there will be some things conceptually that will be on the midterm and so we're going to kind of think of it as a high level and then dive deep. Slide 3 So I first want to thank everybody for taking the time to give feedback again as the instructor who will be doing this class next quarter you know this is only the second offering of the class already I know it is way better than what they had it's a lot tighter cleaner than I in Spring. The distinction between what the theory is and how we are putting it into practice is a little we're trying to be more clear about it but we do have work to do and what you gave us as feedback was really helpful. Slide 4 The response speed on Piazza: we're going to try and be a little more consistent but there's a balance, right, I don't want to answer questions to quickly because part of what we're doing, as a 300-level course for those of you especially who have just come from 143, we are now giving you the ability, you need to think on your own. We want to give you the space to think on your own, we also want to give the space for others in the class to help out, right? So if we don't answer within a minute or two right like that we want to know if there's an issue but we also want to see what else other people will say. Slide 5 We are also honing our active learning activities within the class so it was very helpful to hear that some of the activities probably feel too easy and some might not be as clear as we should be so we're going to work on that. Feedback is always welcome. Slide 6-7 More example of midterm questions: it turns out that there will be a post layout quiz. After every unit there will be a quiz. You had doodle, you had a doodle quiz, we're going to have the layout quiz. I believe you have till Sunday to fill that out. The idea is, those are questions from the spring term exam, so you are getting examples of the midterm by doing those layout quizzes. Then after we get accessibility turned in, which is due Tuesday, you'll get another one a very quick turnaround on accessibility so you can see some of those questions as well. Slide 8-9 Alright, I kind of want to paraphrase this idea of more concrete connection between lecture and assignments. Going to take a little detour here about what the purpose of this kind of is. It is a new class, but there are only a few classes in CSE where you take 143 and then you go into a 300-level class. I have taught curriculum at the hundred level, remember that and one in 142 and 143 pretty much all the content is given to you, things are laid out pretty carefully for you and you're supposed to synthesize everything that you've learned and produce it in this assignment which is like one of the assignments that you get for 142 and 143. What we are trying to do at a metal level in this class is take those rails off a little bit. You know if you were to go into industry, and I've been, I get a spec for something. It may be a little nebulous in areas so here's where you actually have to do some deeper thinking about what have I learned in theory what resources have I been given and how do I actually go use those resources to solve this and what questions do I know what assumptions am I making. So it's a little bit deeper level of thinking and this is a really good course for learning that as a skill and we're realizing that we need to do a little bit more scaffolding to teach you some of those techniques for those of you who are this is your first 300 level class. But I do want to specify that what you will be getting in lecture is more theoretical, right, This whole class the idea is that we want to talk about interaction programming as a high-level entity. This is it why do we do things the way we do it. We are using Android programming as a substrate to really see this in practice. In the future this could potentially be not only done in Android but also done in web or done and Swift. The idea is, this high level of abstraction will actually translate into different areas that makes sense, so we need to give you the spiritual background and we're trying to also give you the experience of what it's like to do human computer interaction as a whole. This means pure evaluation, and doing a user study, and thinking about all of that stuff that if you take 440 and 441, you'll go deeper into that piece. Right now we just want to think about why were toolkits developed the way they were, okay? So we're going to try and be a little bit more specific about when we're talking about theory and when we're talking about practice to make that a little bit more clear, but you're also going to have to go with it a little bit, right? At this point, does anybody have any comments or suggestions questions? Just post something privately or send email to me or Jen. Okay, on to content. Slide 10 Everybody here has taken 143 or the equivalent. Think about it: I have a command line interface up here so this is just like it's actually it looks like Windows Ubuntu or something like that but trying to imagine you're using jgrasp and you run one of the programs from 142-143. One that takes input from the user. How did we constantly get input from the user? I'm asking what programming construct did we use to get input from the user over and over? We actually took things with a scanner, but how did we continually ask? Think about some of the assignments, we did guessing game, assassin or hangman in 143. We didn't know how long the user was going to go, we just kept looping and looping until we had hit a signal, something that told us to stop. And we kept asking the user for input and user would input. As Benjamin said, we actually had to request that input using system.in. Slide 11 Right, okay, how do we do this in a graphical user interface, that's what we're getting to right now. How are we going to take input from the user in a very clean way that's extendable? Cuz if you think about it, we had to do this differently for guessing game than for "you don't like." The structure was kind of the same, but we were asking different questions. Slide 12 We're doing this, these different programs so just as a review this is another thing this time it back to what the heck are we doing right we're thinking about where are we in this when you were doing layout part 1 2 and 3. Which of these developer roles did we have? Did we take on interface program or component developer, Library extender, architect extender or toolkit builder for layout part 1 2 and 3? Where are you, what role are you taking? I want you to keep thinking about this as we're going through some different lectures what role am I living in right now now for some of you not all of you maybe you were just an interface programmer did anybody maybe take on the role of a component developer by taking some of the existing interface that were given through the toolkit and creating a new thing? Kind of the same way we did with our line or line view did any combine and create something new? So let's say I had in my interface a piece of the interface that's replicated over and over that has an image in a piece of text under it I might want to say I have a captioned image View. I would at that point be a component developer because that's something that I can reuse over and over, all right? And, I might even share with other people. Slide 13 Okay another piece of little review. Device Independence. Remember that we were talking about device independence with respect to output device. Independence with respect to input can be very complicated, this is what Jen kind of talked about: If we have a touchscreen I am bounded to the dimensions of my touch screen, but if I have a mouse or a 3D mouse I can move way over past the dimensions of the screen so that's an unbounded input. We'd like to still be able to take that information in the same way, right, and we're going to do that. Slide 14 We also talked about events. Okay, so what is the content of an event record for those of you who have been in 154 with me? We talked about events in terms of what happens on a webpage, but we're talking at what state house, so what can you do with a mouse. The event type might be some things you can do with a mouse: what else can you do with mouse? hover. So you can drag over and then you can keep that cursor right in the same spot. So a click is actually two events, it's a mouse down and a mouse up. And a hover is like a move and then a pause, right? Okay so what you're clicking on what you're hovering over is an event target. Slide 15 You might want to know when that happens, did I click first then move then unclick? What would that be I dragged right so the timestamp could be very interesting to know about event specific variable could be the down up and what was going on at the time it could be sort of Modifiers what if I'm doing a quick I'm doing a drag but I'm holding down the keyboard, something on the keyboard, at the same time, okay? Or if I'm double-clicking not to be another thing cuz it's double-click is a down up down up but we actually got into a double quick. Oh actually so I wanted to pause here remember at the very beginning of yesterday and we do this on purpose so you can have something to hang onto we asked you to write down three different events and we got a couple of them from the audience. I want you to just for a second and those things that you wrote down go back to thinking about what was the event Target phenotype and so on and so forth. My example was I think if I said if the cat gets on the counter I squirt them. With the script on is that what I said to the event type cat jumping on the counter; Event Target cat maybe it's the cat maybe it's the counter; the timestamp he usually does this just before I cuz he wants food; That's a good question what would the value be here? Which counter he gets on I guess maybe. Yeah, that would be which counter does he get on that counter or this counter and then the number times he does it, make times I think about for a second I'm going to give you a minute to think about your event maybe talk with your neighbor. It's a little too quiet in here, I want you to talk with whoever you're sitting next to it so talk about your event to your neighbor and trying not they sing and I will give you a minute to do this. Chatting with your neighbor even if you didn't know your neighbor. Does anybody want to share I will just share one out or two of your events? Did you say something on Wednesday and raining Steven? Target is you feel the rain. You said that was the event Target. Time stamp is when you step outside. Value: response to the Rain would, that be the value of Beanie moving to get it. It's a good question the umbrella is it how hard it's raining near me. Slide 16 Flexible with this up I'm not sure or maybe cool so using Jen's example we used it's raining outside so we put up the umbrella. Awesome. So I don't think she quite got to this I think this is the very end we were rushing a little bit thinking about this model for representing input. We can think about how to translate these two widgets on the screen a button returns an integer value and these are the values in terms of what being given. A locator returns the position on a logical view service keyboard could return a string as a code. If you've done Windows programming a lot of times has called DK something. Stroke is a sequence of points sort of a click and drag an evaluator. I just like what's that it turns out it's like a scroll bar or something is getting a value in between some min and some Max, but still we are getting back a value from this event. Slide 17 Okay so Android events they were their own class and this is partially the due to the structore of the language, it is implemented it's done differently in different systems so in web development we do a lot of call backs. But in any event is actually an object so an object and remember that it when you go to see like the javadoc were the Android. Slide 18 For this you'll see in the upper corner what do things inherit from, (clicking on MotionEvent Javadoc) So a motion event inherits from an input event which inherits from the object. And the types of things that are in here, including Getting the action; Getting the index; getting the x and y coordinate; the value of where it is what the button state is. This is like a modifier. Getting when it happened; Getting the orientation if it's Shifting the pressure There's a lot of things that you can do with a motion event. Slide 19 We've seen hierarchies and other places. We've seen the Java development kit hierarchy. What other higher Keys have we seen so far in this class? Slide 20 The View hierarchy Interactors the layout The Views Slide 22 I was just talking about events and components I'm tryna remember what this? okay so events can also be abstract things, or very physical things. You press a button on the keyboard, you press a button on the mouse. What other abstract things can you think of that when you're interfacing with an app could happen? Maybe abstract is too abstract but try not to think about physical things you're doing but other things that can happen with the program. Kind of events. So if you have an animation there is a tick that happens. I actually like to use this example again with my cat. I have a routine in the back of my head to feed the cat. I know to do that at certain times of the day. When I wake up and about 6 in the afternoon. But there's another thing that actually triggers this event and it's the cat meowing. So that is an asynchronous event. I don't know when it's going to happen, but then I also have these two timed events that happened about 12 hours apart. I'm not doing it doing anything to trigger that event, the clock is triggering that and then I hit that time and somehow it told back to me to go do that. I used to use this example with my kids and smoothies "mom get me a smoothie" but anyway. So other ones that you can think about is like the state of the application changing. Slide 23 When I create the app I need to know that the parts of the app have been created so that I can start adding my widgets to it. In web we wait for the on load of the page, we have to wait until the page loads before we can do things to it. Slide 24 Whether or not this is active right right now this is active now I'm going to go here and event handling has become an active and our website had become active so there was a change in state there. Slide 25 I could pause this, right? Pause an activity in Android that means just getting it to go to the background. Slide 26 I could stop the activity completely. In other words I've made it to the background. I've actually shut it down but I might want to save some State there Slide 27 and I can also have a case where the app goes inactive. So let's say I walk away from my computer and my computer goes into sleep mode it should or could be the case that my app goes inactive. Slide 28 and then we talked about timers Slide 29 So, this all should look familiar from day one we talked about like what what's the flow when an activity is launched. Where we're going to start talking about onCreate if it keeps you keep the activity is running with positive or stop it. You can kill the process and so on and so forth. So you can start to think about how those are actually actions, events that happen. That really, the user isn't doing necessarily not not directly okay so going back to this we are going to put on this is me transitioning but before I transitioned any questions about what these event Things Are? Slide 30 okay so we're now going to think isn't a tool kit Builder and we're going to be thinking about how the toolkit how does this all work what happens. Remember that we talked about in our 142 and 143 apps we actually built to whoop that constantly pulled the user and we had to wait for the user to do something. Slide 31 To move on, there's this infinite Loop in the back of one of these graphical user interface and this is true in any of. Like I remember when I was first programming Windows, this was like mind-blowing to me that somebody had program The Loop. And it's just sitting there in spinning and it's waiting to see if anybody does any input and when the input happens it figures out how to send that input to me so that I can react to it. I'm going to write a different app than Connor than Jasper ... so we can't, we have to write this in a generic enough way so that it'll work for everybody. In other words, it doesn't matter what events are going to come in or where they're going to go, we just know that that's going to happen. Slide 32 Okay so as a toolkit developer we need to create this in it in a generic way. So don't worry about this, this is actually all set up for you. It's running in the background. We haven't really talked about threads, but we have our code that's running and in the background it's like another little mini program that's just sitting there and spinning and doing this. Okay what class do you do threading? 332? okay so you so you touch on it you may touch on at 373. If you take that. Okay so let's say an event is created. The event that's going to ask you cuz you want the events to... remind me what a Queue is 143? First in first out. So the first click I do is the first click I'm going to handle. Why is that important? where could you see it breaking down if I didn't enforce first in first out? expects expects things to happen in order. yeah right. So some events are going to depend on other events coming before them. double click. Would it make sense to have Mouse down Mouse down Mouse up Mouse up? no, you need to see mouse down, mouse up so there's an ordering. Slide 33 Okay so the dispatch thread is going to pull these things off in order and then it has to figure out where is this stuff going to get sent. Slide 34 It'll depend on both position or Focus. What do I mean by that? Slide 35 Think about a mouse down or a mouse click versus just going over a window. So with going over window what might I need to know like if I'm scrolling over you notice how I'm going over this and you're seeing things pop up over. I'm going over the tabs and you see things pop up. Do any of those tabs have the focus? currently what window has the focus? The window that has the focus is my current slide deck. If I hover over this it's still giving me information about where I am but I'm not clicking on it right? if I click on it it's very different Behavior than if I'm hovering over it. So it's also the Z if you notice nothing is happening if I had another window in fact I believe I do have another window. I have my Android window underneath it and yet as I still go over this it is only doing the the mouse move in on the top so that's Z order right. I can hit a key, another event, and it's going to go to the next thing so you can kind of think about this also is a hierarchy as an interactive higher key and what's going to happen is is going to try and look bottom first top down to find out where this event should go. We're going to go over this a little bit more I think Jen's going to go over this little bit more on on Monday. But just know that it's looking at this hierarchy. There's lots of things are tree-based and this is why you're seeing trees for some of you are seeing trees for the first time. Slide 36-39 So it's going to go through this tree and a very logical way and it's going to find out what of these interactors is going to interface or is it going to accept this event who cares about it. So I'll show you that in a in a second. I want to get something. If it finds the first thing that it finds that will accept this event, it will have that interactor respond to that event. It may be the case that that interactor is the thing that is going to consume the event and we're going to be done with it. So, for instance, if I were to click in this window right now, it's going to do something. It's going to advance the screen or the slide. I don't want it to go to my window that's underneath and process that Mouse down as well. That would give us erroneous Behavior. So, I want this window that's right in front of me to actually accept the input and say don't process it anymore. There may be other cases where you want it to flow to other things as well, so putting on a new hat I can get this through this: I want to register with the windows that I am creating as a component developer, right. So I'm not just using the interface, I might be developing a new component from either an interface program or use what the toolkit Builder had given me in a generic way. So turns out there's this thing called a call back. Remember, I was telling you about the cat meowing and that's sort of triggering something in my head. That's my callback. Somebody else might have a similar callback for the cat. Turns out my kids don't respond to the meowing so their callback is no, but the event is still there. Slide 44 I just want you to recall that an interface in Java is something that has Behavior but no State. we are pre to finding that an object has to respond to a certain piece of behavior. It can be inherited though the view. Classes are going to inherit if we if we Define it as implementing this particular interface. We're going to say that this particular now this thing that's inheriting this Behavior has to respond to an input, but anything that is basically clickable can actually respond to one of these events that's being dispatched in the tree. That makes sense or did I completely Munch that we've got this tree of interactors some of them are going to respond to this call back this click and then the Android, that's what I was talking about, the Android triggers the method. Slide 45 Let's get into the details so view you can Implement onclicklistener or LongclickListener or FocusChangeListener. Right, these are interfaces in the view object that we can actually Implement. Also when we say more API documentation that's a really good indicator that you should click on it. You should try to take a look at this and see. Not all documentation is great, I'll admit it, but it would be really good if you take a look at some of the documentation and see what questions you have. Slide 46 I want to create a button and I want to actually register that listener with the button. Slide 47 There are two ways that I can register a listener with a button. I'll show you both of them and then I'm going to do a little live coding and show you actually how it happens in in practice. Slide 48 So the first thing I can do is this stuff in the middle I'm going to create what's called in an anonymous class. I'm going to try and purse through this a little bit because for some of you have never seen this before if you just coming out of 143. We don't talk about Anonymous classes. For some of the you who may have done other classes you may have seen it. Bear with me, okay? Slide 49 <<<<<<< HEAD what does this like like? It took me so long to parse this and I'm just going to go back one side the thing that drives me crazy is the semicolon at the end of the curly brace and why the heck is it there so bear with me okay let's purse this. - private that means that it is a variable that is only available to this class that I'm in. - okay view.Onclicklistener() what is that? That is the type this is a an object. - onclicklistener: that is a subclass. it is a private. It is an inner class. you know how we told you the very beginning of 142 you can only have one class in a file? well you can have in here classes so this is actually an inner class that we can see most of time inner classes or private this is something that we can do. - mclick listener is the variable name so I have just created a private variable called mClickListener, which is a view. - Onclicklistener: then I set a new view on this listener - open close print I am creating a new object now. The weird thing here is usually we just put a semicolon right there the problem is you don't click listener is abstract it's not completely formed yet we need to actually Implement something the thing that we have to implement because it hasn't been defined in onclicklistener. here's onClick we have to do onClick. So if I'm going back to hear it'll actually say let's see, let's go to this one cuz we want to look at the documentation for this. Notice it says "abstract void" it has not been declared in the class few onclicklistener we have to do it if we're going to use it otherwise the compiler is not going to let us compile this line. The compiler would complain we have to finish defining this. ======= what does this look like? It took me so long to parse this and I'm just going to go back one slides and show you the one thing that drives me crazy is the semicolon at the end of the curly brace and why the heck is it there so bear with me okay let's purse this. - private that means that it is a variable that is only available to this class that I'm in. - okay View.Onclicklistener() what is that? That is the type this is a an object. - onclicklistener: that is a subclass. it is a private. It is an inner class. you know how we told you the very beginning of 142 you can only have one class in a file? well you can have in here classes so this is actually an inner class that we can see most of time inner classes or private this is something that we can do. - mClickListener is the variable name so I have just created a private variable called mClickListener, which is a view. - Onclicklistener: then I set a new View.OnClickListener - open close parenethesis I am creating a new object now. The weird thing here is usually we just put a semicolon right after the parenthesis, but then the problem is the new click listener is abstract it's not completely formed yet we need to actually Implement something the thing that we have to implement because it hasn't been defined in onclicklistener. here's onClick we have to do onClick. So if I'm going back to hear it'll actually say let's see, let's go to this one because we want to look at the documentation for this. Notice it says "abstract void" it has not been declared in the class few onclicklistener we have to do it if we're going to use it otherwise the compiler is not going to let us compile this line. The compiler would complain we have to finish defining this. Side 50 Okay so the stuff in here is US declaring the method that is going to override the interface the abstract method that is in you. On sequester and the reason why the same people would is here is because it is basically finishing the statement that is ending at the end of the day if we had a few. Onclicklistener was fully formed. In other words there was an onClick Define we could just put a semicolon after the open close paren, here, and let you read this code. Tell your neighbor what this thing is doing. I'll give you a a minute. I think I heard a couple of people saying it's counting something. It's Counting what? can you just read from the text of the code. Somebody wrote this nicely didn't just use M plus plus. Right it's incrementing the click count. How many times we've actually clicked. How is it knowing where we clicked? Slide 51 so this is the piece that I didn't quite cover: we have to register this click listener with the button on the screen. There's some button that get created. How am I finding this button? This line right here it is actually finding the view by ID based off of the ID. It is casting it is a button. It is double-checking that it isn't null. This is good defensive programming. And it is saying hey Button I want you to set the clickListener not to the default but to the thing I have just put in here. And the variable is the private variable that we created. Slide 52: skipped Slide 54 Question: if I had two buttons that I wanted to count just how many times any button on the screen has been clicked what would I want a button test 1 and button Test 2. What would I want to do? Lots of people looking at their screens... what are you thinking? I want to add a second I want to count any click on any button on my screen and now I have button one and button two. What code would you like duplicate? Slide 55 So it turns out we can duplicate we can use this code for two things we have this click listener I could actually use this click listener for two different buttons. Slide 56 I can actually take as much as we don't like copy paste I could take those lines actually the Lines within my on create I could basically find that other button make sure that other button is not know the handle to that button isn't know and I can set that other buttons click listener to the same click listener that I've created and when either one is firing it's going to increment that count Why did I have to wait until the on create happened what do you think? So first of all remember on create is a an event it is telling us when the app is created. Why do I have to wait until I get this onCreate event? do you think Google deep yeah yeah you need the button on the screen the button has to be created before we can attach things otherwise we're going to get the null pointer exception Slide 51 So we apart we're going to go to registering a listener and that's the listener register listener okay we're going to create another one. Slid 52 This is a different this is functionally will be exactly the same it is just a different way of doing it. You as software Engineers as programmers this is the beauty you get to decide what makes the sense for your application. So in this particular case I am implementing onclicklistener it is a it is an interface. So I use that "implements" keyword it's extending app compatibility activity to implement this thing. Slide 48 So going back to here just to see notice that the first version did not implement your Onclicklistener. Slide 52 okay we just accept it okay because I'm implementing it. Means that now if I don't actually create my own onClick method right here then the the program won't compile because now I have suddenly create an abstract class. If this doesn't exist then I've suddenly created an abstract class because it's implementing .onclicklistener(). It inherits that behavior but it hasn't been to find it I created this. What I'm going to do then if I'm still going to get the button the same way I'm going to check that the button isn't... no this refers to the activity itself... the thing that is actually we're creating the example activity that has the on click. I am registering this activity with the button listener so it knows when I click the button it is going to call back to the activity, whereas in this other case when I press the button it is calling back to this Anonymous inner class. Mind-blowing. Slide 53 The first couple times you said okay and I already said you can you can register I not only can you use the same listener for multiple things you can also register multiple listeners to the same widget. What I want to do oh yeah this is now that I have like 5 minutes you remember my pet gallery? okay right now this isn't going to work but I'd like to go through my images and so I stayed up way too late last night playing with us what I have here is I have a bunch of images in my draw bowl of being a fluff butt and all these different animals that I've had so these are the names of the images. This is very similar to what you saw in like doodle or or in layout. I have a method over here, where I'm going to get a basically went to these people cuz I'm still feeling comfortable with this new API for myself. I am finding in my layout I have my activity main, which basically am on my activity Maine has the content main which is a weight haunted Maine don't know how that happened Okay this has the constraintlayout, has the text you at the top the pet view which is my own little imageview and then a linear layout which is doing the left and the right buttons. We should feel pretty comfortable with this at this point. Okay going back to my main activity I have two choices I can either implement this is a view, Onclicklistener. I'm going to do it the other way I'm going to actually make Anonymous in her classes and so what I'm going to do is I'm going to come lately cheat that's the other one going to go over here I'm going to grab this cuz I can never remember off the top of my head, what what the syntax is. So I'm going to create to click listeners. One is going to one is going to be at Click listener Button.onclicklistener I'm going to implement the review not sure if okay so I think what I'm going to do is I'm just going to change this I don't want to keep track of the count but there's something that I'm going to want to do here if I hit the previous. Now one thing I should show you is that I initialize my image to zero and then I called this load image to get the image on the screen. okay so what am I going to want to do I'm going to make one of these for previous click listener and one for a next click click listener. what y'all think and I'm sure there's some way I could refactor this but for now let's just try and write it. I like to write one to throw away what do I need to do typing is hard what do I need to do here so that I can move to the next image previous image what do you think I should be doing. Okay view image - - but I do have to wrap around when it's zero load image Right View sorry when I call it that's what you meant and I do the same thing for the plus and then I just really quickly show you I would go set a time I would go and I'd grab this and I would put this in my on Create and I would register that listener. so I will I will actually post this to Piazza I will post this solution so that you can see it but I kind of wanted to show you in practice how I would go about registering it and it turns out I just didn't code fast enough. Main activity solution looks like this and if I were to copy the code in it would work and you can see all my kitties and doggies and stuff. Okay little Theory little practice I guess the buzzer. have a good weekend