How to show dialog mutli tasking...

[sam0510]

i've try to show dialog with this :   

   linb.ComFactory.getCom("module_name",function(){
                var ns=this;
                SPA.pane.append(ns.getUIComponents(),true);
           });

it act  when tree bar selected and work , but when i want to show others module the module showed before disapper ,
i want to call module to work multitasking....

[linb]

In the current version, getCom is for singleton instance.
You can youse 'newCom' in this case.

[sam0510]

i've made some change like this :

            linb.ComFactory.getCom(xgetmodule,function(){

                 var ns=this;
              ns.show(SPA.layout6.getPanel('main'));
                    //SPA.layout6.getPanel('main').append(ns.getUIComponents(),true);
          });

and its work for multi tasking.
And now when it was close / destroy and i want to call the module again, i've get error :

D.box is undefined
http://localhost/sigma-2.0.2/runtime/jsLinb/js/linb-all.js
Line 1

Can  U help me with these error ?

[linb]

If you do not want to use 'newCom' function, you can use 'setCom' to clear the com cache:
            linb.ComFactory.getCom(xgetmodule,function(){                  //clear the cache here                  linb.ComFactory.setCom(xgetmodule,null);                 //And...                  var ns=this;                  SPA.layout6.getPanel('main').append(ns.getUIComponents(),true);           });

[sam0510]

thanks...it's work...

now how to make dialog show in top level ( not as modal ) when they're just call ?

[linb]

    dialog.reBoxing().topZindex(true);

[sam0510]

        function () {             SPA=this;             linb.ComFactory.setProfile(CONF.ComFactoryProfile);            var host=this;             linb.ComFactory.getCom('module1',function(){                 var ns=this;                // ns.show();                SPA.divmain.append(ns.getUIComponents(),true).reBoxing().topZindex(true).show();        }            );         }

it still dont work to show as top level......any idea ?

[linb]

        function () {             SPA=this;             linb.ComFactory.setProfile(CONF.ComFactoryProfile);            var host=this;             linb.ComFactory.getCom('module1',function(){                 var ns=this,                      dialog=ns.getUIComponents();                 dialog.show(SPA.divmain);                 _.asyRun(function(){                     dialog.reBoxing().topZindex(true);                 },50);            });         }

And, you append the dialog to a div. Is the div in the top level?

[sam0510]

here is my index.js
Class('App', 'linb.Com',{     Instance:{         base:["linb.UI"],         //requried class for this com         required:["linb.UI.Pane", "linb.UI.Layout", "linb.UI.Panel", "linb.UI.Label", "linb.UI.Button", "linb.UI.Block", "linb.UI.TreeBar", "linb.UI.Div", "linb.UI.Input"],         properties:{},         events:{"onReady":"_onready"},         iniResource:function(com, threadid){         },         iniComponents:function(){             // [[code created by jsLinb UI Builder             var host=this, children=[], append=function(child){children.push(child.get(0))};             append((new linb.UI.Pane)                 .host(host,"pane8")                 .setDock("top")                 .setHeight("50")                 .setCustomStyle({"KEY":"background:#EBEADB;border:solid 1px #888"})             );             host.pane8.append((new linb.UI.Label)                 .host(host,"label11")                 .setDock("left")                 .setWidth("210")                 .setCaption("X-System")                 .setHAlign("left")                 .setVAlign("middle")                 .setFontSize("24px")             );             host.pane8.append((new linb.UI.Button)                 .host(host,"button13")                 .setTop(10)                 .setHeight("30")                 .setRight("10")                 .setShadow(true)                 .setCaption("Log Off")                 .onClick("_button13_onclick")             );             append((new linb.UI.Layout)                 .host(host,"layout6")                 .setItems([{"id":"before", "pos":"before", "min":10, "size":261, "locked":false, "hide":false, "cmd":true, "caption":"before"}, {"id":"main", "min":10, "caption":"main"}, {"id":"after", "pos":"after", "min":10, "size":20, "locked":false, "hide":true, "cmd":false, "caption":"after"}])                 .setType("horizontal")             );             host.layout6.append((new linb.UI.Block)                 .host(host,"block2")                 .setDock("fill")             , 'before');             host.block2.append((new linb.UI.Panel)                 .host(host,"panel8")                 .setZIndex(1)                 .setCaption("")             );             host.panel8.append((new linb.UI.TreeBar)                 .host(host,"treebar8")                 .setItems([{"id":"1", "sub":true, "caption":"Main Menu"}])                 .setAnimCollapse(true)                 .onGetContent("_treebar8_ongetcontent")                 .onItemSelected("_treebar8_onitemselected")             );             host.layout6.append((new linb.UI.Div)                 .host(host,"divmain")                 .setLeft(110)                 .setTop(20)                 .setZIndex("1000")                 .setPosition("relative")                 .setVisibility("visible")             , 'main');             host.layout6.append((new linb.UI.Block)                 .host(host,"blockmain")                 .setLeft(50)                 .setTop(150)             , 'main');             append((new linb.UI.Pane)                 .host(host,"pane15")                 .setDock("bottom")                 .setHeight("28")                 .setCustomStyle({"KEY":"background:#EBEADB;border:solid 1px #888"})             );             host.pane15.append((new linb.UI.Input)                 .host(host,"input26")                 .setDisabled(true)                 .setLeft("83")                 .setTop(4)                 .setWidth("174")                 .setResizer(true)                 .setCustomStyle({"KEY":"font-weight: bold;color:#0080C0"})             );             host.pane15.append((new linb.UI.Label)                 .host(host,"label34")                 .setLeft("9")                 .setTop(5)                 .setWidth("70")                 .setResizer(true)                 .setCaption("User Login :")                 .setFontWeight("bold")             );             host.pane15.append((new linb.UI.Label)                 .host(host,"label19")                 .setLeft("270")                 .setTop(5)                 .setWidth("30")                 .setCaption("RegID")                 .setHAlign("left")                 .setFontWeight("bold")             );             host.pane15.append((new linb.UI.Input)                 .host(host,"input15")                 .setDisabled(true)                 .setLeft(308)                 .setTop(4)             );             return children;             // ]]code created by jsLinb UI Builder         },         iniExComs:function(com, hreadid){         },         _onready:function () {             SPA=this;             linb.ComFactory.setProfile(CONF.ComFactoryProfile);                                    _.asyRun(function(){                         SPA.blockmain.reBoxing().topZindex(true);                         },50);            var host=this;             linb.ComFactory.getCom('module1',function(){                 var ns=this;                 //ns.show();                dialog=SPA.divmain.append(ns.getUIComponents());                //dialog.show(SPA.divmain,true);                //dialog.show(SPA.layout6.getPanel('main'),true);                //                //SPA.divmain.append(ns.getUIComponents(),true).reBoxing().topZindex(true).show();                 _.asyRun(function(){                         dialog.reBoxing().topZindex(true);                         },50);        }            );         },         _button13_onclick:function (profile, e, src, value) { linb.UI.Dialog.confirm('Confirm','Are You sure to Log Off ?!',function(){            var host=this; linb.ComFactory.destroyAll(); linb.ComFactory.setProfile(CONF.ComFactoryProfile);             linb.ComFactory.getCom('module1',function(){                 var ns=this;                 ns.show();                 //SPA.divmain.append(ns.getUIComponents(),true).reBoxing().topZindex(true).show();                 //SPA.divmain.append(ns.getUIComponents(),true).show(); }); //SPA.treebar8.setItems([{"id":"1", "sub":true, "caption":"Main Menu"}]); })         },         _button6_onclick:function (profile, e, src, value) {         }, _treebar8_ongetcontent:function (profile, item, callback, threadid) {             var pid=item.id ;             //alert(pid);         SPA.request('DBProcess',{action:'loadmenu',gcpid:pid},function(obj)         { _.arr.each(obj.data,function(o,i){                     if (obj.data[i].sub==0) {obj.data[i].sub=false;} else {obj.data[i].sub=true;}                     }                 )                 callback(obj.data);        }         ); // end function },         _treebar8_onitemselected:function (profile, item, src) {             //linb.ComFactory.destroyAll();             var xgetmodule=item.cmodule;             var xcaption=item.caption;             linb.ComFactory.getCom(xgetmodule,function(){                  linb.ComFactory.setCom(xgetmodule,null);                   var rnd = 300 + Math.random()*200;                   var ns=this;               ns.show(SPA.layout6.getPanel('main'));                    //SPA.layout6.getPanel('main').append(ns.getUIComponents(),true);           });             //linb.ComFactory.getCom(xgetmodule ,function(){               //  var ns=this;                 //this.show(SPA.divmain,true);                 //this.show(SPA.pane.getroot(),true);                 //this.show(SPA.divmain.regroot(),true);             //});         },         _button16_onclick:function (profile, e, value) {             var rnd = 100 + Math.random()*200,             parent=this.layout6.getPanel('main');             new linb.UI.Dialog({caption:'dialog demo', width:rnd, height:rnd, left:rnd, top:rnd ,fromRegion:profile.root.cssRegion(true)})             .show()         },                 popMsg:function(caption,msg){             linb.UI.Dialog.pop(caption,msg);         },       request:function(url,hash, callback, onStart, onEnd, file){             _.tryF(onStart);             linb.Thread.observableRun(function(threadid){                 var data={key:url,para:hash}, options;                 if(file){                     data.file=file;                     options={method:'post'};                 }                 linb.request('request.php', data, function(rsp){                     var obj;                     if(typeof rsp=='string')                         obj=_.unserialize(rsp);                     else obj=rsp;                     if(obj){                         if(!obj.error)                             _.tryF(callback,[obj]);                         else                             SPA.popMsg(_.serialize(obj.error));                     }else                         SPA.popMsg(_.serialize(rsp));                     _.tryF(onEnd);                 },function(rsp){                     SPA.popMsg(_.serialize(rsp));                     _.tryF(onEnd);                 }, threadid,options)             });         }, $xregid:null     } });
still dont get with what i want to...
the scenario is when index.js on ready , it will call module1 / another class ( i use dialog as container ) and
the class callled shown as top level ( activate ).

[linb]

If you can upload a runable package(zip),  I'll help you to debug it.

[sam0510]

here's my projects...thanks before

[linb]

Copy the below code to replace your index.js:
Class('App', 'linb.Com',{     Instance:{         events:{"onReady":"_onready"},         iniComponents:function(){             // [[code created by jsLinb UI Builder             var host=this, children=[], append=function(child){children.push(child.get(0))};             append((new linb.UI.Pane)                 .host(host,"pane13")                 .setDock("top")                 .setHeight("40")                 .setCustomStyle({"KEY":"background:#EBEADB;border:solid 1px #888"})             );             host.pane13.append((new linb.UI.Button)                 .host(host,"button11")                 .setTop(5)                 .setHeight(30)                 .setRight("10")                 .setShadow(true)                 .setCaption("Log Off")             );             append((new linb.UI.Pane)                 .host(host,"pane15")                 .setDock("bottom")                 .setHeight(30)                 .setCustomStyle({"KEY":"background:#EBEADB;border:solid 1px #888"})             );             append((new linb.UI.Layout)                 .host(host,"layout10")                 .setItems([{"id":"before", "pos":"before", "min":10, "size":233, "locked":false, "hide":false, "cmd":true, "caption":"before"}, {"id":"main", "min":10, "caption":"main"}, {"id":"after", "pos":"after", "min":10, "size":20, "locked":false, "hide":true, "cmd":false, "caption":"after"}])                 .setType("horizontal")             );             host.layout10.append((new linb.UI.TreeBar)                 .host(host,"treebar12")                 .setItems([{"id":"item a", "sub":true, "caption":"Main Menu"}])             , 'before');             host.layout10.append((new linb.UI.Div)                 .host(host,"divmain")                 .setLeft(50)                 .setTop(90)             , 'main');             return children;             // ]]code created by jsLinb UI Builder         },         _onready:function () {             SPA=this;             linb.ComFactory.setProfile(CONF.ComFactoryProfile);             linb.ComFactory.getCom('module1',function(){                var ns=this;                ns.render(true);                ns.frm_login.show(SPA.divmain,true);            });         }     } });

I still don't know why you show the login dialog into a Div.

Usually, It'll be:
    //It'll cover the whole html body     ns.frm_login.show(null,true);

[sam0510]

its' work...this is what i want...

about show in div / block ,i just think to make cover area for dialog when it's show , drag and or maximaze...

Next...
1. how to set animation with "fromregion:profile.root.css(true)" like in the sample when frm_login show/destroy

2. how to know alias name from module that has spesified .... for example frm_login in module1 in project.

thanks

[linb]

           linb.ComFactory.getCom('module1',function(){                var ns=this;                ns.render(true);                ns.frm_login.setFromRegion({left:0,top:0,width:0,height:0});                ns.frm_login.show(SPA.divmain,true);           });

And,  "frm_login" is the definition of your own.

[sam0510]

is is posible to change "frm_login" above with return variable that i've get from ns.getcomponents().get(0).alias ?

ns.frm_login.show(SPA.divmain,true);