An example of ClientHandler of Google Apps Script Gadget

client_handler.js

/*global UiApp:false, Utilities:false */

function apply_style(widget, styles) {
    'use strict';

    var key;

    for (key in styles) {
        if (styles.hasOwnProperty(key)) {
            widget.setStyleAttribute(key, styles[key]);
        }
    }
}

function click_handler1() {
    'use strict';

    var app, label4;

    app = UiApp.getActiveApplication();

    // Label4
    label4 = app.getElementById('Label4');
    label4.setVisible(true);
    apply_style(label4, {
        'background-color': '#F89406'
    });
    label4.setText('Loading...');

    return app;
}

function click_handler2() {
    'use strict';

    var app, label2, label4;

    app = UiApp.getActiveApplication();

    // Label2
    label2 = app.getElementById('Label2');
    label2.setVisible(true);
    apply_style(label2, {
        'background-color': '#46A546'
    });
    label2.setText('Completed!');

    // Label4
    label4 = app.getElementById('Label4');
    label4.setVisible(true);
    apply_style(label4, {
        'background-color': '#46A546'
    });
    label4.setText('Completed!');

    Utilities.sleep(2000);

    return app;
}

function doGet() {
    'use strict';

    var app, panel1, panel2, panel3, button, label1, label2, label3, label4;

    // UiInstance
    app = UiApp.createApplication();

    // Panel 1
    panel1 = app.createVerticalPanel();
    panel1.setSpacing(5);
    app.add(panel1);

    // Button
    button = app.createButton('OK');
    panel1.add(button);

    // Panel 2
    panel2 = app.createHorizontalPanel();
    panel2.setSpacing(5);
    panel2.setVerticalAlignment(UiApp.VerticalAlignment.MIDDLE);
    panel1.add(panel2);

    // Label1
    label1 = app.createLabel('Client Handler (fast)');
    apply_style(label1, {
        'height': '20px',
        'width': '140px'
    });
    panel2.add(label1);

    // Label2
    label2 = app.createLabel();
    label2.setId('Label2');
    apply_style(label2, {
        'border-radius': '4px',
        'color': '#FFF',
        'display': 'inline',
        'background-color': '#F89406',
        'padding': '1px 3px 2px 3px'
    });
    label2.setVisible(false);
    panel2.add(label2);

    // Panel 3
    panel3 = app.createHorizontalPanel();
    panel3.setSpacing(5);
    panel3.setVerticalAlignment(UiApp.VerticalAlignment.MIDDLE);
    panel1.add(panel3);

    // Label3
    label3 = app.createLabel('Server Handler (slow)');
    apply_style(label3, {
        'height': '20px',
        'width': '140px'
    });
    panel3.add(label3);

    // Label4
    label4 = app.createLabel();
    label4.setId('Label4');
    apply_style(label4, {
        'border-radius': '4px',
        'color': '#FFF',
        'display': 'inline',
        'background-color': '#F89406',
        'padding': '1px 3px 2px 3px'
    });
    label4.setVisible(false);
    panel3.add(label4);

    // Client Handler
    button.addClickHandler(app.createClientHandler().forTargets(label2).setVisible(true).setStyleAttribute('background-color', '#F89406').setText('Loading...'));

    // Server Handler
    button.addClickHandler(app.createServerClickHandler('click_handler1'));
    button.addClickHandler(app.createServerClickHandler('click_handler2'));

    return app;
}