Developing iPhone Web Apps Tutorials
Building a Multi-Level Browser / Drilling Down to the Third Level
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 / Building a Multi-Level Browser / Drilling Down to the Third Level)
I've wired up the next region so that we now have something that is drilling down to all three levels and I'll walk through with what I did to add this next region in and it's just a matter of doing the same thing for the remaining five regions and you'll have the app put together. As I've mentioned there are other ways of doing this and the completed app is in the Work Files either on the disk or online, depending on which way you have the tutorial. So you can look at the code and see how it works with all of the data in it. But what I've done now is you saw before, I started with the northeastRegion and I can drill down to the third level and get down to here and get to the parks here. I can go back up. Now, what I did is to do the same sort of thing I did for Northeast in intermountain and I can come down here to the third level and come up here. So what I have is a multilevel, in this case, a three-level browser: top level, second level of an index and then details down here. This structure will work for any number of ways of presenting information and what happens is, let's go back and look at, I'll stop the simulator. We'll go back and look at the files because remember we had the regionData file, which is the basic file. This has my top level structures, in this case, the regions of the country. And in this case, what I did is for each region, I've given it the name in the data file. I'm picking up the name of the view that I want to go to when that region is selected. So this is the linkage there between the top level and the second level. When I come down to the second level, which will have for example intermountainData in it, that's the intermountainRegion, displays intermountainData. Here is the intermountainRegion and here is the data within it. This is displayed, first of all, in the intermountain list, that is the intermountainRegion up here with this List View and then this is displayed again when I go down into detail. I display both fields, so I really only need two sets of files. I need the region file, this the top level data, and then I need a set of files for each secondary level. And these files contain the data, such as the name and a second piece of information, such as the location, that is displayed in the Detail Level. So, in other words, to recap, let's come back here and look at this. This data is pulled from the regionData file. This is the top level here. Let me just make this a little more visible so I can move things around. So the top level gives me the names here as well as the views that I go when they're selected. Then for each of the second level items, I have the name of the region. Then I have, within that, I have the name of each park. So here I have the entire dataSource for the intermountainRegion and then the details for each item within it. If you have a structure like this and you use this data structure, this has three levels: the top level, a secondary index level and then the detailLevel. In that case, you will have two sets of files. You have the file that contains the information for the top level, which is this file. And then for each of the data elements on the secondary level, you have a second dataSource for that secondary level, with the details, the names which are used here and then the name and some other information such as the location that appears in the third level. So the point is that for this type of structure with three levels with the third detail, you need two sets of files: the top level and then one for the secondary. It's the secondary level that contains the list for the secondary data, as well as the detail information. And how did I implement it? What I did was to copy. I had northeastRegion and Northeast detail and I simply copied them and created the data sources for each one and wired them up. It's a very simple matter. You've seen it before. I'm just connecting the particular binding control to this field here, or this field here and this field here. I did have to make some changes to the code. So let's go into main.js and the changes to the code are trivial because what I needed to was when I came down here to, this is parkItemClicked, this takes me from. I go into the top level and I click here on a region and that takes me to the list of parks for that region, which I'm doing, remember, by selecting a view. I'm picking up that information, the name of the view I want to go to, from this level. And then from here, I go down to the third level with the details and here, what I'm doing is I had a function called Northeast Item Clicked, which sent me to the specific item for the Northeast. I just copied that and made it intermountain Item Clicked and the only change that I have to make is the name of the list in this section. Here it's bound to the list row template. The name of the list is now list2 rather than list1. I make this change and I change, get element by ID because each one of these can have its own view. And that's how I do the multilevel browser.
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
