6 Replies Latest reply on Sep 16, 2009 12:07 PM by karnatis

    Simple question for page load(similar to onLoad in javascript) in flex.

    karnatis

      Hi All,

       

         I'm having mx:ToggleButtonBar and mx:ViewStack for displaying menu components.

       

         I'm having different tabs in ToggleButtonBar like Home,Search,New,Help.

       

         Now my problem is say in 'Search' tab if select some search criteria and it will displays a grid depending open search inputs. When I press 'Home' tab it is displaying home contents. When I come back to 'Search' tab it is showing earlier search inputs. I'd like to reset these inputs when we load this page. I tried using createComplete and it is not working.

       

         I have init() method where I'm resetting search input fields, but my problem is how to invoke this method while loading 'Search' tab, similar to onLoad() in javascript.

       

        Thanks in advance.

       

      Regards,

      Sharath.

        • 1. Re: Simple question for page load(similar to onLoad in javascript) in flex.
          babo_ya Level 3

          Try "show" event...

           

          <mx:VBox show="showSearch();" />

           

           

          private function showSearch():void

          {

               //here reset all controls..

           

          }

           

          hope this helps,

           

          BaBo,

          • 2. Re: Simple question for page load(similar to onLoad in javascript) in flex.
            karnatis Level 1

            I haveTitleWindow and added show but it is not invoking reset() method, Please check this below code

             

            <mx:TitleWindow x="20.5" y="49" width="90%" height="164" show="reset();" layout="absolute" fontWeight="bold" title="Search Report" fontSize="12">
                    <mx:Text x="32" y="10" text="Search By: "/>
                    <mx:Text x="32" y="48" text="Date: "/>
                    <mx:ComboBox x="139" y="7" width="122" id="search_request">
                         <mx:ArrayCollection>
                             <mx:Object label="Report Id" data="inquiry_id"/>
                             <mx:Object label="Last Name" data="last_name"/>
                             <mx:Object label="First Name" data="first_name"/>
                             <mx:Object label="Full Name" data="full_name"/>
                          </mx:ArrayCollection>           
                    </mx:ComboBox>
                    <mx:TextInput x="286" y="8" themeColor="#088DF3" borderColor="#0D0D0D" id="search_input"/>
                    <mx:DateField x="139" y="46" id="date_of_call"/>
                    <mx:Button x="236" y="92" label="Submit" id="submit_search" click="search(event)"/>
                </mx:TitleWindow>

             

             

            Thanks,

            Sharath.

            • 3. Re: Simple question for page load(similar to onLoad in javascript) in flex.
              babo_ya Level 3

              Maybe I misunderstand your question.

               

              Try this example,

               

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

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

                      layout="vertical"

                      verticalAlign="left"

                      backgroundColor="white"

              >

                  <mx:Script>

                      <![CDATA[

               

               

                      private function onShowFirstVBox(event:Event):void

                      {

                      trace("Showing");

                     

                     

                      }

               

               

                      ]]>

                  </mx:Script>

               

                  <mx:Button label="first" click="{vs.selectedIndex=0}" />

               

                  <mx:Button label="second" click="{vs.selectedIndex = 1}" />

               

               

                  <mx:ViewStack width="300" id="vs" height="300">

                 

                  <mx:VBox show="onShowFirstVBox(event);">

                 

                  <mx:Label text="First VBox" />

                 

                 

                  </mx:VBox>

                 

                 

                  <mx:VBox>

                 

                  <mx:Label text="Second VBox" />

                 

                  </mx:VBox>

                 

                 

                  </mx:ViewStack>

               

               

               

               

              </mx:Application>

               

               

              Hope this helps,

               

              BaBo,

              • 4. Re: Simple question for page load(similar to onLoad in javascript) in flex.
                karnatis Level 1

                Hi Babo,

                 

                   My code is in <mx:Canvas> and it is not inside any <mx:Application> so how to invoke a method as default so that it will reset selected variables?

                 

                   In javascript, we can assign method in onLoad() function on <body> so that while loading body it will call onLoad() method similarly how to do this in Flex.

                 

                Thanks,

                Sharath.

                • 5. Re: Simple question for page load(similar to onLoad in javascript) in flex.
                  babo_ya Level 3

                  Not sure what you mean.

                   

                  Can you create sample code or post your code?

                   

                  Babo,

                  • 6. Re: Simple question for page load(similar to onLoad in javascript) in flex.
                    karnatis Level 1

                    Hi All,

                     

                       I'm having below code for displaying application Menu

                     

                      ---------------Menu.mxml (Begin)-------------------------

                     

                      <?xml version="1.0" encoding="utf-8"?>
                    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
                          xmlns:local="*" xmlns:components="components.*">
                            
                        <mx:Script>
                        <![CDATA[
                        import com.broad.model.BroadModel;
                        import com.broad.events.*;
                        import mx.collections.ArrayCollection;
                        import mx.controls.ColorPicker;
                        import mx.controls.Alert;
                        import mx.events.ItemClickEvent;
                       
                         [Bindable]
                         public var submenubar:ArrayCollection= new ArrayCollection();
                         public var selectedmenu:String;
                           
                        
                         public function fillsubmenu(event:ItemClickEvent): void
                         {
                             Alert.show("in fill submenu function");
                             Alert.show("index clicked value :", event.index.toString());
                             Alert.show(event.label);
                             selectedmenu = event.label;
                            if(event.index == 0)
                            {
                                submenubar.removeAll();
                                submenubar= Homesubmenu;
                                this.dispatchEvent(new HomeEvent());
                                myViewStack.visible=false;
                                homeViewStack.visible=true;
                                searchViewStack.visible=false;
                            }
                            else if(event.index == 1)
                            {
                                submenubar.removeAll();
                                homeViewStack.visible=false;
                                //searchViewStack.visible=true;
                                myViewStack.visible=true;
                                searchViewStack.visible=false;
                                //this.dispatchEvent(new SearchEvent("home"));
                                //var search:Search = new Search();
                                 //addChild(search);
                                 //search.reset();
                                //Alert.show("in search reset method2");
                                 //BroadModel.getInstance().appSearch.reset();
                               
                            }
                            else if(event.index == 2)
                            {
                                submenubar.removeAll();
                                //submenubar=Searchsubmenu;           
                                myViewStack.visible=true;
                                homeViewStack.visible=false;
                               
                            }
                            else if(event.index == 3)
                            {
                                submenubar.removeAll();
                                searchViewStack.visible=false;
                                myViewStack.visible=true;
                                homeViewStack.visible=false;
                            }
                           
                         }
                    ]]>

                    </mx:Script>   
                       
                        <mx:Panel  width="100%" height="100%" layout="absolute">
                            <mx:ToggleButtonBar id="mainmenu" width="60%" height="39" itemClick="fillsubmenu(event);" dataProvider="myViewStack" buttonMode="true" autoLayout="true" styleName="mystyle" x="118"/>
                            <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="465" creationPolicy="all" visible="true"  y="67" x="10">

                     

                                <components:Home id="page1" label="HOME" xmlns:local="*"/>
                                <components:Search id="page3" label="SEARCH" initialize="BroadModel.appSearch.reset()" xmlns:local="*"/>
                                <components:NewReport id="page2" label="NEW REPORT" xmlns:local="*"/>           
                                <components:Help id="page4" label="HELP" xmlns:local="*"/>         
                       
                            </mx:ViewStack>        
                           
                        </mx:Panel>

                    </mx:Canvas>

                     

                      ---------------Menu.mxml (End) ---------------------------

                     

                     

                    ----------------Search.mxml(Begin) ------------------------

                     

                         <?xml version="1.0" encoding="utf-8"?>
                    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" >
                    <mx:Script>
                        <![CDATA[
                           
                            import com.broad.beans.User;
                            import com.broad.controller.BroadController;
                            import com.broad.model.BroadModel;
                              import mx.controls.Alert;
                              import com.broad.events.*;
                             
                              public function reset():void{
                                 
                                  Alert.show("Inside search init");
                                 
                                  date_of_call.text= "";
                                  search_input.text="";
                                  dg.visible=false;
                              }
                             
                              /*override protected function commitProperties():void
                            {
                                  Alert.show("Inside search commitProperties");
                                 
                                  date_of_call.text = "";
                                  search_input.text ="";
                                  dg.visible=false;
                            }*/
                         
                            public function search(evt:Event):void{
                           
                            BroadModel.inquiryDO.search_request = search_request.selectedItem.data.toString();
                              BroadModel.inquiryDO.search_input = search_input.text;
                              BroadModel.inquiryDO.date_of_call = date_of_call.text;
                              Alert.show("Inside search mxml");
                              this.dispatchEvent(new SearchEvent("search"));
                              
                            //search_result.visible=true;
                            dg.visible=true;
                            }
                        ]]>
                    </mx:Script>
                        <mx:Label x="18" y="10" text="SEARCH REPORT"  fontSize="18" fontWeight="bold" color="#F07012"/>
                        <mx:TitleWindow x="20.5" y="49" width="90%" height="164" layout="absolute" fontWeight="bold" title="Search Report" fontSize="12">
                            <mx:Text x="32" y="10" text="Search By: "/>
                            <mx:Text x="32" y="48" text="Date: "/>
                            <mx:ComboBox x="139" y="7" width="122" id="search_request">
                                 <mx:ArrayCollection>
                                     <mx:Object label="Report Id" data="inquiry_id"/>
                                     <mx:Object label="Last Name" data="last_name"/>
                                     <mx:Object label="First Name" data="first_name"/>
                                     <mx:Object label="Full Name" data="full_name"/>
                                  </mx:ArrayCollection>           
                            </mx:ComboBox>
                            <mx:TextInput x="286" y="8" themeColor="#088DF3" borderColor="#0D0D0D" id="search_input"/>
                            <mx:DateField x="139" y="46" id="date_of_call"/>
                            <mx:Button x="236" y="92" label="Submit" id="submit_search" click="search(event)" fillColors="#34B05D"/>
                        </mx:TitleWindow>
                        <mx:DataGrid id="dg" dataProvider="{BroadModel.searchDG}" visible="false" width="911" height="274" y="242" x="10">
                            <mx:columns>
                                <mx:DataGridColumn dataField="inquiry_id" headerText="Report Id"/>
                                <mx:DataGridColumn dataField="inquiry_type" headerText="Report Type"/>
                                <mx:DataGridColumn dataField="full_name" headerText="Consumer Name"/>
                                <mx:DataGridColumn dataField="created_date" headerText="Submission Date"/>                     
                            </mx:columns>
                        </mx:DataGrid>
                        <!--<mx:Text x="161" y="398" text="search results" fontSize="20" fontWeight="bold" id="search_result" visible="false"/>-->
                    </mx:Canvas>

                     

                    ----------------Search.mxml(End) ---------------------------

                     

                      In Menu, when user selects 'Search' tab it is displaying Search page. In search page user is selecting 'first name' and giving search string with 'test'  and submitting button it is displaying result depending upon search criteria.

                     

                      Now user selected 'Home' tab, now it is displaying home page. When user selects 'Search' page then it should clear search criteria values(clearing search input 'test'). I added reset() method in Search.mxml but I don't know how to call this method from Menu.mxml file.

                     

                      Can anyone please suggest me how to resolve this, clearing search page parameters when user selects this from Menu page.

                     

                      Thanks in advance.

                     

                    Regards,

                    Sharath.