javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Action bar progress

Browse Source
This commit is contained in:
vakrilov
2015-06-10 15:14:28 +03:00
parent e9fa23d845
commit e52b0c4556
38 changed files with 1105 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/action-bar-demo/app.css Normal file
View File

@@ -0,0 +1,13 @@
Page {
background-color: white;
}
ScrollView {
margin: 10;
}
.title {
horizontal-align: center;
font-size: 24;
margin: 6 0;
}

7
apps/action-bar-demo/app.ts Normal file
View File

@@ -0,0 +1,7 @@
import application = require("application");
application.mainModule = "main-page";
// Needed only for build infrastructure
application.cssFile = "app.css";
application.start();

9
apps/action-bar-demo/main-page.ts Normal file
View File

@@ -0,0 +1,9 @@
import observable = require("data/observable");
import frame = require("ui/frame");
export function itemTap(args: observable.EventData) {
frame.topmost().navigate({
moduleName: "pages/" + args.object.get("tag"),
});
}

11
apps/action-bar-demo/main-page.xml Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Page>
<ScrollView>
<StackLayout>
<Button tap="itemTap" text="page title and icon" tag="page-title-icon" />
<Button tap="itemTap" text="navigation button" tag="navigation-button" />
<Button tap="itemTap" text="action items icons" tag="action-items-icon" />
<Button tap="itemTap" text="action items text" tag="action-items-text" />
</StackLayout>
</ScrollView>
</Page>

2
apps/action-bar-demo/package.json Normal file
View File

@@ -0,0 +1,2 @@
{ "name" : "action-bar-demo",
"main" : "app.js" }

12
apps/action-bar-demo/pages/action-items-icon.ts Normal file
View File

@@ -0,0 +1,12 @@
export function leftTap(args) {
console.log("Left item tapped!");
}
export function rightTap(args) {
console.log("Right item tapped!");
}
export function popTap(args) {
console.log("Popup item tapped!");
}

14
apps/action-bar-demo/pages/action-items-icon.xml Normal file
View File

@@ -0,0 +1,14 @@
<Page>
<Page.actionBar>
<ActionBar title="Title">
<ActionBar.actionItems>
<ActionItem tap="leftTap" icon="~/test-icon.png" iosPosition="left"/>
<ActionItem tap="rightTap" icon="~/test-icon.png" iosPosition="right"/>
<ActionItem tap="popTap" icon="res://ic_test" iosPosition="right" androidPosition="popup" text="pop"/>
</ActionBar.actionItems>
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="button" />
</StackLayout>
</Page>

11
apps/action-bar-demo/pages/action-items-text.ts Normal file
View File

@@ -0,0 +1,11 @@
export function leftTap(args) {
console.log("Left item tapped!");
}
export function rightTap(args) {
console.log("Right item tapped!");
}
export function popTap(args) {
console.log("Popup item tapped!");
}

14
apps/action-bar-demo/pages/action-items-text.xml Normal file
View File

@@ -0,0 +1,14 @@
<Page>
<Page.actionBar>
<ActionBar title="Title">
<ActionBar.actionItems>
<ActionItem text="left" tap="leftTap" iosPosition="left"/>
<ActionItem text="right" tap="rightTap" iosPosition="right"/>
<ActionItem text="pop" tap="popTap" iosPosition="right" androidPosition="popup"/>
</ActionBar.actionItems>
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="button" />
</StackLayout>
</Page>

46
apps/action-bar-demo/pages/navigation-button.ts Normal file
View File

@@ -0,0 +1,46 @@
import observable = require("data/observable");
import pages = require("ui/page");
import action = require("ui/action-bar");
import view = require("ui/core/view");
var i = 0;
export function buttonTap(args: observable.EventData) {
var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
var navBtn = new action.NavigationButton();
navBtn.text = "nav " + i++;
if (i % 3 === 0) {
navBtn.icon = "res://ic_test";
}
else if (i % 3 === 1) {
navBtn.icon = "~/test-icon.png";
}
else if (i % 3 === 2) {
// no icon
}
navBtn.on("tap", navTap);
page.actionBar.navigationButton = navBtn;
}
var j = 0;
export function visibilityTap(args: observable.EventData) {
var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
if (j % 3 === 0) {
page.actionBar.androidIconVisibility = "always";
}
else if (j % 3 === 1) {
page.actionBar.androidIconVisibility = "never";
}
else if (j % 3 === 2) {
page.actionBar.androidIconVisibility = "auto";
}
j++;
console.log("Visibility changed to: " + page.actionBar.androidIconVisibility);
}
export function navTap(args: observable.EventData) {
console.log("navigation button tapped");
}

12
apps/action-bar-demo/pages/navigation-button.xml Normal file
View File

@@ -0,0 +1,12 @@
<Page>
<Page.actionBar>
<ActionBar title="Navigation Button">
<NavigationButton text="go back" icon="res://ic_test" tap="navTap"/>
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="button" tap="buttonTap"/>
<Button text="change icon visibility" tap="visibilityTap"/>
</StackLayout>
</Page>

20
apps/action-bar-demo/pages/page-title-icon.ts Normal file
View File

@@ -0,0 +1,20 @@
import observable = require("data/observable");
import pages = require("ui/page");
import view = require("ui/core/view");
var i = 0;
export function buttonTap(args: observable.EventData) {
var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")
page.actionBar.title = "Title changed " + i++;
if (i % 3 === 0) {
page.actionBar.icon = "res://ic_test";
}
else if (i % 3 === 1) {
page.actionBar.icon = "~/test-icon.png";
}
else if (i % 3 === 2) {
page.actionBar.icon = undefined;
}
}

8
apps/action-bar-demo/pages/page-title-icon.xml Normal file
View File

@@ -0,0 +1,8 @@
<Page>
<Page.actionBar>
<ActionBar title="Page Title" icon="res://ic_test"/>
</Page.actionBar>
<StackLayout>
<Button text="button" tap="buttonTap"/>
</StackLayout>
</Page>

BIN
apps/action-bar-demo/test-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

50
apps/tests/pages/page16.ts
View File

@@ -6,38 +6,38 @@ import frame = require("ui/frame");
export function createPage() {
var page = new pageModule.Page();
var iconItem = new pageModule.MenuItem();
iconItem.text = "TEST";
//var iconItem = new pageModule.MenuItem();
//iconItem.text = "TEST";
iconItem.icon = "~/app" + "/tests" + "/test-icon.png"; // use + to stop regex replace during build
iconItem.on("tap", () => {
console.log("Icon item tapped");
});
page.optionsMenu.addItem(iconItem);
//iconItem.icon = "~/app" + "/tests" + "/test-icon.png"; // use + to stop regex replace during build
//iconItem.on("tap", () => {
// console.log("Icon item tapped");
//});
//page.optionsMenu.addItem(iconItem);
var textItem = new pageModule.MenuItem();
textItem.text = "SAVE";
textItem.on("tap", () => {
console.log("Save item tapped");
});
page.optionsMenu.addItem(textItem);
//var textItem = new pageModule.MenuItem();
//textItem.text = "SAVE";
//textItem.on("tap", () => {
// console.log("Save item tapped");
//});
//page.optionsMenu.addItem(textItem);
var stackLayout = new stackModule.StackLayout();
var count = 0;
//var count = 0;
var btn1 = new buttonModule.Button();
btn1.text = "add item";
btn1.on("tap", () => {
console.log("adding menu item");
//btn1.on("tap", () => {
// console.log("adding menu item");
var newItem = new pageModule.MenuItem();
var text = "item " + count;
newItem.text = text
newItem.on("tap", () => {
console.log("ITEM [" + text + "] tapped");
});
page.optionsMenu.addItem(newItem);
count++;
});
// var newItem = new pageModule.MenuItem();
// var text = "item " + count;
// newItem.text = text
// newItem.on("tap", () => {
// console.log("ITEM [" + text + "] tapped");
// });
// page.optionsMenu.addItem(newItem);
// count++;
//});
stackLayout.addChild(btn1);

22
apps/tests/pages/page17.ts
View File

@@ -1,20 +1,36 @@
import observable = require("data/observable");
import action = require("ui/action-bar");
import pages = require("ui/page");
var currentPage:pages.Page;
// Event handler for Page "loaded" event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
// Get the event sender
var page = <pages.Page>args.object;
var textItem = new pages.MenuItem();
currentPage = page;
var textItem = new action.ActionItem();
textItem.text = "from loaded";
textItem.on("tap", () => {
console.log("item added in page.loaded tapped!!!");
});
page.optionsMenu.addItem(textItem);
page.actionBar.actionItems.addItem(textItem);
}
export function optionTap(args) {
console.log("item added form XML tapped!!!");
}
var i = 0;
export function buttonTap(args: observable.EventData) {
currentPage.actionBar.title = "hi " + i++;
if (i % 3 === 0) {
currentPage.actionBar.icon = "res://ic_test";
}
else if (i % 3 === 1) {
currentPage.actionBar.icon = "~/test-icon.png";
}
else if (i % 3 === 2) {
currentPage.actionBar.icon = undefined;
}
}

9
apps/tests/pages/page17.xml
View File

@@ -1,9 +1,6 @@
<Page loaded="pageLoaded">
<Page.optionsMenu>
<MenuItem text="test" tap="optionTap" android.position="popup" />
<MenuItem text="with icon" tap="optionTap" icon="~/app/test-icon.png" android.position="actionBar" />
</Page.optionsMenu>
<Page loaded="pageLoaded" title="MyPageTitle" icon="res://icon">
<StackLayout>
<Button text="button" />
<Button text="button" tap="buttonTap"/>
</StackLayout>
</Page>

17
apps/tests/ui/page/page-tests-common.ts
View File

@@ -28,6 +28,7 @@ import stackLayoutModule = require("ui/layouts/stack-layout");
import helper = require("../helper");
import view = require("ui/core/view");
import builder = require("ui/builder");
import actionBar = require("ui/action-bar");
export function addLabelToPage(page: PageModule.Page, text?: string) {
var label = new LabelModule.Label();
@@ -44,14 +45,14 @@ export function test_menuItem_inherit_bindingContext() {
var pageFactory = function (): PageModule.Page {
page = new PageModule.Page();
page.bindingContext = context;
var menuItem = new PageModule.MenuItem();
var menuItem = new actionBar.ActionItem();
menuItem.bind({
sourceProperty: "text",
targetProperty: "text"
});
page.optionsMenu.addItem(menuItem);
page.actionBar.actionItems.addItem(menuItem);
label = new LabelModule.Label();
label.text = "Text";
@@ -62,7 +63,7 @@ export function test_menuItem_inherit_bindingContext() {
helper.navigate(pageFactory);
try {
TKUnit.assertEqual(page.optionsMenu.getItemAt(0).text, "item", "menuItem.text should equal to 'item'");
TKUnit.assertEqual(page.actionBar.actionItems.getItemAt(0).text, "item", "menuItem.text should equal to 'item'");
}
finally {
helper.goBack();
@@ -70,15 +71,15 @@ export function test_menuItem_inherit_bindingContext() {
}
export function test_menuItem_inherit_bindingContext_inXML() {
var p = <PageModule.Page>builder.parse("<Page><Page.optionsMenu><MenuItem text=\"{{ myProp }} \" /></Page.optionsMenu></Page>");
var p = <PageModule.Page>builder.parse("<Page><Page.actionItems><ActionItem text=\"{{ myProp }} \" /></Page.actionItems></Page>");
p.bindingContext = { myProp: "success" };
var menuItem = p.optionsMenu.getItemAt(0);
var menuItem = p.actionBar.actionItems.getItemAt(0);
TKUnit.assertEqual(menuItem.text, "success", "menuItem.text");
};
export function test_Setting_OptionsMenu_doesnt_thrown() {
export function test_Setting_ActionItems_doesnt_thrown() {
var page: PageModule.Page;
var label: LabelModule.Label;
@@ -86,9 +87,9 @@ export function test_Setting_OptionsMenu_doesnt_thrown() {
var pageFactory = function (): PageModule.Page {
page = new PageModule.Page();
var menuItem = new PageModule.MenuItem();
var menuItem = new actionBar.ActionItem();
menuItem.text = "Item";
page.optionsMenu.addItem(menuItem);
page.actionBar.actionItems.addItem(menuItem);
label = new LabelModule.Label();
label.text = "Text";

13
apps/tests/ui/page/page-tests.ios.ts
View File

@@ -4,6 +4,7 @@ import TKUnit = require("../../TKUnit");
import LabelModule = require("ui/label");
import helper = require("../helper");
import view = require("ui/core/view");
import actionBar = require("ui/action-bar");
declare var exports;
require("utils/module-merge").merge(PageTestCommon, exports);
@@ -41,9 +42,9 @@ export function test_NavBar_isVisible_when_MenuItems_areSet() {
page = new PageModule.Page();
page.on(PageModule.Page.navigatedToEvent, handler);
var mi = new PageModule.MenuItem();
var mi = new actionBar.ActionItem();
mi.text = "B";
page.optionsMenu.addItem(mi);
page.actionBar.actionItems.addItem(mi);
label = new LabelModule.Label();
label.text = "Text";
page.content = label;
@@ -67,10 +68,10 @@ export function test_NavBarItemsAreClearedFromNativeWhenClearedFromNativeScript(
var handler = function (data) {
page.off(PageModule.Page.navigatedToEvent, handler);
var menuItems = page.optionsMenu.getItems();
var menuItems = page.actionBar.actionItems.getItems();
var i;
for (i = menuItems.length - 1; i >= 0; i--) {
page.optionsMenu.removeItem(menuItems[i]);
page.actionBar.actionItems.removeItem(menuItems[i]);
}
}
@@ -78,9 +79,9 @@ export function test_NavBarItemsAreClearedFromNativeWhenClearedFromNativeScript(
page = new PageModule.Page();
page.on(PageModule.Page.navigatedToEvent, handler);
var mi = new PageModule.MenuItem();
var mi = new actionBar.ActionItem();
mi.text = "B";
page.optionsMenu.addItem(mi);
page.actionBar.actionItems.addItem(mi);
label = new LabelModule.Label();
label.text = "Text";
page.content = label;