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]
