New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Flex 4.6 and AIR 3.0 New Features for Mobile Apps
Illustration by Don Barnett

Using master/detail views


From:

Flex 4.6 and AIR 3.0 New Features for Mobile Apps

with James Talbot

Video: Using master/detail views

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Flex 4.6 and AIR 3.0 New Features for Mobile Apps
1h 49m Intermediate Jan 30, 2012

Viewers: in countries Watching now:

Join James Talbot, as he reviews the new features in Adobe Flex, Flash Builder, and AIR for mobile application developers. This course covers the Spark components for building mobile user interfaces in the Flex SDK, and the AIR support for native extensions, which enable applications to use parts of the host operating systems that were previously unavailable. The course also describes new testing and network monitoring capabilities available with Flash Builder 4.6, and the ability for Android applications to be deployed without relying on a separate runtime.

Topics include:
  • 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
Subjects:
Developer Mobile Apps
Software:
AIR Flash Builder Flex
Author:
James Talbot

Using master/detail views

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.

There are currently no FAQs about Flex 4.6 and AIR 3.0 New Features for Mobile Apps.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flex 4.6 and AIR 3.0 New Features for Mobile Apps.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.