Packaging

The last step in producing a mobile application is packaging. The applications created using the Basic Application project template or the Mobile project of the Multi-Channel Application template can be easily packaged to be deployed to any device.

DevExtreme comes with the Build Native Package wizard. This wizard helps produce a native package for one of the following platforms.

  • iOS, Android and WindowsPhone8
    A native package for these platforms is a PhoneGap container with your DevExtreme application packed as a resource. When building a package, the Package Builder replaces the fake cordova.js file located in the application project's root with a valid platform specific Cordova library version 3.6.3.

  • Tizen
    A native package is a widget package.

  • Any Platform
    You can generate a zip file that is ready for the PhoneGap Build server.

Below you will learn how to build a package from a Basic Application project template or the Mobile project of the Multi-Channel Application template. To learn how to get a package from the Win8Phone project template, read the Packaging your Windows Store app using Visual Studio 2012 article. To learn how to get a package from the Win8 project template, read the Create a Sample Windows 8 App article.

Specify General Project Properties

Regardless of which platform you are going to package your application for, set the general project properties. To do this, right-click the application project in the Visual Studio Solution Explorer and choose Properties. In the invoked window, specify the General properties.

General Project Properties

  • Output Path
    Specify a folder for the output.
  • Start Page
    Set the application page that will be loaded when running your application.
  • Application Title
    Specify the application title that will represent the application on devices.
  • Bundle Identifier
    A unique ID that is required to identify your application in the AppStore.
  • Root namespace
    A namespace used by the Add | New Item... dialog when adding a view using the DevExtreme View template. In this template, the function that returns a ViewModel of the added view is declared in the namespace that is set to this project property. For details, refer to the Set a Custom Namespace topic.
  • Version
    Specify your application's version.
  • Screen Orientation
    Specify the device orientation that your application supports.
  • Show Splash Screen
    Indicates whether or not to show the predefined splash screen.

Set Permitted Device Capabilities

If you use PhoneGap API to access device features in your application, specify permissions to these features. Right-click your project in the Visual Studio Solution Explorer and choose Properties in the invoked window. Check the necessary permissions within the Capabilities tab.

Accepted Capabilties

The following table details the permissions/plugins that will be added to the requierd files (config or manifest) of the application.

Capability Name Android Permission, Plugin iOS Plugin (name, value) Windows Phone Capability Tizen Feature Keys
Accelerometer Permission: not required
Plugin name: Accelerometer
Plugin value: org.apache.cordova.AccelListener
Accelerometer, CDVAccelerometer ID_CAP_SENSORS http://tizen.org/feature/accelerometer
http://tizen.org/feature/gyroscope
Camera Permission: WRITE_EXTERNAL_STORAGE
Plugin name: Camera
Plugin value: org.apache.cordova.CameraLauncher
Camera, CDVCamera ID_CAP_ISV_CAMERA http://tizen.org/feature/camera
Capture Permission: RECORD_AUDIO, WRITE_EXTERNAL_STORAGE
Plugin name: Capture
Plugin value: org.apache.cordova.Capture
Capture, CDVCapture ID_CAP_MEDIALIB_AUDIO
ID_CAP_MEDIALIB_PHOTO
ID_CAP_MEDIALIB_PLAYBACK
ID_CAP_MICROPHONE
ID_CAP_ISV_CAMERA
http://tizen.org/feature/microphone
Compass Permission: not required
Plugin name: Compass
Plugin value: org.apache.cordova.CompassListener
Compass, CDVLocation ID_CAP_SENSORS http://tizen.org/feature/magnetometer
Connection Permissions: INTERNET, ACCESS_NETWORK_STATE, READ_PHONE_STATE,
Plugin name: NetworkStatus
Plugin value: org.apache.cordova.NetworkManager
NetworkStatus, CDVConnection ID_CAP_NETWORKING http://tizen.org/feature/telephony
http://tizen.org/feature/network.wifi
Contacts Permissions: GET_ACCOUNTS, READ_CONTACTS, WRITE_CONTACTS
Plugin name: Contacts
Plugin value: org.apache.cordova.ContactManager
Contacts, CDVContacts ID_CAP_CONTACTS No permissions are required
Device Permssion: READ_PHONE_STATE
Plugin name: Device
Plugin value: org.apache.cordova.Device
No permissions are required ID_CAP_WEBBROWSERCOMPONENT
ID_CAP_IDENTITY_DEVICE
ID_CAP_IDENTITY_USER
No permissions are required
Events Permission: BROADCAST_STICKY
Plugin name: Battery
Plugin value: org.apache.cordova.BatteryListener
Battery, CDVBattery No permissions are required No permissions are required
File Permission: WRITE_EXTERNAL_STORAGE
Plugin names: File, FileTransfer
Plugin values: org.apache.cordova.FileUtils, org.apache.cordova.FileTransfer
File, CDVFile
FileTransfer, CDVFileTransfer
No permissions are required No permissions are required
Geolocation Permissions: ACCESS_COARSE_LOCATION, ACCESS_FINE_LOCATION, ACCESS_LOCATION_EXTRA_COMMANDS
Plugin name: Geolocation
Plugin value: org.apache.cordova.GeoBroker
Geolocation, CDVLocation ID_CAP_LOCATION http://tizen.org/feature/location.gps
Media Permissions: RECORD_AUDIO, MODIFY_AUDIO_SETTINGS,
WRITE_EXTERNAL_STORAGE
Plugin name: Media
Plugin value: org.apache.cordova.AudioHandler
Media, CDVSound ID_CAP_MEDIALIB_AUDIO
ID_CAP_MEDIALIB_PHOTO
ID_CAP_MEDIALIB_PLAYBACK
ID_CAP_MICROPHONE
ID_CAP_ISV_CAMERA
No permissions are required
Notification Permission: VIBRATE
Plugin name: Notification
Plugin value: org.apache.cordova.Notification
Notification, CDVNotification No permissions are required http://tizen.org/feature/network.push
Storage Permission: not required
Plugin name: Storage
Plugin value: org.apache.cordova.Storage
No permissions are required No permissions are required No permissions are required

 

Note that the Globalization, InAppBrowser and Splashscreen plugins are added automatically.

In addition, you can remove PhoneGap libraries from the project if you included them during testing. These libraries are attached automatically when running a deployed application (see the text written in the cordova.js file added with the application template).

Set Permitted URLs

The URLs that you navigate to from your application must be included in the "white list" of permitted links. Right-click the application project in the Visual Studio Solution Explorer and choose Properties, then populate the White list property presented in the Capabilities tab.

White List

Follow the Whitelist Guide published in the PhoneGap documentation, because the application will be then built by PhoneGap.

Add a permission to connect to the specified URLs by checking Connection in the Capabilities list.

Connection Project Property

Build Custom PhoneGap Application Template

When building an iOS, Android or Win8Phone package, a DevExtreme application is embedded into the DevExtreme-adapted PhoneGap application template. This template uses the Cordova library version 3.6.3 and accepts the standard PhoneGap plugins. If you need to use another version of the Cordova library or apply a custom PhoneGap plugin(s), build a custom PhoneGap application template for your DevExtreme application. For this purpose, do the following.

  • Utilize the default DevExtreme-adapted PhoneGap application template as a base. You can download this template from GitHub (there are three application templates there - one for each of the available platforms).

  • Customize the default application template as required. For this purpose, you can use the cordova command-line interface (CLI). As a result, you may have three custom application templates - one for each of the available platforms.

  • Put the custom PhoneGap application template(s) into an appropriate directory within your DevExtreme application project.

  • Specify the path to the added application template(s) for the application project. To do this, assign the path to the Template file path property of your DevExtreme application project (you can see this property within the Android package, iOS package and Windows Phone package tabs).

The specified custom application templates will be used when packing your DevExtreme application (read below to learn how to prepare a package).

Build Package for iOS

As you were developing this application, you already included layouts and style sheets specific to the iOS platform. The next step is to set the project properties required for building a native iOS package. To do this, right-click the application project in the Visual Studio Solution Explorer and choose Properties, then specify the properties that are presented in the iOS package tab.

iOSPackage Properties

  • Signing

    You do not have to specify these properties, because the certificate will be created during the iOS package built by the DevExtreme Build Package wizard (see below). If you have already obtained a certificate, you can specify it here, in which case it will be used by the DevExtreme Build Package wizard automatically.

  • Devices family

    Specify the underlying hardware type on which this app is designed to run.

  • App Icons and Splash Images

    Assign the icons and splash images that will be built into the application's native package. To learn about image recommendations, refer to the http://developer.apple.com/ site.

  • Package localization

    If you localize your application, specify the application languages so that they are available for end users in the AppStore.

  • Application Template

    Specify a custom PhoneGap application template for the iOS native package. When going through the Build Package wizard, this template will be used as a base to build a native package for the application.

Now, you can easily create a native iOS package with your application right from Visual Studio. Right-click the application project and choose Build Native Packages.... The Build Package wizard will run.

Build For iOS

Choose iOS and go through all the wizard steps. This will result in a native package that is ready to be loaded to the AppStore. For details on the iOS application release requirements, refer to the developer.apple.com site.

Watch Video

Build Package for Android

As you were developing this application, you already included layouts and style sheets specific to the Android platform. The next step is to set the project properties required for building a native Android package. To do this, right-click the application project in the Visual Studio Solution Explorer and choose Properties, then specify the properties that are presented in the Android package tab.

Android Package Properties

  • Package name
    Specifies the package name that is assigned to your Android application.

  • Version
    Specify an additional element for the application version.

  • Signing

    You do not have to specify these properties, because the certificate will be created during the iOS package built by the DevExtreme Build Package wizard (see below). If you have already obtained a certificate, you can specify it here. In this instance, it will be used by the DevExtreme Build Package wizard automatically.

  • App Icons and Splash Images

    Assign the icons and splash images to be built into the application's native package. To learn about image recommendations, refer to the Launcher Icons and Supporting Multiple Screens articles.

  • Application Template

    Specify a custom PhoneGap application template for the Android native package. When going through the Build Package wizard, this template will be used as a base for building a native package for the application.

Now, you can easily create a native Android package with your application right from Visual Studio. Right-click the application project and choose Build Native Packages.... The Build Package wizard will run.

Build For Android

Choose Android and go through all the wizard steps. As a result, you will get a file that is ready to be loaded to the AppStore. For details on the requirements for an Android application release, refer to the developer.android.com site.

Watch Video

Build Package for Win8Phone

As you were developing this application, you included layouts and style sheets specific to the Win8Phone platform. The next step is to set the project properties required for building a native Windows Phone package. To do this, right-click the application project in the Visual Studio Solution Explorer and choose Properties, then specify the properties that are presented in the Windows Phone package tab.

Win8Phone Package Properties

  • Packaging
    These properties are analogous to the properties from the app manifest file for the Windows Phone.

  • App Icons and Images

    Assign the icons and splash images to be built into the application's native package. To learn about image recommendations, refer to the Tile design guidelines for the Windows Phone article.

  • Package localization

    If you localize your application, specify the application's languages so that they are available for end users in the Windows Phone Store.

  • Application Template

    Specify a custom PhoneGap application template for the Windows Phone native package. When going through the Build Package wizard, this template will be used as a base for building a native package for the application.

Now, you can easily create a native Windows Phone package with your application right from Visual Studio. Right-click the application project and choose Build Native Packages.... The Build Package wizard will run.

Build For Win8Phone

Choose Windows Phone and go through all the wizard steps. As a result, you will get a file that is ready to be loaded to the Windows Store. For details on the requirements for a Windows Phone application release, refer to the Windows Phone Dev Center.

Watch Video

Build Package for Tizen

As you were developing this application, you already included layouts and style sheets specific to the Tizen platform. The next step is to set the project properties required for building a native Tizen package. To do this, right-click the application project in the Visual Studio Solution Explorer and choose Properties, then specify the properties that are presented in the Tizen package tab.

iOSPackage Properties

  • Signing

    To sign your application so that it can be deployed to the Tizen Store, specify a certificate file here. To generate a certificate file, use the Certificate Generator tool from the Tizen SDK.

  • Application Icon

    Assign the icon that will be built into the application's native package. To learn about image recommendations, refer to the https://developer.tizen.org/ site.

Now, you can easily create a native Tizen package with your application right from Visual Studio. Right-click the application project and choose Build Native Packages.... The Build Package wizard will run.

Build For iOS

Choose Tizen and go through all the wizard steps. The result will be a native package that is ready to be loaded to the Tizen Store.

Prepare Zip for PhoneGap Build

The projects based on the Basic and Mobile application templates can be built for any platform using the build.phonegap.com.

To set the cordova version and list custom plugins that you use in your app, use the project's properties. To do this, right-click the application project in the Visual Studio Solution Explorer and choose Properties, then specify the properties that are presented in the Zip package tab.

Zip Package Properties

  • Cordova version
    Specify the cordova version that you are going to use.

  • Plugins list
    List the third-party plugins that you use in this project.

To prepare a zip package for the PhoneGap Build, right-click the application project and choose Build Native Packages... The Build Package wizard will be invoked.

ZIP Build

Choose Zip and a PhoneGap package will be generated automatically.