Enyo tut part 3

Creating custom Events

by gorillawit

CoffeeScript

### see part 1 and 2 for more comments ###
enyo.kind
  name: "Light",
  published: 
    "color" : "red"
  style: "width: 50px; height: 50px; border-radius: 50%"
  create: ->
    @inherited arguments
    @colorChanged()
  colorChanged: (oldValue) ->
    @applyStyle "background-color", @color
    
enyo.kind
  name: "TrafficLight"
  components: [
      {name: "Stop", kind: "Light", color: "red"}
      {name: "Slow", kind: "Light", color: "yellow"}
      {name: "Go", kind: "Light", color: "green"}
    ]

enyo.kind
  name: "TapLight"
  kind: "Light"
  ### Here we are creating a custom event that will allow
  the TrafficLight to keep track of whether it was turned on or off, allowing
  us to toggle the other lights when one is tapped ###
  events:
    onPowered: ""
  ### by just creating an event, Enyo creates the doEventName, so onPowere
  becomes doPowered, so if we want to call 'up' this event, this empty
  events property will handle the situation where it has NOT been subscribed 
  to yet. So we don't have to check "If onPowered = not null, callIt()" ###
  published:
    powered: true
  handlers:
    ontap: "tapped"
  tapped: (inSender, inEvent) ->
    @powered = !@powered
    @applyStyle "opacity", if @powered then "1" else "0.3"
    ### when doPowered is called, log the time it was called and passing back
    an object, 'state', which will contain any kind of data we want to pass
    back to the parent (again, start thinking more in getters/setters), here
    we are passing whether the tapped light is "@powered or !@powered" ###
    @doPowered { time: new Date(), state: @powered }
    ### below, in the parent of this kind, one of the component kinds has an
    onPowered property which is the data that will be passed to it's parent
    (keeps 'bubbling' up the chain to original kind). It's data is a function
    'logit' which is passed up###
    
    
enyo.kind
    name: "TrafficLight"
    ### we could just put onPowered on each light, but the 'handlers' block
  ...