Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ```
- <Page>
- <Label text="Hello World" />
- </Page>
- ```
- ```
- exports.pageLoaded = function(args) {
- console.log("loaded");
- };
- ```
- ```
- @import "nativescript-theme-core/css/core.light.css";
- Image {
- height: 120;
- width: 120;
- }
- ```
- ```
- <Page>
- <Label text="I’m a details page!" />
- </Page>
- ```
- ```
- var Observable = require("data/observable").Observable;
- var page;
- exports.onNavigatingTo = function(args) {
- page = args.object;
- page.bindingContext = new Observable(page.navigationContext);
- };
- ```
- Make sure the following plugins are installed:
- - Text to speech
- - Explosion
- ## Start
- Use `tns create` to build an app.
- Open that app.
- Explain folder structure
- * `app`
- * `platforms`
- * `package.json` / `node_modules`
- Switch to Pokemon app.
- Explain `tns run`.
- Open `main-page.xml`.
- Make a simple change.
- Show how NativeScript converts UI components from XML into native UI controls.
- ## dx1
- ```
- <ActionBar class="action-bar" title="Pokémon!"></ActionBar>
- ```
- Open `main-page.js`
- Add `loaded="pageLoaded"`.
- Look at console.
- ## dx2
- ```
- var Observable = require("data/observable").Observable;
- exports.pageLoaded = function(args) {
- var page = args.object;
- var data = new Observable();
- data.set("name", "TJ");
- page.bindingContext = data;
- };
- ```
- ```
- <Label text="{{ name }}" />
- ```
- ## dx3
- ```
- var Observable = require("data/observable").Observable;
- var pokemonService = require("./data/pokemon-service");
- var allPokemon = [];
- var pageData = new Observable();
- pageData.set("allPokemon", allPokemon);
- exports.pageLoaded = function(args) {
- var page = args.object;
- page.bindingContext = pageData;
- if (allPokemon.length == 0) {
- pokemonService.getPokemonList().then(function(data) {
- allPokemon = data;
- pageData.set("allPokemon", allPokemon);
- });
- }
- };
- ```
- ## dx4
- ```
- <Page loaded="pageLoaded">
- <ActionBar class="action-bar" title="Pokémon!"></ActionBar>
- <ScrollView>
- <Repeater items="{{ allPokemon }}">
- <Repeater.itemsLayout>
- <FlexboxLayout class="container" />
- </Repeater.itemsLayout>
- <Repeater.itemTemplate>
- <Image src="{{ sprite }}" />
- </Repeater.itemTemplate>
- </Repeater>
- </ScrollView>
- </Page>
- ```
- ## dx5
- ```
- .container {
- flex-wrap: wrap;
- justify-content: space-around;
- }
- ```
- ```
- tap="navigate"
- ```
- ```
- var frameModule = require("ui/frame");
- ```
- ## dx6
- ```
- exports.navigate = function(args) {
- frameModule.topmost().navigate({
- moduleName: "detail-page",
- context: args.object.bindingContext
- });
- };
- ```
- Attach debugging console
- Open `detail-page.js` and discuss.
- ## dx7
- ```
- <Page navigatingTo="onNavigatingTo">
- <ActionBar class="action-bar" title="{{ name }}"></ActionBar>
- <FlexboxLayout justifyContent="center">
- <Image src="{{ sprite }}" />
- </FlexboxLayout>
- </Page>
- ```
- ## plugins
- Show plugins.nativescript.org.
- ```
- var TextToSpeech = require("nativescript-texttospeech");
- ```
- ## dx8
- ```
- var TTS = new TNSTextToSpeech();
- TTS.speak({ text: args.object.bindingContext.name });
- ```
- ```
- var explosion = require("nativescript-explosionfield");
- ```
- ```
- explosion.explode(args.object);
- ```
- ## dx9
- ```
- var TTS = new TextToSpeech.TNSTextToSpeech();
- TTS.speak({ text: "I’m going to blow up " + args.object.bindingContext.name });
- setTimeout(function() {
- explosion.explode(args.object);
- setTimeout(function() {
- TTS.speak({ text: "Boom!" });
- }, 1250);
- }, 2000);
- ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement