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 Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating new HTML5 documents
- Using code hinting for CSS3, HTML5, DOM elements, and jQuery
- Configuring jQuery widgets with the Widget Browser
- Managing media queries
- Previewing web pages on multiple devices with the Multiscreen Preview panel
- Configuring mobile application frameworks
- Building and emulating mobile applications
Skill Level Intermediate
It's clear by looking at the Dreamweaver CS55 release that Adobe is very serious about adding mobile development support to Dreamweaver. In addition to the JQuery Mobile integration that we saw in our last movie, Adobe has integrated the phone gap framework and added support for building and emulating Android and iOS apps. In this movie, we're going to take our mobile application and configure it for Android phones. While we do that, I want to talk about Dreamweaver's larger strategy for mobile development and what your expectation should be in using Dreamweaver to develop for mobile environments.
Okay, so I am going to do a very unusual step here. I want to go out and show you setting up a site for this particular movie and our next example as well. I'm going to minimize Dreamweaver and I have my exercise files directly out on the desktop. If yours are on a different location, just go ahead and open those up. Now, I'm going to go in the chapter 4 directory, and I'm going to find the 04_02 folder. I'm going to copy that directly out onto the desktop. Now, the reason that I'm doing this is that for the purpose of this exercise, I want to define 04_02 as its own site.
When you are working with a mobile application, you're going to set up the SDK for this, you are going to emulate for it. I really don't want any of the previous exercise files I was working with to conflict with this, so I'm going to go back in the Dreamweaver, and what I want to do now is go up to Site and choose New Site. I'm just going to call this site Tour Finder because that's the name of the mobile app that we are going to build, and I'm going to go to local site folder, go out to my Desktop, and on my Desktop, I'm going to find the 04_02 folder that I just copied over there. I'll go ahead and select that, save it, and now here's my new site with my mobile application that we are going to be working with in just a moment.
PhoneGap code hinting is available in Dreamweaver as well, so there is a lot of support there for PhoneGap within Dreamweaver. So now that we know a little bit more about the workflow inside Dreamweaver, one of the first things that we need to do is to go ahead and configure the application framework that we wish to use. Right now, there are two supported application frameworks in Dreamweaver: there is the Android framework and there is the iOS framework. So if I go up to Site > Mobile Applications, I can choose Configure Application Framework. When I do that, a dialog box comes up and here I can choose either Android or iOS.
Now, you'll notice that for me Android is my only choice. The reason for that is because Dreamweaver can currently only configure the iOS framework on the Mac. In addition to that, to configure the iOS framework, you are going to need to go out and download the SDK yourself. To do that, you have to register. You don't have to pay the fee, but you do have to register. So there is not easy install option like there is for Android, and since Android is cross-platform, both Mac and PC within Dreamweaver, that's the one we are going to be using. So the first thing I want to do is just do an Easy Install.
Now, if you already have the SDK installed on your system, you don't have to do this. You can just go ahead and browse to wherever the SDK is installed. If you don't already have it installed, you can just go ahead and do Easy Install, and I just need to browse to where I want to install the SDK. Now I'm just going to go straight to my documents. Now, normally I wouldn't do that. I would install it on the C drive somewhere or maybe within Program Files or a special directory. But in this case I'm going to do it so that I can just sort of get rid of it little bit later on when I don't use it. But if you're doing this for development purposes, you want to place this in a logical location where it's easy for you to find, and I am going to click OK.
As soon as you choose location for that and click OK, it's going to go ahead and download the SDK and install it and configure it for you, which is going to save you a tremendous amount of time. Now, this process is going to take a little bit of time, so be patient. You can make a phone call, go get a drink, and by the time you come back your application framework will be configured and ready to use. Now, if you get a successful install, it'll show you the path as to where the SDK is located, and it'll tell you that it installed successfully. So I'm just going to go ahead and save that, and from now I'm going to work with this site, if I do mobile application development and I use Android, it's going to use that developer kit for me.
Now once your application framework of choice is downloaded, installed and referenced in Dreamweaver, you can move on to building and emulating your mobile apps from within Dreamweaver, and that's what we are going to take a look at in our next movie.