feat(TabStrip): add itemTap event (#7711)

This commit is contained in:
Vasil Chimev
2019-08-23 15:32:31 +03:00
committed by Manol Donev
parent caca2b82a2
commit 55c9cc9072
33 changed files with 610 additions and 360 deletions

View File

@@ -1 +1 @@
<Frame defaultPage="main-page" />
<Frame defaultPage="main-page" />

View File

@@ -24,7 +24,7 @@ application.on("uncaughtError", args => {
}
});
application.on(application.launchEvent, function(args: application.LaunchEventData) {
application.on(application.launchEvent, function (args: application.LaunchEventData) {
if (args.android) {
// For Android applications, args.android is an android.content.Intent class.
console.log("### Launched application with: " + args.android + ".");
@@ -34,7 +34,7 @@ application.on(application.launchEvent, function(args: application.LaunchEventDa
}
});
application.on(application.suspendEvent, function(args: application.ApplicationEventData) {
application.on(application.suspendEvent, function (args: application.ApplicationEventData) {
if (args.android) {
// For Android applications, args.android is an android activity class.
console.log("#" + ++countSuspend + "# SuspendEvent Activity: " + args.android);
@@ -44,7 +44,7 @@ application.on(application.suspendEvent, function(args: application.ApplicationE
}
});
application.on(application.resumeEvent, function(args: application.ApplicationEventData) {
application.on(application.resumeEvent, function (args: application.ApplicationEventData) {
if (args.android) {
// For Android applications, args.android is an android activity class.
console.log("#" + ++countResume + "# ResumeEvent Activity: " + args.android);
@@ -54,7 +54,7 @@ application.on(application.resumeEvent, function(args: application.ApplicationEv
}
});
application.on(application.exitEvent, function(args: application.ApplicationEventData) {
application.on(application.exitEvent, function (args: application.ApplicationEventData) {
if (args.android) {
// For Android applications, args.android is an android activity class.
console.log("### ExitEvent Activity: " + args.android);
@@ -64,7 +64,7 @@ application.on(application.exitEvent, function(args: application.ApplicationEven
}
});
application.on(application.lowMemoryEvent, function(args: application.ApplicationEventData) {
application.on(application.lowMemoryEvent, function (args: application.ApplicationEventData) {
if (args.android) {
// For Android applications, args.android is an android activity class.
console.log("### LowMemoryEvent Activity: " + args.android);
@@ -74,14 +74,14 @@ application.on(application.lowMemoryEvent, function(args: application.Applicatio
}
});
application.on(application.uncaughtErrorEvent, function(args: application.UnhandledErrorEventData) {
application.on(application.uncaughtErrorEvent, function (args: application.UnhandledErrorEventData) {
console.log("### NativeScriptError: " + args.error);
console.log("### nativeException: " + (<any>args.error).nativeException);
console.log("### stackTrace: " + (<any>args.error).stackTrace);
console.log("### stack: " + args.error.stack);
});
application.on(application.discardedErrorEvent, function(args: application.DiscardedErrorEventData) {
application.on(application.discardedErrorEvent, function (args: application.DiscardedErrorEventData) {
console.log("### [Discarded] NativeScriptError: " + args.error);
console.log("### [Discarded] nativeException: " + (<any>args.error).nativeException);
console.log("### [Discarded] stackTrace: " + (<any>args.error).stackTrace);
@@ -89,6 +89,8 @@ application.on(application.discardedErrorEvent, function(args: application.Disca
});
application.setCssFileName("app.css");
application._start({ moduleName: "main-page" });
// TODO: investigate tab-view -> tabviewcss test crash
// TODO: investigate css -> layouts border overlap failure
// application.run({ moduleName: "app-root" });

View File

@@ -0,0 +1,42 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
export function goToFirst(args: EventData) {
console.log("---> goToFirst");
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById("bottomNav");
bottomNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
console.log("---> goToSecond");
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById("bottomNav");
bottomNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
console.log("---> goToThird");
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById("bottomNav");
bottomNav.selectedIndex = 2;
}
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
console.log("---> onSelectedIndexChanged", args.eventName);
console.log("---> oldIndex", args.oldIndex);
console.log("---> newIndex", args.newIndex);
}
export function onFirstTabStripItemTap(args: EventData) {
console.log("---> onFirstTabStripItemTap", args.eventName);
}
export function onSecondTabStripItemTap(args: EventData) {
console.log("---> onSecondTabStripItemTap", args.eventName);
}
export function onThirdTabStripItemTap(args: EventData) {
console.log("---> onThirdTabStripItemTap", args.eventName);
}

View File

@@ -0,0 +1,36 @@
<Page>
<BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip>
<TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
<TabStripItem tap="onSecondTabStripItemTap">
<Label text="Second" />
</TabStripItem>
<TabStripItem title="First" tap="onThirdTabStripItemTap">
<Label text="Third" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="red" />
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second View" backgroundColor="green" />
<Button tap="goToThird" text="go to thrid" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="blue" />
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
</BottomNavigation>
</Page>

View File

@@ -0,0 +1,14 @@
import { EventData } from "tns-core-modules/data/observable";
import { Button } from "tns-core-modules/ui/button/button";
export function goToSecond(args: EventData) {
console.log("---> goToSecond Page");
const button = <Button>args.object;
button.page.frame.navigate("bottom-navigation/second-page");
}
export function goBack(args: EventData) {
console.log("---> goBack");
const button = <Button>args.object;
button.page.frame.goBack();
}

View File

@@ -0,0 +1,7 @@
<Page backgroundColor="lightgreen" actionBarHidden="true">
<StackLayout>
<Label text="First Page" />
<Button tap="goToSecond" text="go to second page" />
<Button tap="goBack" text="go to back" />
</StackLayout>
</Page>

View File

@@ -15,6 +15,7 @@ export function loadExamples() {
examples.set("issue-5470", "bottom-navigation/issue-5470-page");
examples.set("background-color", "bottom-navigation/background-color-page");
examples.set("color", "bottom-navigation/color-page");
examples.set("events", "bottom-navigation/events-page");
examples.set("font", "bottom-navigation/font-page");
examples.set("text-transform", "bottom-navigation/text-transform-page");
examples.set("icon-title-placement", "bottom-navigation/icon-title-placement-page");
@@ -24,6 +25,7 @@ export function loadExamples() {
examples.set("fancy-fonts", "bottom-navigation/fancy-fonts-page");
examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
examples.set("reselect", "bottom-navigation/reselect-page");
return examples;
}

View File

@@ -0,0 +1,61 @@
import { EventData } from "tns-core-modules/data/observable";
import { Frame } from "tns-core-modules/ui/frame/frame";
import { Page } from "tns-core-modules/ui/page";
import {
TabStripItemEventData, SelectedIndexChangedEventData, BottomNavigation, TabStrip,
} from "tns-core-modules/ui/bottom-navigation";
export function goToFirst(args: EventData) {
console.log("---> goToFirst");
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
bottomNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
console.log("---> goToSecond");
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
bottomNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
console.log("---> goToThird");
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
bottomNav.selectedIndex = 2;
}
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
console.log("---> onSelectedIndexChanged", args.eventName);
console.log("---> oldIndex", args.oldIndex);
console.log("---> newIndex", args.newIndex);
}
export function onItemTap(args: TabStripItemEventData) {
console.log("---> onItemTap", args.eventName);
console.log("---> onItemTap", args.index);
console.log("---> onItemTap", args.object);
const tabStrip = <TabStrip>args.object;
const page = <Page>tabStrip.page;
const frame = <Frame>page.getViewById("frame");
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
console.log("---> onItemTap selectedIndex", bottomNav.selectedIndex);
if (bottomNav.selectedIndex === args.index && frame.canGoBack()) {
frame.goBack();
}
}
export function onFirstTabStripItemTap(args: EventData) {
console.log("---> onFirstTabStripItemTap", args.eventName);
}
export function onSecondTabStripItemTap(args: EventData) {
console.log("---> onSecondTabStripItemTap", args.eventName);
}
export function onThirdTabStripItemTap(args: EventData) {
console.log("---> onThirdTabStripItemTap", args.eventName);
}

View File

@@ -0,0 +1,37 @@
<Page>
<BottomNavigation id="bottomNav" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip itemTap="onItemTap">
<TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
<TabStripItem tap="onSecondTabStripItemTap">
<Label text="Second" />
</TabStripItem>
<TabStripItem title="First" tap="onThirdTabStripItemTap">
<Label text="Third" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="red" id="label" />
<Button tap="goToSecond" text="go to second item" id="button" />
<Frame defaultPage="bottom-navigation/first-page" id="frame" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second Content Item" backgroundColor="lightgreen" />
<Button tap="goToThird" text="go to thrid item" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First Content Item" backgroundColor="lightblue" />
<Button tap="goToFirst" text="go to first item" />
</StackLayout>
</TabContentItem>
</BottomNavigation>
</Page>

View File

@@ -0,0 +1,14 @@
import { EventData } from "tns-core-modules/data/observable";
import { Button } from "tns-core-modules/ui/button/button";
export function goToFirst(args: EventData) {
console.log("---> goToFirst Page");
const button = <Button>args.object;
button.page.frame.navigate("bottom-navigation/first-page");
}
export function goBack(args: EventData) {
console.log("---> goBack");
const button = <Button>args.object;
button.page.frame.goBack();
}

View File

@@ -0,0 +1,7 @@
<Page backgroundColor="lightblue" actionBarHidden="true">
<StackLayout>
<Label text="Second Page" />
<Button tap="goToFirst" text="go to first page" />
<Button tap="goBack" text="go back" />
</StackLayout>
</Page>

View File

@@ -86,4 +86,4 @@
<Label text="Second Tab" />
</TabStripItem>
</BottomNavigationBar> -->
</Page>
</Page>

View File

@@ -0,0 +1,42 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
export function goToFirst(args: EventData) {
console.log("---> goToFirst");
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById("tabsNav");
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
console.log("---> goToSecond");
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById("tabsNav");
tabsNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
console.log("---> goToThird");
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById("tabsNav");
tabsNav.selectedIndex = 2;
}
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
console.log("---> onSelectedIndexChanged", args.eventName);
console.log("---> oldIndex", args.oldIndex);
console.log("---> newIndex", args.newIndex);
}
export function onFirstTabStripItemTap(args: EventData) {
console.log("---> onFirstTabStripItemTap", args.eventName);
}
export function onSecondTabStripItemTap(args: EventData) {
console.log("---> onSecondTabStripItemTap", args.eventName);
}
export function onThirdTabStripItemTap(args: EventData) {
console.log("---> onThirdTabStripItemTap", args.eventName);
}

View File

@@ -0,0 +1,36 @@
<Page>
<Tabs id="tabsNav" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip>
<TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
<TabStripItem tap="onSecondTabStripItemTap">
<Label text="Second" />
</TabStripItem>
<TabStripItem title="First" tap="onThirdTabStripItemTap">
<Label text="Third" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="red" />
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second View" backgroundColor="green" />
<Button tap="goToThird" text="go to thrid" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="blue" />
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
</Tabs>
</Page>

View File

@@ -0,0 +1,14 @@
import { EventData } from "tns-core-modules/data/observable";
import { Button } from "tns-core-modules/ui/button/button";
export function goToSecond(args: EventData) {
console.log("---> goToSecond Page");
const button = <Button>args.object;
button.page.frame.navigate("tabs/second-page");
}
export function goBack(args: EventData) {
console.log("---> goBack");
const button = <Button>args.object;
button.page.frame.goBack();
}

View File

@@ -0,0 +1,7 @@
<Page backgroundColor="lightgreen" actionBarHidden="true">
<StackLayout>
<Label text="First Page" />
<Button tap="goToSecond" text="go to second page" />
<Button tap="goBack" text="go to back" />
</StackLayout>
</Page>

View File

@@ -16,6 +16,7 @@ export function loadExamples() {
examples.set("issue-5470", "tabs/issue-5470-page");
examples.set("background-color", "tabs/background-color-page");
examples.set("color", "tabs/color-page");
examples.set("events", "tabs/events-page");
examples.set("font", "tabs/font-page");
examples.set("text-transform", "tabs/text-transform-page");
examples.set("highlight-color", "tabs/highlight-color-page");
@@ -24,6 +25,7 @@ export function loadExamples() {
examples.set("swipe-disabled", "tabs/swipe-disabled-page");
examples.set("strip-item", "tabs/tab-strip-item-page");
examples.set("strip-items", "tabs/tab-strip-items-page");
examples.set("reselect", "tabs/reselect-page");
examples.set("tabs-position", "tabs/tabs-position-page");
examples.set("tabs-binding", "tabs/tabs-binding-page");
examples.set("font-icons", "tabs/font-icons-page");

View File

@@ -0,0 +1,73 @@
import { EventData } from "tns-core-modules/data/observable";
import { Frame } from "tns-core-modules/ui/frame/frame";
import { Page } from "tns-core-modules/ui/page";
import {
TabStripItemEventData, SelectedIndexChangedEventData, Tabs, TabStrip //, TabStripItem
} from "tns-core-modules/ui/tabs";
export function goToFirst(args: EventData) {
console.log("---> goToFirst");
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById("tabsNav");
tabsNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
console.log("---> goToSecond");
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById("tabsNav");
tabsNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
console.log("---> goToThird");
const page = <Page>(<any>args.object).page;
const tabsNav = <Tabs>page.getViewById("tabsNav");
tabsNav.selectedIndex = 2;
}
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
console.log("---> onSelectedIndexChanged", args.eventName);
console.log("---> oldIndex", args.oldIndex);
console.log("---> newIndex", args.newIndex);
}
export function onItemTap(args: TabStripItemEventData) {
console.log("---> onItemTap", args.eventName);
console.log("---> onItemTap", args.index);
console.log("---> onItemTap", args.object);
const tabStrip = <TabStrip>args.object;
const page = <Page>tabStrip.page;
const frame = <Frame>page.getViewById("frame");
const tabs = <Tabs>page.getViewById("tabsNav");
console.log("---> onItemTap selectedIndex", tabs.selectedIndex);
if (tabs.selectedIndex === args.index && frame.canGoBack()) {
frame.goBack();
}
}
export function onFirstTabStripItemTap(args: EventData) {
console.log("---> onFirstTabStripItemTap", args.eventName);
// console.log("---> onFirstTabStripItemTap", args.eventName);
// console.log("---> onFirstTabStripItemTap", args.object);
// const tabStripItem = <TabStripItem>args.object;
// const page = tabStripItem.page;
// const frame = <Frame>page.getViewById("frame");
// const tabs = <Tabs>page.getViewById("tabsNav");
// console.log("---> tabs.selectedIndex", tabs.selectedIndex);
// if (tabs.selectedIndex === 0 && frame.canGoBack()) {
// frame.goBack();
// }
}
export function onSecondTabStripItemTap(args: EventData) {
console.log("---> onSecondTabStripItemTap", args.eventName);
}
export function onThirdTabStripItemTap(args: EventData) {
console.log("---> onThirdTabStripItemTap", args.eventName);
}

View File

@@ -0,0 +1,37 @@
<Page>
<Tabs id="tabsNav" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip itemTap="onItemTap">
<TabStripItem title="First" tap="onFirstTabStripItemTap"></TabStripItem>
<TabStripItem tap="onSecondTabStripItemTap">
<Label text="Second" />
</TabStripItem>
<TabStripItem title="First" tap="onThirdTabStripItemTap">
<Label text="Third" />
</TabStripItem>
</TabStrip>
<TabContentItem>
<StackLayout>
<Label text="First View" backgroundColor="red" id="label" />
<Button tap="goToSecond" text="go to second item" id="button" />
<Frame defaultPage="tabs/first-page" id="frame" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second Content Item" backgroundColor="lightgreen" />
<Button tap="goToThird" text="go to thrid item" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First Content Item" backgroundColor="lightblue" />
<Button tap="goToFirst" text="go to first item" />
</StackLayout>
</TabContentItem>
</Tabs>
</Page>

View File

@@ -0,0 +1,14 @@
import { EventData } from "tns-core-modules/data/observable";
import { Button } from "tns-core-modules/ui/button/button";
export function goToFirst(args: EventData) {
console.log("---> goToFirst Page");
const button = <Button>args.object;
button.page.frame.navigate("tabs/first-page");
}
export function goBack(args: EventData) {
console.log("---> goBack");
const button = <Button>args.object;
button.page.frame.goBack();
}

View File

@@ -0,0 +1,7 @@
<Page backgroundColor="lightblue" actionBarHidden="true">
<StackLayout>
<Label text="Second Page" />
<Button tap="goToFirst" text="go to first page" />
<Button tap="goBack" text="go back" />
</StackLayout>
</Page>

View File

@@ -1,27 +0,0 @@
import * as pages from "tns-core-modules/ui/page";
import * as frame from "tns-core-modules/ui/frame";
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
import * as button from "tns-core-modules/ui/button";
import * as text from "tns-core-modules/ui/text-field";
export function createPage() {
var page = new pages.Page();
var stack = new stackModule.StackLayout();
var btn = new button.Button();
btn.text = "Page B new activity";
btn.on(button.Button.tapEvent, function () {
var nextPage = "tests/pages/navigation/pageB-new-activity";
frame.topmost().navigate(nextPage);
});
stack.addChild(btn);
var txt = new text.TextField();
txt.text = "text new A";
stack.addChild(txt);
page.content = stack;
return page;
}
//export var Page = page;

View File

@@ -1,56 +0,0 @@
import * as pages from "tns-core-modules/ui/page";
import * as frame from "tns-core-modules/ui/frame";
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
import * as button from "tns-core-modules/ui/button";
import * as text from "tns-core-modules/ui/text-field";
import * as color from "tns-core-modules/color";
import * as list from "tns-core-modules/ui/list-view";
export function createPage() {
var page = new pages.Page();
var stack = new stackModule.StackLayout();
stack.style.backgroundColor = new color.Color("#FF8833FF");
var btn = new button.Button();
btn.text = "Page B";
btn.on(button.Button.tapEvent, function () {
var nextPage = "tests/pages/navigation/pageB";
frame.topmost().navigate(nextPage);
});
stack.addChild(btn);
var btnActivity = new button.Button();
btnActivity.text = "start activity";
btnActivity.on(button.Button.tapEvent, function () {
var newPage = "tests/pages/navigation/pageA-new-activity";
var newFrame = new frame.Frame();
newFrame.navigate(newPage);
});
stack.addChild(btnActivity);
var txt = new text.TextField();
txt.text = "text A";
stack.addChild(txt);
var lv = new list.ListView();
var data = [];
for (var i = 0; i < 100; i++) {
data[i] = "here is item " + i;
}
lv.height = 200;
lv.items = data;
lv.on(list.ListView.itemLoadingEvent, (args: list.ItemEventData) => {
var btn = <button.Button> args.view;
if (!btn) {
btn = new button.Button();
args.view = btn;
}
btn.text = data[args.index];
});
stack.addChild(lv);
page.content = stack;
return page;
}

View File

@@ -1,34 +0,0 @@
import * as pages from "tns-core-modules/ui/page";
import * as frame from "tns-core-modules/ui/frame";
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
import * as button from "tns-core-modules/ui/button";
import * as text from "tns-core-modules/ui/text-field";
export function createPage() {
var page = new pages.Page();
var stack = new stackModule.StackLayout();
var btn = new button.Button();
btn.text = "Page C new activity";
btn.on(button.Button.tapEvent, function () {
var nextPage = "tests/pages/navigation/pageC-new-activity";
frame.topmost().navigate(nextPage);
});
stack.addChild(btn);
var backBtn = new button.Button();
backBtn.text = "BACK";
backBtn.on(button.Button.tapEvent, function () {
frame.topmost().goBack();
});
stack.addChild(backBtn);
var txt = new text.TextField();
txt.text = "text new B";
stack.addChild(txt);
page.content = stack;
return page;
}
//export var Page = page;

View File

@@ -1,58 +0,0 @@
import * as pages from "tns-core-modules/ui/page";
import * as frame from "tns-core-modules/ui/frame";
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
import * as button from "tns-core-modules/ui/button";
import * as text from "tns-core-modules/ui/text-field";
import * as color from "tns-core-modules/color";
import * as scroll from "tns-core-modules/ui/scroll-view";
export function createPage() {
var page = new pages.Page();
var stack = new stackModule.StackLayout();
stack.style.backgroundColor = new color.Color("#FFFFFF00");
var btn = new button.Button();
btn.text = "Page C";
btn.on(button.Button.tapEvent, function () {
var nextPage = "tests/pages/navigation/pageC";
frame.topmost().navigate(nextPage);
});
stack.addChild(btn);
var btnActivity = new button.Button();
btnActivity.text = "start activity";
btnActivity.on(button.Button.tapEvent, function () {
var newFrame = new frame.Frame();
var newPage = "tests/pages/navigation/pageA-new-activity";
newFrame.navigate(newPage);
});
stack.addChild(btnActivity);
var backBtn = new button.Button();
backBtn.text = "BACK";
backBtn.on(button.Button.tapEvent, function () {
frame.topmost().goBack();
});
stack.addChild(backBtn);
var txt = new text.TextField();
txt.text = "text B";
stack.addChild(txt);
var sv = new scroll.ScrollView();
sv.height = 200;
stack.addChild(sv);
var content = new stackModule.StackLayout();
sv.content = content;
for (var i = 0; i < 50; i++) {
var b = new button.Button();
b.text = "button " + i;
content.addChild(b);
}
page.content = stack;
return page;
}
//export var Page = page;

View File

@@ -1,34 +0,0 @@
import * as pages from "tns-core-modules/ui/page";
import * as frame from "tns-core-modules/ui/frame";
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
import * as button from "tns-core-modules/ui/button";
import * as text from "tns-core-modules/ui/text-field";
export function createPage() {
var page = new pages.Page();
var stack = new stackModule.StackLayout();
var btn = new button.Button();
btn.text = "Page A ???";
btn.on(button.Button.tapEvent, function () {
var newPage = "tests/pages/navigation/pageA";
frame.topmost().navigate(newPage);
});
stack.addChild(btn);
var backBtn = new button.Button();
backBtn.text = "BACK";
backBtn.on(button.Button.tapEvent, function () {
frame.topmost().goBack();
});
stack.addChild(backBtn);
var txt = new text.TextField();
txt.text = "text new C";
stack.addChild(txt);
page.content = stack;
return page;
}
//export var Page = page;

View File

@@ -1,43 +0,0 @@
import * as pages from "tns-core-modules/ui/page";
import * as frame from "tns-core-modules/ui/frame";
import * as stackModule from "tns-core-modules/ui/layouts/stack-layout";
import * as button from "tns-core-modules/ui/button";
import * as text from "tns-core-modules/ui/text-field";
export function createPage() {
var page = new pages.Page();
var stack = new stackModule.StackLayout();
var newActivity = new button.Button();
newActivity.text = "start activity";
newActivity.on(button.Button.tapEvent, function () {
var newFrame = new frame.Frame();
var newPage = "tests/pages/navigation/pageA-new-activity";
newFrame.navigate(newPage);
});
stack.addChild(newActivity);
var btn = new button.Button();
btn.text = "Page A ???";
btn.on(button.Button.tapEvent, function () {
var nextPage = "tests/pages/navigation/pageA";
frame.topmost().navigate(nextPage);
});
stack.addChild(btn);
var backBtn = new button.Button();
backBtn.text = "BACK";
backBtn.on(button.Button.tapEvent, function () {
frame.topmost().goBack();
});
stack.addChild(backBtn);
var txt = new text.TextField();
txt.text = "text C";
stack.addChild(txt);
page.content = stack;
return page;
}
//export var Page = page;

View File

@@ -1,20 +1,20 @@
// Types
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
import { TabStrip } from "../tab-navigation-base/tab-strip";
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
import { TextTransform } from "../text-base";
// Requires
import {
TabNavigationBase, getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
} from "../tab-navigation-base/tab-navigation-base";
import { Font } from "../styling/font";
import { getTransformedText } from "../text-base";
import { CSSType, Color } from "../core/view";
import { Frame, View } from "../frame";
import { RESOURCE_PREFIX, ad, layout, isFontIconURI } from "../../utils/utils";
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
import * as application from "../../application";
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
import { ad, isFontIconURI, layout, RESOURCE_PREFIX } from "../../utils/utils";
import { Color, CSSType } from "../core/view";
import { Frame, View } from "../frame";
import { Font } from "../styling/font";
import {
getIconSpecSize, itemsProperty, selectedIndexProperty, TabNavigationBase, tabStripProperty
} from "../tab-navigation-base/tab-navigation-base";
import { getTransformedText } from "../text-base";
// TODO: Impl trace
// import { isEnabled as traceEnabled, write as traceWrite } from "../../../trace";
@@ -126,10 +126,12 @@ function initializeNativeClasses() {
return false;
}
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
const tabStrip = owner.tabStrip;
const tabStripItems = tabStrip && tabStrip.items;
if (position >= 0 && tabStripItems[position]) {
tabStripItems[position]._emit(TabStripItem.tapEvent);
tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: position });
}
if (!owner.items[position]) {
@@ -271,7 +273,7 @@ export class BottomNavigation extends TabNavigationBase {
this._bottomNavigationBar = (<any>nativeView).bottomNavigationBar;
(<any>this._bottomNavigationBar).owner = this;
if (this.tabStrip) {
this.tabStrip.setNativeView(this._bottomNavigationBar);
}
@@ -504,37 +506,37 @@ export class BottomNavigation extends TabNavigationBase {
private createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
if (tabStripItem.isLoaded) {
const titleLabel = tabStripItem.label;
let title = titleLabel.text;
// TEXT-TRANSFORM
const textTransform = titleLabel.style.textTransform;
if (textTransform) {
title = getTransformedText(title, textTransform);
}
tabItemSpec.title = title;
// BACKGROUND-COLOR
const backgroundColor = tabStripItem.style.backgroundColor;
if (backgroundColor) {
tabItemSpec.backgroundColor = backgroundColor.android;
}
// COLOR
const color = titleLabel.style.color;
if (color) {
tabItemSpec.color = color.android;
}
// FONT
const fontInternal = titleLabel.style.fontInternal;
if (fontInternal) {
tabItemSpec.fontSize = fontInternal.fontSize;
tabItemSpec.typeFace = fontInternal.getAndroidTypeface();
}
// ICON
const iconSource = tabStripItem.image && tabStripItem.image.src;
if (iconSource) {
@@ -546,7 +548,7 @@ export class BottomNavigation extends TabNavigationBase {
}
} else {
const icon = this.getIcon(tabStripItem);
if (icon) {
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
// tslint:disable-next-line:deprecation
@@ -558,13 +560,13 @@ export class BottomNavigation extends TabNavigationBase {
}
}
}
return tabItemSpec;
}
private getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
const iconSource = tabStripItem.image && tabStripItem.image.src;
let is: ImageSource;
if (isFontIconURI(iconSource)) {
const fontIconCode = iconSource.split("//")[1];
@@ -575,35 +577,35 @@ export class BottomNavigation extends TabNavigationBase {
} else {
is = fromFileOrResource(iconSource);
}
let imageDrawable: android.graphics.drawable.BitmapDrawable;
if (is && is.android) {
let image = is.android;
if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
image = this.getFixedSizeIcon(image);
}
imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
} else {
// TODO
// traceMissingIcon(iconSource);
}
return imageDrawable;
}
private getFixedSizeIcon(image: android.graphics.Bitmap): android.graphics.Bitmap {
const inWidth = image.getWidth();
const inHeight = image.getHeight();
const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
const widthPixels = iconSpecSize.width * layout.getDisplayDensity();
const heightPixels = iconSpecSize.height * layout.getDisplayDensity();
const scaledImage = android.graphics.Bitmap.createScaledBitmap(image, widthPixels, heightPixels, true);
return scaledImage;
}
@@ -660,7 +662,7 @@ export class BottomNavigation extends TabNavigationBase {
}
public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
const titleLabel = tabStripItem.label;
const titleLabel = tabStripItem.label;
const title = getTransformedText(titleLabel.text, value);
tabStripItem.nativeViewProtected.setText(title);
}

View File

@@ -1,21 +1,22 @@
// Types
import { TabStrip } from "../tab-navigation-base/tab-strip";
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
import { TabStrip } from "../tab-navigation-base/tab-strip";
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { TextTransform } from "../text-base";
//Requires
import {
TabNavigationBase, getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
} from "../tab-navigation-base/tab-navigation-base";
import { Font } from "../styling/font";
import { getTransformedText } from "../text-base";
import { Frame } from "../frame";
import { ios as iosView, View, CSSType } from "../core/view";
import { ios as iosUtils, layout, isFontIconURI } from "../../utils/utils";
import { device } from "../../platform";
// Requires
import { Color } from "../../color";
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
import { device } from "../../platform";
import { ios as iosUtils, isFontIconURI, layout } from "../../utils/utils";
import { CSSType, ios as iosView, View } from "../core/view";
import { Frame } from "../frame";
import { Font } from "../styling/font";
import {
getIconSpecSize, itemsProperty, selectedIndexProperty, TabNavigationBase, tabStripProperty
} from "../tab-navigation-base/tab-navigation-base";
import { getTransformedText } from "../text-base";
// TODO:
// import { profile } from "../../profiling";
@@ -107,9 +108,12 @@ class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControl
if (tabBarController.viewControllers) {
const position = tabBarController.viewControllers.indexOfObject(viewController);
if (position !== NSNotFound) {
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
const tabStrip = owner.tabStrip;
const tabStripItems = tabStrip && tabStrip.items;
if (tabStripItems && tabStripItems[position]) {
tabStripItems[position]._emit(TabStripItem.tapEvent);
tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: position });
}
}
}
@@ -555,7 +559,7 @@ export class BottomNavigation extends TabNavigationBase {
if (is && is.ios) {
image = is.ios;
if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
image = this.getFixedSizeIcon(image);
}
@@ -575,7 +579,7 @@ export class BottomNavigation extends TabNavigationBase {
private getFixedSizeIcon(image: UIImage): UIImage {
const inWidth = image.size.width;
const inHeight = image.size.height;
const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
const widthPts = iconSpecSize.width;

View File

@@ -3,8 +3,8 @@
* @module "ui/tab-navigation/tab-strip"
*/ /** */
import { View, Property } from "../../core/view";
import { Color } from "../../../color";
import { EventData, Property, View } from "../../core/view";
import { TabStripItem } from "../tab-strip-item";
/**
@@ -36,6 +36,34 @@ export class TabStrip extends View {
* @private
*/
_hasTitle: boolean;
/**
* String value used when hooking to itemTap event.
*/
public static itemTapEvent: string;
/**
* A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
* @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
* @param callback - Callback function which will be executed when event is raised.
* @param thisArg - An optional parameter which will be used as `this` context for callback execution.
*/
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
/**
* Raised when an TabStripItem is tapped.
*/
on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);
}
/**
* Event data containing information for the TabStripItem's index.
*/
export interface TabStripItemEventData extends EventData {
/**
* The index of the TabStripItem.
*/
index: number;
}
export const iosIconRenderingModeProperty: Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">;

View File

@@ -1,14 +1,14 @@
// Types
import { TabStrip as TabStripDefinition } from ".";
import { TabStripItem } from "../tab-strip-item";
import { TabNavigationBase } from "../tab-navigation-base";
// Types
import { Color } from "../../../color";
import { ViewBase, AddArrayFromBuilder, AddChildFromBuilder } from "../../core/view";
import { AddArrayFromBuilder, AddChildFromBuilder, EventData, ViewBase } from "../../core/view";
import { TabNavigationBase } from "../tab-navigation-base";
import { TabStripItem } from "../tab-strip-item";
import { TabStripItemEventData, TabStrip as TabStripDefinition } from "./";
// Requires
import {
View, Property, CSSType, backgroundColorProperty, backgroundInternalProperty,
colorProperty, fontInternalProperty, booleanConverter
import {
backgroundColorProperty, backgroundInternalProperty, booleanConverter,
colorProperty, CSSType, fontInternalProperty, Property, View
} from "../../core/view";
import { textTransformProperty } from "../../text-base";
@@ -20,6 +20,7 @@ export const highlightColorProperty = new Property<TabStrip, Color>({ name: "hig
@CSSType("TabStrip")
export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
public static itemTapEvent = "itemTap";
public items: TabStripItem[];
public isIconSizeFixed: boolean;
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
@@ -89,7 +90,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
}
[colorProperty.setNative](value: Color) {
const parent = <TabNavigationBase>this.parent;
return parent && parent.setTabBarColor(value);
}
@@ -100,7 +101,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
}
[fontInternalProperty.setNative](value: any) {
const parent = <TabNavigationBase>this.parent;
return parent && parent.setTabBarFontInternal(value);
}
@@ -111,7 +112,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
}
[textTransformProperty.setNative](value: any) {
const parent = <TabNavigationBase>this.parent;
return parent && parent.setTabBarTextTransform(value);
}
@@ -122,11 +123,16 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
}
[highlightColorProperty.setNative](value: number | Color) {
const parent = <TabNavigationBase>this.parent;
return parent && parent.setTabBarHighlightColor(value);
}
}
export interface TabStrip {
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);
}
export const itemsProperty = new Property<TabStrip, TabStripItem[]>({
name: "items", valueChanged: (target, oldValue, newValue) => {
target.onItemsChanged(oldValue, newValue);

View File

@@ -5,15 +5,17 @@ import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { TextTransform } from "../text-base";
// Requires
import { getIconSpecSize, selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
import { TabsBase, swipeEnabledProperty, offscreenTabLimitProperty } from "./tabs-common";
import { Font } from "../styling/font";
import { getTransformedText } from "../text-base";
import { Frame } from "../frame";
import { Color } from "../core/view";
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
import { RESOURCE_PREFIX, ad, layout, isFontIconURI } from "../../utils/utils";
import * as application from "../../application";
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
import { ad, isFontIconURI, layout, RESOURCE_PREFIX } from "../../utils/utils";
import { Color } from "../core/view";
import { Frame } from "../frame";
import { Font } from "../styling/font";
import {
getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
} from "../tab-navigation-base/tab-navigation-base";
import { getTransformedText } from "../text-base";
import { offscreenTabLimitProperty, swipeEnabledProperty, TabsBase } from "./tabs-common";
export * from "./tabs-common";
@@ -265,10 +267,12 @@ function initializeNativeClasses() {
return false;
}
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
const tabStrip = owner.tabStrip;
const tabStripItems = tabStrip && tabStrip.items;
if (position >= 0 && tabStripItems[position]) {
tabStripItems[position]._emit(TabStripItem.tapEvent);
tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: position });
}
if (!owner.items[position]) {
@@ -577,37 +581,37 @@ export class Tabs extends TabsBase {
private createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
if (tabStripItem.isLoaded) {
const nestedLabel = tabStripItem.label;
let title = nestedLabel.text;
// TEXT-TRANSFORM
const textTransform = nestedLabel.style.textTransform;
if (textTransform) {
title = getTransformedText(title, textTransform);
}
tabItemSpec.title = title;
// BACKGROUND-COLOR
const backgroundColor = tabStripItem.style.backgroundColor;
if (backgroundColor) {
tabItemSpec.backgroundColor = backgroundColor.android;
}
// COLOR
const color = nestedLabel.style.color;
if (color) {
tabItemSpec.color = color.android;
}
// FONT
const fontInternal = nestedLabel.style.fontInternal;
if (fontInternal) {
tabItemSpec.fontSize = fontInternal.fontSize;
tabItemSpec.typeFace = fontInternal.getAndroidTypeface();
}
// ICON
const iconSource = tabStripItem.image && tabStripItem.image.src;
if (iconSource) {
@@ -619,7 +623,7 @@ export class Tabs extends TabsBase {
}
} else {
const icon = this.getIcon(tabStripItem);
if (icon) {
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
// tslint:disable-next-line:deprecation
@@ -631,13 +635,13 @@ export class Tabs extends TabsBase {
}
}
}
return tabItemSpec;
}
private getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
const iconSource = tabStripItem.image && tabStripItem.image.src;
let is: ImageSource;
if (isFontIconURI(iconSource)) {
const fontIconCode = iconSource.split("//")[1];
@@ -648,35 +652,35 @@ export class Tabs extends TabsBase {
} else {
is = fromFileOrResource(iconSource);
}
let imageDrawable: android.graphics.drawable.BitmapDrawable;
if (is && is.android) {
let image = is.android;
if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
image = this.getFixedSizeIcon(image);
}
imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
} else {
// TODO
// traceMissingIcon(iconSource);
}
return imageDrawable;
}
private getFixedSizeIcon(image: android.graphics.Bitmap): android.graphics.Bitmap {
const inWidth = image.getWidth();
const inHeight = image.getHeight();
const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
const widthPixels = iconSpecSize.width * layout.getDisplayDensity();
const heightPixels = iconSpecSize.height * layout.getDisplayDensity();
const scaledImage = android.graphics.Bitmap.createScaledBitmap(image, widthPixels, heightPixels, true);
return scaledImage;
}
@@ -772,7 +776,7 @@ export class Tabs extends TabsBase {
}
public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
const nestedLabel = tabStripItem.label;
const nestedLabel = tabStripItem.label;
const title = getTransformedText(nestedLabel.text, value);
tabStripItem.nativeViewProtected.setText(title);
}

View File

@@ -1,19 +1,20 @@
// Types
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { TabStrip } from "../tab-navigation-base/tab-strip";
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { TextTransform } from "../text-base";
// Requires
import { getIconSpecSize, selectedIndexProperty, itemsProperty, tabStripProperty } from "../tab-navigation-base/tab-navigation-base";
import { TabsBase, swipeEnabledProperty } from "./tabs-common";
import { Font } from "../styling/font";
import { Frame } from "../frame";
import { ios as iosView, View } from "../core/view";
import { Color } from "../../color";
import { ios as iosUtils, layout, isFontIconURI } from "../../utils/utils";
// import { device } from "../../platform";
import { fromFileOrResource, fromFontIconCode, ImageSource } from "../../image-source";
import { ios as iosUtils, isFontIconURI, layout } from "../../utils/utils";
import { ios as iosView, View } from "../core/view";
import { Frame } from "../frame";
import { Font } from "../styling/font";
import {
getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty
} from "../tab-navigation-base/tab-navigation-base";
import { swipeEnabledProperty, TabsBase } from "./tabs-common";
// TODO
// import { profile } from "../../profiling";
@@ -44,9 +45,12 @@ class MDCTabBarDelegateImpl extends NSObject implements MDCTabBarDelegate {
owner._canSelectItem = false;
}
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
const tabStrip = owner.tabStrip;
const tabStripItems = tabStrip && tabStrip.items;
if (tabStripItems && tabStripItems[selectedIndex]) {
tabStripItems[selectedIndex]._emit(TabStripItem.tapEvent);
tabStrip.notify({ eventName: TabStrip.itemTapEvent, object: tabStrip, index: selectedIndex });
}
return shouldSelectItem;
@@ -856,7 +860,7 @@ export class Tabs extends TabsBase {
if (!this.tabStrip._hasImage) {
this.tabStrip._hasImage = !!image;
}
if (!this.tabStrip._hasTitle) {
this.tabStrip._hasTitle = !!title;
}
@@ -907,7 +911,7 @@ export class Tabs extends TabsBase {
if (is && is.ios) {
image = is.ios;
if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
image = this.getFixedSizeIcon(image);
}
@@ -927,7 +931,7 @@ export class Tabs extends TabsBase {
private getFixedSizeIcon(image: UIImage): UIImage {
const inWidth = image.size.width;
const inHeight = image.size.height;
const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
const widthPts = iconSpecSize.width;