Once you’re happy with your Web App you’ll want to deploy it to your device, Dreamweaver CS 5.5 integrates this feature nicely; however, there is an issue with one of the classes that will prevent your app from compiling, here’s how to fix it.
Dreamweaver CS 5.5 will happily create a skeleton jQuery web app for you, I’m using the four page sample app created by Dreamweaver to show the exact error, where to find it, and how to fix it, see this post for more info on creating a web app with Dreamweaver.
Once you have your site ready to deploy, you need to set up your development environment, go to Site – Mobile Applications – Configure Application Framework.
Set the “iOS Developer Tools Path” to where you installed xCode
The default is /Developer, then click save.
Now you need to configure your Application settings, go to Site – Mobile Applications – Application Settings.
Fill in your Bundle ID, App Name, Author Name, Version Number & Target Path (You should not set your Target Path the same location as your site root, it’s fine to leave it set to desktop as Dreamweaver will create a folder for you).
Icon and splash screen are optional, for this tutorial I have left them out, for more info on Web App icons and Splash screens see this post.
Once you have finished filling in you settings click Save, then go to Site – Mobile Applications – Build and Emulate – iPhone.
This is when the error appears, Oh Dear!
Not to fear Dreamweaver is telling us to go look in the buildlog.log, you can find this file under the folder Dreamweaver created when it tried to compile your app, which will be on your desktop (or wherever you set your Target Path).
Browse to the Buildlog.log file location Dreamweaver just informed us about and double click on it, the log file will open in Console, and if you check the log file you can see the error, what the error is and the file that’s causing the problem, as you can see from the log, Dreamweaver even points out the error with a ^, and also tells us the path to the offending file.
Browse to the Camera.h file specified in the log, which you will find in your Documents folder, again as you can see from the log, it’s in a Folder called DW_NAF, the default path is:
Double click the Camera.h file to open it with xCode or use a text editor, make the following changes and save the file.
Change the line that reads “enum DestinationType returnType”, and correct it so it reads as follows, don’t forget the semi-colon;
Now we can go back to build and emulate and your app will compile successfully.
If you run into any problems then make sure you have the latest version of Dreamweaver installed, and double check your Camera.h file.
Copyright © Shane Hogan
Do not copy this article.
The latest update for my app ScaleViz has been approved and I’ve finally had a chance to play with Adobe’s new HTML5 motion and interaction tool called “Edge“, and after playing with it for a little while yesterday I can see why they call it Edge.
I’ve only really just touched the surface and have already created this cool splash screen and added it to the front page of our test mobile web app, you can find it here if you want to check it out: Test Mobile Web App with Adobe Edge Splash Screen added to first page.
(Don’t press the animations background (the stage) as I’ve linked it to ScaleViz.com and you will be swift-ed away, you can however drag the animation up and down without activating the link).
Edge is a seriously awesome development tool, especially if you’re used to timeline animation using similar development tools like, Flash.
When I get a bit of time I will definitely be doing a screen cast tutorial on how to animate stuff using Adobe Edge, however in the mean time here’s an Edge tutorial from Adobe.
I can see complete apps being developed with Edge and packaged up for the Apple Store or Android Market place using Dreamweaver and Phone Gap.
As mentioned I’ve only just scratched the surface and I’m also not one for reading instructions, but if you check out the Edge animation in my test web app, you can see that the animation reverses itself when it gets to the end then plays again, this functionality was added with a few clicks, also if you click the background, it links to my App site ScaleViz.com, again this was added with two clicks and a URL change.
Edge is now called Edge Animate, go check it out here:
To add a Web App or Web Clip to your home screen.
Open Safari and browse to the URL of your choice, for this demo I’m going to use the test app, which you can find here:
This version has the added icon and start screen that we created in the last tutorial.
Once the page is loaded, press the middle button on your Safari “button bar”.
Now press “Add to Home Screen”.
Type a name for your App and press the “Add button”
You can now use your Web App from your home screen.
If you’ve made any changes to your app and your pages still look the same, you may need to clear you browsers cache.
To clear your Mobile Safari cache, goto: Settings > Safari > Clear Cache.
Copyright © Shane Hogan
Do not copy this article.