Okay.
Good morning, everyone still morning.
And today we're going to stay the plan is to talk about tutorial five
and answer questions about
Before I start on that. Any questions about assignment five or,
You know it's a tutorial for or assignment one.
How many more weeks until we start an Android Studio.
So,
so this is, this is the last one we're doing on iOS, and just if you look at the schedule.
You'll see that, where we are right now is really halfway through. So this is the last iOS one and you'll see that this one night will nicely transition us into what you need to do for Android, and then the rest of the tutorials will be on Android.
So yeah, so you'll actually be able to stop using Mac OS except for studying for the final after assignment too so assignment two is so assignment two is going to be on tutorials three and four.
And that should come out in the next day or so, it will have a little bit about tutorial five but it'll be mainly about three and four.
And then, when we say after the midterm is after the midterm, you put away Mac OS, you probably want to keep your mouth running until, you know, till through the midterm because that's what I do that but then the second half will be focused on Android.
Yes, go ahead and download, so you should.
Please have.
February, 16.
What language do we use for Android.
So if you look at so Swift is a language that was designed to be a better Objective C which is traditionally what iOS programmers done Caitlyn is designed to be a better Java Caitlyn and Java actually much closer together than swift and Objective C.
So, it's some ways it's less of a transition between the two. But similarly Caitlyn is designed just like swift to use static typing to try to reduce errors particularly involving Knowles.
When is the midterm again right on schedule. So, remember the plan is, we have this week, and we have next week. Then there's the break.
And then there's a midterm review and the midterm exam assignment to is officially do basically on the 18th. So you're going to have, you know, a bit of a week to work out but you have until the middle of the break, to go through it and I will, because
I'll post solutions in the middle of the break, and then we will discuss them during the midterm review
any other logistics questions.
Now, my said no so we switching to a no Android we using Android Studio, you can definitely still run Android Studio on a Mac, and it should even run fine on an M one Mac.
But if you've been doing something weird you can certainly run it on any other PC assignment two is due on February, 18th Yes.
Remember, assignment Tuesday from February, 18, but as we talked about a couple of lectures ago.
What was it
this year.
Yeah so assignment two is different but accepted until February 22.
So, he should come out tomorrow, and hopefully get a walk on later today.
My first need to do tutorial five tutorial five took me a bit longer than I had planned.
And you all see we'll see why.
So, unless there's any further questions, let's go ahead and get started on the, on tutorial five, which actually will give you the ideas necessary for this but let me show you the code first.
But so here's tutorial five stuff here's the code. And the one thing to notice when you look at tutorial five.
First off, note that there's this this nasty bit of XML.
So you can see it here so this is, this is a lot of XML, you do not need to edit this by hand. In fact, I wouldn't bother editing this by hand, I will show you how you're supposed to look interact with that.
And then you have things so what I would suggest you do is try downloading the entire project and loading that in the past I've had to create a new project for this one try just download the entire project there may be issues.
Try it and see if it works. If it works for you, let me know. If not, I'm there but here's a, but there's instructions and how you'd get it working otherwise.
But like show you the code.
So let's go here.
So, here is a text analyzer three.
And let me just run this.
Here it is.
So this is text analyzer three looks kind of like one into.
Right.
count is here.
And
case.
So works as you expect nothing particularly spectacular with us. One thing to note, this is also true of the older ones, you know, of text analyzer two and one.
That if you rotate the display it redraws the interface in some reasonable way because things are not hard coded in terms of distances, it has this, you can rotate it when you turn upside down, we don't do it but here you want to hear and then, you know,
it will go there. And in fact, if you put this on a real phone you'll see when you rotate it it will change orientations.
Why am I mentioning this.
Because it turns out this is a bit trickier to do when you, when you're doing this, this particular code.
So this week. This code is not swift UI.
This is storyboard.
And so storyboard apps have to. So what are the two key differences. One is, instead of there being this unified view.
So this was text analyzer to as you recall, remember you normally have a preview here if I, you know, let's, let's get it to see Phil How long do a preview here but but so this is basically everything I mean there are these.
Since we only have one scene which makes it only one main screen and stuff. We don't have to worry about, you know, the other source files. Because if you look here, so the share there's content view and the textile or two at the tech center to AP is
just this.
And then, you know, you go. Share them, but then of course the main logic it's all here.
And he's actually loading.
How you unzip a file on iOS, it's the archive utility Yes, it's built into Mac OS, you should be able to use the archive utility and just expanded so yes I give you a zip file it should be very easy to unpack tractor think if you double click on it and
the Finder over the archive utility extract and extracts.
So, remember this was text analyzer to, we have this here, we, it was all declared by code but you could in fact, if you bring up the properties here.
This year, you can edit things here. And it shows you where it is in the code.
So if you want.
Why is it not showing anything here.
Anyway, but you do some, you can do some direct manipulation here we didn't end up doing most we've made up mostly doing it with the code, but this is everything.
That's not the case.
For this, here we have it split. There's a classic model view controller which is probably is on you hear about in 1406. And the idea is that you have a model which is the internal state of the application, you have a view, which shows what's on the screen
and you have a controller, which up guild with user interaction.
I always find MVC is a
separating things completely into those things I find often is more confusing than useful it's just a technique for architecture and things. It can be good but, you know, first rule of software architecture, make it make sense.
It should be clean and logical and, you know, if you find that the original decomposition you decide is making things harder, find another one that makes sense.
So, what you have here is this thing called storyboard, which is how you interact the app. So this says this is what the safer is like, this is where you do interface widget so like it eliminates parts of the screen that you really shouldn't draw on,
like, this is the part around the notch and stuff and things and then here then there's the app titles right there and you see all these properties of it and you click on these different things for getting different aspects of it, even give you some help
on it and things.
You can change their properties of it the fonts and things. And, you know, result area and things and there's all these constraints which tells how this is laid out, and we'll spend more time about it but understand this is the GUI interface for this
underneath this.
It's an XML file. If you want to like look at the XML file you can right click on it, and you can always say open as an angry face Interface Builder storyboard which is this view, or you go to source code.
And this is the source code, the XML. So, normally you do not edit this unless someone's really confusing you going, what the hell is going on you, but you can edit this, but most of the time you just, you know, say, open house and you can even open this
editor if you want to, but normally you just keep it an interface build a storyboard there so if you wanted to cut and paste into this, you would go and click on Main go the source view copy and paste from the know from well don't do it from the web page
if you want to cut, copy and paste.
Don't do that from here.
Do it from here.
This will copy paste much nicer.
As well, this.
Oh well.
Yeah, you might want to save this first, but.
Save As.
So, So those are the, those are the two files.
So okay so it's the vet. So we have one where we can design the interface and draw stuff and then we have separate code, which essentially adds functionality to the interface.
Now, notice the parallels. If you know anything about web development.
If you're in a web development you know you have this idea of a web page which is described in HTML, and then you have JavaScript. Additionally, to what will you have HTML is the basic things that you have CSS to do styling and then you have JavaScript
to add functionality, kind of similar except we don't have the CSS, HTML divide we just have this XML file. And this is exactly the same you think you'll see on Android.
So if we didn't use space with the UI allows to move elements in the preview of text analyzer to.
This is so, so we in text analyzer to when you're doing things in Swift UI. So So here's the big difference.
The fundamental difference when you work in a storyboard interface.
By default it will actually use absolute coordinates.
is a
points.
There's another, it's actually not pixels it's like points which is a screen resolution version of pixels. Think it's pointing in the term they use better but with with your you don't use absolute coordinates, you don't use away absolute coordinates.
So, with storyboard you can do constraints and actually I went through a lot of effort.
This may look very simple, but this was a pain in the butt. And the reason why is very simple. So I'm going to make an, I don't want to mess up this out so I'm going to make a.
So I'll just open. So I made a clone of this project.
Yeah.
So this is where I copy and paste make sure I can do that. And.
Okay, let's just, I don't mean that.
So here you'll notice my constraints are crazy more this was actually an older version of the code and I spent some time yesterday going like this is dumb.
So, like, if I can do things like just move this around and say I want this here and now all of a sudden you'll notice there's absolute pixel positions.
And if I
know I don't want that. I want this, I want to see this. And now if I, if I click on this and you'll notice that,
where we got this.
No.
Pricing ship but if you see there it's kind of small but there's this absolute number, and there's a way to get it to show you the value and I'm trying to remember which tab, it is.
So, some more intuitive so yeah so.
so late show you for example what what I'm talking about here so now I put some absolute things. This all looks kind of fine we got this thing here and stuff and now I'll run this
is what I want you to go.
Social here this all looks fine.
No,
this is the problem.
Look at how messed up this is you know you've got this now, and it's because I've got absolutely coordinates.
You know, if I turn this back you know like this.
But here it's fine, it's because I specified this should be this many pixels points away from that thing and so when you smooth, change the dimensions goes like don't get too messed up.
storyboard more what I saw, so the earlier question, sorry, going back forest you're asking so if you didn't use space or would you would the UI allow you to move elements in the preview.
I'm not really because
with
me here with this, you're not really supposed to be moving things around. This is more shows you stuff and you can mess with you can see properties and stuff but it's more about this is showing you what the code is generating, and you normally edit this,
there is some possibilities for interaction here, but.
OK, so this same text here and so you can actually mess with the properties here and add in padding and stuff but when you make changes here, they directly get reflected in the code and notice it's not.
It's possible to absolute positions but it's hard. Swift UI doesn't make absolute positioning easy.
You have to work at it here. This makes absolute positioning very easy constraints are much more painful. Notice here I actually, I actually had to manually go in and edit these by hand, I first did drew the interface, by putting these things in different
places, and then I essentially had to throw away, almost all the things in terms of the layout, like I like first I could draw these things the way you put things into this as the same plus here and you grab stuff here and I can take this and I can move
I can move it over and it's all you know and you basically literally go like this and you can just draw over here. And, you know, and that's how you add elements to the interface so it's very nice that way.
but I'm, what am I warnings here.
Yes, it's vertical position is ambiguous. It's like, so you potentially want to add in some more constraints.
But this this at least was enough of constraints that I figured it out and it works in different positions.
So yeah, so I think definitely swift UI is less intuitive for way for getting started in terms of, you know, you can't just like you treat it like a draw program, but it's much better for making position for making layouts that will adapt to different
screens geometries much much better.
I've done some things to try to get you to do this, and the tutorial, and
I will actually ask you in this tutorial like so notice here I'll say make put the results area in the center of the screen and the text input area just below it the swapping the position of the two.
If you do this in a naive way and you start trying and you try rotating the screen it will be all messed up.
So, this seems simple, but if you do it the right way it can be very simple but if you do it the wrong way.
It's a pain.
So, so, how do you, so how do you access the XML scripts or in.
In, Xcode, you just out, you go to the easiest ways to go to the File Browser, or the navigation pane and right click on. So you notice these icons you have these little these little bird things that's for Swift, and then you have these moral crosshair
things which are for.
You know your first storyboard.
And up. There you have this open as legal open as you can then say source code.
And then you get this.
So if you start your own project, how do you get that made this is produced automatically for you when you so if you want to make a new one of these makes you can't.
Okay, let's let's switch back to storyboard.
So when you make a new project so in order to make a new.
You go say new
project.
So you making a new project and so here you do not select multi platform.
This is bad. For this you go into iOS, just like app. Then you go here and then you specify so let's just say swift Objective C here, and then you can say swift swift UI or storyboard by default storyboard and say, will say February night.
Create.
And here it is and so then you automatically get these view controller main.
Although the real the hello world. I mean, it's like this this basic app and does nothing. So, the app delegate and seem delegate for these things. So what the reality is, is this is represents the entire app.
So you have an entire app.
And inside an app you have separate scenes and in afraid scenes you have different views.
So, we're just basically saying, we've got, you know, we're regular app, we have one scene.
the basically analogous to the view, you know, the content view content view here maps to view controller, as well. Well, we're not quite because of course this has no layout.
So really, you know, in here up when you go to text now we say what is the equivalent of this file content view content view turns into two files here, it turns into the view controller, and maintain.
Those are the two.
When I tried copying and pasting story bird code into main
Nabeel I think you're doing it wrong on during when we after lecture I can help you with, with the cop copy and pasting.
So can you combine multiple storyboards into a single view. So, if you the way storyboards are originally.
This is, this gives you a nice introduction to what the idea of a storyboard is here is, yes you see retire document that's not the best practices for current development.
This is the old style stuff.
So you start with a scene in a scene and you segue and each of these are a single view controller and his views segway manages the transit transition between different scenes.
You know, so,
so, so yeah so you can combine multiple story. So, I think you can combine multiple storyboards into a single view.
Yes, I'm pretty sure you can, because you can have basically fragments, but again, we're going to, I honestly do not know storyboard as well although you when you see what you do with them.
We do Android it's very much there but yeah it's it's what you expect.
Now, one thing important to know about storyboard is.
Okay.
So, okay, that doesn't really interface. So, the storyboard is this sensitive Interface Builder.
And let's see,
see if I say for screenshots, only good.
Let's go to images.
Ah yes, that works.
Let's play a little better.
So, what's up what's so important what I'm showing you these screens is let's see fix this. so notice, this is basically Interface Builder.
You should see some similarities.
So, by the way. So I would say don't rather than download, try just downloading the project and open that rather than copying and pasting the XML, that should be a secondary thing.
First thing just try opening the project by opening the zip file and unpack that.
So, just to understand storyboard is still pretty cool, but it's based on some old ideas and creating interfaces, this is this idea of having an interface that you draw things, and basically wire them up into draw an interface and then have separate code
to interact with it
goes back decades.
You know it's a 91 so that's through over 30 years ago. Yeah, yeah so late 80s.
It was definitely wasn't real advanced but the thing now is we've realized that having the interface separated from the code can actually lead to also to a lot of problems especially if we're wanting to make interfaces that adapt to different screens,
drawing it directly isn't actually the way you want to go you really want to specify.
You need to think of things in a more code like way, but you still don't want to give up on the benefits of visually seeing what you're creating, which is why you end up with things like know, which is why we end up with swift UI.
And notice.
Okay, so I'm just trying to give you this. Having this conceptual model of what you're doing.
Now, let's talk about what how this actually works.
So, So what you do is you draw your interface, you have all these things here you have these components.
You know, you have your you know your view and then you have your software. So, so things like this is my analysis out that's it.
This is a.
What is this. So you notice it says Interface Builder document,
same stuff.
But now we can see here, this is a UI label. So if you're wondering what the things are this is a UI labeled as the UI text field, this is you know you I button.
Here is an app title here the constraints.
You know this is you know and this layout. notice the ns layout constraint
which refers to an ns object.
its own and this is a group of methods that are funneled to Objective C a weird Objective C come from oh that's next step.
That's why you see these ns is no hanging around here.
But, so you create your interface you have here but then you want to access this in code. How do you do it. Well, if you look at these things, you go over to this part here which shows the outlets and then you'll notice that there's a most of these are
blank but there's two of them that are connected. It says editing changed on the fonts all that small but it says editing changed here and then view controller, colon, do analysis.
And this is, you know, and then T is connected to view control so this is referencing outlets and send events. So, a referencing outlet is.
So if you are referencing outlet is basically these IB outlet Interface Builder outlet.
And those are and that's how we associate these years like we say that OKT is here, that allows us to access the UI text field, which is what we have here.
New I text field is this thing here where we type in the text field is T.
here.
Now I can click on this will actually show me here.
So,
so is there is there an example of when you'd want to actually use a storyboard over swift UI today.
storyboard is fundamentally more mature, you know.
Yeah, okay.
Okay, So, um,
so you need to draw you must be right, but you can integrate the two yeah so good.
Let's move on to showing you how these things connect. So you've got these outlets here that's how what connects your and then you go over to your view controller and then you'll see this here.
and notice these little dots here.
They actually tell you how these things are connected. Now, you can't just write code here and then do stuff, and in the thing, and have them work.
Well, technically it's possible, but it's actually a bit painful but what you really need these have to be synchronized to make sure they're making the same reference I mean there's nothing really magical going on it's still ultimately, just the same
symbols being used in the XML and here, but the way they kind of have designed it for you to use to you this is you really are supposed to have like keep them both here and you go here I want to go to the main.
So, this is what what it really wants you to do is.
He wants you to like say, I want to make a new referencing outlet. I would go here and dry.
And basically say test.
And so they are. So by, by, by drawing this here, it creates this connection between the two. And now I can access this.
And then if I want to delete this. I can click this, I can delete it.
And notice the, this goes away. It's that means this particular ideology is not connected to the storyboard. So then I can just delete this tax, and it won't care, but if you delete this text and then you have something to storyboard that refers to it.
You can actually get your app to crash.
So, don't leave undefined things.
So what. So what is this week var, so.
So, normally when you have a variable, you are, you're in charge of it. If it's a week variable, it means that someone else is managing the underlying storage.
So when I created this, the UI text field here, it didn't get as weak but these other ones are.
I'm not completely sure why you I text below this shouldn't be weak and these are generally if you do this drag and drop it will put in the appropriate declaration.
So we, you know, think about it.
So why are there
so.
So what does you know why are there exclamation points after the IBM the declarations,
thoughts, but what does that mean in Swift.
So this is a bit scary.
In fact, if this turns out not to be true that we're saying that this will not be know that this will be sign, but we don't actually.
This is a weird thing is like we actually aren't assigning to these things we don't actually make their value this whole idea outlet stuff has some underlying magic, which connects it to the storyboard.
And so you that value gets filled in and you can just use it.
So let's get this.
Let's go through this guy, so that's so we connect this this is IV outlet and then if you want to have your code called by an action. You use this thing Id action, and again you have to do the same thing with your dragging and stuff and declaring it and
it's kind of a pain.
This whole having to draw connections to arrows to make sure things reference to each other. I personally don't like because it always feels a bit fragile is like what if I want to change the name and so it's like keep me in text if I'm in text mode if
it's a visual programming language okay everything's visual but this is text, let me do my text.
Um, and so we go. You go here you go on to the here we have this.
Everything changed so basically every time, the value you know someone's editing it like you type in the character. A calls do analysis.
That's what this thing is, you know, says here. And so in the view controller we define the function do a nap you know do analysis.
And I'll do analysis does that calls the function update analysis.
This function update analysis, pay attention to.
Because, what does it do.
This does the actual work of doing the analysis on the data.
Note this code here. This is copy pasted from the old version nothing's different here.
But, but here's what we use it.
And so we, you know, get the function from the analysis mode is expected. And we, you know, set the function to be, you know, basically, call the function on the input text.
We got the input text from the object, your T dot txt. And then we set the result area to be the appropriate text year, and if not, we set it to this, so this is what updates our screen, but notice it has to be explicitly called when the screen needs
to be updated. We didn't have to do that with with you I was with you I we just say, this is how things should look, here we are responsible for managing the state.
So when someone passes a character. Yeah, we better update the screen. But also, when we have to and other times like when we first put the screen up, we have to update the analysis.
And if we don't do this, you'll just have the original storyboard thing which it says result area.
So we have to run our update analysis here when the screen comes up, we have to then, as someone basically does things in the menu I'll explain this menu thing and the second here.
You have to update the analysis, and you have to do it here. So, if I leave out any of these calls, you'll see the interface will break in some way.
This is not, you don't have to worry about this and swift UI.
So,
and then, but then so here. What's this, This is the code to make the menu.
Compare this with.
How do we do the menu. This is how we did the menu right here we said, You know what, what will we have this no we declared here we call this you know mode menu and mode menu is here, and this is what defines the menu, and the menu first we get the available
modes. We then say, you know, menu is here where we defined the elements of the menu and in order to have the individual views we have this for each, which puts all which puts a bunch of buttons in the view.
Instead, we do something kind of like it but not quite.
Instead of buttons we have UI actions.
And then we create the menu here, and then we attach the menu to the button.
But this is you know again this is not that different.
You know, in terms of like what kind of widgets we're using here again we you know here's a menu in the menu, but the menu is has a basically has a built in button we don't have to do that separately and then we have the, you know, and the, you know inside
the menu is a bunch of buttons.
And there so I will tell you, getting this menu to work.
This was a pain, the documentation on this is so bad, so bad. I'm making the menu for swift you I was so much easier I mean I had to just dig through all kinds of resource because it turns out if you just search for storyboard UI kit.
How do I do a menu, people will throw you at all kinds of, like, oh here's this entire package that builds a menu and does all this stuff it's like, it's actually built into iOS, it's not hasn't been built into it from the beginning, it was built in only
for the past like iOS 14 and iOS 15 so that's couple of versions.
So you want it, so you should be using the newer version things but not. Yeah.
So that's kind of what I think but no I figured it out, and you know so and this basically is the code to do this.
Another thing to pay attention to here is note that this is a class.
This is not a struct.
Why am I doing this, why am I not doing a struct.
Why do a class.
So this is basically at structure immutable classes are mutable. We can change that. And so since we have all this state we're having to manage.
We're mutating things here so
you'll have to get a feel when only when you play with a code and uses it's, it's a very different way of doing things like, you'll see that this feels more conventional.
This will feel more normal This is just Swift. There's no weird.
So whether you like this or not is kind is partly a style thing so in a US with UI app, you have these portions of us which effect implement this domain specific language, which has all these weird rules that you don't see in normal swift code.
That's not the case here this is just normal swift code there's nothing weird about it.
But it's filled with references to the storyboard, which is a whole different world, which isn't even in Swift, which is this weird XML thing declaring the interface.
So guy keep track of moving between these worlds when you are working there in Swift UI.
You're still going a bit between worlds because you've got the language of the views and stuff but it's all kind of more integrated into one thing.
So, what do you like well you know
this is definitely the older way. And I will tell you the big reason why this is the older way
is because of these calls to update analysis.
And we'll talk, we can talk more about that on Friday but that's really the thing.