Question about JS and Form integration (with poker example)

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Question about JS and Form integration (with poker example)

edA-qa mort-ora-y
As a quick test of the JS abilities I made a quick page using some haxe
to calculate simply poker odds:
        http://bigtpoker.com/Tools/OddsHelper

I realized though that a lot of the code I still had to do in JS: all
the form integration code. The actual haxe component seems small in
comparison (all it does it produce pretty odds values).

Does anybody have some good ideas/solutions for how to handle form
interactions with haxe?  I don't want to emit the form, I'd like to do a
static layout, but I'd like if all handlers (onChange,etc.) can be
assigned from the haxe code.  Kind of like a traditional C++ Windows
dialog and the associated class.

--
edA-qa mort-ora-y
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

BigTPoker uses haXe and DHLIB
        http://BigTPoker.com/?source=haxe-list

The dis-Emi-A haXe Library
        http://wiki.disemia.com/HaXe
       
A full set of tools, classes, and support facilities aimed at
simplifying and expediting game creation in Flash 9.

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
Sign: Please digitally sign your emails.
Encrypt: I'm also happy to receive encrypted mail.


--
haXe - an open source web programming language
http://haxe.org

signature.asc (260 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Question about JS and Form integration (with poker example)

Niel Drummond-3
edA-qa mort-ora-y wrote:

> As a quick test of the JS abilities I made a quick page using some haxe
> to calculate simply poker odds:
> http://bigtpoker.com/Tools/OddsHelper
>
> I realized though that a lot of the code I still had to do in JS: all
> the form integration code. The actual haxe component seems small in
> comparison (all it does it produce pretty odds values).
>
> Does anybody have some good ideas/solutions for how to handle form
> interactions with haxe?  I don't want to emit the form, I'd like to do a
> static layout, but I'd like if all handlers (onChange,etc.) can be
> assigned from the haxe code.  Kind of like a traditional C++ Windows
> dialog and the associated class.
>  
Some time ago I adapted a small library that hooked HTML element event
handlers to javascript functions, I guess this post prompted me to put
up a home for it.

http://bitbucket.org/grumpytoad/distill/

Effectively, you can assign DOM nodes to haXe classes, and their Events
will bubble up to an automatically instantiated instance of your haXe
class. In practice it works a little like a subclass of a MovieClip in
flash, because you can manipulate the DOM element in haXe code.

In the HTML you say

<div name="hxType" class="MyClass" style="width:100%;height:100%"></div>
<script language="javascript" src="./myclass.js"></script>

then in your class

@@@
import js.Dom;
import Distill;

class MyClass
{
    var domNode : HtmlDom;
    function mousedown( e )
    {
          domNode.innerHTML = "helloworld";
    }
}
@@@

you do not necessarily need a main method: haxe -js myclass.js MyClass.hx

Let me know if you have any problems...

- Niel

/**
 * Copyright (c) 2009, Niel Drummond
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY NIEL DRUMMOND ''AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL NIEL DRUMMOND OR CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

class Distill
{
        var els : Array<Dynamic>;
        public function new <T> ( obj: Array<T> )
        {
                var evTypes : Array<String> = [ 'onscroll', 'onresize', 'onmouseup', 'onmouseover', 'onmouseout', 'onmousemove', 'onmousedown', 'onkeyup', 'onkeypress', 'onkeydown', 'onfocus', 'ondblclick', 'onclick', 'onblur', 'postcreate' ];

                untyped
                {

                        if ( obj.length )
                        {
                                for(et in evTypes)
                                {
                                        var self = this;
                                        if ( js.Lib.isIE )
                                        {
                                                document.attachEvent( et, function(evt) {
                                                                self.dispatcher(evt,obj,self);
                                                                } );
                                        } else {
                                                document.body[et] = function(evt){
                                                        self.dispatcher(evt,obj,self);
                                                };
                                        }
                                }

                                els = obj;

                                // fire a fake load event
                                for ( o in obj )
                                {

                                        if ( o['load'] )
                                        {
                                                var e = { type:'load', target: o.domNode, manager:this};
                                                o['load']( e );
                                        }
                                }
                        }
                }
        }

        function dispatcher ( ev, handler : Array<Dynamic>, d : Distill )
        {
                untyped
                {
                        //var match = (ev.target || ev.srcElement);
                        for( o in handler )
                                if ( Type.getClassName( Type.getClass( o ) ) == ev.target.className )
                                //if ( o.domNode == match )
                                {
                                        if ( o[ev.type] )
                                        {
                                                ev.manager = d;
                                                o[ev.type](ev);
                                                // o[ev.type](ev,o);
                                        }
                                }

                }

        }

        public function query <T> ( arg : String ) : Array<T>
        {
                untyped
                {
                        var matches : Array<T> = [];
                        for ( o in els )
                        {
                                if ( o.domNode.className == arg )
                                        matches.push( o );
                        }
                        return matches;
                }
        }

        static function __init__ ()
        {
                untyped
                {
                        var cb = function ()
                        {
                                var isIE = js.Lib.isIE;
                                var els : Array<Dynamic> = isIE ? document.getElementsByTagName( '*' ) : document.getElementsByName('hxType');
                                var widgets = [];
                                for ( el in els )
                                {
                                        if ( !isIE || el.name == 'hxType' )
                                        {
                                                var cl = Type.resolveClass( el.className );
                                                if ( cl != null )
                                                {
                                                        var inst = Type.createInstance( cl, [] );
                                                        inst.domNode = el;
                                                        el['obj'] = inst;
                                                        widgets.push( inst );
                                                }
                                        }
                                }

                                new Distill(widgets);
                        }

                        // do not clobber existing onload handler
                        if ( window.onload != null )
                        {
                                var pre = window.onload;
                                window.onload = function (e) { pre(); cb(); }
                        } else {
                                window.onload = cb;
                        }

                }
        }
}



--
haXe - an open source web programming language
http://haxe.org