Visual Studio 2017 Enterprise provides a feature called Live Unit Testing that enables developers to see live how changing C# and VB.NET code affects its corresponding unit tests. Among its features, it includes showing coverage information in the editor as you type, integration with the Test Explorer, including/excluding targeted test methods or projects for large solutions, quick navigation to failed tests. It works with MSTest, xUnit.net and NUnit, but only for .NET Framework, as support for .NET Standard has not been added yet.

Detailed information about this productivity tool is available in this blog post: Live Unit Testing in Visual Studio 2017 Enterprise. In this article, I will show how this feature help you when you do test driven development. For this purpose, I will create a class called Point3D that is supposed to model a point in 3-dimentional space, as part of a .NET Framework class library called ALibraryHasNoName. A separate unit testing project called ALibraryHasNoName.Test contains an unit testing class Point3DTest. Initially, these are empty.

To start the live unit testing you need to run go to Test > Live Unit Testing and press Start.

I will start by writing a test for the constructor of Point3D. The constructor is supposed to take three arguments, representing the values for the coordinates in the three dimensions, X, Y and Z.

Since the Point3D class is empty, this line of code produces a compiling error. I can use the refactoring tools and create an implementation for the constructor.

After the code is added, when I navigate to the source code document I can see green check marks on the left of the code indicating lines of code covered by successful unit tests.

I don’t like the default names v1, v2, v3 and the fact that these values are represented by fields. I want to use properties called X, Y and Z. Therefore I am refactorying the generated code as shown below:

Back to the unit test, I am adding a few tests for these properties, making sure I get back the values I passed to the constructor.

The result when switching back to the Point3D class is that these properties are now covered by 1 test.

Next thing I want to do is add a static property/field to represent the origin of the 3D space, i.e. the point at (0,0,0). For this I am writing a new test method with the content shown below. Visual Studio suggests several ways to generate the missing symbol: as a property, field or read-only field, which I find the closest to what I want so I am going with this.

The code is generated and I get a visual indication that it is already covered by 1 test.

I want to add tests to make sure the three properties are all 0 as expected.

Back to the source code I can see now that each property is covered by two succesful tests at this point.

If you click the passing indicator, it shows the tests that cover it, whether they passed or failed, and the duration of their execution.

The last thing I want to do for this demo is adding a method to do a translation of the point in the 3d space. I want to call this method Offset. Therefore, I start with a new test method, called TestOffset where I create a point and invoke the new method. Visual Studio suggest to generate the missing method and I will go with the suggested code.

At this point the test is failing. Instead of a green check mark on the left, I see red crosses, indicating a failure.

These marks can be used to get more information about the failure. It turns out that the method is throwing an exception, that is not caught, so the test is failing.

Next, I will change the implementation of the Offset method to reflect what it is expected from it, and the red crosses turn instantly into green check marks.

To check the effect of the function, I am adding tests for each of the three properties of the class.

Going back to the class source code I can see that each of the three properties now has three successful tests that cover them.

Although this post only covers some of the capabilities of live unit testing I hope it shows how helpful it can be in writing unit tests in general and with TDD in particular. For details about the features check the official documentation.

, , , Hits for this post: 332 .

Visual Studio 2017 has been officially launched today. The release notes contain a summary of all the changes available in the new version. This post is focused on the changes for C++ development.

The Visual C++ team has released a series of blog posts to document some of the new features. Here is a list of them:

Of all the changes and new features in VC++ 2017 (that are described in details in the articles mentioned above) there are several that I want to mention:

  • The C++ compiler is C++14 complete, but still lacks several C++98 and C++11 features. It also contains some features added to C++17.
  • The standard library implementation contains C++17 features including: any, optional, variant, string_view, make_from_tuple(). The complete list of improvements is available here.
  • Visual C++ 2017 runtime is compatible to the Visual C++ 2015 runtime. That means you can link to libraries build with VC++ 2015.
  • The C++ compiler version is 19.1, a minor release of the Visual C++ 2015 compiler (version 19.0). That means _MSC_VER is 1910. On the other hand, MFC and ATL are still on version 14.0 as in Visual C++ 2015. That means _MFC_VER and _ATL_VER ar both 0x0E00.
  • It is possible to open code from any folder with the Open Folder feature and get IntelliSense, navigation, building, and debugging capabilities without creating a solution and project first.
  • You can build your projects with CMake that is now supported in Visual Studio.
  • There is a built-in support for using another C++ compiler, such as Clang or GCC (mainly intended for building projects that target Android, Linux or Mac).
  • The C++ Core Checkers for enforcing the C++ Core Guidelines are now distributed with Visual Studio.
  • Installation of Visual Studio has been redesigned. Components are delivered in “workloads”, but individual components can be added or removed. For C++ there are five workloads: Universal Windows Platform development, Desktop Development with C++, Game development with C++, Mobile development with C++, and Linux development with C++.
  • Installation folder is not c:\Program Files (x86)\Microsoft Visual Studio 15.0 as with previous version, but c:\Program Files (x86)\Microsoft Visual Studio\2017\.

Here are a couple of screenshots from installing Visual Studio:

, , , Hits for this post: 1106 .

The Chromium Embedded Framework (CEF for short) is an open source framework for embedding Chromium-based browsers in other applications. The base implementation is targeting C/C++ applications but ports for other languages exist (these include Java, C#, Delphi, Python).

The nightly builds (for various systems and platforms) of CEF are available for download at https://cefbuilds.com/. These include:

  • CEF source code necessary to build your apps with
  • CEF dynamic and static library files (together with its dependencies) that you must use in your application
  • C++ wrappers for the C API
  • source code of two sample applications, one called CefSimple and one called CefClient
  • symbol files for debugging binary distribution of CEF
  • build of CefClient sample app with all dependencies and resources

Building the 64-bit version of the sample applications is not straight forward though. In this article I will show what you have to do make it work.

Prerequisites

The following prerequisites are necessary:

  • Visual Studio 2013
  • CMake tools

Notice: Though CMake should be able to generate projects for Visual Studio 2015, I was not able to make it happen. Moreover, the cef_sandbox.lib lib is built with Visual C++ 2013 which means the modules that are linking it should also be built with the same tool set.

You should download the nightly build of the development branch for Windows 64 bit and unzip it.

Create Visual Studio projects

To create Visual Studio projects run the following command from the CEF’s main folder in a console:

This will create:

  • a VC++ 2013 solution called cef.sln in the main folder
  • VC++ 2013 project files for libcef_dll, cefsimple, cefclient
  • two additional project files called ALL_BUILD and ZERO_CHECK

This is how the content of the CEF folder looks after generating the Visual Studio project and solution files.
cef3

This is how the Visual Studio solutions looks.
cef1

Create 64-bit configurations

Though the download is suppose to represent the 64-bit version of the framework, and the DLLs and LIBs in the Debug and Release folder (i.e. the CEF builds and its dependencies) are indeed built for the x64 platform, the generated projects do not have configurations targeting the x64 platform.

What you have to do is:

  • create configuration for targeting the x64 platform (by copying the settings from x86)
    cef7
  • change the Output Directory for all projects and configurations to be $(SolutionDir)$(Configuration)\ which means the output folder will be the existing Debug or Release folder from the main CEF folder.
    cef8
  • for the libcef_dll project change the Librarian > All Options > Additional options to /machine:X64 %(AdditionalOptions)
    cef9
  • for the cefsimple and cefclient projects change the additional dependencies settings to point to libcef.lib, libcef_dll_wrapper.lib and cef_sandbox.lib, instead of the relative paths as in the project.
    cef10
    This is how the list should look for all platforms and configurations:
  • for the cefsimple and cefclient projects add $(SolutionDir)$(Configuration)\ to the Library Directories for all configurations and platforms
    cef11
  • modify the Post Build Event for the cefsimple and cefclient projects to no longer copy files from the solution’s Debug and Release folders to the project’s Debug and Release folders.

    Initially, the post build event looks like this (for Debug configurations)

    It should be changed to look like this (beware at the output folder indicated by outputresource; it should be the Debug\Release folder in the main folder):

Resources

In the main folder there is a sub-folder called Resources. The entire content of this folder must be copied to the out folders, Debug and/or Release. These files are necessary for the sample applications to run properly.

Building and running

With all these in place you can build the projects. The build should succeed and the content of the Debug folder for instance should look like below.
cef4

You can then run the two sample applications. This is how cefsimple looks.
cef5

This is how cefclient looks.
cef6

, , , , , Hits for this post: 11514 .

The C# Interactive window has been made available again in Visual Studio with the first update to 2015, this time as a REPL window. You can type or paste and execute C# code, and it includes support for adding references to external DLLs and using namespaces. The window is intended for rapid prototyping C# code.

It is available from Views > Other Windows > C# Interactive.
csrepl1

Here is a simple example where we declare an integer variable, increment its value and then print it.
csrepl3

You can write any C# code including lambdas and LINQ queries.
csrepl4
You can also define types and write functions.
csrepl8
csrepl9

If you want to use a namespace you must use the using directive just as you do in C#.
csrepl5

For references to additional DLLs (whether from the framework or custom) you use the #r command specifying the path to the module.
csrepl6
After you referenced a module you can use its namespaces and the types available there.
csrepl7

For a list of all commands use the #help command.

, , , , Hits for this post: 11525 .

Visual Studio 2015 comes with many new features and improvements in the IDE, the debugger or language compilers. Obviously, there are more than three things I like in the new IDE, but three things have caught my attention from the very beginning.

The Error Window

vs2015error1
One of the things that bothered me the most about the error window was the mixture of errors/warnings/messages from both MSBuild and IntelliSense. But I don’t usually care about the later and their presence in the error window is usually annoying me. This is now fixed and you can select to see messages from Build, IntelliSense or both.
vs2015error2
In addition to this you can apply even more filtering:

  • You can select the source of the messages: Entire Solution, Current Project, Open Documents or Current Document.
    vs2015error3
  • You can search the error list, and the search includes the text in all the output list columns (Code, Description, Project, File or Line).
    vs2015error4
  • You can individually show or hide Errors, Warnings and Message (but this feature has been available for many years).

The Find in Files Append

I’m working with large source bases and I often need to do find in files, usually going from search to search until I find what I need. The problem was there were only two output windows for the search results and when you need to do a 3rd you had to discard one of the previous searches while you might still needed the results. I have requested for many years that Visual Studio should support more than two find results windows. I actually created a User Voice request a few years ago.

In Visual Studio 2015 they have implemented an append feature, were you could append your search results to one of the existing two windows.

vs2015find1

As a result the old search results are not discarded, but aggregated in a the form of a tree list in the search results window.

vs2015find2
vs2015find3

Though this is not what exactly I was expecting it provides the feature I was looking for with probably minimal changes to the Visual Studio IDE.

The Inline Create Definition (for C++)

I’m not sure how this feature is actually called, but what it does is creating a definition for a function in the source file from the declaration in the header and displays it in a boxed document inside the header document. Here is an example:

You declare a function/method in a header file. Visual Studio figures out the definition is missing.
vs2015inline1
Use the Quick Actions (CTRL + .) to create a definition of the symbol in the source file.
vs2015inline2
The definition is added to the source file that is opened as a document in a box just below the function declaration.
vs2015inline3
I find this very useful to get going with a new function. Of course for writing larger functions you’ll probably switch to the actual document tab where the source file is opened.

With these new features only Visual Studio has become much more productive for me. And there are plenty more.

, , Hits for this post: 13146 .

I have tried to assemble together information about the Visual C++ releases, the compiler and the frameworks (MFC and ATL). You can find these on many places, but it is often incomplete or focused on something particular (Visual Studio, C++ compiler, framework, etc.).

The table below is the result of this effort. It is incomplete because it’s not easy to find information about products released more than two decades ago, but if you can help filling in the gaps please drop a comment with the information you have and I will update the table.

UPDATE: Added information about Visal C++ 2017.

Product Codename Release date C++ version _MSC_VER MFC version _MFC_VER ATL version _ATL_VER
C 1.0 100
C 2.0 200
C 3.0 300
C 4.0 400
C 5.0 500
C 6.0 1990 600
C/C++ 7.0 1992 700 1.0 0x0100
Visual C++ 1.0 Caviar 1993 1.0 800 2.0 0x0200
Visual C++ 1.1 Barracuda 1993 1.1
Visual C++ 1.5 Dolphin 1993 1.5 850 2.5 0x0250
Visual C++ 1.51 1.5
Visual C++ 1.52 1.52
Visual C++ 1.52b 1.52b
Visual C++ 1.52c 1.52c
Visual C++ 2.0 2.0 900 3.0 0x0300
Visual C++ 2.1 2.1
Visual C++ 2.2 2.2
Visual C++ 4.0 Olympus 1995-12-11 4.0 1000 4.0 0x0400
Visual C++ 4.2 4.2 1020 4.2 0x0420
1.0 0x0100
1.1 0x0110
2.0 0x0200
Visual Studio 97 Boston 1997-04-28 5.0 1100 4.21 0x0421 2.1 0x0210
Visual Studio 6.0 Aspen 1998 6.0 1200 6.0 0x0600 3.0 0x0300
Visual Studio .NET 2002 Rainier 2002 7.0 1300 7.0 0x0700 7.0 0x0700
Visual Studio .NET 2003 Everett 2003 7.1 1310 7.1 0x0710 7.1 0x0710
Visual Studio 2005 Whidbey 2005 8.0 1400 8.0 0x0800 8.0 0x0800
Visual Studio 2008 Orcas 2008 9.0 1500 9.0 0x0900 9.0 0x0900
Visual Studio 2010 Dev10 2010 10.0 1600 10.0 0x0A00 10.0 0x0A00
Visual Studio 2012 Dev11 2012-08-15 11.0 1700 11.0 0x0B00 11.0 0x0B00
Visual Studio 2013 Dev12 2013-10-17 12.0 1800 12.0 0x0C00 12.0 0x0C00
Visual Studio 2015 Dev14 2015-07-20 14.0 1900 14.0 0x0E00 14.0 0x0E00
Visual Studio 2017 Dev15 2017-03-07 14.1 1910 14.0 0x0E00 14.0 0x0E00

Several notes on the history of VC++:

  • Visual Studio 97 was the first product that bundled together several products (Visual C++, Visual Basic, Visual J++)
  • Visual Studio 6.0 is the only version of Visual Studio that was not named after the release year, but the version number
  • MFC was first release in 1992 with C/C++ 7.0
  • MFC 6.0 released with Visual Studio 6 did not change the name of the MFC DLLs, that were still named mfc42.dll
  • ATL was first released in between Visual C++ 4.2 and Visual Studio 97. The first release of the framework to be included in a product was ATL 2.1 released with Visual Studio 97
  • Visual C++ version 3.0 was skipped to 4.0 to align the product version with the MFC version, whose next version was 4.0
  • Visual Studio 2015, the compiler and framework version are 14.0 and not 13.0, a number which was skipped (for the good old superstitions)
  • Visual Studio 2017, the compiler version is 14.1, a minor version of 14.0 from Visual Studio 2015, and the runtime is backwards compatible to VC++ 2015. MFC and ATL version remain 14.0 as in Visual Studio 2015.
  • _MFC_VER and _ATL_VER macros were initially incorrectly documented in MSDN as 0x1000 instead of 0x0A00

References

, , , Hits for this post: 19052 .

If you work on a Apache Cordova project in Visual Studio 2013 using Visual Studio Tools for Apache Cordova CTP 3 or 3.1 you should know there are important breaking changes in migrating the project from Visual Studio 2013 to Visual Studio 2015. The project can be migrated, but you have to do everything manually, as Visual Studio is not able to apply the changes automatically.

First of all, Visual Studio Tools for Apache Cordova CTP3.x are not longer supported in Visual Studio 2013 in the first place. If you try to install Update 5 it will prompt you to remove it before continuing.
vs2013u5
This is explained in the release notes for Update 5.

Also note: All prior releases of the Tools for Apache Cordova are incompatible with Update 5. If you have previously installed a Tools for Apache Cordova CTP extension, you must uninstall that extension before installing Visual Studio 2013 Update 5. If you require Apache Cordova support, we encourage you to try Visual Studio 2015.

The options for those developing with the VS tools for Apache Cordova in VS2013 are either to switch to Visual Studio 2015 or not install the last update and continue to work with CTP 3.x in VS2013.

In this article I will show you how to migrate a Cordova application from VS2013 to VS2015 and I will exemplify with a test application.

I have this app called TestApp. It’s built with Ionic and AngularJS. It is a JavaScript app, not a TypeScript app, but this works just the same regardless what language you use. It has the following project structure, with the Javascript source code in a folder called app, the libraries in libs and the templates in views. There are other folders apart from the ones VS has created, mainly css and images.

vs2013proj1 vs2013proj2

The application is just a test, it doesn’t do anything but it works for both Android and iOS.

ripple1 ripple2

When you open this project in Visual Studio 2015 it is not loaded. Visual Studio complains that “This project is incompatible with the current edition of Visual Studio.”
vs2015proj1
You have to covert it manually in order to make it available for Visual Studio 2015. Fortunately, the steps to do this are documented, but not in MSDN as one might expect, but on GitHub. There is a document called Known Issues – Visual Studio 2015 that explains what has to be done.

  • Create a new empty Apache Cordova app. The only purpose of this app is to copy from files to your actually project.
    vs2015proj2
  • Copy the .jsproj and taco.json files into the project folder of the application you migrate. Make sure you overwrite the existing .jsproj with this new project file.
  • Delete the existing bin and bld folders
  • Create a folder called www
  • Move everything except for config.xml and folders merges, res and plugins to the www folder.

If you open the project again in Visual Studio 2015 it will work and you can build and run it. For my test application the new project looks like this.
vs2015proj3

You can see that the all the folders and files under the www folder appear automatically in the solution explorer. They are not added with a Content or Folder element in the .jsproj file. You can make a comparison of the old and new .jsproj and see how simplified the new file is.
jsprojcompare1

Another thing to notice here is that the NodeJS module used for building the project is no longer called vs-mda (i.e. Visual Studio Multi-Device Application) but vs-tac (i.e. Visual Studio Tools for Apache Cordova).
jsprojcompare2

However, when I tried to build I got the following error:

MSBUILD : cordova-build error BLD401: Error : BLD00401 : Could not find module ‘delayed-stream’] code: ‘MODULE_NOT_FOUND’. Please Go to Tools –> Options –> Tools for Apache Cordova –> Cordova Tools –> Clear Cordova Cache and try building again.

This might have been related to the version of Apache Cordova I had globally installed, i.e. 5.1.1. If you get the same install it via npm.

However, you may still get problems when you try to build for Android.

MSBUILD : cordova-build error BLD10205: Please install Android target “”
You may not have the required environment or OS to build this project
MDAVSCLI : error : cmd: Command failed with exit code 2

The Android target name is empty, but if you do a Rebuild you get more information and actual required target name:

[Error: Please install Android target: “android-21”.

Hint: Open the SDK manager by running: C:\Program\ Files\ (x86)\Android\android-sdk\tools\android.BAT
You will require:
1. “SDK Platform” for android-21
2. “Android SDK Platform-tools (latest)
3. “Android SDK Build-tools” (latest)]
C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\ApacheCordovaTools\vs-mda-targets\Microsoft.MDA.FileMirroring.targets(352,5): error MSB3073: The command “platforms\android\cordova\clean.bat” exited with code 2.

These can be installed using the Android SDK Manager. Make sure you select all the mentioned components.
android1
With these changes you can build successfully for Android.

One more thing here is the version of Apache Cordova used by vs-tac to build. vs-tac uses Cordova 4.3.1, but I already had Cordova 5.1.1 installed on my machine and used by vs-mda. If you have a newer Cordova version than 4.3.1 what you have to do instruct vs-tac to use this one in the taco.json file.

Replace the version 4.3.1 of the cordova command line interface with desired version (in my case 5.1.1). When you rebuilt it will install it and build with it.

Your environment has been set up for using Node.js 0.12.7 (x64) and npm.
—— Ensuring correct global installation of package from source package directory: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\ApacheCordovaTools\packages\vs-tac
—— Name from source package.json: vs-tac
—— Version from source package.json: 1.0.0
—— Package already installed globally at correct version.
—— Installing Cordova tools cordova@5.1.1 for project from npm. This could take a few minutes…

You can find the various Cordova versions installed under %APPDATA%\npm\node_modules\vs-tac\node_modules\cordova.
vstac3

For more information see:

, , , , Hits for this post: 19371 .

guidgen.exe is a small utility that comes with Visual Studio and generates GUIDs in a variety of formats. The problem with the tool is that it does not format GUIDs in plain text, which I happen to need many times (in source code, database tables, etc.) and I suppose is a feature needed by many developers. There are a couple of variants of the tool on Codeproject (GUIDGen Developer Studio AddIn and GUIDGen AddIn for Visual Studio.NET) but they lack some of the new formats supported by guidgen.

GUIDGEN.exe from Visual Studio

GUIDGEN.exe from Visual Studio does not have plain text formatting or case options.

Modified GUIDGEN has plain text formatting and case option but does not support all formats from Visual Studio’s GUIDGEN (i.e. C# and VB.NET Guid attribute format)

I have decided to create another modified version of GUIDGEN in order to support additional formats, including plain text, and also case options.

guidgen used to be available as an MFC sample, but that doesn’t seem to be the case any more. However, the sample from Visual Studio 2005 is still available on MSDN and I used that as a starting point. The result is a tool very similar to guidgen.exe from Visual Studio (2013 or 2015) but with additional features:

  • two more formats: __declspec(uuid("xxxxxxxx-xxxx...xxxx")) and plain text
  • case option: upper case (default) or lower case
guidgen2 guidgen3

The existing guidgen executable is available in the Common7\Tools folder of Visual Studio (i.e. c:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\Tools\ for Visual Studio 2013). You can replace that version with this build or put it somewhere else and keep it side by side by adding a new command from Tools > External tools. This might be more practical if you have several versions of Visual Studio installed.

guidgen-externaltools

Here are the downloads:
Guidgen-src (767) – Source code as Visual Studio 2013 solution
Guidgen-binaries (713) – Executables built with MFC as a shared library
Guidgen-mfcstaticlib-binary (758) – Executables built with MFC an a static library

, , , , , Hits for this post: 18325 .

Visual Studio 2015 is out and comes with lots of new features and improvements (see details here) but it also surprised me with what I call a demoting of C++ again to a second-class citizen, after some years when it looked like it regained importance at Microsoft. I’m saying Microsoft has demoted C++ because they made it an optional component in the installer, unlike C# and VB.NET that you cannot opt out and are installed by default with all configurations.

When you run the installer you can see there are two setup options:

  • Typical installation, that includes C#, VB.NET and desktop features, and
  • Custom installation, that allows you to select what components to install.

vs2015installertypical1
The typical configuration requires about 8GB of disk space. However, it only installs .NET based components (and of course other related assets). C++ is not part of those “desktop features” mentioned in the installer description. It does however install the C++ redistributable packages.
vs2015installertypical2

However, when you run Visual Studio after installation completes, all VC++ components are missing and require explicit installation.
vs2015vcpp2
vs2015vcpp1

To install VC++ you need to perform a custom installation. This can be done after a typical installation. A custom installation allows you to select what you want to install. These includes programming languages (VC++, VF# and Python Tools for Visual Studio), Windows and Web Development components, Cross Platform Mobile Development components and common tools. In total these require an additional 13GB of free disk space. However, with a custom installation you cannot opt out C# or VB.NET.
vs2015installercustom1

A good thing though is that the MBCS version of the MFC library is no longer a separate download, but made available with the Visual Studio installation. You must select the Microsoft Foundation Classes for C++ in the Custom installation to have it installed.

The conclusion I draw from the Visual Studio installation options is that C++ is not viewed as a first-class citizen language at Microsoft. I suppose they don’t think a “typical” developer using Visual Studio develops in C++ so they didn’t put it in the typical installation. On the other hand, they don’t provide us with the possibility to opt out .NET languages we don’t use. I’ve never developed anything in VB.NET and I don’t plan to. I don’t even see the need for such a language (just for some remote resemblance with VB6).

, , , , Hits for this post: 24092 .

When you create a Cordova project with Visual Studio Tools for Apache Cordova it generates a set of splash screens for all supported iOS (both iPhone and iPad) resolutions. These are found under res\screens\ios.

Visual Studio project showing the splash screen images.

Visual Studio project showing the splash screen images.

XCode project showing the splash screen images.

XCode project showing the splash screen images.

There are two things to notice here:

  • First, the names in Visual Studio are like screen-iphone-portrait.png or screen-ipad-portrait.png and in XCode are like Default~iphone.png or Default-Portrait~ipad.png.
  • Second, if you actually look at the files you’ll see they are not the same. The splash screens generated in VS are ignored and default Cordova images are used.
Default Visual Studio splash screen image for iPhone.

Default Visual Studio splash screen image for iPhone.

Default Cordova splash screen image for iPhone.

Default Cordova splash screen image for iPhone.

You can see the default Cordova splash screen image in the iOS built if you open the generated XCode project on the Mac where the iOS app is built.

Splash screen image in the XCode project generated by Cordova.

Splash screen image in the XCode project generated by Cordova.

The questions are: why are the file names different in Visual Studio and XCode, and why are the images not correctly copied from Visual Studio project to XCode project.

I’ll start with the second question. The problem here is that just because the files are in the Visual Studio project does not mean much. If you open the Cordova configuration file, config.xml, it only contains this (for a newly created blank project):

However, if you look at the Cordova documentation for images and splashes you’ll see the config.xml file should contain something like this:

The names here look like the ones that appear in the XCode project. But key is the platform element with its splash children. We have to add these to the config.xml file, but it can only be done by manually changing the configuration file, as Visual Studio Tools for Apache Cordova do not support this in the IDE yet.

Note: the Visual Studio names for the splash screens were used here, not the Cordova ones.

With this change, when you build, the right splash files are generated for the application.

XCode project with correct splash screen images.

XCode project with correct splash screen images.

This leads us to the first question: why are the file names different in Visual Studio and XCode and how are they mapped correctly? If you set the MSBuild output to Diagnostic, you’ll see something like this in the output:

1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-landscape-2x.png to res\screens\ios\screen-ipad-landscape-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-landscape.png to res\screens\ios\screen-ipad-landscape.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-portrait-2x.png to res\screens\ios\screen-ipad-portrait-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-ipad-portrait.png to res\screens\ios\screen-ipad-portrait.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-568h-2x.png to res\screens\ios\screen-iphone-568h-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-landscape-736h.png to res\screens\ios\screen-iphone-landscape-736h.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait-2x.png to res\screens\ios\screen-iphone-portrait-2x.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait-667h.png to res\screens\ios\screen-iphone-portrait-667h.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait-736h.png to res\screens\ios\screen-iphone-portrait-736h.png (TaskId:36)
1> —— Copied […]\BlankCordovaApp1\res\screens\ios\screen-iphone-portrait.png to res\screens\ios\screen-iphone-portrait.png (TaskId:36)

and

1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default~iphone.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default@2x~iphone.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-portrait.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Portrait~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-portrait-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Portrait@2x~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-landscape.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Landscape~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-ipad-landscape-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Landscape@2x~ipad.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-568h-2x.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-568h@2x~iphone.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait-667h.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-667h.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-portrait-736h.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-736h.png (TaskId:36)
1> Copying splash from /Users/theuser/remote-builds/builds/16782/cordovaApp/res/screens/ios/screen-iphone-landscape-736h.png to /Users/theuser/remote-builds/builds/16782/cordovaApp/platforms/ios/BlankCordovaApp1/Resources/splash/Default-Landscape-736h.png (TaskId:36)

Here is a table of the iOS splash screens with the mappings between Visual Studio files and Cordova files.

Resolution Device Model VS file Cordova file
320×480 iPhone 1st Gen, 3G & 3GS screen-iphone-portrait.png Default~iphone.png
640×960 iPhone 4 & 4S screen-iphone-portrait-2x.png Default@2x~iphone.png
640×1136 iPhone 5, 5C & 5S screen-iphone-568h-2x.png Default-568h@2x~iphone.png
750×1334 iPhone 6 screen-iphone-portrait-667h.png Default-667h@2x~iphone.png
1242×2208
2208×1242
iPhone 6 Plus screen-iphone-portrait-736h.png
screen-iphone-landscape-736h.png
Default-736h@3x~iphone.png
Default-Landscape-736h.png
768×1024
1024×768
iPad 1, 2 & Mini screen-ipad-portrait.png
screen-ipad-landscape.png
Default-Portrait~ipad.png
Default-Landscape~ipad.png
1536×2048
2048×1536
iPad Air & Mini Retina screen-ipad-portrait-2x.png
screen-ipad-landscape-2x.png
Default-Portrait@2x~ipad.png
Default-Landscape@2x~ipad.png

Note: Though the actual iPhone 6 devices are down-sampled to a resolution of 1080×1920, the splash images must have the size of 1536×2048 and 2048×1536 pixels.

Note: Also take notice that for iPhone 6 Plus, unlike all the other iPhone models, you must provide both portrait and landscape splash screens (just like with iPads).

But where are the mappings handled? In the cordova-lib module there is a file called ios_parser.js where you can find the following code:

This code shows an array of (source) splash screens as defined in the config.xml file and an array of pre-defined target splash screen files and their expected resolution. The splash screens in these arrays are mapped by their size (width and height) and source files are copied into destination files. This means that the actual source file names are not important, and in fact you can name your files in any way you want, with the right size they will be correctly mapped.

Note: Be aware of a subtle issue: just copying content from the Cordova documentation for images and splashes to your config.xml file and changing file names won’t work. The path in the Cordova docs looks like res/screen/ios/ while the Visual Studio project path is res/screens/ios/. The mismatch of screen and screens can lead headaches trying to figure out why splash screen images are not correctly setup.

, , , , , , Hits for this post: 17491 .