Advertisement
Guest User

Untitled

a guest
Feb 20th, 2017
72
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.34 KB | None | 0 0
  1. ```
  2. <Page>
  3. <Label text="Hello World" />
  4. </Page>
  5. ```
  6.  
  7. ```
  8. exports.pageLoaded = function(args) {
  9. console.log("loaded");
  10. };
  11. ```
  12.  
  13. ```
  14. @import "nativescript-theme-core/css/core.light.css";
  15.  
  16. Image {
  17. height: 120;
  18. width: 120;
  19. }
  20. ```
  21.  
  22. ```
  23. <Page>
  24. <Label text="I’m a details page!" />
  25. </Page>
  26. ```
  27.  
  28. ```
  29. var Observable = require("data/observable").Observable;
  30.  
  31. var page;
  32.  
  33. exports.onNavigatingTo = function(args) {
  34. page = args.object;
  35. page.bindingContext = new Observable(page.navigationContext);
  36. };
  37. ```
  38.  
  39. Make sure the following plugins are installed:
  40.  
  41. - Text to speech
  42. - Explosion
  43.  
  44. ## Start
  45.  
  46. Use `tns create` to build an app.
  47. Open that app.
  48.  
  49. Explain folder structure
  50.  
  51. * `app`
  52. * `platforms`
  53. * `package.json` / `node_modules`
  54.  
  55. Switch to Pokemon app.
  56.  
  57. Explain `tns run`.
  58.  
  59. Open `main-page.xml`.
  60.  
  61. Make a simple change.
  62.  
  63. Show how NativeScript converts UI components from XML into native UI controls.
  64.  
  65. ## dx1
  66.  
  67. ```
  68. <ActionBar class="action-bar" title="Pokémon!"></ActionBar>
  69. ```
  70.  
  71. Open `main-page.js`
  72.  
  73. Add `loaded="pageLoaded"`.
  74.  
  75. Look at console.
  76.  
  77. ## dx2
  78.  
  79. ```
  80. var Observable = require("data/observable").Observable;
  81.  
  82. exports.pageLoaded = function(args) {
  83. var page = args.object;
  84. var data = new Observable();
  85. data.set("name", "TJ");
  86.  
  87. page.bindingContext = data;
  88. };
  89. ```
  90.  
  91. ```
  92. <Label text="{{ name }}" />
  93. ```
  94.  
  95. ## dx3
  96.  
  97. ```
  98. var Observable = require("data/observable").Observable;
  99. var pokemonService = require("./data/pokemon-service");
  100.  
  101. var allPokemon = [];
  102. var pageData = new Observable();
  103. pageData.set("allPokemon", allPokemon);
  104.  
  105. exports.pageLoaded = function(args) {
  106. var page = args.object;
  107. page.bindingContext = pageData;
  108.  
  109. if (allPokemon.length == 0) {
  110. pokemonService.getPokemonList().then(function(data) {
  111. allPokemon = data;
  112. pageData.set("allPokemon", allPokemon);
  113. });
  114. }
  115. };
  116. ```
  117.  
  118. ## dx4
  119.  
  120. ```
  121. <Page loaded="pageLoaded">
  122. <ActionBar class="action-bar" title="Pokémon!"></ActionBar>
  123.  
  124. <ScrollView>
  125. <Repeater items="{{ allPokemon }}">
  126. <Repeater.itemsLayout>
  127. <FlexboxLayout class="container" />
  128. </Repeater.itemsLayout>
  129. <Repeater.itemTemplate>
  130. <Image src="{{ sprite }}" />
  131. </Repeater.itemTemplate>
  132. </Repeater>
  133. </ScrollView>
  134. </Page>
  135. ```
  136.  
  137. ## dx5
  138.  
  139. ```
  140. .container {
  141. flex-wrap: wrap;
  142. justify-content: space-around;
  143. }
  144. ```
  145.  
  146. ```
  147. tap="navigate"
  148. ```
  149.  
  150. ```
  151. var frameModule = require("ui/frame");
  152. ```
  153.  
  154. ## dx6
  155.  
  156. ```
  157. exports.navigate = function(args) {
  158. frameModule.topmost().navigate({
  159. moduleName: "detail-page",
  160. context: args.object.bindingContext
  161. });
  162. };
  163. ```
  164.  
  165. Attach debugging console
  166.  
  167. Open `detail-page.js` and discuss.
  168.  
  169. ## dx7
  170.  
  171. ```
  172. <Page navigatingTo="onNavigatingTo">
  173.  
  174. <ActionBar class="action-bar" title="{{ name }}"></ActionBar>
  175.  
  176. <FlexboxLayout justifyContent="center">
  177. <Image src="{{ sprite }}" />
  178. </FlexboxLayout>
  179. </Page>
  180. ```
  181.  
  182. ## plugins
  183.  
  184. Show plugins.nativescript.org.
  185.  
  186. ```
  187. var TextToSpeech = require("nativescript-texttospeech");
  188. ```
  189.  
  190. ## dx8
  191.  
  192. ```
  193. var TTS = new TNSTextToSpeech();
  194. TTS.speak({ text: args.object.bindingContext.name });
  195. ```
  196.  
  197. ```
  198. var explosion = require("nativescript-explosionfield");
  199. ```
  200.  
  201. ```
  202. explosion.explode(args.object);
  203. ```
  204.  
  205. ## dx9
  206.  
  207. ```
  208. var TTS = new TextToSpeech.TNSTextToSpeech();
  209. TTS.speak({ text: "I’m going to blow up " + args.object.bindingContext.name });
  210.  
  211. setTimeout(function() {
  212. explosion.explode(args.object);
  213. setTimeout(function() {
  214. TTS.speak({ text: "Boom!" });
  215. }, 1250);
  216. }, 2000);
  217. ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement