Thanks for all of the advice.

Rich_W_1 · ‎10-30-2016

I'm looking for advice regarding how to bring a mobile app I developed with appMobi up to the current Intel XDK standards. The old app is in the Apple App Store, but since one of the more recent iOS upgrades, is failing to let my users select a number from a html <select> control. I haven't been keeping up with the changes the Intel XDK platform has been going through. Basically I created the app a few years ago and then found myself
doing other things versus continuing to develop in the XDK. If I could easily determine why that one control stopped working and how to fix it and knew how to use the new XDK to build the solution and move it to the App Store - and if I was lazy - I'd probably take that approach. It just seems that it might be best to get current with the latest XDK and how it suggests to compose apps now and bring the old app up to the new standards. (Having said that, I'd love to know if anybody knew why a select control would have stopped working due to some iOS upgrade. The control is presented like a rolodex, they can spin it, but they can't click it and have it put a checkmark on it.)

My old app used these scripts in its index.html:

It specifically used these other things in its index.html:

and

and

</div>

It also used special jq.ui things like:

$('#carousel_Home').carousel

It uses typical functions like:
init, stopSplash, onDeviceReady, $.ui.ready

I've started to try to get current by downloading the latest XDK and reading as much as I can everywhere and also beginning to make changes - but it seems like I fight one thing right after another, especially things like exceptions due to missing or misplaced this or that. I thought it might be good to step back and ask for advice. The above was an attempt to illustrate what kind of app it is now. I want to largely keep it that way but want to update it where you think its necessary and/or wise. Thanks in advance.

PaulF_IntelCorp · ‎10-31-2016

Rich -- start a new project using the Cordova blank template and move your code into the www folder in that new project. A few things to note:

you know longer need to reference the xhr.js and appmobi.js scripts, those are obsolete
retain the reference to the cordova.js script from the blank template's index.html file
add your other index.html code and scripts into the blank template's index.html file
references to init-dev.js, app.js and init-app.js are optional, but can be useful
a more useful starting index.html file is available in this bigger blank template (esp. the comments)

If you use the init-dev.js file, then you can watch for the "app.Ready" event to start your app, otherwise, use the standard Cordova "deviceready" event to start your app. The "app.Ready" event that is created by init-dev.js watches for more conditionsand can be considered as a superset of the standard Cordova "deviceready" event. Set the "dev.LOG" parameter to "true" to get some useful console.log messages at startup from the init-dev.js file.

If you've used a lot of old appMobi APIs, or the old intel.xdk APIs, you'll have to update your app to use something equivalent. See this page for a little help with that > https://software.intel.com/en-us/xdk/docs/intel-xdk-api-cordova-plugin-methods-properties-events <

The most important thing to understand is that you are building a standard Cordova (aka PhoneGap) app. So the techniques for writing your app that apply to Cordova also apply to the XDK.

Regarding the debugging, start with the Simulate tab, try the Debug tab, or use remote CDT to get the most accurate debugging experience.

Also, use this search technique (with your favorite search engine) to find useful bits of information:

intel xdk docs my search phrase
intel xdk faqs my search phrase
intel xdk forum my search phrase

The URLs have been designed to get you a reasonably high hit-rate if you use that method of specifying your search.

Rich_W_1 · ‎10-31-2016

Thanks Paul.

I appreciate the effort that you put into the details of your advice. I'll give it a try and update this if I find a few more items might have been added to make it more complete. It sure looks like you thought of a lot of tips to give.

Thanks again,

Rich

Rich_W_1 · ‎11-07-2016

I'm working through it now and I have a question. Do I need to add lines like the following to my index.html file whenever I create a new Cordova app?

<div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>

The reason I ask is because when I include init-app.js as a script in my index.html I get an exception when it tries to find "listening", an exception that essentially hangs my app. I can also see it looked for id=deviceready before that and "received" after that.

I looked at the blank Cordova app and it doesn't use init-app.js. I also see that I'd only get the exception in my app if in my init-app.js I didn't comment out the call to app.init.debug.

These observations just make me wonder if I haven't done enough in my initial setup of my index.html for Cordova. I wonder what else I haven't done.

Thanks,

Rich

PaulF_IntelCorp · ‎11-08-2016

Any init-app.js file that you find is simply an example that would be specific to the sample you pulled it from, it is not a necessary file for your app. The only JS file I would recommend re-using is the init-dev.js, which does not rely on any external DOM elements or even any external JS libs and has one purpose, to generate the optional app.Ready event (and also can generate some useful console.log() messages during initialization). Even if you don't use the app.Ready event generated by init-dev.js (and use the standard Cordova "deviceready" event), the console.log() messages can be useful.

Rich_W_1 · ‎11-27-2016

Thanks for all of the advice. It's turned out real well. I believe I just have one more need for advice regarding changing my code from its appMobi days to Cordova. It's about splashscreens. My existing code had four major <div>s in it, one for each of the pages it would display and one for a splashscreen. The <div> for the splashscreen specified an image to display. Javascript code would hide it after 10s or if a person tapped the image before that. I don't think I invented this. I think I copied whatever the appMobi designers were thinking at that time.I now think I see that splashscreens should be done differently. I see the "Launch Icons and Splash Screens" section on the Projects tab. I also see forum talk regarding the section and things a person might do in an xml file. Unfortunately some of the forum talk doesn't seem to jive with what I see in the various xml files that the Intel XDK builds. What's the right way to move forward? Is it possible to both set the display period of the splashscreen to 10s and make it go away if it is touched before then (like it used to do) ?

I created all of the images asked for on the Projects tab and put them in the package-assets folder. I set the AutoHideSplashScreen in the additions.xml file to false. I know how to set the 10s maximum display period for the splashscreen in a device ready event handler. I've done it and it does extend the max display period to 10s. I believe I should call navigator.splashscreen.hide() when I want to hide the splashscreen before the 10s is up. I'd like some help setting up whatever I need to so that if a person touched the splashscreen it would call the hide function. I know about setting up ontouch functions for <div>s. I'm missing how to setup something on the splashscreen and/or a <div> in front of or behind the splashscreen to trigger the call to the hide().

Thanks in advance for any help you can provide,

Rich

PaulF_IntelCorp · ‎11-28-2016

Rich W. wrote:

Thanks for all of the advice. It's turned out real well. I believe I just have one more need for advice regarding changing my code from its appMobi days to Cordova. It's about splashscreens. My existing code had four major <div>s in it, one for each of the pages it would display and one for a splashscreen. The <div> for the splashscreen specified an image to display. Javascript code would hide it after 10s or if a person tapped the image before that. I don't think I invented this. I think I copied whatever the appMobi designers were thinking at that time.I now think I see that splashscreens should be done differently. I see the "Launch Icons and Splash Screens" section on the Projects tab. I also see forum talk regarding the section and things a person might do in an xml file. Unfortunately some of the forum talk doesn't seem to jive with what I see in the various xml files that the Intel XDK builds. What's the right way to move forward? Is it possible to both set the display period of the splashscreen to 10s and make it go away if it is touched before then (like it used to do) ?

You're welcome.

You can continue to use the technique that was being used in the older AppMobi app, you may see a white flash or something similar if you do not setup a Cordova splash screen, because there is a delay between the init of the Cordova stuff and when your webview runtime actually starts to run. How much delay depends on how much Cordova init must be done and the speed of the device you're running on. Thus, it usually pays to include a Cordova splash screen, but it's not strictly required.

Rich W. wrote:

I created all of the images asked for on the Projects tab and put them in the package-assets folder. I set the AutoHideSplashScreen in the additions.xml file to false. I know how to set the 10s maximum display period for the splashscreen in a device ready event handler. I've done it and it does extend the max display period to 10s. I believe I should call navigator.splashscreen.hide() when I want to hide the splashscreen before the 10s is up. I'd like some help setting up whatever I need to so that if a person touched the splashscreen it would call the hide function. I know about setting up ontouch functions for <div>s. I'm missing how to setup something on the splashscreen and/or a <div> in front of or behind the splashscreen to trigger the call to the hide().

Sounds like you're there. I've not dived deep into the splash screen plugin, but I believe the Cordova splash screen plugin does not run in the webview (where your app runs), I believe it's an extra overlay view on top of the webview, so your app doesn't have access to touch or other events that might be registered within that view. If my understanding is correct, there is no way to do what you want to do (without modifying the plugin in some way to allow touch events to "pass thru" to the webview that is behind the splash screen view, using a technique similar to what is described here).

One possible way to do it would be to put up a "starting" or "initializing" splash screen using the Cordova plugin, that is styled for your app, hide it as soon as the device ready event appears, and configure your app so it starts out displaying the <div> splash screen that waits for a touch or until some time has elapsed.

Advice on converting from appMobi