JavaScript Events & Messages (JEM)

Usage

Examples

The following example shows how a message can be sent and how actions can be triggered based on the values in the message.  Change the values in the inputboxes and click the send message button to trigger different actions.

Code

Here's the code for the example above.  Note that this example requires the jQuery script to be installed for the highlight effect.

<pre class="script">jquery.ui()</pre>
<script type="text/javascript">
function animate($this) { $this.effect('highlight', {}, 'fast'); }
</script>
<div style="margin-left: 15px;">
    <div style="margin-bottom: 10px;">Name: 
        <input type="text" value="Fred" id="name"  />
        Count:
        <input type="text" value="100" id="count"  />
        <input type="button" ctor="when($this.click) @message({ name: #name.val(), count: #count.val() });" value="send message"  />
    </div>
    <div>
        <div ctor="when(@message) animate($this);">Message Only</div>
        <div ctor="when(@message.name == 'Fred') animate($this);">Name == Fred</div>
        <div ctor="when(@message.name != 'Fred') animate($this);">Name != Fred</div>
    </div>
    <div>
        <div ctor="when(/^F/.test(@message.name)) animate($this);">Name starts with F</div>
        <div ctor="when(/d$/.test(@message.name)) animate($this);">Name ends with d</div>
        <div ctor="when(@message.name == 'Fred' &amp;&amp; @message.count == 100) animate($this);">Name == Fred, count == 100</div>
    </div>
    <div>
        <div ctor="when(@message.count &lt;= 100 &amp;&amp; /^F/.test(@message.name)) animate($this);">Count &lt;= 100, Name starts with F</div>
        <div ctor="when(@message.count &lt;= 50) animate($this);">Count &lt;= 50</div>
        <div ctor="when(@message &amp;&amp; Deki.$.browser.safari) animate($this);">Your browser is Safari</div>
    </div>
</div>

Usage

Examples

The following example shows how actions can be triggered on the kind of event.  Click, double click, or type in the input box to see which actions get triggered.

Code

Here's the code for the example above.  Note that this example requires the jQuery script to be installed for the highilght effect.

<pre class="script">jquery.ui()</pre>
<script type="text/javascript">
function animate($this) { $this.effect('highlight', {}, 'fast'); }
</script>
<div style="margin-left: 15px;">
    <input type="text" id="bt"  />
</div>
<div>
    <div ctor="when(#bt.click) animate($this);">click</div>
    <div ctor="when(#bt.dblclick) animate($this);">dblclick</div>
    <div ctor="when(#bt.change) animate($this);">change</div>
</div>
<div>
    <div ctor="when(#bt.mouseover) animate($this);">mouseover</div>
    <div ctor="when(#bt.mouseout) animate($this);">mouseout</div>
    <div ctor="when(#bt.mousedown) animate($this);">mousedown</div>
</div>
<div>
    <div ctor="when(#bt.focus) animate($this);">focus</div>
    <div ctor="when(#bt.blur) animate($this);">blur</div>
    <div ctor="when(#bt.keypress) animate($this);">keypress</div>
</div>

Usage

Examples

The following example shows how events and event constraints can be combined in the when condition to trigger an action only if specific conditions are met.  The first input box will hide the text only if it has the focus and the escape key is pressed.  The second input box will only echo letters that are typed in, not digits.

Code

Here's the code for the example above:

<!-- EXAMPLE 1 -->
<div>
    <input type="text" id="box1" value="focus and press esc"  />
    <span style="padding: 10px; margin-left: 10px;" 
        ctor="when(#box1.keyup && $event.which==27) $this.hide('fast');"
        >I'm visible</span>
</div>

<!-- EXAMPLE 2 -->
<div>
    <input type="text" id="box2" 
        ctor="when(
            $this.keypress &amp;&amp; (
                $event.which == 32 || 
                ($event.which &gt;= 65 &amp;&amp; $event.which &lt;= 90) || 
                ($event.which &gt;= 97 &amp;&amp; $event.which &lt;= 122)
            )
        ) @key($event)"  />
    <div ctor="when(@key) $this.append(Deki.$('&lt;span /&gt;')).children(':last').append(document.createTextNode(String.fromCharCode(@key.which)))">Add text - </div>
    <div ctor="when(#box.keydown) $this.text('KEYDOWN Key Code: ' + $event.keyCode + ' Char Code: ' + $event.charCode + ' which: ' + $event.which)"  />
    <div ctor="when(#box.keypress) $this.text('KEYPRESS Key Code: ' + $event.keyCode + ' Char Code: ' + $event.charCode + ' which: ' + $event.which)"  />
</div>

Examples

The following example shows how an action can be triggered by different events.  Click on the button or the area itself to extend the area.

Code

Here's the code for the example above:

<div>
    <input type="button" value="click me" id="b1"  />
    <input type="button" value="reset" id="b2"  />
    <div style="width: 200px; text-align: center; background-color: rgb(200, 200, 200);" 
        ctor="when($this.click || #b1.click) $this.width(500); 
            when(#b2.click) $this.width(200);"
    >click me</div>
</div>

Usage

Usage

Usage

Usage