[Lofi]

A few questions:

* How exactly do you create a web application with ME2015 using Phonegap & jQuery?

I created a Phonegap application with the wizard and then I added the Html5 facet. But nothing that worked out of the box came out of it. I had to change code manually.

* How does the splashscreen work? I don’t see a splashscreen on my mobile device

I did a stress test with 2000 checkboxes (input tags with labels) and the device was black for a while and then failed with “Connection to server was unsuccessful”. It never showed a splashscreen, the screen was black all the time.

By the way, if anyone runs into that error, here’s a solution I found on the web:

https://www.robertkehoe.com/2013/01/fix-for-phonegap-connection-to-server-was-unsuccessful/

Thank you very much.

[Brian Fernandes]

Lofi,

We’ll be adding JQM template support just like we did for the HTML 5 apps, so it should be much easier to get going with PhoneGap + jQuery.

Can you clarify what you mean by splashsreen in a mobile context? Are you referring to a PhoneGap plugin or other?

[Lofi]

Phonegap supports splashscreens:

http://docs.phonegap.com/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

I haven’t seen one yet, but I guess it should show up when you start the application.

For now all I get is a black screen and after that I see my application.

Here you can e. g. see the phonegap splashscreen on ios. I’ve never seen it in my ME2015 android phonegap application:

(Of course I installed the splashscreen plugin)

edit: instead of this:

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="10000" />

I tried this:

<preference name="SplashScreen" value="icon" />
<preference name="SplashScreenDelay" value="10000" />

and a splashscreen was displayed. When I unzip the apk I only find the icon images in the drawable folder. I guess that’s the problem.

I also found this article: http://devgirl.org/2013/09/12/phonegap-icons-and-splash-screens-help/

may be a problem with the local build. Does anyone have specifics on how to approach this?

[Lofi]

@Support-Brian wrote:

We’ll be adding JQM template support just like we did for the HTML 5 apps, so it should be much easier to get going with PhoneGap + jQuery.

Is that supposed to be in the ME2015 CI 2014-07-11 build? Because I can only select HTML5 application (deprecated) or PhoneGap. And the main.js of PhoneGap is totally different to the cordova related javascript file that comes with the HTML5 wizard. So copy/paste is out of question.

What I’d like to do is to create a mobile app using jQuery and PhoneGap/Cordova. I could do it all manually of course, but I’m wondering if there’s already support built in for that kind of project.

[Brian Fernandes]

Lofi,

Sorry for the delayed response. No jQuery mods yet, we have been hard at work at the more technical aspects of PG build for both CI 2 and CI 3, so the jQuery Mobile + Template fixes will come in a later release. I will let you know when it arrives.

[Lofi]

Ok, thank you. I added it all manually now. Just in case you have a index.html and the accompanying javascript at hand, I’d be happy if you could share it. My main concern is how to wait until both jQuery AND PhoneGap are up and running. I did it like this:

var jqmReady = $.Deferred();
var pgReady = $.Deferred();

// jqm ready
$(document).bind("mobileinit", jqmReady.resolve);

// phonegap ready
document.addEventListener("deviceready", pgReady.resolve, false);

// all ready :)
$.when(jqmReady, pgReady).then(function () {
  // do your thing
});

http://stackoverflow.com/questions/8275313/correct-event-registration-in-the-phonegap-jquery-mobile-application

Is there a better way?

Thank you very much for the help!

[Brian Fernandes]

Lofi,

Just an update that the CI 4 release includes jQM template support, just like what we had in the HTML5 tools (user templates coming in the next release). We’ve also modified the templates to use/install the latest versions of jQM and jQ at this time.

Do give it a spin and let us know what you think.

[Lofi]

Thank you very much Brian. I’ll definitely have to find some time to give it a try. Of course I was curious about how you guys solved the initialization of Phonegap & jQuery. But I’ve seen you didn’t. Or is it not necessary anymore?

When I create a new Phonegap project in ME2015 CI4, you guys wait only for Phonegap. Not for jQuery. That could become an issue.

See e. g. here: http://stackoverflow.com/questions/10945643/correct-way-of-using-jquery-mobile-phonegap-together

Or did I miss something?

[Brian Fernandes]

Lofi,

I must admit that we didn’t run into issues with the templates as they are but I do think that waiting for both jQM as well as PG to initialize would be the right thing to do.

Of the solutions presented in the link you referenced, these two seem to make the most sense. Which one did you use?

[Lofi]

I chose the one from Octavian, i. e.

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

document.addEventListener("deviceReady", deviceReady, false);

function deviceReady() {
  deviceReadyDeferred.resolve();
}

$(document).on("mobileinit", function () {
  jqmReadyDeferred.resolve();
});

$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

function doWhenBothFrameworksLoaded() {
  // TBD
}

http://stackoverflow.com/questions/10945643/correct-way-of-using-jquery-mobile-phonegap-together/12821151#12821151

Worked so far. jQuery’s Deferred’s are awesome.

[Brian Fernandes]

Lofi,

In CI 5 we implemented that same solution and it seems to be working just fine. If you create new projects with the jQM templates, they will get created with these new bits of code. Please let us know what you think.

[Lofi]

Thank you very much. It’s time I figure out how to show a splash screen while everything gets ready 🙂

[Author]

Posts