I'm trying to build a rudimentary app to learn the basics and I'm stumbling on the most basic part- navigation. I keep getting the error-
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onClick failed
System.err: Error: Failed to load component from module: ../home/home-view
I've organized my code into folders as follows-
app/
app-root.xml
app.css
app.js
views/
main/
main-page.xml
main-page.js
home/
home-view.xml
home-view.js
main-page.xml -
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="setupMain" class="page">
<ActionBar title="My Simple App" icon="" class="action-bar"/>
<StackLayout>
<Button text="Sign in" class="btn btn-primary btn-rounded-sm " tap="navToHome" />
</StackLayout>
</Page>
main-page.js -
export function setupMain(args) {
const page = args.object
alert(args.object);
}
export function navToHome(args){
const button = args.object
const page = button.page
alert('button: ', button, '\npage; ', page)
page.frame.navigate('../home/home-view')
}
home-view.xml-
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingToHome" class="page">
<ActionBar title="Home" icon="" tap="goToMain" />
<StackLayout>
<Button text="Back" backgroundColor="darkgray" tap="navBack" />
</StackLayout>
</Page>
home-view.js-
export function setupHome(args) {
const page = args.object
/* page.bindingContext = createViewModelHome()*/
}
export function navBack(args){
const button = args.object
const page = button.page
alert('button: ', button, '\npage; ', page)
page.frame.goBack()
}
I'm not sure why it's failing to load from the home-view page. Tutorials haven't been much help.
What am I doing wrong here? What am I missing? Any help would be greatly appreciated.
Figured it out. No need to traverse up the folder path
page.frame.navigate('../home/home-view')
removed the "../" and changed it to "views/" and it works.
page.frame.navigate('views/home/home')
Related
I'm getting the following error.
LOG from device Savas: An uncaught Exception occurred on "main" thread.
Calling js method onClick failed
Error: Building UI from XML. #purchase/page.xml:3:5
Module 'nativescript-drop-down' not found for element 'nativescript-drop-down:DropDown'.
Cannot read property 'setNative' of undefined
StackTrace:
ScopeError(file:///data/data/org.nativescript.preview/files/app/tns_modules/#nativescript/core/utils/debug.js:63:24)
at SourceError(file:///data/data/org.nativescript.preview/files/app/tns_modules/#nativescript/core/utils/debug.js:74:23)
My source code:
Xml File
<!--
`<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:dd="nativescript-drop-down">
<GridLayout rows="auto, auto, *" columns="auto, *">
<dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}"
opened="dropDownOpened" closed="dropDownClosed"
selectedIndexChanged="dropDownSelectedIndexChanged"
row="0" colSpan="2" />
<Label text="Selected Index:" row="1" col="0" fontSize="18" verticalAlignment="bottom"/>
<TextField text="{{ ad }}" row="1" col="1" />
</GridLayout>
</Page>`
-->
Js File
const fromObject = require("tns-core-modules/data/observable").fromObject;
exports.pageLoaded = function (args) {
const items = [];
items.push({
ad: "Batman"
});
items.push({
ad: "Joker"
});
items.push({
ad:"Bane"
});
const page = args.object;
const vm = fromObject({
items: items
});
page.bindingContext = vm;
}
Sorry to ask the obvious, but you did install the plug-in, yes?
tns plugin add nativescript-drop-down
I am trying to create a custom component as described here in order to reuse the action bar and its logic in different places of my app.
Here is what I have setup the component:
/components/header/header.xml
<ActionBar title="Title" class="{{ 'mode' == dark ? 'bg-dark' : 'bg-white' }}" loaded="loaded">
</ActionBar>
/components/header/header.ts
exports.loaded = (args) => {
let page = <Page> args.object;
let pageObservable = new Observable({
'mode' : page.get('mode')
});
page.bindingContext = pageObservable;
}
I then try to use the component calling it like this :
some_view.xml
<Page
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:header="components/header">
<header:header mode="dark"/>
<StackLayout>..</StackLayout>
...
</Page>
However, navigating to `some-view.xml' I get the following error:
Calling js method onCreateView failed
TypeError: Cannot read property frame of 'undefined'
File "data...../ui/action-bar/action-bar.js" line: 146
Am I doing something wrong?
Have you succeded in creating a custom component based on ActionBar?
Perhaps the problem is that you are trying to get Page instance in the loaded method in your /components/header/header.ts file. args will return you reference to the ActionBar instead of Page. On other hand while using TypeScript the events should be defined like this export function loaded(args){...}. In the above-given code you are using JavaScript syntax. I am attaching sample code, where has been shown, how to create custom component.
component/action-bar/action-bar.xml
<ActionBar loaded="actionbarLoaded" title="Title" icon="">
<NavigationButton text="Back" icon="" tap="" />
<ActionBar.actionItems>
<ActionItem icon="" text="Left" tap="" ios.position="left" />
<ActionItem icon="" text="Right" tap="" ios.position="right" />
</ActionBar.actionItems>
</ActionBar>
component/action-bar/action-bar.ts
export function actionbarLoaded(args){
console.log("actionbar loaded");
}
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" xmlns:AB="component/action-bar">
<Page.actionBar>
<AB:action-bar />
</Page.actionBar>
<StackLayout>
<Label text="Tap the button" class="title"/>
<Button text="TAP" tap="{{ onTap }}" />
<Label text="{{ message }}" class="message" textWrap="true"/>
</StackLayout>
</Page>
main-page.ts
import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
// Get the event sender
let page = <Page>args.object;
page.bindingContext = new HelloWorldModel();
}
I have setup a custom tab view defined as the following :
main.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded"
xmlns:t1="partial-views/explore"
xmlns:t2="partial-views/community">
<!--ACTION BAR-->
<ActionBar title="Haloose">...</ActionBar>
<StackLayout>
<!-- TABS -->
<StackLayout id="sl_main">
<t1:explore id="tab_explore" visibility="{{ currentActive == 'explore' ? 'visible' : 'collapsed' }}" />
<t2:community id="tab_community" visibility="{{ currentActive == 'community' ? 'visible' : 'collapsed' }}"/>
</StackLayout>
<-- FIXED MENU -->
<GridLayout id="menu">
<Image tap="changeVisibleTab"/>
<Image tap="changeVisibleTab" />
</GridLayout>
</StackLayout>
</Page>
Let's call this file main.xml . It's associated to a main.js where I've defined a binding context:
main.js
exports.loaded = function(args){
page = args.object;
//Set Up page view model
mainObservable = new Observable({
currentActive:"explore",
menuItemsArray:[
new MenuItem("explore"),
new MenuItem("community")
]
});
//Bind page to view model
page.bindingContext = mainObservable;
}
For each tab I have a folder containing a js , css and xml file.
A sample tab.xml file would look like this :
tab.xml
<StackLayout loaded="tabLoaded" > <looots of stuff /> </StackLayout>
Everything works as expected, however if I try to bind the stack layout to an object , all of the UI elements are hidden.
If I remove binding, I can see them again.
not working tab.js
var Observable = require("data/observable").Observable;
var profile;
exports.tabLoaded = function(args){
profile = args.object;
var profileBinding = {
username : "Aaron Ullal"
}
profile.bindingContext = profileBinding; //removing this line makes elements visible
}
What is causing this? Perhaps multi level binding is not supported?
When you use custom XML components, like your tabs, and add bindings to them (in your case the visibility binding, those bindings are basically applied to the root tag in your XML component. So when you change the binding context in your tab.js the visibility binding starts looking for a currentActive property in profileBinding. In order to achieve what you want you have to wrap your tab XML in another layout, like this:
<StackLayout>
<StackLayout loaded="tabLoaded" >
<!--looots of stuff -->
</StackLayout>
</StackLayout>
It should work as expected then.
Is there a way to make a view 'transparent' to any user interactions? For example I have a view (with transparent background) and a button under that view. I want the user could tap the button under that view. If I have a scroller view under that view I want the user interacts with scroller when scroll over that view, so the view doesn't interfere or intercept user's gestures. But only this view should be transparent to user's interactions not its children. So, if I have a button inside that view it behaves normally.
Example XML:
<AbsoluteLayout width="100%" height="100%">
<Button text="Button1" tap="onTap1" />
<GridLayout width="100%" height="100%" backgroundColor="transparent">
<Button text="Button2" tap="onTap2" horizontalAlignment="center" verticalAlignment="center"/>
</GridLayout>
</AbsoluteLayout>
Thank you for your help.
You have multiple approaches to make a view change its color in NativeScript.
For example you can directly change its backgroundColor. Another oiption is to use animation and third option is to use CSS-animation.
Here is a basic example for the first two options.
page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<StackLayout>
<GridLayout width="300" height="300" id="myGrid" backgroundColor="transparent">
</GridLayout>
<Button text="Tap me" tap="onTap" />
<Button text="Or Tap me" tap="onAnotherTap" />
</StackLayout>
</Page>
page.js
import { EventData } from "data/observable";
import { Page } from "ui/page";
import { HelloWorldModel } from "./main-view-model";
import { GridLayout } from "ui/layouts/grid-layout";
import { Color } from "color";
var myGridView;
export function navigatingTo(args: EventData) {
var page = <Page>args.object;
page.bindingContext = new HelloWorldModel();
// get refference to the view using its id
myGridView = <GridLayout>page.getViewById("myGrid");
}
export function onTap(args:EventData) {
var color = new Color("#FF0000");
myGridView.backgroundColor = color;
}
export function onAnotherTap(args:EventData) {
myGridView.animate({
backgroundColor: new Color("#3D5AFE"),
duration: 3000
});
}
All of the options can be found described in NativeScript documenation
I am using telerik ui for native script. I need a toggle button at top to open the side menu. but I am not able to call the Showdrawer() as per the docs.
What I need is on button click side menu should open. I tried calling RadSideDrawer.prototype.showDrawer(), but failed.
Is there any other side menu available for Nativescript?
main-page.xml
<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:drawer="nativescript-telerik-ui/sidedrawer" loaded="pageLoaded">
<Page.actionBar>
<ActionBar>
<android>
<NavigationButton text="Go Back" android.systemIcon="ic_menu_moreoverflow" tap="showSideDrawer" />
</android>
</ActionBar>
</Page.actionBar>
<drawer:RadSideDrawer>
<drawer:RadSideDrawer.mainContent>
<StackLayout>
<Label text="{{ mainContentText }}" textWrap="true" />
</StackLayout>
</drawer:RadSideDrawer.mainContent>
<drawer:RadSideDrawer.drawerContent>
<StackLayout cssClass="drawerContent" style="background-color:white;">
<StackLayout cssClass="headerContent">
<Label text="Header" />
</StackLayout>
<StackLayout cssClass="drawerMenuContent">
<Label text="Item 1" style="color:black;" />
<Label text="Item 2" style="color:black;" />
<Label text="Item 3" style="color:black;" />
<Label text="Item 4" style="color:black;" />
</StackLayout>
</StackLayout>
</drawer:RadSideDrawer.drawerContent>
</drawer:RadSideDrawer>
</Page>
getting-started-model.js
var observableModule = require("data/observable");
var GettingStartedViewModel = (function (_super) {
__extends(GettingStartedViewModel, _super);
function GettingStartedViewModel() {
_super.call(this);
this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
+ " has a default transition and position and also exposes notifications related to changes in its state.");
}
return GettingStartedViewModel;
})(observableModule.Observable);
exports.GettingStartedViewModel = GettingStartedViewModel;
function showSideDrawer(args) {
console.log("Show SideDrawer tapped.");
// Show sidedrawer ...
_super.prototype.showDrawer.call(this);
}
exports.showSideDrawer = showSideDrawer;
main page.js
var viewModelModule = require("./getting-started-model");
function pageLoaded(args) {
console.log("Page loaded");
var page = args.object;
page.bindingContext = new viewModelModule.GettingStartedViewModel();
}
exports.pageLoaded = pageLoaded;
You can take a look at this SDK examples that show the main functionality of the RadSideDrawer. As mentioned by #R Pelzer all you need to do is get the instance of the RadSideDrawer for example by using its id:
import drawerModule = require("nativescript-telerik-ui-pro/sidedrawer");
import frameModule = require("ui/frame");
var sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>(frameModule.topmost().getViewById("sideDrawer"));
and call its showDrawer() method:
sideDrawer.showDrawer();
Are you calling the showSideDrawer function from code you didn't post? Are you sure you linked the tap button?
<Button tap="showSideDrawer" text="ToggleDrawer"/>
Maybe you can try to give the sideDrawer an Id and use this code.
var drawer = frameModule.topmost().getViewById("sideDrawer");
drawer.showDrawer();
You are getting undefined because no id was assigned to the drawer so to fix your problem assign an id to the sideDrawer <drawer:RadSideDrawer id="sideDrawer"> then you can call
var frame = require('ui/frame');
var drawer = frame.topmost().getViewById("sideDrawer");
function showSideDrawer(){
drawer.showDrawer(); // i prefer using .toggleDrawerState();
};
In my case, I missed inserting , as a result, there was a missing component when toggleDrawer was being called hence the error "TypeError: Cannot read property 'toggleDrawerState' of undefined".
Try inserting all the body component of the xml file in this might solve the issue.
Happy coding :))