Source Freeze

  • Home
  • iOS
  • Swift
  • Cross-Platform
  • About
  • Contact
Home » Multi-Device Hybrid apps using visual studio Cordova – Getting Started

Multi-Device Hybrid apps using visual studio Cordova – Getting Started

September 1, 2014 by Source Freeze Leave a Comment

Microsoft announced to adding support for popular Apache Cordova framework from visual studio so user can easily build application for iOS, android, windows phone and windows platforms, this makes every hybrid application developers to be happy. I hope most of them already known about the Apache Cordova, still you not heard about Apache Cordova, don’t worry here is short introduction about Apache Cordova framework.

what is Apache Cordova framework

Apache Cordova it is a open source cross-platform mobile application development framework using the HTML5, JavaScript and CSS, so  it makes user can create native applications without knowledge of native programming like Objective-c, java, C#.  many of them confused cordova framework with phonegap,  cordova and phonegap frameworks are almost same but it is having minimal difference, again i am not like to confuse 🙂 you can find the detailed answer here.

Multi-Device Hybrid apps using Visual Studio Cordova

Currently microsoft released ctp 2.0 extension for multi-device hybrid apps using visual studio cordova along with visual studio update 3, in this release microsoft fixed more then 300 bug fixes and added support for windows 7 desktop, in previous release of ctp 1.0, 1.1 and 1.2 it only support windows 8.1 Desktop, so now user can create multi-device hybrid apps using visual studio cordova without upgrading their current OS.

It is easy to configure the ctp 2.0 extension, to install and configure the multi-device hybrid extension please follow this microsoft official documentation.

 Create first multi-device hybrid apps using visual studio cordova

The Multi-Device hybrid apps project template available for both JavaScript and TypeScript and provide the standard cordova blank project, along with this user can add their favorite HTML/JavaScript frameworks like JQuery Mobile, Kendo UI, ionic etc..,

when create a new project in visual studio, you will see the screen like below, from JavaScript choose Multi-Device hybrid apps,

create multi-device hybrid apps using visual studio cordova

while creating a new project make sure you not use spaces in project  name and saved project directory, for multi-device hybrid apps visual studio will not allow spaces.

 

the created multi-device hybrid apps contain the following folders

multi-device hybrid apps solution explorer

css – used to add application style sheet files.

images – suggested image location for application

merges – for platform specific code

res – used to add platform specific appicon, splash screen and certificates

scripts –  used to add application scripts files.

Configure the Multi-Device hybrid apps

Config.xml file is used to configure the multi-device hybrid apps,  double click the config.xml file to open the configuration designer.

multi-devicy hybrid apps configuration

if you want to use any plugins into your applications,  you must have to select the appropriate plugin in the plugin section, for eg if  you like to use camera plugin, must have to enable camera api in the plugin list.

multi-device hybrid apps using visualstudio plugin liist

And you can add the platform specific content  using res folder in the created application.

res\icons\platform  –  contains the app icons for each platform
res\screens\platform  – contains splash screens for each platform

in specified folder already having the default images, all the contained image name  represents the platform and specification of the image.

Running Multi-Device hybrid apps using visual studio cordova

For running the Multi-Device hybrid apps, visual studio added Supported platform section, from this list user can select iOS, Android and windows platforms.

multi-device hybrid apps supported platforms

 

and also user can run the applications on Device, Simulator and Ripple Simulator. you can directly install the application into android and windows by connecting the device to your pc

 

multi device hybrid apps device and simulators

for installing the iOS application into device have to configure the ios remote agent in mac os, the installed mac os act as server by specifing the by server ip address into the below location.

Debug –> options and settings –> Multi-Devic hybrid apps

multi-device hybrid apps ios configuration

and user can use ios simulator, but it will open the application on the specified mac server.

if you are selected iOS Ripple simulator you can the see the output like below. and also you can debug the application like native.

multi-device hybrid apps running into android ripple simulator

Filed Under: cordova, cross-platform, Hybrid, Mobile App Development, phonegap, visual studio - plugin

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • How to Generate random numbers in JavaScript
  • How to Scroll to an Element in a React Component?
  • How to get a Date without the Time in JavaScript
  • How to modify url without reloading the page using javascript
  • How to disable server side rendering in nextjs
  • How to get a file type from URL in JavaScript

Recent Posts

  • How to Generate random numbers in JavaScript
  • How to Scroll to an Element in a React Component?
  • How to get a Date without the Time in JavaScript
  • How to modify url without reloading the page using javascript
  • How to disable server side rendering in nextjs
  • How to get a file type from URL in JavaScript

Recent Comments

    Tags

    beginner colon cross-platform es6 function html ionic iOS javascript mobile application development nextjs objective-c swift switch ternary typescript uiwebview Visual Studio plugin web developer

    Copyright © 2025 Source Freeze