1 Reply Latest reply on Nov 25, 2016 5:09 AM by Rodolpho Nascimento

    Problem in dynamically added Datagrid in Flex Project

    lokeshg17814194 Level 1

      Hi Everyone,

       

      I'm new to flex Builder. I trying to do a small project with Flex Builder in Asp.Net. I'm facing a small problem as described below.

       

      I wanted to generate dynamic multiple Datagrids inside a panel using ModelLocator class. My code is working good if i run the click the button twice, please guide me to fix the problem.

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application

        xmlns:mx="http://www.adobe.com/2006/mxml"

        xmlns:business="com.flexWebMsSqlExplorer.webMsSql.business.*"

          xmlns:control="com.flexWebMsSqlExplorer.webMsSql.control.*"

          xmlns:components="com.flexWebMsSqlExplorer.webMsSql.components.*"

          layout="absolute"

          creationComplete="init();"

          keyUp="handleShortCuts(event);">

       

        <mx:Script>

        <![CDATA[

        import mx.controls.DataGrid;

        import mx.controls.Alert;

        import com.flexWebMsSqlExplorer.webMsSql.view.AboutWindow;

        import com.flexWebMsSqlExplorer.webMsSql.events.InitEvent;

        import com.flexWebMsSqlExplorer.webMsSql.view.LoginWindow;

        import com.flexWebMsSqlExplorer.webMsSql.view.OpenTableWindow;

        import mx.rpc.soap.mxml.WebService;

        import mx.managers.PopUpManager;

        import com.flexWebMsSqlExplorer.webMsSql.events.MetaDataEvent;

        import com.flexWebMsSqlExplorer.webMsSql.events.ExecuteSQLEvent;

        import com.flexWebMsSqlExplorer.webMsSql.model.ModelLocator;

        import com.flexWebMsSqlExplorer.webMsSql.vo.ConnectionVO;

        import com.adobe.cairngorm.business.ServiceLocator;

        import com.adobe.cairngorm.control.CairngormEventDispatcher;

        import com.flexWebMsSqlExplorer.webMsSql.components.DebugWindow;

        import com.flexWebMsSqlExplorer.webMsSql.components.QueryWindow;

        public var debug_win:DebugWindow;

        private var exectimer:Timer;

       

        [Bindable]

                  private var model:ModelLocator = ModelLocator.getInstance();

       

       

        public function init():void{

       

        //Popup Debug

        //debug_win = PopUpManager.createPopUp(this, DebugWindow, false) as DebugWindow;

        //DebugWindow.log("main.mxml:init()");

       

        //Register Some Things with the model

        model.aryQueryWindows.push(QueryWindow1);

        model.showplanwindow = showplanwin;

      // model.querydatagrid = querydatagrid;

      // model.querydatagrid1 = querydatagrid1;

       

        //Locate and load the wsdl page

                  var urlpattern:RegExp = /webMsSql.swf/i;

                  var wsdl:String = "";

                  try{

                  // If there is a flash variables from the html page, lets use, otherwise default it to the current directory

                  if(Application.application.parameters.webservice == undefined || Application.application.parameters.webservice == '' ){

                  wsdl = this.url.replace(urlpattern, "flexWebMsSqlExplorer.asmx?WSDL");

                  } else {

                  wsdl = Application.application.parameters.webservice;

                  }

       

       

                  //DebugWindow.log("Using WSDL location - " + wsdl);

                  var s:WebService = ServiceLocator.getInstance().getService("sqlWebService") as WebService;

        s.wsdl = wsdl;

        s.loadWSDL();

                  } catch (e:Error){

                  mx.controls.Alert.show("Error Loading WSDL", "WSDL Error");

                  }

       

        //Popup the login box

        var loginForm:LoginWindow = LoginWindow(PopUpManager.createPopUp(this, LoginWindow, false));

                   loginForm.setStyle("borderAlpha", 0.8);

                  loginForm.showCloseButton = true;

        }

        public function repeator():void{

        for (var icon:int = vboxresults.numChildren-1; icon >= 0; icon--) {

          vboxresults.removeChildAt (icon);

        }

                   for(var xcon:int=0;xcon<model.querydatagrid.length;xcon++)

        {

        vboxresults.addChild(model.querydatagrid[xcon]);

        }

        }

       

        private function openTable(table:String):void{

        var opentablewindow:OpenTableWindow = OpenTableWindow(PopUpManager.createPopUp(this, OpenTableWindow, true));

                   opentablewindow.setStyle("borderAlpha", 0.8);

                  opentablewindow.showCloseButton = true;

                  opentablewindow.setTablename(table);

        }

       

       

                  private function showLogin():void{

                  DebugWindow.log("main.mxml:showLogin()");

                  var loginForm:LoginWindow = LoginWindow(PopUpManager.createPopUp(this, LoginWindow, true));

                   loginForm.setStyle("borderAlpha", 0.8);

                  loginForm.showCloseButton = true;

                  }

                 

                  private function loadMetaData():void{

                  DebugWindow.log("main.xml:loadMetaData() - Connection " + model.connectionVO.getConnectionString());

                  var metaevent:MetaDataEvent = new MetaDataEvent();

                  CairngormEventDispatcher.getInstance().dispatchEvent(metaevent);

                  }

                 

                  private function addTab():void{

                  DebugWindow.log("main.mxml:addTab()");

                  var qw:QueryWindow = new QueryWindow();

                  qw.setLabel("Query " + (model.aryQueryWindows.length + 1).toString());

                  model.aryQueryWindows.push(qw);

                  tabnavigator.addChild(qw);

                  tabnavigator.selectedIndex = tabnavigator.numChildren - 1;

                  }

                 

                  private function closeTab():void{

                  DebugWindow.log("main.mxml:closeTab()");

                  if(tabnavigator.numChildren > 1){

                          for(var c:int = tabnavigator.selectedIndex; c < model.aryQueryWindows.length; c++){

                              model.aryQueryWindows[c] = model.aryQueryWindows[c + 1];

                          }

                          model.aryQueryWindows.pop();

                          tabnavigator.removeChildAt(tabnavigator.selectedIndex);

                      }

                  }

                 

                  private function submitQuery():void{

                  DebugWindow.log("main.mxml:submitQuery()");

                  DebugWindow.log("main.mxml:Query text - " + model.aryQueryWindows[tabnavigator.selectedIndex].getQueryText());

                  var sqt:String = "normal";

                  if(spflag.selected)

                       sqt = "spnormal";

                  var sqlevent:ExecuteSQLEvent = new ExecuteSQLEvent(model.aryQueryWindows[tabnavigator.selectedIndex].getQueryText(), sqt);

                  CairngormEventDispatcher.getInstance().dispatchEvent(sqlevent);

                  tabresults.selectedIndex = 0;

                  }

                 

                  private function submitParseQuery():void{

                  DebugWindow.log("main.mxml:submitParseQuery()");

                  DebugWindow.log("main.mxml:Query text - " + model.aryQueryWindows[tabnavigator.selectedIndex].getQueryText());

                  var sqlevent:ExecuteSQLEvent = new ExecuteSQLEvent(model.aryQueryWindows[tabnavigator.selectedIndex].getQueryText(), "parse");

                  CairngormEventDispatcher.getInstance().dispatchEvent(sqlevent);

                  tabresults.selectedIndex = 0;

                  }

                 

                  private function submitShowPlanQuery():void{

                  DebugWindow.log("main.mxml:submitShowPlanQuery()");

                  DebugWindow.log("main.mxml:Query text - " + model.aryQueryWindows[tabnavigator.selectedIndex].getQueryText());

                  var sqlevent:ExecuteSQLEvent = new ExecuteSQLEvent(model.aryQueryWindows[tabnavigator.selectedIndex].getQueryText(), "showplan");

                  CairngormEventDispatcher.getInstance().dispatchEvent(sqlevent);

                  tabresults.selectedIndex = 2;

                  }

                 

                  private function clearQuery():void{

                  model.aryQueryWindows[tabnavigator.selectedIndex].clearQuery();

                  }

                 

                  private function showAboutWindow():void{

                  var aboutWindow:AboutWindow = AboutWindow(PopUpManager.createPopUp(this, AboutWindow, true));

                   aboutWindow.setStyle("borderAlpha", 0.8);

                  aboutWindow.showCloseButton = true;

                  }

                 

                  private function handleShortCuts(e:KeyboardEvent):void{

                      if(e.keyCode == 116)

                          submitQuery();

                      else if (e.keyCode == 117)

                          clearQuery();

                      else if (e.ctrlKey && e.keyCode == 84)

                          addTab();

                      else if (e.ctrlKey && e.keyCode == 82)

                          loadMetaData();

        else if(e.keyCode == 9){

                  var spacer:String = "\t";

                  var cutter:int = 0;

                  var tempquery:TextArea = model.aryQueryWindows[tabnavigator.selectedIndex].querytext;

                  if(tempquery.text.charCodeAt(tempquery.selectionBeginIndex - 1) == 13 || tempquery.selectionBeginIndex == 0)

                  spacer = " \t";

                  if (! e.shiftKey){

                  tempquery.text = tempquery.text.substring(0, tempquery.selectionBeginIndex) + spacer + tempquery.text.substring(tempquery.selectionBeginIndex, tempquery.length);

        tempquery.setSelection(tempquery.selectionBeginIndex + spacer.length, tempquery.selectionBeginIndex + spacer.length);

                  } else {

                  if (tempquery.selectionBeginIndex > 0 && tempquery.text.charCodeAt(tempquery.selectionBeginIndex - 1) == 9){

                    tempquery.text = tempquery.text.substring(0, tempquery.selectionBeginIndex - 1) + tempquery.text.substring(tempquery.selectionBeginIndex, tempquery.length);

        tempquery.setSelection(tempquery.selectionBeginIndex - 1, tempquery.selectionBeginIndex - 1);

                  }

                  }

        tempquery.setFocus();

        model.aryQueryWindows[tabnavigator.selectedIndex].parseQuery(new KeyboardEvent(""));

        }

        else if(e.ctrlKey && e.keyCode == 67){

        copy();

        } else if(e.ctrlKey && e.keyCode == 88){

        cut();

        }

                  }

                 

                  private function copy():void{//67

                   var tempquery:TextArea = model.aryQueryWindows[tabnavigator.selectedIndex].querytext;

                  System.setClipboard(tempquery.text.substring(tempquery.selectionBeginIndex, tempquery.selectionEndIndex));

                  }

                 

                  private function cut():void{ //88

                  var tempquery:TextArea = model.aryQueryWindows[tabnavigator.selectedIndex].querytext;

                  System.setClipboard(tempquery.text.substring(tempquery.selectionBeginIndex, tempquery.selectionEndIndex));

                  tempquery.text = tempquery.text.substring(0, tempquery.selectionBeginIndex) + tempquery.text.substring(tempquery.selectionEndIndex, tempquery.length);

                  model.aryQueryWindows[tabnavigator.selectedIndex].parseQuery(new KeyboardEvent(""));

                  }

                 

        ]]>

        </mx:Script>

       

        <!-- the ServiceLocator where we specify the remote services -->

          <business:Services id="loginServices" />

         

          <!-- the FrontController, containing Commands specific to this appliation -->

          <control:Controller id="controller" />

       

        <mx:Style>

              Application{

                  paddingLeft: 10px;

                  paddingRight: 10px;

                  paddingTop: 10px;

                  paddingBottom: 10px;

                  backgroundGradientColors: #AEC5E7, #5E8ED7;

              }

              HDividedBox{

              paddingLeft: 10px;

                  paddingRight: 10px;

                  paddingTop: 10px;

                  paddingBottom: 10px;

              }

              TextArea {

              fontFamily: Verdana;

              fontSize: 12pt;

              }

          </mx:Style>

       

        <mx:HDividedBox width="100%" height="100%" horizontalGap="5" liveDragging="true">

       

       

        <mx:VBox height="100%" width="30%" >

        <mx:HBox width="100%">

        <mx:Button click="loadMetaData();" icon="@Embed(source='icons/cog.png')" toolTip="(CTRL-R) Refresh Object Browser" label="Refresh"/>

        <mx:Button click="showLogin();" label="Reconnect" icon="@Embed(source='icons/connect.png')"/>

        </mx:HBox>

        <components:ObjectBrowser tabnav="{tabnavigator}" dataProvider="{model.metadata}"/>

        </mx:VBox>

         

          <mx:VDividedBox width="100%" height="100%" verticalGap="5" liveDragging="true">

        

        <mx:Box width="100%" height="50%">

        <mx:HBox width="100%">

        <mx:Button click="submitParseQuery();" icon="@Embed(source='icons/parse.png')" label="Parse Query" toolTip="Parse Query"/>

            <mx:Button click="submitQuery();" toolTip="(F5) Submit Query" label="Submit Query" icon="@Embed(source='icons/exec.gif')" id="btnQuery" width="108"/>

            <mx:Button click="clearQuery();" icon="@Embed(source='icons/clear.png')" toolTip="(F6) Clear Query" label="Clear Query"/>

            <mx:Button click="submitShowPlanQuery();" icon="@Embed(source='icons/exec_plan.png')" label="Show Execution Plan" toolTip="Show Execution Plan"/>

            <mx:CheckBox label="Include Execution Plan" id="spflag"/>

            <mx:Spacer width="100%"/>

            <mx:Button click="showAboutWindow();" icon="@Embed(source='icons/information.png')" label="About" toolTip="About"/>

        </mx:HBox>

        <mx:HBox width="100%">

        <mx:Button click="addTab();" icon="@Embed(source='icons/add_tab.png')" toolTip="(CTRL-T) Add Tab" id="addtab" label="Add Tab" width="79"/>

        <!--

        This might come out in a future release. The functionality is there, just no paste ability yet.

        <mx:Button icon="@Embed(source='icons/cut.png')" toolTip="(CTRL-X) Cut" label="Cut" click="cut();"/>

        <mx:Button icon="@Embed(source='icons/copy.png')" toolTip="(CTRL-C) Copy" label="Copy" click="copy();"/>

        -->

        <mx:Spacer width="100%"/>

          <mx:Button click="closeTab();" icon="@Embed(source='icons/close_tab.png')" label="Close Tab" id="closetab"/>

        </mx:HBox>

           <mx:TabNavigator id="tabnavigator" width="100%" height="100%" alpha=".8">

               <components:QueryWindow id="QueryWindow1" label="Query 1"/>

           </mx:TabNavigator>

           </mx:Box>

       

       

            <mx:Box width="100%" height="50%">

            <mx:TabNavigator id="tabresults" width="100%" height="90%" alpha=".8">

               <mx:Canvas  width="100%" height="100%" label="Result" icon="@Embed(source='icons/result.png')">

         <mx:HBox verticalAlign="middle" horizontalGap="15" width="100%">

          <mx:VBox id="vboxresults" horizontalAlign="left" verticalGap="15" width="100%">

                         Here I'm adding Dynamic Grids using the modal locator class and repeator() action script funtion

                   </mx:VBox>

                 </mx:HBox>

               </mx:Canvas>

               <mx:Canvas id="messages" label="Messages" icon="@Embed(source='icons/messages.png')">

                   <mx:TextArea text="{model.querymessages}" width="100%" height="100%" wordWrap="false" horizontalScrollPolicy="auto" editable="false"/>

               </mx:Canvas>

               <components:ExecutionPlanWindow width="100%" height="100%" id="showplanwin" label="Execution Plan" icon="@Embed(source='icons/exec_plan.png')"/>

               <mx:Canvas id="history" label="History" icon="@Embed(source='icons/history.png')">

                   <mx:TextArea htmlText="{model.queryHistoryVO.history}" width="100%" height="100%" wordWrap="false" horizontalScrollPolicy="auto" editable="false" id="txtHistory"/>

               </mx:Canvas>

           </mx:TabNavigator>

            <mx:HBox width="100%">

            <mx:Label fontWeight="bold" text="Elapsed Execution Time: {model.exectimer.time} sec(s)"/>

            <mx:Spacer width="100%"/>

            <mx:Label fontWeight="bold" text="{model.connectionText}"/>

            </mx:HBox>

           </mx:Box>

        </mx:VDividedBox>

          </mx:HDividedBox>

      </mx:Application>