New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver CS5.5 New Features
Illustration by

Configuring mobile application frameworks


From:

Dreamweaver CS5.5 New Features

with James Williamson

Video: Configuring mobile application frameworks

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Dreamweaver CS5.5 New Features
1h 50m Intermediate May 02, 2011

Viewers: in countries Watching now:

This course covers the enhancements to the latest release of Adobe's web design and development software. Author James Williamson examines Dreamweaver's updated support for current Web standards, such as code hinting for HTML5, CSS3, and jQuery, and new W3C-compliant code validation. James also demonstrates the new features introduced specifically for mobile development that allow developers to download, install, and configure native applications for Android and Apple iOS. These features include support for PhoneGap integration, jQuery mobile framework, native binaries, and platform emulators launched directly in Dreamweaver.

Topics include:
  • 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
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Configuring mobile application frameworks

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.

All right now, before we go into configuring our site for mobile application development, it's really helpful if we understand how the current mobile development workflow works. Dreamweaver currently allows us to build and emulate applications for Android and the iOS platforms. Basically, Dreamweaver becomes the IDE that you use to write the apps and gives us the ability to build and emulate the app from directly within Dreamweaver. Now, it's using the PhoneGap framework, so that designers can use their traditional HTML, CSS, and JavaScript skills without having to learn Java or Objective-C to create apps.

Now if you're not familiar with PhoneGap, it's helpful for us to talk about it for just a little bit. Okay, so here I am at phonegap.com, which is a perfect place to learn more about this JavaScript framework. Essentially, what this is is an open-source mobile framework that allows you to develop your mobile applications in HTML 5, CSS3, and JavaScript and then go ahead and push them out to any platform that you want, whether that's Android, iOS; it doesn't really matter which platform it is. So PhoneGap is getting a lot of traction, a lot of support, and Dreamweaver has integrated it directly into Dreamweaver itself.

Now, if you're looking to learn more about PhoneGap, in terms of how do I make a call to the contacts of the phone or how do I access Geolocation, if I go right here over the Docs and I click on the docs.phonegap.com, I can see that all these features have direct documentation. So if I go to Geolocation, for example, not only do I learn about the methods and objects available to me to reference geolocation from the phone, but I can see sample code as well. So obviously, PhoneGap is little outside the scope of this particular course, but if you're comfortable doing HTML, CSS, and JavaScript work, it's going to be really easy for your pickup PhoneGap and to begin develop mobile applications directly in Dreamweaver.

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.

Find answers to the most frequently asked questions about Dreamweaver CS5.5 New Features.


Expand all | Collapse all
please wait ...
Q: This course teaches us how to create mobile app in the "Mobile App Support" chapter and the app works great. But when we try to upload to android market, it says that the Android Market can't upload a debug/release version. What's wrong with the app?
A: As mentioned in the movie, the Dreamweaver emulator support does not create deliverable apps. It is designed to act as an IDE and debugging environment only. From there it is up to the developer to package and distribute apps to the various app stores.

Take a look at https://build.phonegap.com/. It's an early service dedicated to creating deliverable binaries for multiple platforms. Since it's PhoneGap, it's also the same framework used within Dreamweaver, so Dreamweaver based apps should port right over.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS5.5 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.