Transfer a Sencha Touch application from iOS to Android and Windows devices

I am a dedicated Android developer who is diving into the world of Sencha Touch, Windows app development, and VisualStudio environments for the first time. Please excuse the detailed explanation of my problem, as I want to make sure all crucial details are covered.

The challenge I'm facing involves migrating an old Sencha Touch 2.1 (Cmd 3.0) based app designed for iPad (iOS), created by someone from Kepler-452b, to work on Android devices. I successfully transferred the app to an Android Cordova project in the "www" folder and it functions flawlessly on a Nexus 10 tablet. However, when attempting to migrate this app to Windows using VisualStudio 2013, I encountered some issues.

The goal is to transform the existing code into a Windows Store app that can run on Win 8/8.1 PC or an HP Omni 10 tablet.

Here are the steps I followed:

  1. Create a sample Sencha app

    >sencha generate app sample ../sample

  2. Initialize Cordova

    >sencha cordova init

  3. Update app.json to add the 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. Running the project CordovaApp.Windows80 inside VS triggers an "Unable to add dynamic content" exception due to the Windows CSP

  7. To resolve the issue, wrap the calls to "document.write" with MSApp.execUnsafeLocalFunction() in the minified microloader script inside index.html. This successfully launches the sample Sencha Touch app as a store app, although some tab icons get replaced. The app renders beautifully in IE and Chrome browsers.

  8. In Windows Explorer, delete the contents of the \cordova\platforms\windows\www folder except for 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. Encounter "Unable to add dynamic content" once again!

  10. In /www/touch/microloader/development.js, update "function write(content)" to wrap document.write with MSApp.execUnsafeLocalFunction(). Another exception arises: "document.body does not exist at this point," possibly indicating an outdated framework version.

  11. Replace the old 2.1 "touch" folder with the new 2.4.0 "touch" folder from my Sencha workspace and try running again.

Currently, there are no errors in the console, but the app only displays a white screen after the Cordova splash screen. Even by swapping out Main.js contents with those from the sample Sencha application, the screen remains blank. Adding an 'initialize' event listener confirms that the view is being loaded.

I am utilizing Sencha Cmd 6.0.0 and touch-2.4.0.

I have been grappling with this issue for over a week with no success. I checked StackOverflow here, but the guidance pertains to Ext JS rather than Sencha Touch. I'm unsure how the original poster resolved their issues.

I'm uncertain if my current approach is the right way to migrate an old Sencha Touch app to a Windows Store app.

Any assistance would be greatly appreciated.

javascriptextjswindows-store-appssencha-touchvisual-studio-cordova

Answer №1

To start off, my suggestion would be to undo any makeshift solutions you've applied and instead include the Windows Store Dynamic Content Shim library in your project. This specialized library is meant to enhance compatibility between web frameworks and Windows apps, addressing the issues you're currently facing. The nice thing is that it will only kick in on a Windows platform, so you won't incur any extra overhead if you're running on Android or iOS. Beginning with this step might resolve most, if not all, of the issues at hand - chances are one of the updates you made earlier is causing trouble or there's an overlooked error lurking somewhere.

Furthermore, ensure that all the Cordova plugins you're leveraging are compatible with Windows, as they could potentially trigger a JavaScript error before Sencha has a chance to render the content.

Lastly, keep in mind that Cordova plugin code isn't universally applicable across all platforms - you can't simply copy code from one native project type to another (e.g., moving from Android to iOS, iOS to Windows, etc.). Although your approach seemed correct, do note that transplanting plugin code directly between different native projects isn't recommended. Most of these tools rely on the Cordova Command Line Interface, which automatically injects the necessary native and web plugin code tailored for the platform you're targeting.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Breaking Down and Optimizing your Code with Destructuring and

Currently, I am performing some basic destructuring in Javascript: //@flow "use strict"; (function(){ const {a,c} = check(true); })(); function check(bool:boolean):{|a:string,c:string|}|{||}{ if(bool){ return { a:"b", c:"d" } ...

javascriptflowtypeflow-typed

Directives for conditions if Internet Explorer is greater than or equal to 9, or if it is not

Embarking on a new project, I find myself in the unfortunate position of having to support IE7 & IE9. However, my goal is to eventually phase out IE7 support smoothly. Ideally, I aim to utilize the latest versions of libraries wherever possible. < ...

javascriptjqueryhtmlinternet-explorer

Is there a way to create a comprehensive list of all the possible winning combinations in a game of 4-Dimensional Connect Four?

Currently, I am developing a 4D Connect Four game using Javascript. The game can be accessed here. My next goal is to incorporate win-checking functionality. To simplify the process and save time, my plan is to pre-create a comprehensive list of all poten ...

javascriptalgorithm

Navigate to a new tab using this.router.navigate

Is there a way to redirect the user to a specific page with ${id} opening in a new tab, after clicking a button in an angular material dialog box? I want to leave the dialog box open while querying the new page. Currently, the redirect happens but not in a ...

javascriptangularangularjstypescriptangular-material

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

javascriptcssvue.jsd3.jssvg

When attempting to import and utilize global state in a component, the error message "Cannot iterate over null object"

I am in the process of setting up a global state to keep track of various properties that I need to pass down to multiple components. const initialState = { username: '', selectedCategory: null, categoriesList: [], createdTaskTopi ...

javascriptreactjs

Change Observable<String[]> into Observable<DataType[]>

I'm currently working with an API that provides me with an Array<string> of IDs when given an original ID (one to many relationship). My goal is to make individual HTTP requests for each of these IDs in order to retrieve the associated data from ...

javascriptangularrxjspipeobservable

Adjust the height setting of the React-Highcharts viewport

My initial configuration for highcharts looks like this:- function getInitialHighChartsConfig(chartType) { return { credits: false, chart: { type: chartType, height: 325, }, title: { text: '', useHTML: tr ...

javascriptreactjshighcharts

Encountering an error with unexpected token in jsdom while utilizing babel and npx

I am looking to perform canvas tests exclusively in node.js. Here is my package.json { "name": "test", "description": "Test", "version": "0.1.0", "author": "anthony@work", "dependencies": { "canvas": "^1.6.7", }, "devDependencies": { ...

javascriptnpmbabeljs

Django: Is there a way to modify the PayPal script for pay upon arrival?

I currently do not wish to accept online payments on my e-commerce site. Instead, I would like the courier to handle package delivery and collection of fees. How can I modify the PayPal script to bypass validations and only register payments upon arrival? ...

javascriptpythonhtmldjango

Adjust font size using jQuery to its maximum and minimum limits

My jQuery script enables me to adjust the font-size and line-height of my website's CSS. However, I want to restrict the increase size to three clicks and allow the decrease size only after the increase size link has been clicked - ensuring that the d ...

javascriptjquerycssfontsfont-size

Create a feature that allows users to view photos similar to the way it

I want to incorporate a Twitter feed on my website that displays images posted. Instead of having the images redirecting users to Twitter when clicked, I would like them to reveal themselves underneath when a link labeled "View Photo" is clicked, and then ...

javascriptjquerytwitterjquery-events

Creating a <Box /> component in MaterialUI with styled components is a great way to customize the design and layout of your

@material-ui/styles offers a different way to customize default styles: import React from 'react'; import Box from '@material-ui/core/Box'; import { styled } from '@material-ui/core/styles'; const StyledBox = styled(Box)({ ...

javascriptcssreactjsmaterial-uistyled-components

"Shopping just got easier with our new drag and drop feature! Simply drag items

I want to develop a Virtual Shopping Cart system. Items will be retrieved from a database. A virtual basket will be available. Users can drag items and drop them into the basket, similar to shopping in a mall. Once the user clicks the save button, the s ...

phpjavascripthtmlcodeigniter

Is there a way to include e.preventDefault() within an ajax call?

After the user clicks the submit button on my form, the handleSubmit function is triggered. However, I am having trouble calling e.preventDefault() inside my AJAX call due to its asynchronous nature. How can this issue be resolved? class FormRegister ex ...

javascriptajaxreactjs

Tips for correctly mentioning a user while using message.channel.send in discord.js

Looking for guidance on tagging a user properly using message.channel.send in discord.js? Here's the code I'm currently working with: function replaceAll(str, find, replacer) { return str.replace(new RegExp(find, 'g'), replacer) ...

javascriptnode.jsdiscord.js

What is the best way to extract a particular key value from a JSON object?

I am completely new to the world of APIs and just starting out with JavaScript. My goal is to retrieve the status of a server from a server hosting panel using an API. In order to achieve this, I need to log in by making a request to /API/Core/Login, extra ...

javascriptjson

Is it necessary to include a promise in the test when utilizing Chai as Promised?

Documentation provided by Chai as Promised indicates the following: Note: when using promise assertions, either return the promise or notify(done) must be used. Examples from the site demonstrate this concept: return doSomethingAsync().should.eventua ...

javascriptangularjsangular-promisechaichai-as-promised

Issue with making Flickr API request using XMLHttpRequest receiving an unsuccessful response

I'm having issues trying to retrieve a JSON list from Flickr using plain JavaScript and XMLHttpRequest. Here is an example of an AJAX call without a callback function that is not functioning properly: var url = "https://api.flickr.com/services/feed ...

javascriptjsonajaxxmlhttprequestflickr

Guide to creating AngularJS directive attributes without a right-hand side in hiccup code?

I'm currently developing an AngularJS application using markup in hiccup format. Here is a snippet of the markup: <div modal-show modal-visible="showDialog" .........></div> Below is the corresponding Hiccup I have created: [:div.modal. ...

javascriptangularjsclojurehiccup