Getting started fails -

3 posts, 1 answers
  1. Narayanan
    Narayanan avatar
    4 posts
    Member since:
    Oct 2016

    Posted 10 Nov 2016 Link to this post

    Created an APP and added the plugin. What am I missing ? 

    Error occurs on simple hello world .

    An uncaught Exception occurred on "main" thread.
    java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.radSideDrawer/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
    Calling js method onCreate failed
     
    [object Object]
    File: "/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js, line: 162, column: 20
     
    StackTrace:
        Frame: function:'', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js', line: 162, column: 21
        Frame: function:'', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/xml/xml.js', line: 148, column: 13
        Frame: function:'EasySAXParser.parse', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/js-libs/easysax/easysax.js', line: 751, column: 23
        Frame: function:'XmlParser.parse', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/xml/xml.js', line: 195, column: 22
        Frame: function:'XmlStringParser.parse', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js', line: 168, column: 27
        Frame: function:'parseInternal', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js', line: 43, column: 11
        Frame: function:'loadInternal', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js', line: 120, column: 27
        Frame: function:'load', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/builder/builder.js', line: 104, column: 27
        Frame: function:'pageFromBuilder', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/frame/frame-common.js', line: 111, column: 27
        Frame: function:'resolvePageFromEntry', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/frame/frame-common.js', line: 89, column: 20
        Frame: function:'Frame.navigate', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/frame/frame-common.js', line: 165, column: 20
        Frame: function:'ActivityCallbacksImplementation.onCreate', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/frame/frame.js', line: 690, column: 19
        Frame: function:'NativeScriptActivity.onCreate', file:'/data/data/org.nativescript.radSideDrawer/files/app/tns_modules/ui/frame/activity.js', line: 12, column: 25
     
     
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726)
        at android.app.ActivityThread.-wrap12(ActivityThread.java)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477)
        at android.os.Handler.dispatchMessage(Handler.java:102)
        at android.os.Looper.loop(Looper.java:154)
        at android.app.ActivityThread.main(ActivityThread.java:6119)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
    Caused by: com.tns.NativeScriptException:
    Calling js method onCreate failed

    MainPage.xml

    <navigation:ExampleDrawerPage xmlns:navigation="navigation/example-drawer-page" loaded="pageLoaded"
        navigatedTo="onNavigatedTo" 
        xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
        xmlns:drawer="nativescript-telerik-ui/sidedrawer"
        <navigation.actionBar>
            <ActionBar title="Getting started" />
        </navigation.actionBar>
     
        <dpg:DrawerPage.sideDrawer>
            <drawer:RadSideDrawer id="sideDrawer">
              <drawer:RadSideDrawer.drawerContent>
                <StackLayout cssClass="drawerContent">
                  <StackLayout cssClass="headerContent">
                    <Label text="Navigation Menu"/>
                  </StackLayout>
                  <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>
                </StackLayout>
              </drawer:RadSideDrawer.drawerContent>
            </drawer:RadSideDrawer>
        </dpg:DrawerPage.sideDrawer>
     
        <StackLayout >
          <Label text="{{ mainContentText }}" textWrap="true" cssClass="drawerContentText"/>
        </StackLayout>
        </navigation:ExampleDrawerPage>

     

    main-view-model.js

    var observableModule = require("data/observable");
    var frame = require("ui/frame");
    var drawerModule = require("nativescript-telerik-ui/sidedrawer");
     
    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. Swipe from left to open side drawer.");
        }
        return GettingStartedViewModel;
    }(observableModule.Observable));
    exports.GettingStartedViewModel = GettingStartedViewModel;

     

    main-page.js

    var createViewModel = require("./main-view-model").createViewModel;
     
    function onNavigatingTo(args) {
        var page = args.object;
        page.bindingContext = createViewModel();
    }
    exports.onNavigatingTo = onNavigatingTo;

     

  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    145 posts

    Posted 11 Nov 2016 Link to this post

    Hello Narayanan,

    The sample you are referring to can be found in this sample application and is working as expected with nativeScript 2.3.0. Here is a direct link to the getting started sample itself.
    Now, if you are trying to recreate this side drawer example in your application there are reasons which could lead to the described error. 

    Notice that in the example the main container is not the common Page but navigation:ExampleDrawerPage.
    The sample application is creating this custom page controller here. Without it, you should create your application with the NativeScript module Page in order for the example to work.

    However, the error itself suggest that the reason for it might be different.
    Are you using the latest version of NativeScript in your project and also the latest version of nativescript-telerik-ui. To make sure that everything in your package.json is expected take a look at this configuration.
    You can execute the following command to update your package.json with the proper versions.

    tns plugin remove tns-core-modules
    tns plugin add tns-core-modules
     
    tns plugin remove tns-core-modules-widgets
    tns plugin add tns-core-modules-widgets
     
    tns plugin remove nativescript-telerik-ui
    tns plugin add nativescript-telerik-ui

    Those commands will remove the currently installed versions and will install the latest stable ones. (respectively 2.3.0 for modules and 1.4.1 for telerik-ui)

    You should also verify that you are using the 2.3.0 versions of the runtime
    rm -rf node_modules
    rm -rf platforms
    tns platform add android
    tns run android

    At the end, your package.json should look like this 
    "nativescript": {
      "id": "org.nativescript.myAppName",
      "tns-android": {
       "version": "2.3.0"
      }
    },
    "dependencies": {
      "nativescript-telerik-ui": "1.4.1",
      "tns-core-modules": "2.3.0"
    }


    I hope the described steps will help you sort out your issue. However, if you need additional help do not hesitate to contact us - you can send us your test application with a GitHub link or via archive here so we could easily reproduce your error locally.


    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Narayanan
    Narayanan avatar
    4 posts
    Member since:
    Oct 2016

    Posted 12 Nov 2016 in reply to Nikolay Iliev Link to this post

    Hi Nikolay,

    Your answer did help me. This is what I did it to work. No one I did not have the navigation folder itself. 

    1) Copy the navigation folder under apps. 

    2) I have to 
    tns install typescript

    3) I installed "nativescript-telerik-ui", so corrected "nativescript-telerik-ui-pro" to "nativescript-telerik-ui".

    4) I saw this error, since I do not have ios for now. So I commented. the code.

    app/navigation/options-menu/options-model.ts(32,65): error TS2304: Cannot find name 'NSIndexPath'.

    5) Also saw the app failed at with message saying cannot read property of undefined "title".So I hardcoded. 

      // actionBar.title = this._associatedExampleMeta.title;
        actionBar.title = "Getting started" ;

    And now it worked. 

    Thanks again.

    Narayan

     

Back to Top