Back to demo list.

Previous demo

Next demo

Demo 4. JQuery

This page demonstrates the use of jQuery with TBC.

One nice feature of jQuery is that it allows multiple listeners to be enabled for the same event on the same element at the same time. This is not true --yet anyway-- for TBCHTML. To determine which guard fires, we use the filter operator "&" to filter events.

The TBC code is as follows.

        var body = new JQuery("body") ;
        var p =
            loop  (
                await(
                    upKey(body) >= preventDefault > exec( bigger )
                ,
                    downKey(body) >= preventDefault > exec( smaller )
                )
            ) ;
        

preventDefault is provided by TBC and prevents the key events from causing the page to scroll.

To try it out, click anywhere on this page and press the up down arrow keys.

Wasn't that fun?

The upKey and downKey functions use the TBC's jqEvent function to build guards as follow. Note that both guards put handlers for the same event on the same element. Also note the use of the "&" operator to filter events.

            static function upKey( els : JQuery ) : Guard<Event> {
                return jqEvent( els, "keydown" ) & whichIs(38) ;
            }

            static function downKey( els : JQuery ) : Guard<Event> {
                return jqEvent( els, "keydown" ) & whichIs(40) ;
            }
        

The whichIs function returns a function that maps events to Booleans.

            static function whichIs( k : Int ) {
                return function( ev : Event ) : Bool {
                            var kev : Dynamic = cast ev ;
                            return kev.which == k ; } }
        

The haxe code is here.