Kodepad Gist Share by fkadev on http://koding.com Author: http://fkadev.koding.com

index.coffee

# Your awesome Koding App Code

{nickname} = KD.whoami().profile

class MainView extends JView
  constructor:->
    super
    @header = new KDHeaderView
      type: "big"
      title: "Welcome to Kodepad!"

    @name = new KDInputView
      placeholder: "Your name"

    @button = new KDButtonView
      title: "Say hello!"
      callback: =>
        name = @name.getValue() or nickname
        @_notify?.destroy()
        @_notify = new KDNotificationView
          title: "Hello, #{name}!"

  pistachio:->
    """
    {{> @header}}
    Just change something from the left pane.
    <br><br>
    <strong>And try some interactions!:</strong>
    {{> @name}}
    {{> @button}}
    """
  viewAppended: ->
    @setTemplate do @pistachio

appView.addSubView new MainView
  cssClass: "my-koding-app"

style.css

/* Your awesome Koding App CSS Code */

.my-koding-app {
  margin: 10px;
  padding: 0 10px 10px;
  width: auto;
  height: auto;
  background-color: rgba(255,255,255,0.9);
  border-radius: 3px;
}

.my-koding-app input {
  margin: 20px 0;
  background-color: #ccc !important;
}