Cannot get widget to work

[adamkearsley]

Cannot get widget to work

[FokkeZB]

What code exactly did you copy paste? Since it works in the test app I assume something went wrong there.

[adamkearsley]

Ahh i have copied the test app
https://github.com/FokkeZB/nl.fokkezb.form/tree/test/app

I think this must be out of date?
I copied the code from the index.xml and index.js.

When i copied the test from the widget example it works ok.
How do i implement this using Alloy view rather than in the controller?

[FokkeZB]

You first say you copied the test app and then you say you copied only index.xml and index.js. Which of the two is it?

I just ran the test app with 4.0.0.RC and it works fine for me.

The Getting Started has examples of all different ways to init the form.

[adamkearsley]

I think its when i use:

section: {
      footerTitle: 'footerTitle of section set in JS',
      rows: [$.sectionRow]
    },

and

<TableViewRow id="sectionRow" title="Custom row via section" />

It seems to crash the app.
Im not sure if its due to the alloy TableViewRow being outside of the window?

[FokkeZB]

That shouldn't be a problem. If you run the test app as-is using the instructions here you get the same error? What OS/SDK?

[adamkearsley]

Im installing the widget using Gittio.
When i view the widget I'm seeing different (older) code to whats the in the test app?
When I'm running your test app (installing the widget using Gittio) i get an error:

[ERROR] :  Script Error {
[ERROR] :      column = 17;
[ERROR] :      line = 118;
[ERROR] :      message = "Can't find variable: onUnsetClick";
[ERROR] :      sourceURL = "../alloy/widgets/nl.fokkezb.form/controllers/picker.js";"

When i check the file picker.js there is no onUnsetClick function.
But in your test app there is!
https://github.com/FokkeZB/nl.fokkezb.form/blob/2bc8a2680dcbc33ecc438ac22208370a655862f7/controllers/picker.js

It appears the Gittio install has a different code in the widget?

[adamkearsley]

My widget says I'm running 1.6.1
But my picker.js is missing the onUnsetClick function:

/**
 * Controller for the date/time picker field type.
 *
 * The date/picker picker field type is a `Ti.UI.Label` to display current and a `Ti.UI.Picker` to change the value.
 *
 * *WARNING:* Only support iOS and Android date/time for now.
 *
 * @class Widgets.nlFokkezbForm.controllers.picker
 * @extends Widgets.nlFokkezbForm.controllers.field
 * @xtype picker
 */

var moment = require('alloy/moment');

exports.baseController = '../widgets/nl.fokkezb.form/controllers/field';

$.focus = focus;
$.setValue = setValue;
$.getValue = getValue;

var m;

var table;

var pickerShowing = false;

var picker = {
  type: Ti.UI.PICKER_TYPE_DATE,
  valueFormat: 'YYYY-MM-DD'
};

/**
 * Constructor.
 *
 * @constructor
 * @method Controller
 * @param args Arguments which will also be used to call {@link Widgets.nlFokkezbForm.controllers.field#Controller}.
 * @param {Object} [args.input] Properties to apply to the `Ti.UI.Label`.
 * @param {Object} [args.picker] Properties to apply to the `Ti.UI.Picker`.
 * @param {Number} [args.picker.type=Ti.UI.PICKER_TYPE_DATE] On Android, if this is `Ti.UI.PICKER_TYPE_DATE` or `Ti.UI.PICKER_TYPE_TIME` this will trigger the related dialogs.
 * @param {String} [args.picker.valueFormat="YYYY-MM-DD"] Format in which the value is set and get.
 * @param {String} [args.picker.textFormat] Format in which the value is displayed (defaults to `valueFormat`).
 * @param {String|Object} args.label Will be used for the popover title as well.
 */
(function constructor(args) {

  // save a reference to the table
  table = args.form.table;

  // extend picker defaults
  picker = _.extend(picker, args.picker || {});
  $.picker.applyProperties(picker);

  // display a hasChild marker
  $.row.applyProperties($.createStyle({
    classes: ['row']
  }));

  // input properties to apply
  if (args.input) {
    $.input.applyProperties(args.input);
  }

  // add the input to the row
  $.setInput($.input);

  // compose view
  if (Ti.Platform.osname === 'ipad') {
    $.popover.title = $.label.text;
    $.popover.add($.picker);
  }

})(arguments[0]);

/**
 * Displays an option dialog to change value.
 *
 * This method is called by {@link Widgets.nlFokkezbForm.controllers.widget} when the user clicks on the row.
 */
function focus(e) {

  var date;

  if (m) {

    // picker needs a year, also for time
    if (m.year() === 0) {

      date = moment(m).year(2000).toDate();
    } else {
      date = m.toDate();
    }
  }

  $.picker.value = date;

  if (OS_IOS) {

    if (Ti.Platform.osname === 'ipad') {
      $.popover.show({
        view: $.input
      });

    } else {
      // Wrap the picker in a row
      $.pickerRow.add($.picker);
      // Update the label on change
      $.picker.addEventListener('change', function(e) {
        onDialogClose({
          value: $.picker.value
        });
      });

      // Check if showing the picker row already
      if (pickerShowing === false) {
        //Insert row
        table.insertRowAfter(e.index, $.pickerRow, {
          animationStyle: Titanium.UI.iPhone.RowAnimationStyle.DOWN
        });
        pickerShowing = true;
      } else if (pickerShowing === true) {
        // Delete row
        table.deleteRow(e.index + 1, {
          animationStyle: Titanium.UI.iPhone.RowAnimationStyle.UP
        });
        pickerShowing = false;
        // Update the value on close of row
        onDialogClose({
          value: $.picker.value
        });
      }
    }

  } else if (OS_ANDROID && picker.type === Ti.UI.PICKER_TYPE_DATE) {
    $.picker.showDatePickerDialog({
      cancel: onDialogClose
    });

  } else if (OS_ANDROID && picker.type === Ti.UI.PICKER_TYPE_TIME) {
    $.picker.showTimePickerDialog({
      cancel: onDialogClose
    });

  } else {
    throw 'Only support iOS and Android date/time for now.';
  }
}

function setValue(value) {
  var mom = moment(value, (typeof value === 'string') ? picker.valueFormat : undefined);

  if (!mom) {
    console.error('Invalid value: ' + JSON.stringify(value));
    return;
  }

  m = mom;

  $.input.text = m.format(picker.textFormat || picker.valueFormat);
}

function getValue() {
  return m ? m.format(picker.valueFormat) : null;
}

function onDoneClick(e) {

  onDialogClose({
    value: $.picker.value
  });

  onCancelClick(e);
}

function onCancelClick(e) {
  $.popover.hide();
}

function onDialogClose(e) {

  if (!e.cancel) {
    $.setValue(e.value);
    $.change();
  }
}

[FokkeZB]

It was fixed in master but not yet in 1.6.1

Just published 1.6.2 with this fix.