I want to have bottom navigation in my app as described on this page but I also have a login page which should not have the bottom navigation tabs. So as the user enters the app, he's shown the login page and after login he should get to the first tab of the bottom navigation. The docs do not mention how this would be achieved. How can this be done?
Attempt 1:
app.js
let startPage = 'login/login-page';
if(settings.hasKey('token')){
startPage = 'app-root';
}
application.run({ moduleName: startPage });
This does take me to the login page but then nothing works to get me to app-root or another similar page that could house a BottomNavigation
Attempt 2:
On login page, nothing happens.
app.js
application.run({ moduleName: 'app-root' });
app-root.xml
<Frame defaultPage="login/login-page"></Frame>
login/login-page.js
//send email and password. check if its correct. send user forward on authentication
page.frame.navigate({
moduleName: 'router/router-page',
clearHistory: true
});
router/router-page.xml
<BottomNavigation id="bottomNav" automationText="tabNavigation" selectedIndex="0">
<TabStrip>
<TabStripItem>
<Image src="font://" class="mdi"></Image>
<Label text="Products"></Label>
</TabStripItem>
<TabStripItem>
<Image src="font://" class="mdi"></Image>
<Label text="Gallery"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<Frame id="main" defaultPage="categories/categories-page"></Frame>
</TabContentItem>
<TabContentItem>
<Frame id="gallery" defaultPage="gallery/gallery-page"></Frame>
</TabContentItem>
</BottomNavigation>
//note there's no router-page.js
//is it necessary?
This exact scenario can be found in this post:
https://www.nativescript.org/blog/implementing-a-login-for-nativescript-apps-with-tab-based-navigation
The repo (https://github.com/NativeScript/login-tab-navigation-ng) is using TabView but you can quickly change that to use the newer BottomNavigation instead.
Here's how I finally did it
app.js
application.run({ moduleName: 'app-root' });
app-root.xml
<Page actionBarHidden="true" loaded="onLoaded" xmlns="http://schemas.nativescript.org/tns.xsd">
<Frame id="rootframe" defaultPage="{{ defaultPage }}"></Frame>
</Page>
app-root.js
const Observable = require("#nativescript/core/data/observable").fromObject;
const settings = require("#nativescript/core/application-settings");
exports.onLoaded = function(args){
const page = args.object;
page.bindingContext = Observable({
defaultPage: (settings.hasKey('token')) ? 'router/router-page' : 'login/login-page'
})
}
router/router-page.xml
<Page actionBarHidden="true" loaded="onLoaded" class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
<BottomNavigation id="bottomNav" automationText="tabNavigation" selectedIndex="0" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip>
<TabStripItem>
<Image src="font://" class="mdi"></Image>
<Label text="Products"></Label>
</TabStripItem>
<TabStripItem>
<Image src="font://" class="mdi"></Image>
<Label text="Gallery"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<Frame id="main" defaultPage="categories/categories-page"></Frame>
</TabContentItem>
<TabContentItem>
<Frame id="gallery" defaultPage="gallery/gallery-page"></Frame>
</TabContentItem>
</BottomNavigation>
</Page>
Related
Why does this following code produce this result: https://imgur.com/a/lQhLs8o ?
However, if I move the BottomNavigatorBar component to top position before CountryListComponent, it produces the desired result that looks like this: https://imgur.com/a/23z7bb2 ?
<template>
<Page actionBarHidden="true">
<DockLayout height="100%">
// first
<CountryListComponent dock="top">
// second
<BottomNavigationBar dock="bottom" activeColor="pink"
inactiveColor="yellow"
backgroundColor="black"
verticalAlignment="bottom"
#tabSelected="this.changeTab"
row="1">
<BottomNavigationTab title="Fiaarst" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</DockLayout>
</Page>
</template>
CountryListComponent
<template>
<StackLayout backgroundColor="blue">
</StackLayout>
</template>
Refer the DockLayout documentation, by default stretchLastChild will be true which means BottomNavigationBar will take entire space if it's last child and vice versa.
I'm unable get showModal to pass context through a frame to the default page. Also, showingModally does not seem to fire when modal is loaded (I guess args from showingModally should pass context?).
I've tried the example provided on https://docs.nativescript.org/ui/modal-view under Custom Actionbar, because I need the modal to load within a frame. The modal opens and closes fine, but showingModally in the modal XML does not seem to run.
home/home-page.js
const modalView = "home/modal-root";
function openModal(args) {
console.log('Opens modal');
const mainpage = args.object.page;
const context = "some context";
mainpage.showModal(modalView, context, () => {
console.log('Modal closed');
}, true);
}
exports.openModal = openModal;
home/home-page.xml
<Page xmlns="http://www.nativescript.org/tns.xsd">
<Page.actionBar>
<ActionBar title="Modal view Navigation" />
</Page.actionBar>
<GridLayout rows="auto, *">
<Button text="Open modal" tap="openModal" textWrap="true" />
</GridLayout>
</Page>
home/modal-root.xml
<Frame defaultPage="home/modal-view-page" />
home/modal-view-page.js
function onShowingModally(args) {
console.log("onShowingModally");
}
exports.onShowingModally = onShowingModally;
function onCloseModal(args) {
args.object.closeModal();
}
exports.onCloseModal = onCloseModal;
home/modal-view-page.xml
<Page backgroundColor="green" showingModally="onShowingModally">
<Page.actionBar>
<ActionBar backgroundColor="red" title="Modal view" icon="">
</ActionBar>
</Page.actionBar>
<StackLayout backgroundColor="lightGreen">
<Label text="Modal view with ActionBar" style="text-align:center;" textWrap="true" />
<Button text="Close Modal" tap="onCloseModal" />
</StackLayout>
</Page>
I've added the example to https://play.nativescript.org/?template=play-js&id=lFxTi4&v=9
with console logging.
Console show "Opens modal" on open and "Modal closed" on close as expected (from home/home-page.js), but "onShowingModally" (home/modal-view-page.js) nevers shows in console.
I think the docs need to be fixed. When you have the Frame being shown modally, the event will be called on the Frame not on the page within. If you are showing a simple view instead of Frame, then the event should be called on the view, basically whatever is the root view for your modal and in your example it's the Frame.
Updated Playground
how to make a radautocompletetextview with prefilled using nativescript-angular?
This is how i am trying to do it:
HTML:
<RadAutoCompleteTextView id="rice-cake" (didAutoComplete)="onTokenSelected($event)" marginTop="40px" style="border-width:0.5;border-radius:5px;border-color:#E6E6E6;"
#autocmp [items]="dataItems" suggestMode="Suggest" displayMode="Plain">
<SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="150">
`enter code here`<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
TypeScript:
this.autocomplete =
<RadAutoCompleteTextView>view.getViewById(this.page,"rice-cake");
console.log(JSON.stringify(this.autocomplete))
var token = new TokenModel(_result.dish, undefined);
this.autocomplete.addToken(token)
You may want to check this out:
https://github.com/telerik/nativescript-ui-feedback/issues/323
I'm using Telerik UI plugin in my NativeScript app for implementing drawer functionality.I'm following this tutorial for this - https://www.nativescript.org/blog/details/using-cross-platform-native-sidedrawer-component-in-nativescript
Here is my Code-
import {Component} from "#angular/core";
import listViewModule = require("nativescript-telerik-ui/listview");
import drawerModule = require("nativescript-telerik-ui/sidedrawer");
#Component({
selector: "my-app",
template: `
<drawer:SideDrawer id="drawer1">
<drawer:SideDrawer.mainContent>
<!-- Place your page content here -->
<StackLayout>
<Label text="Tap the button" class="title"></Label>
<Button text="TAP" (tap)="onTap()"></Button>
<Label [text]="message" class="message" textWrap="true"></Label>
</StackLayout>
<StackLayout>
<Button tap="openDrawer" text="ToggleDrawer"/>
</StackLayout>
</drawer:SideDrawer.mainContent>
<drawer:SideDrawer.drawerContent>
<StackLayout cssClass="drawerContent">
<StackLayout cssClass="headerContent">
<Label text="Drawer Header"/>
</StackLayout>
<StackLayout cssClass="drawerMenuContent">
<Label text="Item 1"/>
<Label text="Item 2"/>
<Label text="Item 3"/>
<Label text="Item 4"/>
</StackLayout>
</StackLayout>
</drawer:SideDrawer.drawerContent>
</drawer:SideDrawer>
`,
})
export class AppComponent {
public counter: number = 16;
public get message(): string {
if (this.counter > 0) {
return this.counter + " taps left";
} else {
return "Hoorraaay! \nYou are ready to start building!";
}
}
public onTap() {
this.counter--;
}
}
When I'm running this in my Emulator I'm getting a blank page. I'm using AngularJS2 with typescript & totally new to both these tools. So, can't able to understand what's I'm doing wrong.
Need some Guide.
nativescript-telerik-ui\listview and sidedrawer was before 2.0.0-rc.1 so they are currently working on it you can check this link - https://github.com/telerik/nativescript-ui-samples-angular/issues/1#issuecomment-225791969
if you are using beta version of angular then check this link to repository - https://github.com/telerik/nativescript-ui-samples-angular/tree/release/sdkAngular/app/sidedrawer
first of all: I am practicing with titanium, this are just my first "Hello World" apps to get confident with the framework, so any suggestion would be strongly appreciated.
I have this simple view:
<ScrollView id="grid" dataCollection="pictures">
<View class="single-item" title="{title}" author="{author}" desc="{desc}" onClick="showPic">
<ImageView class="thumb" image="/images/thumb-stock-1.jpg" />
<Label class="title" text="{title} by {author}" />
<Label class="desc" text="{desc}" />
</View>
</ScrollView>
Clicking on each item I call the function showPic() defined in my controller, and that's ok. But I would like to pass some parameters to that function, that are {title}, {author} and {desc}, so that I can handle them and "print" them on a new detail view for each specific item. With TableView it was easy (I just put: event.source -> title, event.source -> author ... inside my controller and I could read that table row data), but with my view that seems not work.
so my questions are:
1) how can I pass that parameters from VIEW: to CONTROLLER showPic()
2) generally speaking, if there is a better view to list some objects and opening each one with a click, just tell me how so that I can learn something more :D (PS: I cannot use tableView because my layout does not fit with this kind view)
---- EDIT: here follows my full code
index.xml:
<Alloy>
<Collection src="pictures"/>
<NavigationWindow id="navGroupWin">
<Window class="container" title="La mia galleria">
<View class="arrow arrow-up"><Label text="UP" /></View>
<ScrollView id="grid" dataCollection="pictures">
<View class="single-item" title="{title}" author="{author}" desc="{desc}" onClick="showPic">
<ImageView class="thumb" image="/images/thumb-stock-1.jpg" />
<Label class="title" text="{title} by {author}" />
<Label class="desc" text="{desc}" />
</View>
</ScrollView>
<View class="arrow arrow-down"><Label text="DOWN" /></View>
</Window>
</NavigationWindow>
</Alloy>
showPic from index.js:
function showPic(event) {
var pic = event.source;
var args = {
title: pic.title,
desc: pic.desc,
author: pic.author
};
var picView = Alloy.createController("detail", args).getView();
if (OS_IOS) {$.navGroupWin.openWindow(picView);}
if (OS_ANDROID) {picView.open();}
}
detail.xml:
<Alloy>
<Window class="container">
<View layout='vertical'>
<Label id="titleLabel"></Label>
<Label id="descLabel"></Label>
<Label id="authorLabel"></Label>
</View>
</Window>
</Alloy>
detail.js
var args = arguments[0] || {};
$.titleLabel.text = args.title || 'Default Title';
$.descLabel.text = args.desc || 'Default desc';
$.authorLabel.text = args.author || 'Default author';
when I click on each item of the index, my source.title, source.author and source.desc seems to be empty, and on the detail window I got back only 'Default' values
I am not sure if you can do this on the view file level.
What I would try is to assign ids to every view element (this is a general technique) and fully deploy all my click listeners inside the controller file, removing all onClick commands from view.
So:
Set id="myview" along with class="single-item" in your View
In your controller try
$.myview.addEventListener('click', function(e){
showPic(e.title, e.author, e.desc)
});
Not sure if it goes wrong somewhere else, but stripped down like this it works:
index.html
<Alloy>
<Window id="test">
<ScrollView id="grid" layout="vertical">
<View class="single-item" width="250" height="250" backgroundColor="blue" title="title" author="author" desc="desc" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="red" title="red" author="red" desc="red" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="yellow" title="yellow" author="yellow" desc="yellow" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="green" title="green" author="green" desc="green" onClick="showPic">
</View>
</ScrollView>
</Window>
</Alloy>
index.js
function showPic(event) {
Ti.API.info(JSON.stringify(event.source));
}
$.test.open();