jasonkneen/nl.fokkezb.form

[UNMAINTAINED] Alloy TableView Form Widget

UNMAINTAINED: I'm no longer actively maintaining this project. If you'd like to take it over, create an issue requesting so. If you've found an issue, send me a PR and I may still be able to review and merge.

Alloy Form Widget

An Alloy Widget to create a form using a TableView, much like the familiar settings views on iOS.

• Source code: https://github.com/FokkeZB/nl.fokkezb.form/tree/master
• Documentation: http://form.fokkezb.nl
• Test app: https://github.com/FokkeZB/nl.fokkezb.form/tree/test

Get it

Install via gitTio:

$ gittio install nl.fokkezb.form

Or download a release, extract it to your app's app/widgets/nl.fokkezb.form folder and add the dependency to your config.json:

{
	..
	"dependencies": {
	    "nl.fokkezb.form": "*"
	    ..
	  }
}	

Use it

Consult the documentation for all options, e.g. to create:

index.js

var form = Alloy.createWidget('nl.fokkezb.form', {
  fieldsets: [{
    legend: 'My form',
    fields: [{
      name: 'name',
      label: 'Your name',
      type: 'text'
    }, {
      name: 'email',
      label: 'Your email address',
      type: 'text',
      format: 'email'
    }, {
      name: 'like',
      label: 'Do you like it?',
      type: 'switch'
    }]
  }]
});
$.index.add(form.getView());
$.index.open();

Screenshot

License

The MIT License (MIT)

Copyright (c) 2014 Fokke Zandbergen

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

nl.fokkezb.form's Issues

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); }

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.

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.

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

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);
              }
          });
      }
  }
};

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.

[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>

RTL Support

Allow drawing items RTL to support RTL interface applications

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.

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

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

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

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

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

When using "Next" button on iOS 9 keyboard.

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?

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?

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

[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;
}

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

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...

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

[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

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"]

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

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

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

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

__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] }