Click on any phrase to play the video from that point.
Hi. I'm Greg Rewis, principal evangelist at Adobe.
I'd like to talk to you about Creative Suite Web Premium 5.5 and, specifically,
how Dreamweaver CS5.5 can work together with your Web application-building skills--
your HTML, CSS, and JavaScript skills--to create native applications
for the Android and IOS platforms.
Let's take a look here in Dreamweaver CS5.5 where I've got a page
that doesn't look all that exciting.
It might look a little bit more exciting if I turn on my live view.
And when I do so, you'll see that--wow--I've got something that looks a lot like
a mobile application; in fact, that has been built with the jQuery Mobile framework.
And I'm going to go ahead and just prove that to you by going into my split view
where you can see that, sure enough, we have data rolls of page and so on--
all the things that we know from the jQuery Mobile framework.
But this is, again, looking like a regular Web page.
Let's go ahead and see what it might look like on a phone by just changing
our live view to represent the mobile phone. There you go.
That's much, much better. And, as you can see, we can click up on
buttons and navigate to new pages, where you'll notice I have a couple of buttons
here--one that would actually, hopefully, place a phone call and another one that
is actually going to map the location of the restaurant.
These are things that would not be, necessarily, possible with an application
that we're just seeing on the Web. I mean, if I'm looking on my browser on my desktop,
how am I going to make a phone call?
But they are capabilities that we would expect when viewing an application on a device.
And, of course, we want to do this not just as a Web application--in other words,
confined to the browser--we actually want to be native, to actually put this
as a native application in the app store or in the Android marketplace
and have people either be able to download that for free or perhaps, even,
make money off of it by downloading it onto their devices.
Now, again, in order to do this I'm going to need a little bit of help, so
I've built everything here in Dreamweaver using the jQuery Mobile framework
to get me navigating between the individual pages or states of my application.
But to make it an application itself, I need the help of PhoneGap.
PhoneGap is a framework that allows us to compile HTML, CSS, and
JavaScript into native applications for, again, the Android platform
and the IOS platforms.
And we're going to it right here in Dreamweaver CS5.5.
To begin, we're going to simply go up here to our site menu
where I'm going to choose my mobile application's option.
And I'm going to choose first of all to configure my application framework.
Now, the framework is actually the SDK, the parts that are coming from
Google or from Apple that are telling us about the devices
that we're going to be running on, giving us access to libraries that
do specific things on those devices.
Now, if you've never installed an SDK, I've got some great news for you.
You notice this Easy Install button right here?
I can click the Easy Install button and have Dreamweaver actually connect
out to the Google servers and download the Android SDK all automatically,
set it all up for me automatically.
I don't even have to do a thing.
Now for the IOS side of things, it's a little bit more involved, because
we have to first register as an Apple developer, and we can do that by
simply clicking this link, and it will take us over to where we can download
the SDK for the IOS platform.
Now once we've got our SDKs downloaded, and again I'm only going to be working
with the Android platform today.
I'll just simply go back to my site menu and specify my application settings.
Now, in the application settings, these are things like, first of all, where
is it that we're going to be outputting our application to?
And in my case I'm going to be going directly to the desktop.
Now, of course, there are other things that are needed to be known,
things like who am I? Who created this?
Maybe do we want an icon? I've actually created an icon; I'll go ahead and show
that to you so that you will be able to identify this a little bit later.
So there's the icon that I want to use as my icon on the desktop
in my mobile device. I've got a splash screen that I want to use.
So I've identified all of these individual elements, and finally I'm
going to identify the target OS versions that I'm going out to.
Now once I've done all of this--I'll go ahead and cancel again here--I'm ready
to package it up.
Now, compiling an application may be beyond the scope of what you do as
a normal Web developer, but using Dreamweaver CS5.5?
It's as easy as simply telling it, do you want to just build it, or do you
want to build it and test it in a virtual device?
I'm going to say let's build it and test it in a virtual device right now.
I'll go ahead and click my Android emulation, and that's going to tell
Dreamweaver to go out on my computer and check to see, first of all,
do we have the emulator running?
If it is, we'll go ahead and use it.
Otherwise, as you've just seen, we're going to go ahead and launch
the emulator. Now, once we've launched the emulator and it's loaded up,
we're going to build that actual application, that project, right here
from within Dreamweaver, but not really because actually it's PhoneGap that's
doing the work right now.
Now, this does take a few seconds to accomplish because the Android emulator
has to start up, has to act like a real phone, and we then have to move
the application onto the phone itself, the emulator, as it were.
But once that is done, you'll see that we're going to be able to work
with this application exactly as if we were doing it on a phone.
Now we see that Dreamweaver has successfully created
the application, and it's actually told us where it's put our project,
and even better, if we head over into our emulator,
you can actually see there is our application running in the emulator.
Now if I go ahead and click upon one of those buttons, we'll see that this
slides over and does our animation.
Now don't be alarmed--just a little bit of learning--that the Android emulator,
it's not fast. This is probably one of the slowest emulations that you can go through,
but it gives us a good idea of the functionality.
For example, if we wanted to call this restaurant, we can just click the call button,
and of course that's going to take us to the dial screen, fill in
the number for us. Let's go ahead and hit the back button to move back over there.
What if we wanted to know where that particular restaurant was?
Well, we could map it, of course.
Now, in the emulator I'm of course not actually, truly online, so
I'm just tossing up a fake map right now for you, but we'll see, actually, how that
looks when we see it on a real device. Because now we actually have a
real, running application. That means we can take that finished--in the case of our
example here, that Android application, upload it to the marketplace,
and distribute that out to the world.
Or, if we had gone ahead and downloaded the IOS framework, done the
same for the IOS side of things, putting that in the app store.
I'm sure you don't believe me entirely, so let's take a look.
I've got my device running right here. I've actually already done that--
compiled the application--and now if we head over to my device,
here we can see--there's the icon. There's that Meridian icon.
If I click it, we're going to launch up. There is that splash screen that you saw.
And, in just a moment, as soon as the app is finished loading,
here we have it. And again I can go ahead and click for one of these restaurants,
going to slide over there. Again, the same functionality you saw
when it has to dial. We'll go back. We'll ask where is that particular restaurant?
And once I've clicked, we're actually loading up and using geolocation on the phone
to find our location and then map the restaurant that we've chosen on the map as well.
Let's go take another one, just to see what that looks like.
And there we go. That one is down a little bit to the southwest of us.
So we have been able to build this entirely native application using
jQuery Mobile, using Dreamweaver CS5.5, and using the PhoneGap framework,
not only for Android but also for the IOS.
So we now think that it's going to be amazing for us as Web professionals,
being able to use our HTML, our CSS, and our JavaScript skills
to build native applications right within Dreamweaver CS5.5.
[Adobe TV - tv.adobe.com]
