Developing iPhone Web Apps Tutorials
Parts/Behaviors & Stack Layouts / Working with Transitions
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Developing iPhone Web Apps / Parts/Behaviors & Stack Layouts / Working with Transitions)
Now, I've got the buttons working on these two views, square and circle and if I want to be really precise over here, I can come over here and rename these buttons so this button is the Square view button and it wouldn't hurt to name it Square View Button. This is the Circle view button and I can rename it over here. These names are not going to be seen by users but as your app grows and they are going to grow, it makes it easier if you are not using default names so that you know where you are. A little bit more of an explanation of what you're seeing over here; let me open the inspector. Notice that you have a little three-dimensional box here and you have a three-dimensional box here on the behaviors tab for the inspector and what that means is that there is a behavior attached to this object over here. It's the same icon over here added on top of that. If I go to the oval shape and I'll just temporarily add a test behavior, again, as happened before, it's going to be the shell of the function is going to be added down here and I'll have that little icon here. I'm going to get rid of this so there is now no behavior here and the icon is removed from here and I'll get rid of that code. So this gives you an indication which of the objects in your app have behaviors attached to them and so those are going to be the ones that are going to be driving the actual behavior of the app and what happens to it. So I've now got these basics working now and let me get rid of the source code. So I can go back to something that I showed you before and click on the stackLayout. Notice, by the way, that when I'm clicking on objects here there's some objects, if I click over here, I'm getting the circle view but if I want to work with the stackLayout I've got to select it over here because there is no visible version of it here that doesn't have a view in front of it. And I've got these two sub-views here. These two actually were created when I created it but I can add another one here and these are the sub-views of the stackLayout object. Going back to what I said at the start of this section, when we were using the browser template, I pointed out that we had these sub-views and you were not able to modify the transition. It said push but you couldn't change it because the browser template hard codes some functionality that overrides the basic raw functionality that you have when you're working with the objects themselves so the stackLayout inside the browser template doesn't let you change the transition but now I'm working with a stackLayout all by itself, not in the browser template and I can change any of these. So for example, if I want to dissolve and I can change the duration and the timing of it. Let me see what happens here when I come up and run it. And notice here I still have that other transition but here I have a dissolve and if I stop this and come here to the stackLayout and the dissolve and I'm going to change it to a very long period of time so it's more obvious and the circle I'm going to change to a let's say slide from top to bottom. That should be obvious. I don't need to change the time so let's see what happens if I run it now. I'm sliding down from the top and I have a dissolve. I'm getting both at the same time at a certain point but you can see how you can change the transitions just by going into the attributes of the stackLayout in the inspector. So all of this is available down here if you want to experiment with it and that's the best way of handling this. Experiment with the transitions to see what they look like but do remember that most people are used to the push transition that is the default in these cases. But this is what people are going to be looking at and if you use a different transition it can be very useful. Don't just throw transitions around so that everything happens in a different way. There's no point to that because you may also wind up with things such as I demonstrated where you wind up with two views visible at the same time. What you want to do is you want to have as much as possible the transitions be transitions that users have seen on iPhone and you also want, when you are varying and going away from the push, you want a transition that has some meaning so that all transitions that let's say use a dissolve mean that you are going into a certain area of the app or so the transition, even if people don't really understand, well, why was there dissolve there rather than a push? They may not be able to put it into words but what you've done is you've said there are two types of transitions here, two visual representations and they have a different logical meaning.
Tutorial Information
| Course: | Developing iPhone Web Apps |
| Author: | Jesse Feiler |
| SKU: | 34075 |
| ISBN: | 1-935320-89-0 |
| Release Date: | 2009-12-31 |
| Duration: | 8 hrs / 103 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
