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
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.