# Rpad GUI test

Normally, Rpad runs calculations on a page from top to bottom. With dojo's event system, you can change that and run things in different orders or with different dependencies or to make interactions more dynamic. The following example updates the top Rpad input block whenever you change the select box created by the third Rpad input block.

    # this block runs after the next Rpad section is finished
    a = a + 1
    cat("a = ",a)

    # this block runs when the select box is updated
    HTMLon()
    HTMLh2(sname)
    Html(state.x77[sname,,drop=FALSE])
    a = a + 10
    cat("a = ",a)

    # this block runs initially
    a = 1
    data(state)
    cat("Pick a state:")
    HTMLon()
    HTMLselect("sname", state.name, id="sNameSelect")

    // Dojo Javascript code to tie the GUI together:
    // (Normally, you'd hide this code.)

    // make the select box auto update
    dojo.event.connect(dojo.byId("sNameSelect"), "onchange",
                       function(e) {rpad.calculateNode(e.target, true);});

    // when the select is done updating the server, calculate "rpad1"
    dojo.event.connect(dojo.byId("sNameSelect"), "onReceive",
                       dojo.widget.byId("rpad1"), "calculate");

    // when "rpad1" is done, calculate "rpad2"
    dojo.event.connect(dojo.widget.byId("rpad1"), "onReceive",
                       dojo.widget.byId("rpad2"), "calculate");

    // this makes all Rpad updates to output boxes "yellowfade" in
    dojo.event.connect(rpad, "updateResults",
        function (rpadResults, data) {
            dojo.lfx.html.highlight(rpadResults,
                dojo.gfx.color.extractRGB("#FFFF40")).play(1000);  // from color - bright yellow
            // #FFFFE0
        });
    dojo.debug("hello");
    " ";

that's it