Developing iPhone Web Apps Tutorials
Parts/Behaviors & Stack Layouts / Adding a Behavior to the Button
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 / Adding a Behavior to the Button)
Now it's time to implement this button. What I want to do is implement this button so that if I click the Circle view button, I will go to the Circle view oddly enough and then I'm going to come back and implement this button, Square view, so that when I click on that, I will come here. So I will be able to switch back and forth between these two views by clicking not in the navigator over here, which of course is not available when the app is running, but by clicking on these buttons which will be available when the app is running. So that's what I want to do now. So let me select this and in order to do this, what I will have to do is add a behavior to the button. So I come up here to the inspector window and come to the behaviors pane and it's on the on click event that I want to intercept and I want to build a handler for. Now, I can come over here and you'll see I can type in the name of a handler but I can also browse the handlers that exist already to see if there is one that does what I need to have done. And if I go through here very slowly so that you can read them, you will see that there isn't one that's going to take me to the Circle view. Notice here some of these handlers start with an underscore in their name and that is to indicate that these are private Dashcode. Don't modify them. You can use them. More often you call them from your own handlers. So that's what I've got over here so I want to do an on click handler and it's going to be a new one and I'm going to call it Circle View. And two things have happened as soon as I pressed Return. I'll hide this so you can see. First of all, the code down here, the source code area has popped into view. I can hide it, show it and in fact I can hide the canvas so I have an entire window here or an entire pane in the window just for my source code. But most of the source code is fairly small so I can just put it here and see both of them at the same time. This is the shell of that handler. It has a comment in it, insert code here and that's what I'm going to do. Now, I said I wasn't going to write code yet so it may seem to you as if I'm about to write code but in fact I still am not going to write code. I need to customize some code that already exists but it's very simple. You don't need to really know anything about JavaScript or coding or syntax in order to do that. I am going to move down to the next line and I'm ready to come up here to the library and now instead of looking at parts, I'm going to look at code to see what code snippets are available and I can scroll through these to find something that might be useful to me and I can use it as a model, I can Copy and Paste it in but I can also scroll down here and see that set, I don't want get, I want set stackLayout current view will set the current view of a stack layer. This is the code that I want. I can copy and paste it or I can just drag it in. And now what I've got here is, I'll close the library and in fact I'm going to hide the canvas temporarily so that you can see this. I don't need the comment that says insert code here so I can get rid of that and I will take the comment that says set the current view of a stackLayout and what I'm doing here and again, you really don't need to know very much of anything about programming because the comment here tells you what you need to do. I'm going to use the Get Element by ID function to get an element from that view with the name stackLayout. Now, by default, a stack layout part has the name stackLayout so this is going to, this line of code is going to return a reference to this object. Let me hide the canvas now. So at this point the variable stackLayout will have this stackLayout. I have a line of code here that tells the stackLayout to set the current view to be View 2 and I have a comment here that says replace with ID of new view. Now, so instead of View 2, all you have to know is that I want to go to this view so I'll just double click here and change View 2 to be Circle. And that is the code that I need. If I want to really be fussy about it, I can indent it a little bit. I don't need to worry about replacing with the ID of stackLayout because I've done that. I've already done this replace and now the code is lined up and all I had to do was set the ID of the current view that I want to go to and I might have had to put in the name of the stackLayout that was created over here That's all that I needed to do and now I have a button that should work.
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
