- Apps Versus Mobile-Friendly Websites
- Preparing a Web Page to Export as an App
- Step 1: Configure the Application Framework
- Step 2: Define Your Mobile Application Settings
- Step 3: Build and Emulate the App
- What's Next?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Step 2: Define Your Mobile Application Settings
Both Google's Android Market and Apple's iTunes have sets of data that they require as part of the process of submitting apps to their stores. There aren't a lot of required elements, and most of them are common to both Android and iOS. The most basic is an application name—which makes sense—and an author name. Dreamweaver guides you through collecting this info in a very friendly way.
Preparing Icon and Startup Screen Images
In addition to designing a mobile-friendly HTML page, which we've already discussed, you'll want to prepare an image or two to associate with your app—an app icon, and a startup screen image.
The app icon is important because it's displayed on the desktop of the user's device. A startup screen icon, which appears when the user launches your app on her device, is an option available for iOS apps—some apps have them, some don't. Figure 5 shows an example. Take a moment to scope out your favorite apps, noting which ones use a startup icon, and think about whether you want or need a startup icon for your app. If you don't use a startup screen icon, the "home page" of your app simply opens in devices when the app is launched.
)
Figure 5 Some apps have startup screen images.
Save your icon and screen images in PNG format. You don't have to worry about size; Dreamweaver's app-building tools will adjust the image size automatically.
Defining Your App Settings
In Dreamweaver CS5.5, the Native Application Settings dialog organizes the settings required to define an app. If you don't have your app-ready HTML page open at this point, open it in the Document window. Then follow these steps:
- Choose Site > Mobile Applications > Application Settings. The Native Application Settings dialog opens (see Figure 6).
- The Bundle ID field satisfies technical requirements for both Android and iOS apps. Replace the placeholder one with your own, being careful not to delete the periods. The format is as follows:
- Enter your application's name in the Application Name field, and type your name in the Author Name field.
- Navigate to and select your application icon PNG.
- Navigate to and select a startup screen PNG, if you want to use one.
- In the Target Path field, use the Browse for File icon to navigate to and select the output folder where your app will be saved.
- Accept the default settings in the Select Target OS Version section at the bottom of the dialog.
- When all the settings are correct, click Save.
com.company.appname
Replace company with your own company name, and put in your app's name for appname (don't worry about coming up with a catchy app name here; we'll get to that later).
)
Figure 6 Defining native application settings.
At this point, perhaps you're asking a question somewhat like the one immortalized in a popular movie: "Dude! Where's my app?"
Well, your app hasn't quite been built yet. But it will be in a moment. By defining native app settings, you're saving settings that will be applied when the app is actually built. Additionally, depending on how you built your mobile-friendly web page, Dreamweaver CS5.5 may have added a file named phonegap.js to your Dreamweaver site. That file is needed in order to build the app.