Migrate Sencha Touch app from iOS to Android and Windows

Question

I am a hardcore Android developer new to Sencha Touch, Windows app development and VisualStudio environments. So please bear with the lengthy description of the problem, just did not want to miss any crucial detail.

I have received an old Sencha Touch 2.1 (Cmd 3.0) based app that has been running on ipad (iOS), developed by someone from Kepler-452b. I recently ported the app to Android by copying the project contents to an android cordova project (www folder) and is working without a problem on a Nexus 10 tablet. I started facing issues while trying to migrate this for Windows using VisualStudio 2013.

The intention is to create a Windows Store app out of the existing code that can run on a Win 8/8.1 PC or a HP Omni 10 tablet.

Steps followed:

1. Create sample sencha app

   >sencha generate app sample ../sample
   

2. Initialize cordova

   >sencha cordova init

3. Update app.json to add windows platform

   "platforms": "windows"

4. Build for native packaging

   >sencha app build native

5. Import the solution 'CordovaApp.sln' generated at \cordova\platforms\windows to VS2013

6. Run the project CordovaApp.Windows80 inside VS and it slaps a "Unable to add dynamic content" exception due to the Windows CSP

7. Wrap the calls to "document.write" with MSApp.execUnsafeLocalFunction() in the minified microloader script inside index.html and run again. This successfully launches the sample sencha touch app as a store app (the icons in the tab bar for 'Home' and 'Get Started' tabs are replaced with a 'H' and 'R' though). Both IE and chrome browsers render the app beautifully with the icons

8. In Windows explorer, delete the contents of the \cordova\platforms\windows\www folder except the cordova.js and cordova_plugins.js

9. Copy the contents of my old sencha project to the www folder, build and launch the app inside VS. "Unable to add dynamic content" again!

10. Inside /www/touch/microloader/development.js, update "function write(content)" to wrap the document.write with MSApp.execUnsafeLocalFunction() and run; another exception pops up: "document.body does not exist at this point" - google suggested that this could be due to an old framework version

11. Replace the old 2.1 "touch" folder inside the project with the new 2.4.0 "touch" folder from my sencha workspace and run again

Now there are no errors in the console, but the app only shows a white screen after the cordova splashscreen. If I replace contents of my Main.js with that from the sample sencha application, the screen is still white! By adding a 'initialize' event listener, I confirm that the view is being loaded

I am using Sencha Cmd 6.0.0 and touch-2.4.0

I ve been stuck with this for more than a week now to no avail. Had a look in stackoverflow here, but the instructions are for Ext JS and not Sencha Touch. No idea how the OP fixed the issues.

I am not sure if this is even the correct approach to migrate an old sencha touch app to a windows store app.

Any help would be much appreciated.

Answer 1

First, I'd revert your workarounds and simply add the Windows Store Dynamic Content Shim library to your project. It is specifically designed to improve compatibility of web frameworks with Windows apps and resolve the problems you are encountering. It will only activate on Windows so it won't add overhead if you're running on Android or iOS. I'd start there as it might resolve most if not all of your problems - more than likely one of your updates above is causing the problem or there's another one that just isn't causing an error.

You should also verify all of the underlying Cordova plugins you are using support Windows as that could be causing a JavaScript exception that is before rendering occurs given how Sencha works.

Finally, note that Cordova plugin code is not platform agnostic - so you cannot safely just copy the contents of an Android project to another platform. (Android to iOS, iOS to Windows, or whatever.) It sounds like the steps you took should have worked, but be aware that you can't copy plugin code itself from one native project type to another. The Cordova Command Line Interface that most of these tools use will automatically add the native and web plugin correct code to your project based on the platform you are building.