In earlier articles we covered HTML5 Semantics and multiscreen authoring in Dreamweaver. In this article we’re going to look at the process of building a native phone application in Dreamweaver CS5.5.
The PhoneGap framework has become popular with web designers who want to write native moble applications using HTML, JavaScript and CSS. Adobe decided to team up with these people and integrate their framework for Android and iOS directly into Dreamweaver. Having said that, it’s necessary to install the Android and iOS SDK’s into Dreamweaver in order to be able to use them. Note that for the PC, you can only install the Android SDK, on the Mac platform, you can install both.
The Android SDK is meant to install seamlessly with a one-touch button. Unfortunately, it didn’t work out that way. I found a series of articles and information which led me through a convoluted process of installing the SDK manually (you can read about all the steps in our Dreamweaver CS5.5 Overview article). Even after all that, I was unable to get the Android software to work properly.
Not wanting to give up, I conducted another search and found this document: Error “Android SDK failed to install” with Easy Install | Dreamweaver CS5.5. I followed all the steps in this document and the Android software still didn’t install properly. At one point, it even caused Dreamweaver to crash. The end result is I’m unable to show you the finished result in the Android emulator.
Note: This problem appears to be with the Android emulator and doesn’t appear to be with Adobe. Still, it’s an important issue and needs to be addressed. [Editor’s note: the Android SDK has specific hardware requirements, and is not a particularly easy piece of software to install.]
Still, there’s much that I can show you about building a mobile application and we’ll look at that here.
As before, we’re going to look at a couple of different methods for creating a phone application. To get started, the easiest way is to go to File: New and in the New Document dialog box, choose: Page from Sample: Mobile Starters: jQuery Mobile (local) and make sure the Doctype is set to HTML5. Click on the Create button.
This brings up the jQuery Mobile Web App layout. As you can see, the layout is essentially a single page with several pages within it, along with some JavaScript that will start functioning when you load this in a browser and in Live View. And as you may recall, in this view you don’t get a good idea of how this layout will appear as a finished product, though it’s a great way of editing content, quickly. To see what the layout will look like, you need to turn on Live View.
This shows us a preview of what our layout will look like when it’s complete.
Now if you want to add more functionality to the layout, you can do so by means of the Insert tab on the right which gives you a number of jQuery Mobile widgets.
Another thing to be aware of is that this insert menu gives you access to many other objects as you can see in the the popup here.
For now, I’ll look at adding a jQuery Mobile widget to our layout. What I’m going to do here is to go to the content section on page three, delete it, then add a Flip Toggle Switch widget from the list.
I’m going to save this as test-app.html and when I click on the Save button,
it brings up the Copy Dependent Files dialog box. Click on Copy and it copies over all the necessary files to make our layout work.
I’ll turn Live View off, then reactivate it and as you can see on page three, I now have a Flip Toggle Switch in place that works as advertised.
When you’re satisfied with your layout, you’ll be ready to build it out to the Android emulator. However, as I noted above, despite spending many hours on trying to find a workaround, I’ve been unable to make the emulator work, however, I can show you the steps you need to take to configure the emulator.
To get started, go to Site: Mobile Applications: Application Settings. Note that each application has to have a special Bundle ID, so you need to change com to your company name and to choose an identifier that won’t interfere with other apps. Naming it can be a challenge, though. Next is the application name and the author name. For the application icon, this is when your application is starting up so users won’t see a blank page. The target path is for the build of your project. As for the Target OS version, it seems that there should be more control but on my system there’s only one option: DW_AVD.
Finally, there’s the Manage AVD’s.. button, which brings up the Android SDK and AVD Manager. Since I’ve been unable to get the emulator to work properly, there seems little point in exploring that here. Eventually there will be a solution, unfortunately it’s not going to happen before this article is published. If you have had a similar problem installing the Android SDK with Dreamweaver and have found a solution, please be sure to leave a comment below. If we find a solution, we will update this article with our findings.