Nativescript: Controlling sideDrawer logically

Question

Hi there people!

I'm trying to make a side drawer with Nativescript and Javascript that is shown over the navigation bar.

The package I'm using is Telerik Ui for Nativescript.

The fact is that even if I can make the drawer shown over the navigation bar when I use the slide gesture, I can't control it from a tap="function()" directive.

• This is the official documentation on action bars that are shown over the navigation

• This is the official documentation on logic control of the drawer

This is my code in main-page.xml (I use nativescript-telerik-ui which is the free version and not nativescript-telerik-ui-pro)

<dpg:DrawerPage loaded="pageLoaded" navigatedTo="onNavigatedTo"  
xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns="http://www.nativescript.org/tns.xsd">
<navigation.actionBar>
  <ActionBar title="Drawer Over Navigation" />
</navigation.actionBar>

<dpg:DrawerPage.sideDrawer>
<drawer:RadSideDrawer id="drawer">
  <drawer:RadSideDrawer.drawerContent>
    <StackLayout cssClass="drawerContent">
      <StackLayout cssClass="headerContent">
        <Label text="Navigation Menu"/>
      </StackLayout>
      <ScrollView>
        <StackLayout cssClass="drawerMenuContent">
          <Label text="Primary" cssClass="drawerSectionHeader" />
          <Label text="Social" cssClass="drawerSectionItem" />
          <Label text="Promotions" cssClass="drawerSectionItem" />
          <Label text="Labels" cssClass="drawerSectionHeader" />
          <Label text="Important" cssClass="drawerSectionItem" />
          <Label text="Starred" cssClass="drawerSectionItem" />
          <Label text="Sent Mail" cssClass="drawerSectionItem" />
          <Label text="Drafts" cssClass="drawerSectionItem" />
        </StackLayout>
      </ScrollView>
    </StackLayout>
  </drawer:RadSideDrawer.drawerContent>
</drawer:RadSideDrawer> 
</dpg:DrawerPage.sideDrawer>

<StackLayout cssClass="mainContent">
    <Label text="{{ exampleText }}" textWrap="true" cssClass="drawerContentText"/>
    <Button text="Toggle Drawer" tap="toggleDrawer" />
</StackLayout>
</dpg:DrawerPage>

And this is my main-page.js

var drawer;

exports.loaded = function(args) {
var page = args.object;
drawer = page.getViewById("drawer");
};
exports.toggleDrawer = function() {
drawer.toggleDrawerState();
};

The error I'm getting while tapping the Toggle Drawer Button (which executes the toggleDrawer() function) is the next:

TypeError: Cannot read property 'toggleDrawerState' of undefined.

Maybe you could help me guess what's going on here, because I'm pretty confused about this error right now.

Please tell me any additional info I could provide for making this issue clearer.

Thanks in advance! =)

Answer 1

I finally fixed it! My "loaded" directive in my .xml was calling pageLoaded() but that function doesn't exists! It is called loaded().

So I have to fix the "loaded" directive:

<dpg:DrawerPage loaded="loaded" navigatedTo="onNavigatedTo"  
xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns="http://www.nativescript.org/tns.xsd">

To reflect the function's name

exports.loaded = function(args) {
var page = args.object;
drawer = page.getViewById("drawer");
};

---

Or I can change the function's name to reflect the directive call (pageLoaded version)

<dpg:DrawerPage loaded="pageLoaded" navigatedTo="onNavigatedTo"  
xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns="http://www.nativescript.org/tns.xsd">

&

exports.pageLoaded = function(args) {
var page = args.object;
drawer = page.getViewById("drawer");
};

---

Thank you all for your help! =D

Answer 2

You can do this so that you will never depend on any global scope, as it will take object that you just tap on no matter what it is:

exports.toggleDrawer = function(args) {
    var drawer = args.object;
    drawer.toggleDrawerState();
};