Nativescript: Controlling sideDrawer logically

0
votes

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 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! =)

2
javascriptteleriknativescript
The problem is that you try to get the RadSideDrawer instance too early. To avoid this problem you should initialize the drawer on onNavigatedTo Page Event. You should just move this drawer = page.getViewById("drawer"); line in onNavigatedTo - Nikolay Tsonev
Thank you for your answer! =D I'm a bit confused here; my drawer definition is in my .js and my "onNavigatedTo" event is in my .xml. How could I tie them up together? - Gonzalo Diaz Ailan

2 Answers

1
votes

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();
};
0
votes

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