jasonkneen/nl.fokkezb.form

[UNMAINTAINED] Alloy TableView Form Widget

nl.fokkezb.form's Issues

Type select, no options showing

When using type "select" no options are shown in the picker.

Trying:

options: [1, 2, 3, 4]
options: ["1", "2", "3", "4"]

Undefined is not a function c.form.getNextField(c.name)

When using "Next" button on iOS 9 keyboard.

__NSDictionaryM addObject:

Changed gruntfile to iosVersion: 8.1 and sdk: '3.5.0.GA' then tried to start with grunt file. The test branch occurred the following error:

[DEBUG] 2015-03-06 15:54:08.631 Alloy Form Widget[71554:1002865] -[__NSDictionaryM addObject:]: unrecognized selector sent to instance 0x7a86ce90
[ERROR] Script Error {
[ERROR] column = 32;
[ERROR] line = 78;
[ERROR] message = "-[__NSDictionaryM addObject:]: unrecognized selector sent to instance 0x7a86ce90";
[ERROR] sourceURL = "file:///Users/Manuel/Library/Developer/CoreSimulator/Devices/8B43889F-6602-4F53-B061-2BE46E1667D0/data/Containers/Bundle/Application/270BB779-2876-4049-BD9E-CFAB5894026C/Alloy%20Form%20Widget.app/alloy/widgets/nl.fokkezb.form/controllers/widget.js";
[ERROR] stack = "[native code]\nfile:///Users/Manuel/Library/Developer/CoreSimulator/Devices/8B43889F-6602-4F53-B061-2BE46E1667D0/data/Containers/Bundle/Application/270BB779-2876-4049-BD9E-CFAB5894026C/Alloy%20Form%20Widget.app/alloy/widgets/nl.fokkezb.form/controllers/widget.js:78:32\nforEach@[native code]\nforEach@file:///Users/Manuel/Library/Developer/CoreSimulator/Devices/8B43889F-6602-4F53-B061-2BE46E1667D0/data/Containers/Bundle/Application/270BB779-2876-4049-BD9E-CFAB5894026C/Alloy%20Form%20Widget.app/alloy/underscore.js:79:18\nfile:///Users/Manuel/Library/Developer/CoreSimulator/Devices/8B43889F-6602-4F53-B061-2BE46E1667D0/data/Containers/Bundle/Application/270BB779-2876-4049-BD9E-CFAB5894026C/Alloy%20Form%20Widget.app/alloy/widgets/nl.fokkezb.form/controllers/widget.js:62:19\nforEach@[native code]\nforEach@file:///Users/Manuel/Library/Developer/CoreSimulator/Devices/8B43889F-6602-4F53-B061-2BE46E1667D0/data/Containers/Bundle/Application/270BB779-2876-4049-BD9E-CFAB5894026C/Alloy%20Form%20Widget.app/alloy/underscore.js:79:18\nrender@file:///Users/Manuel/Library/Developer/CoreSimulator/Devices/8B43889F-6602-4F53-B061-2BE46E1667D0/data/Containers/Bundle/Application/270BB779-2876-4049-BD9E-CFAB5894026C/Alloy%20Form%20Widget.app/alloy/widgets/nl.fokkezb.form/controllers/widget.js:53:15\ninit@file:///Users/Manuel/Library/Developer/CoreSimulator/Devices/8B43889F-6602-4F53-B061-2BE46E1667D0/data/Containers/Bundle/Application/270BB779-2876-4049-BD9E-CFAB5894026C/Alloy%20Form%20Widget.app/alloy/widgets/nl.fokkezb.form/controllers/widget.js:34:15\nController@file:///Users/Manuel/Library/Developer/CoreSimulator/Devices/8B43889F-6602-4F53-B061-2BE46E1667D0/data/Containers/Bundle/Application/270BB779-2876-4049-BD9E-CFAB5894026C/Alloy%20Form%20Widget.app/alloy/controllers/index.js:59:16\ncreateController@file:///Users/Manuel/Library/Developer/CoreSimulator/Devices/8B43889F-6602-4F53-B061-2BE46E1667D0/data/Containers/Bundle/Application/270BB779-2876-4049-BD9E-CFAB5894026C/Alloy%20Form%20Widget.app/alloy.js:264:54\nglobal code@file:///Users/Manuel/Library/Developer/CoreSimulator/Devices/8B43889F-6602-4F53-B061-2BE46E1667D0/data/Containers/Bundle/Application/270BB779-2876-4049-BD9E-CFAB5894026C/Alloy%20Form%20Widget.app/app.js:5:23";
[ERROR] }

Picker.js

The date time picker depends on the app having a navbar

add a change listener to the picker element and the following code, to override navbar controls
function changeValue(e){ $.setValue(e.value); }

Type 'select' doesn`t work

When i try the test app on my android device , type select not working ! just nothing happened when try change value .

I tried run on SDK 5.2.0.GA , 5.2.1.GA

Time picker, appear in the behind current window

Is it a Titanium bug?
https://archive.appcelerator.com/question/159923/cant-show-timepickerdialog-on-top-of-window-with-titanium-3

[DOC] Fix type code example

I think this code has syntax error
http://form.fokkezb.nl/docs/#!/guide/types

has to be

exports.baseController = '../widgets/nl.fokkezb.form/controllers/field';
$.__widgetId = 'timewax.fields';

(function constructor(args) {

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

  $.setInput($.input);

})(arguments[0]);

$.setValue = function(val) {
    $.input.value = val;
}

$.getValue = function() {
    return $.input.value;
}

Media input type

New input type to select image/video from gallery or camera

• Option to allow how many image allowed to select, null for unlimited
• Option to set the path, callback function allowed
• Option to disable or enable camera and/or gallery

More Android issues

I'm continue working on Android support:

• FIX: Layout vertical and horizontal for the row
• FIX: Date picker
• FIX: Add support for optionDialog option

Is it possible to have a custom row open a tableview?

hi Fokke, this control is very helpful, I had a question about the custom control/widget. I'd like to have a custom row with an accessory arrow so that when the user taps on the row it either pops up a tableview and the user can select rows and check marks will either apply/remove to each row. Or have a new window slide in with a similar concept of the tableView and check mark functionality so they can check or uncheck multiple row. Do you see this possible? Any advice you can offer is much appreciated.

Multiple select types, shows the last select options for all select type fields

Hi not sure if it's something I'm doing but I also ran the test example and noticed the same issue.
If you have more than one select field the options shown for both are the same, always the last defined select field options get shown.

basecontroller not working after upgrade to SDK 6.0.0.GA

Edit by @HazemKhaled
After Appc support NodeJS style require [TIMOB-16078], basecontroller with ../ in path not working or maybe basecontroller into the widget not working

[DEBUG] Adding footerView from xml to this form
[ERROR] TiExceptionHandler: (main) [244,26067] ----- Titanium Javascript Runtime Error -----
[ERROR] TiExceptionHandler: (main) [0,26067] - In ti:/module.js:303,2
[ERROR] TiExceptionHandler: (main) [0,26067] - Message: Uncaught Error: Requested module not found: alloy/controllers/../widgets/nl.fokkezb.form/controllers/field
[ERROR] TiExceptionHandler: (main) [0,26067] - Source: 	throw new Error("Requested module not found: " + request); // TODO Set 'code' property to 'MODULE_NOT_FOUND' to match Node?
[ERROR] V8Exception: Exception occurred at ti:/module.js:303: Uncaught Error: Requested module not found: alloy/controllers/../widgets/nl.fokkezb.form/controllers/field

Picker and Select issues

PICKER

When adding a picker (as per test app)

{
        name: 'date',
        label: 'Picker type (date)',
        type: 'picker',
        picker: {
          type: Ti.UI.PICKER_TYPE_DATE,
          valueFormat: 'DD-MM-YYYY'
        },
        value: '04-07-2014'
}

i get error

[ERROR] :  Script Error {
[ERROR] :      column = 24;
[ERROR] :      line = 24;
[ERROR] :      message = "undefined is not an object (evaluating '$.pickerRow.add')";
[ERROR] :      stack = "focus\nonTableSingletap";
[ERROR] :  }

the $.pickerRow object doesn't appear to be reference anywhere?
Its not in the view picker.xml view and one isn't passed to it.

SELECT

When adding a select (as per test app)

{
      name: 'cities',
      label: 'Select type (obj)',
      type: 'select',
      options: {
        'ams': 'Amsterdam',
        'nyc': 'New York City',
        'lnd': 'London'
      },
      value: 'nyc'
}

i get no errors, a select is shown with a title and a cancel but no options?

Bad implementation for horizontal layout rows

It's my code, so i can say it's implemented in very bad way, now i'm calculating all child and subtract it from .control width since Android can't fit it in same line

if ($.container.layout === 'horizontal') {
  var platformWidth = OS_ANDROID ? require('alloy/measurement').pxToDP(Ti.Platform.displayCaps.platformWidth) : Ti.Platform.displayCaps.platformWidth;
  $.control.width = platformWidth - $.label.left - $.label.width - $.control.left - 15;
}

Issue happen if form width less than the platformWidth

RTL Support

Allow drawing items RTL to support RTL interface applications

wrong widget in test app

I'm afraid you've mixed up two widgets by mistake. The test app contains your color picker widget instead of the form widget: https://github.com/FokkeZB/nl.fokkezb.form/tree/test/app/widgets

Android support

I'm unable to get this working on Android. The view loads an empty Tableview.

I think this might be related to https://jira.appcelerator.org/browse/TIMOB-14285 where Android doesn't apply custom properties to proxy.

I have been able to get the table show by using the following in widget.js:

  $.table.setData(tableProp.sections);
  $.table.applyProperties(tableProp);

But I am unable to access all the event listeners that have been created.

[NEW]: Allow select field to accept function

I need to show data in OptionDialog from data source, for example, collection, so we need async call for it, example:

module.exports = {
  fields: [{
      name: 'catid',
      label: 'Select category',
      type: 'select',
      options: function(callback) {
          var collection = Alloy.createCollection('mycollection');
          collection.fetch({
              success: function() {
                  var rows = {};
                  collection.each(function(model) {
                      var obj = model.toJSON();
                      rows[obj.id] = obj.title;
                  });
                  callback(rows);
              }
          });
      }
  }
};

Material theme

Android needs Material touches:

• Support input-materialdesign-widget
• Use Android ripple effect, Ti 6.1 required
• Add option to replace Label with HintText input style

Pass error handler

Instead of highlighting the field with red, apply custom callback to show error msg or do anything custom

ListView input type

New field type, open as a ListView in a new window:

• Allow select one or multiple rows, Show checkbox in selected row
• Search, using SearchBar for iOS and SearchView in ActionBar for Android

Password and Keyboard options?

Is it possible to have password fields and keyboard options with this?
I know i can manually create rows, but that goes against the point of the widget.
It would be nice is you could specify if the field was a password field and also what keyboard to display for number, email, phone etc...

Weird scrolling behaviour

Hi,
I'm using the latest version of the widget, slightly updated with some designer requests.

When scrolling up and down the rows that go offscreen are partly toggled (now are visible, next time are hidden, and so on..), but not the whole row, just some part of it.

It's difficult to explain, so I prepared a video: https://youtu.be/At3mAohUBvs
As you can see first two rows have values, when a row goes completely offscreen its value become hidden, when goes offscreen again it become visible, and so on..

NB: @HazemKhaled hinted me it could be a class problem, but I can't find a way to solve it.

Cannot get widget to work

Installed via Gittio, copied the code form the test app into my project and got:

[ERROR] :  Script Error {
[ERROR] :      column = 32;
[ERROR] :      line = 78;
[ERROR] :      message = "-[__NSDictionaryM addObject:]: unrecognized selector sent to instance 0x7f9771c3fe10";
[ERROR] :      sourceURL = ".../alloy/widgets/nl.fokkezb.form/controllers/widget.js";

SDK 4.0.0Beta3.
Appcelerator Studio.

Reset Form Fields to Default after submit

I have tried using $.form.setValues() to null but did not work...
I am sure it is a simple solution..help greatly appreciated..Thanks

[NEW] Auto focus on next field

I can see this feature already implemented but i think we need solid and documented one, this is what i think we have to work on:

• Widget has to set keyboard returnKeyType to Ti.UI.RETURNKEY_NEXT except last editable field
• Widget has to set keyboard returnKeyType to Ti.UI.RETURNKEY_SEND if last field is textfield or textarea
• Developer can enable or disable auto next mode for each field
• Developer can overwrite on form getNextField function or on specific field

test doesn't work

I wanted to try the test branch but it doesn't seem to work. When i run grunt, it says:

[ERROR] widget "nl.fokkezb.form" view "widget" does not exist.
[ERROR] The following paths were inspected:
[ERROR] /Users/rmu/Downloads/nl.fokkezb.form-test/app/widgets/nl.fokkezb.form/views/ios/widget
[ERROR] /Users/rmu/Downloads/nl.fokkezb.form-test/app/widgets/nl.fokkezb.form/views/widget
[ERROR] /usr/local/lib/node_modules/alloy/widgets/nl.fokkezb.form/views/ios/widget
[ERROR] /usr/local/lib/node_modules/alloy/widgets/nl.fokkezb.form/views/widget
[ERROR] Alloy compiler failed

Am I doing smth wrong?

[NEW] Allow passing HeaderView & FooterView from xml

Allow passing form headerView and footerView from xml directly

<Widget id="form" src="nl.fokkezb.form">
    <View role="headerView">
        <Label>Hello Header!</Label>
    </View>
    <View role="footerView">
        <Button onClick="sendButtonClicked">Save</Button>
    </View>
</Widget>

Barcode scanner input type

New field type for scanning barcode or QRCode using ti.barcode module

• Allow passing all parameters to the module
• Editable option for manual entering the code

Signature input type

New field type using ti.paint module to accept signature from users

• Options to set width and height
• Open signature in new modal window
• Option to set path, allow callback function