Sidedrawer nativescript is not for Nativescript core rather for Angular

nativescriptcore

#1

Hi all,
I am Newbie, I was going through this code: http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/SideDrawer/getting-started under “Binding properties on elements in the drawerContent and mainContent” which from my understanding not related to NativeScript core rather than with Angular.

So what would be the equivalent for that in nativscript?

Best regards
WS


#2

The link you have pointed is for NativeScript core only. If you have gone through the basics of NativeScript before touching Pro UI examples, it could be easier to differentiate.


#3

Well, thanks for your reply.
I tried to copy this:

export class GettingStartedViewModel extends Observable {
    constructor() {
        super();
        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. Swipe from left to open side drawer.");
    }

into my .js file but it said (VS code) it is used only in .ts files, so far I understood that .ts files are used with Angular, what am I missing?

Thanks
WS


#4

Dear Waleed,
This is definitely not the code for JS, but as Mr.Manoj suggested it is better to first go through NS tutorials.
Regarding your query for equivalent code for drawer, you can easily find it in NativeScript Playground.
Just drag and drop a drawer and you will see the standard code automatically added for you.

Here I have copied the code(from playground) for the Drawer definition in home-page.xml

<ActionBar title="Home" class="action-bar">
</ActionBar>
<GridLayout rows="*" height="1500px" xmlns:nsDrawer="nativescript-ui-sidedrawer">
	<nsDrawer:RadSideDrawer id="sideDrawer" rows="0">
		<nsDrawer:RadSideDrawer.drawerContent>
			<StackLayout backgroundColor="gray">
				<StackLayout height="56" style="text-align: center; vertical-align: center;">
					<Label text="Navigation Menu" />
				</StackLayout>
				<StackLayout>
					<Label text="Primary" padding="10" backgroundColor="lightgray" />
					<Label text="Social" padding="10" />
					<Label text="Promotions" padding="10" />
					<Label text="Labels" padding="10" backgroundColor="lightgray" />
					<Label text="Important" padding="10" />
					<Label text="Starred" padding="10" />
					<Label text="Sent Mail" padding="10" />
					<Label text="Drafts" padding="10" />
				</StackLayout>
				<Label text="Close" color="lightgray" padding="10" style="horizontal-align: center" tap="{{ onCloseDrawerTap }}" />
			</StackLayout>
		</nsDrawer:RadSideDrawer.drawerContent>
		<nsDrawer:RadSideDrawer.mainContent>
			<StackLayout>
				<Label text="{{ mainContentText }}" textWrap="true" fontSize="13" padding="10" />
				<Button text="Open Drawer" tap="{{ onOpenDrawerTap }}" margin="10" style="horizontal-align: left" />
			</StackLayout>
		</nsDrawer:RadSideDrawer.mainContent>
	</nsDrawer:RadSideDrawer>
</GridLayout>

Here is the code behind file “home-page.js” that assigns the view-model to the page’s binding context

var frameModule = require("ui/frame");
var HomeViewModel = require("./home-view-model");

var homeViewModel = new HomeViewModel();

function pageLoaded(args) {
  var page = args.object;
  page.bindingContext = homeViewModel;
}

exports.pageLoaded = pageLoaded;

Here is the view-model , home-view-model.js which contains the code that you have requested

var frame = require("ui/frame");
var observableModule = require("data/observable");

function HomeViewModel() {
  var viewModel = observableModule.fromObject({
    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. Swipe from left to open side drawer.",
    onOpenDrawerTap: function () {
        var sideDrawer = frame.topmost().getViewById("sideDrawer");
        sideDrawer.showDrawer();
    },
    onCloseDrawerTap: function () {
        var sideDrawer = frame.topmost().getViewById("sideDrawer");
        sideDrawer.closeDrawer();
    },

      
  });

  return viewModel;
}

module.exports = HomeViewModel;

PS : I am also a newbie and was able unable to share the playground link, so please bear with the lengthy post


#5

Thanks phcc, what I needed is the VM part, thanks a lot.

I just wonder, why on the getting started example for Nativescript, you have this Angular stuff … interesting…

Thanks again,
WS


#6

@Waleed.Seada JavaScript !== NativeScript Core

You have option to choose between TypeScript and JavaScript when you choose NativeScript Core. FYI, you can even do Angular development in JavaScript but it’s easy generally easy and recommended with TypeScript.

ES5 days are gone, now most platform uses ES6 with Babel kind of tools Or TypeScript which makes development and maintenance far better.

If you are not familiar with ES6 / TypeScript I would suggest to start there, time for an upgrade :slight_smile:


#7

Thanks Manojdcoder for the tip, can you give some links to start checking …:thinking:


#8

TypeScript docs itself should cover most you need to know about

https://www.typescriptlang.org/docs