The Cordova Project Template
Visual Studio 2015 ships with two project templates for creating Cordova applications. These templates provide full IntelliSense in the JavaScript code editor, special tools such as a plug-in manager, and support for your application markup with tools like the DOM Explorer and CSS editor. Cordova applications in Visual Studio also get the full debugging experience across emulators, simulators, and test devices; this means breakpoints, watch windows, the immediate window, and more. It all starts with the project template; let’s take a look.
Creating a New Cordova Project
You can develop Cordova applications with Visual Studio using either JavaScript or TypeScript. Recall that TypeScript is a superset of JavaScript that allows you to develop strongly typed applications that are ultimately processed (compiled) to JavaScript when executed. This chapter focuses on the more familiar JavaScript. However, the two are similar.
To create a Cordova project in Visual Studio, you start with File, New Project. This brings up the New Project dialog, as shown in Figure 25.3. Notice the project type is under either the JavaScript or the TypeScript language. Note that when you create a Cordova application, Visual Studio may ask you to create or renew your Windows Developer license for creating apps for the Windows Store.
FIGURE 25.3 Use the Add New Project dialog to create a Cordova application based in either the JavaScript or the TypeScript language.
When the project launches in the IDE, you are shown a getting started page. This provides helpful information and links on developing with Cordova. This page is actually the Project_Readme.html file inside Solution Explorer.
Like all projects in Visual Studio, Solution Explorer offers you access to the elements that make up the code for your Cordova application. Figure 25.4 shows a blank app template inside the IDE. Let’s take a look at the folders and files of the solution.
Project Folders
There are five main folders in the default project template for Cordova. Each is there to help you manage the assets that make up your app. Many of these folders can be found inside the www directory. This is the core directory that represents your application pages, styles, images, and script. The following provides an overview of each folder (as shown in Figure 25.4):
www/css—Contains the style sheet information for your project.
www/images—Used to house the image assets that make up your project. Like a Bootstrap web application, a Cordova app may require multiple image sizes to support multiple device sizes and orientation.
merges—Where you put code that overrides default behavior for a specific platform. Includes a folder per specific platform, as in Android, iOS, Windows, and wp8.
res—Contains graphics that will be shown natively on the device. The Images folder contains images shown on a web page running in Cordova. The Res folder is where you put icons and splash screens you want to deploy with your application to be run locally (by the native device versus through a web view).
www/scripts—Contains the JavaScript code you write to enable the features of your application.
Project Files
The files inside a Cordova project are similar to those found in a website. These files make up your user interface, the code required to make the UI execute, and configuration information. The following highlights key files in a Cordova app:
.html—These are your UI pages. Your UI pages typically sit at the root of the special www folder. The main page for a Cordova application is index.html. It shows the first screen in your app and then works with your code (or a client library such as Angular) to load additional views.
index.css—Represents the styles used to define the look of your application. This file can be found in the www/css folder.
config.xml—The config.xml file provides the configuration information for your app. This includes defining common elements such as start page, version, splash screen, default orientation, and more. This file is stored in the root of your app (see Figure 25.4). Visual Studio ships with a designer for editing config.xml. The common application properties are shown in this designer in Figure 25.5.
FIGURE 25.5 Use the Common section of the Config.xml designer to change basic properties of your application.
The .config designer for Cordova also enables adding plug-ins to your project. (See the “Cordova Plug-Ins (for Accessing Native Device Capabilities)” section later in this chapter.) Finally, this designer supports setting platform-specific properties of your application. Notice the links on the left side of Figure 25.5. Each exposes a form for setting properties for the selected platform (such as target version/device).
index.js—This file (stored in the www/scripts directory) provides special Cordova events that execute code when the application starts (onDeviceReady), is paused (onPause), and is resumed (onResume). You can use the events to initialize parts of your application on startup, save state on pause, and restore state on resume. We demonstrate using this file later in this chapter.
taco.json—This file is used by Visual Studio to specify the version of the Cordova CLI used to build your application. This is useful when building on a remote machine.