Click on any phrase to play the video from that point.
[ADOBE®DREAMWEAVER®CS5.5] [PHONEGAP: CREATING A PROJECT]
Hi, I'm Scott Fegette, Product Manager, for Dreamweaver.
I'd like to talk to you a little bit right now about setting up a project for building a PhoneGap application.
As you know, PhoneGap was integrated into Dreamweaver CS5.5 as a way to help you
really quickly build native mobile applications from Web Standards Based Projects.
So we've got a jQuery mobile project here--I'll turn on my views
so we can actually look at it in context, and what we'd like to do
is start packaging this up for delivery via PhoneGap.
Now, this is an already built application.
If we were starting out scratch, all you really need to do to set up a project
is create a new Dreamweaver site for it.
A PhoneGap application is essentially built from a site.
So we've got all of our site files here--we've built the site the way we want--
now it's time to configure for mobile application.
So we come down here into the site menu--Mobile Applications--
and you've got a number of options.
The first step is gonna be configuring the application framework.
So from here, you can choose the SDK path for your Android SDK
if you've installed it already.
The good news is, if you haven't installed it already, all you need to do is click this big
easy install button, Dreamweaver will go out in the background, download the SDK,
configure it, install it, create your virtual OIS, and get you ready to go.
If you're on a Macintosh, you can also develop for IOS using phone gap,
in which case just point at your developer tools.
Now we can't download the Apple SDK automatically for you,
but you will need to go to developer.Apple.com, register, download it,
and once it's installed, just simply point at the directory, and you're ready to go.
Go in Quit/Save and get back to our project.
So there's a few more options down within Mobile Applications.
Now we've already done all of our heavy lifting
building the application, now we really just want to start working with it.
You also have the ability to set application settings.
From here, we can do a number of things--first up, each application needs to have
a unique Bundle ID--so basically, replace Company with your company name,
App name with a unique identifier, and get a unique identifier for your ID here
so that it won't collide with other apps in the stores.
The Application Name--this is what it's actually called--
the pretty name that's applied to it.
Author Name Version, and then the next are a little bit more related to the application itself.
An icon for it to represent it on your device as well as a flash screen ping
that will provide a little screen as your application is starting out
so you don't just give your users a blank page.
The target path is where Dreamweaver is going to actually build your project to,
and then build the final file.
Now, Native Application Framework in Dreamweaver will do two things.
When you go to build and emulate, it's going to actually create a native project for each
of these two SDKs--Android and IOS--depending on what you've chosen,
that you can use to actually build the application in the actual developer
tools from both Apple as well as the Android SDK.
It'll also build the actual binary application
into the bin directory within there so you can actually pull out the debug version.
Now down at the bottom here is Target OS Version.
Android creates a Dreamweaver AVD--a Virtual Device--for you to create to,
but you can actually create a number
of the AVDs to match your own requirements within the Android SDK and AVD manager.
Just come in here and create device profiles that match up how you'd like to
develop your app, and then you can switch between them from here.
For the IOS you have the option to use any of the IOS OS Target Versions
that PhoneGap currently supports, and then you're pretty much all set.
When you're ready to build just come down here the build and emulate menus--
in this case we want to both build the application as well as load it into Emulator--
and we're gonna choose Android so we can preview it in the Android Emulator.
Dreamweaver kicks off, launches the Emulator, and starts building the project.
And we're done.
So I'm gonna click okay, and then if I switch over to the Android Emulator--
see it's now loading up our application--and there it is.
We've now got our mobile application running right within the Android Emulator.
We can use all of the sort of virtual representations of the hard buttons
to interact with our app as well as click it and kind of use it the way
we would a normal mobile application.
Everything all the way down to native mobile functionality can be
tested within the Emulator--we can even make a phone call if we wanted,
although, this isn't a real number.
You're getting the idea that you can literally go from code-- Standards Based Assets--
directly to a mobile application with Dreamweaver very quickly.
And that's all you need to do to set up and work with a project.
Once you're done, you've got a folder on your desktop which is where we set our target path
to, and if you open it up within the bin directory, you'll find the APK files
that represent the final application.
And that's all there is to it--that's how you can get started building Native Mobile
applications with Dreamweaver in the PhoneGap framework in Dreamweaver CS5.5.
Hope you enjoyed this little peek into Native Applications.
Well, definitely check back a little bit more as we're gonna show more
esoterics of building native applications and a whole lot more on this channel
over the weeks and months to come.
Thanks a lot for paying attention.
[ADOBE® TV] [tv.adobe.com]
