In the past section we saw how to design the view and set the basic things up. Now, its time to do some coding. Before that, to check whether everything are Ok, press the ⌘ + B button to build your project. It may prompt you to save the project. If it does, click the Save button. The build should succeed at this point. If it fails, then go and check the logs or tell me the error in the comments section, I would surely help you out!
Now, back to business. We need to dynamically update the values in the UI. To attach this with the code, we have a binding object defined called as IBOutlet. Using this object, we would be able to set stuff in the code and see it change in the UI. Looks magic. To start binding the UI components and the code. Click on the Editor icon the right top side to see both the Interface Builder and the Interface file side by side.
Select your component on the UI - the height label. Hold down the control key and draw a line from the component to the Interface definition, you should be seeing a line coming up automatically for it to be inserted as shown below.
Lets name that IBOutlet variable to be height. Do the same for weight, bmi and the result labels. So, we are done with defining our binding variables namely the IBOutlet. Now whatever change you do for these outlets will now be reflected in the UI. We have one more thing left from the hooking up perspective - the Sliders. We need to assign an action when we slide the height and weight sliders. It is pretty simple. Select the height slider, choose the properties from the side and click on the Value changed option and drag it to the interface code. All you should be naming here is the method name which would be height slider. Note, you do not need to press Control key as we did for the Outlets.
You would need to add a couple of more methods in your interface file. The final code would look something like the following
Cheers!
Braga
Now, back to business. We need to dynamically update the values in the UI. To attach this with the code, we have a binding object defined called as IBOutlet. Using this object, we would be able to set stuff in the code and see it change in the UI. Looks magic. To start binding the UI components and the code. Click on the Editor icon the right top side to see both the Interface Builder and the Interface file side by side.
Select your component on the UI - the height label. Hold down the control key and draw a line from the component to the Interface definition, you should be seeing a line coming up automatically for it to be inserted as shown below.
Lets name that IBOutlet variable to be height. Do the same for weight, bmi and the result labels. So, we are done with defining our binding variables namely the IBOutlet. Now whatever change you do for these outlets will now be reflected in the UI. We have one more thing left from the hooking up perspective - the Sliders. We need to assign an action when we slide the height and weight sliders. It is pretty simple. Select the height slider, choose the properties from the side and click on the Value changed option and drag it to the interface code. All you should be naming here is the method name which would be height slider. Note, you do not need to press Control key as we did for the Outlets.
You would need to add a couple of more methods in your interface file. The final code would look something like the following
Cheers!
Braga
No comments:
Post a Comment