Merge pull request #1263 from NativeScript/issue-518

Fixed Issue #518:  Allow ActionItems to be directly specified between…

CrossPlatformModules.csproj

@@ -67,6 +67,9 @@
     <TypeScriptCompile Include="apps\action-bar-demo\pages\action-items-text.ts">
       <DependentUpon>action-items-text.xml</DependentUpon>
     </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\all-between-tags.ts">
+      <DependentUpon>all-between-tags.xml</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view-stack.ts">
       <DependentUpon>center-view-stack.xml</DependentUpon>
     </TypeScriptCompile>
@@ -119,12 +122,14 @@
     <Content Include="apps\action-bar-demo\pages\center-view-segmented.xml" />
     <Content Include="apps\action-bar-demo\pages\center-view.xml" />
     <Content Include="apps\action-bar-demo\pages\data-binding.xml" />
+    <Content Include="apps\action-bar-demo\pages\all-between-tags.xml" />
     <Content Include="apps\animations\opacity.css" />
     <Content Include="apps\animations\opacity.xml">
       <SubType>Designer</SubType>
     </Content>
     <Content Include="apps\animations\bkg.png" />
     <Content Include="apps\animations\test-icon.png" />
+    <Content Include="apps\tests\ui\action-bar\ActionBar_BetweenTags.xml" />
     <Content Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.xml" />
     <Content Include="apps\tests\ui\page\modal-page.xml">
       <SubType>Designer</SubType>
@@ -989,7 +994,9 @@
     <Content Include="apps\cuteness.unoptimized\res\reddit-logo.png" />
     <Content Include="apps\cuteness.unoptimized\res\telerik-logo.png" />
     <Content Include="apps\action-bar-demo\app.css" />
-    <Content Include="apps\action-bar-demo\main-page.xml" />
+    <Content Include="apps\action-bar-demo\main-page.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\action-bar-demo\pages\action-items-text.xml">
       <SubType>Designer</SubType>
     </Content>

apps/action-bar-demo/main-page.xml

@@ -19,6 +19,7 @@
       <Button tap="itemTap" text="center view" tag="center-view" />
       <Button tap="itemTap" text="center segmented" tag="center-view-segmented" />
       <Button tap="itemTap" text="center stack" tag="center-view-stack" />
+      <Button tap="itemTap" text="all between tags" tag="all-between-tags" />
     </StackLayout>
   </ScrollView>
 </Page>

apps/action-bar-demo/pages/all-between-tags.ts

@@ -0,0 +1,5 @@
+import observable = require("data/observable");
+
+export function onTapped(args: observable.EventData) {
+    console.log(`Tapped ${(<any>args.object).text}`);
+}

apps/action-bar-demo/pages/all-between-tags.xml

@@ -0,0 +1,15 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar>
+      <ActionItem text="i1" tap="onTapped"/>
+      <Label text="tv" tap="onTapped"/>
+      <ActionItem text="i2" tap="onTapped"/>
+      <NavigationButton text="nb" android.systemIcon="ic_menu_back" tap="onTapped"/>
+      <ActionItem text="i3" tap="onTapped"/>
+    </ActionBar>
+  </Page.actionBar>
+  
+  <StackLayout>
+    <Label text="page content"/>
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/navigation-button.ts

@@ -44,5 +44,5 @@ export function visibilityTap(args: observable.EventData) {
 }
 
 export function navTap(args: observable.EventData) {
-    console.log("navigation button tapped");
+    console.log("(Android only) Navigation button tapped");
 }

apps/tests/ui/action-bar/ActionBar_BetweenTags.xml

@@ -0,0 +1,15 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar>
+      <ActionItem text="i1" tap="onTapped"/>
+      <Label text="tv" tap="onTapped"/>
+      <ActionItem text="i2" tap="onTapped"/>
+      <NavigationButton text="nb" tap="onTapped"/>
+      <ActionItem text="i3" tap="onTapped"/>
+    </ActionBar>
+  </Page.actionBar>
+
+  <StackLayout>
+    <Label text="page content"/>
+  </StackLayout>
+</Page>

apps/tests/ui/action-bar/action-bar-tests-common.ts

@@ -324,6 +324,28 @@ export function test_Setting_ActionItemsWithNumberAsText_doesnt_thrown() {
     }
 }
 
+export function test_CanDefineEverythingAsContentBetweenTheTwoTags() {
+    var moduleName = __dirname.substr(fs.knownFolders.currentApp().path.length);
+    helper.navigateToModuleAndRunTest(moduleName + "/ActionBar_BetweenTags", undefined, (page: PageModule.Page) => {
+
+        TKUnit.assertNotNull(page.actionBar.navigationButton);
+        TKUnit.assertEqual(page.actionBar.navigationButton.text, "nb");
+
+        TKUnit.assertNull(page.actionBar.title);
+        TKUnit.assertNotNull(page.actionBar.titleView);
+        TKUnit.assertTrue(page.actionBar.titleView instanceof LabelModule.Label);
+        TKUnit.assertEqual((<LabelModule.Label>page.actionBar.titleView).text, "tv");
+
+        TKUnit.assertNotNull(page.actionBar.actionItems);
+        var items = page.actionBar.actionItems.getItems();
+        TKUnit.assertEqual(items.length, 3);
+
+        TKUnit.assertEqual(items[0].text, "i1");
+        TKUnit.assertEqual(items[1].text, "i2");
+        TKUnit.assertEqual(items[2].text, "i3");
+    });
+}
+
 export function createPageAndNavigate() {
     var page: PageModule.Page;
     var pageFactory = function (): PageModule.Page {

tsconfig.json

@@ -39,6 +39,7 @@
         "apps/action-bar-demo/pages/action-bar-hidden.ts",
         "apps/action-bar-demo/pages/action-items-icon.ts",
         "apps/action-bar-demo/pages/action-items-text.ts",
+        "apps/action-bar-demo/pages/all-between-tags.ts",
         "apps/action-bar-demo/pages/center-view-segmented.ts",
         "apps/action-bar-demo/pages/center-view-stack.ts",
         "apps/action-bar-demo/pages/center-view.ts",

ui/action-bar/action-bar-common.ts

@@ -129,8 +129,10 @@ export class ActionBar extends view.View implements dts.ActionBar {
         if (value instanceof dts.NavigationButton) {
             this.navigationButton = value;
         }
-
+        else if (value instanceof dts.ActionItem) {
-        if (value instanceof view.View) {
+            this.actionItems.addItem(value);
+        }
+        else if (value instanceof view.View) {
             this.titleView = value;
         }
     }