QuickUI is designed to work well with the CoffeeScript language, a preprocessor for JavaScript that permits more concise source code in many situations. You can use CoffeeScript to create your user interface in QuickUI using less code.

Create controls in CoffeeScript

Since processed CoffeeScript is just JavaScript, all the QuickUI methods, events, etc., work as normal in CoffeeScript. For example, in CoffeeScript, you can create controls with the Control.create() method, and the CoffeeScript form will typically be less verbose than the equivalent JavaScript.

Among other things, CoffeeScript allows for concise declaration of a JavaScript dictionaries. The Control.create() method allows you to pass in such a dictionary of properties; these properties will be passed to setters on the control. For example, the following JavaScript passes a JavaScript dictionary to the create() call to instantiate several QuickUI controls in a small news module:

// Plain JavaScript version
$( "body" ).append(
    CollapsibleWithHeadingButton.create({
        heading: "News story",
        content: [
            FlickrInterestingPhoto.create({
                photoSize: "t",
                css: { float: "left" },
            }),
            LoremIpsum.create()
        ]
    })
);

This produces the following output:

In the CoffeeScript version, most of the parenthesis, and all of the commas and curly braces, can be dropped. This results in functionally equivalent source code that is significantly more compact:

# CoffeeScript version
$( "body" ).append CollapsibleWithHeadingButton.create
  heading: "News story"
  content: [
    FlickrInterestingPhoto.create
      photoSize: "t"
      css: float: "left"
    LoremIpsum.create()
  ]

Creating QuickUI control classes in CoffeeScript

When creating QuickUI control classes in plain JavaScript, the Control.sub() method is used to create a subclass of an existing base class. (For more information, see the tutorial on creating classes in JavaScript.) CoffeeScript makes this process easier and more concise through its built-in "class" keyword. You can create a QuickUI control class in CoffeeScript just like any other CoffeeScript class. Follow these steps:

1. Use any existing QuickUI control class after the "extends" keyword to indicate which control class you want to subclass. If you want to create a control from scratch, subclass the Control class:

   class window.MyClass extends Control
   

   The "window." ensures the class is available for instantiation within other QuickUI controls (whether CoffeeScript-based or not).

2. Define an "inherited:" key to establish which property setters in the superclass the control would like to set when rendering. E.g.:

   class MyPage extends Page
     inherited:
       title: "Welcome to My Page"
   

   When a MyPage control is rendered, this will pass the given string to the Page.title() property setter (which will display the string in the page's browser title).

As an example, here is the CoffeeScript source code for a simple IconButton class that shows an icon to the left of the button's label:

This produces the following output:

Note that the IconButton control defines two "content:" members. The first (inside the "inherited:" key) invokes the BasicButton superclass' content() property when the control is rendered. This effectively populates the contents of the button. The second use of "content:" defines the IconButton class' own content() property as a chain of jQuery functions that gets or sets whatever is inside the span with ID "IconButton_content".