Merge pull request #118 from NativeScript/feature/tab-view-loaded-fix

Feature/tab view loaded fix

CrossPlatformModules.csproj

@@ -131,6 +131,7 @@
     <TypeScriptCompile Include="apps\tests\pages\page17.ts">
       <DependentUpon>page17.xml</DependentUpon>
     </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\tests\pages\page18.ts" />
     <TypeScriptCompile Include="apps\tests\pages\property-bindings.ts" />
     <TypeScriptCompile Include="apps\tests\platform-tests.ts" />
     <TypeScriptCompile Include="apps\tests\fps-meter-tests.ts" />
@@ -591,6 +592,7 @@
     <Content Include="apps\TelerikNEXT\images\background.jpg" />
     <Content Include="apps\template-settings\app.css" />
     <Content Include="apps\tests\app\location-example.xml" />
+    <Content Include="apps\tests\pages\page18.xml" />
     <Content Include="apps\tests\ui\label\label-tests-wrong.css" />
     <Content Include="apps\tests\pages\files\other.xml" />
     <Content Include="apps\tests\pages\files\test.android.phone.xml" />
@@ -1562,7 +1564,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/tests/pages/page18.ts

@@ -0,0 +1,22 @@
+import frame = require("ui/frame");
+import observable = require("data/observable");
+
+import trace = require("trace");
+trace.setCategories("gestures");
+trace.enable();
+
+export function itemTap(args) {
+    console.log("----- Item tapped: " + args.view.tag);
+
+    frame.topmost().navigate({
+        moduleName: "./pages/page5",
+    });
+}
+
+export function itemLoaded(args: observable.EventData) {
+    console.log("----- Item loaded: " + (<any>args.object).tag);
+}
+
+export function itemUnloaded(args: observable.EventData) {
+    console.log("----- Item unloaded: " + (<any>args.object).tag);
+}

apps/tests/pages/page18.xml

@@ -0,0 +1,21 @@
+<Page loaded="itemLoaded" unloaded="itemUnloaded" tag="page">
+  <TabView  loaded="itemLoaded" unloaded="itemUnloaded" tag="TabView">
+    <TabView.items>
+      <TabViewItem title="RED">
+        <TabViewItem.view>
+          <GridLayout backgroundColor="red" margin="50" tap="itemTap" tag="red"  loaded="itemLoaded" unloaded="itemUnloaded"/>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="GREEN">
+        <TabViewItem.view>
+          <GridLayout backgroundColor="green" margin="50" tap="itemTap" tag="green"  loaded="itemLoaded" unloaded="itemUnloaded"/>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="BLUE">
+        <TabViewItem.view>
+          <GridLayout backgroundColor="blue" margin="50" tap="itemTap" tag="blue"  loaded="itemLoaded" unloaded="itemUnloaded"/>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

apps/tests/pages/page5.ts

@@ -66,7 +66,7 @@ function print() {
     }
     printTNSInfo();
 }
-print();
+//print();
 
 export function createPage() {
     var page = new pages.Page();

apps/tests/ui/page/page-tests.ios.ts

@@ -33,13 +33,13 @@ export function test_NavBar_isVisible_when_MenuItems_areSet() {
     var navBarIsVisible = false;
 
     var handler = function (data) {
-        page.off(view.View.loadedEvent, handler);
+        page.off(PageModule.Page.navigatedToEvent, handler);
         navBarIsVisible = (<any>page.frame.ios).showNavigationBar;
     }
 
     var pageFactory = function (): PageModule.Page {
         page = new PageModule.Page();
-        page.on(view.View.loadedEvent, handler);
+        page.on(PageModule.Page.navigatedToEvent, handler);
 
         var mi = new PageModule.MenuItem();
         mi.text = "B";

apps/tests/ui/tab-view/tab-view-tests.ts

@@ -322,7 +322,7 @@ export var testWhenNavigatingBackToANonCachedPageContainingATabViewWithAListView
     try {
 
         var mainPage: pageModule.Page;
-        var pageFactory = function(): pageModule.Page {
+        var pageFactory = function (): pageModule.Page {
             var tabView = _createTabView();
             var items = [];
             items.push({
@@ -349,13 +349,13 @@ export var testWhenNavigatingBackToANonCachedPageContainingATabViewWithAListView
         helper.navigate(pageFactory);
 
         var tabView = mainPage.getViewById<tabViewModule.TabView>("TabView");
-        
+
         // This will navigate to a details page. The wait is inside the method.
         _clickTheFirstButtonInTheListViewNatively(tabView);
 
         // Go back to the main page containing the TabView.
         helper.goBack();
-        
+
         // Go back to the root tests page.
         helper.goBack();
     }
@@ -371,20 +371,20 @@ export var testWhenNavigatingBackToANonCachedPageContainingATabViewWithAListView
 }
 
 export function testBindingIsRefreshedWhenTabViewItemIsUnselectedAndThenSelectedAgain() {
-	helper.buildUIAndRunTest(_createTabView(), function (views: Array<viewModule.View>) {
+    helper.buildUIAndRunTest(_createTabView(), function (views: Array<viewModule.View>) {
-		var viewModel = new observable.Observable();
+        var viewModel = new observable.Observable();
-		viewModel.set("counter", 0);
+        viewModel.set("counter", 0);
-		frameModule.topmost().currentPage.bindingContext = viewModel;
+        frameModule.topmost().currentPage.bindingContext = viewModel;
 
         var tabView = <tabViewModule.TabView>views[0];
 
-		var items = _createItems(10);
+        var items = _createItems(10);
 
         var StackLayout0 = new stackLayoutModule.StackLayout();
         var label0 = new labelModule.Label();
         label0.text = "Tab 0";
-		label0.id = "testLabel";
+        label0.id = "testLabel";
-		label0.bind({ sourceProperty: "counter", targetProperty: "text", twoWay: true });
+        label0.bind({ sourceProperty: "counter", targetProperty: "text", twoWay: true });
         StackLayout0.addChild(label0);
         var tabEntry0 = {
             title: "Tab 0",
@@ -393,18 +393,76 @@ export function testBindingIsRefreshedWhenTabViewItemIsUnselectedAndThenSelected
         items.push(tabEntry0);
         tabView.items = items;
 
-		tabView.selectedIndex = 10;
+        tabView.selectedIndex = 10;
-		TKUnit.wait(ASYNC);
+        TKUnit.wait(ASYNC);
 
-		tabView.selectedIndex = 0;
+        tabView.selectedIndex = 0;
-		TKUnit.wait(ASYNC);
+        TKUnit.wait(ASYNC);
 
-		tabView.selectedIndex = 10;
+        tabView.selectedIndex = 10;
-		TKUnit.wait(ASYNC);
+        TKUnit.wait(ASYNC);
-		var expectedValue = 5;
+        var expectedValue = 5;
-		viewModel.set("counter", expectedValue);
+        viewModel.set("counter", expectedValue);
-		var testLabel = <labelModule.Label>(tabView.items[10].view.getViewById("testLabel"))
+        var testLabel = <labelModule.Label>(tabView.items[10].view.getViewById("testLabel"))
-		TKUnit.assertEqual(testLabel.text, expectedValue, "binding is not working!");
+        TKUnit.assertEqual(testLabel.text, expectedValue, "binding is not working!");
+    });
+}
+
+export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack() {
+    var i: number;
+    var itemCount = 3;
+    var loadedItems = [0, 0, 0];
+    var unloadedItems = [0, 0, 0];
+
+    var tabView = _createTabView();
+    var items = _createItems(itemCount);
+    tabView.items = items;
+
+    function createLoadedFor(itemIndex: number) {
+        return function () {
+            loadedItems[itemIndex] = loadedItems[itemIndex] + 1;
+        }
+    }
+
+    function createUnloadedFor(itemIndex: number) {
+        return function () {
+            unloadedItems[itemIndex] = unloadedItems[itemIndex] + 1;
+        }
+    }
+
+    helper.buildUIAndRunTest(tabView, function () {
+        try {
+            // Attach to loaded/unloaded events
+            for (i = 0; i < itemCount; i++) {
+                items[i].view.on("loaded", createLoadedFor(i));
+                items[i].view.on("unloaded", createUnloadedFor(i));
+            }
+
+            var detailsPageFactory = function (): pageModule.Page {
+                var detailsPage = new pageModule.Page();
+                detailsPage.content = new labelModule.Label();
+                return detailsPage;
+            };
+
+            helper.navigate(detailsPageFactory);
+        }
+        finally {
+            // Go back to the test page.
+            helper.goBack();
+        }
+        
+        //console.log("loaded items: " + loadedItems.join(", "));
+        //console.log("unloadedItems items: " + unloadedItems.join(", "));
+        
+        // Check that at least the first item is loaded and unloaded
+        TKUnit.assertEqual(loadedItems[0], 1, "loaded count for 1st item");
+        TKUnit.assertEqual(unloadedItems[0], 1, "unloaded count for 1st item");
+
+        // Check that loaded/unloaded coutns are equal for all tabs
+        for (i = 0; i < itemCount; i++) {
+            TKUnit.assert(loadedItems[i] === unloadedItems[i],
+                "Loaded and unloaded calls are not equal for item " + i + " loaded: " + loadedItems[i] + " unloaded: " + unloadedItems[i]);
+        }
     });
 }
 

apps/tests/xml-declaration/xml-declaration-tests.ts

@@ -66,8 +66,7 @@ export var test_parse_ShouldFindEventHandlersInExports = function () {
             loaded = true;
         }
     });
-
+    page._emit("loaded");
-    page.onLoaded();
 
     TKUnit.assert(loaded, "Parse should find event handlers in exports.");
 };

ui/page/page.ios.ts

@@ -28,10 +28,28 @@ class UIViewControllerImpl extends UIViewController {
         trace.write(this._owner + " viewDidLayoutSubviews, isLoaded = " + this._owner.isLoaded, trace.categories.ViewHierarchy);
         this._owner._updateLayout();
     }
+
+    public viewWillAppear() {
+        trace.write(this._owner + " viewWillAppear", trace.categories.Navigation);
+
+        this._owner._enableLoadedEvents = true;
+        this._owner.onLoaded();
+        this._owner._enableLoadedEvents = false;
+    }
+
+    public viewDidDisappear() {
+        trace.write(this._owner + " viewDidDisappear", trace.categories.Navigation);
+
+        this._owner._enableLoadedEvents = true;
+        this._owner.onUnloaded();
+        this._owner._enableLoadedEvents = false;
+    }
+
 }
 
 export class Page extends pageCommon.Page {
     private _ios: UIViewController;
+    public _enableLoadedEvents: boolean;
 
     constructor(options?: definition.Options) {
         super(options);
@@ -44,6 +62,20 @@ export class Page extends pageCommon.Page {
         this._addNativeView(newView);
     }
 
+    public onLoaded() {
+        // loaded/unloaded events are handeled in page viewWillAppear/viewDidDisappear
+        if (this._enableLoadedEvents) {
+            super.onLoaded();
+        }
+    }
+    
+    public onUnloaded() {
+        // loaded/unloaded events are handeled in page viewWillAppear/viewDidDisappear
+        if (this._enableLoadedEvents) {
+            super.onUnloaded();
+        }
+    }
+
     private _addNativeView(view: viewModule.View) {
         if (view) {
             trace.write("Native: Adding " + view + " to " + this, trace.categories.ViewHierarchy);

ui/tab-view/tab-view.android.ts

@@ -281,6 +281,7 @@ export class TabView extends common.TabView {
     public onUnloaded() {
         trace.write("TabView.onUnloaded();", common.traceCategory);
         this._removeTabsIfNeeded();
+        this._unsetAdapter();
         super.onUnloaded();
     }
 

ui/tab-view/tab-view.ios.ts

@@ -24,12 +24,6 @@ class UITabBarControllerImpl extends UITabBarController {
         return this;
     }
 
-    public viewDidAppear(animated: boolean): void {
-        trace.write("TabView.UITabBarControllerClass.viewDidAppear();", trace.categories.Debug);
-        super.viewDidAppear(animated);
-        this._owner.onLoaded();
-    }
-
     public viewDidLayoutSubviews(): void {
         trace.write("TabView.UITabBarControllerClass.viewDidLayoutSubviews();", trace.categories.Debug);
         super.viewDidLayoutSubviews();