2 Replies Latest reply on Jan 30, 2011 3:45 PM by DrClohite

    Datagrid TabNavigator refresh after new data added

    DrClohite

      My software adds and displays data correctly except that after the Add data page, the page then moves to iMA_ContactsList correctly, then it fails to show the additional data automatically...

       

      I have a Tabnavigator panel that leads to three components - I have cut short to show key code elements below:

       

      The process of events is that iMAmxml - the main program - sets up a TabNavigator within a panel that points to two components. iMA_ContactsList and iMA_Add_Contact to add a new contact you tab with your mouse to iMA_Add_Contact fill in the form and on 'add contact' button you go the list of contacts at iMA_ContactsList - simple. I have then to press an update button for the new contact details to show - it is not intuitive to do that and I fear will put people off, putting some users into a spin, as they don't want to learn, they just want to use.

       

      Here are snippets of the three files:

       

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

      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

      xmlns:s="library://ns.adobe.com/flex/spark"

      xmlns:mx="library://ns.adobe.com/flex/mx"

      xmlns:screens="screens.*"

      title="iMA"

      applicationComplete="init()">

       

      <fx:Script>

      <![CDATA[

      private function handleCreationComplete():void

      {

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

      }

       

      // This is the event handler for selectFirstTab event.

      private function selectFirstTabEventHandler(e:Event):void

      {

           contactsList.selectedIndex = 0;

      }

       

      ]]>

      </fx:Script>

       

      <mx:TabNavigator width="100%" height="100%" id="contactsList" creationComplete="handleCreationComplete()">

      <screens:iMA_ContactsList />

      <screens:iMA_Add_Contact/>

      </mx:TabNavigator>

       

      ...

       

      screens:iMA_Add_Contact has a couple of fields and it adds the data using this button:

      <mx:FormItem>

      <mx:Button label="Add Contact" click="onAddBtnClick(event)"/>

      </mx:FormItem>

       

      protected function onAddBtnClick(event:MouseEvent):void {

      var employee:database = new database();

      employee.firstname = txtFirstName.text;

      addEmployee(employee);

       

      // Here I change panel

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

      }

       

      ...

       

      screens:iMA_ContactsList

       

      <mx:DataGrid id="dg" dataProvider="{employees}" rowHeight="54" width="100%" rowCount="6">

      <mx:columns>

      <mx:DataGridColumn dataField="firstname" headerText="Name" width="120" />

      </mx:columns>

      </mx:DataGrid>

      <s:HGroup width="100%">

      <s:Button left="10" label="update" click="getEmployees()"/>

      </s:HGroup>

       

      // Retrieve employees with a Select all call

      protected function getEmployees():void

      {

      var stmt:SQLStatement = new SQLStatement();

      stmt.itemClass = database;

      stmt.sqlConnection = employeeDB;

      stmt.text = "SELECT * from employees";

      stmt.execute();

      employees = new ArrayCollection(stmt.getResult().data);

      }

       

      protected function initDatabase():void

      {

      var dbFile:File = File.applicationStorageDirectory.resolvePath("employees.db");

      employeeDB = new SQLConnection();

       

      employeeDB.open(dbFile);

       

      var stmt:SQLStatement = new SQLStatement();

      stmt.sqlConnection = employeeDB;

       

      stmt.text = "CREATE TABLE IF NOT EXISTS employees ( id INTEGER PRIMARY KEY " +

      "AUTOINCREMENT, firstname TEXT, lastname TEXT, position TEXT, telephone1 TEXT," +

      " telephone2 TEXT, email TEXT, twitter TEXT, category TEXT, colour TEXT, deleted TEXT  )";

      stmt.execute();

      getEmployees();

      }

       

      I tried :

      activate="initDatabase()" creationComplete="initDatabase()"

       

      no result as when I replace "initDatabase()" with activate="getEmployees()" nothing happens

      creationComplete="getEmployees()" I get a compile error

       

      I have tried this:

      protected function dg_creationCompleteHandler(event:FlexEvent):void

      {

      initDatabase();

      getEmployees();

      }

       

      - at least no error, but same problem, the table is drawn first then the data, so I guess I need to redraw again?

       

      I have tried adding this to the above handler: dg.selectedIndex = 0;

        • 1. Re: Datagrid TabNavigator refresh after new data added
          Gregory Lafrance Level 6

          Not sure, but if you have confirmed the new employee has been added, then let me confirm the sequence of events:

           

          1) User adds new employee.

          2) User is automatically returned to the "view" employees tab.

          3) User needs to manually click a button because new employee does not display yet.

           

          If this is true, can you update the data provider from the database in the change event handler for the TabNavigator?

           

          If that does not work, perhaps you can have a change watcher on the data provider. In the following example code the change watcher calls a function when the length of the array collection changes. You could call the database when something similar is detected, perhaps when the selectedChild property of the TabNavigator changes.

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
            initialize="initWatcher();">
            <mx:Script>
              <![CDATA[
                import mx.controls.Alert;
                import mx.collections.ArrayCollection;
                import mx.binding.utils.*;
                [Bindable] private var ac:ArrayCollection = new ArrayCollection([
                  {name: "Tom", age: 38},
                  {name: "Bob", age: 45}
                ]);
                
                private var myWatcher:ChangeWatcher;
                private function initWatcher():void {
                  ChangeWatcher.watch(ac, "length", watcherListener);
                }
                private function watcherListener(event:Event):void {
                  mx.controls.Alert.show("call database here");
                }
                
                private function addItemToAC():void{
                  ac.addItemAt({name: "Sue", age: "50"}, 0);
                }
              ]]>
            </mx:Script>
            <mx:DataGrid dataProvider="{ac}">
              <mx:columns>
                <mx:DataGridColumn dataField="name"/>
                <mx:DataGridColumn dataField="age"/>
              </mx:columns>
            </mx:DataGrid>
            <mx:Button label="Add Item" click="addItemToAC();"/>
          </mx:Application>
          


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

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

          • 2. Re: Datagrid TabNavigator refresh after new data added
            DrClohite Level 1

            The answer is that you need to add and amend data in the same tab.

             

            when you jump from tab to tab, the screen result does not change unless you are on the tab and hit a button to delete, add or update underlying data then it shows in the same tab. So if you add data in one tab, then redirect to another tab say the list of data, you arrive at the next tab and the data is not updated you have to hit an update button on that screen. However, if all is done in one tab and you change state from say an add/enter data screen, then on update, the data is added tot he database and then you call a data refresh and you change the state to reveal say a datagrid it works perfectly.

             

            So in summary I had to rethink the use of my tabs and each tab displays in effect a different view of the data, but a change in one tab does not immediately update the data shwon in the other tab, as the other tab is in effect a screenshot without it seems the possibility of updating the tab screen until you select the tab, then apply an update to that screen.