Ep.10: Scrolling! - Network Chat Programming

Key Takeaways

hey what's up guys my name is aeno and welcome to episode 10 of network chat programming So today we're going to talk about um primarily a scroll pain okay and I know that we're spending a lot of time on this GUI GUI stuff but I mean it's kind of important and also um let me just put in our basic detail details here it's important and also it just it just needs to be covered and I've never done a GUI kind of series before so um application development this is going to be like the series that covers that I guess CU you can see we're doing a lot of stuff here I'm typing text here and I'm typed in a lot of constructive text um right and so when I kind of start exceeding and you can see here when um when this kind of starts to get exceeded and I start typing more stuff in it it kind of just pushes everything down and that's not good okay there's no way for us to scroll through this we want to make a window kind of like this right that we can scroll through just like that um so that's what we're we're going to talk about today and then hopefully next time next episode we'll actually be able to move on on to the the client server kind of stuff okay um hopefully so um unless there's something there's probably something else that comes off for gii cuz I am doing this kind of live so hopefully not though hopefully everything will be good um so we have a text error called text history yeah um I'm not a big I'm I'm just not a big fan of how um uh window Builder names things like we have this txt R history yeah like it's just not I don't know it's just not very cool so what I want to do is I going to refactor that and what that means is I'm going to basically rename it so I'm going to rename it everywhere so instead of it being called text R history I'm just going to take I'm just going to um basically change it into history right going rename it to history because where else um are we going to use history nowhere right it's just going to be a text area so I'm going to right click here and go um refactor which is right over here and then rename and I'm going to just basically just type here what I want the new name to be which is history hit enter and you're done okay really really simple okay and uh effective as you can see um now let's see here what else is going down um we made inserts which is good uh I think yeah okay we'll just do the pan now so to make a uh scroll pan right what we need to do here is uh basically just create an object out of it of course first so J scroll pane whoops J scroll pane we'll call it uh we'll call it scroll um equals uh new J scroll pan and of course the parameter will be our little history text area just like that okay we'll have to import that as well of course that's a pretty standard procedure I'm sure you guys are used to that um and what we have to do next is kind of set the bounds of what we want our scroll pane to be now this is a like I mean h I'm just thinking like it it's not uh what what we're doing here is it's actually really cool what we're doing here is essentially we're just saying okay we're kind of it's almost like a canvas in a window okay cuz you you guys are used to game programming um you know we set the sides of the canvas blah blah blah and then we just pop it inside inside of the window this is kind of what we're doing okay we're kind of doing the the uh the text area stuff and then we're we're putting it into a scroll thing and that's that scroll pane is what gets rendered so instead of adding history here what we're actually doing or what we should be doing is something completely different we should actually just be adding this scroll pane okay now this changes a lot of things namely these grid bag constraints what they should be I don't know how I made that character what it should be and if I just go command shift r no that's not it is it alt shift R okay I don't know what it doesn't matter I don't know what the shortcut is for refactoring but let's refactor again rename oh okay it's control Commander wait or option Commander anyway um we'll call this uh we'll call this uh scroll constraints I guess okay so we completely changed that and um instead of us over here basically um well yeah that's what we've done right and you you can notice over here that it's the same parameters as it was before right and we don't have to like set bounds or anything we we could set bounds of course but we kind of done that already because we um we're giving it like a grid coordinate but you know we'll we'll see we'll see what this looks like just see what it looks like but what we've done here is we've actually just put this text area inside of a a scroll pan okay and of course we've done that by uh calling the Constructor with the text area as a parameter so let's just run this and see what happens so um you know Local Host 8192 standard procedure here hit log in and you can see first of all that it's worked straight away you can see that we do see our um our actual window here our text area now one thing that's cool about this and one the one I guess I guess the reason that really you know you can see why it works is because nowhere do we actually call this history right if you actually just Mouse over history and you click on it you can see all the uh all the uses of it here it's never actually added into our into our J panel right into our content pane here it's never actually added into it all we've done is we've added it to a scroll Pane and that scroll pane seems to be rendering so let's test out our uh you know our awesome stuff here whoops that's my keyboard get rid of the uh elimination there and as you can see awesomely enough it Scrolls now and there's there's a nice little scroll bar here which actually will be which is platform independent so in other words it'll actually match um the style of your platform because we are setting the UI manager here to Be Our Guest system looking feel class name um and you can see what we've done here is an awesome little and make sure it's focused awesome little thing uh that's called a uh scroll pan now one thing that you can notice right away is it doesn't actually scroll now okay because if I click over here or whatever and you know do stuff and then type back here it does scroll but occasionally it won't um the way that I I like to do that is I guess to always update the uh the carrot so it's one thing that we should really be doing so um if I come over here into uh just just over here I think I'll just make a carrot okay and not a carrot as in you know carrot that you eat so that's bad uh so private uh default carrot um and I'll explain what this is in case you guys don't know and let's import that right hopefully this works in um Mac actually I've never tested this before in Mac probably will uh okay cool so what a carrot is is this little blinky thing that tells us where we're typing so if we actually set it equal to uh to this text area which is called history. getet carat right um and we'll actually have to cast that to a default carrot because I think it just returns a carrot yeah it does okay so default oops default carrot right um so we've cost it here and now the beauty the beauty of the thing that we can do now is we've actually just gotten the carrot that we get from the history so it's not visible right because if we launch this little this little baby here um you can see that uh once I put in all those details which probably makes some default details uh while we developing this we can't see where we're currently typing here um we can over here you can see in the uh in the text field that's because we've set it we've I guess we've enabled it for editing uh this is RA only so we can't see it blinking but it is still there and the location of where it is is what determines um I guess what like you know how we scroll because if I go down here you know we'll scroll I scroll back up you can see it just keeps going it doesn't actually update this thing this scroll is getting longer but it's not actually updating and you can see right now it's not either because the carrot stays here we've clicked we've kind of like clicked and we've put the carrot over here so of course when we update it's not going to move the carrot now if we were to do something like carrot. set update policy right to default carat. always help me out here I spelled theault wrong that's embarrassing do always update yeah then it's always going to update okay and it's always going to go to the position where the text last appeared so again if I do type in our details here and I do our stuff blah blah blah we'll just get down so we can see how that kind of works here and what I'll do then is I'll scroll up and I'll click over here and then I'll do this again you can see that it uh doesn't actually update now that was not what it was supposed to do um it might be I'm not sure if this is a uh I'm not sure if this is a platform dependent thing um H right I should probably investigate this a bit further but um H that's interesting you know what let's try moving this carrot code uh beneath the scroll just because I think it adds it here it might not work I don't think this will work but we could uh try it out because it I'm pretty sure this works on Windows just for memory um maybe uh maybe Mac is a bit less sophisticated we'll see so we'll type in our code of course oh well not our code I just our random text here and and then we'll scroll up we'll click somewhere and then we'll see if that updates okay it's it's not um luckily though there is one more technique I know it's it's probably not as clean but it does work um and we'll see if it even works on uh see if it even works on um on on Mac but the thing is the other technique that we could use here uh again for memory is if if we do log in every time we type something and we hit send what it's doing is it's it's actually running our uh our send um method here right and the other thing the other detail that we have is really only only what you know it should only scroll whenever it receives like a new message so when it receives a new message or when it actually when something gets printed into this console that's when it should uh you know reset the carrot position I could type out my tutorials now so that being said what we could do is simply say that when we do do this right let's actually um grab our little text area which is called history and and what we can do here is we can actually just simply set the carrot position to be um let's see if we get the length uh of the thing and I think we have to get the document first yep do get length there it is um that should s that should actually set our carrot position to be at the end so let's try that out okay again no guarantees I don't know if this will work Mac it should should even be working uh normally but we'll see so um I'm surprised that the first method didn't work uh let's scroll this stuff you know see what that looks like and let's go up here click somewhere and see what that works okay that does work yeah you can see if we go up to the top we click somewhere up here we say something it immediately snap snaps to the Bottom now that's um yeah so it's it it is quite weird that this technique doesn't work on window on Mac this carot defa car I might have done something wrong I don't think so that looks pretty right to me um so it is it is a that that remains a mystery if anyone knows why maybe you can let me know um again I am primarily Windows developer but the point is um well hang on a minute we shouldn't do this here okay this is a quick thing this is sand okay the sand thing is really what happens uh when um when we when we send things so in other words it won't work for receiving well well well it will but we'll have to type the same code twice so let's actually just move this one line of code down into console because that's really what's appending it to the uh to the thing so again if we just verify that that does work which it will um by logging in here and uh doing this stuff as usual come on okay scroll up whoops scroll up click somewhere okay it doesn't work okay so that's going to wrap up episode 10 of network share programming if I do look at this little chat application that we've made which is uh pretty damn awesome if I if I do say myself um I think the resizing the resizing needs a bit of work yeah there's a big uh Gap here we'll probably just uh do that I don't know in one of the episodes we're not going to focus on resizing that that's more of an aesthetic thing we'll do that later uh it it is just a quick fix you just have to play around with the uh grid pack constraints in fact quickly ju just now one thing that's uh interesting is um let's say this uh so this grid X and why what if we set these two to zero Let's uh let's just see what that looks like um and also I think we haven't said any weights before Oh we haven't waiting have we have we because that that could be another episode H I'm not sure if I okay R everything yes okay uh have we covered weights no we haven't okay we need to talk about weights and how they work with the grid back layout so we'll do that in the next episode of network chat programming thanks for watching guys if you did go on to enjoy the video well if you did enjoy it um please hit the like button again 200 likes one video per day 300 likes two videos per day and I I will see you guys in the next episode goodbye [Music]