Mengwin

Please note that this is an early phase of mengwin. If you are revisiting, please reload/empty caches to get the latest version.

This is an attempt to try to implement a [super light] version of wxWidgets in Javascript. Perhaps this will be completely rewritten, I don't know. I think it's better to do a test-attempt and learning by it rather than spending infinite amount of time theorizing over details. So, this is my first testshot. Apart from having a structured and nice api (wxWidgets) I hope that one of the gui-builders (f.ex wxGlade ) could be tamed to output mengwin code.

I made it compatible with Yahoo's yui and I'm subscribed to the maillist. Since I have Hybris, MengWin is in the YAHOO.framework namespace, as I didn't think it would fit elsewhere. That might be changed if enough people are angry.
I will most likely take it out of that namespace and put it in namespace MENGWIN instead.

The box above is created dynamically with MengWin. It could just as easily be a floating window. Thus the same coding style can be used through out the application.

MengWin can also be used for tooltips. This is supposed to be flexible enough to compete with f.ex overlib and others like that.

jsdocs documentation

Code example

function mwTest (args, in_style)
{
    YAHOO.framework.wxFrame.call(this, args, in_style);
    
    this.Vtextarea = new YAHOO.framework.wxTextCtrl(this);
    this.Vtextarea.aTrigger['keyup'] = "cb_function";
    
    this.Vokbutton = new YAHOO.framework.wxButton (this, "ok");
    this.Vokbutton.aTrigger['click'] = "cb_function";

    this.Votherbutton = new YAHOO.framework.wxButton (this, "other button");

    this.Vbuttonbox = new YAHOO.framework.wxBoxSizer(this, mengWinCtrl.awxEnum["wxHORIZONTAL"]);
    this.Vbuttonbox.Add (this.Vokbutton);
    this.Vbuttonbox.Add (this.Votherbutton);
    
    this.Vrootbox = new YAHOO.framework.wxBoxSizer(this, mengWinCtrl.awxEnum["wxVERTICAL"]);
    this.Vrootbox.Add (this.Vtextarea);
    this.Vrootbox.Add (this.Vbuttonbox, 0, mengWinCtrl.awxEnum["wxALIGN_RIGHT"]);
    
    this.oRootObject = this.Vrootbox;
    //alert(this.Vrootbox.draw());
}
mwTest.prototype = new YAHOO.framework.wxFrame();

mwTest.prototype.cb_function = function(event, in_mwwindow)
{
    alert("textarea content: " + this.Vtextarea.GetValue());
}

...and to use it....

    var obj = null;
    var apa = new Array();
    apa["title"] = "code example";
    apa["shadowxoffs"] = 50;
    apa["shadowyoffs"] = 50;
    obj = new mwTest(apa);
    obj.Show(true);

TODO

Ehm.. quite a lot... The goal for everything is to be as close to wxWidgets as possible. This is a list of more or less the priority order I have right now...

• Sizers (wxBoxSizer, wxGridSizer and wxStaticBoxSizer). These are used for layout.
• wxTextCtrl (uses <textarea /> and <input type="text" />)
• wxButton (extend with possibility of using graphic image as button).
• wxStaticText
• wxCheckBox
• wxRadioBox

In parallell with...

• Restructuring wxFrame and CMengWinCtrl a bit.
• Browser quirks, I got some odd differences between mainly IE and the others.

We'll just need about 10 widgets and three sizers for wxGlade to make sense. There is a truck-load of classes in wxWidget, but only quite a small subset is used in everyday programming.

References