Should allow ember components as custom form widgets.

[toddjordan]

Currently alpaca allows you to "register" new form field widget types by extending their field objects. This issue is to explore what it might take to get it to use ember components as a widget.

Start here: http://www.alpacajs.org/docs/api/custom-fields.html

[toddjordan]

cc @jschilli

[jschilli]

@toddjordan have conversations queued up with my team to discuss - will advise

[toddjordan]

👍

[toddjordan]

I've started work on giving the addon the ability to render ember components. I started by giving it the concept of a renderer, currently with the default of alpaca. Second step is to take alpaca and its dependencies (including bootstrap) out of the mix.

[toddjordan]

Update: I'm back at this after some time off and I'm taking the following approach

A renderer will provide 2 functions:

• initLayout(component) - should set the template for the dynamic form component
• render(schema, component) - sets the values for the template based on the provided json schema I plan to update master this week with the hooks and cut a release if you want to play with your own components.

I'm Writing an ember-paper renderer and adding an example usage to the documentation examples. This will come in the next few weeks, but I'll try to update this periodically.

cc: @k3n @jschilli Do you guys use open source components that we can try this approach out on?

[toddjordan]

I've checked in updates to master that will allow a developer to hook in a custom renderer.

Custom renderer could be inserted as follows: 1.add a renderer object file to app/dynamic-forms/renderers/my-renderer.js

import Ember from 'ember';

export default Ember.Object.extend({
  initLayout(component) {
    //set the component's template via layout and layoutName
  },
  render(schema, component) {
    //set properties/actions for the template based on the schema
  }
}

2 implement renderer to render you components

3.set the new renderer as the current renderer in environment.js:

ENV.dynamicForms = {
  renderer: 'my-renderer'
}

[k3n]

1.add a renderer object file to app/dynamic-forms/renderers/my-renderer.js

One note: I had to place the file in app/renderers for it to be found.

[toddjordan]

hmmm. will make an update to fix. Thanks

[toddjordan]

@k3n I've released version 0.2.0, which has the same functionality, but now wants you to load any custom renderer through the /dynamic-forms/renderers/ directory.