Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Configuring mobile application frameworks

From: Dreamweaver CS5.5 New Features

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.

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.

Show transcript

This video is part of

Image for Dreamweaver CS5.5 New Features
Dreamweaver CS5.5 New Features

18 video lessons · 12697 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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 "Already a member? Log in

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

Your file was successfully uploaded.

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.