I want to ask about the following:
I have 2 main frames;
app-root and dashboard.
app.js:
if (LS.getItem('Bearer') != null) {
application.run({ moduleName: "dashboard/root" });
} else {
application.run({ moduleName: "app-root" });
}
app-root.hxml
<Frame defaultPage="login/login" id="app-root"></Frame>
app.root is first frame, it hold login and signup pages.
dashboard frame:
Login page has login button, that on tap loads dashboard page
var frameModule = require('ui/frame');
frameModule.topmost().navigate("dashboard/root");
And right now, dashboard frame is loaded. Dashboard frame has some bottom navigation that is every present and used as navigation between pages.
I also have logout button in the dashboard, that clears some data, and then navigates to login page .
And now my question / issue is - > in the login page i see dashboard's botton navigation in this page, this means that i've done something wrong i guess. As i assume that Main frame is dashboard, but why not login page ? Is there a way to "unload " dashboard frame maybe, before navigating to login page ? Of course if i slose the app and run again, logijn page looks well, there is no any dahsboard's frame elements...
Thank you for advice.
dashboard:
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="load" id="test" >
<GridLayout rows="*,60" class="c1" id="nawRows">
<Frame defaultPage="dashboard/dashboard/dashboard/" id="dashboard" class="c2"></Frame>
<GridLayout row="1" class="xx">
<StackLayout verticalAlignment="bottom" row="2" class="bottom-nav">
<GridLayout rows="*" columns="*,*,*,*,*,*" height="70" id="main-ic0">
<Label class="icon0 foot-icon" row="0" col="0" tap="{{ loadPage }}" data-id="0" id="ico0"></Label>
<Label class="icon1 foot-icon" row="0" col="1" tap="{{ loadPage }}" data-id="1" id="ico1"></Label>
<Label class="icon2 foot-icon" row="0" col="2" tap="{{ loadPage }}" data-id="2" id="ico2"></Label>
<Label class="icon3 foot-icon" row="0" col="3" tap="{{ loadPage }}" data-id="3" id="ico3"></Label>
<Label class="icon5 foot-icon" row="0" col="4" tap="{{ loadPage }}" data-id="5" id="ico4"></Label>
<Label class="icon4 foot-icon" row="0" col="5" tap="{{ loadPage }}" data-id="4" id="ico5"></Label>
</GridLayout>
</StackLayout>
</GridLayout>
I think while logging out you must be using a wrong frame for navigating to login page. Get your app-root frame and navigate to login page within that.
frame.getFrameById('app-root').navigate('/path/to/login', { clearHistory: true });
Related
I'm getting:
Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
My UI performance is very crappy on Android. It seems pretty smooth on iOS. I'm trying to figure out what could be the issue. This one error crops up for me. I'm running "nativescript-angular": "^8.0.0",
<ScrollView [visibility]="isBusy ? 'collapsed' : 'visible'" #sv>
<GridLayout rows="auto,auto,auto,auto" id="t2" columns="*" class="template_body">
<GridLayout row="0" col="0" #wv1wrapper>
<!-- <web-view id="instruction-wv" #wv1></web-view> -->
<template-text [data]="lessonDetail.instruction" *ngIf="lessonDetail.instruction" [screenwidth]="screenWidth"></template-text>
</GridLayout>
<StackLayout row="1" col="0" class="main-img">
<Image [src]="(lesson$ | async)?.thumbUrl" #imgref [data-image]="(lesson$ | async)?.imageUrl" (tap)="modalImage($event);"></Image>
</StackLayout>
<GridLayout row="2" col="0" #wvwrapper>
<!-- <web-view id="wv" #wv></web-view> -->
<template-text [data]="lessonDetail.body_text" [version]="version" *ngIf="lessonDetail.body_text" [screenwidth]="screenWidth"></template-text>
</GridLayout>
</GridLayout>
This is a template that is pulled into a router-outlet that looks like this in the master template:
<FlexboxLayout class="contentbody" [visibility]="isBusy ? 'hidden' : 'visible'" [data-template]="template_id">
<Label [text]="error" *ngIf="error"></Label>
<router-outlet></router-outlet>
</FlexboxLayout>
Also on that page, I do have a listview inside of a stacklayout.
<StackLayout row="0" >
<StackLayout class="vocab-notes">
<Label *ngIf="vocabArray" class="h3 section-title" text="Vocabulary"></Label>
<ListView [items]="vocabArray" id="vocablistview" (itemTap)="onItemTap($event)" class="list-items">
<ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
<GridLayout columns="*" rows="auto,auto" [class.odd]="odd" [class.even]="even" class="vocab-list">
<FlexboxLayout col="0" row="0" class="vocab-list-item-layout">
<Label [text]='item.label' textWrap="true" [id]="item.id" class="h3 vocab-list-item" (tap)="showVocab($event)"></Label>
</FlexboxLayout>
</GridLayout>
</ng-template>
</ListView>
</StackLayout>
I know its late for you but if someone is looking for this in future, so if you are getting below in console on any page you load.
JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
You just need to give your scrollView a height, try different heights like in my case I need 650
<Page class="main" actionBarHidden="true">
<StackLayout class="gradient-bg">
<ScrollView orientation="vertical" height="650"> <!-- Here height is 650 -->
<StackLayout>
<GridLayout rows="50" class="page-header">
<Label
row="0"
class="fa label-back"
:text="'fa-arrow-left' | fonticon"
v-on:tap="navigateTo('app')"
/>
<Label text="Plot Suggestion" row="0" class="lbl-heading" horizontalAlignment="center" />
...
...
native script rad-list-view not detecting whether swiping up or swiping down the item list.
by using native script swipe event one will get 4 values for left, right, top, and bottom i.e 1,2,4,8. but swipe action is not working on rad-list-view.
<lv:RadListView pullToRefresh="true" pullToRefreshInitiated="{{onPullToRefreshInitiated}}"
scrolled="onScrolled" scrollOffset="scrollOffset" scrollStarted="onScrollStarted" scrollEnded="onScrollEnded"
id="id_content" row="1" items="{{ source }}" loaded="onLoaded" backgroundColor="transparent"
itemLoading="onItemLoading" itemTap="onItemTap">
<lv:RadListView.itemTemplate>
<StackLayout orientation="vertical"
backgroundColor="antiquewhite" margin="5" padding="10" borderWidth="1">
<Label fontSize="20" text="{{ name }}"/>
<Label fontSize="14" text="{{ name }}"/>
</StackLayout>
</lv:RadListView.itemTemplate>
<lv:RadListView.listViewLayout>
<lv:ListViewStaggeredLayout scrollDirection="Vertical" spanCount="2"/>
</lv:RadListView.listViewLayout>
<lv:RadListView.pullToRefreshStyle>
<lv:PullToRefreshStyle indicatorColor="red" indicatorBackgroundColor="antiquewhite"/>
</lv:RadListView.pullToRefreshStyle>
</lv:RadListView>
</GridLayout>
how to detect swipe up or down event on radlistview.
Compare the scrollOffset between scrollStarted and scrollEnded event, if start position is less than end position, then user has scrolled up, down otherwise.
let lastOffset;
export function onScrollStarted(args) {
lastOffset = args.object.getScrollOffset();
}
export function onScrollEnded(args) {
let currentOffset = args.object.getScrollOffset();
console.log(currentOffset < lastOffset ? "Up" : "Down");
lastOffset = currentOffset;
}
Playground Sample
I'm developing some app made on nativescript. Recently, i see that my app is more like website not an app, beacuse of how navigation works.
I'm having bottom nav (atached - this grey with 5 icons) that is used to load proper views.
But when i click on home or any other icon, new view is loaded, but also nav is 'reloaded'. So it will not stay in place but load with new view. My question is - is possible oto have static botom bar ? I've tried 2 plugins found on marketplace, but without success. Thanks for and help.
<Page class="page" loaded="loaded" xmlns:header="components/header" xmlns:footer="components/footer">
<GridLayout rows="120,*,60">
<StackLayout row="0">
<!-- Common header -->
<header:header/>
</StackLayout>
<ScrollView row="1" verticalAlignment="top" class="scrollview" tap="{{ loadPage }}">
<StackLayout class="redeem">
<Label text="Enter your code below to redeem your reward" class="info" textWrap="true"></Label>
<Label text="Code" class="info code" textWrap="true"></Label>
<TextField />
<Button text="Redeem" class="button blue"></Button>
</StackLayout>
</ScrollView>
<StackLayout row="2">
<!-- Common footer -->
<footer:footer/>
</StackLayout>
</GridLayout>
</Page>
:
<AbsoluteLayout class="footer" loaded="menu" horizontalAlignment="center" xmlns:sd="nativescript-ui-sidedrawer">
<GridLayout rows="auto" columns="*,*,*,*,*" horizontalAlignment="center">
<Label row="0" col="0" class="fa" text="" tap="{{ mainPage }}"></Label>
<Label row="0" col="1" class="fa" text="" tap="{{ creditPage }}"></Label>
<Label row="0" col="2" class="fa" text="" tap="{{ seatPage }}"></Label>
<Label row="0" col="3" class="fa" text="" tap="{{ refs }}"></Label>
<Label id="openMenu" row="0" col="4" class="fa" text="" tap="toggleDrawer"></Label>
<!--<Label id="openMenu" row="0" col="4" class="fa" text="" tap="{{ loadPage }}"></Label>-->
</GridLayout>
</AbsoluteLayout>
You could use DockLayout and dock the content to the bottom (Angular example here)
Also in the upcoming release 4.0.0 of NativeScript (expected April-2018) will provide support for different root views (apart from Page) meaning you could create bottom static layout like GridLayout or even better a bottom TabView (also coming for Android in 4.0.0) and create Frame in the upper layout for your dynamic content. (Look here)
I would like to implement a static content in my Page to show some values just before showing the RadListView provided by Telerik. This is my code example:
<lv:RadListView items="{{ dataItems }}" row="1" selectionBehavior="Press" itemSelected="onItemSelected">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical"/>
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate>
<StackLayout orientation="vertical">
<Label fontSize="20" text="{{ itemName }}"/>
<Label fontSize="14" text="{{ itemDescription }}"/>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
I am trying to add a Label just before the RadListView like this:
<StackLayout>
<Label text="Listview Header!!!" />
</StackLayout>
I am trying to make the Label non-scrollable.
Once I change my code, nothing shows up in the page, any idea?
Thanks!
You need one main layout for this route/page. There can only be one child to the page (I know there's no page in NativeScript angular) but try adding a stack then placing what you have inside that one stack and it shouldn't work.
I have a drawer in my Dashboard page and every Label is being clipped, I have tried different things but no luck :(
This is my Drawer code:
<!-- >> sidedrawer-over-navigation-drawer -->
<dpg:DrawerPage.sideDrawer>
<drawer:RadSideDrawer id="mainMenuDrawer" gesturesEnabled="true">
<drawer:RadSideDrawer.drawerContent>
<GridLayout rows="75, *" columns="300" class="mainMenuContent">
<StackLayout row="0" verticalAlignment="middle" horizontalAlignment="center">
<Label text="Main Menu" class="mainMenuHeader" />
</StackLayout>
<lv:RadListView items="{{ menuItems }}" row="1" class="mainMenuItems">
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical"/>
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate>
<GridLayout rows="50" columns="50, *" class="mainMenuItems">
<Label class="fa mainMenuItemIcon" col="0" text="{{ icon | fonticon }}" horizontalAlignment="center" verticalAlignment="middle" />
<Label class="mainMenuItemLabel" col="1" text="{{ title }}" horizontalAlignment="left" verticalAlignment="middle" />
</GridLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
</GridLayout>
</drawer:RadSideDrawer.drawerContent>
</drawer:RadSideDrawer>
</dpg:DrawerPage.sideDrawer>
<!-- << sidedrawer-over-navigation-drawer -->
In the image you will see what is going on.
Any idea what is going on?
Thanks!!!
Always use <Label textWrap="true" to make those babies fit.
Try setting those labels to a width of a 100% or some width long enough to fit all your text. that will fix them truncating
There is no verticalAlignment="middle". Its top, center, bottom or stretch. This may affect your labels.
Also try removing the root GridLayout columns="300".
Your alignment at the main menu is redundant, try to use vertical alignment instead and customize the size of columns of the GridLayout. Example:
<GridLayout rows="50" columns="50, *" class="mainMenuItems">
set columns="(set column size) , (set column size) ".