New to Visual builder. need help

[vinu.felix]

Hi,

I'm trying to build a simple interface to learn using the linb framework.
The app I'm making is a home screen where there are a 3-4 buttons.
Clicking on the last ("About the app") should open up a small dialog.

This is the complete code:

The dialog should be hidden until the About button is clicked. But the reverse happens.

Any idea whats wrong or could anyone guide me how to go about this ?



// The default code is a com class (inherited from linb.Com)
Class('App', 'linb.Com',{
    // Ensure that all the value of "key/value pair" does not refer to external variables
    Instance:{
        // To initialize instance(e.g. properties)
        initialize : function(){
            // To determine whether or not the com will be destroyed, when the first UI control be destroyed
            this.autoDestroy = true;
            // To initialize properties
            this.properties = {};
        },
        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
           
            append(
                (new linb.UI.Block)
                .setHost(host,"blkHome")
                .setLeft(0)
                .setTop(0)
                .setWidth(799)
                .setHeight(600)
                .setBorder(true)
            );
           
            host.blkHome.append(
                (new linb.UI.Button)
                .setHost(host,"btnglogin")
                .setTips("Login with view only mode. No password required")
                .setLeft(220)
                .setTop(230)
                .setWidth(160)
                .setHeight(40)
                .setShadow(true)
                .setCaption("View as Guest")
                .onClick("_btnglogin_onclick")
            );
           
            host.blkHome.append(
                (new linb.UI.Button)
                .setHost(host,"btnelogin")
                .setTips("Login to view and edit claims.Requires authentication")
                .setLeft(220)
                .setTop(290)
                .setWidth(160)
                .setHeight(40)
                .setShadow(true)
                .setCaption("Editor Login")
            );
           
            host.blkHome.append(
                (new linb.UI.Button)
                .setHost(host,"btnrstpass")
                .setTips("reset your editor password ")
                .setLeft(220)
                .setTop(350)
                .setWidth(160)
                .setHeight(40)
                .setShadow(true)
                .setCaption("Reset Editor Password")
            );
           
            host.blkHome.append(
                (new linb.UI.Button)
                .setHost(host,"btnAbout")
                .setTips("show details about this program")
                .setLeft(220)
                .setTop(410)
                .setWidth(160)
                .setHeight(40)
                .setShadow(true)
                .setCaption("Know about this App")
                .onClick("_btnabout_onclick")
            );
           
            host.blkHome.append(
                (new linb.UI.Label)
                .setHost(host,"lblwelc")
                .setLeft(40)
                .setTop(100)
                .setWidth(380)
                .setHeight(30)
                .setCaption("What do you want to do today ?")
                .setHAlign("left")
                .setFontSize("20px")
                .setFontWeight("bold")
            );
           
            host.blkHome.append(
                (new linb.UI.Dialog)
                .setHost(host,"dlgabout")
                .setLeft(144)
                .setTop(93)
                .setHeight(151)
                .setCaption("About GTS Food Claim Utility")
                .setMinBtn(false)
                .setMaxBtn(false)
                .hide()
            );
           
            host.dlgabout.append(
                (new linb.UI.Button)
                .setHost(host,"btnemail")
                .setLeft(80)
                .setTop(70)
                .setCaption("Send Query")
                .onClick("_btnemail_onclick")
            );
           
            host.dlgabout.append(
                (new linb.UI.Label)
                .setHost(host,"lblAbout")
                .setLeft(20)
                .setTop(10)
                .setWidth(260)
                .setHeight(60)
                .setCaption("This utility is for processing the food claims of GTS BLR employees and is for internal use only. Developed by Vinu Felix.")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },
        // Give a chance to load other com
        iniExComs : function(com, threadid){
        },
        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        // This instance's events
        events : {},
         _btnglogin_onclick : function (profile,e,src,value){
            var ns = this, uictrl = profile.boxing();
        },
        _btnemail_onclick : function (profile,e,src,value){
            var ns = this, uictrl = profile.boxing();
        },
        _btnabout_onclick : function (profile,e,src,value){
            var ns = this, uictrl = profile.boxing();
            ns.dlgabout.activate(true);
            ns.dlgabout.show();
                   
        }
    }
});

[linb]

// The default code is a com class (inherited from linb.Com)
Class('App', 'linb.Com',{
    // Ensure that all the value of "key/value pair" does not refer to external variables
    Instance:{
        // To initialize instance(e.g. properties)
        initialize : function(){
            // To determine whether or not the com will be destroyed, when the first UI control be destroyed
            this.autoDestroy = true;
            // To initialize properties
            this.properties = {};
        },
        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
           
            append(
                (new linb.UI.Block)
                .setHost(host,"blkHome")
                .setLeft(0)
                .setTop(0)
                .setWidth(799)
                .setHeight(600)
                .setBorder(true)
            );
           
            host.blkHome.append(
                (new linb.UI.Button)
                .setHost(host,"btnglogin")
                .setTips("Login with view only mode. No password required")
                .setLeft(220)
                .setTop(230)
                .setWidth(160)
                .setHeight(40)
                .setShadow(true)
                .setCaption("View as Guest")
                .onClick("_btnglogin_onclick")
            );
           
            host.blkHome.append(
                (new linb.UI.Button)
                .setHost(host,"btnelogin")
                .setTips("Login to view and edit claims.Requires authentication")
                .setLeft(220)
                .setTop(290)
                .setWidth(160)
                .setHeight(40)
                .setShadow(true)
                .setCaption("Editor Login")
            );
           
            host.blkHome.append(
                (new linb.UI.Button)
                .setHost(host,"btnrstpass")
                .setTips("reset your editor password ")
                .setLeft(220)
                .setTop(350)
                .setWidth(160)
                .setHeight(40)
                .setShadow(true)
                .setCaption("Reset Editor Password")
            );
           
            host.blkHome.append(
                (new linb.UI.Button)
                .setHost(host,"btnAbout")
                .setTips("show details about this program")
                .setLeft(220)
                .setTop(410)
                .setWidth(160)
                .setHeight(40)
                .setShadow(true)
                .setCaption("Know about this App")
                .onClick("_btnabout_onclick")
            );
           
            host.blkHome.append(
                (new linb.UI.Label)
                .setHost(host,"lblwelc")
                .setLeft(40)
                .setTop(100)
                .setWidth(380)
                .setHeight(30)
                .setCaption("What do you want to do today ?")
                .setHAlign("left")
                .setFontSize("20px")
                .setFontWeight("bold")
            );
           
            host.blkHome.append(
                (new linb.UI.Dialog)
                .setHost(host,"dlgabout")
                .setLeft(144)
                .setTop(93)
                .setHeight(151)
                .setVisibility("hidden")
                .setCaption("About GTS Food Claim Utility")
                .setMinBtn(false)
                .setMaxBtn(false)
                .beforeClose("_dlgabout_beforeclose")
            );
           
            host.dlgabout.append(
                (new linb.UI.Button)
                .setHost(host,"btnemail")
                .setLeft(80)
                .setTop(70)
                .setCaption("Send Query")
                .onClick("_btnemail_onclick")
            );
           
            host.dlgabout.append(
                (new linb.UI.Label)
                .setHost(host,"lblAbout")
                .setLeft(20)
                .setTop(10)
                .setWidth(260)
                .setHeight(60)
                .setCaption("This utility is for processing the food claims of GTS BLR employees and is for internal use only. Developed by Vinu Felix.")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },
        // Give a chance to load other com
        iniExComs : function(com, threadid){
        },
        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        // This instance's events
        events : {},
         _btnglogin_onclick : function (profile,e,src,value){
            var ns = this, uictrl = profile.boxing();
        },
        _btnemail_onclick : function (profile,e,src,value){
            var ns = this, uictrl = profile.boxing();
        },
        _btnabout_onclick : function (profile,e,src,value){
            var ns = this, uictrl = profile.boxing();
            ns.dlgabout.show();
        },
    _dlgabout_beforeclose : function (profile) {
            profile.boxing().hide();
            return false;
        }
    }
});

[vinu.felix]

Thank you very much for the quick response. The linb project is amazingly impressive. I had worked with dhtmlx before but this one is cool. Extremely powerful and complete.

A couple of quick questions:

I referred Cook book but it does'nt give me specific details about sections like

iniExComs : function(com, threadid){
        }

        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        // This instance's events
        events : {},

and what kind of operations is possible in these sections.

Is there some books or links where I can find details of these topics ?

[linb]

Sorry for the lack of documentation
If you are a newbie, you can ignore that.

[vinu.felix]

No problemo dude

Thanks for helping me so fast on the other queries as well.

[nenesasa]

informative!!!