Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- 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
Flex 4.6 allows developers to build better cross-platform mobile applications by utilizing Objective-C libraries on iOS and Java libraries on Android, which opens up a whole new world of possibilities for mobile Flex projects. Mobile Flex projects no longer are limited to the capabilities of ActionScript. You can do anything that is natively available on the device simply by calling a native extension. For example, our application can now access native features like notifications or the calendar or vibration, all things that we couldn't do directly from ActionScript.
Flash Builder provides complete support for managing and packaging native extensions. There are many pre-built extensions available on the Internet that you can download and utilize in your Flex project. Here is an example available on adobe.com's dev net site, and you can see there are a bunch of different native extensions available, both for the desktop version, including Mac OS X and iOS and Android here as well. So we are going to utilize some of these, and we going to get an idea of how these native extensions work.
But hopefully by looking at this site, this'll open up some of the possibilities. For example, here's how to get the Battery status. Here's how to access the ICU globalization services. Lots and lots of very, very powerful things. So let's explore how to use a native extension. So what I am going to do is I am going to go back to Flash Builder and I am going to simply just build a new mobile project. So I am just going to click New > Flex Mobile Project, and let's just call this NativeExtension. Again, you can either use the default location or you can save it wherever is appropriate. And here's our default SDK, so I am just going to click Next.
We will just create a blank application here, and make sure it's set to 260 dpi, like we have been doing. You can set it to automatically reorient and it will automatically scale this application for different screen densities. Go ahead and click Next. We won't use an application server type here, so just choose None or Other, and then click Next again. And you'll see there's a new setting here in Flash Builder 4.6 called Native Extensions. Now just as I said earlier, a native extension is packed up as an ANE file, so we can just add this ANE file directly to our project.
So go ahead and click on the Native Extensions here and then click on Add ANE, browse to your exercise files here, and inside of the exercise files, under Starting, you'll see we have the Vibration ANE here. Now for those of you who don't have access to the exercise files, you can download this from the dev net site that we looked at earlier as well. That is available. So again, it's a little bit different, but it will enable you guys to follow along here. So then go here to the Vibration and you should see the ANE file.
Now this is the native extension. This is the SWC file. This is the text file. We are going to talk about how to build all of this so that you can build your own native extensions but for now just choose the packaged one and click Open. That adds this native extension directly to our project, and you'll see here that in fact I'm getting an error and this is an important learning point, but you'll see this ANE does not support the BlackBerry tablet OS. Now the really nice thing is Flash Builder will tell me if it doesn't support this. So again, I have the native code for Apple iOS, and I also have the native code here for Android, but there is no native code for the BlackBerry.
And again, Flash Builder tells me that. So go back to here and just uncheck the BlackBerry Tablet OS, and then we won't be supporting that. And notice that error now goes away, and you'll see that it's marked with a green check mark. So again, very nice that Flash Builder actually tells me that that's not supported based on my project. Click up here and you will see of course you have your library path, and then click Finish and you'll see it builds us our project here. Directly after the declarations block, go ahead and add a spark button control and assign this a label of Vibrate Phone.
So I am just going to click here, and it's going to say Vibrate Phone. So ActionScript doesn't have the capability to actually vibrate a device directly. So we've written a native extension in both Objective-C and in Java--Objective-C of course, for iOS and Java for Android. So we have our button here. It's called Vibrate Phone. And then what I am going to do is I am going to go generate a click handler, okay. So you will see I just type in click. It says click interactiveObject. For those of you that it didn't appear, you can just press Ctrl+Space and it will appear. So choose click and then generate your clickHandler. And again, just as we saw earlier, Flash Builder will automatically generate us the script block and the clickHandler.
What I want you to do is import the native extension. So all you have to do is just type in the word import, say com.adobe, and then you should say, see nativeExtensions and then import the Vibration. And you'll see that that is automatically introspected by Flash Builder, because that's what we added when we created our project. So this will import this native extension called Vibration. And then also add an import, because we are going to use the Flex event inside of our code.
So just say import mx.events.FlexEvent. And then, this of course, will be executed when the user clicks on that button. And then what I'd like you to do is just inside of ActionScript, I want you to create a new variable. Let's call that variable vibe, and we are going to type this as the Vibration that we just imported from our native extension. So again, cast that as a Vibration, perfect, and then just add in some conditional logic here, where I am going to say if the device supports Vibration, so here I will just say Vibration, if Vibration.isSupported, and you will see that's a Boolean, so I can just test on that, then execute the code inside of the braces.
And what I am going to do is I am going to create a new Vibration, so I am going to take my vibe variable that I created. I am just saying new Vibration, and then I'm simply going to utilize the Vibrate method that's inside of the native code. So I am going to say vibe, and I am going to say vibrate. And you will see that there is a duration that this method is expecting. This is how long you would like that vibration to last for. So in this case, I will say 2000 milliseconds, and that's how I can access the native code here.
So you then just click Save. You will see of course that I forgot here to close off my button so make sure you close your button tag, and again save that, and what I'd like you now to do is just setup a run configuration, so make sure that your device is currently plugged in, okay. Set up a run configuration, choose your mobile application, and then I'm going to test it on the device here, and I'll choose Google Android to make this easier. Okay, we will say Google Android, I will say On device, and I will click Run.
Make sure that your device is installed and you should see that this now runs on the device. Let's go take a look at this on an Android phone.