6 Replies Latest reply on Jan 1, 2011 10:58 AM by DrClohite

    function: navigation to another TAB in TabNavigator?

    DrClohite

      At a top level I use TabNavigator which calls components - addData and listData

       

      I can add data successfully Air/SQL After adding data through the TabNavigator tab 'Add' that calls addData.mxml I can physically hit a button to complete the addition of data. I clear the data fields. I then have to tab with my mouse to  the TabNavigator tab 'List' that calls listData.mxml and then the dataset only updates as I have   focusIn="getData()".

       

      I would like to simply goto my list once I have added my data. I have a similar issue, that is blocking me: a) user signs in and b) you have permission to use the data.

        • 1. Re: function: navigation to another TAB in TabNavigator?
          Gregory Lafrance Level 6

          In general it is very hard to understand what you are doing and what you want to do. You might want to expand your description or make it more clear.

           

          I think you have a TabNavigator with two views, and after adding data on the first view you would like the TabNavigator to automatically change to the other tab so the user can see the list.

           

          If that is the case, after the data is added, set the TabNavigator selectedChild property programmatically to switch to the list view.

           

          If this post answers your question or helps, please mark it as such. Thanks!

          http://www.chikaradev.com
          Adobe Flex Development and Support Services

          1 person found this helpful
          • 2. Re: function: navigation to another TAB in TabNavigator?
            flex2008 Level 3

            Use selectedIndex property of the tabnavigator to programmatically select a tab.

            For eg:tabNavigator.selectedIndex = 0 will select the first tab.So after adding data use this to select 'List' tab.

            1 person found this helpful
            • 3. Re: function: navigation to another TAB in TabNavigator?
              DrClohite Level 1

              Thanks for your help. Really fast feedback.

               

              This is great confirmation that I was heading in the right direction. Very glad that you are not suggesting I got the wrong tool for the job!

               

              However I am getting this error: access of undefined property TabNavigator

               

              This is the code from the parent:

               

              <mx:TabNavigator width="100%" height="100%" id="contactsList">

                   <screens:iMA_ContactsList />

                   <screens:Add_Colleague/>

              </mx:TabNavigator>

               

              In contactslist the data is not refreshing when I tab back to it (I have to wait for a click on the Datagrid and I  use focusIn="getEmployees()" within the datagrid) this seems like I am missing something. I am running creationComplete="initDatabase()" I guess I want getEmployees() every time the tab is in focus?

               

              This is the add function in component: Add_Colleague.mxml

               

              protected function onAddBtnClick(event:MouseEvent):void

              {

              var employee:database = new database();

              employee.firstname = txtFirstName.text;

              employee.position = txtPosition.text;

              employee.telephone1 = txtTelephone1.text;

              employee.email = txtEmail.text;

              employee.category = txtCategory.text;

              employee.colour = txtColour.text;

              addEmployee(employee);

              txtFirstName.text='';

              txtPosition.text='';

              txtTelephone1.text='';

              txtEmail.text='';

              txtCategory.text='';

              txtColour.text='';

               

              // now I want to change the view and reload the datagrid

              TabNavigator.selectedIndex = 0;

              }

               

              This produces an error. I have tried

              contactsList.selectedIndex = 0;

               

              However I am getting this error: access of undefined property contactsList. So it looks like the same problem... something to do with addressing the parent? container? will keep trying stuff!

              • 4. Re: function: navigation to another TAB in TabNavigator?
                Gregory Lafrance Level 6

                You do need to use contactsList.selectedIndex = 0, but if the contactsList TabNavigator is not in the same scope as where you try to set the index you may have a problem.

                 

                In some cases you need to use the following to access things in the main app:

                 

                mx.core.Application.application.contactsList.selectedIndex = 1;

                 

                or in another component parented by the main app:

                 

                mx.core.Application.application.myOtherComp.contactsList.selectedIndex = 1;

                 

                As far as refreshing the data everytime you go to the first tab, make the data call in the TabNavigator change event handler. You also need to make a data call on creationComplete, so do this:

                 

                // This is the creationComplete event handler.

                private function getDataCall():void{

                    doGetData();

                }

                 

                // This is the change event handler.

                private function getDataCall(evt:IndexChangedEvent):void{

                    if(evt.newIndex == 0){

                        doGetData();

                    }

                }

                 

                private function doGetData():void{

                    // data call code here

                }

                 

                If this post answers your question or helps, please mark it as such. Thanks!

                http://www.chikaradev.com
                Adobe Flex Development and Support Services

                • 5. Re: function: navigation to another TAB in TabNavigator?
                  flex2008 Level 3

                  The reason why it is showing an error is because the tabnavigator that u are trying to access is not accessible in Add_Colleague.mxml.

                   

                  What you can do is dispatch an event with bubbles true from Add_Colleague.mxml and catch it in the main application.in the event handler,set the selectedindex.

                   

                  After adding data,dispatch a custom event with bubbles true:

                   

                  protected function onAddBtnClick(event:MouseEvent):void

                  {

                  var employee:database = new database();

                  employee.firstname = txtFirstName.text;

                  employee.position = txtPosition.text;

                  employee.telephone1 = txtTelephone1.text;

                  employee.email = txtEmail.text;

                  employee.category = txtCategory.text;

                  employee.colour = txtColour.text;

                  addEmployee(employee);

                  txtFirstName.text='';

                  txtPosition.text='';

                  txtTelephone1.text='';

                  txtEmail.text='';

                  txtCategory.text='';

                  txtColour.text='';

                  dispatchEvent(new Event('selectFirstTab',true));

                  }

                   

                  Now in the mxml where you added TabNavigator,add a event listener for this event.You can add this listener in the creationComplete event handler for that mxml.

                  This is the handler for creationComplete event:

                   

                  private creationCompleteHandler(e:Event):void

                  {

                       this.addEventListener('selectFirstTab',selectFirstTabEventHandler,true)

                  }

                   

                  This is the event handler for selectFirstTab event.

                  private function selectFirstTabEventHandler(e:Event):void

                  {

                       contactsList.selectedIndex = 0;

                  }

                   

                  What you have done is,you added the data in the child mxml.Then you are telling the parent with the help of events to switch tabs.

                   

                  Rather than doing this you could have used Application.application.contactsList.selectedIndex = 0 or this.parentDocument.contactsList.selectedIndex = 0 in


                  onAddBtnClick method.But,doing it through events is the perfect way to do this.

                   

                  Refer this if you face any trouble understanding events: http://livedocs.adobe.com/flex/3/html/help.html?content=events_08.html

                  • 6. Re: function: navigation to another TAB in TabNavigator?
                    DrClohite Level 1

                    thanks a ton for your help, it worked. 

                     

                    I went to apply the technique on the ContactList component - to refresh the list, after we had added the data and I got this error:

                    flex Operation is not permitted when the SQLStatement.sqlConnection property is not set.

                     

                    I had added creationComplete="panelCreationComplete()" to <s:panel>

                     

                    when I took the offending code out, everything worked fine again.

                     

                    the function reads:

                    private function panelCreationComplete():void {

                         getList();

                    }

                     

                    although creationComplete="initDatabase()" is included in the <s:NavigatorContent statement up front.

                     

                    Should I apply a test to make sure the database is initiated? How would I do that? Although the initDatabase reads like the database is set, perhaps panels are created on screen before the database is set up?