Load needed libraries dynamically

examples/widgetapp/assets/widget.coffee

@@ -0,0 +1,481 @@
+#IMPORTANT PLEASE COMPILE WITH:: coffee -cbw widget.coffee
+cache = {}
+jQuery.cachedScript = (url, options) ->
+  options = $.extend(options or {},
+    dataType: "script"
+    cache: true
+    url: url
+  )
+  jQuery.ajax options
+jQuery.unparam = (value) ->
+  params = {}
+  pieces = value.split("&")
+  pair = undefined
+  i = undefined
+  l = undefined
+  i = 0
+  l = pieces.length
+  while i < l
+    pair = pieces[i].split("=", 2)
+    params[decodeURIComponent(pair[0])] = ((if pair.length is 2 then decodeURIComponent(pair[1].replace(/\+/g, " ")) else true))
+    i++
+  params
+template  = tmpl = (str, data) ->
+  # Simple JavaScript Templating
+  # John Resig - http://ejohn.org/ - MIT Licensed
+  fn = (if not /\W/.test(str) then cache[str] = cache[str] or tmpl(str) else new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + "with(obj){p.push('" + str.replace(/[\r\t\n]/g, " ").split("{{").join("\t").replace(/((^|}})[^\t]*)'/g, "$1\r").replace(/\t=(.*?)}}/g, "',$1,'").split("\t").join("');").split("}}").join("p.push('").split("\r").join("\\'") + "');}return p.join('');"))
+  (if data then fn(data) else fn)
+
+Mini =
+  compile:(t)->
+    {
+      render:template(t)
+    }
+ 
+build_control = (control_name, state, control)->
+  $el = control.$el.find('[data-name='+control_name+']')
+  #get control type
+  type = $el.data('type')
+  #create class
+  typeclass = null
+  try
+    typeclass = eval(type)
+  catch e
+    typeclass = WSF_CONTROL
+  if type? and typeclass?
+    return new typeclass(control, $el, control_name, state)
+  return null
+
+class WSF_VALIDATOR
+  constructor: (@parent_control, @settings)->
+    @error = @settings.error
+    return
+
+  validate: ()->
+    return true
+
+class WSF_REGEXP_VALIDATOR extends WSF_VALIDATOR
+  constructor: ()->
+    super
+    @pattern = new RegExp(@settings.expression,'g')
+
+  validate: ()->
+    val = @parent_control.value()
+    res = val.match(@pattern)
+    return (res!=null)
+
+class WSF_MIN_VALIDATOR extends WSF_VALIDATOR
+
+  validate: ()->
+    val = @parent_control.value()
+    return (val.length>=@settings.min)
+
+class WSF_MAX_VALIDATOR extends WSF_VALIDATOR
+
+  validate: ()->
+    val = @parent_control.value()
+    return (val.length<=@settings.max)
+
+
+class WSF_CONTROL
+  requirements : []
+  constructor: (@parent_control, @$el, @control_name, @fullstate)->
+    @state = @fullstate.state 
+    @load_subcontrols()
+    @isolation = (""+@$el.data('isolation')=="1")
+    @$el.data('control',@)
+    return
+  initialize:()->
+    counter = @requirements.length + 1
+    self = @
+    done = ()->
+        counter = counter - 1
+        if counter == 0
+          self.attach_events()
+        return
+    for r in @requirements
+      $.cachedScript(r).done(done)
+    done()
+
+  load_subcontrols: ()->
+    if @fullstate.controls?
+      @controls=(build_control(control_name, state, @) for control_name, state of @fullstate.controls)
+    else
+      @controls = []
+
+  attach_events: ()->
+    console.log "Attached #{@control_name}"
+    for control in @controls
+      if control?
+        control.initialize()
+    return
+
+  update: (state)->
+    return 
+
+  process_actions: (actions)->
+    for action in actions
+      try
+        fn = eval(action.type)
+        fn(action)
+      catch e
+        console.log "Failed preforming action #{action.type}"
+ 
+  process_update: (new_states)->
+    if new_states[@control_name]?
+      @update(new_states[@control_name])
+    for control in @controls
+      if control?
+        control.process_update(new_states)
+
+  get_context_state : ()->
+    if @parent_control? and not @isolation
+      return @parent_control.get_context_state()
+    return @wrap(@control_name,@fullstate)
+  wrap : (cname,state)->
+    ctrs = {}
+    ctrs[cname] = state
+    state = {"controls":ctrs}
+    if @parent_control?
+      return @parent_control.wrap(@parent_control.control_name,state)
+    return state
+
+  callback_url: (params)->
+    if @parent_control?
+      return @parent_control.callback_url(params)
+    $.extend params, @url_params
+    @url + '?' + $.param(params)
+
+  trigger_callback: (control_name,event,event_parameter)->
+    if @parent_control? and not @isolation
+      return @parent_control.trigger_callback(control_name,event,event_parameter)
+    self = @
+    $.ajax
+      type: 'POST',
+      url: @callback_url
+                      control_name: control_name
+                      event: event
+                      event_parameter: event_parameter
+      data:
+        JSON.stringify(@get_context_state())
+      processData: false,
+      contentType: 'application/json',
+      cache: no
+    .done (new_states)->
+      #Update all classes
+      if new_states.actions?
+        self.process_actions(new_states.actions)
+      self.process_update(new_states)
+      
+  #Simple event listener
+
+  #subscribe to an event
+  on: (name, callback, context)->
+    if not @_events?
+      @_events = {}
+    if not @_events[name]?
+      @_events[name] = []
+    @_events[name].push({callback:callback,context:context})
+    return @
+
+  #trigger an event
+  trigger: (name)->
+    if not @_events?[name]?
+      return @
+    for ev in @_events[name]
+      ev.callback.call(ev.context)
+    return @
+
+  remove:()->
+    console.log "Removed #{@control_name}"
+    @$el.remove()
+
+
+class WSF_PAGE_CONTROL extends WSF_CONTROL
+  constructor: (@fullstate)->
+    @state = @fullstate.state
+    @parent_control=null
+    @$el = $('[data-name='+@state.id+']') 
+    @control_name = @state.id
+    @url = @state['url']
+    @url_params = jQuery.unparam(@state['url_params'])
+    @$el.data('control',@)
+    @load_subcontrols()
+
+  wrap : (cname,state)->
+    state
+
+  remove:()->
+    console.log "Removed #{@control_name}"
+    @$el.remove()
+
+controls = {}
+
+class WSF_BUTTON_CONTROL extends WSF_CONTROL
+  attach_events: ()->
+    super
+    self = @
+    @$el.click (e)->
+      e.preventDefault()
+      self.click()
+
+  click: ()->
+    if @state['callback_click']
+      @trigger_callback(@control_name, 'click')
+
+  update: (state) ->
+    if state.text?
+      @state['text'] = state.text
+      @$el.text(state.text)
+
+class WSF_INPUT_CONTROL extends WSF_CONTROL
+  attach_events: ()->
+    super
+    self = @
+    @$el.change ()->
+      self.change()
+
+  change: ()->
+    #update local state
+    @state['text'] = @$el.val()
+    if @state['callback_change']
+      @trigger_callback(@control_name, 'change')
+    @trigger('change')
+
+  value:()->
+    return @$el.val()
+
+  update: (state) ->
+    if state.text?
+      @state['text'] = state.text
+      @$el.val(state.text)
+
+class WSF_TEXTAREA_CONTROL extends WSF_INPUT_CONTROL
+
+class WSF_AUTOCOMPLETE_CONTROL extends WSF_INPUT_CONTROL
+  requirements: ['assets/typeahead.min.js']
+  attach_events: () ->
+    super
+    self = @
+    @$el.typeahead({
+      name: @control_name
+      template: @state['template']
+      engine: Mini
+      remote:
+        url:""
+        replace: (url, uriEncodedQuery) ->
+            self.state['text'] = self.$el.val()
+            '?' + $.param
+                      control_name: self.control_name
+                      event: 'autocomplete'
+                      states: JSON.stringify(self.get_context_state())
+        filter: (parsedResponse) ->
+            parsedResponse[self.control_name]['suggestions']
+        fn: ()->
+          self.trigger_callback(self.control_name, 'autocomplete')
+    })
+    @$el.on 'typeahead:closed',()->
+        self.change() 
+    @$el.on 'typeahead:blured',()->
+        self.change() 
+
+class WSF_CHECKBOX_CONTROL extends WSF_CONTROL
+  attach_events: ()->
+    super
+    self = @
+    @checked_value = @state['checked_value']
+    @$el.change ()->
+      self.change()
+
+  change: ()->
+    #update local state
+    @state['checked'] = @$el.is(':checked')
+    if @state['callback_change']
+      @trigger_callback(@control_name, 'change')
+    @trigger('change')
+
+  value:()->
+    return @$el.is(':checked')
+
+  update: (state) ->
+    if state.text?
+      @state['checked'] = state.checked
+      @$el.prop('checked',state.checked)
+
+class WSF_FORM_ELEMENT_CONTROL extends WSF_CONTROL
+  attach_events: ()->
+    super
+    self = @
+    @value_control = @controls[0]
+    if @value_control?
+      #subscribe to change event on value_control
+      @value_control.on('change',@change,@)
+    @serverside_validator = false
+    #Initialize validators
+    @validators = []
+    for validator in @state['validators']
+      try
+        validatorclass = eval(validator.name)
+        @validators.push new validatorclass(@,validator)
+      catch e
+        #Use serverside validator if no js implementation
+        @serverside_validator = true
+    return
+
+  #value_control changed run validators
+  change: ()->
+    for validator in @validators
+      if not validator.validate()
+        @showerror(validator.error)
+        return
+    @showerror("")
+    #If there is validator which is not implemented in js ask server to validate
+    if @serverside_validator
+      @trigger_callback(@control_name, 'validate')
+    return
+
+  showerror: (message)->
+    @$el.removeClass("has-error")
+    @$el.find(".validation").remove()
+    if message.length>0
+      @$el.addClass("has-error")
+      errordiv = $("<div />").addClass('help-block').addClass('validation').text(message)
+      @$el.find(".col-lg-10").append(errordiv)
+
+  update: (state) ->
+    if state.error?
+      @showerror(state.error)
+
+  value: ()->
+    @value_control.value()
+
+class WSF_HTML_CONTROL extends WSF_CONTROL
+
+  value:()->
+    return @$el.html()
+
+  update: (state) ->
+    if state.html?
+      @state['html'] = state.html
+      @$el.html(state.html)
+
+class WSF_CHECKBOX_LIST_CONTROL extends WSF_CONTROL
+
+  attach_events: ()->
+    super
+    #Listen to events of subelements and forward them
+    for control in @controls
+      control.on('change',@change,@)
+    return
+ 
+  change:()->
+    @trigger("change")
+
+  value:()->
+    result = []
+    for subc in @controls
+      if subc.value()
+        result.push(subc.checked_value)
+    return result
+
+class WSF_PROGRESS_CONTROL extends WSF_CONTROL
+
+  attach_events:() ->
+    super
+    self = @
+    runfetch= ()->
+            self.fetch()
+    @int=setInterval(runfetch, 5000)
+
+  fetch: ()->
+    @trigger_callback(@control_name, 'progress_fetch')
+      
+
+  update: (state)->
+    if state.progress?
+      @state['progress'] = state.progress
+      @$el.children('.progress-bar').attr('aria-valuenow', state.progress).width(state.progress + '%')
+
+  remove: ()->
+    clearInterval(@int)
+    super
+
+class WSF_PAGINATION_CONTROL extends WSF_CONTROL
+
+  attach_events: ()->
+    self = @
+    @$el.on 'click', 'a', (e)->
+      e.preventDefault()
+      self.click(e)
+
+  click: (e)->
+    nr = $(e.target).data('nr')
+    if nr == "next"
+      @trigger_callback(@control_name, "next")
+    else if nr == "prev"
+      @trigger_callback(@control_name, "prev")
+    else
+      @trigger_callback(@control_name, "goto", nr)
+
+  update: (state) ->
+    if state._html?
+      @$el.html($(state._html).html())
+
+class WSF_GRID_CONTROL extends WSF_CONTROL
+  attach_events: ()->
+    super
+    self = @
+
+  update: (state) ->
+    if state.datasource?
+      @state['datasource'] = state.datasource
+    if state._body?
+      @$el.find('tbody').html(state._body)
+
+class WSF_REPEATER_CONTROL extends WSF_CONTROL
+  attach_events: ()->
+    super
+    self = @
+
+  update: (state) ->
+    if state.datasource?
+      @state['datasource'] = state.datasource
+    if state._body?
+      @$el.find('.repeater_content').html(state._body)
+      console.log state._body
+
+ 
+
+
+
+
+#### actions
+
+show_alert = (action)->
+    alert(action.message)
+
+start_modal = (action)->
+  modal = $("""<div class="modal fade">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title">#{action.title}</h4>
+      </div>
+      <div class="modal-body">
+      
+      </div>
+    </div>
+  </div>
+</div>""")
+  modal.appendTo('body')
+  modal.modal('show')
+  modal.on 'hidden.bs.modal', ()->
+    $(modal.find('[data-name]').get().reverse()).each (i,value)->
+      $(value).data('control').remove()
+      return
+    return
+  $.get( action.url, { ajax: 1 } )
+    .done (data) ->
+      modal.find('.modal-body').append(data)
+  

examples/widgetapp/assets/widget.css

@@ -0,0 +1,78 @@
+body {
+    padding-top: 80px;
+}
+
+.twitter-typeahead {
+    width: 100%;
+    position: relative;
+}
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+    margin-bottom: 0;
+    width:100%;
+    height: 34px;
+    position: absolute;
+    top:0;
+    left:0;
+}
+.twitter-typeahead .tt-hint {
+    color:#a1a1a1;
+    z-index: 1;
+    padding: 6px 12px;
+    border:1px solid transparent;
+}
+.twitter-typeahead .tt-query {
+    z-index: 2;
+    border-radius: 4px!important;
+    /* add these 2 statements if you have an appended input group */
+    border-top-right-radius: 0!important;
+    border-bottom-right-radius: 0!important;
+    /* add these 2 statements if you have an prepended input group */
+   /*  border-top-left-radius: 0!important;
+    border-bottom-left-radius: 0!important; */
+}
+
+.tt-dropdown-menu {
+    min-width: 160px;
+    margin-top: 2px;
+    padding: 5px 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0,0,0,.2);
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+    box-shadow: 0 5px 10px rgba(0,0,0,.2);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+
+.tt-suggestion {
+    display: block;
+    padding: 3px 20px;
+}
+
+.tt-suggestion.tt-is-under-cursor {
+    color: #fff;
+    background-color: #0081c2;
+    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
+}
+
+.tt-suggestion.tt-is-under-cursor a {
+    color: #fff;
+}
+
+.tt-suggestion p {
+    margin: 0;
+

examples/widgetapp/assets/widget.js

@@ -0,0 +1,820 @@
+// Generated by CoffeeScript 1.6.1
+var Mini, WSF_AUTOCOMPLETE_CONTROL, WSF_BUTTON_CONTROL, WSF_CHECKBOX_CONTROL, WSF_CHECKBOX_LIST_CONTROL, WSF_CONTROL, WSF_FORM_ELEMENT_CONTROL, WSF_GRID_CONTROL, WSF_HTML_CONTROL, WSF_INPUT_CONTROL, WSF_MAX_VALIDATOR, WSF_MIN_VALIDATOR, WSF_PAGE_CONTROL, WSF_PAGINATION_CONTROL, WSF_PROGRESS_CONTROL, WSF_REGEXP_VALIDATOR, WSF_REPEATER_CONTROL, WSF_TEXTAREA_CONTROL, WSF_VALIDATOR, build_control, cache, controls, show_alert, start_modal, template, tmpl,
+  __hasProp = {}.hasOwnProperty,
+  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+cache = {};
+
+jQuery.cachedScript = function(url, options) {
+  options = $.extend(options || {}, {
+    dataType: "script",
+    cache: true,
+    url: url
+  });
+  return jQuery.ajax(options);
+};
+
+jQuery.unparam = function(value) {
+  var i, l, pair, params, pieces;
+  params = {};
+  pieces = value.split("&");
+  pair = void 0;
+  i = void 0;
+  l = void 0;
+  i = 0;
+  l = pieces.length;
+  while (i < l) {
+    pair = pieces[i].split("=", 2);
+    params[decodeURIComponent(pair[0])] = (pair.length === 2 ? decodeURIComponent(pair[1].replace(/\+/g, " ")) : true);
+    i++;
+  }
+  return params;
+};
+
+template = tmpl = function(str, data) {
+  var fn;
+  fn = (!/\W/.test(str) ? cache[str] = cache[str] || tmpl(str) : new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + "with(obj){p.push('" + str.replace(/[\r\t\n]/g, " ").split("{{").join("\t").replace(/((^|}})[^\t]*)'/g, "$1\r").replace(/\t=(.*?)}}/g, "',$1,'").split("\t").join("');").split("}}").join("p.push('").split("\r").join("\\'") + "');}return p.join('');"));
+  if (data) {
+    return fn(data);
+  } else {
+    return fn;
+  }
+};
+
+Mini = {
+  compile: function(t) {
+    return {
+      render: template(t)
+    };
+  }
+};
+
+build_control = function(control_name, state, control) {
+  var $el, type, typeclass;
+  $el = control.$el.find('[data-name=' + control_name + ']');
+  type = $el.data('type');
+  typeclass = null;
+  try {
+    typeclass = eval(type);
+  } catch (e) {
+    typeclass = WSF_CONTROL;
+  }
+  if ((type != null) && (typeclass != null)) {
+    return new typeclass(control, $el, control_name, state);
+  }
+  return null;
+};
+
+WSF_VALIDATOR = (function() {
+
+  function WSF_VALIDATOR(parent_control, settings) {
+    this.parent_control = parent_control;
+    this.settings = settings;
+    this.error = this.settings.error;
+    return;
+  }
+
+  WSF_VALIDATOR.prototype.validate = function() {
+    return true;
+  };
+
+  return WSF_VALIDATOR;
+
+})();
+
+WSF_REGEXP_VALIDATOR = (function(_super) {
+
+  __extends(WSF_REGEXP_VALIDATOR, _super);
+
+  function WSF_REGEXP_VALIDATOR() {
+    WSF_REGEXP_VALIDATOR.__super__.constructor.apply(this, arguments);
+    this.pattern = new RegExp(this.settings.expression, 'g');
+  }
+
+  WSF_REGEXP_VALIDATOR.prototype.validate = function() {
+    var res, val;
+    val = this.parent_control.value();
+    res = val.match(this.pattern);
+    return res !== null;
+  };
+
+  return WSF_REGEXP_VALIDATOR;
+
+})(WSF_VALIDATOR);
+
+WSF_MIN_VALIDATOR = (function(_super) {
+
+  __extends(WSF_MIN_VALIDATOR, _super);
+
+  function WSF_MIN_VALIDATOR() {
+    return WSF_MIN_VALIDATOR.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_MIN_VALIDATOR.prototype.validate = function() {
+    var val;
+    val = this.parent_control.value();
+    return val.length >= this.settings.min;
+  };
+
+  return WSF_MIN_VALIDATOR;
+
+})(WSF_VALIDATOR);
+
+WSF_MAX_VALIDATOR = (function(_super) {
+
+  __extends(WSF_MAX_VALIDATOR, _super);
+
+  function WSF_MAX_VALIDATOR() {
+    return WSF_MAX_VALIDATOR.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_MAX_VALIDATOR.prototype.validate = function() {
+    var val;
+    val = this.parent_control.value();
+    return val.length <= this.settings.max;
+  };
+
+  return WSF_MAX_VALIDATOR;
+
+})(WSF_VALIDATOR);
+
+WSF_CONTROL = (function() {
+
+  WSF_CONTROL.prototype.requirements = [];
+
+  function WSF_CONTROL(parent_control, $el, control_name, fullstate) {
+    this.parent_control = parent_control;
+    this.$el = $el;
+    this.control_name = control_name;
+    this.fullstate = fullstate;
+    this.state = this.fullstate.state;
+    this.load_subcontrols();
+    this.isolation = "" + this.$el.data('isolation') === "1";
+    this.$el.data('control', this);
+    return;
+  }
+
+  WSF_CONTROL.prototype.initialize = function() {
+    var counter, done, r, self, _i, _len, _ref;
+    counter = this.requirements.length + 1;
+    self = this;
+    done = function() {
+      counter = counter - 1;
+      if (counter === 0) {
+        self.attach_events();
+      }
+    };
+    _ref = this.requirements;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      r = _ref[_i];
+      $.cachedScript(r).done(done);
+    }
+    return done();
+  };
+
+  WSF_CONTROL.prototype.load_subcontrols = function() {
+    var control_name, state;
+    if (this.fullstate.controls != null) {
+      return this.controls = (function() {
+        var _ref, _results;
+        _ref = this.fullstate.controls;
+        _results = [];
+        for (control_name in _ref) {
+          state = _ref[control_name];
+          _results.push(build_control(control_name, state, this));
+        }
+        return _results;
+      }).call(this);
+    } else {
+      return this.controls = [];
+    }
+  };
+
+  WSF_CONTROL.prototype.attach_events = function() {
+    var control, _i, _len, _ref;
+    console.log("Attached " + this.control_name);
+    _ref = this.controls;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      control = _ref[_i];
+      if (control != null) {
+        control.initialize();
+      }
+    }
+  };
+
+  WSF_CONTROL.prototype.update = function(state) {};
+
+  WSF_CONTROL.prototype.process_actions = function(actions) {
+    var action, fn, _i, _len, _results;
+    _results = [];
+    for (_i = 0, _len = actions.length; _i < _len; _i++) {
+      action = actions[_i];
+      try {
+        fn = eval(action.type);
+        _results.push(fn(action));
+      } catch (e) {
+        _results.push(console.log("Failed preforming action " + action.type));
+      }
+    }
+    return _results;
+  };
+
+  WSF_CONTROL.prototype.process_update = function(new_states) {
+    var control, _i, _len, _ref, _results;
+    if (new_states[this.control_name] != null) {
+      this.update(new_states[this.control_name]);
+    }
+    _ref = this.controls;
+    _results = [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      control = _ref[_i];
+      if (control != null) {
+        _results.push(control.process_update(new_states));
+      } else {
+        _results.push(void 0);
+      }
+    }
+    return _results;
+  };
+
+  WSF_CONTROL.prototype.get_context_state = function() {
+    if ((this.parent_control != null) && !this.isolation) {
+      return this.parent_control.get_context_state();
+    }
+    return this.wrap(this.control_name, this.fullstate);
+  };
+
+  WSF_CONTROL.prototype.wrap = function(cname, state) {
+    var ctrs;
+    ctrs = {};
+    ctrs[cname] = state;
+    state = {
+      "controls": ctrs
+    };
+    if (this.parent_control != null) {
+      return this.parent_control.wrap(this.parent_control.control_name, state);
+    }
+    return state;
+  };
+
+  WSF_CONTROL.prototype.callback_url = function(params) {
+    if (this.parent_control != null) {
+      return this.parent_control.callback_url(params);
+    }
+    $.extend(params, this.url_params);
+    return this.url + '?' + $.param(params);
+  };
+
+  WSF_CONTROL.prototype.trigger_callback = function(control_name, event, event_parameter) {
+    var self;
+    if ((this.parent_control != null) && !this.isolation) {
+      return this.parent_control.trigger_callback(control_name, event, event_parameter);
+    }
+    self = this;
+    return $.ajax({
+      type: 'POST',
+      url: this.callback_url({
+        control_name: control_name,
+        event: event,
+        event_parameter: event_parameter
+      }),
+      data: JSON.stringify(this.get_context_state()),
+      processData: false,
+      contentType: 'application/json',
+      cache: false
+    }).done(function(new_states) {
+      if (new_states.actions != null) {
+        self.process_actions(new_states.actions);
+      }
+      return self.process_update(new_states);
+    });
+  };
+
+  WSF_CONTROL.prototype.on = function(name, callback, context) {
+    if (this._events == null) {
+      this._events = {};
+    }
+    if (this._events[name] == null) {
+      this._events[name] = [];
+    }
+    this._events[name].push({
+      callback: callback,
+      context: context
+    });
+    return this;
+  };
+
+  WSF_CONTROL.prototype.trigger = function(name) {
+    var ev, _i, _len, _ref, _ref1;
+    if (((_ref = this._events) != null ? _ref[name] : void 0) == null) {
+      return this;
+    }
+    _ref1 = this._events[name];
+    for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
+      ev = _ref1[_i];
+      ev.callback.call(ev.context);
+    }
+    return this;
+  };
+
+  WSF_CONTROL.prototype.remove = function() {
+    console.log("Removed " + this.control_name);
+    return this.$el.remove();
+  };
+
+  return WSF_CONTROL;
+
+})();
+
+WSF_PAGE_CONTROL = (function(_super) {
+
+  __extends(WSF_PAGE_CONTROL, _super);
+
+  function WSF_PAGE_CONTROL(fullstate) {
+    this.fullstate = fullstate;
+    this.state = this.fullstate.state;
+    this.parent_control = null;
+    this.$el = $('[data-name=' + this.state.id + ']');
+    this.control_name = this.state.id;
+    this.url = this.state['url'];
+    this.url_params = jQuery.unparam(this.state['url_params']);
+    this.$el.data('control', this);
+    this.load_subcontrols();
+  }
+
+  WSF_PAGE_CONTROL.prototype.wrap = function(cname, state) {
+    return state;
+  };
+
+  WSF_PAGE_CONTROL.prototype.remove = function() {
+    console.log("Removed " + this.control_name);
+    return this.$el.remove();
+  };
+
+  return WSF_PAGE_CONTROL;
+
+})(WSF_CONTROL);
+
+controls = {};
+
+WSF_BUTTON_CONTROL = (function(_super) {
+
+  __extends(WSF_BUTTON_CONTROL, _super);
+
+  function WSF_BUTTON_CONTROL() {
+    return WSF_BUTTON_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_BUTTON_CONTROL.prototype.attach_events = function() {
+    var self;
+    WSF_BUTTON_CONTROL.__super__.attach_events.apply(this, arguments);
+    self = this;
+    return this.$el.click(function(e) {
+      e.preventDefault();
+      return self.click();
+    });
+  };
+
+  WSF_BUTTON_CONTROL.prototype.click = function() {
+    if (this.state['callback_click']) {
+      return this.trigger_callback(this.control_name, 'click');
+    }
+  };
+
+  WSF_BUTTON_CONTROL.prototype.update = function(state) {
+    if (state.text != null) {
+      this.state['text'] = state.text;
+      return this.$el.text(state.text);
+    }
+  };
+
+  return WSF_BUTTON_CONTROL;
+
+})(WSF_CONTROL);
+
+WSF_INPUT_CONTROL = (function(_super) {
+
+  __extends(WSF_INPUT_CONTROL, _super);
+
+  function WSF_INPUT_CONTROL() {
+    return WSF_INPUT_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_INPUT_CONTROL.prototype.attach_events = function() {
+    var self;
+    WSF_INPUT_CONTROL.__super__.attach_events.apply(this, arguments);
+    self = this;
+    return this.$el.change(function() {
+      return self.change();
+    });
+  };
+
+  WSF_INPUT_CONTROL.prototype.change = function() {
+    this.state['text'] = this.$el.val();
+    if (this.state['callback_change']) {
+      this.trigger_callback(this.control_name, 'change');
+    }
+    return this.trigger('change');
+  };
+
+  WSF_INPUT_CONTROL.prototype.value = function() {
+    return this.$el.val();
+  };
+
+  WSF_INPUT_CONTROL.prototype.update = function(state) {
+    if (state.text != null) {
+      this.state['text'] = state.text;
+      return this.$el.val(state.text);
+    }
+  };
+
+  return WSF_INPUT_CONTROL;
+
+})(WSF_CONTROL);
+
+WSF_TEXTAREA_CONTROL = (function(_super) {
+
+  __extends(WSF_TEXTAREA_CONTROL, _super);
+
+  function WSF_TEXTAREA_CONTROL() {
+    return WSF_TEXTAREA_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  return WSF_TEXTAREA_CONTROL;
+
+})(WSF_INPUT_CONTROL);
+
+WSF_AUTOCOMPLETE_CONTROL = (function(_super) {
+
+  __extends(WSF_AUTOCOMPLETE_CONTROL, _super);
+
+  function WSF_AUTOCOMPLETE_CONTROL() {
+    return WSF_AUTOCOMPLETE_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_AUTOCOMPLETE_CONTROL.prototype.requirements = ['assets/typeahead.min.js'];
+
+  WSF_AUTOCOMPLETE_CONTROL.prototype.attach_events = function() {
+    var self;
+    WSF_AUTOCOMPLETE_CONTROL.__super__.attach_events.apply(this, arguments);
+    self = this;
+    this.$el.typeahead({
+      name: this.control_name,
+      template: this.state['template'],
+      engine: Mini,
+      remote: {
+        url: "",
+        replace: function(url, uriEncodedQuery) {
+          self.state['text'] = self.$el.val();
+          return '?' + $.param({
+            control_name: self.control_name,
+            event: 'autocomplete',
+            states: JSON.stringify(self.get_context_state())
+          });
+        },
+        filter: function(parsedResponse) {
+          return parsedResponse[self.control_name]['suggestions'];
+        },
+        fn: function() {
+          return self.trigger_callback(self.control_name, 'autocomplete');
+        }
+      }
+    });
+    this.$el.on('typeahead:closed', function() {
+      return self.change();
+    });
+    return this.$el.on('typeahead:blured', function() {
+      return self.change();
+    });
+  };
+
+  return WSF_AUTOCOMPLETE_CONTROL;
+
+})(WSF_INPUT_CONTROL);
+
+WSF_CHECKBOX_CONTROL = (function(_super) {
+
+  __extends(WSF_CHECKBOX_CONTROL, _super);
+
+  function WSF_CHECKBOX_CONTROL() {
+    return WSF_CHECKBOX_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_CHECKBOX_CONTROL.prototype.attach_events = function() {
+    var self;
+    WSF_CHECKBOX_CONTROL.__super__.attach_events.apply(this, arguments);
+    self = this;
+    this.checked_value = this.state['checked_value'];
+    return this.$el.change(function() {
+      return self.change();
+    });
+  };
+
+  WSF_CHECKBOX_CONTROL.prototype.change = function() {
+    this.state['checked'] = this.$el.is(':checked');
+    if (this.state['callback_change']) {
+      this.trigger_callback(this.control_name, 'change');
+    }
+    return this.trigger('change');
+  };
+
+  WSF_CHECKBOX_CONTROL.prototype.value = function() {
+    return this.$el.is(':checked');
+  };
+
+  WSF_CHECKBOX_CONTROL.prototype.update = function(state) {
+    if (state.text != null) {
+      this.state['checked'] = state.checked;
+      return this.$el.prop('checked', state.checked);
+    }
+  };
+
+  return WSF_CHECKBOX_CONTROL;
+
+})(WSF_CONTROL);
+
+WSF_FORM_ELEMENT_CONTROL = (function(_super) {
+
+  __extends(WSF_FORM_ELEMENT_CONTROL, _super);
+
+  function WSF_FORM_ELEMENT_CONTROL() {
+    return WSF_FORM_ELEMENT_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_FORM_ELEMENT_CONTROL.prototype.attach_events = function() {
+    var self, validator, validatorclass, _i, _len, _ref;
+    WSF_FORM_ELEMENT_CONTROL.__super__.attach_events.apply(this, arguments);
+    self = this;
+    this.value_control = this.controls[0];
+    if (this.value_control != null) {
+      this.value_control.on('change', this.change, this);
+    }
+    this.serverside_validator = false;
+    this.validators = [];
+    _ref = this.state['validators'];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      validator = _ref[_i];
+      try {
+        validatorclass = eval(validator.name);
+        this.validators.push(new validatorclass(this, validator));
+      } catch (e) {
+        this.serverside_validator = true;
+      }
+    }
+  };
+
+  WSF_FORM_ELEMENT_CONTROL.prototype.change = function() {
+    var validator, _i, _len, _ref;
+    _ref = this.validators;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      validator = _ref[_i];
+      if (!validator.validate()) {
+        this.showerror(validator.error);
+        return;
+      }
+    }
+    this.showerror("");
+    if (this.serverside_validator) {
+      this.trigger_callback(this.control_name, 'validate');
+    }
+  };
+
+  WSF_FORM_ELEMENT_CONTROL.prototype.showerror = function(message) {
+    var errordiv;
+    this.$el.removeClass("has-error");
+    this.$el.find(".validation").remove();
+    if (message.length > 0) {
+      this.$el.addClass("has-error");
+      errordiv = $("<div />").addClass('help-block').addClass('validation').text(message);
+      return this.$el.find(".col-lg-10").append(errordiv);
+    }
+  };
+
+  WSF_FORM_ELEMENT_CONTROL.prototype.update = function(state) {
+    if (state.error != null) {
+      return this.showerror(state.error);
+    }
+  };
+
+  WSF_FORM_ELEMENT_CONTROL.prototype.value = function() {
+    return this.value_control.value();
+  };
+
+  return WSF_FORM_ELEMENT_CONTROL;
+
+})(WSF_CONTROL);
+
+WSF_HTML_CONTROL = (function(_super) {
+
+  __extends(WSF_HTML_CONTROL, _super);
+
+  function WSF_HTML_CONTROL() {
+    return WSF_HTML_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_HTML_CONTROL.prototype.value = function() {
+    return this.$el.html();
+  };
+
+  WSF_HTML_CONTROL.prototype.update = function(state) {
+    if (state.html != null) {
+      this.state['html'] = state.html;
+      return this.$el.html(state.html);
+    }
+  };
+
+  return WSF_HTML_CONTROL;
+
+})(WSF_CONTROL);
+
+WSF_CHECKBOX_LIST_CONTROL = (function(_super) {
+
+  __extends(WSF_CHECKBOX_LIST_CONTROL, _super);
+
+  function WSF_CHECKBOX_LIST_CONTROL() {
+    return WSF_CHECKBOX_LIST_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_CHECKBOX_LIST_CONTROL.prototype.attach_events = function() {
+    var control, _i, _len, _ref;
+    WSF_CHECKBOX_LIST_CONTROL.__super__.attach_events.apply(this, arguments);
+    _ref = this.controls;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      control = _ref[_i];
+      control.on('change', this.change, this);
+    }
+  };
+
+  WSF_CHECKBOX_LIST_CONTROL.prototype.change = function() {
+    return this.trigger("change");
+  };
+
+  WSF_CHECKBOX_LIST_CONTROL.prototype.value = function() {
+    var result, subc, _i, _len, _ref;
+    result = [];
+    _ref = this.controls;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      subc = _ref[_i];
+      if (subc.value()) {
+        result.push(subc.checked_value);
+      }
+    }
+    return result;
+  };
+
+  return WSF_CHECKBOX_LIST_CONTROL;
+
+})(WSF_CONTROL);
+
+WSF_PROGRESS_CONTROL = (function(_super) {
+
+  __extends(WSF_PROGRESS_CONTROL, _super);
+
+  function WSF_PROGRESS_CONTROL() {
+    return WSF_PROGRESS_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_PROGRESS_CONTROL.prototype.attach_events = function() {
+    var runfetch, self;
+    WSF_PROGRESS_CONTROL.__super__.attach_events.apply(this, arguments);
+    self = this;
+    runfetch = function() {
+      return self.fetch();
+    };
+    return this.int = setInterval(runfetch, 5000);
+  };
+
+  WSF_PROGRESS_CONTROL.prototype.fetch = function() {
+    return this.trigger_callback(this.control_name, 'progress_fetch');
+  };
+
+  WSF_PROGRESS_CONTROL.prototype.update = function(state) {
+    if (state.progress != null) {
+      this.state['progress'] = state.progress;
+      return this.$el.children('.progress-bar').attr('aria-valuenow', state.progress).width(state.progress + '%');
+    }
+  };
+
+  WSF_PROGRESS_CONTROL.prototype.remove = function() {
+    clearInterval(this.int);
+    return WSF_PROGRESS_CONTROL.__super__.remove.apply(this, arguments);
+  };
+
+  return WSF_PROGRESS_CONTROL;
+
+})(WSF_CONTROL);
+
+WSF_PAGINATION_CONTROL = (function(_super) {
+
+  __extends(WSF_PAGINATION_CONTROL, _super);
+
+  function WSF_PAGINATION_CONTROL() {
+    return WSF_PAGINATION_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_PAGINATION_CONTROL.prototype.attach_events = function() {
+    var self;
+    self = this;
+    return this.$el.on('click', 'a', function(e) {
+      e.preventDefault();
+      return self.click(e);
+    });
+  };
+
+  WSF_PAGINATION_CONTROL.prototype.click = function(e) {
+    var nr;
+    nr = $(e.target).data('nr');
+    if (nr === "next") {
+      return this.trigger_callback(this.control_name, "next");
+    } else if (nr === "prev") {
+      return this.trigger_callback(this.control_name, "prev");
+    } else {
+      return this.trigger_callback(this.control_name, "goto", nr);
+    }
+  };
+
+  WSF_PAGINATION_CONTROL.prototype.update = function(state) {
+    if (state._html != null) {
+      return this.$el.html($(state._html).html());
+    }
+  };
+
+  return WSF_PAGINATION_CONTROL;
+
+})(WSF_CONTROL);
+
+WSF_GRID_CONTROL = (function(_super) {
+
+  __extends(WSF_GRID_CONTROL, _super);
+
+  function WSF_GRID_CONTROL() {
+    return WSF_GRID_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_GRID_CONTROL.prototype.attach_events = function() {
+    var self;
+    WSF_GRID_CONTROL.__super__.attach_events.apply(this, arguments);
+    return self = this;
+  };
+
+  WSF_GRID_CONTROL.prototype.update = function(state) {
+    if (state.datasource != null) {
+      this.state['datasource'] = state.datasource;
+    }
+    if (state._body != null) {
+      return this.$el.find('tbody').html(state._body);
+    }
+  };
+
+  return WSF_GRID_CONTROL;
+
+})(WSF_CONTROL);
+
+WSF_REPEATER_CONTROL = (function(_super) {
+
+  __extends(WSF_REPEATER_CONTROL, _super);
+
+  function WSF_REPEATER_CONTROL() {
+    return WSF_REPEATER_CONTROL.__super__.constructor.apply(this, arguments);
+  }
+
+  WSF_REPEATER_CONTROL.prototype.attach_events = function() {
+    var self;
+    WSF_REPEATER_CONTROL.__super__.attach_events.apply(this, arguments);
+    return self = this;
+  };
+
+  WSF_REPEATER_CONTROL.prototype.update = function(state) {
+    if (state.datasource != null) {
+      this.state['datasource'] = state.datasource;
+    }
+    if (state._body != null) {
+      this.$el.find('.repeater_content').html(state._body);
+      return console.log(state._body);
+    }
+  };
+
+  return WSF_REPEATER_CONTROL;
+
+})(WSF_CONTROL);
+
+show_alert = function(action) {
+  return alert(action.message);
+};
+
+start_modal = function(action) {
+  var modal;
+  modal = $("<div class=\"modal fade\">\n<div class=\"modal-dialog\">\n  <div class=\"modal-content\">\n    <div class=\"modal-header\">\n      <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n      <h4 class=\"modal-title\">" + action.title + "</h4>\n    </div>\n    <div class=\"modal-body\">\n    \n    </div>\n  </div>\n</div>\n</div>");
+  modal.appendTo('body');
+  modal.modal('show');
+  modal.on('hidden.bs.modal', function() {
+    $(modal.find('[data-name]').get().reverse()).each(function(i, value) {
+      $(value).data('control').remove();
+    });
+  });
+  return $.get(action.url, {
+    ajax: 1
+  }).done(function(data) {
+    return modal.find('.modal-body').append(data);
+  });
+};