NativeScript cheatsheet and notes

General › Nativescript
,
637 words, 3 mins

Just starting off with a NativeScript application and the documentation is all over the place. So this is a place for my notes and kind of a cheat sheet while I’m learning the system. (As I start this, nativescript is at 1.6.2)

Creating the app »

Each page is an instance of page class from Page module. If created in XML, the XML file must have same name as the js file. If created in code, use the createPage() factory function.

The Frame class contains the pages and is responsible for navigating between pages, using the navigate method. Use topmost() to get the root level Frame. Pass a navigationEntry object to the navigate method (optional). This can pass many different options such as transitions etc.

Use page.showModal to show modal pages.

Screen sizes and qualifiers

Screen size qualifiers are used: minWH[X], minW[X] or minH[X] in the form main-page.minWH600.xml. There are 160dp per inch so 600 is about 3.75in.

There are also platform qualifiers: app.android.css or app.ios.css for example. And orientation qualifiers: land or port.

Application »

Here is the basic application start up in app.js with a lifecycle event:

1
2
3
4
5
var application = require("application");
application.on(application.suspendEvent, function(args) {
// do something here
} );
application.start({ moduleName: "main-page" });

Lifecycle events, set before the start method, are:

  • launch
  • suspend
  • resume
  • exit
  • lowMemory
  • uncaughtError
    There are also Android specific Activity Events and iOS UIApplicationDelegate’s that can be set here.

For saving application settings, use:
var applicationSettings = require("application-settings");

Modules »

There are a lot… a quick look in the tns_modules will give an overview.

The core modules are:

  • application
  • console
  • application-settings
  • http - web requests and responses (see also fetch)
  • image-source - ImageSource class
  • timer
  • trace
  • ui/image-cache - Image caching
  • connectivity - check and monitor the internet connection

    Data binding

Properties »

There are dependency properties and style properties.

Dependency properties derive from DependencyObservable. They allow us to override changed notifications, validation and others.

Style properties are used for applying styles and themes to UI components. Typical example:

1
2
var color = require("color");
someButton.style.backgroundColor = new color.Color("red");

If I understood correctly, Properties (dependency or style) are only for visual elements.

Events »

Events are handled by the Observable base class. Here is an example of the short syntax:

1
2
3
testButton.on(buttonModule.Button.tapEvent, function (eventData) {
console.log("Hello World!");
},this);

The long syntax has a separately defined function.

Event listeners can also be removed, normally not needed but if, for example, in a scrolling view where elements will disappear off screen, it is useful. A better model is to use WeakEventListeners.

Layouts »

  • StackLayout(str:orientation)
  • WrapLayout(str:orientation, int:itemWidth, int:itemHeight)
  • AbsoluteLayout(int:left, int:top)
  • DockLayout(bool:stretchLastChild)
  • GridLayout(int:column, int:columnSpan, int:row, int:rowSpan)

Dialogs »

  • Alert
  • Confirm
  • Prompt
  • Login
  • Action

Order of event loading

For a Page:

  • SRC: navigatingFrom
  • DST: navigatingTo
  • SRC: navigatedFrom
  • SRC: unloaded
  • DST: loaded(args)
  • DST: navigatedTo

For a Page.showModal(‘screenName’, ‘’, callback)

  • Modal: loaded(args)
  • Modal: showingModally
  • Modal: shownModal(args)

and on close:

  • Modal: unloaded

Notes:

The loaded(args) event doesn’t appear to be called for the Modal pages. I’ve had to use the shownModal event.

Logging

1
2
3
4
5
6
7
8
9
10
11
console.log("Hello, world!");
console.info("I am NativeScript");
console.warn("Low memory");
console.error("Uncaught Application Exception");
console.assert( 2 === 2, "2 equals 2");
console.dir(obj);
console.dump(obj);
console.trace();

console.time("Load Time")
console.timeEnd("Load Time")

Debugging

Run tns debug android --debug-brk to things started, then open Chrome and go to http://127.0.0.1:8080/debug?port=40000. The debug port can be found with tns debug android --get-port

Putting the command debugger; in a nativescript .js file will stop the program at that point until you’ve attached with tns debug android --start