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

Building and emulating mobile applications

From: Dreamweaver CS5.5 New Features

Video: Building and emulating mobile applications

Now that we've begun the process of building a mobile application, it would be nice to be able to test the app in our target device. Now, fortunately, Dreamweaver's mobile application development tools allow us to do just that, without having to leave Dreamweaver. The first thing that we're going to do is define our application settings, and then we'll use Dreamweaver to build and emulate the Android app that we started in our previous movies. So, here I want to go over to my 04_02 folder, so if you watched the last movie-- and it is sort of a prerequisite for doing this one, so if you haven't completed the last movie and configuring the application framework, go do that first and then come here.

Building and emulating mobile applications

Now that we've begun the process of building a mobile application, it would be nice to be able to test the app in our target device. Now, fortunately, Dreamweaver's mobile application development tools allow us to do just that, without having to leave Dreamweaver. The first thing that we're going to do is define our application settings, and then we'll use Dreamweaver to build and emulate the Android app that we started in our previous movies. So, here I want to go over to my 04_02 folder, so if you watched the last movie-- and it is sort of a prerequisite for doing this one, so if you haven't completed the last movie and configuring the application framework, go do that first and then come here.

We haven't changed our site definition at all, so we're still pointing directly at the 04_02 folder. Inside that, I have the index.html page, and this is essentially a more built-out version of the jQuery Mobile app that we've worked on earlier. So if I preview this in Chrome, for example, you can see now that we have tour packages built into this as well. So it's just a little bit more robust than we last saw it. Okay, well I want to test this within the actual Android emulator, and to do that I have to first build a binary of the app.

Now thankfully, Dreamweaver is going to do that for me, because that would be really difficult for me to do that on my own. So the first thing I'm going to do is go up to Site > Mobile Applications, and I'm going to choose Application Settings. And this is going to give me a list of options that are going to help me package this application. One of the first things I'm going to do is I'm going to replace company with explorecalifornia. This is basically the ID of your app, and you would want to put your company name or your individual name there. We're going to name the application Tour Finder, and it picked that up from the name of our site, so that might be something you want to consider when naming these sites that you're going to design mobile applications out of.

And I'll just go ahead and put my name in there for Author Name; feel free to substitute yours. I can do a version number. I can even give it an application icon, so I'm just going to ahead and browse for this. And if I look inside the 04_02 Images directory, I can see that I have this Finder icon right there, so I'm going to go ahead and select that. It's a PNG file. Click OK. If you go out to the Android site, it will give you some instructions on the size and image formats that make good icons for your apps. The Target Path is where you want this app published.

This could be a project folder's directory or something like that. I'm just going to leave mine pointing directly toward the Desktop. Normally, you'd probably want to organize it in a folder somewhere within your drive, but I'm just going to put mine on the Desktop so it's really easy for me to find. It's going to also ask which virtual device I want to use. I'm just going to use Android's Dreamweaver AVD because obviously we're publishing out of Dreamweaver. So I am going to go ahead and save that. So now we're ready to build our app. Now, currently the Build feature inside Dreamweaver doesn't support preparing distributable binaries, or have any mechanism for distributing through the various app stores.

What it does do for you is it's going to create a native binary which you can then test on the device itself or the device's emulator, which is what we're going to be testing on. All right, so I'm going to go up to Site, choose Mobile Applications, and I am going to go down to Build and Emulate, and of course I'm going to choose Android because that is the platform that we are targeting. Now, this is going to take a while because it's going to check to see if the emulator is running. If it's not, it's going to launch it for you. And this is going to use the Emulator that you installed when you install the Android SDK.

Then it's going to actually build the app, create the binaries, publish it, and then launch the app within the emulator. So this can take a little bit of time, so just give yourself a moment or two again, go watch some TV, go grab a drink; by the time you get back, your app will be up and running. Now after that process, you're going to see your app launched within the emulator. So now I can go back to the home screen, check out the icon that we created. So let me page through the icons. There is our Tour Finder one right there. Clicking on that will launch the app for us. And now I can check the navigation.

I can expand the tours, collapse them, go back to the homepage. I can even test out our Contact Us button, click on that, and see that our formatting did indeed pay off as it brings up the phone and it goes ahead and populates that with the phone number. Excellent! Now emulators are notoriously slow, so if this is not running very fast, don't take it as gospel that your application isn't working properly, or that you're going to have terrible results. You definitely want to test it on the phone itself, and you can use the published binary that you created to import it to the phone.

Now one of the things that's important to remember when testing these capabilities is that CS5 really is just the first release of Dreamweaver's mobile application development tools. Currently, I think it'd be correct if you view Dreamweaver as more of a design environment, where Dreamweaver is going to serve as the IDE for your HTML, CSS, and JavaScript mobile apps. Adobe's goal, which is to provide a seamless environment for developing mobile applications for multiple devices, means that although we have a lot to play around with and explore right now, we have even more to look forward to in the future.

Show transcript

This video is part of

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

18 video lessons · 12672 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.