- View Offline
- Controlling adaptable tablet layouts
- Controlling view hierarchy
- Using 16-bit and 32-bit render modes
- Using the Date Picker, Scroller, and List components
- Adding a splash screen to a mobile app
- Using native extensions for iOS and Android
- Testing with FlexUnit on Wi-Fi
- Packaging the application for release
Skill Level Intermediate
The SplitViewNavigator is a new Flex 4.6 component targeted specifically for tablets, and it can be used when we want to create a master detail view inside of our application where the master view typically serves as a source of navigation and the detail view displays the results of the action taken on the master view. The master view is typically the left or the top of the screen and the detail view is typically the right side or the bottom part of the screen depending on the layout of your application.
A great example of this type of application is your typical mail application, for instance, the Mail application that ships directly with the iPad. Again, very different than a mail application on a smartphone, and this component is targeted specifically at tablets. Let's explore how to use this new split navigator component. The first thing that I'm going to do is I'm going to create a new application, and I'm just going to say New > Flex Mobile Project and let's just call this SplitView. And again, you can use your default location.
We're not going to actually utilize any student files here, and you can utilize the default SDK. So click OK. And then let's make this a blank application, which is better for tablet devices. We won't target the BlackBerry Tablet OS, but we will target both Google Android tablets and of course the Apple iPad, and we're going to say Automatically reorient and Automatically scale the application. Make sure it's set to 160 dpi. Click Next. Again, we're not going to utilize an application server type here. Click Next again, and here's your SplitView.mxml.
Go ahead and click Finish, and let's go ahead and just add this new component directly to our application here in Flash Builder 4.6. So the first thing that I'm going to do is just reference my spark namespace and I'm going to simply say SplitViewNavigator. There's my new SplitViewNavigator component. Let's give this an id svn, like so. Let's specify the width. This is going to be 100% of my application. The width will take up the entire real estate that I have available in the application, and let's do the same thing for the height.
So, I'll say the height will also be 100%. Now, inside of your SplitViewNavigator, let's add in the ViewNavigators that we want to appear. So again, in example of an email application, the list of emails would be on the left side while the details of the email would be on the right side, and each one of those would be separate ViewNavigator components. So, here I'm just going to simply say s: and instead of saying SplitViewNavigator, I'm just going to simply say ViewNavigator, like so. I'll give this an id of leftNav, just like so, and then I'll specify the width of this is 30% and the height of this is equal to 100%, just like so, and there's my ViewNavigator.
And then let's add in one more property here on my ViewNavigator. Let's just specify the firstView, and I'm just going to say the firstView is going to be views. We're going to have to create that package in just a second. I'm going to say views.LeftView like so. That's going to be the first view that's displayed inside of that ViewNavigator. Now let's create one for the right navigation. So, we'll do exactly the same thing. I'll just create another instance of the ViewNavigator, just like so, and instead of calling this leftNav, you might guess, I'm going to call this rightNav. And we're going to have this say right here width="100%" and the height is also equal to 100%. And then the firstView here that we have is going to be set to views.RightView, just like so.
So, that's going to be the first view. Again, we haven't set that up, but we will set that up in just a moment. So again, close that tag. You'll see it automatically adds in that end tag of ViewNavigator. You should have your SplitViewNavigator right here. Just go ahead and save that and make sure that it doesn't return any errors, right, and of course, you see that I will get the error because it doesn't know my left view and my right view, but I've just saved that, and again I have to define those now. So, let's go ahead and define that. So, create a new package here.
Just say New and go down here and just say Package. And let's call this package views and click Finish. Okay, so there's my views package, and then let's create a new view inside of this package called LeftView. So again, I'm just going to create a new file here, so I'm going to say New > MXML Component. That's in my views. And let's call this of course, LeftView, just like so, and then click Finish.
You should see you have your views package here and you've created this LeftView.mxml inside of that package. You'll see the title here is automatically set to LeftView. Let's just add a space so it looks a little prettier when we have that. And what I want you first to do is inside of this here, let's add in a List control. So, I'm just going to say spark List, just like so. I'll assign this an id of list, and again I'm going to make this take up my entire view.
So, I'm just going to just say the width is 100% and the height is also 100%, just like so. Then I'm going to add a click event just like so. So, I'll just type in click, and then I'll highlight click. You can also just of course type in Ctrl+Space and then just say Generate Click Handler and you'll see Flash Builder will automatically add in the script block and it will create this clickHandler for you right here. So, there's our clickHandler. And now let's just populate our list with some different devices so we can see how this works.
So again, very simple. And what I'm going to do is I'm just going to simply add in a dataProvider property. And again in real life of course you could load this utilizing HTTP service, utilizing a web service. For now, we're just going to hard code it so we get an idea of how this component works. So, I'm going to say dataProvider. So, I'll define my dataProvider property, just like so, and then inside of that dataProvider I will simply define an ArrayCollection, just like so, and then inside of my ArrayCollection I'm going to simply define a bunch of strings that reference different devices.
Now, I've actually included this as a code snippet, just to avoid a lot of typing. So, you can either type it in or you can go to your exercise files here, go to your snippets folder, and you'll see we have my 1_02_snippet. Go ahead and just open that up and just copy these list of devices directly to your clipboard like so, just to avoid typing. If you like, you can just manually type that in, and I'm going to just go back right here to Flash Builder. And inside of my ArrayCollection, I'm just going to paste in that code snippet there, just like so, and you'll see it just goes ahead and puts in some various different devices.
Make sure that that fx string, that didn't seem to take when I pasted in, so just make sure that that tag is closed and you should see that that works fine for our initial view. So, that's just going to simply, on the left-hand side of the screen, it's going to display those list of different devices. So, now I'm just going to hit Save. There's my LeftView. Now let's create a RightView. So again, same process here. Just highlight your views package, say New, just like so. Choose MXML Component.
Make sure that it's based off of the view class, and just simply call this RightView. So, I'm going to say RightView, just like so. It's going to be based on spark.components.View. I haven't specified a layout here. And then just go ahead and click Finish. So there is my RightView. So, do the same thing. Add a space for the title so it's a little prettier when you have the RightView there--and in fact, this isn't going to be our right. Let's call it DetailView. That makes a little bit more sense, because this is going to be the details about each of the different devices there.
So, we have that, and you can see the Declarations block there. And then what I want you to do is directly below your Declarations block, let's just add in a layout tag. So, I'm just going to simply say s:layout, just like so, and then what we're going to do is we're going to define a VerticalLayout. And I'll simply say paddingTop is equal to 15 pixels. The paddingbottom is equal to 15 pixels. The paddingLeft is equal to 15 pixels.
You can kind of see where I'm going with this. The paddingRight is also going to be equal to 15 pixels, just to set up some spacing, and then we'll just define a gap here between that of 5 pixels, just to set up our real estate here. And then I'll just say the horizontalAlign, let's align this to the center, and then the verticalAlign, we're going to align this to the top here, just like so. Make sure you close off your layout tag.
And then what I'd like you to do is just go ahead and define a label tag. Very simple. So, I'll just say s:Label. We'll define our text property, and we'll just say, "Click on a location on the left to explore," something like that. So, we'll add that in, as you see there. And then we'll define a visible property. We'll set up a binding here that'll either be true or false, and I'll just say data is equal to null, and then we'll put in a true, we'll put in a question mark, and we'll say true:false. And then we'll close the binding, and we'll set that up, just like so, and then we'll add in another label control and I'll say text="Information about, this.data. And then I'll say visible= and again, I'll set up a binding by using the curly braces and I'll say data not equal to null.
Then I add in a question mark and I'll say either true or false like so, right inside of the binding, close that, and then that will set up your label control. And then finally, I'll add in a TextArea component and I'll say TextArea, and the text here will just simply be description of device, just like so. So again, just defining the right-hand view of our SplitViewNavigator component.
So, now I'll save that. You should see you now have your RightView and your LeftView inside of your views packages, and then you have your SplitView here, with it being referenced with the two ViewNavigators being referenced. So, let's go ahead and test this actually and see how this would look on an iPad. So, I'm going to click on my Run. I'm going to set up my run configurations. I'm going to choose my mobile application. I'll set up a new run configuration. I'll choose Apple iOS. We'll test it on the desktop here, and let's see how this would look on an iPad.
So, I'm going to click on Run, and what we should see is, again, you'll just see in your left-hand view the different devices, and you can click on that. And then of course, if we had the data and that sort of thing--I didn't want you to type too much here--but then you could of course pass that information directly to your DetailView component here and be able to pass that information back and forth. That's very powerful. And just to see sort of how the SplitViewNavigator component works and how you can use it to populate data was the point of utilizing this walkthrough.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.