Hello. So today we're going to do a demonstration of cross-platform app development in the same environment. We used to develop the app for the 121 GW Co Guys, let's open up Visual Studio and let's create a new project. So we're gonna do a xamarin project and this is what: I This is my platform of choice for these things and you want to click the cross-platform app? I'm gonna call it evey phone calculator and then we're sitting create project and and this should actually give us a page with some writing I think so I'm gonna target windows and Android and Windows Phone just because, not because Windows Phone support anymore, just because if it works in Windows it works in Windows Phone which is nice.

So it just happens to be that I'm targeting all three and I'm basically just going to use default controls. not a lot else here. What do we want to do? Minimum target? Yeah, sure, and it'll probably give us something similar for Android Well, it should. Didn't start getting something random.

That's great. Okay, so let's first have a look at what we have and I'm going to develop this in Windows just because it's the fastest way to debug. Let's see what it starts off with. specified path and filename.

Ah shoot, so let's close this solution. Let's find the file and totally don't know if this will work, but let's just put this somewhere closer and put it here. Okay, so I pasted it on the root directory of Majeeda I forgot these around and get files as I don't care about and I'm just gonna reopen the project. This might not know she work because there are internal paths embedded in projects I'm just hoping they're all relative.

Does look like all those things worked. We will receive error messages in the output if it doesn't It's a good thing that era came up actually, because that is a really, really common error. I mean I've had it in every well obviously I've had it in every project I've ever done because I've had my projects directory in the same folder and I haven't bothered to change it anyway. so it looks like it's working local machine.

Let's go and it's in the other screen. butts running Yeah, there's the salmon splash screen I Thought would happen and we might get some writing in the middle. Yes, welcome to Zem Zem Uhrin forums and there are two ways to develop. One is in XAML which is kind of like a HTML II thing and we're not going to do that anyway.

So we're gonna have a few things. We're gonna have a button and this is gonna be calculate no plus/minus Divide multiply equals compute into let's call it enter which might also be reserved. Okay, so we've got those buttons there. and then we're gonna have the keypad button and this is going to be an array because keypads are yeah, kind of like open right and there are ten different, ten different keys.

You know, one to nine and that should be okay. Late size cannot be invariable. Really? All right? Does that okay? I Always forget the C Sharp is basically all on the heap anyway. So now what we want to do is initialize these things.

So first plus equals new button text equals plus for you uber nerds out there. I could use reflection to set the button text here, but that would limit what I can set the text to later. And also, it's totally and unnecessarily an overly advanced concept do here so this doesn't take very long anyway. So then we're gonna do this.

and now we had all our buttons. So operation button. so we're gonna actually have to add the operation as well. So let's do that plus dot and we only care about that and press there we go.

plus it equals and we'll hit tab and let it autocomplete. - And this is why I use Digital Studio. By the way. this exact thing which I find it to be almost flawless.

It follows my naming scheme as well, so I'm very happy about it. I didn't even change it. it's just happen to be how I thought Anyway, uhm, maybe they brainwashed me. They brainwashed me I Know it.

What am I doing I Do it. Why am I doing it calculate Oh well. Leslie Dave and I both like calculators that's not how you spell multiply and it's also a good demo. And there are, in my opinion, no good calculators on the app store.

Yes, yes yes, I know I've I've downloaded a lot of them I'm very picky and this one is going to be worse than most of them. So hello reasons for doing things well? The real reason I'm demonstrating anyway. and now I could separate these into separate classes which encapsulate you know, regions of buttons. but I'm not going to because the more I can have this all in one file and more readable it will be to other people.

And normally I don't do this to have a block thing either. Okay, so it's just yeah. so we've got these Operation Buttons events here now. Okay, so then we're going to have the keypad and the keypads.

A very different thing we don't actually care about. This is self-explanatory. These are these are call events for everyone who doesn't know. this is the key pressed event.

So when someone clicks the button, you know, like like I'm clicking that thing. It will run this function. It's just like a normal function, a block of code which runs when that press event occurs. anyway.

Keypad buttons. So to set up the keypad buttons I'm gonna do a for each for each. but and in keypad now everyone's like I didn't initialize keypad I know that? Okay, and that goes like that. I think Yep, Okay, so this is gonna go through all of them.

that's gonna give me access and first thing I obviously need to construct each item so button equals new button. Okay, there's probably a way to do this, but I'm not gonna bother because this is fine and I need an index anyway. Okay, so is that a function? Is it? Yeah, okay, and obviously you can't use that anymore. Cuz yeah, and button equals keypad.

and we kind of want this to be a ref and I'm not sure if you can do that like that. Maybe you can that work? What? I Don't know if there's a good idea or not. I think it's probably naturally a reference anyway, but I'm trying to describe trying to show people reading this that I'm actually setting the thing in the keypad. I'm pretty sure it would do that anyway though.

anyway. button text equals index, start to string. There we go now. I've set up the buttons and now we actually want to have a slightly different event.

A keypad event. We're going to combined all these events and this is actually quite important because we want to work with numbers, not with weird buttons. So what I'm gonna do is a thing called a lambda. These are really, really useful and let's just follow the format here.

So you got one thing. He got two parameters. A lambda is basically a function without a name, but you can also use it like a variable, which is pretty cool. all right, sir.

Jeez. There's so much prerequisite knowledge for this video, That's okay though, right? No. I will keep ad button pressed and we only care about index. I'm gonna drop those two and we're gonna run this and then we're gonna actually just generate the method.

Okay, very nice and regen and then this project will it be open source, so hopefully you can make it into the best calculator app in the universe. But we're not really starting with anything. very good. So it's it's Elegant Medicine.

It's not very good. it's pretty terrible actually. All right. So these numbers represent a keypad and first thing we're gonna do in this regardless is convert it to our type and we want to kind of save this type up here anyway.

So I'm gonna convert it to a double value equals index dot. mm-hmm Actually, it'll it'll convert in here. So and we want to have that as Const because we went, don't want to change the actual value? Firstly, okay, when you intend to do Const you should probably never remove it because it is a very useful thing. But because I'm doing a video and people need to understand this because I'm doing a video.

I'm not figuring out what's wrong because I'm doing it quickly anyway. So and now we're gonna have a result. I'm gonna start off with zero or one I Remember Anyway, Um, so I'm also have a buffer anyway and our buff is just going to be set to our index. there's a cast.

there's this, or automatically does this. Although maybe I should just notate in anyway, because it'll give me a warning. It'll be annoying anyway. So there we go.

Okay, so everyone who's wise is thinking, what are you doing and rightly so because this isn't actually what we want when you type a calculator in. When you type in a calculator, you know your typing. press one, you get one, and then the next lip thing you do. If you press two, it should be twelve.

It shouldn't be replaced with two, and that's what it's doing at the moment. So what we want to be doing is buffer. X equals ten and that won't shift over the number by one. And then we want to add the index.

Yeah, mm-hmm Apparently we have no decimal point on this calculator, so there you go. We'll figure that out later. Okay, so we don't necessarily want to do inter initially, so leave it like that. We're gonna work on the result and the result will eventually be a property.

Well, we'll make it a property immediately and public. It doesn't have to be public double results in capitals cuz anyway, so this is a temporary property and we actually work with this and that's fine. So if we type x, multiply, result. X equals buffer and every time you do an operation, you clear the buffer and you've already figured out how easy this is.

Truly truly easy. You see some people develop these these calculators watch I watched a video of this and sometimes they get really complicated. anyway. this is not one of those and when you press ENTER it just equals the buffer I Suppose sure that makes a lot of sense.

not really, that's not clear it. there may be L I'm not thinking us through enough, but okay and then. So we've got all these buttons and we actually wanna make this agreed. we need to put a grid on the on screen.

So whoa, what the hell. Anyway, so what we want is set up the grid. so content, that's that. That's what's despite in the page equals new grid.

Okay, so show it dude. bro. Hello! I'm not making you sense all right grid. So new columns, all cold and definitions add new column definition.

and okay, so I've actually I've actually kind of solved this problem before where you're adding items to a grid and you don't want to really be thinking about where they're going. You just want to add them in the right order and be like yeah, Done all right. So I created this little wrapper and I am gonna use something from one my library's This is an open source library by the way. it's part of the one-to-many 1gw app and anyone can download use it for anything and I call it AutoGrid because it fits what I think a grid should do and I always Use them relatively consistently.

So why shouldn't I automate my relative consistency? Anyway, I could probably could have used a Anyway, here it is. Here's my auto Grid and I'm gonna have to fix some of things because I'm doing some things that don't make any sense. don't care what that, don't care about that. And Global's running main thread.

Oh I don't have Global's don't care about that. Well, she's defaults. Think about that. It's kind of why I pasted it.

Geez, Geez. Geez. Device, start, run, begin, invoke on main thread. Sure, that'll do this.

probably has a parameter, but I don't care. Hmm. I'm gonna copy it with braces and put there. Yeah, that'll be a sufficient replacement.

Okay, so I've got this AutoGrid thing all ported and then only took about a minute, right? And what I'm gonna do is I'm gonna use an auto greed because I like Auto Grid. All right. Yeah and all agree, it does require some. No, it doesn't What's that one for me? cannot create instance of abstract crafts or interface.

AutoGrid Is that abstract I don't remember making it really I Want to inherit from that? Did I Well, screw it all right, So don't add. Let's see what functions I have still looking here there. Okay, so we want to run these two. It's probably saying that doesn't both at once should be.

Anyway, define Grid. There we go. Dot, define grid. and we want it to be.

So we've got how many buttons we've got One, two, three, four, five and then we got we've got ten numbers. So what we're gonna do is put the numbers of top ordered in the standard keeper thing like on the numpad and with the operations at the bottom and the side I suppose. Mmm yep, who cares. All right.

So four and four that'll give us 16 items and what we have is 10 plus 5 is 15. Nice. So now it's going to. we've got Auto add that probably could just be called add but I wanted to make it make it clear that it's not a grid so I didn't really.

Whatever. Alright, so this time we're going to do this basically the same thing, but we're gonna do it in the other order. So - and I actually don't know if you can do a for each backward. Mmm, Who cares? Alright, this doesn't matter anymore.

let's let's just do that everywhere. Ok, ok so that's all irrelevant now. and Grid Auto Add button button width 1 its default 1 so it would handle it and that should do a very weird combination. 3 I've had a little easier, especially exactly number of things we need so it's good all right and let's have a look what it looks like.

So we're defined to create typically and we've added the buttons. We've only added the numbers though and but that we can test a few things now. can't compare things you and to int what could I do to myself I like you in because it indicates that this can never be negative ever. So we should have some buttons out of range 10.

All right. Well, that is obviously correct as it always is. It's an error message kind of knows what it's talking about. Uh-huh.

All right. So Nine Eight Seven Six Five Four. Oh, there we go. That's kind of backwards in it.

Nine Eight Seven Six five four three, two, one zero and we kind of want to swap this. You kind of want to invert the row and column because numpads kind of like Seven Eight Nine. So six five, four, three, two one zero. So we want to do that as well.

Not a clue. Temporarily, we can't do it. We're gonna do some crappy code. All right.

All right. Just all right. please. Anyway, so please.

this is Index Reeva equals Now this can be static because it's always there and it's only run once. So it's just all right. Okay, so Index Zero is as is, but one is 3, 2 is 2, 1, 4 is 6, 5 is 5. Think about 6 is 4, 7 is 9, 8 is 8, 7 is 7.

Ok, wait, 7 isn't him. 9 is 7 isn't what I meant to say. And make sure I don't have anything unique. that's 1, 2, 3, 4, 5, 6, 7, 8, 9 0 And that should be okay.

Something wrong with this. but I don't care so not work I don't care Const Okay I don't know why these initialized lists don't work. don't they work? Race array. Damn it.

All right Well apparently I don't want to make const cuz I don't look again. same thing before Const: you can already comments there's a really dumb idea. Okay and yeah. okay, so now let's look.

seven eight nine. Okay, we got one, two, three, four, five, six, seven, eight, nine, zero and this is exactly what we see on an unpaired. so he you. So now what we want to do is the next thing and the next thing is setting.

Set up the buttons and we can just add these one by one because they're all unique and I can't iterate through them. So let's tab these and yes, tab not spaces I Know people who like spaces can go internally explode. Not it's a metaphor, it's not literally. anyway.

so he go. Now we have this and we actually if if index not equal to zero. but indeed, you should do that else. career auto ad.

but to and we're actually short. We're short a button now. I'm just gonna get rid of the enter button I don't care anyway. so now it'll look more a numpad huh? Too many multimeter menu.

Yeah the video. Yeah, well that's true because I literally set out loud I'm going to get rid of it and I didn't It's nice it gives you good error messages there, right? So here you go: 0 plus minus divide multiply. Yay! Okay, looks horrible, but that's okay. So now we're gonna have a label and the label is going to be Result: mmm Result: and we got Abel Abel for the buffer papa.

That's nice bubble of a buffer and here we're gonna do private. We're gonna make a buffer and we could make this. This is kind of why I work with properties because you can do this and this is all. You know all my mistakes.

So you're gonna say stupid I'm doing here and you could just have to put up with it. Result: dot text text I don't actually know what their labels text thing is but I'm gonna like I'm gonna new label cuz they're gonna be initials here and got a naming conflict. So why you need to name things well and I still haven't by the way, still badly named but okay I don't care. Okay, and the buff is gonna do the same thing.

so you know, boo and buff. What's that and buffle able equals that. Then we're going to add the Buffalo but actually to the top. So we're gonna make the grid one more high six and we're gonna add two different items, the D buffer and the result result label I didn't type ylabel and the other one.

okay. and the the result label should be bigger of course the witness too. And now that makes it divisible by the number of grid cells we have Bob doesn't exist. Yeah, well, that's true.

That's because only the upper case one is accessible now and now we have a calculator. So four plus five plus plus why is it 20 plus six? I was going on. Let's have a look instead of a look. Seven is should be seven.

No, it's always ten. It's always ten. It's gonna always be ten. That's very annoying at all.

So apparently I have sent it to the same this they said why do like a new lambda or something It's we're gonna copy. See if that this isn't gonna fix it, There's no way, in fact, it might break it. So I was right originally to do that. So basically what's happening is it's getting the state of what index was.

But because index is a variable is stored out here when the functions run. The last state of index was the count and that's why it's screwing up. So I suppose I need to create like a temporary or something for you actually actually primitive types, they copy, They always copy. int this point, this couldn't fix it.

Could it Can it will? Should it? Huh? 9 + 37 66 + 8 is 72 24 Sorry, there we go. We're getting something up there and let's um, that fixed it. Holy crap. that's surprising.

that's because this this is gets disrupted so this gets deleted so it works on its local copy. You went from its capture list I think now I'm mixing terminology because I'm again basically a C++ programmer. so my terminology is probably all wrong. I Get confused.

Okay, Okay, all right. Anyway, instead of us getting a variable like this one inside this lambda would be called a capture list and it would have these square brackets and you'd be like captured by reference or capture a value And in this case it would have been fixed by doing capture by value. Now I think what I'm doing here is in effect, capture by value. So yeah, anyway, it's probably actually a way to specify that.

Well, so let's have a look. what's wrong now. Okay, seven. So at this point, the buffer is very likely 777, so we'll step forward a little bit.

77. Very good. and we actually want to display that immediately. So are we are we displaying it? That's the question, isn't it? It's probably underneath this.

Let's change the alignment so we can see things. Where do I construct these? So that cool, cool same thing and this isn't actually anywhere near done. I'm a puppy. These just Michael To complete like that.

Horizontal options equals nu equal equals new layout options. Fill was the one now expands. True? Sure, Why not no else. I Don't wonder to expend.

Um I'll do I Screw it. What's gonna happen? It's never. you know. Expand right.

it will I don't care. Okay, so now result labels right? And we don't need the buffer label to you. So let's just do that Done. Okay, so now we have have this and we've got zero.

That's not right multiplied by zero. Okay, plus 2 plus 2. Add it 3 plus 3 plus is 10. That's good.

5 plus seems like these are like the same thing. Maybe maybe I'm making them the same thing. Am I doing that? I am Okay, so that's because I was printing buffer so it might well be working. 5.

There you go. 58 589 plus 3. There you go. That's right.

Cool. It's some weirdness about this. Yeah. 3.

So I'm gonna add 3. We're gonna add 6. Gonna add 3 and our results are good. Let's set up our text sizes a little bit so there's some standard ways to do text sizes.

Result label, dot text size. Shoot. Font size equals device start get named size. Is that right? Sure.

Large target element label. It's alright. Does that work? Where is it over? So then when we do a type of, that's fine. Kind of makes sense, but it's weird that it describes that as element.

anyway. I Suppose they are all lemons, so we should see a much larger result. Text: Yep, and we kind of want a bigger than that. Is it extra large? Oh well.

Mr. Crew it, that's big enough. Okay, anyone who knows what I'm doing, please just just look. It doesn't know what I'm doing.

Just look away. Doesn't matter, doesn't matter. Set Another thing is that is that it's not a thing. How do you do it And C-sharp I Don't know.

Screw it. Doesn't matter, doesn't matter. So we've tested all these things. Andrew doesn't exist anymore, so you might as well just refactor our code a little bit to get rid of it.

The best way to do it is to you. You delete the very line first and then everything else propagates. So there we go. So I hope you found this interesting.

All I'm going to do now is make it a bit prettier. So I'm going to pause it and then I resume it when it's pretty okay. just a few minutes of making things a bit. you know, better sized and stuff.

We've got this and it's so nice. You know it's an app that's relatively okay. We don't have an inter button so we have to use the work the plus button instead, which is a bit odd, but whatever. Zero plus seven is it 7 + +3 3 plus 3 plus 3 plus 3 plus 3 plus 3.

And it is okay. So how do we get on other platforms? It's actually as easy as that it's already on other platforms. Multi-platform development when you're not interfacing with like the touch screen and stuff is trivial. So let's let's just change the target.

Let's do Android I can't do is cuz they don't have an iOS device around me Apple requires that you do so I don't so I can't Okay, so it started the build process. It shouldn't have to rebuild it because I already built it for an arm but it is a different Android so who knows I don't it seemed to rebuild it No I don't know Dududu and it's almost done already. Wasn't that a lot faster? So when you do developing cross-platform you really don't want to use the debugger that was being lazy and I wasn't wanting to set up a webcam thing because you know, making videos a little bit more difficult not making videos as you can see. Here's the app and we're gonna start off with three and oh, 3 plus 3 plus 3 plus 3 plus 3 plus 3 plus 3 plus 3 that's working and add one more and we got to divide it by 10 and that's 3.

Okay, so I've just prettified the app and you know I've added proper mathematic symbols divided plus multiply you know and I've changed the color of the operations I think it's looking quite good now and I think this shows you know it's not too difficult to create a cross-platform app if you're not interfacing with some platform specific features. So this calculator created in if you extract all the wasted time and about 25 minutes I Hope you liked the video if you did give it a big thumbs up. All right bye you.