ccoenraets / cordova-tutorial Goto Github PK

A link is broken in (Module 6: Avoiding the 300ms Click Delay)[http://ccoenraets.github.io/cordova-tutorial/avoid-300ms-delay.html], in More information here.

Good tutorial!

Hi Christophe,

is it possible to retrieve the data with a remote JSON? I struggle with the delay it gives when getting the data from a remote file, because the homeview initializes before the ajax call is finished, and therefor the json data is inserted after de views/routes are implemented or loaded. The done argument in the function "service.initialize().done(function ()" does not seem to wait for the ajax call till it is done to continue.... Is there a workaround?

Grtz
Gerben

Hi Christophe,

I think it would be nice if syntax highlighting is enabled for code snippets. To me, it is much more readable when it comes to longer code.

without syntax highlighting

with syntax highlighting

Thanks for creating this tutorial website by the way. 👍

I believe

cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.console

on this page should be changed to:

cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-console

Chris(topher), first I want to thank you for putting this together, it's really helped me understand PhoneGap/Cordova for the first time in almost a year of on/off struggling with all the crud out there that is incomplete or doesn't work.

We're doing a JSON-based project, and I figured out what I needed to do and wanted to share it (it would be great if you provided some counter-examples for each of the methods, perhaps in the demo code, but commented out?):

// in HomeView.js //////////
this.findByName = function() {
service.findByName($('.search-key').val()).done(function(employees) {
employees = $.parseJSON(employees); // add this in for JSON method
employeeListView.setEmployees(employees);
});
};

// in EmployeeView.js /////////
var EmployeeView = function(employee) {

this.initialize = function() {
    this.$el = $('<div/>');
};

this.render = function() {
  employee = $.parseJSON(employee); // add this in for JSON method
    this.$el.html(this.template(employee));
    return this;
};

this.initialize();

}

Finally, for the by-id employee card view, I had to surround the

's in {{#each}}, or they wouldn't display (just like in the list view).

Lastly, it would be really helpful to include build-release instructions, I had to hunt around a little for these, and they would make your guide complete:

keytool -genkey -v -keystore ./my_keystore.keystore -alias my_keys -keyalg RSA -keysize 2048 -validity 100000

Create ant.properties file in MyProject/platforms/android/
Add the following:
key.store=<path_to>/my_keystore.keystore
key.store.password=
key.alias=my_keys
key.alias.password=

cordova build android --release

Again, thank you so much for creating this interactive workshop, it was truly a lifesaver!
Charles

Parts with referencing this are completely wrong imo... you have:

navigator.camera.getPicture(
 function(imgData) {
  $('.media-object', this.$el).attr('src', "data:image/jpeg;base64,"+imgData);
 },
 function() {
   alert('Error taking picture', 'Error');
  },
 options);

  return false;
 };

and trying to reference this.$el. When this method is called, this isn't top element where EmployeeView is instantiated, but reference to clicked button. (this works by accident since you have classes for other buttons which would then show this image).

tbh, second part in in jQuery selector (this.$el) is not needed.

Your query always return 8 media-objects (since there are so many of them on screen) and you are changing src of each of them.

What you should do is this:

1. on beginning of initialization store this into var that:

var EmployeeView = function(employee) {

var that;
this.initialize = function() {
    that = this;
    this.$el = $('<div/>');
    this.$el.on('click', '.add-location-btn', this.addLocation);
    this.$el.on('click', '.add-contact-btn', this.addToContacts);
    this.$el.on('click', '.change-pic-btn', this.changePicture);
};

2). When searching for element to change src do this:

$('.media-object.emp-pic', that.$el).attr('src', "data:image/jpeg;base64,"+imgData);

this way for sure you'll only get one element

I have created a repo for example code at each step, with branches for milestone1 to milestone14:

https://github.com/lucasgonze/cordova-tutorial-examples

It helped me just to be orderly in creating this, and it may help others who are stuck on some step. If this is useful to you as part of the tutorial, you might want to include documentation on its existence.

Note that I didn't .gitignore the build directories, so the diffs are harder to read than necessary. That is an open bug.

are the solution examples all missing the cordova.js file?

How to Implement One Time Password in cordova project and what are the API's need to achieve OTP.

Please Help