Dynamically calling createComponent

edited May 2013 in Enyo 2
I would like to extend kinds to leverage a parent object like a view template. I know I can't inherit components, but what (I think) I can do is have setup methods in the template class, something like this:
enyo.kind({
  name: 'ParentView',
  kind: "enyo.FittableRows",
  setupHeaderContent: function() {
    this.createComponent({name: 'headerContainer', kind: "FittableColumns"});
    this.$.headerContainer.createComponent({name:'headerLeftContent', content: "header-left"});
    this.$.headerContainer.createComponent({name:'headerCenterContent', content: "header-center"});
    this.$.headerContainer.createComponent({name:'headerRightContent', content: "header-right"});
  },
  setupFooterContent: function() {
    ...etc
  }
});
Then use this kind for my subclass:
enyo.kind({
  name: "MyView",
  kind: "ParentView",
  components: [
    {name: 'headerContainer', kind: "FittableColumns", components: [
      {name:'headerContent', content: "header-text"}
    ]},
    {name:'bodyContainer', kind: "FittableColumns", components: [
      {kind: "onyx.InputDecorator", components: [
        { content: "Username:"},
        { name: "username", kind: "onyx.Input", placeholder: "Username"}
      ]}
    ]}
  ],

    whatFunctionGoesHere??: function() {
      this.inherited(arguments);
      this.setupFooterContent();
    },
  });
});
So I think this idea will work, the issue I'm having is what method can I use that will fire automagically resulting in a fully rendered view? Using the constructor appears to happen too soon to add components, I get "Cannot read property '0' of undefined".

What events can I hook onto, or method can I override, to call my setup when the page is ready to be displayed?

Comments

  • edited May 2013
    DOH!

    The
    create()
    is what I was looking for. But why can't I find it in the API docs? I found it by digging through some of the Enyojs Sampler code.
    create: function() {
      this.inherited(arguments);
      this.setupFooterContent();
    }
  • edited May 2013
    BTW - @pcimino, you need to put < pre > < code > your code < /code > < /pre > to make your code look nicely here.

    ---
    I'm just about to ask the same question for myself.
    You write: I know I can't inherit components
    I also want to inherit components and add more components to my derived kind.
    I wonder what the recommended procedure is in Enyo.
    Using the create() to add a setup function to create more components dynamically ?
    How to insert new components into the sequence of the already defined components?
    Or is it "fair" to copy the existing components from the base kind and define the same component names together will new component names ?
  • Thanks, I always forget that
  • edited the original for you :)
  • On my way out the door to catch a flight (and not sure if it will have wifi), but I wanted to chime in.

    In you "template" kind you could do something like:
    enyo.kind({
        name: "MyTemplate",
        headerComponents: [...],
        mainComponents: [...],
        footerComponents: [...],
        initComponents: function() {
            // do fancy stuff by taking header/main/footerComponents and add them to the _real_ kindComponents and then...
            this.inherited(arguments);
        }
    });
    If you need, I can go into more detail when I have some time, but you can look at a sophomore attempt at this in my View kind: https://github.com/sugardave/View/blob/master/source/View.js
  • That makes a lot of sense. Thanks.
Sign In or Register to comment.