Mobile Development -Basics for Beginners | Darrell Cardin | Skillshare

Mobile Development -Basics for Beginners

Darrell Cardin

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
43 Lessons (6h 24m)
    • 1. Lecture 1

      5:37
    • 2. Lecture 2

      4:37
    • 3. Lecture 3

      6:46
    • 4. Lecture 4

      7:26
    • 5. Lecture 5

      4:49
    • 6. Lecture 6

      4:24
    • 7. Lecture 7

      9:49
    • 8. Lecture 8

      3:33
    • 9. Lecture 9

      4:19
    • 10. Lecture 10

      15:53
    • 11. Lecture 11

      18:32
    • 12. Lecture 12

      4:43
    • 13. Lecture 13

      19:59
    • 14. Lecture 14

      11:04
    • 15. Lecture 15

      16:43
    • 16. Lecture 16

      7:04
    • 17. Lecture 17

      11:01
    • 18. Lecture 18

      8:50
    • 19. Lecture 19

      9:59
    • 20. Lecture 20

      0:55
    • 21. Lecture 21

      5:34
    • 22. Lecture 22

      6:29
    • 23. Lecture 23

      8:56
    • 24. Lecture 24

      5:33
    • 25. Lecture 25

      9:23
    • 26. Lecture 26

      4:45
    • 27. Lecture 27

      11:51
    • 28. Lecture 28

      18:13
    • 29. Lecture 29

      19:51
    • 30. Lecture 30

      9:10
    • 31. Lecture 31

      16:37
    • 32. Lecture 32

      7:53
    • 33. Lecture 33

      14:16
    • 34. Lecture 34

      3:08
    • 35. Lecture 35

      19:56
    • 36. Lecture 36

      10:12
    • 37. Lecture 37

      8:51
    • 38. Lecture 38

      6:26
    • 39. Lecture 39

      2:40
    • 40. Lecture 40

      2:48
    • 41. Lecture 41

      8:11
    • 42. Lecture 42

      1:21
    • 43. Lecture 43

      6:03

About This Class

Mobile Development: Learn the basics of app development.

We will start from from scratch, you will learn how to make amaizing apps for this great platform.

I'm going to teach you programming 3 languages: QML, C++ and Javascript

The Class includes:

  • How to create a Blackberry ID 
  • How to setup the Environment
  • QML
  • How to use Javascript in QML
  • How to insert Buttons, Text, Images
  • How to frame Layouts and views
  • Integrate QML with C++ 
  • and much more

Transcripts

1. Lecture 1: Hey, guys, Welcome to battery 10 Development. What? We're gonna you learn how to create Bagri 10 natives applications that you can publish yourself on Blackberry world, even sell them and make some money. I'm really glad to have you here with me. It's really pleasant. And to get started, we're gonna build BlackBerry applications using the Cascade Framework, which is based on Q T. And for those of those Q t, it's three c++ application framework, which includes a bunch of you elements. And actually, which is This is really a powerful thing because with cascades, it uses que Emel to build the you eyes with construction with JavaScript to handle the events. So it really gives you a lot of tools to create amazing user interface, amazing animations as well. The fact that it's built as well on Q T, which is c++ framework. You can use C plus plus to handle a bunch of business logic and work and team with your Amal Teoh access cream on information and have camera access c++ information to give you the power really to divide your you I and your business logic in two separate field. Have you you ion cream on half C++ handled the logic a three and a swell. Like I said before that you have JavaScript in cream. Also, for those of you who did a lot of Web development, then you could build really a bunch of application real a lot of them on Lee using cumin and JavaScript. And whenever you need to, for example, store data in SQL databases, then you need to go and see blast for us. So really in discourse, what we're going to do because we're going to see how it can create amazing you guys using the part of camel and JavaScript gonna learn how we can handle the storage of data using persistent data storage SQL and not herself like that we're gonna use C plus plus is well, see how c++ works with the amount of how you can leverage your power of both together to make amazing APs also gonna go and use some of the hardware harder components of the background advice when I see harder. I'm talking, for example, about the microphone. I can create a super voice recorder. We can use the camera to create a photo booth or video recorder. Really a bunch of amazing things that weaken Dio. So hopefully you gonna have fun during discourse. One important thing that I want to introduce before going up to relax lesson. It's a BlackBerry developer website, which we're going to use a lot on that course. So if you go on development of blackberry dot com slash native, you'll have something like that. Build astonishing apse with the native as DK so really have a lot of information. In fact, during that course, we're going to use really going to use that website a lot because that's really a goldmine . Whatever information you need to have, you're gonna find it on that Web site references. So if you want to know how a certain functions shouldn't object works the different parameters that you have the properties that functions that you can call, then you'll have it under your your reference stab. So you see how you here you have a P. I reference. So you want to know how to interview to BBM BBM application to your own app, then unity Really in that how you can use them exactly want to use your sensors? You have Q T sensors here and you have all the classes that you can really call during your in your BlackBerry application, the little documentation here, which we're going to use a lot as well. And it's really good for you if you starting because it has really a bunch of things that you can do and follows get started and to create amazing haps. So you have to getting started here on the left that will show you how toe set up the environment. Although we're going to go through together, you have it here you have the development from the mental. So how you can use Cascade Kimmel c++ all those things. So you have a good introduction on that. You have introduction is well known user interfaces. So you want to create list you want to use text images, buttons really have a lot of information right there on the website and everything that's really nice and that we're going to use a lot is the simple absolute here. So what I think is really good is to learn by making maps. So we're gonna make a lot of APS here to integrate different different functionalities, different elements. For example, when we're gonna learn Kua Mild and will create a bunch of app, for example, will probably create a B B in my calculator and stuff like that. We'll go for with bigger apse in the future. But we going to use a lot of these simple APS. There's tens of them probably over 100 that you have here simple applications. So we probably going to use some of them and go through them. Uh, step by step, we're gonna build them together so that you can really integrate all the elements of cure Mel C plus plus and JavaScript to really build amazing APS that you can in the future, hopefully sell on the BlackBerry world or even use yourself. You making, for example, you have a university project making a robot. You want to control it with your BlackBerry phone? You have a lot of information here that shows you really how you can do this. So we're gonna jumped in the next lesson on building our environment. So I hopefully you can have a lot of fun and build amazing app with me. All right, take care 2. Lecture 2: Hello, everyone. Welcome to Blackberry 10 Development. Listen to request a black reality in vendor account. As you can see in this lesson, we will create a BlackBerry idea in a vendor account. Assuming that you guys don't have any of these, if ever you guys on the BlackBerry device, most likely you already have a BlackBerry. I d That's the one you love used to connect to be being, for example, So you might want Trump straight to the vendor account creation. For those of you don't have any of these two will create one. The reason why we're doing this right now is because obviously, the the goals of this course is to have you publishing oh, naps on the library app world. In order to do that, you need your bag reality in your vendor account. Eso to create that, you simply go on your favorite Internet browser. I tend to use Google chrome or Firefox. If you guys are running on MCA's. Well, Safri works. Um So when the Google bar here, I'll type BlackBerry developer I d. And see Here you have those two links. I'll go on developer black read outcome. You could go on saying to buy re I D. But just for the administration I'll go here. I'm back redeveloper, so we'll just go away for it. Teoh load here should be too long. All right, so on the black redeveloper web page, this is what you're going to see here and on the top pride inside do you have long and register. So you want to click on register here to register black variety and on the right here, black Grady, create one on the left is what basically used for my own APS. So if you click on the here, you will have a form here that you will need need to fill in with your name. Last name, screen name, usually which is You know, your email and all that, and you click submit when you submit that you will receive an email confirmation email actually from BlackBerry. So if you look at your email box here, which is what I'm doing, let's go back to in box you see here to do not reply telling you that your BlackBerry idea has been created obviously, to confirm that them toe activity account, you need to click confirm your email address that I was gonna activate your Bagri i d on the BlackBerry system. That's one of the way to do it. You can also do it from your device if you have one, which will be a different set up. But for the lesson, I'm showing you re now how to do it through the Web browser. Once this is done, you want to be able to sell your APS or to offer them for free if you want on the BlackBerry app world. So in order to do that, you need to have a vendor portal. So if you go on Google and BlackBerry developer Bender Portal you see here vendor port off blackberry world. And if you get if you click on this link you have here signing with BlackBerry I d. So you already have your i d. Created. So you should be able to log into that here again. It brings you to similar page. So if you have your i d. You would signing to here and when you sang in, you have to feel another form here for a defender portal. What do you want to sell the after fee or for payment once you fill it in, its going to send you another email. So the inbox Bagri world and that email here will basically ask you for proof that you are indeed person you say you are. So if you're individuals gonna ask you for a copy of an official government issued, I d showing your name in your date of birth so I can think of passport or driver's license or things like that. So once you have all that, you sent this A Bribery will request at blackberry dot com and it's gonna tell is gonna take about one open business day or less. I mean, it really depends on when you fill it in and what that you'll have your vendor. I d ready for you to publish your naps. I know that you don't need this to create your own naps. It's just really feeling to publish them. But we're doing it right now. So if every if ever drink, they are during the course of creating some maps and you want to publish them, then you'll have to go back. And creative vendor you vendor portal, because it's already created. All right. So thank you. And it will see you on the lesson three by 3. Lecture 3: Hello, everyone. Welcome to BlackBerry 10. Development lesson three. Installing BlackBerry momentous I D E N s e case. So as you can see what the title, we're gonna insult the I D, which is the development environment for bribery devices as well as the SD case. Different for each of us. Release of BlackBerry. So at at the time of recording $10.3 was already out $10 greed out one as well. However, not all devices were running are running $10 3 most of isis that running $10 too. So says the Bible says that 10 and vibrio is at three, for example, so let's get started. So once again, you need to download that I. D. So you go on the Internet so this different way to do it the quick ways to go on devil appear that blackberry dot com slash native slash downloads. Otherwise, if you just go on development of blackberry dot com and that's being greedy long path to do it. So again, it brings you to the home page that we saw in the previous lesson. What? We created a BlackBerry i d. And when you there, um, you can simply click on devil up here. So that's gonna does go basically bringing this speech. And here you have, ah, platform choice. Click here. And obviously you want you want to create APS for bribery? 10. Soglo, go blackberry 10. We're doing native. So we're just going to click on native here and you have here download the tools. Oops, bellows. And here to brings you bring it brings you there. Sorry. So you can Donald the i d for windows from micro sex and Lennox for this recording. Since I'm using my peace My windows pc. Not my Mac. My MacBook. We're gonna go with the windows version. I'm taking 64 bits, so we're just going to download. So I'm gonna wait for you guys to download it. We're gonna move to the next step, so let's just don't hold it. And now we'll resume in a few seconds. All right? So we completed the Donald of Mantex I d. So let's launch the installer. So I got you through dance. All press procedure. So sorry. It's popping on my different my, uh, previous monitor. So next agree and sell for anyone or just for me. It's up to you depending what system you have. You select your folder. Uh, we could leave it as it is. Or you can rename it the way you want to call it BB Death. Here you go. And it's solid. That's gonna take a couple of minutes to insult. So let you install it and we'll have a quick overview are on how to get your s a cane. Stop. All right, All right. So Dancel is complete. You may check the launch Momentous box here in order to launch romantics. I d. When you click on finish, so should take a few seconds to launch again. It's launching my, ah, the monitor. So once it pops up, I'm going to show it to you. Okay, so when it's launching, it's gonna ask you to select workspace. You can define a workspace that you want. That's basically where all your projects will be safe. Usually. So every absolute gonna create will go under that folder. That directory if you prefer. So if you want to make sure that momentous doesn't ask you for this every time you launch it, simply check the box. Here. He was this as the default and do not ask again. So I'm gonna do this cause that's one week a click. OK, okay. Semantics. Ideas up now, And this is what it looks like for those who used with development. It looks it looks like Eclipse as well is quite similar. So we're gonna do right now. We're gonna install DST que That will need Teoh create our applications. They know Teoh. In order to do that, we're gonna go on romantic Saidi, click on help and update a P A Levels. So it's gonna take some time to progress. And then here you go. So on my PC already had some as a case that are installed. So whenever there and I saw all you have to click install here. So here I have tender throughout, one that is available and has support for all the BlackBerry devices. So we're just gonna go here and click installed, and it's going to download the software development kit for us and install it on romantics . Shouldn't be too long depending how faster Internet hairs minds pretty fast. So it's gonna take maybe a couple of minutes to complete it. So once we're done, we're gonna come back and, uh, show you how it is completed. Okay, so it took some time, but the sdk statins now installed. So you can see now under the E p A levels window installed. And now you have the by pre 10 native as decay tent off $3 1 again. That's the latest that's available in. Well, at the moment where I'm recording this right now. So any time there's a new sdk that got that, that's release. You need to go on help of the FBI levels, and then that's where you're gonna get you new releases. All right, so thanks for the saying to listen. Three, we'll see you back on. Listen for a lesson for we will discuss the insulation of the BlackBerry device simulator. Um, if you have a bag grew device already, you might not need a simulator. However, feel free to to dream the next lesson. We'll see how we can install different simulators. And even if you have a device with you since the different screen size, for example for the passport versus the's at 30 then you might want to know how to inside the simulator, right? Take care right 4. Lecture 4: Hi, everyone. Welcome to BlackBerry 10. Development lesson for installing Blackberry simulator. So in this lesson, we will treat you two different ways to install the BlackBerry simulator. One way to do it is through the website BlackBerry website. There's a link where you can download the BlackBerry simulators the other ways to use the momentous i. D. The win salt in less than three in order to get the new simulator. So in both cases, you need to obviously check the requirements. So if we go back on the page where we downloaded romantics I d. You have on the right here simulator, you can click here and Donald it right away. However, I suggested to check this the requirements. Why? Because the simulator will were on inside of'em or software as a virtual machine, basically. So if you look at the all the requirements there, you have one at the bottom here that says Virtual machine. It tells you right there for Windows and Linux systems. Donald team or player throughout one or later and from Mac System Donald via Maura, fusion through that one or later. So if using windows are next system, then click on the link here. And Donald Davie more player. It's free for that. For Mac. However, TV more fusion is not free from last. I've seen you got the trial version, but I've not seen any free version yet. So unfortunately, doesn't yet You probably have to to pay for, um But that shouldn't be a big issue for you. So once you get once we installed a VM Ware player or the team or a fusion, you can go back and then click download. Okay. And that's gonna download for you the latest simulator. Okay, so tender three, not one. You can donald it and save it. So that's the first way to do it all. Rehab it in sauce. I won't download it again. The second is the second way to do it is a go to your momentous I d. So that's the one we install in the previous lesson to its Southern. You add. They knew I knew. Simulator. Sorry. You have here on the drop down menu here where you have an I P address, which is basically where you run your devices from your up some of your APs on. So if you click on, add new target Here you have the option to add your device to run applications, or you can click on simulators here, and that's going to show you the simulators that you have installed and are managed by my romantics, I d. So they're going to show their So in your case, if you didn't, it's on anything. Obviously, that will be completely blank, right? If you want to assaulting you simulator, you can simply click Click on the button here, insulting you see me earlier and I was gonna give you the different simulator version that you have so tender. Three Not 1 $10.3 $10 to 10. Don't want Renato. Simply click install that's gonna downloaded for you and do the insulation. Say that you don learning from the website. You might want to download an older version of an sdk for some reason. If that's what you want. In order to do that, you can click read more, and here you have similar documentation. That's one way to get to the other versions. So when you I think I'm getting started installing the simulator that's gonna launch your speech where you can click on need a different version, and that's gonna give you the option to Donald a different version. So I'm gonna let you go ahead, downloaded and solve the simulator. It's straightforward. I'll see you in a few minutes to being how much time he takes in solid, and I will give you before viewers of D simulator. Okay, so now that you have the simulator install, you need to go into full where you and solve your BlackBerry simulator. In my case, it was during the insult. I decided to insult it on the desktop. You consulted anywhere you want. So when you open the folder, it's really right away. The simulators that you downloaded from the website, that's that's what you need to do if you downloaded it from from the BlackBerry website, and that's really just to show you what it looks like once you launch ship you double K Comeback race simulator and it's gonna open your VM ware player. In my case, I had VMRO workstation because I'm doing other other other works on my machine. So So that's what you're going to see. You click on power and that's gonna launch to BlackBerry device simulator for you so look at the menu in that you have here F one before. We don't care, really? But here it tells you press. Enter press enter to select which device to boot into starting by Britain. All touched 12 80 by 7 68 in five seconds. So if you want to use a different device, need to press enter briefly. Review 12 80 by 7 68 is the latest. The first BlackBerry 10 device, which was is that 10? That the release on February 2013? If I don't if I'm not mistaken, then you got the 7 20 by 7 20 which is the Q five Q 10. You then get the all Touch, which is 12 80 by 7 20 This should be the blackberries that 30 of black reset. Three. You got the BlackBerry 10 keyboard, 14 40 by 14 40 that stealing the famous by Brie passport, which is a pretty big square screen, you know if you guys seen it, but it's a pretty big device, and the last year that you have is is but retain Classic Keyboard, which was released in December 2014 and it's the 7 20 by 7 20 So in my case, it really doesn't matter what which device you want. You just pick up the pick up the right, the number that you want to Ah, for for the device you want. So, Michael, go with three. Was that three years at the three Press enter and is gonna take a few minutes to launch the device. So it is launching the device now. So you see the bribery logo It's gonna take again a few minutes to load the OS. That's basically what you see on screen of a real device when you booting your your BlackBerry. Okay, so we can see now the simulators up so you can navigate on the device Scroll left or right , you can see all the absolutely there. So if you're familiar with the BlackBerry jesters, you should be, uh, quite conference to use that device without any issues. However, what I suggest you to do is to go on the BlackBerry website and you have here using the simulator. You might want to get familiar with that. Just make sure that you know how to launch your aps out, how to simulate gestures and stuff like that in order to terranea APS correctly. All right, so that's it for a lesson four or else you lesson five. For those air you've on the device, I'll show you briefly how to launch. Your APS are basically how to get your device ready for blackberry development. Thank you. 5. Lecture 5: Hi, everybody. Welcome to BlackBerry 10. Development Lesson five. Set up your own device for development so we will configure your BlackBerry device to run your APS from the momentous I. D. In order to do that is to steps that you need to follow on your device to enable the development mode and to make sure that your computer can that can detect your device through USB for development and not for file transfers, for example. So in order to do that, I'll refer you again to demain page for the BlackBerry Native Development, so develop aerated Bagri dot com slash native. You don't need necessarily documentation. Cats last cascade. So once you're in the native website, let's do this. Let's go there you click on documentation getting started and then set up the environment. The U already requested a vendor account. No, here, set up your device these air steps that you need to follow on the device itself to enable the development mode and make sure that momentous I d can detect your BLACKBERRY device through USB. So in order to do so, first thing you need to do go on their settings on your device security and privacy development mode and tuggle it toe on. Then click. OK, that's gonna activate the development mode on your device. You need to make sure that you already have a password on your device so that it could save is so that you can enable the devil development Mode. Once this is done, as you can read here below, you can connected device through the I D. Using WiFi or what to USB cable. So to do that, you need to go under settings, storage and access. And make sure that the USB connection option is set to auto detect or to the target platform. Usually just live it to auto detect, and that's gonna make your device available for development. I'll let you do that, and I'll show you what you need to do in romantics. I d. All right, so on the momentous I d is quite simple again, like like for the same thing with the first familiar you click here and add new target. This time you just stand devices here, and then you click. Set up new BlackBerry 10 device, and it's gonna ask you to pair using USB Opare using WiFi in my case my devices connected through USB, so that should be really easy. So it's gonna ask you for the password, which is your device password. So I'm going to protect my device password here, then click next and is going try to pair with my device. Take a few seconds. Do this. Okay, so when this is done, you you go into second option, which is the singing which you need to do if ever you don't have if ever you never use your device on my cases already done. So there's not much for me to do their eso you need Basically, Teoh this followed steps. Is there really straightforward? And when you click next, you can create a debug token or important one. These actually will be stored on your device and will be good for 30 days. That basically allows you to run your unsigned application on sent because they're not available on the BlackBerry app world. So you need to have that enable on your device to run the APS that we're going to create together on romantics. I d. And also your personal haps. Once this is done, you cook finish. I was gonna ask you for a password. Eso here, you can see. Please enter the password for key store author P 12 which is what we did on the signing process. Unfortunately, I can't show it to you because I already did it for my device. But you need to make sure that you remember that password. You enter your password and then you should be able to go to the next step. So let's see if I can actually remember Password. I think I had the right password. So right now it's creating the debug token and is gonna upload it to your device. So it is uploading to debug talking, and here you go. You got my device here. 6. Lecture 6: Hi, everyone. Welcome to Blackberry 10. Development lesson six. First app. Hello, world. As you can guess, we will create a first little app that will output Hello, world under screen of your device or on your simulator. In order to do that, you need to launch more antics. I d eat you. Thanks. Select fall New and BlackBerry Project that will create brand new project for you under application. Make sure to select cascades because that's what we're going to cover during the course. And if you can see here, it creates a native c++ application using the Cascades Yuhei framework under templates. We're gonna select the standard empty project disorder Temple is there. But for this lesson, we're only gonna focus with this one, which will create a basic hello world application that loads a Q m l file you then selected Project name. I'm gonna put hello world and I'm gonna click next select. My has decayed. Right now, it's set up to $10 to In my case, I'm going to select $10. We don't want click finish and you got your project he has created under project here. You'll see that there's a bunch of CPP at HPD file, which are your c++ fall. We're not gonna focus on that for this lesson. When you gonna focus on a cure amount file here. So the caramel here main document is loaded by the C plus plus code. It first starts with the BB Cascade here 1.4. So it's the latest framework that's available for $10.3 dollars one. Then we create a first you element, which is the page a page, as you can see here on the life, it defines an individual screen within an application. Okay, what? You have your screen. You want to create containers on your screen to divide it appropriately for your application. So, in our case, since we're only going to display hello world, we only need one single container because we're gonna use the full screen real estate. So you put container and obviously you put your curly curly braces inside you Curly braces . You then have label, which is a simple label that will display a single line of text. The label have has different properties. The important properties for this lesson is the text Property 100 out. We're going to define which steaks we want to output. In our case, the project was created with a Q string practises. Then you have your quote and you have the actual string that you want to output. Keep in mind that this is hard courted for now. How the world But we can create a viable name it hello world or anything we want and just put the viable here without the quotes after the closing Prentice's you have a plus and re translate on local on locally or language changed. That will be important to you if you want to create localised APS in the future. So say you wanna app that works on a device that is that main languages English and maybe French or German that will allow you to translate the tax automatically depending on the language that is currently used under device. You don't have the textile doubt based. That is not really necessary, but we're going to keep it there. This is simply saying that we're gonna output Hello world in big tax So large front. So we have this here. Everything's ready. All you need to do now you go here select run Hello world which is the project and any Run it on your simulator or or on your device. Make sure that you have a green dot here, which means that your Bagri simulator is actually running. So you need to start it before trying to run the program. Obviously, then you click run, and that's gonna build a project for some. You build a project that might take a couple of maybe a minute or two, and then after that is going alone shit on your BlackBerry simulator. Okay, so now it is launching color World, As you can see here, 82% gonna wait for you to clear. So now it's cleared. We're gonna open our simulator. It is actually launching it. Can you see how the world so Thank you for listening. I'll see you on lesson seven. All right? 7. Lecture 7: everyone welcome to back return development. Listen, seven containers what we're talking about containers. The reason why is because honest Queen basically continues are the main components that you will have to use for every single Absa gonna create. They allow you to divide your screen in sections and subsections. So let's begin to romantic sides. Who could have a quick look on that? So we're using the same hello world project that we had in a perfect previous lesson. But notice our empty deleted everything that was between the page curly braces that just for demonstration purposes. So what is the continued, really, as bribery says here, container that can be used for grouping controls and other containers. So within that, you can put but his check box list images dividers, And it could also group that put different containers in which he would put different components. So you could different divide up your screen nicely. So we're going to do we're gonna take the component from the left side here and we're gonna drop it inside page so that we have an empty container and what's nice with the continues, you can put a background so you see here how you have background so we can change the background color, move it from white to black or whatever else would like to have, um, has a background color so we could go, for example, and click here and put a black background. We can look at it. If we click here on design mode, we'll have a device that will show up in a few seconds with a black screen. So we're gonna have to device with a black screen so you can go back to a code here. So one important thing to know what the containers is, how you gonna divide up your layout? There's already pretty finally outs for containers that you can use. I'm gonna show you to them. They are quite popular. The 1st 1 is a Stackley out. So under Kimmel Properties General section, you have the layout here, and you can select this for them. But we're gonna I'm gonna show you Stackley out here. Stack me out, basically will put your components on the stack. Fashion. So what? That stopped the bottom left to right. Right to life. Bottom to talk. That's the ways is gonna display components. You can see here on the left. A layout that is used position of containers, Children in a stack. Okay. And what's next? After orientation here. So if you look in the right tough, the bottom left to right. Right to left and bottom to talk. So what this does, Let's say, for example, I want to put two buttons but in here, and I'm gonna call this button here. You call this way to see the text on the bottom will be better. One. And I go here with second button I This one will be button to So I see this now. What happened when I am in Stackley at random, on top to bottom. So if I go my design mode, you should see here. Button one button to that is right below it. Okay, You could even do this with containers. So let's say I wanna add another container here. Let's put it right here. I'm gonna put my better win inside a container. I'm gonna do second. Continue here. I'm gonna put Button too. Let's for friend. Create 1/3 button here that we're gonna put as attacks. But in three, I'm gonna choose the background of the container. So you gets gonna have a better view of the different containers. If I change this car with put it too dark, magenta. So complex thing. Whatever. So I don't if I don't design mode, you don't see the colors because of the size. But that's me that Mary says that Go here, margin margin in size. And I could add for you Put betting here of Let's say I want to put it to 10. But everyone here, 10. I could go back here in design mode. And you have you see you yellow here. So we're gonna have more padding. So it's a 50 over the place and see how it updates your code automatically. Here. Your reading of 50 50 so I can put the same thing. Copy this, but in the second containers. Well, so what do you see here? We have the main container here. And then in say that we have first in human, which is yellow, which holds about one. We have a second compare, which is Darkman. Gentiles. The button to and then you have a three button three that is inside the main container only . Now go back here Here we go. We can see Right now they're all stacked one on top of the other. Now. Right now, If I go back here, make sure you select domain container design. What if I change the orientation? Go left to right. See how it puts you. But in the other direction, Seem here, do bottom to top is gonna start from the bottom of the container and go up. Which is why you have it in different in a different order. No, Let's you raise all that. Except the buttons. Actually, two button here, let's delete this one button too. Okay, We can look now at a different layout, which is the darkly out, which is really popular as well. So what's nice with with this layout is that it allows you to align your components to the edges of you. Container left, right, top or bottom. So I mean, even remove this. We're gonna go with only one, but just for demonstration purposes. So if we go back on the design gold, as you can see right now, the button if I'm using darkly out, is set up on the top left corner. And if I drew the button here can change his alignments. If I want to put it center, I'm gonna put it center particularly. I could put it resentfully of darkly out Now if I leave this and I changed the layout of my container to stack. But what happens? Thinking goes straight on top. Why? Because tech layout is on a stack, so it's gonna put the limits from top to bottom. I was gonna say on top if I could go back and darkly out, you can see how you could dispose. Place your buttons differently. Now we're gonna have a second button, and you're gonna see how it's how the darkly out basically is really attached to three container and not the comported itself. Which means that if I line my button my second but in the same way I aligned my first. But they're gonna people want it up for the other. If I go here, see? But two is now on top. I can move it somewhere else and you see about the one about two. So the components are really independent of the other when using a dark layout, so allows you read to place them the way you want, So you can u n se really? The way you would do it and code, you would probably go with a different container. Here, put your butt in here, for example. Have another container here. Oops. Which I'm gonna put my button here. We're in a darkly out. I have to make sure that my container is a line differently. So let me put this one a line on left. Okay? And I'm gonna put the other one here when bottom rate. So what will happen here? But the one is here. But in two is here. If you want to see really with the with the colors, we can add padding this wall and changing cars. But I was really just to show you what it looks like. And then I can, for example, change this one and put it as a stack with a stack layout. So, a single here, make sure you select stack, play out, and I'm gonna be at another. Let me add a check box. Yeah, Here for foot check box. Enable Trick me if I go here on design mode. You have your check box. Any button to why it appears with abundant because that's your second continued fear. It applies here. And your first continuities on top here. All right, so thank you for listening, and I'll see you on the next lesson. 8. Lecture 8: Hi, everyone. Welcome to Black Return development. The Lesson eight came off fundamentals to in this lesson, we'll talk about track names and I d s. So you might be wondering water object names and I ds while basically one you're using romantics. I d. When you have, um, you continues and you have other components in it. You might sometimes want to refer to these components in another place. Right. So let's say we have two buttons here putting back the buttons we had in previous lessons. So this one, we're gonna call it, but of one, give it the name off, but in one, that's when I got to give him the name of button to. That's a quite simple example, but it is really useful. So say now you have these two buttons and we're going to look at them here. But on one button to okay, let me change the background color to black here so I can have a better view on my screen. You go. So now let's say you want to change your text button here you wanted toe have the value of but of the one here, How do you do that? then and then you need to create an I D. I d. Say bottom one. So now with the property text for the second button, you can refer to the first button and give it its own. It's Tex value here. So you can say, for example, my text for button to is Michael to bottom one dot texts. So the idea that the property we're looking for and what we're going to do here, just going to say that then we're going here. We'll see button one button one. You can also use that with different properties. So let's say I want to put changed her with of my button. So have the probably preferred with. And I put it 200 when I put 100. That's 100 pixels. I want now to have my second button preferred height to be the same value as the bottom one preferred with. So you could go like this and TBT and one preferred with. So I'll have my button to preferred height be called to bottom one preferred with. So see this And if I go here so you see that my first button here is 100 with and my highest similar here. We can change that if you wanna have a better, easy way to see it but preferred height with preferred with. Save that and you go back and both have This has the same with. So that's for I. D. So ideas were really to use to refer your your components somewhere else in the queue. A Mile document You also have object names won't be able to demonstrate right now because I don't want to go into C plus plus in this section. But you would declare an object name like that, and you need to put ports here and say, for example, butter one. And what this does it give you access to that button within your C plus plus code so you would be able to go in C plus plus here and refer to that button so that will allow you to to grab, for example, the tax here? Or if you have, for example, a text field, you'll be able to try to grab whatever text you have in a text field from D C plus plus code and generate some processing out of that. Thank you for listening, and I'll see you on a lesson night 9. Lecture 9: Hey, guys, Welcome to Blackberry 10 development. Listen, nine and its lesson. We're gonna talk about signal and dollars, so you might be wondering what they are exactly. Actually, when you create an application, you can't just have you can't see applications interactive If you're not responding to any events from the user, right? Do you want to know if users clicking a button? What your applications gonna dio if example you're using a drop down drop down menu and, ah, when you make a selection off the drop down you want, for example you interface to use interface to change Wonder. To do that, you need to listen to total signals. Imminent bike. Um, also quick demonstration. Really? So I that suffering a polite take a button here so about an obviously is clickable. So you have already here on the right side the on click option here. So that's gonna give you basically signal handers. So when you but it's click, it's gonna go inside. That function here is going to do whatever is executed there. Okay, so we sent example before where we were changing the tax of label of the button. Only by using the ideas So if I reproduce that, let's say we what we had basically was Button and we had I d Bt and one and we had been text. But in one okay, and then on the other side, what we had was here. But in two. Now, if we look at the interface, just finally gonna take a few seconds we have but the one but into No. What if you want to change the tax about a one or you want to display in your image or whatever and inside Ewan Click, you would go here and you would say, if people whenever my button is clicked, I want button one text to change too. Hello? Right. And you see that? So we're gonna run that program. So basically was going happen Anytime you click on the second button is gonna change the text to hello is not going to revert it back. So be it is gonna work once the other times we won't see a change, but as basically what's gonna happen. So we have the application running right now so we can reasonable click on a button to and you see here. But the one changed to Hello. So that's really how Kimmel is handling the events. So we were talking about it. But if it has on click, it has other features that wouldn't initially looked at. But for example, we have the image source there. You have Texas Well, that we saw it. We can change here. But if you go on the Bagri website on the Reference beach, you can look for button, for example, any any element that you have. And under right side here, you will seek your mouth signals shoring up, see Kimmel signals. So it tells you every single signals that your component can handle, Uh, for some reason, Um oh, here, here you go. Sure inherited human signals. All these signals can be listened to. Bye bye button, for example. So you can, for example, change here you with and then, if ever that with changed in, say, city. But in a I want to do this whenever someone is changing my with. OK, And I would say when you pick up signals you had the definition of all your signals. So we're not going to go any further on what? What signals Our next lesson. We're going to talk about JavaScript, which are actually used to handle those signals. So we're gonna go to a little bit more details regarding this, and hopefully you're gonna have fun using Java's keepers. Well, all right, take care. 10. Lecture 10: everyone. Welcome to Blackberry 10 Development. Listen, 10 we're gonna talk about JavaScript. How we can use it in Q m. O. Um, you might have to not notice, but what were they use it in the previous lesson where we talk about signal hinders. So inside the DEA, the curly braces over handler such as on click for button. Whenever we do in here, usually it's javascript code so we can go on the JavaScript preference. Ah, jobs given Gremel page for BlackBerry developer. And it gives you an idea of four ways that taking you travel skipping came out. The first way is to use it in a signal handler. So as we did, you have a button for you. That clear on click? You can run your JavaScript code inside of it. And this here did you looking at this? Basically, from a script, you can also create your custom javascript function. So instead of writing your function inside the signal handlers, something you want tohave it outside so you can call it from wherever you want in the code , instead of coping and pasting the code inside the criminal page. So you created javascript function. It can be local to Cuba to Kimmel. So that way it Ah, when it's local that came out, it can only use it in that came out. We could also do it the third way, which is important. JavaScript code. You would create a JavaScript page, that is Ah, that is external toa que imola sheet, and then you just call it inside your code. The fourth way is to connect your JavaScript function to signal. So I remember the first way where we have a signal, we create a code here. Well, basically, when you connecting, you Jared, skip to a signal you have Ah, but button click here, connect route change, Tex. So you're basically saying that whenever my butt in here is click that I want to connect this function here, which which you can use What? Personally, I don't really like that thing because of readability, cause you need to figure out after that what is my button and what's click Sometimes when you have complex interface are rather just have my functions and minimize the calls off connect. But again, that's a personal preference. So we're not going to talk about was given a signal handlers because we did it in a piece Lesson. Let's jump to creating custom JavaScript functions. So how do you do that? So that's something that I want to create. A little converter where I convert my temperature from from friend High two Celsius. Now I want to do that. Well, I wanna have to section to my page one work and entered Attempt the temperature in Celsius and press ago button and another one that will display the result in Fahrenheit. So this different way to do this. But ah, me just go this way. So I'm going to create a continued I'm gonna give it an I D off. Let's say temp. Ah, it's a root container. Let's call it like this. This container will be my 1st 1 when I'm gonna put a text field in Ah, the button on the same line. So because it's on the same line, I want to make sure that my layout here is set up as left to right and not top to bottom us default because going to give you some problem after then in my components here, I can go ahead and pick up a text field found a text field. I want to put the him Tex. Sorry. Which, which will tell the the user musically to enter temperature in Celsius. Okay, that would simply be a note. So if you go here, you see under temperature in Celsius. That's a text field, uh, in the same container. I'm gonna add a button. There's gonna be right to the right. Actually, because remember, the layout is from left to right. We're gonna put it here. One thing I want to do in my text field put an i d off temp in, So yes. Okay, I think that's pretty much it for detects field. Yes. Ah, then for the button. But in doing Egland I d. I don't think I need an i d. But let's put a text here on my text to be just put f Well, two, if she's gonna converted to find height. Okay, That's one thing. The only thing I want to put its put my own click we talked about in the previous Listen, So I want to know what I'm gonna do in my own click. So we're gonna do anything here yet. I'm gonna live it as it is. and we're going to look into that after right now, I'm just building the Inter Freeze. So now I have my first line. We're gonna add some stuff to it just to make it look nice, but we don't really have to do it right now. I'm going out Another continue read below the 1st 1 here and that Continue will hold my label. I don't need this, really, But it's enable Here I d Ah, look, about 90 here. So here, label I don't recap of theory, imitation or delay out because, um, I'm only gonna put a label inside of it. So Rieker the text with a label right now, there's no values. I'm gonna put an empty string, and then here I want to do want to do I want to make sure my label is not visible because there's nothing to show. Right. So I'm gonna leave it invisible so that we have to make sure that whenever I call my function, I have to put this too visible. Now, how do I create my function? I can go anywhere in my code and put creative javascript function. Now you need to make sure that wherever you create it. There's an idea as well that you can use the reference with reason. Why is because if you just type function and the neighborhood function but you don't have any i d for the container, for example. You can't refer to that functions. You'll type convert to Fahrenheit, but it will give you an error. As you can see in the bottom here, comfort to finite can find viable. That's what What I had basically when I was testing this up. So you do function and then say convert to far in height. Now I want to receive a value of temp, which will be my temperature. I sent my function what I want to do. I want to convert cells just to find height. How do we do that? Well, the formula is Let me see if I still have that page. Here you go. So you have Celsius is equal. Friend Article two Celsius Time nine divided by 5 32 So we can copy this. I'm gonna put it in our as a comment. So you wanna put comment? He puts last slash double slash if you prefer. So that's my function here. So Basically, I want to call that function and whatever it's called, I want to return the value on Friday night. So what I'm gonna do, I'm going to return in temp, multiply by lying over five through this way. Nine or five plus 32. Good. This way. Temp. Yeah, that looks good to me. All right, so this I'm going to do this now, what I can do here in, but I can call it so just to root root container. That's the idea of my container here. Remember that convert so far tonight? Now, what will be my value type here while they remember having my text field here? And that's the one I'm going to use to enter my temperature. So I want to refer to this 10. Okay. And I want to call the texts label here right now. There's nothing here in text. I can put an anti you see, Just a space here, but don't have to be anything here, so I'm gonna go here, copy my temp in Celsius. That text that's gonna pass a value to convert to find height. Uh, you might want to try to be safe. Click text field and make sure that your input mode here is the americ and penetration. All right, but always only numbers that can go in that. So I'm calling this now. What happened? When I call this, it's going to return a number. I'm not sending my number to anything. I want to put the label as my number. So let's refer to label. So do label that text. No, that label here is an actual label. It's the idea that I gave to the label. So able that text physical tothis and I want to put plus f So if I put, for example, zero degrees so it's gonna give me 32 F 32 degrees f. Okay, so I think my coat is pretty much done here. So we're gonna rent it and see what's the result inside the the BlackBerry simulator. So it's gonna lunch. Let's go and see what's the result. So have the application here. I can Ah, so we have the application here, so let's try this six. Nothing showing up. That's probably because I forgot to change my visible here from foster truth. So I'm going to do this. I'm gonna go here call my label into visible is equal to true and finally, treatment able text color put it white. So let's stray yellow, ugly, beautiful cares and crisply and we should see it showing up on a BlackBerry device in a few seconds. So we have the application here. Now liken type five click to find height, and you have here 41 F. So you see how simple it is I can put Zero is gonna give me, um, 32 far night. Quite simple. So now obviously can arrange that the way you want. But the gold really was to show you how you can call the function. Jarvis, get function from inside your coat and refer to it later on on that side. Now, let's say you want to have your job escape on a foul separately because you want to call the making functions available to different criminal falls. How do you do that? So I'm still using the same how the world I'm gonna go here and inside assets. You can create subdirectories if you want. So let's and creating a generous gifts. Subdirectory Js So a new folder. Just call it G s. Now I want a clear function inside of it. So a new foul And if I'm gonna call it, ah, attempt functions but gs and you get the phone. So I created my drivers could fall here. So let's copy my my function here. I'm going to do this X I'm gonna piece it here and you see that felt So now how do you import that? JavaScript follow inside. You mean that came out? So you need to go here and you type in port seem really important. BB cascade. But you put quotes now mine is under Js folder so I can go here and type G s, cause it's gonna look inside your assets directory. Right? So GS slash name of my file attempt function that she has as as what? You want to give it a name so that you can just use that name inside your your came out fall. So let's say as that function now, how do you call that? Well, you go back to you, tex here. I'm gonna lead that. Did he it And I'm gonna call that the function. How do this I put I take the reference name so tempt function that? What's the name of my function here? Comfort to Fernet and you see how it returns it to you. So converted China effort and I temp. Remember, my temperature was temped in Celsius dark text because we're getting the value of the text field here. So we're calling the function and then we should have something that's fairly good. So let's have fun and looks. What just gives us second dinner? All right with it here. So let's run it. You open our device, get our application here ago. So let's say nine enter and as you see it returned your your temperature so it gets the JavaScript fall calls. It called a function that side of it and returns you to the deep proper value. So that was 1/3 way in really useful way to use your javascript functions. The fourth way is with the Connect. So remember in the Bagri website connecting signals of javascript function, we had that here where there's a function cheating stacks and all we do, we call in ah container when we call on creation completed. So basically tells you that whenever the container is fully created, then I'm gonna call what I'm gonna do. I'm gonna listen to my butt and clicked and make sure to connect that function here. Change text. So were completed. Which Ira? Scrip? The next lesson. We're gonna start creating APS. So I believe I showed you a lot of, ah fundamentals on your email. So we're going to spend more time creating APS for next two lessons where we're going to use other components. We're gonna try to mix them to get on in Crete. Beautiful laps using only javascript and keep them out on the next section will start going in depth and caramel, using different different ways to navigate in your application as well as using C plus plus , So I'll see you on the next lesson. 11. Lecture 11: Hey, guys, Welcome to Black Re 10 Development lesson 11. We're gonna build the small app which is on a blackberry website. It's ah, basically getting started app. It's what I call that image capacity. But you can come and call it whatever you want. So all we're going to do, basically, is what we're going to see right now in the back of your website where you here. So, um, let me zoom into this guy's a man I can't so you can see the screen here. So all we're doing musically, there's too pictures I can actually swim into. That's great. So there's two pictures and as you can see the blue moon on one side here and the sun on the other side and is actually it's actually one big shot off on top of the other. So whenever you slide to the right, you're going to see the sunny picture. When you slide to life, you're gonna see the night picture. And obviously all we're going to do here is by changing the capacity off one of the images so freezing for his before you started doing an app. It's always good to know how you got to set up your app. How you gonna build it? Okay. How you gonna implement the you I the way you want things to be laid out on the screen. So this obvious? Fairly simple. So I'm not gonna show you any notes, but I always get, Always create some notes, define your app, draw it. So you have at least one idea of how you want your skin to look like. Okay. Otherwise, you're probably gonna get lost in UK. Emelin keep changing stiff stuff around. So what do we have here? Basically, we have one big image for you where we're displaying the image that we want to be shown here. Okay. Then after the image below here, we can see that you have a Nikon here, which is probably an image refusal. Well, but a small one you have here what we call a slider a bit like a volume control. If you have a blackberry device, you listen to music. I believe you can have this in your screen, so go to write. It increases. Goto left, it increases. And you have a son here so you can see the visual element of things that I can see personally is the containers. So you would have one big container here, continue to hold page then under that, you would have another container only for the image for you and then below the image of a container. You would have another Continue that contains control. All right, so you can if you want to follow simply the word by word. Your website. You can go ahead and do this. You'll find the assets under website. You also find it on the course. Resource is so on the page on the top, right. You should find the link and get all the resource is on your PC. So we're going to start going on romantics and first I want to do obviously, is to create an application or a project. Should I say the new BlackBerry Project Cascade? As usual, we're not going to use coordinative in the course centred empty project because it's a single page, right? And we're going with image capacity. That's my project name as you can gonna go with $10 3 don't want finish. Remember, that's gonna create a simple hello world application, so we're gonna let it build. So now it is up. So what we're gonna do, we're gonna delete the label here and right away we can start by sitting our first container here. All my things closed. So here you go. So my first container, I'm gonna give it an idea of fruit container. Not that I initially needed, but you know, it's always good to have and I'm gonna treat your background to Let's put the background, Teoh. There's different colors here, but I think it's fun to show you another way to get your colors. So if you go on the Web browser and then you can go going cool or since the search bar HTML collar coats there's different ways. If you guys have Photoshopped, go for the shop to get the color coz gimp whatever for the shop. But it's so slow to open I'm just gonna go on the HMR Carter cold speech. So here you have a female colleague. Coats dot info. So open that webpage and this is what you get. So you have a chart here with some colors, but what I like to use is the color picker here. So see how you can change and pick up a background color, whatever you want and give you the color code right away. So let's go with that stroke. A random one. Yeah. Let's go with this one. Looks fine. Now the locker. Yes. 25. 28 to a So we can copy this. We're gonna go back a momentous X Sorry. In background RG be ready to go on. You know, go here and you put your hashtag or proud and you put the color code and that's gonna be the background car. So if you want, you can check right now in your Kimmel, and you should see popping in a few seconds the background color for your screen. You go. So what did we say? In terms of, ah, user interface, we're seeing two containers want for the image and another one here for DEA controls. So let's go ahead and build two different containers so you could eat a type container or just grab it and we're gonna bring them insight the, uh, the route container. So we're gonna give them I ds I d image container. I will have another i d. Here. And he couldn't rope in tuner. Okay, so now we have two containers. We tend to find anything else. Uh, what we need to do right now is so import the photos, the images. So how would you do we do that? Usually in your application, you'll have your images on everything. Storing your assets. Whatever you put there will be bundle with your application. So if you already have the images on hand, you want to put them in your asset folder. You can create a subdirectory like I'm gonna do right now, and I'm gonna call the sub directory images. Okay, So whatever is gonna be here, I'm gonna call them images. That's really if you you have the images and you want to keep them on the device. If you're going, if your application will download pictures, they won't be saving the asset folder. Whatever's there will be locked. Once you publish application, it would have to go inside the false system. Toby retrieved. So we're going to see that later. In other lessons, how you can get images, Donald images and other files from the Internet. We re create images on your device, greet falls on your device and get them from the file system. So I created my folder here. So I'm gonna do import, Uh, What do owner import? Let's go with file system. And we're just gonna point to the derrick tree where I have my images. I'm probably gonna find it soon. So going to do that? Here you go to be somewhere here, BB 10 images. Okay, so that's open. Opens the folder. I'm going to select all and do finish. So now all my images air here. So now that we have the images, we can continue move for with our application. So my container here, I'm going to give it a little bit of patting on the outside. Um, let's go with 10 pixels. And really, you haven't just putting anything here. Not that I care. Really, But, uh, we'll see after what kind of difference is it can make. So have fear. My container. What don't you I want to put inside that container to image fuse image views tell. I mean, you can figure out by yourself what it is, right. Visual control that is used for displaying images. So I'm gonna grab on here, Dan, I'm gonna grab another one here. So remember, have two meters one that is called day. The other one is called night. Okay, I want to see what it looks like. It just double click on it. And that's the image here. Okay, so I'm gonna call my 1st 1 I'm gonna create an I d. I can, so I can refer to it later. Give it an idea of the the other one here. I'm gonna give it a night d off night. Now how How do I add my image? Remember, it's in the assets folder. So what I do here can go on image source, and, uh, I was gonna wait for it to lower my computers slow today. So it opens the project assets for you, and it goes straight inside images because it knows you're looking for an image, right? So I'm just like my day and click OK groups. It went on the road, Roman. So I can do this. Copy this. Basted here. Don't call this night. Okay. Now, you Congar, go back here. You should have a little idea of what it's gonna look like both image and one on top of the other, but because it's a stack layout right now, you see what happens. It goes 101 100 the other. We won't fix this. So we're going to click on container. We're gonna change that for a duck layout. Once we have the darkly out, it will look better. But just for certainty won't center things. Could you see this more space on the side here? This is not what we want. So we gonna center both of our images. So if you scroll the color so we're gonna add property, which I'm gonna share right now, which is a resentful alignment. So you want to align this in respect to It's a parent component. So you want a reasonable alignment called horizontal alignment? That center. It's gonna center it for you inside the container right now. That's because we're assuming to continue centered, but it might not be so Ah, just for certainty. We might want to go here and to do that so all three should now be centered. Yep. Looks much pretty. No. So now, below you have another. Continue here. What we want to do. We want to add our slider in our images. One for the moon, one for the, uh for the sun So how do we do that? We go where that, uh, we add images again. One image view. Then there's the slider in between Chris later. And then we have our image. You again. So we can just I go here image if you No, I'm not going to refer to the image views here. I'm not gonna create a night because I'm going to refer to them. I'm just gonna put, uh, to the value want tohave here. So they said I want the moon to be here on this site here. I want the sun. Okay, that container is by default to Stackley up. Remember? Again? It goes from top to bottom. We want this to show left to right. So go here. Left to right. Okay, so let's have a quick look. See what it looks like It's gonna load. So see here I have a problem here where I can see that my images are out of my screen. So how do I fix that? Well, this multiple steps to fix that first thing we need to do, get in your slider, and we want to open the layout group here and put the layout properties of Stackley out properties. What? It does it give you the ability to select your space porter? So instead of minus one, I'm gonna put one. Um, I invited to go on the BlackBerry website to read a bit more about the space quarters. I'm still going to give you a quick overview on what it is. So the BlackBerry developer website you have under documentation cascades you really outs. You have using space quota. And what it's what? What it tells you here, it's It's basically it's ah, you can tell the control to have a certain number of space compared to the other other controlled on the same line. Right? So the negative space quarter, which you have usually it tells you that you take whatever pay a space you have you need tohave. Okay, which is reason why both images were outside. If I change that, I put a positive space quarter. It tells you to use a use only as little space as you can respect to the other controls in the same container. This is why we're using it. So you might want to read a bit more. It tells you how basically you can split up your space in different ways instead of only having it even leaks for that. So I have money a permanently out, uh, here for one click here, and we should see that is gonna look a little better a few seconds if it loads. Here you go. So now it looks a little better. I'm gonna add some space on both sides. So let's go here and had some padding is well under control. And container 10 here. Another 10 here. And the other thing I want to do, I want to make sure that image view are centered particularly. Let's go have a quick look. See what it looks like. So now it looks a little better. I might want to change what? My petting zoo a little bit, but right now it doesn't really matter to me. So what I'm gonna do here months later, I wanna basically listen to the event when I'm moving my slider. What's gonna happen? Okay. So, basically, to show the image and to change capacity, we're going slider and you see on the value change, so remember what that means. It's an event rate. So it's listening to value value And whenever this change is gonna call this here, so what I want to do, I want to change the opacity. So we're gonna do day that capacity is a go to value. That should change my capacity. One thing, though, I forgot I did. Romania have to actually invert Thies too, because otherwise image days below night. So it's never gonna happen. Appear great. So this is with this way and run it. It should be running fine from the first time. So we're gonna open appropriate advice. So we have our application, so you can see as you slide here, it reveals a deep victory so you can see how it looks. Works. You can edit that program, make it look even better than I did. Right? You can do even better than that. Um, just fix your you're patting your margins on the side. You might want to go and read a bit more, but that's gonna give you a good idea of how to use a slider and at least some maps that you can build. So the next lesson will spend time reading a B m. I calculator here with much more details and something that looks much better and we're going to use different controls as well, so I'll see in the next lesson. 12. Lecture 12: Hey, guys, welcome to back retentive metal Lesson 12 and this lesson will created being my calculator to create that usually that will use much more components than we did when we create the previous application, which was the image capacity. There's much more components and much more feature that we're going to use. So I advice you. Really? Teoh, get on the development of blackberry dot com slash native website and learn more about these components that we're going to use and also in Yuma Romantics with the ideas I'm gonna give you in the next few pages, and I want to look at some components that might be interesting to use for that project. So basically, to start what is being my being my sense for body mass index. It measures your body fat based on your weight and your height, so you want to know how to calculate it, right? So there's two ways that we calculated. You either go with your weight in kilogram and your height in meters, so waiting kill oh divided by your height, meter square, or you go with your weight in pounds divided by your height in inches square time. Seven or three. So when you calculate you be my you'll fight, you'll fall it between four categories. So the 1st 1 being underweight when you're smaller than 80.5, you have normal when you be a my allies between these two. So 18.5 to 24.9 overweight goes there and obese when you're cooler hired and 30 uh, 34 you be in my index. So in terms of logic, how we want to build the you I Well, we saw in the formulas that there's at least two values. There is two values that you need to have You need to have your weight and your height. So we're gonna ask the user to put its weight and its height, right? So for weight can be impounded. Kilogram. We saw that previously. So we're gonna ask the user to to select between pounds and kilos. I was gonna put the height as well. We're gonna ask. It has to be meters of feet, and then we're gonna give the user the option to select meters feet. So the way to do that to simplify your logic instead of asking, let the user put this weight and select between pounds and kill. Oh, and then secure heights, segmenting meters and and feet. We might want to give the user only two options that fit with the formulas. So the first option would be Give me your waiting kill Oh, and the other one in meters, and the second option would be given your weight in pound and your height in inches. Otherwise, if you if there's a user, selects your weight in pound and your height and meter, then you can still calculated. But it just involves, ah, more conversion, which we don't really need to do because really, pending of the combination to several combinations, we're gonna end up doing a lot of conversion, which we don't need actually need to do. So once the user inputs a sweet and his weight and height, we're gonna process the information. So there's two things wanted when I have a clear button that clears all the fields. Wait, didn't height that cleared and want to have a go button, so that's gonna calculate the B M. I. So I wrote here when gasoline, you must figure out a way to know the height and weight units and to convert appropriately for being my calculation. That's really if you want to go in a way where you give your user the option to really select independently pounds and kilo me meters of feet. Otherwise you mean described this this comment here Then once we calculated we want to display the results in the label. Now, obviously, to do the calculation, we're gonna use JavaScript functions. So you have to choice. I would prefer if you guys create functions in basically two ways. So when you click on a button, remember, you have the honor click, which is your signal hinders. So instead of having your JavaScript function inside the single signal handlers, I would prefer if you guys have your functions, create separately, or you can even use external JavaScript functions. So if you create your jobs, get file with the functions in it, which is the way I'm gonna I'm gonna do it during the tutorial that also a good way to do so. We'll start in the next lesson with the U. Y. Developments. We're gonna place the elemental components make it looks not look nice. And then the following lesson will create the logic. Thank you. 13. Lecture 13: Welcome back, guys. So we're going to start to be in my calculator. You I design. In order to do that, I want to show you first what I built as an application. So this might be a my calculator that I started for this lesson. So as you can see on top here first thing that you must notice I have metric and imperial settings. When I select each of them, you can see that the menu below the options changed. Do you know why did this this way is because Remember the two formulas to calculate to be in my. So you had the mice and kilogram divided by height, square and meters or mice and pounded five divided by height in inches square and all that multiplied by seven or three. So this is why when I click on metric, I get kilogram and meters and imperial here I got feet and inches. So when you build a new application and you're designing you, I you want to define how you're going to split your screen, how you you need to divide your screen and sections. So if you look at our slide here, you'll see how I did this. So first of all, I built main container. So remember, you have your page, which is your main screen. And inside of that, there's a container that will contain everything. Everything that is with in your screen. So I have this here, and this one holds the background image. First thing you need to notice, the background image is sitting behind the rest of the EU I and the rest of you, why is within another container that I called content container so you can see that both one on top of the other. So if you go back to the lesson I was talking about containers, remember? Represented to you to stack layout in the dock layout. Remember when I was talking about the doctor A out. We had a situation where two buttons were one on top of the other hiding each other. So that's exactly what we have here. We haven't mentioned background and continue on top, which is covering the top of the of the image was all the component that we are seeing here . So that gives you an idea right now off what lay out we're going to use for the main container. So inside a content container, we have other containers. So the segmented control that we have on top here is part of the content container itself, and we have other other sections below that. So, as you can see, the content container will have a stack layout. Right? Because we have these continues, went up with the other. And then that's the final layout that we have. Basically. So you have the main container, the content container, everything here. And then you could see here for the label showing your B m I and your status here, this is optional. Tohave it inside a container. But I put it this way just to simply simplify the u. Y. When I'm building for different devices because not all devices has the same size for blackberry 10. But that's one way to do it. But I'll show you in the future lessons how you can write application and have them run on different, different devices. So let's jump on the code and see what we can build. Okay, so we're back in romantics. I d. They're gonna show you how to create project cause that was shown previously. So first thing I want to dio you remember my background. I had an image, so you need to import that image in the project. So when you go in your project folder the way to do this, you have to go into assets. And I said, That's where you're gonna put all the files that you want to embed in your program that you want to bundle with the application. Right? So under asset, you're right. Click and Ukraine, you click on New and Folder and I created full that. I called images and I simply drag and drop the image here. Okay, if you want to know where I got the email, that's something really nice as well. There's a website called free images where you can get images for free most of the time. Make sure you check the huge usage to make sure that you can actually, you use the picture and publish your own up. So we have uploaded the image. I'll let you guys do this if you want. I have an image, otherwise it could be simply color background. So we have remained page here, So first thing we want to do, we want to create the title bar that was not introduced to you before. But this is what you have on top here. Seeing calculator. We're gonna cover that much more in the future. In the future, lessons have more details. But simply when you select page, you have title bar here and it gives you the title bar object. So inside that all you do you type of title be in my calculator and you see it showing up here. Not at you. Have you page, Remember what we had below? We had a main container. Great. So that the main continuous holding everything. I put the title bar, but it's actually not inside of it, but doesn't matter, really. So go with the main continued. That's gonna hold your background image. So in romantics, I d. You grab a container and you paste it here In this lesson, we're gonna put ideas in almost every single elements or object. Should I say that we're going to create? The reason why we're doing this is because we might refer to them later in the code, and you're actually gonna find this really useful. So now that we have a main container, I said previously that this will be a dark layout. So I put a darkly out here, so that's what it looks like. And now I'm assuming that you guys have downloaded the image or you took it from the from the resource is attached to this lesson. How would you put your image as a background in that container so that you think about that and come back to me after? Okay. So funny. You guys figure it out. So you have simply to grab an image, you that you're gonna base inside the container, right? You select that image, you make sure that you said it. The source you put your running that J peg and then that's pretty much it all. I'm going to do that now. Simply set up the layout, so it's center particularly, and it feels it resentfully. You don't always have to do this. It really depends how big your images. Mine in that case fits exactly the size of a touch device, so that should be fine on that side. Okay, so now, once we have that image installed on our on our screen, so remember what we have. After that, we have a content continued that is sitting on top of it. So we're gonna create that container and then go step by step by creating the other containers there that we have. Okay. So, back to romantics. So how do we do this? You create your content container, so that's should be inside. You mean continue. Right. So, container. And you give it an idea of content container or whatever you want, But just simplicity for the course, But this and as layout would you put Remember, we're have having a Stackley out here from top to bottom because of all the buttons that we have. Right? So this is one. This is another one. This is another one. This is not a one. So we go here and you do your Stackley out. Nope. Sorry. That's not the right one here. So that container you go on top layout Stackley out and make sure it's top to bottom, which is the default one usually. So you good here? They removed properties. Okay, So now when we look at work are content container. What do we see? Well, we first have our segmented control here, and then we have 1234 containers start child to this content container. Right. So now how do you do this? First of all, we're gonna add the segmented control here. Now, that should be new to you. If would be, Well, at least for the course. So insignificant control. You need to define options. So first, we're going to give it an I. D. Like you said, I d here. I'm gonna call it mode, and then you want to know how you're gonna add metrics and imperial as options for segmented control. So to do this, you create an options object and those that are familiar to dress, and that's a little bit like having a dictionary. Right? So you put square brackets Now, inside the square brackets, you define every single option that you want to appear and you segmented control. So you do that, you create an option object curly braces, and then you need to define the value that's gonna go inside of it. So well, what detects you want to display rate. So here we're gonna type metric. So you have metric. Did is showing here, and we're gonna have a second option now. This isn't a rate So every option that you want to add, you have to put a comma, and then you go with your second option and this one here, I'm gonna have to text of infertile. So that's pretty much it for the pretty significant control. That's what we're gonna look for right now. Um, we're going to see later how we can add value so that we can. I forgot which one I'm using. Actually, I just want to make sure that it's centered a little bit. We're not gonna be spent too much time on the layout right now, but in the future, in the next lesson was much more time on making it look nice. So after the container had another container for for the wait. So one for the weight. One for the height, one for the buttons and the other one for the labels. That's said to be in my status. So I let you go ahead according to what you see here on the screen, create the proper containers for that. Okay, I want you basically to do the containers for Let's go to our up for the metrics. So you create the first container here for you What? Wait. Another continued for your height. Not about for the buttons. Another word for the label. And I want you to go ahead and put the components inside of it. And so each containers and make sure that the layout is done properly. I'll see you in a couple of minutes. Okay. So our first container after submitting segmented control Sorry is our weight container. That's the way I called it could give it another idea if you want. So it's a weight container, and this one will hold the label. And it will also hold a text field, right? Label weight in kilograms and a text field until you wait in the background. So how do we do that? You create your weight container, make sure that your layout this is said Stackley out this time left to right. Okay, Now that you have created that container, you need to go and create, sort of not quick. You're gonna add the other elements inside inside that container, what are day? I said before a label and that will have an idea of weight label. And you also have the text here that would equal to, uh, wait in kg kilogram. Not the reason why I put this. Because the first option that we're going to select his metric so its weight in kilograms. And then after that, we're going to take a text field puppet there and then have fit, have an i d. Of weight, right? And when I got but any text here, but we're gonna put the hint x so it could give an idea to the customer three to user what they're supposed to enter in that field. So until you wait. And obviously, since this were expecting only numbers, we want a keyboard to be the one with the numbers in the population. So input mode, numbers and punctuation. All right, that's the 1st 1 As I said, we're not going to spend much time on making it look nice right now. That's that will do that later. Below the weight container, we're gonna add another one. That will be your height container. Now, remember, we're building it for metric right now, So you have your container here, given a the night d of height container. Okay. And this one who also have a rendition from left to right because we're having again a label in a text field. So that should be straightforward to do, However, because we're gonna have two options. Remember? There you select metric. That's what you have here. But And when you said I compare, Really? You have something else? We're actually going to create another container inside the metrics. Can t Uh yeah, that's the metric the height container. We're gonna have one continued that space for metric and another one that displays for Imperial. Okay, so two different one. So the 1st 1 shows a label and text field That's pretty much a copy and pace of what you had in weight containers were gonna copy this. We're gonna create our container here, have an i D. Off metric height, and inside that container, we're gonna put a swell again a Stackley out from left to right. And then you just based you label and your text field. Make sure to change the height the i d. Otherwise it will. It will fill now for this label Doesn't really matter cause for the idea because we're not going to change the label here. It's gonna be pretty fixed. So sorry for that. So the text I wanna show is height rate. So it's always gonna be height. Never gonna change or we don't really need on an I D. But you know what? Might as well put one just in case. So we have height. Why is the picket object idea dots of scenario? Oh, yeah. Metric heights. Sorry. So we're just going? Yeah, we're not opportunity because we don't need one anyways. And then here, g eight, you hear? Two metre container. Sorry. And here I'm gonna give it an I D off metric height. And for the hint X, I'm gonna put meters. Great meters. 123 So I have my field here and for the other one, if ever its imperial. I am. So we're gonna copy this. I don't need to copy it, but ah, yeah, Let's just do it this way. So you copy it. Put your container inside of the height. Continued rate change, the i d to imperial. You need you label. That's his height. Not we're gonna removed text field Instead of that, we're gonna put to drop down menus. No, don't. Doesn't matter if you see it showing up here, we're gonna hide it right after. So you're gonna add your drop down menu? That's 1st 1 this you given an I d off feet because this one will hold the defeat. And everyone here give in the 90 of inches. Now you need to add the values that you want to have any drop down menus, OK, when you look at our vacation here, as you can see, Imperial drop down menu you have from 4 to 7 inch feet and 5 to 11 inches. So I'm gonna show you quickly how to do this. You simply have to get inside your you're dropped down here and you do option and you give it the text. Great. So the 1st 1 I want to show and feet is for inches but four feet. Sorry. And you give it a value. So that divided that is gonna represent whenever to you selected so four. Same for the other one, so that you spent a couple of minutes create the options for both drop down menu. I know that in that case, since it's not inside an array, you don't need to put commerce after the option, okay, so that we have a drop down that I created. This is how you do it. You create the option text and value. You do something for the drop inches dropped down. But to make sure that the port single quote appears, you need to put a backslash before as an s escape character. So just for the time being, we're gonna select Imperial Container here, and we're just gonna put visible to false, so it's not shown. Okay, Perfect. So now we're gonna build our last container, Which is the one holding the text? No, we have another one with the buttons first. So I let you go ahead, create your containers with both buttons. That should be fairly easy to free you to do. Okay, so that should be fairly easy to do. You simply cleared to continue below the height container. Okay. Make sure it is below giving an idea of button container and you create two buttons. One for clear, one for B m. I. So I d I forget what? The ideas here. But you can put a 90 here of clear We're not gonna use it, Really. But, you know, could be good. And I d here off. Be in my button Okay, So what? We're left with a single container, Another country that we need to build, which is the one below here, Actually, let me get you the one on PowerPoint. All right, So create a container with a darkly out and inside of it, or two starkly out from top to bottom. I'll shoot a code and then we can move to the next lesson rates. And that we have both labels here doesn't matter if it doesn't look right. And yet on the next list, we're gonna talk about it. So it's a darkly out that he filled on both sides. And then I put a Stackley out orientation top to bottom. That's a default one. And then you have a label string attacks and another label saying the status of the B. M I and the other half statuses is while I d sorry for both b m I. So that's a pretty for the first U I introduction. Basically, we built the containers. We put the components on the next lesson. We're going to see how to make it look nice. 14. Lecture 14: hurry, guys. Welcome back. So if you guys follow the instruction and steps, we did the last lesson. This is what you should have as an interface for now. So obviously it doesn't look quite beautiful. You have. All these fields are stacked together. The buttons are there, close to the text field. And we don't have a nice fund for the B M. I value in the text right below it. So we're gonna work a little bit today to make it look nice. So obviously we need to go back on our romantics. I d We're gonna add a few components just to make it look a little bit nicer. So I'm gonna have, for example, in my Contin continue. I want to add a little bit of off petting zoo to make it look a little bit nicer and more space around. Great. So you can add the fighting of 20 that will be in my coat. That's gonna be in my coat as well. So if you guys wanna follow court after So right there you see it exciting some space around. What already is a little bit better than what it waas then everything. I want to do well, really centered are segmented controls. That's fine. So let's go and look at the week container with Continue right now it looks fine. But one thing that you might want to do is since it's using a stack, lay out its component inside of it. We might want to use the stack layout properties. So I used that already in the past the space quarters. So we're going what we're gonna do? Want to make sure that the text field is acts always larger than the label here. So how we do that, we can go with the label and put a stack layout off one and then going to text field, put a sack layout of two. So that will mean that the text field, since it has a speaks quarter of two, will always be twice the size of the label. So it's as if I'm splitting my my continue here in 3 1/3 goes for the label to third clothes for the for the, uh, for the text field. Okay, so that looks thanks to me. Then I'm going toe to my height container. Now I want to add some patting some space. You know, between this weight container and the height container. So what I'm gonna do and remember, the high container has two continues. Return it right, the metric and the imperial one. So I'm gonna add some some, but, um, Patty? Yeah. So I'm gonna have somebody patting where I can have some top fighting if you want, that will be actually better. So go here and you add some top. I'm adding 10 but, you know, seriously can if he wants. I'm gonna put 20 here below so that I have space between my buttons and my text field here . Okay. So you could see the space being created. All right, so we have we added this. Now we have a metric Continue that. Want to add some paintings as well. And again here, we want to use the stack layout. Ah, properties again. So we want to have the text field here when I'm when I'm on metric to be aligned with the other textile on top. So in order to do that, we're going to use the same space quota properties that we used previously. So for the label here again, space exactly out properties and have a space quote off one. So it takes. So it's speak school of one here and text field. We're gonna go with space quarter of 2 to 32 of the screen of the container. So we will be a text field and the other 1/3 will be the label. Great. You go stop properties, but to hear. And you see, now it's line now for the Imperial container. We want to see this. So obviously, what we're gonna do, we're gonna make the metric container not visible. Hide it. And we're going to show the imperil Comte ear so you can make sure that we can set it up properly. So again, here, we're going to deal again with space quarters. So how we do this again, we're gonna go with space, cut off one for the label and then these corrupt I don't have his peace quote of to each. So these will always have the same size, and we'll have a space school of one for the label. So it's as if you're spitting in your container and five to fifth for the first drop down to fifth for the other drug down and one for 1/5 for the label, so I'll let you do that straight forward. I'm gonna copy and paste my our properties actually, of this year. Have this here and from my label. Put the space corps of one just one So you can see how it looks much more better here, so that's pretty much it for this. Continue here. Now, if you check for the buttons, But I don't really need to add the much thing. I'm gonna add our over the space quarters for a simple reason. When you're actually looking at different devices, you might have a different button size. We just want to make sure that it always the same size. So we're gonna put a space court off one for each of the buttons. So if you look on the BlackBerry passport, you see what happens if you don't put a space quarter. They all go on the left side, but they don't think the full screen screen space so again here, we're gonna go ahead exactly out properties, but a value of one same thing for the other button here. Factly out properties. Well, you have one. We both have some space, same site. Sorry. Okay, so that's it for the buttons. Now, the last thing I want to do is to set up this in a way that looks much more better, Actually. Wanted to look like like the the app. So remember, I have a darkly out and it inside of it have another Stackley out. So what I want to do is to have my my, uh when they do here. So yes, have my container here, my Stackley, out to be centered and in the dark layout. So I do this by sitting for vertical alignment to center, resentful alignment to center. So it's center here now and then for the label. I'm also gonna make it centered, so select label center it sooner Make sure you have this property and same thing for the status here. I'm gonna make it a reasonable center. So this is what it looks like. We know. So you see everything here now it's centered, but it's on top here, which is not really what we want, right. We won't have some space. And basically, you want to change the font size. So what I'm gonna do when you select your label, you have here the ability to select either The font size are always the minimum of fun size . So I mean, if it's that fun size is what's will be used by the application by default wouldn't display that. So, you see, I put a value of 63 put the max 75. Although between that's if you want to zoom, it will go to 75. So you see, Now you have 25.1, which is ah, which is pretty good, I think. Okay. And should make sure everything is always centered. We can align the text to center. So front alignment center. I just want to make sure everything is always street in the middle. So that's it for this. And, uh, we then go with status here basically being my status. All I want to do is to check the fun size. I think five is fine. Could also change the weight by going here. So this really lot of options for front, uh, if you want to to work with that. So if I Nick, have you 400 when the 100 should changes the weight off my But I'm going, I'm gonna leave it to default. So that's pretty much it for that. That I think I'm gonna had, however, is to add space quarter for the talk layout container here because, as you saw previously, it is inside the content container, which is a stack layout. So it's top to bottom. So we want to make sure that it uses the full space that it has a bottom here and that nothing sticks there. So I'm gonna put the stack layout property here, put one, and that's gonna go a little lower so that when I changed with different screens, it should look much better than what looks to you. But then what It looks before, Okay, so I'll let you spend Sometimes you guys want arrange that a little bit more when you run the application. Uh, I'm gonna shoot what it looks like. So sweet. Little second here. So this is what it looks like now when you run it with, I will bet early out. So you have to drop downs here in here That goes up to 11. You can enter your weight when you click on this. That won't change anything yet because we didn't program these buttons here. So that's it for this lesson. Next lesson we're gonna add the you a Dealogic actually behind that. So we're going to create our functions one to actually detect when you change from metric to imperial and to actually change the field here. And we're also going to create a JavaScript functions to calculate or b m I. And to change the value here and here. All right. Thank you for listening. 15. Lecture 15: looking by guys. So in this lesson will code our application with Jaresko functions and make sure that we able to respond to any events on the user interface. So let's go back on romantics. We're gonna code he signet it controls and make sure that we have JavaScript function that can take the values of the weight, the height and calculate to be in my one ever click on B m. I hear when it calculates the value, it has to change the text label here to put to be my value and another one here to put whether it's overweight on the weight be so obese or whatever. Make sure a swell that when you click an imperial that actually shows you to drop down. When you click on metric, it shows you to text field, right? So how do we do that? First of all, we're gonna make sure that since we're starting with metric, make sure that your text field here is shown as the value of text fields. So the way did this, you go back to your imperial container, you make it invisible, so visible to false and your metric container you put it too visible. Now let's go to the segmented control. So we already put the text value here, So metric and and imperial Next you want to do we want to detect whether I click on this option or this option. So the way to do that is, first of all, you put your value, so whatever value you want that option to have, So I'm gonna put a value here of zero and for imperial value of one later in my code. That's how I'm going to know if, if I selected metric when Pearl in order to switch the text field here and to select the right function to calculate my B m, I regularly sneak. I want to make sure in the option is that I have one option that is always selected. So make sure to check the selected check box here or just type selected calling crew. So that way, the metric option is selected by default. Okay, After that, we want to respond to events of physic met control. So you have your signal and yours for your signature control and the function you want to call. If you click on here, you have all the signal handlers that you have here, you have to slag on selected value changed. So you added here, it's gonna added in yuko for you. So what I do here whenever I select metric, I want to ensure that it the labeled here is waiting Kilogram. And then after that I want to make sure that this continue here, Sean. Okay, So to do that, I want to make sure that the imperial height container is hinted and the metric height container is shown. I'll do the opposite operation, like like a limp rail initiated. The metric continues hidden and the embryo concern has shown, and I'll change the weight in kilogram toe weight in pounds. Okay, so I'll let you write a small JavaScript function that takes the value and then changed the labels here and make sure that this one is shown or hidden, depending on which value is selected. Okay, so here how I did it Iran, in your respective value, change you for still if mode which is my idea of my city signature control that selected value, the value here, whether it's selected or not, is equivalent to zero. So if this is metric that I'm gonna change my weight. Label this one here, text the weight in kilograms. I'm gonna make the metric container visible and the in pro Clinton invisible. Otherwise, that means that if it's not, think also zero, it is equivalent to one. Then I'm changing my weight label Textual waiting pound making demetrick continue invisible and April 12 visible So quick view of on off what it looks like in the actual app. Enough This clicking in prayer that's going to change Click on metric it changing everything back. All right, so that's really straightforward location, our next text And then the next step sorry is to program your clear button. So when you click clear, all I want to do is to erase that an erase while he raised the field, raise the field here to make sure that the priest values were not shown here. So how you do that, you go to the clear button you hear about in and obviously you need to go on your unclipped . So what happened when you click? So when you click, you want to check if your segmented control is in metric. If it's in metric that I'm gonna delete. I also need to delete the height. Ah, text field here because remember, when you're in imperial, it's to drop downs rate. Let me show you the application for a little bit more clarity when on one metric I'm deleting that textile here and that takes field here when I'm on Imperial, I'm actually having drop downs here. So what? I mean, incredible. I want to be deleting anything here. And that's the same text field i d. As the one I have here, right? So whenever a club button is clicked, I do. If my mode that selected value is equal equivalent to zero and then whenever it is equivalent to zero, all I need to do here is to, um is to change the value of metric height, literally height. That text is equivalent to empty string, OK, and then I can go ahead and clear the the, uh, the height field. So I'll let you do that. Okay, so that should have been really straightforward. You simply add weight dot tex, because that's the I d off my takes field here. We got texts and then your value of Texas equivalent to an empty string here. How about to be in my button? That's a little bit more complex. So all we're gonna do right now, we're gonna put their if else to know when it's on metric and imperial, and then we're going to jump in to create our JavaScript functions. I created them on external file so that it can be sort of externally. You don't have to do this, but this way, but as a way did it so. But you go ahead and create ah, hung click and have the if else inside of it where you the 1st 1 detects if the values equal to zero else. We're talking about this one. So it's simply put if and else with the brackets. Okay, so that was simple. If mode that selective values equivalent to zero that mean metrics, do whatever it will be here. Otherwise do whatever it will be there. Ok, so what we need to do so if I click on selected value if sector values metric now, when I click on B m I I want to take the value of this field and the value of this field and calculate the actual b m I value here and also the status that we have here. So for that I created be my function that gs fall. You can't put it inside the acumen fall if you want, but I wanted to put it to separately. And then from here, you need to create your functions. So I created four functions. The 1st 1 is your being, my metric. So it takes as parameter you wait and your height and then it returns the actual formula to calculate your being my it right, which is which? I don't have a mask anymore. So it's actually wait in killer ground divided by height, Square in meters. Okay, so I put Matt that part. That's a JavaScript function that's gonna put this value part to this, right? So height squared. That's how you do it. And the two fixed here. The only reason I put this is that I have only one digit after after in the decimals, right? Instead of having two digit, I don't need more than one. So that should be enough for the emperor. One I receive as parameters. You wait feet and inches because remember, when you're in imperial mode, you actually have three field. So the wait here and then your feet and your inches. So I have this year. So I'm my height here at Remember that formula Here is your weight in in the pounds and your height has to be an interest. In order to do that, you need to convert your number of feet two inches. Okay, so what it is so one feet is a call to 12 inches. So what I did here Creative, separated function feet time 12 returns my feet and inches. So I add this two inches and that gives me my height. I had a council look, but that's not necessary. Distance for me for your debugging purposes. And then you just write your function in that in any real returned the proper value so you can if you read the actual actual return you have. Ah, I think you'll you understand? Ah, how Ah, this is ah working. Okay. The last function I have here is get weight status where it gets to be my value. And then whether it's below 18.5, it's going to return you underweight and so on. Normal weight, overweight or obese, and any returns value that I stored inside inside status. So you can use the G s father have on on in that added here in the code. So on the side. Sorry. So not that you have that being my function. That yes. How will you use thes function in order to go back on your using to face And in order to calculate the b m I great. And also to change the text on the labels will be my value and being my status at the bottom. So let you work on that. So you need you see, enter your weight into your your height. I want to make sure the changes and change this and also that you call the right function. So let you do this. And now for you after that How I did that. Okay, so that should have been really straightforward. So first thing you need to do if you created the Js fall a swell. In my case, I saved it under jazz folder in my assets. Okay. Just folder assets. That's why I put it. So you want to make sure that any achim out first thing you do you import that file and I showed that impious lesson already. So gs slash b my fortune that yes, as I'm going to name it being my functions. And then if you go back to be in my button, which controls everything, this is what he did. So if selected mode is equal to zero, I'm calling to be in my metric function on passing it to wait text and metric height, the text and whatever the function returns is gonna be stored inside being my text. Otherwise, I can't be in my imperil. I passed the weight doc text and I passed the feet. Drop down menus selected value in the inches selected value. I remember I set in my drop down menu values for every single choices. Notice that they're not in quotes so that what they'll be detected as interest. That's not as strings. So whenever I select for the one value available will be one. So that's what will be paced, passed through the function here and then when I have my being my tax, obviously that's going to change, and I want to change my statistics. So I said, You are plus and calling another me my function. Get weight status. Why past might be in my text, which is the actual value I get from these functions here. And that's gonna let me know if I'm overweight, overweight, obese or something else. So as a result, this is what you get. So you put your weight during their poll that say that your 105 kilograms and your one meter 95 you can be my change your value. Here they feel taken imperial. But you hide five and 24 kick a b m I, and it changes it. Okay, love seaways and pounds here in height here and ethically clear that feel this cleared here everything is cleared. Okay, so that's pretty much it if you want to make it look a little bit nicer here, some tricks, um, to make more sense removed, but an empty string as the be my text. Because when you launch the application, normally you don't have any values here, So you don't want toe. So show any being my values, right? Same thing for the status. You hide it kind of a couple of other things that I did exchange capacity off my text field and the other components is welcomes. They're opaque rate. So I want to make them a little bit. Ah, with less capacity. So I can see a bit more off the packer on image. So the way to do that, you select your elements. And then when you go on Kimmel Properties, you can change your capacity here. So I put in a passive there 0.7. All the same for the other button here, the points having and same thing for my fields. So everything the drop downs and the text field gonna put on a pass ity of is your 0.7 as well. So that's supposed to be inside my drop down pass it E here. 0.7 eight. Same thing for the other. Drop down. Just gonna paste it here. Same thing for the text fields. So it takes field here, but in your capacity of 0.7, you know wouldn't battery. So, 0.7, when you run the application again and you should see that it looked much more better. So we're just gonna pay for it too. Start and you should see the results. Okay. So you should see the application appear in a few seconds. Here you go. So nothing shown on the bottom Here. You see all those little lighter you can see, Actually, the background and again here, you can go ahead, change your weight without any problem. Change your height in meters. Click on B M I. And you see, it shows the value Pierre here, when you clear, clear is gonna clear to fill on top. Nothing below. All right, So that was it for to be in my calculator, Hopefully enjoyed it. So we were able to see a bunch of you are components. We talked about containers again. We reviewed the layouts. We talk about the segment on controls and how you can use JavaScript and together the data from different fields and give you a result at the end. Thank you for listening. And obviously you can spend more time working on that. If you want to change from some, some elements are of you. You I make it look a little bit different. That's up to you. But that's pretty much example. I wanted to shoot guys. Thank you. 16. Lecture 16: Hey, guys, Welcome to bag return development in this section, we're basically going to talk about the navigation controls that allows you to control the flow of the application for the user interface. So first thing we're gonna talk about its pages were already introduced pages in the past. However, there's two elements of the page. I wanted to show you more in detail. First thing is a title bar. So we have the title bar Impious. Ah, less somewhere we created to be on my calculator, How you do that, You select page and here you have your title bar. Now, what I want to show you in this lesson is the four different type of type title bars that you have. The 1st 1 is the one we used in the previous lesson where we created a default title bar. So you have the kind here, and the kind is basically what's gonna tell is gonna tell you what kind of title but you want. So right now it's set as default, and I put a title of navigation. Quite simple. The second type is the segmented control. So when you say like segmented, that will be the same thing as what we did last time when we had metric and imperial for the title bar. So quite simple. Here you put title bar kinda has segmented and then you just define your options. Remember options in array. So you need to put square back brackets and then you define you options in sight so I could provide the full text. Uh, here would be first and put a comma here for my second option and I'm gonna have a text will be second. So you can see Here are how it created your signet and control. The third type of title bar that you can have is the text field. So when you select text field, you see it shows your blank here, but what you need to do as well is to go and you're kind properties and select U text field title bar kind properties and you see, right now it shows you a text field here. You can obviously go on Bribery network blab. Bagri Developer Website. Sorry, and get more information about this. The last type of title bar is the free form one. So the freeform give you the ability of foot put almost anything inside of it. So when you select freeform, we see it's an empty bar here and you select freeform title bar kind properties, and this will give you access to a bunch of properties that you might have not seen in the past. So if you think this and then you go on content here, you can put almost anything you want. You want to put for example, a label You could put the label and put a text here off fatal. I see. So you really have full control off what you want to put in your navigation in your title bar. If using the free form, you can even have what they call expendable area content. So you can put an expendable content that would hold, for example, labels and then obviously, inside of that, you would have a label state. That text is equal to whatever text, and obviously you have to drop down here and you'll be able to see everything inside of that title bar here. All right, So didn't. So then the other thing I wanted to show you for pages are the action item. So what are the action item if you If we go to our calendar, for example, on the Bible device, you have that bar at the bottom here, and each icon that you're seeing here is actually next action item. It's made oven icon and attacks here, and you also have that three little dots on the side here that will store all the action items that are shown on the bar and the other ones that are not shown as well on the bar. Now you might wondering how you do that. Well, it's quite simple. You need to add the actions property to your page. So when you go in your page here usefully actions and again, that's in a rate because you could have multiple actions. So you put square brackets and then you define what we call the action item. So say, for example, we're going to create one here that says your title is Action one. Okay, you know, when you created the action item, this the placement property here, let's do the final. Why you want to see it so you can have it in overflow, which will put it where the creed us are. You can have it on bar, which will put it straight on the bar. And you can also have signature. What signature does it? It really shows the button. Has it dragged the attention of the user on that button? So it could be really humane property. And whenever you use it, click you item it calls on triggered. So that pretty much like he or on click for button. You define whatever you want to do when you click that action item. So I'm gonna add other action acting just just for fun. Here, action item, say, a title of action to have another action item here. Title section three. I'm gonna put 1/4 1 just as the limit of the bar below that cannot display more than three items. So I sort of title here Action for Okay, So, um, let's say, for example, I'm going to remove this here. I went with a plastic placement for all of them, as has ah, as theon bar. Okay. And you will see how the foot more won't show. It's supposed to go straight to the to the overflow. Right? I'm gonna put this on. Buyer goes to the overflow, So if you run this. You should see application coming up in a few seconds on your device. And obviously you're going to see your action bar here. And you have you have you overflow. So, like in the calendar, you have your before here, all the actions. So you gotta application here. He got through three actions, and then on the over floor, you got all the actions plus action for that is not shown under bar here. Okay, so that's it for actions. We will move forward on the next lesson. We'll talk about another control that you can have on the page, which we call sheets. So stay tuned on Alexis and 17. Lecture 17: Welcome back, guys to black return development. We will talk about navigation pane in this lesson. What is the navigation pane? Well, it allows you to two story all the screen of the application onto his stack, so only the screen on top of the stack will be shown. What that means is that when you on a screen and you click a button and it will pop the second screen, and when you cook about any might pop 1/3 screen and you can navigate back and forth within your navigation stack. So in order to create that, what you need to do is to momentous. We're gonna delete everything here, including the page, which is gonna leave the import and you out a navigation pane. Okay, so that's the base to have navigation here. So, um so for some reason, when I'm dragging it, it doesn't work. So let's just go here and type it navigation pane, so that will create your navigation. And then whenever you're on another, you pop another page, you'll have a back button on at the bottom of your navigation. So how do you define the pages that you want to have on your navigation pane while a really good way to do it. And he we're gonna put a 90 of love is you. First of all, create your first page. So remember, before we're using the page as the root element of your Cremo file. Now it's gonna be navigation pane, and we're gonna put a page here. So really simple page for now. All we're going to do, we're gonna put a container and two buttons, one that's gonna pay push the first page and the other brother will push the second page. Okay, So let you just put two buttons inside the container and we'll see each other in a couple of seconds. Okay, so I created two buttons here first and second. Now you see the both buttons, but that won't do anything unless you attach the new pages off your navigation pane in that in that queue, normal. So to add pages to your stack with to make them available for your stack, you need to add attach objects for in your navigation pane. So you do attach objects again. That's in a racy put you square brackets. And instead of it, that's where you will define your page. So let's say you have a page here. That's as I d first page. And that will be simple container with the label. Just so you have. Ah, just for demonstration purposes, he put the text here off first page, and then you breed the operation for all the other piece that you want to have available. So you do this this so I'm gonna call it second page and changed the string here to second . So that means that remember, on the sheet when we're calling the sheet and we click. Thought we said dot open. So we're gonna do similar thing here, but this time we're going to use push. So you go on, click on your button and you type the idea of your navigation pane, which is not that push, because you want to push a page on top of the stack. So the patriots on top is the one that will be displayed. So push. And here we're gonna push the first speech. You do the same thing here for the 2nd 1 Have that push. Oh, sorry. Under unclipped. I love that push, and we're gonna put a second peach. All right, So when you click when you run, this will be It will display you the first speech with two buttons, and when you click on first, it says first page, and when you click, come back. It will go back to this mean to the main screen of the application. When you click on the second button, it will load the second page for you on top of the stack. So if we go and see your application so we can see here that it's there when you click first it looks for its speech for speech and have your back button and you click on the 2nd 1 and it brings you to your second page. Now, what we just saw is useful, but it can be. It could be annoying because see, here you have to define your page in the attached objects. You can actually declare custom cue normal elements. Eso you create your patients separate Kimmel, Paige Cuma foul and you just refer to it in your attach objects as custom custom elements. So what do you do? You're going to your assets and and you just create a second Q M o. So we're gonna create one came out for the first page, and neither came out for a second page so that you go ahead and create that simply copy of page code into each curable. Okay, So I created in my project here for stock your amount, and second that came out and you can see here I pasted the code here. So simple label that will be shown under page. Now, in order to add them to the navigation paid, you need to have them in certain way in your attach object of your navigation so that whenever you click on a button, it can figure out which one it is here, and it's just gonna launch it. In order to do that, you have to use the component definition object. Okay, so what do you do? You go here and you attach object component definition. And here we're gonna given I d off first speech because this one will be foot of free speech, okay? And you type source and you give the source of the foul. So source, Now it's inside the asset folder in its first start. Kimmel in that case, so always between quotes, first that cure mouth okay, And you could do the same thing with second rage. You create another component definition i d second second page, and we'll give it a source of second that cure Mel. So what if this does is that you can It allows you to that dynamic dynamically create a page Thea object here simply by calling the i d. Here and saying create object. So the page will not be because what we had before the page was created with the navigation pane. Now arm saying is that this is the source of I came out foul. So I don't want you to load the page right now. Whenever I call you, that's when you load. Okay. So in order to do that, you need to go back on your own click and first thing you want to do. It's creating new, viable gonna call new page and then you call the I d. Here I d The idea is for speech, and then you do create objects. Okay? You do the same thing here before doing the same thing here. You changed enough push New page. So you're gonna push the newly created object? Same thing here. Got of our new page physical to second page Create objects and you do hear new page so that when you do this, do you think the button is going to recreate the page for you and it's gonna pushed on the stack so that we're not We're not using too much memory for unnecessary pages if we're not going to use them, right? So we're going to run this and we're gonna show you what it looks like when it's up. Okay, so we have our application here when you could come first, it creates the first page. Go back, click on second. It created second page. Another nice thing with, uh, with the navigation pane ihsaa A little bit like with sheet. You can actually peak a little bit like Draghi screen and see the previous page like that. You could do this on the device. So really, if you had texts on the pier speech, for example, you want to know what you had, you can simply drag it a little bit to the right and see what was there before. Okay, Another nice team with the navigation pane is that you have the ability, the ability to pop the page yourself. So remember when you click on first here, you have the back button. So say you wanna to show the bar here, you can actually have action items or even button that simply gonna pop the screen off the stack. So this every couple, you're going first here and in first we can add insider containers. Ah, simple. But in here, he put a but in here and all this will do. Can you put a text here off Pop? And when you you want, this button is clicked. Okay, You want to go back here and say that love because it's in the navigation pane, So you should have access to the No, i d. That's here. So you do not that pop a simple is that so? Let's run it. So the applications up take on first you got your top button and you could pop. It brings you back to the periods page. Okay, so it's really useful in this different scenarios where you want to over having the back button. You simply want to pop the screen off the stack. Now know that when you do this, it removes it from the stack. So if you had, if reasonable here you were pushing a second page, you would go back here into a pop that will simply removed the PDS in the middle. It will left the one that's on top of the stack. Okay, Okay, so that's pretty much it for the introduction of navigation pane. We going to talk much more about it when we will create other application? During the course, we're probably gonna update the B m I calculator and we create always Wallonne note happened. Other application. Where will be really using a lot of navigation pane, so you'll learn much more in the process about some some ways that you can use it to your advantage. Right? Next lesson will focus on the tap pain. It can create taps to navigate in your application. 18. Lecture 18: Hey, guys, Welcome to Blackberry 10. Today we're gonna talk about the tap pains. So what is it? It's basically the way tohave tab shown on the user interface to ease navigation between different sections of the APP. What you can see on the screen right now is the phone app on your library device. And as you can see, it's built of three taps. You have the call, stab contacts, tab and dial pad, and when you select one of them, it's loads a different screen. Now that screen can be paid, and it can also be a navigation pane, meaning that you could have a stack of page is shown here off in every time. Now, the question is, how do you load your tabs? So to do this, it's quite simple. You can go here on your coat. I still have the code from last session here because we're going to use it just to display the navigation pane. So what you gonna do? You have the object here on your right top pains. We can drag it or simply tab type tab pain, and that will be the object that's gonna hold all the taps that you want to put in that toe to have a tab? It's really simple. You simply take it and you drop it here. Okay. By default, Um, when you put city put two times by default, what BlackBerry does, it puts it on overflow menu on the left. Right. But most of the time you want to use it to be able to see the tab, so you have to select your tap pain and you click show tabs here. Okay, Sweet. It adds theater show tabs on action Birth crew. So you have it here now. What happened with this is that there's a maximum of five types that you can put on the blackberries at 10. So if I drag and drop taps No, I'm not four on the 5th 1 Or yeah, on the 5th 1 still gonna be will still be shown, but on the sixth, you see a hair that you haven't overflow. Okay, Each stop can have a title is well, so you can take title here and say top one and so on for the other taps. So we can simply pace this like that. And then you changed the change. The title four, three and two. So you have You can see that it's showing you the four first taps and then the two others are not shown here on the top bar. So we're going to rent this and see how it looks on the bribery device. Okay, so this is what it looks like. So you have four taps. Each will hold different page that we didn't set up yet. And, you see, all the types are shown on the overflow menu, so he could you overflow all the type of shown here, even the top five in six that are not displayed here. Okay, Now, when you want toe load a page or a navigation pane, what you have to do, you have to type content. And then you defined the content of the tab. So in that case, we're going to go with a single page. We're gonna go. Yeah, let's go with a single page. So, random page. You type up a job, Jack, we're gonna put the container. That's really cold that you're used to do. And we're gonna put the label here with a text of first up. Okay, so that's straightforward. We have first time in here. Now, how about Navigation Pane? Same thing you type of content. And then we're gonna copy the navigation praying that we have here, right? Simply bases here. So he should be good by doing this navigation pane. That that shop check? Yeah, copy. And you copy it after content. And that's gonna add on the second time the navigation pane on which you can navigate to other screen. So let's run this again and see what it looks like on a blackberry device. Okay, so application is loaded again. Still have the types on the side here, and you can select up to That's your navigation pane. When you click on something, it changes the bar. Put two years back button that you defaulted on navigation pane and it can go back to the piers. Previous section. Right. Okay, so now you might want to know. OK, I have the tabs here. What happened when I put a page, but I put action attempts on my page. Well, what happened is that your action items will be shown on the wonderful menu that we saw previously on the right. So if you want to have a little example, if you add your action items so action in the page square brackets again and then that these are things that I showed you in the past. So you type your title action one, and then you out of second action action. This one will give it a title of action to. So you can see here that you have your overflow menu on the right that is being shown. And actually that reduces the number of tab that you can have displayed here. So we run this and you can see here on the interface you have you over for many on the left for the tabs and you wonderful menu on the right. That that is showing you actions that you want tohave. Okay, really straightforward. Now, you might be wondering, How do you load external cream l page to improve the performance of Gap? Remember, when we're dealing with the navigation pane, what we end up doing after a while we we created Ah, it's not showing here frontally, but we had our Kimmel peach or first Beach in our second page. That was on the separate files, right? We had the first I can amount mean, like me that came on the second deck your mouth, and we're using component definition to load the pages on Lee when it's necessary, we can do the same thing with tabs, although I'm not gonna display because we can't really see the performance of that. There's something that they call delegates. So dynamic loading of tab. When you look for the tab section in the BlackBerry website, so really what it does, you create a delicate and you give it the source speech and is actually a couple of option about loading the page. And you can really choose different one, depending off off the equality that you want by default. When you load the application off, the de de selection is activated rights. When you select first type first tab. Sorry, the system will choose the activation policy by itself, right, and it will open to page for you. There's also other things that you can do so when you have while selected. So when the tab is selected, basically what what it does, it creates it lows. Thea Thea The page for you and when you're not select in the top, when you're selecting another type then everything is deleted and so on with other elements here, so you can do whatever you want. So really, that's the way if you want to load a separate page and you can really tell when you want it to be loaded, you wanted Toby load automatically, or only when the type is selected. Do you want to have the page deleted every time you change tab? That option that you have the You really have to think about this a perfect performance way . So if you selecting the second tab and you and you want the first tap to be deleted, then every time you go back to top one, this page has to be reloaded. So if it's a really heavy page and you have a lot of data, you have a lot of images that are there or you're gathering data from a website every single time. Then you might know want to do this. You might want to load it the first time and not deleted when you change tap. So these are things that you might want to think about when you're building your application, right? Thank you for listening. On the next lesson, we'll talk about menus on Bagri devices. Think 19. Lecture 19: Hey, guys. So today we're gonna talk about menus to demonstrate Semenya them just intellectually. Remember app that's in the BlackBerry device. Remember, here you can learn Charlie, perhaps as well. But let's go on to remember so well, really sort of first thing, which was the action overflow on the side here. That's really when you have actions here in the bar and the overflow would go here is was the action that you can actually see in the action bar. But how can you add other menus on the on the interface here? While there's actually two menus, there is theatric ation menu that you have on top so so that when you drag your your your screen from the top to a little bit down, you have action menus on top, so help and settings and that lunch is a new page. Yeah, the option that you have is what they did. They talked the culture of the context menu, so it will appear on the side here the same way that the action appear. When you click on that reeled out here now how this works basically when you principally Adan item and you remember app I added, Hello. Let's adhere Menus heading in everything. Now when you long press on it, so you hold it. You have that menu that shows on the site. Show it again when you pull it, so I probably have a little problem here. So when you hold it, you have this year. So it show you the icon and the title of your action item here. Obviously, when you first time you hold it, it doesn't initially open completely. Opens a little bit now because of its because of a simulator. I can't really short, probably. But what it does it first opened a little bit, maybe up to here, and it shows the only icons on when you drug a little bit more, it will show you the title of the action. Okay, now how you do this? Well, it's highly similar to what we we saw with pages when you were riding adding item on the action bar. So if we're going back to our tab menu here, so the way to do this is you have to add the in the context. Action. Um, container, not container. Sorry, the object. So one way to do this is, for example, I have my, uh I'm gonna remove everything here. I'm simply gonna put a page. Just so you guys see what it is? So you put a page here and inside that you can put a container. Okay. Interesting. As an example. And in the container you can have Ah, you could have, for example, a context action that will show action underside whenever whenever you actually pressed on it. So one with the demonstrate that let's create a small continue within this one that will have. And that's really just for demonstration purposes. You will probably find the same thing on the BlackBerry website. So let's just make a little square. I would have preferred height in with the same size, and we're gonna put the background color of blue colored out blue. Okay, which can also doing a site. So that will put a small square here. So to have contexts, action or menu, all you add is the context action. And then you put square brackets it inside of that. All you do is you. You call your you do an action set. Sorry. Three Every context, action, or any create in action set will in which will will rely all the action items. Now there's two ways to do the next step. You can either type actions and that real really do like the pages. So you type action, you put your square bracket and inside of it it's actually an array of action item like before. However, this property is already default in action set so you can simply go there and simply add you actually items. So action item, the first title will be here Action one, for example. And then you would have another action item here. You don't need to put commas. I believe here, action item and have your title of action to and so on. So now what happens when I run the application is that when I long press on the blue button here on the blue container, you will see a small box pop on the site, showing action one and action to. So if we go here on our device, take a few second to load and they will see her blue screen. Blue Square will simply press on it. So here ago, you hold it and see you got action. One in action to here. So obviously, when you want to implement your actions, it's as before you have the you have for the actions that you have you on triggered. So you had the on triggered property. Your signal, should, I say, on triggered inside the action item. I like that on triggered an annual parade. Whatever you need to operate for this single action, whether it's launching a sheet, launching a page or simply changing tax or but typically since it's an option, you might want to use it, for example, to share your information. The the information that's under page. So that's pretty much it for the context menu. Now, how do we deal with the action with the application menu? Once again, the application menu is what you have on top of the screen. So if I go back to my remember app and they dragged from here and down, let me screw up. You're right here. Then how do you display these two things here on top? Well, it's quite simple for go back to app. Here we have page. All we need to do is add what they call the menu that definition, so as you could probably figure out That's how you will define your menus inside of that. So you have you many definition here and again. What you need to do is add your actions so you could go here and then type actions. In that case, I believe it's not defaulted, so you have to type actions. And then you put your action items in each action items. Since now it's inside Honore and that is not defaulted in the menu definition. You need Thio Thio put a comma after it. I put a comma here. Things a little look a little nicer here. So you have to action eyes and are now on your main menu here. So when you run the application and when I'm gonna drag from from the top down, you should see your application menu showing up. So it's gonna take a few seconds while it's loading. The application minions we have on top here is really nice to use when you have general settings General menu for the whole app. That does not dependence on a single page, right. So when you have a single page that you want to Adam en youthful items on that page, go ahead and use a context menu on the side here. Otherwise, if you have general things like action one action to that you're seeing here help about settings that are general to the application. Go ahead and put it in the application menu. So, as you can see here, you got the actions here that are being shown on the application menu. One thing to note is that you're you're limited to five items in the application menu, and they're shown in a certain order to do to show you this. Here's a page on the BlackBerry Native website. So that's the order in which there there will be shown. So one and two will be outside and you have 34 and the 5th 1 will take that little space here. Okay, so it's really straightforward and easy to do, so I'm pretty sure you should be fairly familiar with that Now there's a way to add default settings and the help icon. You don't have to import these images yourself how you do this. You stay in a manner definition and you add what they call the help action, and then you could help Action item. Okay, and you do the same thing here. Settings, action. And then you do settings action item and that will create You're sitting in your help menu , so we're gonna launch just again and see what it looks like. So here's the application, and you drag this here so you got help and settings, and you see, I didn't have to put in image because that's what you have by default for these help action item and settings action item again as presented before. For every single item study adding, whether it's on the menu, um Context menu application menu on the tabs or on the pages with the Action bar, you can add images for to represent each to them. And that's fairly simple to do so thanks for listening on the next lesson what we're going to do, we're gonna modify our be a my calculator to take advantage of some of the navigation controls that we saw the read that section. Thank you, Phyllis 20. Lecture 20: Hey, guys, Welcome back. So we gonna modify RBMK being my calculator by using some of the future that we saw in the Indy section about navigation control. So I'm just gonna present to you what it looks like now and what I want you to do. So this is the new application being my calculator. So what I want you to do is you can see there's no more segmented control to switch between metric and pearl. Instead added tabs when you switch from tabs Texas replace here and you have different fields. So it's the three different pages. So what I want you to dio confirmed the existence application from segmented control to Tab , and we'll see on the next lesson how to do that. 21. Lecture 21: hi guys. Today, I'll show you how to create custom components using cure Mao. Why would you create custom components while you might be in certain situation where you want to reuse the same items over and over again the same format. But you don't want to recreate the coat every single time, or sometimes the components that are available in back barrier not enough or did not correspond to what you're looking for. You can have a small example if we open our Twitter website and you see every single row off the list here has a specific format. We have an image here. You have the use name you have the at and the time where he posted as, ah, latest tweet have the tweet year and all these icons at the bottom. Well, there's no elements. There's no components like that in blackberry, right, so you have to define your own elements inside the list. That's one example. And why would you define this as a custom component? Because it allows you to use it in difference. Different places in your application in different pages and different screens for different situation. So how do you create a custom component. Well, it's it's something really easy to do. First of all, you need to create a que amount fall and the name of that criminal file without actually be the name of the component. So, for example, if we go back Toby my calculator and before creating two came out file here, I will create a component that will be composed of a label and the text field so that anywhere in the application when I want to use the label and the text field, I just have to call that component instead of always re creating the same container with the label in the text field. So how do you do that? So in your assets, you create a cure amount far, whether it's inside a sub folder or in the root folder of assets. So you get a Kim outfall. Make sure your template is container. You can put page, but actually, when you load when you open to kim out file, you just erase everything and put a container. The reason why I put the containers because it will not be a page right. It will not take the full screen. Are component will be part of the page. So we use a container to contain all the elements inside of it. So I'm gonna replace my weight containers. So let me call that wait container. All right, you click finish, and that's going to generate the cuma file with the base container. Really straightforward to do. So you see, here I have my way container in my being, my calculator. That's the existing one. So what do I want to do? Let me copy everything that I have here instead of off rewriting everything. So if I copy this and I paste it here and you checked it Zain mode that says I have a syntax ever. That's because I have a curly braces, braces probably in extra or was missing one. So you see here now I told you, your weight and kilogram and you and your text field. So how do you call it, actually, in your in the other criminal pages? How How do you refer to that Q. Malala custom component? While let's go back to our being my calculator and erase the actual continuing that was holding Thea the previous way container on on the U. Y. So we'll just give it a second. I mean, it's not responding right now. So here is the container completely. What's happening here? So have a continue. Yeah, just remove here to await container, right? Me? Check. T what I have here. Okay, so I'm just correcting to we contain it. I created before movie removing that extra continued I don't need. All right, so I have this here, So I do in my main dark. Your mom here. I'm just gonna call, wait, continue to came out. So how do you do that? We'll remove the We continue here. And the name of the object will be the name of the Kimmel Falls. Or in our case, the constant component is weight container. And you see, now it's appearing here, so you can just select it and you will see here it's coming back. Just make sure that you guys and missed it. So I'm gonna comment it out. You'll see. It disappears, and when I put it back, it will appear so that when you load the application, that component will always be loaded. Brought from an external. Came out found. Okay, so it is considered as one. You. I element in your application. In the next lesson, we'll see how it can create custom properties for our custom components. So how can you access the labels, the text field, everything that's inside their custom components? How can you access them if you're inside another curable fall? Thank you. 22. Lecture 22: Hey, guys. So when using custom components, one thing you want to be able to do is to access the values the viable is of your custom components anywhere in the code. Right. So we created the weight, contain it on Kimmel last time, which consists of the label in the text field. And remember, we added this in the weight container, so if we go up, we click this, it brings us the weight container. Sorry for that. So how can I access the value of that label here or actually divided that inside the text field here? Well, that's with the use of custom properties with custom properties. You can define variables that will give you access to the components properties. Okay. The reason is you cannot access the properties inside your sub components from outside that Kimmel fall, so you need to give properties that are accessible. So the first way to do this is to simply call the property, and then you give it a type we're going to use string here as an example. There's other types of has bull Oh, variant that you can also use. So we're gonna put the string and what we want to represent here. We want to represent our weight label texts. So how are we gonna access this? Well, property string, you give it a name. So we're gonna call it label text or a label value. Let's go like this. And then you put a call in, and after calling you, you basically say that. Okay, this will be culture an empty string or let's go with way in kilogram. All right, so so that you have the property. What you can do in your label here, you raise the text and you simply say my text will be cool to my property label value. So label value and you'll see your text will show up here. So this gives you the ability to actually go inside your custom components inside. United come out and referred to that same label value and watch the, uh, the design moron under right here. And you want to change the label value here for, say, custom properties. So that's the way you create custom properties that give you access or that allow you to change some values outside. Inside thea, the the other you elements that you have in your custom components filed. Now what if I want to be able to change that value here, My label value that represent the label here one, for example. I click on a button so using outside of the custom component So say I'm going to my clear button here I want when it's unclipped. I wanted to display hello and said of custom properties. Well, no, that first thing you need to do it's given i d to that container. She can access the that continue here. Then it's value, obviously the same way you would do it for any other objects or component that you have here. So what we're gonna do, we're gonna type W C that and show how. See how it's gonna give you a label value when you start typing and say that this will be called to Hello? All right. Now, let's see what happened when you run this, so it's gonna take a few seconds to lunch. So here is my field. My B m I calculator. When I click on the clear button, our text exchange. All right, so that's the way you would access the label here and change the value. Another way to do this is to use the alias keyword. Now the sentence certain condition when you want to use this alias, Basically, when you do this you se property earliest label value and then you want to refer to whatever property inside another component, so itself tapping a value here, I'm going to say I want to refer to my weight label. I got a text sort of text value of my weight table. So what this does is that instead of always creating another viable, basically using an extra memory space, that silliest will point directly to the text value here so that really you don't see it, but in memory, it will not be written to different different memory location. It will always point to that label here. So how do you access that value the very same way you were doing it when you were just saying to viable type. So you see, we still have the same able value here. We can change that too. Wait and changes the value. Now, remember, all clear button that was saying with changing labels like to Hello, That's what happened when you run this and again, you know, with a few seconds to have it up. So you did clear that changes you value to Hello. All right, so that's it for the custom properties. Next lesson. We'll see how we can deal with custom signals. So you created your custom component. What if, for example, you want to change some other stuff? You have an image. Want to upload a new image every time you click something, then you need signals, right? The same way. When you click on a button, you have the on click when there's a way to have on whatever property as a signal that you can use externally, thank you. 23. Lecture 23: Hey, guys, welcome back to black Return development that it will talk about custom signals. So we discovered the custom components and by retaining, also saw the custom properties. Now, how about the custom signals? Now, as you know, when you have a property, you're able to attach a signal to it. So sometimes say you have a custom component that you want, for example, to ah to execute some change when some values are changing, is had your component. Well, remember that you had to declare properties because you're not able to access the properties of your components that are inside your custom. A component, right. So what you need to do is, if you want, for example, to change some some Ah, if you, for example, to to ah, react to signal, you can declare a signal here on your custom component. And then whenever you're inside your main document, all you do whatever you want with that, it's similar, for example, to a button. Remember, here you have your butt in here, then you have the own clicked. Then basically, that's a signal that isn't admitted. Whenever you click on that button, right, so we're going to do the same thing. But for our our custom component, in our case, what will do will declare, uh, the signal text appeared so that whenever there's a text that it does being shown on the text field when I'm going to do, I'm gonna change my label texts. So how you do this to basically declare your old signal, you simply go with signal, and then you give it the name that you want. So here, I'm gonna do takes text appear appeared. Okay? And then I go with empty briefs. Anti, uh, apprentices. That should be fine. Now, what I want to do in our particular case, I want to react whenever the text field variable has changed. Now, remember, when you on cue em all, you have the property on your text field here on the signal. Sorry. On text change or some of that. Yeah, exchanged. Whenever the Texas Strange, this will emit a signal. Right? But you can't access that signal from outside the custom component. So what we're gonna do here, we're gonna do OK? Well, when this is when this has changed, let's do a text appeared. Okay, It's empty. So that should be fine here. I'm gonna add a property for my, uh ah, just a little property here that I need it. But, you know, that's something I forgot to left here. So property alias, fix field text. This will be a goal to my weight. Ducked text. All right, so we declare a signal so that whenever Texas change here, So that means that you type you text in a press enter, this will be emitted. So you'll be able to listen to that on your other kuma files. Were you listening for the weight container? So here what I can do when you declare your signal here, go back. Your text appeared. You will have the ability to listen to on text appeared. So if you start typing here on text appeared so see here dis created the new signal for us and then we can do whatever you want. Whenever this change that we press enter. Right. So that's one of one signal you can declare all type of different signals. Say, for example, you have a JavaScript function here that would multiply two numbers. Then whatever the result is out, you would, for example, emit a signal say on results received. And when you receive the results, you would apply something else. Right? So here, in our case, we haven't text appeared. So what we want to do here lets you want to change your value here of the label here. So we're going to do label value and wanted toe vehicle tow whatever. Have, um, a text field. So I created my my custom property texts feel text, so I should be able to this so that should be straightforward. So let's friend this and we'll see what it does on your BlackBerry application. Whatever. It's up. Take a few seconds. Okay, So now if I type some stuff here, my presenter, you see, it changed to feel here that I mean that it listens to the change. So really, there's a lot of stuff you can do. So say, um, like I said, you wanna do a multiply multiplication? So say you have here a function that we're gonna call multiply, right, I just just to give you an example that you can actually do a lot of stuff with that. So if we go here, we call that function, multiply, and then we're having the divide Herbal here that we're gonna, uh let's see, uh, number. And in this year, what it's gonna do is going to return Norm, multiply by two. Okay, um, actually, not even what? It's what it will do. It'll, for example, set the value of we're gonna create a number here. So there is some problem here. Um, actually multiplying number multiply. Yeah. Okay, so let's go like this. So let's say that here. I want to m. And my signal text appeared here. Simply go to Seo. Text appeared whenever dis multiplies is called. And let's say I'm having a property here. Uh, let's put it as a string number according to this string rate, so that whenever I call this what I'm gonna do here, I'm gonna do here that my number is equivalent to that to times to where to number Times two. Okay, so this will vehicle tow whatever is coming here. Times two, it's gonna emit a signal here. Text appeared right after. That's one way to do it. You don't meet to do it this way. So what I want to do when my Texas change I'm calling my function here, multiply with the value of text. So wait, Doc. Text What? I was gonna call this do that multiplication and text appeared will be shown. So here I can go and say, Well, I want my text, the value here to be called to number. So if you run this, take a few seconds again to be shown on your BlackBerry device. Throw into my weight here, percenter, and you see it all put to 50. So it did not up, I think by two and then on text appeared it emitted a signal, and I was able to retrieve that value into whatever I want with it. Okay. So really too simple example to show you how you can build custom signals, there's a way that you will probably build much more complex signals, depending on what, what you're building as an application. But I was really just to show you another review, So we're pretty much completed with the custom components, properties and signals. So these are features that really you will leave is if you making complex application or you're not satisfied with the component that we have. Or if you want to reuse some stuff in different pages, that's really the way to go for your application. All right. Thank you very much. 24. Lecture 24: Hi, everyone. We're starting a new section. Now what? We're gonna talk about C plus plus and Kimmel. We're really gonna introduce you first to C plus. Plus, we'll also go through Q T signals and slots in Will we also see how we can coordinate information between C plus plus and Kim. Also, how you can pass values. Pass objects from C plus plus to clear mouth so that you can run your business logic with C plus plus. So in the in the section, we will see a little bit. Have some tutorials on C plus, plus what we'll learn about variables functions through the contra structures, such as, if else did the loops such as wall and four loops and stuff like that. Um, the website I'd like to suggest you to always have in hand if you're not familiar with C plus plus and you want some information. Obviously, there's a lot of good books that you could buy and read by yourself, but to good site is c++ that come what has a tutorial section and also the reference we give you re references to the ah to the language itself. Write C plus plus language where we have really tutorial for every really different different parts of the C plus plus language. Just as variables and types cause constants, functions, raise and stuff like that, and you could also use theater. Website is tutorial point, So in tutorial point, it has really a lot of two tours on different languages. As you can see here, that's really plenty of them. And under the Learned that C Plus Learning C plus Placid, it gives you again in a section to learn c++ schools through environment, set up comments, data type variables and really all that on the life of things you can learn on C plus plus to get more familiar with the with syntax and the future that you could use for your BlackBerry application. So I hope you enter that section so next lecture will see how we can. Basically, we'll see some information about C plus plus how we can create our class. Our classes will see what a class is, so we'll see how we can create that generate our own functions, and that's been my ship. So right now what I want to show you first before moving through Analects lesson is the structure of a BlackBerry c++ program. So here have my little application here. When you create in your application, you'll get these page open. Right? So if you're going to source folder, you have always have three falls Mean that CPB is always there. Remain that CBBC starting point of your application. OK, one thing that you'll find in every single C plus application there's always a main function in Maine and that's always the starting point of your application. Okay, so in that costs here and that Sorry. In that source file you have it creates an application object. Okay, which will provide, um, your application with within with loop right to get the application running. And then it calls the main application. You. I object. So here it's it's called application. You I which is why we have application. You are here and then execute the loop. Okay. You always have to declare the starting C plus plus fall in your main dot CPP so that it can create your you I load You came out for you. Now if we go under application, you I see pp we'll have here you see application. You I and in the construct constructor. And we'll talk about it later if we jump to the bottom of the constructor. You have this here. So let me bring this thing to do here. So we you have it. First of all, creates a curable document by a son in your main cuma. Fall to that object here. Okay, So greets a C plus plus object out of you mean Doc, You amount now know that it's the name is main like UML, right? Because that's the main file that we've been using since the beginning of the course. But you could create another cam off. I'll give it a different name and use it as your starting point for your user interface. Always make sure to change their value here. Okay, In the name of the file here, then we'll take that Cuma follow will create the route object of type abstract pain. So, really, the absolute pain is a class that provide ah, a lot of functionalities for your for your your for your navigation objects in Q m also page a top pain navigation pane we all inherit from abstract paint and then you sitting a scene with your route objects. So that will load the actual you I starting point of your of you. You I Okay, so that's pretty much it for now. Next class. Like I said, we'll see but more about classes, hard concrete classes. And then we'll move forward with somewhere features of c++. Thank you. 25. Lecture 25: Hi, everyone. So today we'll talk about classes. How can define a class and was focus really on the head of foul. Um, that's really you know, if you because I think the good ways to start really with Divi rebels and the functions and stuff like that. But I want to shoot the classes because when you create an application in blackberry, you get a class right at the beginning. So you might have noticed in the last last session that when I create when I created the application you have may not see PP, but you also have application You I that HBP an application you right out CPP. So they both have the same name but different extensions. Well, this is actually too far that makes the class right. You have the head of falls that will define your class. So it will tells you what are divi a bles. What are the functions and stuff like that and see pp will be the actual source circle the actual implementation of that fault. So what's the class A class will basically hold. It's really a blueprint for a data type. Should I say so? For example, let's say you want to build a house and generally speaking in the blueprint in which you'll define some parameters that you can that you can vary in some functions. For example, if you take a car, you might want to build a different type of cars. You want to build a Honda Accord or a tutor Corolla. Both of them are cars, but they'll have different parameters. Different horsepower, different number of doors, for example. Different. I don't know rpm a difference. Be like really different torque. Different parameters, different values for comment parameters. So read. That's what a class is. You create your class, and you can create objects for which you will define your own. Oh, the values for your for your valuables by yourself. Okay, you can go as well on tutorials point if you want to see what the total points says that it says here that the closet finishes here. We need to find a class you to find a blueprint for data type. So really, that's kind of what I said, right? So does this actually define any data? But it doesn't find what a class name means? That is what what on object of the class will consist off. And while operation can be performed on such an object so the viable Z and functions off that class it so well defined. Really? What? This is how you define Um this is what classes. Sorry. So we're not eso The example that we have already here in our application is the application You idot HBP and see PP, so this lesson will focus on the head of fall. So when you create the class again, you have to falls usually HBP and see PP. Although you could have everything inside CPP good practices really tohave them separated. So definition HBP and in your dot HBP or dot h and then your implementation inside dot cbp first thing that the Lord is here when you create a class it started what if not defined define here and it ends with an end. If so, really, what if not defined means is that if ever you would have imported different included different classes, different libraries and stuff like that is gonna checked to ensure that this class doesn't exist yet and then if it doesn't exist, then it will go ahead. Go ahead and define the class for you and allow you to create your code or whatever. But if that class exists than anything in here will never be actually a compiler created by your application. We always start with the if and death. So if not defined, and then you're defined and in between the fine and And if this is the definition of your class Okay, follow. Following this, we have our includes. So include will basically add external classes. External, for example. Here you have a que objects. So you have a key object class that will be included to that? Um no, that you always You always need a cure object. Really? A cube about what it is. It tells you Q t. It gives you the ability Sorry of your to your class, too. To use Q signals, slots and properties as well. So remember in cuma when we actually had a button, we had signals such as on clicked. Right, So this is what it allows you to do. It allows you to really to create signals, creates lots, create properties, and we'll talk about all that later. Okay, So that why you have a que object here But if you're your class will not be directly in contact with your family. You don't if it's not going to deal with Q object with Q r que signal property year slot. You don't really need to put a que object here, and then you define your name. Name space here, BB Cascade and basically that will give you access to all the functions inside BB cascades . Otherwise, for some functions that you that you might want to call if there inside the cascade things space while you would always have to do, for example, BB and then call in calling cascades and then the name of the function. Okay, so really allows you to import all those functions directly into your class. All right, then, here you have class application. You I, which is musically class and then the name of the class. In our cases application, You I and then you have a call in here and you have public. You object. So that's this means that your application will extend dick you object class it inherit from the features on the Q object. And like I said, it killed give you the ability Teoh create to mine. It signal slots, properties and other stuff as well that are part of Q T. This is a reason why you'll have a call in here and in public. You object, right, and then you have the cure object that's written here. You don't always need that as well. That's really well. It's a micro that tells a comparative that, Hey, I want compound for Q objects. So whatever properties signals that I'm gonna declare after, it's not going to generate any errors, right. But again, we're going to talk about signals and slots leader now inside your class, you always put curly braces and then ends with Sam McCullough, and then you have all this inside of it. So you always start with Cuba. It's such as public calling and private Colin. Why is that? So when you create a class, you'll have some variables. If I go back to my example of a car, you'll have, for example, a number of wheels. You have a color. You half a brand suffered that typically good practices to put all your valuables inside private. The reason is, if you put them us public, it means that all everything that is public is accessible from outside of the class. So if you generate a different class outside, you'll be able to access these variables and modify them as you wish by simply calling the accessing the viable what she should not do usually. Right. So you put that viable as private and in public typically anything that we want to be accessible from outside of class. This is what will put as public. So here what we have, we have an application. You I constructor. So this is called every time you create an application. You I object, right? An instance of application. You are class. So this needs to be public. Otherwise gonna be hard to create an object. Right? So this and any function that you want to put external toe accessible from outside say, for example, you have a viable interred your wheel. Great wheels give you the number of wheels. Then if you make that viable private, which you should always do, you should provide maybe a get function that allows other objects actually call that So you would have a couple of function here that you would call get wheels great and this will allow you to access your interviewer Wills here, Okay, once would define once we implement the function. So that's really how you define your class, right? Always remember class keyword. Well, if not define define, include any classes that you want to include. Then you go with class application. You I if you needed to be Q object, Colin public que objects where it will extend a que object here and put whatever functions you want toe to be able to access externally as public. Anything else? Put them as private. All right, so the next lesson Well, we'll see how we can implement different functions in c++. Thank you. 26. Lecture 26: Welcome back, guys. Or some attempt to talk about the source Fall of your class That is your CPP fall. So first thing you need to see the CPP follows here Includes on top You will always include the header file for your class. Okay, so this classes application you I we got the application. You are that HBP you always included here and see how it's between courts. Right? So you have the double quotes here, so hashtag include double coats application You ride out h p p and then you include the other classes that you want to include so they can be classes that are inside the Cascades framework. Okay. One thing you need to note is that we didn't include key object here. The reason is anything that is included in your HBP. When you include HBP, they will be automatically included inside of that and inside of your source file. Okay. And then you seeing using name space BB cascade. So you're basically telling your head if all yours or your source file that you will be using the BB Cascade name face that any functions that are inside BB Cascade, you don't need to put the prefix, maybe Cascade before calling them. You always just call the function directly. It will know by itself that it belongs to Bebe Cascades. All right? No, about the syntax. What you have after that is all the functions that you have declared in your h p p fall, right? So all of them will be will be implemented on your, uh, on your CBP file except the destructor, which will which has the responsibility to destroy the object So it doesn't stay in memory if you don't need it anymore. Okay, So how do you do this? You always start with class name, Then call in call in, then the function name, right? And obviously between parent apprentices is any parameters that are going that you're expecting for that function. Call. Right. So this is a constructor. We have application. You I calling common application. You are empty, Prentice's. And then we have a Colin and key objects. Remember, we're talking about application you're inheriting from Q object. Well, that's why you have you calling here and then you basically calling the Q object constructor. That's why you have printed this is here. Okay, So if for example, the object had a different constructor where you could well, you could pass integers and stuff like that. Then you wouldn't need to put these variables inside the apprentices to make sure that the key object gets created appropriately. The always, always, always, always put your return type. Now, when you're talking about constructors, there's no return type, and that's normal. But any functions that you're creating, you need to put the return type right. You hear you have void, right? So avoid. All it's saying is that your function will not return anything. So I the energy of function. You're not expecting something such as return returns here, right? That will give you an error, as you can see, because I'm not expecting anything. All right now remember previous lesson I added into Will's also creative function. Get Will's. So how can I create that function here? My source file. So I will call it First of all, a put the return type, which is int and then the class name application. You Why, Colin Colin, then the function name. Let's get wheels and you see it will be shown here now empty Prentice's so nothing in there And then I put my curly braces, and then it's gonna ask me it, expecting me to return an in teacher. So here, I'll return my valuables, my variable wheels. Okay. And he said, There's no more hair with no more warning here. So inside these suction, you could do whatever you want, but that's pretty much the syntax of source file. Right? So always include everything you need to do before if using anything space using the space and the of the name space. And then when you create, when you want to implement your functions, you always put the class name Colin Colin than the function name here. All right. And between your curly braces, you do whatever operation you need to do. All right. Thank you for listening. 27. Lecture 27: Hi, everyone. Welcome back to BlackBerry. 10 developments, C++ basics one. We gonna talk about variables and arithmetic, so we'll see what type of fireballs exists in C plus plus how we declare our variables and how we can use a mathematics to do multiplication addition subtraction on our on our viable in blackberry 10 or in C plus plus, should I say All right. So let's start by going on tutorial points you just to show you here on the website it till it surely you some type of variables that you have depending of what type of all you want to store. Okay, that's really just some of them. There's other type of variables, such as a raise, pointers vectors or list and suffered that that we're going to talk about later. I will use in our application so different types. You have bull here that that holds the true or false. You have a character. The holds a single character. Three time you create one character. You cannot Good morning to letters. It's only one character letter. Special shy sign number, digital. Whatever it is. Integer will use a natural number with no decimals, right? So it's a whole number and then you get float and double for really floating point numbers and void that represent the absence of type. Now you might want to know how you declare your valuables. What I'm gonna do only bring you to the C plus with that come tutorial website and under the variables, you have that little box here. If you click here on edit and run, it opens a shell for you that you can use to test your own code and run it here. So it it Sure you right there. How you declared a viable So there's to wait. Well, actually, yes. Let's go this way. So you always put the type of the variable. Then you put the viable name, then semi colons, so that will declared a viable for you. But as you can see, not storing any value yet it just gives you the ability to call that viable later on in your code. All right, The other way issue can also declare viable. But assigning the value to it right now so you could do for example, bull is followed is equal to through right. So with this viable holds, that value here. So as you can see here, what they're doing here, they're doing an addition. They're adding two numbers, adding a plus one. Right? And then they're returning as a result, a minus bi. So we had eight. That's five beers to April's one. That six. Some expecting six minus two to be equal to four. Right. So if I run it, I have four now. What if I don't want anyone in my coat to modify to value off my far Knuble. That's why you have the constant key work. So this allows you to declare your viable as a constant so no one can modify it later on in your coat. So it goes with C o N S T. Const and then the name of the your viable say acts. And then you can't. You cannot just do this. Okay, That will give you turn air, right? Sorry. Integer ex. You can't just do this. Give constant in your your type and then the viable name. You actually have to sign it. So I'm gonna sign it. Valuev to is equal to two. Right? So let's go here and actually changed this for X. Okay, that should give me an error here. So you see here Error assignment of Read only viable X at this line here. All right. That's the way you would go create a constant variable that you don't want anybody to modify. All right? So always put a constant here. So really straightforward. Any viable is you want to declare viable type than the name, then the name, uh be. Then if you want to put the value right now, you can put the value right now. Otherwise, you can just go with Semi Colin and actually assigned a value layer to it. All right, Now, how about the arithmetic? So we have an example here of how you can do in addition, and how it can sub Strack two numbers to multiply its its street for it as well. You simply put an Asterix. So let's go here. This is an Eric here. So we can go, For example, be is equal to be Asterix X. So be is to access tube. That will be four. So we have five because a it and modify a five minus four. So that will give me one, uh, five minus Hope Sorry. So two times two, that's for Yeah. Sorry. I had X. Here, Let me move. But a here so that Give me one. Right. So five minutes for it gives me one right for division. It's straightforward. You just put a ford slash Now, that's something that's important to know Here. It won't give me any issues. Goes to divided by two. That's equals to one. So five minutes One. I'm expecting a four I get for All right. What if I had? For example, B is a call to seven. What? Seven Divided by two while this three point something. However, since my B is an integer, all is gonna hold here is Thean true value. So you'll see how I will not get an output of Ah what? Five minus two people. It's something I won't get in an output of one point. Something I get, I'll put it to Why's that? Well, the way it works it basically when you do your division, if you have two whole numbers two integers, it will only return an integer. Okay, so what happens here too? Enters three times into seven, right? Seven basically is two times three plus one. So the plus one is left. Decide which would be you decimal. So this is why you having two as a result. So what is doing it? Seven divided by two. I'm integers and I'm sorry only to an integer. So what I will do here is I can get X can get three times into 2 to 7. So that will be that would give value three to be so. Then five minus three That's equal to two. If you want to revert that you could use a double instead. So if I put my double physical to nine double fee and then go to double, why is equal to four and then it's coming out this Then I put, for example, why is he called to to why divided by a fee now? Because because these are two doubles, I'll get a floating point value here and then when you add a substrate, it doesn't It doesn't matter, really. It's just gonna is gonna add it with the D floating point values if I have a double or float. So I'm changing my results to double and run it here. A little problem here. Oh, yeah. Missing my semi calling here. Maybe it. No Missing something else, maybe. Yeah, something called the years. Well, and here you got 4.556 Okay, so that's it for division multiplication. Subtraction addition. Now, how can you compare your numbers? Say, you want to know if two numbers are equivalent all you have to do. That's him putting. If here all you have to do is, if example you want to know if why is equal X is equal to a or whatever bees equal to a so be and then you put the double equal. Hey, so that's going to tell me is gonna test for equality, right? So you can see here when you have a single equal sign, it will sign the value to you variable, whereas here, it compares them and tells you if they're equal or not. All right, if you want to know if for numbers larger than another one than is be larger than a, that will be it more enough. It smaller be smarter than a You want to know if they're not equal than its exclamation mark equal. So if they're not equal than you're doing something else below Great. So that's really the way you would, uh, for example, check check for any quality. Your check it for number is actually equal to another one. Another nice thing that you can do is have incrementally de crim int. Right? So the way to do this, you have your viable and you put plus plus before, after or minus minus before after. So that's enduring X plus plus Great. So what this will do? It will increment my ex value. But after Armand, this command, right, If I do, plus plus X, it will increment my eggs value right now. Same thing if I put negative numbers. So what does that? What does it do? Really? Well, let's put X here. So I have value of X that is equal to two x constant. Let's use Ah, let's use be great. So b plus plus So what will be the output here now, Since I mix a McCree minting be after running to command here, result will be value. It will be equal to seven, right? Who this rent I got? Result equals seven. If I put my plus buzz before I have result equals to eight eight, that's because it had commented the number right away before returning to you before running the actual command here. Okay, so all that can be found really in in the in both website. If you go on to tora points, you can see that and you can also have them in the C plus plus or dot com website. While you have sections that they'll talk about your operators, I can multiply numbers and suffering that. So if you look at c++ here, tutorial such operators, it gives you some operation of the operators and how you can use them. Right? So I invite you to go. Had checked that website trying to learn a little bit more about that can learn as well about and in horror, or how he can check if values are equivalent. That's another way to do it. So Greek. Go ahead. Read a bit about that next tutorial will talk about functions, how you declare functions, the type of functions that you have, and then we'll move to control statements such as if else four wall and suffering that. All right, thank you 28. Lecture 28: Hello guys. 30 will talk about functions in C plus plus. So I hope you still have that c++ shell from C plus, but that come upside open because we're going to use that. So really, we're going to see how we create functions will be sure that in the past, but that we'll we'll see a bit more stuff about functions and how you can use them. So let me clear out everything that I have in the main function except the return zero. No, what I want to do. We want to create a function, not know that this show is as if you have only the CPP file. There's no head of file, so I'm going to define a function before that. I'm going to define my function inside of that. So again you have to put the return type and then the name of the function. So return me and then you Prentice's and you put you Sammy Cahn. That's the way you would do it. Inside the HBP falls, we can declare a function here, and then you put a definition below Great. That's the way to do it. Just different way to do it But that's the way I usually you do my stuff. So then you have entered Return me empty Prentice's or with partners Insight. And then you have your curly braces. No doubt there's no semi colons in the CPP fall when you dick When you define your function when you implement it, you don't need to put a semi colons after the curly braces. So first thing about functions, how can you actually pass information toe a function toe to do some operations for you? Well, the way to do this is to in your definition, to define your department is Are you expecting to receive it between apprentices? So let's see here. I'm expecting to receive integer into your ex, right? I'm expecting only one integer one value here. So in my deaf when I defined my function here, when I implement that Sorry, I need to put that viable as well here, so that when I get inside my function core, the viable here will be accessible. So let's see here I have an intra chur w is he called to to do to you now? I want, for example, to returned to value of two. So what can I do? I can freedom if I want to. I'll put it below. I can do, for example, see out that eye come a function return me and then what I'm passing to my function is an integer w is an integer Therefore I can pass it that I put my semi common. Now this here is expecting you to return in an interview here. Right. I didn't do anything yet here, So I'm going to do just for an example. Is return. Thanks. So what? I'm going to run it, You'll see to have the bill below here. All right, so that's really the basic way to pass your variables. You could have multiple variables here, So let's say into your wife someone to return. W uh Then let's see. Four is my other inter so here into draw y and then I can do return acts. So let's do X multiply by. Why? So see how? Why is my second parmertor in my function rate? So it will be four. Okay, so x times for my first partner, exes. W It's to some expecting a return off eight. And this is what we have here. All right, so that's pretty straightforward. How you can declare a function. The only thing that is important is how it is about the values that you pass to function, what you can do with it. Basically, there's two ways to pass values you can pass of. Ah, you can pass your variables by a value or by reference. What does that mean? So remember, when you create a viable, viable this store into memory, occupier, certain space in memory. So what happened is that by default, when you passed when you pass your variable to your function, you're passing it. DiVall you. So you creating a new variable here so that if I was to, for example, um, do some modification here on my fireable X, It doesn't matter. It will not affect my w right, because I'm just passing the value of w here. So I'm copying its memory location to a new memory location, an AK into whatever I want with it, right? I can also pass by reference my reference will I'm doing. I'm just referring to the memory slot or the memory location off the viable that I'm passing so that when I do the modification, it will actually affect my valuable here. Let's implement this. So since I'm gonna give you the coat as well on you to me, I'm not gonna erase anything here. So let's create a function into her bus. Uh, let's see, I had, uh, by value, and this one will receive an integer. Okay. And then I'll have another one, which is ad by preference. Now, it's important here. When you declare your viable in here, what you need to do is you type the name, and then you put the 9% which would actually is, um it means that it's actually a reference that you're that you're passing a reference of variable. Okay, so we'll go below that. We'll implement these two functions in ah, in a certain way. So I put my curly braces here, put them They're a swell. Okay, so, actually, let me change the return type of my at by reference. I'm gonna put it two for it. All right. So here what I want to do, let's say I'm gonna add likes whatever vaio value and receiving. I want to add it to 10. Right. So I'm going to return X plus 10 right I'm gonna do the same thing here. Off reference to value. I see the divide. Herbal name here is X. All right, So I can go here. I'll return. They didn't. I'm gonna No, actually, let's do it this way. So X is equal to X plus 10. All right, so that will return. Whatever volume passing to it, it will tend to it. Okay. And then I'm returning acts I can do. Same thing here. X is equal to X plus 10. But know that here it's a reference, right? Always remember what you said. Me calling. And then I'm returning acts so we'll see what the output is. So let me add some lines here. So see out, um, by value. Uh, let's see, w because I'm gonna pass a value of lobby right w before at by value like that. Then I'm calling. My function had by volume. All right. So at high value and of lying, put a semi calling here. All right. No. Well, I'm dreadfully I need to put my value here, so I'm passing w great. So that's pretty street for it then. I want to show my value of w after After I called my function here, So let's do this after and then I'm gonna show here is the w right. So here it will print via W before ad by value. And it's gonna add your value here and return experts stand. So here, in passing W W is too. So it will do to plus 10 and return whatever the result is. And after that, I want to see if there's any change that was done on W. Now I can do the same thing, but by for for reference. So I know two was sent before, um before I call my reference value. So now what I want to do is is to actually call my reference rate. So here's what I'm going to do. I'm not returning anything. I'm just doing this here. So I'm calling here my ad by reference. Pass it W as well. And then we'll see the value after after ad buy reference. Ready? Let's run this. We'll have a little air somewhere. Yeah, missing this else. I'm missing my 10% site for that. She pretty much it. I think I'm having another ever here. It's a bit more. Me, I don't need to put my n percent sorry that it was only this and then my son me calling here when this loop Goodbye refer. Rents. Yeah, You know what? Let me just copy this basic here about reference. All right? So we don't care about eight. That was Put it here now. Value of W. Before ad by value. Yeah, was to write and I call add value. It returns 12. So you got to plus 10 right and returns 12. And then after that, w after ad by value, it returns to the actual value of W, which is still too. Because it didn't it wasn't modified. Now what did I do? I called ad by reference w So I'm passing to to that function than doing X is equal to experts stand so actual vehicle to 12. But now, after that, I'm checking my value of w wc is nyquil 12. So you nice, You know, now you can see the difference between calling by Valerie calling by reference. So really called by value. You just take a copy of the viable value. Whatever you do. What? It won't affect the original viable? Where if you pass it by reference. All the modification that you do to it will affect the original variables viable because you're aiming to the same. You're actually accessing the same memory location. All right. Another nice thing. What functions in C plus plus is what the call function are overloading. What this Does it give you the ability to have multiple functional with same name but just a different set of parameters. So I can, for example, copying here my ad by reference. And then I had another not a reference viable. Doesn't matter if I don't do anything here, Same thing in here, great. And and then obviously because I have different numbers of parameters whenever I call the function ID by reference and then I do whatever I want to put w and in here W So when it's calling this when I'm doing this, it knows right away that eight you have to call the definition of advi reference, but taking X number of parameters. Right? So this is what we call function overloading. Keep the same name but different primaries inside of it, so that it gives you a lot of possibilities when you're building application and see past present for BlackBerry devices. The last thing I wanted to show you is the question. So you know how you can return value to Ah, when you calling a function, you can also return in your return put function itself so it always goes back to a function until it reaches reaches a certain condition. So let's say I want to have a function here that I'm gonna call. Um, let's see into Dreyer. Ah, I need to go on top first. Right. So here I'll go here with and equal one that will be my function here and then passing an integer, uh, number here. All right, So when I implement my function when I want to do here equal one No, let me just call it Rick Russian and then have another fucking here to find a fucking here recreation. It's accepting an integer value. Whatever name I put here right and end up in my curly braces. So, basically, that function wanted to do is to basically sub strapped that number until it reaches 21 So I'm gonna put free sample if here, if number is not equal, is equivalent one. Let's do it this way I'm going to return one or whatever rate doesn't really matter. But if if it is not so I'll have else with my curly braces here else, I'm going to return. I'm actually going to turn my number minus Reeker Shin number, All right, Minus mice because I want to decrease my number. So what I want to do here is have my number here, Actually, no, that's not gonna work. Yeah, So let's say I wanted to be a difference. I want my number to be equal to one year. So that's it. So it's gonna go back and return rickerson minus miners. Let me remove this until it gets to number is equal to one. So if I put five, it will go here, say, a medical to fire. It's gonna call rickerson and decrease my number every single time. Right? So what I want to do here, I'm just for testing purposes. Put you see out and then you out put the value all right. Of number. So what will happen when I call here? I go here, and I do re kirsch in the kirsch in I'm passing, for example. Uh, sound passing 20 right? Because I want to end this. If it's cool to 10 if it's a close to one. Sorry, Some passing 20. So that will be called 20 time. It found I was taken. So that's what it does when I run it. You will see it. Uh, when do here? So again, Missing my semi calling. And what did I for that here expected before? See outta here. Okay, so you see here 2019 18 and it goes down until it gets to one. So that's my recreation function. So I passed the value of 20 checks for equality here. If not, it's returning rickerson minus minus. I'm calling back the same function, but I'm decreasing my number here, and it checks for validity. Off off number is equivalent to one. So that's really what recursive function is for. So if you want Teoh you doing at additions obstruction feeble naturally, Siri Syriza's affect that. That's something you could do What? Function and call them over and over again until you get, uh, whatever value or you complete your operation. All right, so that's pretty much it for functions. And next lesson we'll talk about control structures such as if else, like we just did here while loops for loops of switch cases and stuff like that. All right, so I'll wait for you for the night in the next lesson. Thank you. 29. Lecture 29: everyone. So welcome back to BlackBerry 10 Development, and this lesson will talk about control structures, namely, will focus on conditional statements and as well, repetition structures as well. Reason why? Because when you won your building application, there will be time where you want to execute some piece of code on the infiltrating condition is met. Or sometimes you need to, for example, execute the code repeatedly, right? Until some, uh, some condition is metas. Well, so say, for example, he reading a foul. You want three Dole fall, so you're going to read it line by line than nor to do that changes. Are you gonna have a wild loop that will allow you inside that loop to read every single line, and it wants to reach the end of the fall? It will accept that that that wild loop, right, So we'll really start way talked about if else, which is a conditional statement in the past, we're gonna talk about this. We're going to talk about while loops for loops and switches as well. So let's start with conditional statements we talked about if else already in the past, we use it for a B. M I So it's really straightforward to use that when you want to try the condition if the condition, certain condition is met. So let's say here you would haven't until you're a Now you want to know if that indigent A is smaller than is hired in 10 for example. Then I want to execute piece of code that between that's between the curly braces. Okay, so say I have a is equal to 11. Then here I would have done output attack saying that a is higher than 10. Okay, so that when I run this code, what it will do, it gets here. And then it checked for the condition. Here is a hired in 10. If yes, is going to run this otherwise, you just keep this part, Okay, so you can see here is hired intent. However, sometimes you want to check for the opposite, right? Sometimes you want to take a hard and tend to this. But if it's not the case, do something else. So that's when if else gets in the game, great. So you have if A's hired and 10 do this else so else basically means that if this is false , then do this automatically, right? So if he's not hired in 10 then I'm going to say, Hey, smaller, A modern intend rate. Hey is smaller intent. So let's say I have a here that I put as a equals toe one. Sorry for that. And I do run that it is a small did intense. So it check for that condition first, does this condition returns of false? So it's not going to go inside the braces here, and it jumps to the next thing, which isn't else, and it return Anthee d and it returns. Whatever I had between my curly braces, okay, and you can nest several, if else, if you want a good way to do this is to have to use the F else if command So, basically, what you do is else, and then you put it because you want to check another condition, right, And that's really useful when you want to check for certain value of numbers. So here I want to check if it's smarter, intense, So if a it's smaller in 10 this and then I can end here with else, the other else would be if a is equivalent to 10 so you could either just put else and curly braces, right? Or you can go within other else. If, if a is equivalent to 10 then I'm gonna say years that a is equal to 10. You go so that if I put a here equals 10 then I run it. You see a sequel to 10 so it will go for it at every single statement and check if it's a passenger. Failed. So a check here is that through? No, that's a false than go to the check to the next one. Is that true? Then note goes through the next one. Is that true? Then? Yes. Execute whatever is in there. Okay, So you can really nast a lot of, if else if else else. Until you, I mean to to to build your condition. Ah, to build a conditional statement. All right, otherwise, sometimes instead of using else and if an else you might want to use switch basically what a switch will do, it will take pretty much your integers and characters. Any variables that can be evaluate as an integer it will take it, and you will define some cases inside the switch. So basically say, for example, it takes your viable A and it says inside that case is equal to a musical to 10. Case a sickle tonight and you would do several different things depending of the value that you're receiving. Right? So let's say I'm going for case here and I'm putting an inter jure be Let's go with character, character, Let's see off is equal to a Okay, so that's the character that I have here. So I'm gonna build a switch. So what I do this intact? It's simple. You do switch. Okay. Now, once you type switch, you open your Prentice's and you put your viable. Your viable is Alfa, so it will read the viable. And then you open your curly braces and that's where you defined the different cases of all . Far that you expect to have, right? So you would go with case. How far is, for example, the capital B, for example. Then you put a semi colons and under that you define what you want to happen, right? So see out. Uh, let's say here how far is be great. That would be one thing and know that here you can put several lines of code under that. So once you do this, the important thing to do is to add the break. Keyword. All right, So what does? Well, that will do is that once a case is met, once you feel that when it once you completed whatever you had to do with that case is going to get out of the switch statement dramatically instead of going through the rest of the of the cases. Right? So that's when I can go case here A that I'm going to see out. Hear that Alfa is a all right. So that's what you you would put inside you switch. The last thing that you must put okay, is what we call the default statement. All right, so at the end of every single switch, you have to put the default keyword, and that will be used for any other case. So remember when we had our if else only day If else without this here, if I remove this if else so it checks for the first statement, If that's not true, if it's false is gonna go and else and do whatever it's in else. Well, it's about the same thing here. So it takes your Alfa and a check for the cases. If none of the case is met, it's gonna go to default and do whatever default supposed to do. So in default, you can either do simply put a brake keyword. I wasn't able to sense in me calling or you could also do something and say that default I'm gonna put Alfa. Or let's say you want to modify a viable see ese cool too. Do 90 for example. And that ends to switch. Okay, you can add a second line if you want. See out here. Let's do it this way. A is equal to I'm gonna put a on my line here that so again my character offers a So it's supposed to be turned off. I say So when I run it having a little problem here. Single quote running. So characters always between single quotes. So went to switch confirmed that case a existed so it returned qualifies a Now what if I put a my all physical to Z, for example, capitals that should go straight to my default case here, So see where it went to default set my equals 90 in it. It it out. Put it a is equal to 90. So that's the second conditional statement. So it really would if else and switch you have plenty of tools to to check for certain condition confirmed that your viable is indeed equal to this. You can also use that with bullying. Jesus. Well, right, So if you have a bull is volatile, physical to true, then you could go and have an if statement here and if is valid and put credit braces and do whatever here. So this will check if this value is equal to true. Remember the statement Job is really to check if what's between Prentice is this true? And if it is, do whatever is here. That's why for bullying, you don't even have to say if is valid is equivalent to true, right, because it holds it holds a true or false value. So raped right there was going to check. If this is through, then do here. Do what? Whatever is inside you print your curly braces. Sorry. So here is followed. Great Indio on the fine. And then you're in this results this seven. Oh, what's happening here here is followed. Okay, so that's it for conditional statements. What about repetition structures? While the several of them one that is quite the most popular are wild loops and four loops . There's also do while that you can use that really will focus on while loops and four loops . Okay, so while loop is quite simple a swell you have while you have Prentice's with some values that you put inside of it. And you put your curly braces here. So basically what this will do, let me put it into account. Is he called to zero? Okay, so the wild up inside of it, what it does, it checks always for the validity of whatever isn't apprentices. And as long as this statement here is not true, it will run the wild loop. OK, so if I want, I want to count, for example, until my variable count reaches 20. Then I'll have while count is not equal to 20 the rate a so long as this is false, whatever is in there will will happen. Okay, so is count equals to 20. No. So do whatever is here. And once it reaches 20 it just gets out, right? So the way to do this, you just do see out, and then you see out your account and we'll do plus plus here. And as you know, the plus plus will increase increment your count viable after running this line here. Okay, so the first time it will output zero on in a second time will automatically incremento one . So while count is not equal to 20 up, put whatever is here. When you see here, it counted from 0 to 19 so count is equal to zero is 00 It equivalent to 20 is a different to 20. It is different count. It's not equal. So that's a false if it's false, gets into the wild loop really, really simple. And there's really anything you want to do inside the world, if you can do it all right. The other one is the four loop, So the for loop is another repetition structure and will go to a tutorial points dot com. And I wanted to shoot that paid for the c++ four loops. So, really, that's the syntax, right? You have your four and you open your Prentice's. And then really, it's a repetition control structure. Whereas you have to do where you have to define Ah, valuable as you're in it here and then your condition. And then how you want to increment the viable. So say you want to run that loop for such a number of time. You want to run that rule, for example, 10 times. Then you would need to define a viable here, which is the initial case. Right X is equal to zero, for example, and your condition. So until when you want that loop to run so X is smaller or equal to 10 and then increment X plus plus So the increments by one. So how do you do this again? Say you want to count. You want to check? Uh, let's go with a four count. Okay? Not even yeah, actually was going this. So you do for open apprentices now you're in it. Case will be your into your ex is equivalent to zero. Okay, Now, the second portion of the four statement you want to define until when you Well, for what condition? You want to run that for a loop? So you want to run that fertile until X reaches a certain value. So as long as X is smaller or equal to 10 for example, I want to do what's in my food. Obviously, you need to increment your ex the way to increment it. You have to do it between your Prentice's. You cannot do it inside your curly braces. And that's your four statement. Then you put your curly braces on whatever you want to do inside you do it here. So once you're inside of that, you can you can output for example the value of X X is and then you go like this and see ex . So you will see Here are your for loop will basically start with X equals zero and you'll see zero here and it increment until he reaches 10 and 10 will be the last one inside the for loop. So if I want to go, let me hide the while loop output so you don't get confused here. So I do this and then, uh, looks like I'm having a little problem here. Oh, well, yes, that's my fault. Here. I just created a big problem here, So let's put my count plus plus. So this were run indefinitely because I'm not increasing count. Variable. So that's just fix the issue. You go. So you have X equal to 012345 up to 10. Okay, so checks for that. Now, in some cases, you want want to be inside your for loop in it. For example, you're reading a viable that you reading a string string being basically a word. The list off a nunnery of characters And when you reach a certain character, you want to get out of you Look, for example. Now how would you do that, right? Well, that's when you can use again to break he work. So here, for example, I say if X is equivalent to three, then I want a break. Break the for loop and then when you run it, see reaches three and any gets out of the four up. Okay, that's one way to do the for loop. There's another way to create a for loop in again. That will be for some strength. So say I have a string. Um, Betta is equal to better. Okay, You could instead of creating an integer X and X, is smaller than the length of the viable here, you could actually do it. The declare off for loop by using a range. So how do you do that? Simple. You open apprentices and then what you want to do. You want to know the number of characters here, but you don't know it, and sometimes you'll receive some some arrays that might have 1000 of elements inside of them. But you don't know the size of your ray, right? You don't always know that information. So in case of a string here, I know my stream. But sometimes I might not know that the size of my string So a good way to do the for loop is to simply go with character seat. So what I'm doing, I'm creating a new character for And then I'm gonna put here my better here. Okay, So what? That will do its musically saying that for every character in my spring better do what's in this. So every character in my string. Better do this on, then simply you cannot put your character see, and you will see it will output every single later, one after the other C b e t A. So I can change that for whatever to whatever. I want less. I'm gonna call it too. I want to transform this through various words. Whatever doesn't matter. Run it again and it prints. Is everything all right? So it's gonna go one after the other. So later we'll talk about the race and you'll see how you can use that in a race. Right? So thank you for listening. And hopefully all you I'll see you in the next lesson. 30. Lecture 30: hi guys. So this lesson we'll talk about a race. So basically, was an array. It's fixed size collection of elements of the same type. So think of it as let's say you're you have a class ah classroom that must have 35 students . Then you can have a list off elements, and each element here would represent the I D off your student, right? So it will be an array of integer because an I D would be an integer. Let's see, actually on tutorial points dot com, what's the definition of an array? So here, let's read it serves first paragraph C plus supposed provides the data structure the array , which stores of fixed size sequential collection of elements off the same type. So I know that it's a fixed size and always the same type and a raise used to store collection of data. But it is often more useful to think of an array as a collection of variables of the same type, which is really what we did before. So how do you declare an array well to declare? It's quite simple. All you do, you put your type here, so if it's an integer array, an array of strings, an array off double of floats or whatever it is, You put the type here. It could even be an array of your own class. So So you create a class named car, then you could B. You could have an array of objects of type car, right, so car. And then you have your name of your rate. And then between your square brackets, you have the race size. I know that you need to. If you declared this way, that's one way to do it. You need to have the race eyes to find between square brackets. You cannot added after. Okay, so really feeling To create an an array of inter. You have integer int integer that will be the name of my Ray square bracket. I want a size of 10 for example, and I put my son me calling. That's one way to do it. Good practice, though. For a size of your rate. What you could do is to use a constant inter that he would find and and obviously that because it's constant, you cannot modify it, right? So what, this does really it give you the guarantee that your size of your it will always be equal to that and that you will not be able to change that when you create the the The array will always be that size and also is good when you're passing your rate to another function because you actually have to posit, array and also the size of the array. So you sure that there's no there's nothing that is corrupted while you doing to transfer? Okay, so that's one way to declare your array. The other way to declare your way is to actually initialize initialize it in the same time . So to do this, there's two ways and let me go on to Tora points again here. So you give the type you give the name, you give the size and then, after the equal, your opinion curly braces and you put all your valuables all separated by a comma, okay? Or you can You can also create ah ray with without putting the size here, but just putting divi roubles inside the curly braces. It will determine the size a swell. Okay, so we'll create. See Brussels will create an array would decides that is just large enough to hold the viable is here. Let's see how you can do that. So I can having it on array of interviewing. I'm gonna call it I ds right by D here, and I'm gonna have here. Um, it's integers, right? So let's say 9 10 Onda ne. Whatever it is, it doesn't really matter. Whenever I put here will be story in the rain. Good. So I just declared, in a way, array of size five because it's five elements. Okay, Otherwise, I could also do it another way, would be numbers and have my size here between my brackets and then created braces to define whatever volume I want to have inside of that. Okay. I'm putting five limits here like that. That's the other way to declare your right. Okay. No good thing here. You have. You have initialize your way. You have the values that you need it. That's fine. What about this one here? You just declared your way, but you didn't store anything and hit in it. How can you access in store values? Well, one common way to do it well, basically all you have to do you have to do Inter juror open brackets and then the index of the elements you want to modify, right for the index. One thing you need to know is that the first element of an array is not at index one that index Zero. Okay, that's very important to know. So you would do for her novel interview? Zero is equivalent 22 Okay, so that what? You just set up the value of this off this index of the year, right? Okay, I'm going to get rid of that, because a common way to do it, it's simply to use a for loop. Right? So you want to initialize a viable You want evolution as an array with 10 numbers that you would have, For example, creative for Loop X is equivalent to zero X is moderate in 10. Because remember, it started index zero. So if you would go to X is equal to 10 then you would count from 0 to 10. That gives you 11 elements, not 10. Right. Did you have your X plus? Plus here, open your curly braces, as you already know. And here all I'm gonna do is put my integer That's my ray open my brackets X So whatever is in here ex being my zero next time will be X equal to one. And I'm gonna put this is equal to X here. Simple thing. Enough. And I want to put up with my values. So let's say integer open this X like groups like that is equal to groups then x India. All right, What that will do? It will take my integer, my interview, Ray here. And for every index, it will put the value of X. Okay, So when you run it, what you have below us this winter Jersey rows equal to zero blah, blah, blah, blah. What if you want to change your value to something else? Let's say I want Teoh. Change of value of idea at index three. This I want to put it as, um I don't know. Let's put it to 11. So really simple. You do I d. Well, then you have to point to the right index. So in that case, Index three is equal to 11. Okay, so that's output value. Here, Index three. He goes to I d of three. So know that we're reading whatever It's an I d index three. Okay. And then I'm sitting in this to 11. And then here again, groups said copy this basted here. So here, which is? He had index 30123 92 02 and then here. 11 because I changed to follow you. So let me just hide to see out here. Should be good here. And you see here nine to throw two and 11. So that's pretty much it for for a race. Okay, that's what we're really gonna focus at. And later on, we'll see how it can create other data structures. They're not fixing size and that you can really grow the way you want to grow it. Or you could order elements inside of them for for certain parameters if you order them precise or whatever we'll see in the future are concrete data structures such as vectors. And we're going to use them a lot in blackberry 10 development. Right. So thank you for listening. Ex lesson will talk about pointers 31. Lecture 31: Hi, everyone. Welcome to Bakri. 10 developments that they were going to talk about pointers. So what are pointers? Pointers air before your bulls? That holds the the address of another variable of the same type. So that's why the their name pointers because they actually point to another memory location, he pointed. Not a viable that has the same type, so it can be an integer character. Um, string really could be any types of viable and their use a lot with a raise and other data structures when using pointers. So how do you declare pointers while the way to declare it? You go with the type as you declare viable, but you need to put an Asterix and then the viable name. So let's say ex PTR right for X pointer PTR. All right, so what this tells is that X PTR is a pointed toe on inter. Okay, so remember the Asterix here. When you declare a variable, it's only to tell the compiler that hate This is a pointer, actually. OK, so what? It will store memory address and not valued by itself. How can you store and address in XP tr so in a pointer. So let's declare viable that we're gonna call X. Okay, So the way to store your viable address Well, you call your ex PTR and equals two. You need to put the n percent pecs. Remember when we were passing were testing the functions and were passing by a value and passing by reference When we're passing by reference, we had to put the the N percent here. So basically passing by reference, you're referencing to the address of a viable. And this is why when we changing the values inside of functions were actually changing the value of the original viable. So here, with doing expert ER, is equal to D address of X. Now let's see what's the results. So when you do a c out on, you do value well, xpr and then you do ex BTR and the line, and that's what it gives you. You see here, it gives you at the bottom. You could probably see it. The execution. It gives you the memory address of X. Now, if you want to check that, you wouldn't confirm that you could go ahead and just go like memory address off X, and then you have here X I m Person X because that's what the pointer is and define. And then when you run this, so you see both follows exactly the same. So really a pointer will point to the to the address of the other viable that needs to be of the same type. If you want to see if I change just to character and then I run it, I'll get a good never because an insurgent pointed to uninjured drinking a point to character. All right, so you re street for So now how do you access the actual value of the pointer that devalued that viable? Sorry, how do you access value of the memory location where the pointer is pointing to? Well, in order to do that, you have to do what we call de referencing So through the d reference, the pointer to get the actual value that which the point? The point is pointing to what what you need to do is to put an Asterix before, So let's go like this. And then you put your Asterix x PTR. The extracts read before d the name of viable and you will see here There's no value it zero because there's no value here. Let's put 79 for example, for X. But then it's the pointer. Will will output 79. Okay, So really, you have to make sure that you don't confuse the Asterix when you declare it a viable in the Asterix when you want to have value of the pointer. Okay, so in that case, when you're not declaring to viable, the Asterix itself means the access, the content of the pointer. So Pointer points to a memory when a memory location. So in America, cation of acts, I want to have the value at that location here. And this is why it's reporting 79 whereas the M percent itself gives you the address. So what if you want to have the well, you might be a little confused, cause remember when we had our ex PTR hand top It gives you the actual address of the viable right. But you didn't put any in percent here. All right, that's that's because what What store inside the pointer is the memory location of the other value. What if you want to have, for example, the address of the actual pointer Well, to do that, then you have to put 10% before off PDR. Let's go out x m percent x p tr on the flying. And when you run this, give you the address of the pointer and you can see it's a different address in the value than the one for X. Yeah, that's really how Pointers work declared a pointer with the the actual the actual type than Asterix. And then the name and to store valuable, you store the address of the viable Inside the pointer. No, what we saw, we saw how to store a single viable What about a race? Right? You able to create in a racy into jer number? Ray? Norma Rae. And then let's say that you I want to put some values. You already start raising abuse useless. And so All right, so we got five followers here. That's Marie. Well, actually foreign a rate the name off the rate is a pointer to the start of it. Okay, so it points at variable zero. Okay. And knowing that the name of the array is a pointer, while once you want, when you want to store the one you want to store the address of the array. What you have to do, You don't put the M percent before because that's actually Pointer. And the value that is gonna return is it's actual address, the address of what it's pointing to. So so you have another while, you hear PTR Uh, that's my pointer. So I need to put an Asterix here when I declare it. Now what I'm doing is what I'm doing here is let's store the three PTR is equal to number Marie. So we do this and then let's output memory. So just gonna copy line here and paste it here. Actually, we're not gonna put in memory. We're gonna have put a rate PTR Kevin that we're here. Right? So what are seeing here and actually seeing a memory? A memory address? Let's see if I do this number array, hair put No, my range. Then I read it and you see, they're both pointing to the same address when you do this. Basically, what you're saying is, hey, this will return you the address of the actual array. Okay, so what there's allow you to do is that now that you have your pointer, that points to generate. You can access values inside arino, given that you know the size of the actual number array. All right, so so you want to go with C out and then element at index to then you would do, has tricks. Then you want to access the index at two. Right? And remember, when you putting in the aspiration returning to value the planter. But once you actually just put the name of the point of your returning to memory address Right now, an array stores the devalues inside of it in memory location that basically our follow each other. Right? So that would be, for example, member location 01234 Right. So they're all they're all one after the other in the memory. So if you want to access index do, then you would have to point to the to the actual memory address of zero plus two. So how do you do this, then? You're pretty Asterix. As you want to have a value, you open apprentices. Then you get the Are the the address of the array right off the pointer. Sorry. By returning a repeat er and you do plus two so that will move you to Mori to memory location. Ford. So moving you from this. Do this. All right. And then you go with end lined. Let me, Colin. And then you run it. And what value we got here, 9 20 so I could do the same with, For example, three. I'll get 8 22 Let's see 22 here. What if I go outside of my ray? Give me a zero? Because there's no values there, so that's pretty much it. Last thing I wanted to show you is how we passed values. I would posit pointed to a function. So let's say you want to calculate the square of a number, right? There's already libraries for that, but, um, but I will build one. So when you declare a function, you have to put obviously we develop variable that you expecting to receive that you put unless you put an Asterix here. All right, you can put a viable name. You don't have to. And then after your main here, you call your function Isis Query square. So square off. No. And its return type of integer Sorry for that so square of them and then here I'm expecting an integer appointed to an intra juror number. So here I want to return. Or let's just output. Just say that my number will be squared, right? So I want to change your value of the number. So that scene Asterix number remembered this returns to value. Okay, is equal to well squares to time. The same number That's Ricks on them. All right. When you do you referencing a point to make sure the Asterix is There's no space between the Asterix and the viable name. Otherwise they will. I think that this is a multiplication, right? And then I will see out my number. Square is like that. All right, now, how do I pass? Uh, how do I call that function? How can I pass a fireable to that function? Well, remember when you declare do you Ray What? You declared the pointer Sorry here. You telling him that this is appointed to an integer, but what you actually store is the address of the viable. So what you need to do is to actually pass the address of the variable to the function so that when you d reference it here, you will actually get the value of that variable. Okay. In other words, when you're saying integer basically what you're doing here, Say you passing a viable K, then, actually, what's happening here? Is this okay? So you're gonna call Square of Numb, and then you're gonna pass the address of the actual variable so that so that if the pointer holds theeighties actual address. So this let's drive us, say I have an interest. Your okay? Easy quote 25. Let's go with 12 and then square off numb, and then you put the address of K, and then you just run it. Any returns you want? 44? What if you put just k This means that you're not passing the address, actually passing the value and you get a never hear volley. Conversion causes expecting an address here, so you need to put the m percent here. All right, so that's it for the beginning of ah, of pointers, I'm gonna pose this code as well. I'm gonna add some comments. So you could really see what What's the what We're repeat what we're showing, actually, at every single step here and then you can go on the sea possible shell of c++ dot com and run that code if you want and play around with pointers because they're really useful. And you'll see as well on your BlackBerry application. Um, you actually declaring pointers as well. So if you go back to the application you had out CPP when you create a fresh program while you see that most of the viable when you declare them, they are pointers. Okay. All right. So thank you for listening, and I'll wait for you. Lex, listen. 32. Lecture 32: Hi, everyone. So welcome back to black return development and this lesson. We'll see how it can pass c++ values to PML. So by values I'm talking about variables, transit, string or data is the fact that how you can pass them to came out know that blanket several focusing values. The next lesson will focus on objects, so we'll create the class and we'll see how the class the object of that cost, can be access to Cuma. So how do you pass values to see, But from C plus plus two came out while it's pre street for blackberry 10 Cascade give you the ability to use what they call the Q declarative property map. And basically, it's on object allows you to have a key and a value. So you the key, give it a name, and then the value you give it, whatever the value soup should be. So say, for example, I want to create a contact information, right. So I need my name, my last name, phone number and maybe an email. Okay, So how do I do that? While you first need to declare to create a que declarative map, right, So cute declarative property map. Now, this is a pointer, so let's call it contact info, All right? And since we're creating a new class, a new object, we need to put new declarative property. All right, so that will create a knob check of type que declarative map. And the name will be contact info. Right. So now what do you do? Well, each property, each variable that you want to access to came out. You need to link it to a key. Okay, so it will really prepares. So you have a key and value pair, so any time you need the axis of value, you just call the key, right? So how do you do this, then? You say contact info, which is your object that you created before, All right, And then we have the perimeter here. Where you basically saying you're calling it a function that is part of the contact info object? That's my over here. It's not a way to do dot for example, So you do this and then you go with insert. He called insert, and then you can see here the definition you give it a key and then the other viable must be a queue variant. Okay, let's see how we can do this. So we'll give it here. The key will be first name. All right. And what will be the value then? We know the value should be acute. Variant. Okay, but the name is usually a strength, so we can put the Q string inside of that. So that will cast it to Q variant and we'll put a name. So let's see Bob or John. Yeah, We'll go with John Doe for you, John. Okay, So that's how you would create you would add fireballs that make variables are available to cure amount. So let me just go ahead and copy some stuff here and just go here with last name and make sure that whatever you have here in quotes, it's only one word. There's no space. Okay, John Doe SE email would be John that, though at mail dot com and then you would have your phone would be 555555777 Okay, I just Example. So you created your mop. You inserted the key pair. The key value pairs inside your mop, but you have not exposed yet. the object to Q amount. So how do you do this? You need to, um, basically call you Kimmel Document that you created here because you want to expose thes variables toe the main Kimmel that you created here. Right? So you're seeing a my chemo. I want to add a context property that he called. And this will take a property name and an object. So the property property name would be the name that he will use and cure mall to refer to this contact info object. So let's say I'm going to give it a name of contact, and then what's the object? The object is only created here. It's contact info, right? That's it. So or context? Properties contact. And then we have first name, last name, email and phone. Uh, let me just put them all starting with the lower case for that. So incurable, you'll need to type contact dot First name to get the first name, that last name to get the last name and so on. So let's go here in Cuba mouth. And this just adds four labels, right? I don't really need anything else. So let's go with four labels I got one here, Another one here for labels. So here will have our text coma, and that's contact. And you will see contact showing up. See contact here. So that's what you see here. It shows you as a contact property defined in CPP fall. So that's the one we just created, right? The incident. Contact that first name, Dr. Remember, That's a string. So you can store it in text and we'll go here with the last name, Uh, contact that last name and know that since we're only demonstrating Ah, this I'm not putting ideas are or anything else. Really? I'm just going Whatever I needed to show eyes, it's phone. Yeah, email. Then phone. So here, E mail. And then here type text contact, out phone. So we're going to see this. Make sure CPP father's saved, and then we're gonna launch it so you guys can see what? What is the result on the actual simulator? Okay, so we launched the application, and this is what we see. John doh, John doe at mail dot com And then the phone number of 5555557777 That's really how you can make your CPA suppose values or variables, Um, available in Q amount. And next lesson, we will talk about exposing c++ objects. So how body finding your classes and you define your classes. How can you expose an object of that? Class two came out in order to call functions, toe access, variables and another details like that. Thank you very much for listening. 33. Lecture 33: Welcome back, everyone. Welcome to Black Return development today Week on talk about C plus for subjects to see how it can expose these objects to came out eso I'm using an example that we can find a BlackBerry website like we developer website and it's too sure what it is. It's exposing. Suppose with objects to came out and really what we're gonna dio just assure you on the device when it is like that's what the cold looks like. The application looks like you have, ah, small label here with integer value will increase and Yaffa increase the value that increase the interview here and how it changed the text and then you have the button We sent the value here. So this is something you could do with Kimmel in JavaScript. But just to show you the principles, some basic stuff about Q T and C plus plus, we're gonna really you see possibles in order to generate the number that is shown here and when you couldn't reset a swell reset the actual value that's being displayed. So how do you do that? Well, first thing you need to do, we're going to create a class rate because we want to do is expose an object. So for the example of black where we're creating an object called a class my CC object. So it's straightforward You Rakic on source and then you click on class and then you give it a class name. Always start with a capital letter. I cannot be a number When you see her, it gives you the dot, age and adopt See pp somebody cancel that. So I really wanted to show you what this code is exactly So what we have. First of all, if you want, expose your class to your mouth, you need to make that class extent que object. Okay, inherit from Q object. This is the base class of all Q T framework. So if you want to be able to use it, you need to make it a que object. And then after that, you need to declare que object here as a macros without a compiler itself, Will knows well, that this is a que object and that it must be able to It must be able. It's much must be accessible through your mouth. Okay, so straight for it. So before going to what they call Q property and Q invoke herbal here that we can see. Let's see what's in the rest of the class. So we have a constructor here, my CPP object. And look how here we have our parent que object Parent pointer which is a goal to zero. So basically, I'm saying that this is a child of the parent class which in this case is application you right at CPP, so that whenever this is destroy than this will be destroyed as well as an object. Okay, measured, freed Marie. After that, we have in value a function here integer value, so that returns an integer okay. And the value the name of the function is value and then here have set value. So this function receiving interviewer and you congrats. That is going to set the value of the integer that we can see here and here. Okay, so that's that's pretty much it. And you get your private here, which is an M I values he can't access through this viable from outside the class. No. How do you call these classes from from? You came out with this two ways to do this Ah, one good way is to use what they call the Q property, which is what we have here and basically what they did here. What you do you give a name to your property in case in this case, integer values. So this So in other words, this property, when you call it with dot value, will see after inhumanly into my CPP object that value it will correspond to an intruder. Okay, but it never you never get access through the value. Hear directly. What you need to do is have read here, read all in capital, and it points to value value here being the functioned I would define here. So if we were to change the name to, for example, get value, then in our property would have to change that would get values. Well, I'm gonna leave it as value as it was already. And then you have a right here, right? Basically, is your set function how you're going to write to that variable, right? So you're calling said value. All right. So said value will set the value of whatever interview we have here and this property when you call basic. When? When you do my soupy object that value. It will actually call this function here and get whatever is returned by this function here . And then you get not a fight. Notifies basically what signal we can be emitted by this property. And you have here value changed. So if you look here, you have signals, Colin, and then here you have your your signal, which is valued changed. And this signal expects an integer. All right. Do you declare que property so that whenever you access whenever you take my cbb that value okay, when you're sending something to my superior value, Should I say while is gonna call the get value, this one here and when you actually doing my civic value is equal to something is gonna call said value all right, and it will emit the signal called value change. Now, how do you implement these functions here? We'll see that in C plus plus in a few seconds, as one of you two want true the other way to call the function directly. But this is a property you attach a viable to actually two functions or more. Here Q and likable. You attach it to function and you basically tell, Tell the compiler that hate this function will be accessible by que No to cure Mel, should I say All right. So know that because you call this Q object, it doesn't mean that everything inside of it will be accessible, like and all. You actually need to specify what will be accessible. So this fraction is accessible by Q invulnerable. And the this and this the all attached to one property again. Look at the resources. I have posted some links to give you a bit better understanding what properties are irrevocable and signals as well. So this girl of CPP fall straight forward. Here we have our constructor while he started constructors a little bit before. So it's inherits from ah que objects. So you pass it. The parent, this here and the for said the I value is equal to zero, which is the privates variable that we have here. All right, And then here you have your aunt value, which is you get value. So remember that's part of the property. So in cuma, when you're actually saying my CPP object that volume and we'll see. But more about that when you're doing this, You calling the get function to get the actual value of the that off that property. Whereas when you do this, my CBB object off outweighs equal, that you actually calling the set value and setting my objects? We've erotic value, toe whatever is after the equal sign. All right, so here was simply going to return this variable here and we calls had value. You see, we're receiving an integer, and then we said it I value is equal toe I and then we Emmett value change will put that value here. You don't always have to put an interview here or whatever, but and then you have reset. Here, reset is Q and vocal ble. So you call that function directly from Cuma, right? And then you said the values is here and then you emmett signal. So that's how you define your class and you make your functions and properties available to came out. However, if you just called that you won't be able to access anything since I came out, you actually have to tell your main class a bit like within the previous. Remember the peace lesson where we created a contact And then we we define our key value pairs where we had name last name email and we said that to a context property mop. Right, So it's exactly the same thing we're gonna do. But this time we're just gonna put the object directly. So if you go on application, you right out see PP here, you create the my CPP object as a pointer. All right, so this points do I knew my CPP object, all right, And not how we passed this. This means that we're passing this class, which is the parent, right? So we passed a parent to my CPP object. And then we said the context property would give it the name of my CPP object and this correspond to this object again. It's a key value pair. You have your key here, and it links you to this value, which is an object here. So that's how you can actually call that that object. Use that object to call the class directly in Kimmel. So if you go back and mean that came out, you have first of all, the label who can't see it here. But if we look at our application That's the label that you have here. So you have value of my CPR, jack and note. Here we have my CPP object that value. So this in the background will call might get value. Okay. And you could see it here. Its value. Then you have the second button that has increased value. That button, though they defined a function inside of it called on CPP. Value changed, and this function will be connected to us to the signal that we define in our object before . All right. Howdy Did this. The world. You have the only click here. And whenever the button is clicked, the basically what they do here to connect this this javascript function to this signal. All right, so when you click on this, this will get call automatically. All right. So it will change name of of the button. And then after that, all you do hear you set your value to my CPP object that value one. Okay. So what this does is that when you're doing this, basically, you're setting your object to your value to your existing value plus one. And do you remember that's the sets function. It will omit the value changed. All right, so you set your value and m its value. Change em, I value. And then whenever what you did have you connected that value train signal to your function here on CPP, value changed. So whenever this is done, you're calling this and then you're basically calling your Sorry. So whenever you set your value here, your m eating the value chain signal and since since dysfunction is connected to the signal , it will get called right, which is kind of a slot, and it takes the here, we named it vile. But it's actually the integer that you have inside that your signal is expecting. All right, So in that case were returning. I value. So let's go back to a came out. So there's get called on it would change the name and then you have a really straightforward here reset button. So whenever you click that it calls my CPL Jack that reset and that reset will basically go back here said you have I value to zero and then changed the value here I met the value changed and that, in turn, will change the button takes here okay, because whenever this value chains admitted the function that you connected to it will get called automatically no matter what. So this is what the code is it? Look, let's look what it does in the application. So again, um what? But he started it before, but let's go again. So when you increase that, you see that the value increased. This is equal to three plus one, or this value here, plus one says to value. Then again, you can see if you compare with the code here that when I click here, this increments okay, because this will inclement because it's equals on my object of value and that as well. The text of the button has changed, all right, And you basically changing the value here when you click Reset value. What happened? You putting your public here 20 and this get called. But since your value is not equal to zero, zero plus one is equal one, and this is why you have your set, said value to one right. So that's really an introduction to how you can pass. Object to C plus plus will create gaps in the future with other other other useful classes with other uses but will always see how it can deal with c++ is, well, create. Do some business logic and C plus plus and make thes parameters for these classes available directly to cure amount. All right, so thank you for listening. 34. Lecture 34: Hi, everyone. Welcome to Bagri. 10 Development in this section will going to talk about this how we can create a set of data and display it in the list form on the Bagri device in your different applications. So we're going to talk about this and also will also create a small application name countries that will display a list of countries and different continents. And we'll also display five and allow you to edit some some information at some notes to every countries if you want to. And within the application, you also be able to load a Web page to display the their Wikipedia page of that country. Really? The idea here is to show you the different ways some of the different ways Teoh Display list on your BlackBerry device. Let's start composed off two elements. The 1st 1 being the Listsview and delivery will deal with the look and feel of your of your list. Actually, so what you want to display how you want to lay it out, the text, the images and any other components that you want to display. Some time you wanna have a text field, for example, in each each row, you might want to have a button in each row of your list. How How you can create that. That's what the Listsview takes care of. And then you have the data model. The job of the Dale models provide you the information to display in the list it it can come from. It can use different data source as well to provide that information so you could have that information in the XML follow. And Jason fall as well. Information that you gathered online, right? You pro you querida, for example, the Twitter MP I and we get adjacent fall that Jason file. You can use it to display to to feel you did a model to display text and images you can also use in the sequel database. Or should I say, sequel light database that can be local. Or you can also use the other stuff, such as, Ah ah, simple array, that the has a list developments and you want to fill the data model to display it on a list for you. As a brief example of ah Warren Parking Bob, let's look at the assistant The system setting speech on a BlackBerry device Well, if you look at that, this is actually a list of different settings, and they all have pretty much the same layout, right? You have an image here on the left, then you have the title here, networks in connection, for example. And and and then here you have a small description here, so that's really you list elements and where it gets that information images title. And, um and the description is really is really up to you. It could come from an excellent father can come from the Jason file. You can also come from ah, sequel light database. And you open that that source, fill the data model and display this on the list. You. So, in the next tutorial, we will introduce you to Liz views and will serious. Well, how you can upload are you can display XML files in the list 35. Lecture 35: Welcome back, everyone to black return development. So today we'll talk about the issues. So I introduced you to list in the peace lesson. We basically said that there was two components in the list. There's a list you that will take care of the look and feel how the list elements look like and is also the data model which opens that well, takes the data source and load the data in a way that can be used by the lists. So what we're gonna do in this lesson, we're gonna introduce you to list views? This is really on the curiam outside how you can create them, how you can create and design your rose so they can look different. How you can customize your rose and things like that really indecisive will focus as well on the XML source files. So how can load an XML file inside the list and have it display all the component that we want to have also mentioned that we're gonna create a country's application? Really, that will launch will give you a list of countries and when you click on them, you have a view of the you have basically in an information page or summary page gives you the flag in the capital of the country, and you can also edit some stuff and even low the Wikipedia page of that country. So, really, in the next few lessons as well, we'll see how we can load things from database and also safe things in the database. So a lot of the, uh, when it will be building this application will focus running and how to create the list, how to access your sequel database and how to basically load and save data in the database . Howard for for the using Inter Freeze. We're not gonna spend much time on it because we we talked about it in a few previous sections. So that will be really up to you guys to work on the user interface if you want to customize anything or change some things, but the court will be available as well to you. So the shooting application looks like we can go on our simulator here, but that's the main page here. There's a list of continents and as well. Here you have the images that I took on Wikipedia that beautifully show what the continent look like? So when you click on one of them, say you come North America, Um, not computers really slow today, but it loads a page of countries Okay, that you could screw up and down when you click on one of them. Let's say Barbados, you had this speech here that shows. So you have the flag here, Capital area, population, the current currency, and you have some notes here. When you click on edit, you able to change capital, the area population and even the notes to something else. So, um so change out to amazing. And then you can save that. Uh, you would have to go back here, reload to data model and hope Sorry for that. Missing some stuff here so you can edit some notes and that will change the information on the database you see here. Now it shows amazing and everything. Here's when you click on Goto Wiki Page opens a new page here, and I will take a few second again on my simulator. It will launch the Wikipedia page so you could have an idea basically have all the information that you need on that country. So you have had a Wikipedia page that is actually loading. All right, so let's start by making this speech here. Not this one. This one here. Well, that for that will use an XML file. Okay, so let me open my country's application here. Okay? All right. So I created here in my country application. My country's sorry here, and we'll start, first of all, by a basic page just to show you the basics off the list. Well, let's remove the container. The label here. So when you create a list, you you have the component on the side here which you call this view that obviously you put it here. And that's really inscrutable list of items that would be displayed here. Now when you have a list view, when you what you need to do, remember, there's two components on the list, right? There's the list. You It is also the later the data model, the list you. Since it takes care of the looks and feel how text will be displayed in everything, it also needs to have access to that texts to the images that you want to display, Right? So that's when you give it a data model. So you give it a data model, and in that case, we'll be dealing with an XML file, okay? And let's over the XML file. So this is where it looks like. So you have root element, then you have continent. Give it the name, an abbreviation that will use later and also an image Africa, T and G, which will also be displayed in the Assets folder. So I'm gonna create right now folder for that, which is not really quite important right now, but it will be in the future. So question is, how do you love that? You xml at your on the you'll issue? Well, there's a data model that he called XML data model and that little model you can pointed to an accessible source file. Okay, so you have here source, it will go in your assets already. So you do continents that X amount. Now, if you run that, you should see soon enough what it looks like. So my country's here, make it ran. So here you go. It launches application, and it's showing your the aggravation of the elements that I put right, which is not really what I want, right? You want to be able to tell your list view what you want to display and how you want to display them. Well, this is where you have what they call the list items. Components. So when you build a listsview, you can add the what they call the list item components, which will basically tell you what each row is composed off. All right, So that really, really isn't array where you could define different components. So say, for example, you want tohave. You have your contacts application. You want to have some headers for for all the contacts there, start with Ace, not it. Start with bees. You could have different sections in your list. I think you can have up to two sections if I'm not mistaken. So here. I'm gonna give it a type of continent. And reason is in my XML file. Sorry. No. So you have US item components, and then you define one less item component here and this one you give it a type of continent. All right, between quotes. The reason why because when you look at your xml file here, this is what you're looking at. You looking at this item here dis component. So you can have access to the name abbreviation and the image. All right, So once you have this, all you need to do after that is to design your role, How you want to write your wrote to to to to be laid out. So one way to do this, you can use what they already have in the BlackBerry devices is the standard list item, which you can drop here. And the steady list item is as being something that you see when you're going on under your setting speech. So it gives you the ability to put an image here, and then you have a title. Then you have a small description here. Okay, you could use that. And then when you use this, what you can do since there's pretty finds elements here, you could type title, for example, and say that you don't want my title to be equal to list item. Dia that name Now, what is the list item data. Basically, when you lose, when you load your data model, what it will do, it will read that line here, and each elements name aggravation, an image will be accessible through an object that they call list item data so that when you type bliss that India that name it will basically for every single line, it will take this here and put it inside a title so that when I do this, he go. So you have your name here, and that's showing you the list off of continents that you have. No, that's fine. But sometimes you want to maybe customize your your list you want you want to change how how it looks like right to us view. Really? You want to deal with the looks and feel cause you might have different ideas on how you want your list to appear? So what we're going to do, we're gonna create a custom list item, and really a list item on it is it is a container in which you design all the items that you want. Okay, so we're going to create a new Kimmel fault that we're going to call, um, continent list item and as template here, you simply put a container. Okay, so I created my continent list item here, and all I need to do now is to design the design, the user interface. So really, let's go quite simple here. I'm gonna put Stackley out top to bottom. The reason is I want to have my image of my text left to right. But I also want a divider beat below. So there's go like this and we'll create a new container here. And this container here will be left right Exactly out. I go really fast, but you have the You have the text, the code right after. So that'll be a problem for you to really customize it the way you want. The idea here is really show you how you can simply create something like that and then be able to apply it yourself in different situation, different scenarios. So here you go up with an image for you on the label. I'm gonna give it here an idea flag, Although it's not really fly, but it doesn't matter. And here, idea of name. Okay, now what I want to do, you want to be able to change the image and change the label from outside. And I remember what we did previously in previous less sense, you created property and these will be will be strings rate. So probably flag source property string. Uh, that's a continent name. All right, so that when you're in your image, you you can go and type your image shores and your source will refer to whatever you have here. Okay, So when you're in your less mean that came out when you looting this, you're gonna put fact source is equal to image. Okay? And then you and then that will change your value. Here, flax. There's something here for the label label we're gonna do text that will be a continent name here. Okay. Quite straightforward up to No, though we're gonna add our divider right after just small container here, Um, this one. Since it's the divider needs to make take the full screen so vertical so vertical would be bottom, and then it's fills, and then you can change the, uh, change the background. How can we change the background with changing color here? This will be cool, too. Groups. You are a that bullet because you have, ah, pull it off colors and probably base. So, depending of your version, it should change color here. All right, so we got a image. You would get a label What we need to do. Want to make sure that there's enough room. We want to find the size of the image I want to display. And also the how much eyes the label tech takes in comparison to the image you. So, in order to do that, remember that again? In the past, we talked about Stack O lee out properties. So we're gonna add some Stackley out properties here, take a few seconds. Where is it? It doesn't matter like this. So do a layout, properties, Stackley out properties. And then here we have a space quarter. Let's see Three Dato for label my image Space Corps off of one so that the label is three times a victory three times more space than the image here. And then I'm going to limit the size of my image. You. So here you can define your minimum height, preferred height and with and maximum height with. So I'm gonna do here. We're gonna put them to be 100 by 80 right? I don't need preferred height 100 by 80. Okay, so now I have my men. Max Min Max. That should be fine. Maybe had at some Penning's. That's what he that site is really up to you. Okay, so not I have set up my content, this site and this is what it is. So it's a container and I put all the elements that I want inside of it. I can now change my image You by using the flexors property here, since the source is equal to flag source And I can also change the name of the label, the tax that will be displayed Now it's continent names and there's a property continent name that could be excess externally. So if you go here back on your main, that came out well, you can now take here continent list item and you see here is being shown and here all you need to do then is to simply say, Well, I want my flag source to be equal Teoh here. In that case, I'm gonna put images. Could it will be inside my images folder, which I did not define in my XML rate only put the file name so since I'm gonna put them on the images folder. So images that plus this item data that image. Okay, that's the name here. Image. And then I'm gonna go here and continent name, and this will be goto list item data name. Okay, so that will load the list for you and will display everything. So make sure, though, that you load the the images first and your folder. Otherwise you'll probably fell something. So I'm copying a bunch of files which is available to use well in the resources of that lesson. So looting this and, well, she applications so you could see what looks like. Here you go. So, you know, have a small list. We have the the image, and you have a name of the continent. So this is pretty much what it looks, what should look like. And then, obviously you're not gonna click on anything right now. We look to you, work on the user interface. Ah, a little bit. And then you could see what it looks. They make it look better than this. All right. Last thing that you need to know when you're dealing with a list you is how you gonna respond to clicks. So in order to do that, you have what you know, the city. The standard signals in that case, it's on triggered. Now when you doing on triggered? Basically, Remember when you're on the list, right? You have all these items here and all represented road. Okay, Well, when you click on a row, how do you know which one you're clicking on? Right, How The system doesn't know it. How can you access it while when you click on it, there's ah ah variable called index path that you're able that will basically tell you which were you looking at right now? So I'm triggered. You could go, for example, with bar and give it a name of shows an item. I'm just creating an item here, a viable here and way to access it. It's the basically do data model. OK, which will give you to dinner model here. That data. Okay, so this takes the data model here, it takes all the data inside and index path and expat is the current row, and that will give you too far. Chose an item here. So if you do Consul that log just to show you at the bottom here, what will happen? You can do chosen item that, uh, that's a name. And if you run this, it will display at the bottom here, the name of the chosen item. So let's see or it goes. See you at my country's here Machine, click on North America. Go back here Says under fire. Oh, sorry. It's lower case. And but you can see the idea. Really? So when you click on the low case, when you put your tonight in lower case and for name, then it will display the name for you. And you will you will be able Teoh to basically see it under concert. Logue. Logue. So that gives you an idea how you can access the elements inside of row and transfer them on a new page, for example. So I clicked on it and see here. Now you have North America. All right. So thank you for listening. So what, you can see here, really, in this lesson would talk really about the XML data models, but you could see basically the idea of how you deal with the list. You you declare data model. Do you carry components? And then when you click on a component, you have your untraded here. Okay, so in the next lesson will work on the second page of the application eso how you could load the country's from a database and we'll see how, really we can use the intricate to load these pages and a navigation pane. Basically simply we did in the past already and also how we can save data. 36. Lecture 36: All right, welcome back to black return development. So you re going to introduce you to the sequel light database in terms of Ah Listsview. So how can we have a database, what its local or remote? But we'll focus on local. How can you database and load some data of it inside a list? Right? Remembered in this section, we're talking about list, so give you a little idea for those air New doesn't know sq light. It's basically it's ah, it's based on sequel database, but it's a survey less and doesn't need configuration. It's self contained, right? Which means that you don't need a server on your You don't need to run that database on the black under under server. It's by itself a bit like you would do you really on the Web server. You need a sequel database, for example, but you need you need that to run as a service, which is not the case on mobile devices. So that's that's really what makes it really useful in terms off mobile devices, whether it's bag barrier and great devices and as well look on IOS devices you could use in the past sequel Light rain outscored data, but its base It's really rapper on Tower Sequel Lights database. So I opened to page for you that you Congar Oh, and check and read some more about the sequel idea to basically know what it is. So you have sequel light dot org's and also tutorial points. They have a Web page here where you have full tutorial on databases on sequel light database. So high concrete the table how you can insert some values, how you can select some values through different queries. So that's what we're going to use in the application about building right now for application. I have created ah, database already. I got her some data that I found on life. It took me a couple of hours to build that. So, as you can see here, it's a list of all the countries that we have live in our application. There's different Collins. So does the idea columns that needs to be there on a black Greek because that should be primary key calling. If you look here primary key I D. So that means that whenever there's an I D here, it will be unique, and it serves as a primary key to the whole row. So if you need to access a specific role when you want something that you sure that if you quarry a certain value always gonna get that same exact row than you have to go to primary key that's one example of it. But it can re read about it more on the sequelae dot or website. So we have different Collins here. So the aggravation of the country to letters or three letters and also in numeric. I saw I got this online, so I mean some Collins. I'm not sure exactly what they are So not sure what number what it represents exactly. We got the the country named the capital, the area in Kilometers Square, if I'm not mistaken population on which continent it is so you for Europe. As for Asia and A from North America and salon, the currency code, the currency name languages and then the flag. So that's the name of the file for the flag. It's not the exact location. Remember when I was doing it for the for the main page when I was showing the the continents and the small icons that I got on Ah, on Wikipedia. These here. So that's exactly what I did. So I have a follow, but it's a gift, or PNG or J peg for image. And I simply put the file name and whatever location it is, I'm gonna write it in my career. Mollo in my C plus plus. So that's a database table that we're going to use. And if you want to see the results on the on the actual application, Well, this is what we loaded with XML, remember? And then whenever you click on that, remember on our XML, we had what we call the appropriation in the excellent file. So let me put up the page here. So you have a BB RV aggravation and these two characters that correspond to the continent common, right. So whenever I click on frees up on Europe, I'm going to query that database to return me every single row that has you as continent, Right? So this is what it is doing right now. So I click on North America. I got that list of countries. They all have their own flags. Some exception here. I'm gonna add them later. And when you click on them, it brings you to that page. So again, all that. If all the information that you're seeing here, whether it's the flag capital name, the area population of currency, they're all inside the database. There was also an old Colin eso notes here does. It's pretty much empty in a database, so there's nothing here, but you will be able to to add them. So we're going to see really how we can access that database quarry to debase a return to the list of countries pretty per proper continent. Sorry, and how we can well get all these elements from the database and be able to display them as well. Last time. Last thing, How can edit update some Rosen database? So let's say I want to change the notes for Costa Rica. So how can I do this in BlackBerry devices so that it goes so that you can go after that on on the database, find it Costa Rica ro ro and changed the notes here for something else, or change the population for a different number? How can I do this? So really, that's what we'll give you an idea how we can use BlackBerry 10 devices in in construction with sequel light to mine, It's your data how you can store and retrieve some data in the local database for different type of application. That's really just a simple example. But if you are you building a notes application, how you're going to start your notes, your names, the daytime and self like that, these are all done true operation similar to what we're gonna do now. One thing important to note is that the several ways to deal with databases on Bagri devices you can either have a synchronous loading every database, which means that when I click for example, on on My Country, here on my continents are in North America, according to database. But it's going in in a synchronised way, which means that it's gonna quarry the database, get all the information, and then it's going toe upload. The less you there's also the Eastern Cornice Way, which is basically the the database is being queer is being quarried in a separate threat. So you have two threads to you. I and the database access that's being, uh, done separately so musically, how hard you work with that on the BlackBerry device. So basically, for the synchronous sex acts his first thing we need to dio we need to go to their base from the assets folder to file system. Now that again that assumes that you have uploaded a database with your application, you bundle it with the application, which is pretty much what I what I will do so inside my asset. I'm gonna put a DB here. Not a problem when you do this is that everything in the assets folder is read on Lee. Okay, so you have to move it from the asset folder to the file system. That's step one. Step two obviously, is to have different ways to open the database. We're going to use the sequel data access for that. And then after that, would you need to do see basically executed query. So whether you want to select some rose if you want to update some information, if we add those, this is what we're gonna do here in the query. And whenever we're doing a select where we want to write the results in the data model and that data model will be available to come out a bit the same way that we did previously. When we hear open this year when we actually had our data model here and it actually makes whatever we loaded from the data basis and C plus plus code, it will make it available to create Also could have it in you'll issue right in terms of data model will use one data model In In general, you can create a custom data model, but there's to show you really what we're gonna do, what we're gonna do. We're going to use what they called a group data model. Okay, so I'm just gonna hold penned a little look, Paige, on the development of buying Reda come website. So you go. So you have that P chair that tells you a bit more about the group. Do the model. So it represented ordered map of coup variant map objects. So really, what happens that when you open your database enquiry when you do select, it will return you a list of of all the results that you have prayed and that list you have to put it in your group data model to make it available to the amount so That's it for this lesson. Next lesson we're gonna start dealing with this were we're really gonna focus on the CPA's beside on the next lesson? Well, we'll create a class that we're going to call DB Handler. And that class here will be the one that give you all the allows you to do all these steps here. So more database. That file system opened in the base. Executed query, right. The results data model and make it available to him out. So we're going to focus on the class for next lesson. And then after that, we'll see how we can use them in the list. You other PDS and Kimmel. Thanks. 37. Lecture 37: Hello, everyone. Welcome back to black return development. So last session we saw how we can recreate read data from database and loaded into a list. Now weaken. We'll see how we can save theater in and database. It's actually really straightforward. And my keys here created a function update Country. Well, well. Input a quarry and will execute that. Cory. So really, all we have to do is we need to again have our people. Do you access? Object. So you see, I have it twice you can instead of recreating every single time. You could just have one as a global variable, if you'd like. It's really up to you. But if you if you go with the global viable, um, you do here, put it on top like this probably changed out of his name or whatever, and that will allow you to just call SC everywhere and use the same sequel Data access Object. Okay, so I have it here Then when When did you hear? All I need to do right now is since I'm doing an update. Quarry. I'm not expecting a list or any data in return. So I'm going to do is just to my execute, and I'm executing the query that is here. It's as simple. Is that okay? Now, what's that going to do? Is that whenever um yeah, is that whenever I'm calling update country from the from the Cama fall, I'm gonna receive my quarry here, and I'm just gonna execute it. I am. I want to know why I'm not doing the same thing as here. Where here I had I was changing my query. Well, I could do it Wont change anything, really? In my situation. So I could just go just go like this copy and paste it here. So I have my current quarry, but I mean, really doesn't change a thing for me. All right, so I'm doing it. This here and then you will see my camel falls I created to criminals. So I first of all of my info page, which is basically showing the flag on top and then have labels that will be showing the capital the area population currency in the actual notes. Okay. And then I have two buttons, one that is Goto Wiki Page and the edit page. So that will show the actual data for a selected country. So if you go back again to our country list came out, I remember we had that list view that recreated. I simply added the on triggered function here and what I need to do when I'm passing data to, um, to the other page. All I need to do is really make sure that you create a viable that would hold the current selected data. So we saw this previously. So what you do, you call your data model, and then it has a data function that takes an index path. Index path is basically when you click on the list I temp, it is the actual role of that item. Okay, so what? This will mean that it will means it will return you to full row into the of the database that represent the actual actual list item. So just for clarity ec and I'm gonna launch the applications, I can show you what it looks like. Take a second here. A little problem here. Okay, So so that. Remember when I read the database, I get the flag in the country and I get actual the whole row, so the country is the flags, currency. Everything is is red already. And it's available in my data model so that when I click on this, everything that has passed will be shown here. Okay, So I'm actually getting the data for the actual role in my list starring in and choose an item. And I'm passing to the I don't need a council log here, but, um, I'm passing to my info page, country and folk. My chosen item. I save it here as variant on top here, so that will actually give me the row of my list available for my next page. Okay. And in here, I can just do data that capital the same way that in my list I would do a list item data that country. Okay. So quite straightforward. So this is that This is really my edit page. My info page. Sorry. So this over looks like and then I have my edit button. Now here I have my notes so I can type anything I want. I can even change my population bubble block and to save it. So when I click on save what's happening in my edit code here, edit Kimmel on my save button. I have the unclipped update country. So it's gonna call the actual public country that is inside my d b and let us see pp And it's gonna do update countries. And it will set the capital because again, when I'm my own my headed page, I can change capital, the area, the population and the notes. So I'm gonna change my capital dot tax, which is my label here. My text. Feel sorry. Capital. Okay, my text. What we changed will be passed. Started that I'm gonna pass my area. I'm gonna pass my population in my notes where country is equal to their country. So it is gonna go to that very country in the table and store thes data actually update thes valuables inside the table. So again, really a little bit about sequel light, and that will happen. I will save it in the database So that, um So yeah, so Argentina's when I save this now, it won't be shown here because I didn't implement any refresh method, but I'm gonna pop on my page in my navigation stack. So what? I'm doing this. It's actually reading the database. So I was in Argentina And you have whatever called 1/2 whatever note I typed here. So it is available so you can see that it actually saved the data in the database. Right? So that's pretty much it in terms of showing how you can read and save data in a database and display it in the list. So I what I'm gonna do, really, they want to spend a lot of time on working on a gooey during that section because these are things that we saw in the past. So you can practice yourself, laid out the things the way you want. I just really showed you how you can actually query the database and return data and save data outside are expected to be able to create a page like that, but used the extra knowledge that you have now in order to create application that access databases. Right. Um, so that's pretty much it. So thank you for listening for this. Ah, lessen. The next one obviously will be. The code will be pat. I'll be You'll have all the chemo files and the CPP files. Actual project will be available to you. And then after that, will Ah, I believe in the next section. What we'll do is show you how you can built applications for several devices. Remember to several screen sizes and BlackBerry devices. So you need to make sure that you're actually using interface can work in different on a different speed. Right? Thank you. Thank you. 38. Lecture 38: this section will see how it can design application for different devices. It's quite important to do so because if you go on the BlackBerry website, you'll know that there's actually eight devices, and there are available right now for BlackBerry. 10. Uh, so you have the passport classic porch to porch designs with different skin size. You have to. That 30 does that. 10. The Q three to Q five and is also 1/9 1 Which is is that three, which is not shown here on that website because I'm gonna can Indian website right now. So obviously, what was happening is that for different screen size, you might not see the same information inside the screen, depending on how you coded your application, right, how you design your came out falls. So there's several ways to build user interface for different screen size, the 1st 1 of the easiest way. Actually, the easiest way to do this is to use static assets, so using static assets assets what you can do you can define in your Assets folder. You would create subdirectories, in which you would put, uh, Cuba filed for specific screen size. Okay, so say you want to do one for the Q five and and the Q 10 so you could do 7 20 by 7 20 All right, so 73 x 7 20 X and then you would create your Kimo files inside of that. So you put your main document all wait, continue that cream all cause I'm looking to be in my calculator here so that whenever you run this application, if it's running on the device that it's 7 20 by 7 20 Since there's a Q five, whatever KIMA files that is a village available here, it will use them. Okay, so what this will do? It requires you are ever to recreate you Karuma falls and designed and separately for different screen sizes. So you have here remained a camel that's under your assets folder that will be used for all the devices. But if you devices 7 20 by 7 20 you could have a different main document all here. But that means that you will have to redo the design specifically for a 7 20 by 7 20 device , so that could be a little painful to do. But that's one way to do it. and really, it's good if you want to have a different, quite different user interface for different device sizes. Okay, Another way to do this is to have subdirectories that actually based on the, um, on the layout. Okay, So whether it is in portrait orientation or you are was it on this portrait orientation or landscape orientation? In order to do that and I will refer you to the static assets. What page? Later on the BlackBerry website. But again, it goes through a directory that you need to create. And then, in terms of full name, you need to go with the design unit size of the device. Okay. And all that will be inside the Bagri website. I'm gonna give you and the resources. So what do you need to do? Is type men, the DW and then the face. Okay, so this here I will give you a folder for devices such as the bike resent 10. And is that 30 in portrait orientation? So 76 with 3600 to 12. 76 yet that's it. 760 by 12. 80. Okay, So anything you put in that will be used for a set owners at 30 in portrait orientation. And if you need another one for layer for the, uh, for the landscape orientation, then you would need to simply invert the numbers. Okay? So again, you would have men you've ever you. But now 1 28 eighth Ernie by 70 six, do you? All right, So what I'm saying here is that I will have the with off 128 and the height of 76 design units. Okay, so that would quit creating folders. And once again, when you run the application, if it is this device of this size in landscape, it will go here in portrait. It will go here. So again, you know, you would have to define your different huma files depending on the under. Using two feels that you're too high there on the screen orientation. Okay, you need to make that. Make sure you need to do that. If you wanna have a different layout or if you want to make sure that your layout makes sense when you actually rotate screen, okay, because you might be in situation where you it'd screen and you actually losing some some data that that are being shown on the device. Okay, So, as an example, if I would run my well, my courts should be done. Right? But this is what it would look at the landscape, but I could want to do I would maybe want to lay out things differently. Uh, maybe have all my weight on my buttons on the side here and have my label here on the side . I would need to create a directory for that. Okay. So thank you for listening again. Look at the researches of this lesson. You'll find the the link Teoh to the static assets were paid. I'll give you more information about that. All right, Thank you very much. 39. Lecture 39: the left wants or a second way to create the user interfaces from multiple devices is by using space quarters. And, well, we already saw this in the past when we were building our applications. And if we go back to our being my calculator application, you'll note that we used our space quota when we're defining every row here. So we had a space quarter When we're talking about the buttons here. We had a speech school where we were talking about the label, plus a text field here in here. So we saw that basically space quota divide up your row in several sections. So here what we did for reasonable from looking at by container height here, my mentor continued, has a label height and a text field of metric height here. So what I did, I had a space quit of one dato for the label in a space court of 2.0 to the zero for the text field. So what? This does it. Actually, when you add at this up, it gives you three. So it basically spits up to screening three and 1/3 ghost label and 2/3 goes to text field and the advantage when you doing this is that no matter what the screen size, it will already suspect that. So if I switch from all touch device to, ah, BlackBerry keyboard has a smaller screen well, you see that it's still respect this. No. What happen if I just removed space quarters? Well, you see what happened? It takes whatever space it requires, right? And you don't necessarily want that. Sometimes you really want to have things laid out in a certain way, so you can just do it this way. So that way you sure that for example, if you have, if you would change the label on top here, the label of weight and you add ah kind of crap while by using this piece quarters in the wake, continue in here, you make sure that everything is aligned okay and make sense in every devices. All right, so that's why you would use space quarters in ah, in your application to make sure that you screen is is actually laid out in a way that is not defined for specific for specific device. But the Ratter is really related to the screen size. Great. Thank you for listening. 40. Lecture 40: everyone. So in this lesson, we'll see how we can design different your eyes. But by using the design units so already talked about static assets, we start about. We talked about the space quarters the other ways, the other way to do it that we don't use yet in this course is by using the design units. Okay, Uh, basically, the design units are are mostly there because of the pixel density that is different from one device to another. Okay. And what this does is that when you define ah, certain hug and I said a certain either with or height or padding or margin, it's usually in pixels. So the problem is that you're pixel density from, for example, of BlackBerry. Passport is way higher. Comparative Blackberry Q 10 So deep adding in this example won't look the same. So every apart would put a patting here off 70 right? I don't want to put it out on a pretty between these two, so you could see better where looks like. So let's go here and put here. Um, that's metric. Continue. Yes, that's what I'm looking for. So let's put a 70 pixel patting it will compare that with the Q 10. So 70 here. So you just pacing here. But if I go on ah Q 10 device, you see how it is much bigger. So the way to solve this is like I said, using the design units and again output Ah Di did the link on the resources. But in order to do that, you have to use the U Y object in Cuba Mall. So you type you I dot And then you want to use design units or what he calls while snap design units. So you type as to you and you put that number in parenthesis is so you'll see me a few seconds. How it looks much more better when you're doing this. Um, a little problem here. Yep. So having in designing it, if I put it here too, let's say it too. So this is this briefing that I have here jump on my library. Passport spacing. It's exactly the same. Okay, so that's really the advantage when you're doing this. So that way you don't have discrepancies in your layout, and you're using interface with different devices, right? Thank you for listening. 41. Lecture 41: Hi, everyone. Welcome back to black return development in this section. We're going to talk about submitting your app to the black be up world. So in order to do that, there's a few steps obviously that you need to follow and in the first lesson will discuss about the bar descriptor file. Actually, when you create an application on in your romantics, i d. E. Every single project will have a bar dish dash descriptor dot xml fall, which specifies parameters and permission for identifying, installing and running applications on BlackBerry 10 os. So if we take, for example, to be, um, I calculated, are we created previously? You have here the bar descriptor. Same thing. If you look at my countries, you have the bar descriptor dot xml. So every single project will have that. So there's a couple of parameters that you need to to specify. Obviously under you, just five type. Sorry, You don't need to look at the source time, really, But let's say that you have approximately four times that you need to look at and make sure that the configuration is right here. So you make sure that you have a package name you can change that. Something else is not a big deal package version and package build. And that's important to know, because when you're doing upgrades in the future, you'll have to increase your baggage version and your package build. But he must keep the same package name. So that's really important in terms of the author information. Usually when you just click set from D block token, you remember when you create your talking in the past, right now looks like I don't have any. But if you were to configure a debug token, you would, uh, it would allow it would automatically important the, um, the author i d here. So usually that should bring up the author I d for you. So if you click on select certificate and signing belief, you go with other BA 12 and then you just import debug token. This one is at least one, and that should basically bring the author idea in the barber. Mantex fall. Right, this cake okay in and you have it here, all right. And that's pretty much it. If you have here, use the e p a level from project settings that works fine. You don't need really to deal with that. So a B I level is if you're going for $10.31 10 3 or whatever releases of bribery 10 OS, you want to cover with your application. Next, you have the application tab in the application tab. You will define theatric buttes for the application. Ah, entry. So what? In what category you want The application to be in the APP world? What permissions you want to give you? Application. What are the icons and splash screens that you want tohave So everything is set up here. You can even change the name that you want to show in under the icon on the BlackBerry device, right, so that something can do easily. So you have here category and categorize. You can read about this. It's pretty easy orientation. Do you want to have your application to be Oto Orient? So points in portrait. That's one side, but he able to to to turn it to to ah, landscape or you want to have it fixed. Landscape or portrait? That's something you could do. There's really a lot of things here. You have some themes is while default, which is always the bright one, or you can select a dark team. There's really, really that's something that is easy to, um, easy to configure. But that's something you need to define if you want something different. Otherwise, you could just go with the default values here and you're fine. The other thing that is really important to look at is the permissions. Okay, sometimes some of your application sometime might want to access the contact list. You might sometimes like, have access to do the Internet, for example, so you might wanna have the Internet here as permission. So all these will need to be checked in order in order free application toe work properly. What this does is like with any second, would any mobile phone with its IOS, android or windows, even basically, when you're installing an application, you have always have the permission page. Let's the user No. Three user. No, the permissions that you want the application toe have. So if you want the application to be able to used a contact class, use BBM. Use a Kander. Everything will be shown to the user and then usually can select, can choose if it wants it wants and solid or not Me, too. Then here you have the icon Default icon is 1 14.1 14 But always pick on device icon sizes , and you have different sizes for the different devices. You need to make sure that you provide that in order to have your application for every single devices. OK, same thing for the splash means so Splash screen is the beach that is being shown when you launch the application, you have different sizes, and you need to provide as well splash screens for these if you're too, if you were to use ah, special means in your application. Otherwise, it's just a blank, BlackBerry black page that will be shown great tools that I use to create my splash screens or my icons that should be through them. You re go with the one that you like. I like to use this Catch three, which is works only on my Carver s. So you need to make sure that you have a Mac, and basically you can create mock ups of the application. It's mostly for IOS, but really you building icon. So it's that it's not only for IOS right so you can create amazing icons with rounded corners square whatever. It is important images and configure these icons the way you want them to look look like really easy to use. Otherwise, there's also gimp, which is kind of a free version of photo shop. It is a real bunch of packages that you can use in that, and it's free so you can have it a Lennix, Mac or Windows. It has similar into face than, uh, then the one in photo shop. When I'm saying similar, it's not exactly the same, but feature wise. There's a lot of similar features that you'll have in gimp so we can create the icons and your splash means in that. Otherwise, you also have full shop, which I think everybody knows. But you have to pay for that. But now they're they're out with monthly payments. So with the creative cloud, if you heat, look here at the bottom $20 U. S. Per month, depending where you are. Price may be different depending of the country, but it gives you access to photo shop, and you can use it for a couple of months. Design your icons, design your splash screens or even if you want to make markups for your father for your application. All right, then you got the assets folder here, so really, Yes. It's folder. How you need to do here? Make sure that all the assets that you have, so in terms of images, if they're not under the assets folder, you need to make sure that they're all there. So if you have another image that you imported, see here you have the eye contact. Angie, it's not inside the assets. It's under simply the project file. So make sure that you add them here. Okay, Pretty easy. Then you got the localization here. If you don't have localized icons and splash screens, different languages for that, that's easy to do. And then idea. And you have the source file here that basically has all the information that you defined that you selected in the previous tabs, right? Thank you. 42. Lecture 42: Hello, everyone. So, after editing your Bardet descriptive fall, well you need to do is to package your application. Basically, when we say packaging your app or you would be doing you creating dot bar file, which is the application Father, he will be posting to the APP world of BlackBerry. Now, the steps to do that are really simple. What you do, you go back in your Morant ex I d. You right? Click on being my calculator, and then you click on export. Okay. Now, once you're in the export window here, what you need to do You going to BlackBerry and you select release built that you want to export to buy every application, make sure you configuration is through device release and you can select the folder. You want it to be okay, so you can export it to whatever before there inside that. Then you simply click finish and remember, check here. I have built before export. That was check. So that's gonna build it and then export to release built, and I'm gonna wait for it. Then we're going to check out there The arm folder here. Oh, hold that, Ellie, that seven v seven. And we have it here. So that's our application filed. Thank you. 43. Lecture 43: Hello, guys. So you edited your bar descriptor dot xml foul. You also package your app. Now it's timeto submit it to the Bagri worlds. We need to connect you vendor portal for bribery world. And you see, how would he have the application here? But just to show you again what you need to do, you need to click on new products. And you would need to then drop your bar file here. So I already have it here. But say you want to drop it. You can go ahead and drop the file here Already have it. Right. So in here, you would define Ah, locally. So how many languages you Which language will recover the devices This Well, not make sure that when you select the devices you also have the resource is of such as the icons and the splash screens available for these devices. Size, especially for the icons. So it looks like a bunch of of devices here. Okay. And then you think the me my voice. Okay, that's pretty much it. Here. You can provide some details here, like description. Ah, the expert control, third party content and Bob about all that thing and then you would just save. Okay, so this I think he's gonna fill year because I already have it. So once you have this done back into products all right, this is the one here. So once you have this done, what you need to do here, you could see have all that to feel, so releases has already filled. You need to fill your detail speech. So you have the name of the application you need to choose in which category you want. Tohave it. So that said that we're gonna put it in, Um, not education and health and fitness. Yeah, you go. Health and diet. That's a good category. Content reading. You need to do this. See, you have a red circle here, so you need to basically set up there. The content. Great working. So if your application is for adults only. What kind of you need to fill this? Okay, so you gonna select whatever here in our case, it's It's general, so could be accessed by anyone. Okay. So everything here and then you cook, submit and to bring you back to your BlackBerry vendor portal. Okay, So see, content Rig reading is G for general, just like the license type. If you have the habit, pay their free or if you want, have subscriptions. So say you go a tree. Yet it was a Really If you have magazines, stuff like that, but yeah, go it free, for example. Um, do you have distribution restriction? Yes or no? And just like that, this Q. If you'll have sq for application different than the one that that's here, you can put it here and then whatever connection. If you want to users to be able to access the Facebook page of the application in the Twitter account and things like that, you need to put it here. And then you have this section here privacy policy. You select yes or no. And then you say that the last thing is to go into listing and listing. This is where you will have to drop your icons, you feature image and some screenshots of your application. Okay, so for that artist thing, you need to have, um, by cons of this size. At least that's for the defaults. If you select Bagri 10 yet that's it. That's what it defaults in English. So you see here you need a Nikon that is four by 4 80 by 4 80 A feature image of 9 1920 by 11. 86 then some screenshots of your application. So let's go ahead and fill that. I'm gonna just put Brendan images and you see how it looks like. Okay, so I have my images. I'm gonna drag and drop. So where are they? He go. So I got my being my here not being itchy. Really simple images that I created. But by 1920 by 11. 86 then I have a small screen shot here that's pretty much shaped. You put a small description here. A simple being. My coca later. This is done through. Then you see this? Now you're this thing is save as well. Now, once that your details you listening releases air done on. You need to do you go back to a product page. You have ubi mark a clear here, expand and under more. She have three check marks. They're all green here. You would click send for riff. You were gonna do it Some things. I want toe fixed on that being Michael. Clear. But once you have your application, you fill details, listening and releases you click sent for review and that will send your application to BlackBerry or the real review it and let you know if you can publisher Not if it's a good to go. It will be published a son of the give the approval and usually takes a couple of hours before you can actually see it on the on the BlackBerry App world. All right, Thank you.