Files
NativeScript/tns-core-modules/ui/frame
Panayot Cankov 1cbb1e8d0d feat(webpack): mark the CSS type for stylable views explicitly (#5257)
We want webpack's uglification to mangle function and class names
but that's what the current implementation of the CSS in {N} relys on
to get the CSS type for each view when targeted by CSS type selectors.

The implementation is changed a little so now the CSS type can be set
directly on the prototype of each View class or for TS, through decorator.

BREAKING CHANGES:


Extending classes requires marking the derived class with @CSSType
The root classes are not marked with CSSType and classes derived from ViewBase and View
will continue to work as expected. More concrete view classes (Button, Label, etc.) are
marked with @CSSType now and store their cssType on the prototype suppressing the previous
implementation that looked up the class function name. So clien classes that derive from one of
our @CSSType decorated classes will now have to be marked with @CSSType.
2018-03-12 16:34:25 +02:00
..
2016-05-26 14:30:25 +03:00

Use the frame in the following way:

To navigate to the starting page of the application

// put this in the bootstrap.js
var app = require("application");
var frameModule = require("ui/frame");

app.onLaunch = function(context) {
	var frame = new frameModule.Frame();
	frame.navigate("testPage");
}

// or use the mainModule property of the application module
// in this a Frame instance is internally created and used to navigate to the main page module
app.mainModule = "testPage";

To navigate to a new Page

// take the frame from an existing (and navigatedTo) Page instance
var frame = page.frame;
frame.navigate("newPage");

To navigate to a new Activity (Android)

// create a new Frame instance
var frameModule = require("ui/frame");
var frame = new frameModule.Frame();
frame.navigate("newPage");