TJ VanToll tjvantoll Progress Lansing, Michigan, US https://www.tjvantoll.com Web Developer · Tech Author · Principal Developer Advocate at Progress · Work on @NativeScript

push eventtjvantoll/www.tjvantoll.com

TJ VanToll

commit sha 224eba0593e775a646d201f17cda8c13bed78ced

Adding confoo talks

view details

TJ VanToll

commit sha ea6e671e4ba653b10f515e4783cb1e56bfdd428a

Reference the pptx instead

view details

push time in 14 hours

create barnchtjvantoll/ARTesting

branch : start

created branch time in 6 days

create barnchtjvantoll/confoo

branch : start

created branch time in 8 days

created repositorytjvantoll/confoo

created time in 8 days

create barnchtjvantoll/ARTesting

branch : master

created branch time in 8 days

created repositorytjvantoll/ARTesting

created time in 8 days

push eventtjvantoll/www.tjvantoll.com

TJ VanToll

commit sha df350683a216e6f4257bf0b8ad6da2c50dfdd65d

Adding a few new articles

view details

push time in 11 days

push eventtjvantoll/ACMEClaimsSource

TJ VanToll

commit sha 758f29c13717b1b1e2f16d536dcf14155b132ea3

Trying a few other things to fix CI

view details

TJ VanToll

commit sha 4a004c63d02f0e0929a9c20bf5fa78f35cb334df

Removing package lock

view details

push time in 13 days

push eventtjvantoll/ACMEClaimsSource

TJ VanToll

commit sha dc42a51e4f3e3e3efdcfbfc463a29716d172668b

Flipping a flag to fix the CI

view details

push time in 13 days

push eventtjvantoll/ACMEClaimsSource

TJ VanToll

commit sha d84da26304442412c43809953ea19880d343dd11

Fixing a configuration setting in the CI build

view details

push time in 13 days

push eventtjvantoll/ACMEClaimsSource

TJ VanToll

commit sha c45710c8966c75f737e01e9641e33227187db40a

Fixing file name

view details

push time in 13 days

push eventtjvantoll/ACMEClaimsSource

TJ VanToll

commit sha 3f99ad1600c4b475beb29fa88da76f3b17cd0a8d

Minor changes to the login screen.

view details

push time in 14 days

push eventtjvantoll/nativescript-acme-sample

SvetoslavTsenov

commit sha b2d2aab14dcf666b4d5d63c7a4cc8ec346f67af7

chore: bump webpack and nativescript versions to latests official. Resolve new configs typescript and webpack configs and deps.

view details

SvetoslavTsenov

commit sha a59e66ebdc9f17b1f96b03cb48dee3a13e237d2d

tests: include e2e sample tests using jasmine

view details

SvetoslavTsenov

commit sha dae468c624d45a3378618cc7a7aa1c6b18e26f7d

chore: appium version

view details

SvetoslavTsenov

commit sha e2231b6f2e0633b43713201963636cd404fc755d

chore: setup circleci for ios

view details

TJ VanToll

commit sha 1561e1f81ff5b8614d57bbd26eaaa903a7116e68

Fixing up a few things

view details

push time in 14 days

fork tjvantoll/nativescript-acme-sample

A Kinvey-powered NativeScript sample that runs on the web, iOS, and Android

fork in 14 days

push eventignaciofuentes/nativescript-acme-sample

TJ VanToll

commit sha 8e0aabf674b69d0fed0678c7d9cc4a42b8f34fa0

Removing e2e files

view details

push time in 15 days

push eventignaciofuentes/nativescript-acme-sample

TJ VanToll

commit sha 771c46cb7bcdd37fce46d0c7dfbccef766a04ec4

Switching up e2e script

view details

push time in 15 days

push eventignaciofuentes/nativescript-acme-sample

TJ VanToll

commit sha 3cb94e95d99d7b0b723853f57eb8251fd75bc631

Switching the default route to the login page

view details

push time in 15 days

push eventignaciofuentes/nativescript-acme-sample

TJ VanToll

commit sha d79f930874dadc18ab8890e73682aacb95dbb641

Saving off some minor changes

view details

push time in 20 days

push eventNativeScript/code-samples

TJ VanToll

commit sha 29d4b2ad3050f8c473949906faa4e43276559ba3

Fixing the Core camera sample

view details

push time in 21 days

push eventignaciofuentes/nativescript-acme-sample

TJ VanToll

commit sha 0f355bd207272e3b176c08a0fb43c8f4c72891ef

Version, styling, and display updates

view details

push time in 21 days

create barnchignaciofuentes/nativescript-acme-sample

branch : claims

created branch time in 21 days

PublicEvent

PR opened NativeScript/docs

Add a Playground link to help users find our new tutorial there

Here’s a quick visual so you can see what this looks like. Basically this is to help people find our new Vue.js tutorial on Playground.

screen shot 2019-02-15 at 2 31 57 pm

+6 -2

0 comment

1 changed file

pr created time in a month

create barnchtjvantoll/docs

branch : vue-playground-link

created branch time in a month

push eventtjvantoll/articles

TJ VanToll

commit sha 5c46f97335a442985af859e319538de5c50828ce

Adding more entries to the data set and simplifying structure

view details

push time in a month

create barnchNativeScript/playground-tutorials

branch : code-sharing-tweak

created branch time in a month

create barnchtjvantoll/ShinyDex

branch : genders

created branch time in a month

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha df7be3f7746c07871668556e0e4294a0033a9564

Updates

view details

push time in a month

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha d679022efe25b9134ca4651341b108f2972aa3ad

Fixing default unown sort order

view details

push time in a month

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha 286574d3624c46c70725b87e717858f6dd701e4d

Updates

view details

push time in a month

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha 17eecfd0f0bdcda9550663956b67eedf47a93e3c

Each view should have its own sort order

view details

push time in a month

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha b25d2ba470341bf892c1d006b4521414ded1c30a

Meltan and Melmetal sprite updates

view details

push time in a month

MemberEvent

push eventNativeScript/sample-Groceries

TJ VanToll

commit sha d973f48b231616bdbf8452857d613c77b52b87c5

Removing branches from the README. The tutorial-related branches have all been moved to Playground, so those branches are no longer necessary. The web-related branches are no longer relevant as we know recommend a different code-sharing option with NativeScript Schematics.

view details

push time in a month

pull request commenttjvantoll/nativescript-IQKeyboardManager

Update Podfile to IQKeyboardManager 6.0.0

@EddyVerbruggen Yep, done! Thanks for following up on this.

alexisszabo

comment created time in a month

push eventNativeScript/playground-tutorials

TJ VanToll

commit sha 62f433bf1e739e38e4785a14b965fe714c318d4c

Various fixes based on feedback

view details

push time in a month

push eventtjvantoll/articles

TJ VanToll

commit sha 2403d3f5c66be6f771d25355ec23a8835e759408

Saving off some stuff

view details

push time in 2 months

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha 2078781b23727554cf5b81cfbe7470fcfa4bb9f0

Updates

view details

push time in 2 months

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha 7eb36918cfe54aa0f76ea12c199caf725bae407d

Media queries for making the dex look good on larger screens

view details

push time in 2 months

push eventtjvantoll/articles

TJ VanToll

commit sha ec85687ad30423a7828232fb2dcfc77bc8710eb5

Starting on chapter 2

view details

push time in 2 months

push eventtjvantoll/articles

TJ VanToll

commit sha 241ff756bfe3e11dc51cd61d357a14b9fc80a617

First draft of chapter 1

view details

push time in 2 months

push eventtjvantoll/articles

TJ VanToll

commit sha 6f561dd95c9810d1a0bd4d911ab53635c4036522

Saving off progress

view details

push time in 2 months

push eventtjvantoll/docs

Teodor Bozhikov

commit sha 228e2d201b5c037b09e90bc4fe6848bcf6255992

chore: add how NS works page, remove common diagram from welcome page

view details

Teodor Bozhikov

commit sha dc6af6b891c03a745fd8fc50861ef7d91d34dd54

chore: remove new line

view details

Teodor Bozhikov

commit sha 3270fd3d44e85b7cec29076ae59e1e4b502c65c5

chore: fix article position

view details

Teodor Bozhikov

commit sha 228654a115111f9f30ee338ab85c3eb076f9f2d4

chore: use lowercase d

view details

Teodor Bozhikov

commit sha 003996d8740cbede06a2bf202aa3a34e9dadf44b

chore: fixes following to PR

view details

Teodor Bozhikov

commit sha 4431e14d1c38cb78abe038e0d375fe510a9423eb

chore: fixes following PR

view details

Nicu

commit sha 16a55b58887953584c35fcc0de4550fbc23afa3a

Fixed small copy&paste typo (#1042)

view details

doorb02

commit sha 156ce46dc748bff6afafd7e5f80c5d9dfb8eb42f

Update ng-chapter-4.md At this stage the property 'isLoading' is actual 'true' not 'false'.

view details

Emil Tabakov

commit sha 7eebd99c1cf33412e9cf690eb6a8afbfda2398da

chore: update nokogiri, because of security issues (#1047)

view details

Teodor Bozhikov

commit sha 1bcb49584421529795e731e8c775ded282866b18

chore: update community files

view details

Teodor Bozhikov

commit sha 293e84afed0cf768511c9c64b1419e431968316f

chore: update community files

view details

Natalia Hristova

commit sha 9ead7cc07a43560e862c86bef27915fa58ade4a5

chore: fix typo

view details

Rakesh Girase

commit sha f53550b73df1c501566a7f5e7e091cef2bd62f23

Added DockLayout to the list (#1037) * Added DocLayout to the list Added DocLayout to the list * Fixed Typo in DocLayout * Fixed the typo in DockLayout

view details

Jason Hendee

commit sha 39dd5732b93adf9ba459ca2775c86d1ecb6cb663

Reference both app.routing.ts arrays (#1048) New Angular users might overlook the need to inform the AppModule of this new component.

view details

Nicu

commit sha 8507d5a0d24ab1dc97aa17d607145a53be9bfcd6

Fixed contents link issue (#1049) * Fixed contents link issue * Fixed wrong link used

view details

Dan Wilson

commit sha 9474cf0a7519574f7a32ae97589e511d5bafb2b4

Removing yellow strip as webinar ended.

view details

stevo

commit sha 919e8b3ff3d9d8671e1a332f5ed03704c9d7048d

Update ns-setup-os-x.md (#1035) update nodejs to 8.x

view details

Teodor Dermendzhiev

commit sha 602264afce4d9335562457cf39f527f2c2d0a90e

docs: Creating NSDictionary instances in NS

view details

Teodor Dermendzhiev

commit sha 4c0684340bd9ccfd0a934670dc178321237f5ea4

docs: Update computed property example description

view details

Teodor Dermendjiev

commit sha f09fc74dd59a41812698bb402aee13774ce8057e

Merge pull request #1051 from NativeScript/tdermendzhiev/nsdictionary-creation docs: Creating NSDictionary instances in NS

view details

push time in 2 months

PR opened NativeScript/docs

Fixing a broken image link to the {N}-Vue logo

This is a trivial image path fix. I believe the issue here is because of path rewrites, so there might be a more elegant way of solving this but this gets the job done for now.

+1 -1

0 comment

1 changed file

pr created time in 2 months

push eventNativeScript/code-samples

TJ VanToll

commit sha 3a29befafd21b7e0423801cc1c342ba5cc07fae2

Fix for the Angular camera code sample

view details

push time in 2 months

push eventtjvantoll/articles

TJ VanToll

commit sha 09a629f96a1f35824b002bba7c297910610f02f5

Tweaks

view details

push time in 2 months

push eventtjvantoll/articles

TJ VanToll

commit sha 0a8f52a453639c8c2560845b9c3f0d70d5a09b1b

Staring some preliminary Kinvey Studio ideas

view details

push time in 2 months

push eventNativeScript/playground-tutorials

TJ VanToll

commit sha 92fb0243e4585b24ce51bcc43e80c1e5be83d55b

Final review of new Vue tutorial

view details

push time in 2 months

push eventNativeScript/playground-tutorials

TJ VanToll

commit sha 59a4a1c54a55040f10e25c638e00600e6c622ad5

Changing up the numbering for Playground

view details

TJ VanToll

commit sha 024475a3a84c0dfe36bc2284a9e8f678f44dc8d7

Merge branch 'pr/7' of github.com:NativeScript/playground-tutorials into pr/7

view details

push time in 2 months

PR closed NativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

WIP. Do not merge yet. Creating this for tracking purposes.

+1504 -0

14 comments

23 changed files

ikoevska

pr closed time in 2 months

pull request commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

Closing in favor of #36. @ikoevska you can see the changes I made in https://github.com/NativeScript/playground-tutorials/commit/4bfe5174183644b71b1794c1171ce07105e58dd3.

ikoevska

comment created time in 2 months

PR opened NativeScript/playground-tutorials

New getting started with Vue tutorial

This is a continuation of #7 with final updates.

+1489 -0

0 comment

26 changed files

pr created time in 2 months

create barnchNativeScript/playground-tutorials

branch : pr/7

created branch time in 2 months

pull request commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

Hey @ikoevska, I’m going to go ahead and implement these last few things since this is like 97% done and we want to get this content live. If you have any concerns let me know.

ikoevska

comment created time in 2 months

issue openedNativeScript/playground-feedback

Unable to save nativescript-pager as an npm package

This is an odd one and I think it’s easiest to see if you just try it yourself.

  1. Open https://play.nativescript.org/?template=play-ng&id=VcX3DL&v=13.
  2. Click “Add NPM package”, and add the nativescript-pager plugin (the latest version is ok).
  3. Save a new version of the sample.
  4. Copy the new URL.
  5. Open the new version in a private browser. Notice how the nativescript-pager plugin is gone.

The error seems to be specific to the nativescript-pager plugin, as I’ve tried a few other plugins at random and they seem to work fine. That being said, I can’t figure out what it is about nativescript-pager that Playground doesn’t like, as it doesn’t have any native code so I’d expect it to run.

Any help would be appreciated.

Thanks!

created time in 2 months

push eventtjvantoll/articles

TJ VanToll

commit sha b3e509ce8ffe0d0c204e384a25ba3127e2c6b4de

Finishing draft

view details

push time in 2 months

push eventtjvantoll/articles

TJ VanToll

commit sha a8b149d669170243667a0d60c9a07052fadd9f90

Tweaks

view details

push time in 2 months

push eventtjvantoll/articles

TJ VanToll

commit sha c387d9ff745c7563c504505922a4fd24d701e629

New security article

view details

push time in 2 months

PR opened sebawita/cocktail-party

A couple of quick styling updates
+9 -7

0 comment

6 changed files

pr created time in 2 months

create barnchtjvantoll/cocktail-party

branch : styling

created branch time in 2 months

pull request commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

@ikoevska Hey, just curious where this is at and when you think this will ready to go?

ikoevska

comment created time in 2 months

PR opened NativeScript/playground-tutorials

Validate email and password before hitting Kinvey

Kinvey has some interesting behavior where, if you send the register user API an empty email and password, it creates a generated user for you. Surprise! This code adds a bit of validation to prevent that from happening.

Closes NativeScript/playground-feedback#116

+8 -4

0 comment

3 changed files

pr created time in 2 months

create barnchNativeScript/playground-tutorials

branch : validation-fix

created branch time in 2 months

issue commentNativeScript/playground-feedback

Groceries Register/SignUp needs validation

Thanks @VoroDk for pointing this out. We chose to leave the validation to the backend for simplicity (the tutorial is a bit long as is), BUT, I never realized that the Kinvey registration API has some, well, interesting behavior. Apparently, if you pass the registration API an empty email and password it creates a user with a generated user name and password, which is not what I expected at all, and is why you see the “Your account was successfully created” alert.

I’ll go ahead and add a bit of validation to address this. Thanks again!

VoroDk

comment created time in 2 months

pull request commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

Your list looks great! Let me know when everything is set and we’ll take the next steps of getting everything merged in so we can try this out in the live Playground environment.

You know how for some text input fields in apps, you get an X button at the end of the line. When you click/tap it, it immediately clears all text input. This is super handy when you've accidentally pressed a bunch of buttons and produced something like "hdhasfaljrgaluer" and you don't want to rely on the backspace to delete the input character by character. On iOS, it's handled with clearButtonMode. However, this might be a functionality that we suggest to developers to implement themselves

aaaaaahhhh, ok yeah that makes sense. Come to think of it I’m surprised we don’t have a built-in way of handling that in the core modules. I found a nice little thing someone wrote up, but it’s a few steps so I think it’s probably we suggest developers implement themselves.

ikoevska

comment created time in 2 months

pull request commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

@ikoevska Ok, review done. Awesome work on this! I really like how you organized the sections as it felt like a pretty natural flow. I have a few last high-level comments.

  1. Can you find a place to link to https://www.nslayouts.com/ somewhere in here? Maybe the first time you talk about layouts you can drop something like...

TIP: Want to learn more about NativeScript layouts? Check out the interactive tutorial at nslayouts.com.

  1. I didn’t see a link to the final code anywhere in here, but from your earlier comments I assume you plan on adding it? (Personally I think it’d be good to put the link somewhere near the beginning and at the end.)

  2. What do you about adding something like this to the end of the last lesson?

Congratulations! You successfully built a to-do application with NativeScript and Vue.js. If you’re looking to learn more, here are a few features you could try adding to this app.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 11. A few masterful touches on iOS++In this lesson, you'll learn how to perform platform checks and tie platform-specific logic and design to them.++* You will improve the look and feel of the `<ActionBar>`.+* You will tweak the keyboard on iOS.+* You will add iOS-specific icons in the `<TabView>`.++### Step 1. Access the `platform` and the `frame` modules++The core `platform` module lets you get device-specific information such as device model, type, OS and OS version, language, manufacturer, and screen information. It lets you perform OS checks and implement platform- and device-specific functionality that depends on the these checks.++You will later use the `frame` to access the iOS native component behind the `<ActionBar>` and change its style and color.++To tap into the powers of these modules, you need to require them explicitly in your code.++<hr data-action="start" />++#### Action++* **a.** In `HelloWorld.vue` > `<script>`, require the `platform` and the `frame` module. Place these statements at the top of the block before the `export` statement.++```JavaScript+const platform = require("tns-core-modules/platform");+const frame = require("tns-core-modules/ui/frame");+```++<hr data-action="end" />++### Step 2. Improve the looks of the `<ActionBar>` on iOS++Note how the `<ActionBar>` at the top of the screen combines a dark label on a dark background for iOS. You can change this with a simple platform-specific tweak. Use the `platform.isIOS` check to run the configuration change only on iOS. Next, apply a specific iOS status bar setting.

I think you mean status bar and not action bar in the opening sentence of this paragraph.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 11. A few masterful touches on iOS++In this lesson, you'll learn how to perform platform checks and tie platform-specific logic and design to them.++* You will improve the look and feel of the `<ActionBar>`.+* You will tweak the keyboard on iOS.+* You will add iOS-specific icons in the `<TabView>`.++### Step 1. Access the `platform` and the `frame` modules++The core `platform` module lets you get device-specific information such as device model, type, OS and OS version, language, manufacturer, and screen information. It lets you perform OS checks and implement platform- and device-specific functionality that depends on the these checks.++You will later use the `frame` to access the iOS native component behind the `<ActionBar>` and change its style and color.++To tap into the powers of these modules, you need to require them explicitly in your code.++<hr data-action="start" />++#### Action++* **a.** In `HelloWorld.vue` > `<script>`, require the `platform` and the `frame` module. Place these statements at the top of the block before the `export` statement.++```JavaScript+const platform = require("tns-core-modules/platform");+const frame = require("tns-core-modules/ui/frame");+```++<hr data-action="end" />++### Step 2. Improve the looks of the `<ActionBar>` on iOS++Note how the `<ActionBar>` at the top of the screen combines a dark label on a dark background for iOS. You can change this with a simple platform-specific tweak. Use the `platform.isIOS` check to run the configuration change only on iOS. Next, apply a specific iOS status bar setting.++<hr data-action="start" />++#### Action++* **a.** In the `methods` section of the `<script>` block, add a `onPageLoaded` method at the top and create a simple `platform.isIOS` check. You will use it to manage iOS-specific changes as soon as the app screen loads.++```JavaScript+onPageLoaded: function () {+    if (platform.isIOS) { ++    }+},+```++* **b.** Call this method in the `@loaded` event for the `<Page>` component in your `<template>` block.++```HTML+<Page class="page" @loaded="onPageLoaded">+```++* **c.** Use the `frame` module to access the native iOS status bar and change its style.++```JavaScript+onPageLoaded: function () {+    if (platform.isIOS) {+        // Since the ActionBar is a dark color, this snippet of code switches the app to use+        // white text in the status bar for iOS.+        const navBar = frame.topmost().ios.controller.navigationBar;

I could see the reader being pretty confused about this line of code specifically. After this, maybe consider putting something like this in.

NOTE: One of NativeScript’s most compelling features is that you can access all iOS and Android APIs directly from your TypeScript code. You can see that above with the reference to UIBarStyle.UIBarStyleBlack. Learn more about how this works here.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 11. A few masterful touches on iOS++In this lesson, you'll learn how to perform platform checks and tie platform-specific logic and design to them.++* You will improve the look and feel of the `<ActionBar>`.+* You will tweak the keyboard on iOS.+* You will add iOS-specific icons in the `<TabView>`.++### Step 1. Access the `platform` and the `frame` modules++The core `platform` module lets you get device-specific information such as device model, type, OS and OS version, language, manufacturer, and screen information. It lets you perform OS checks and implement platform- and device-specific functionality that depends on the these checks.++You will later use the `frame` to access the iOS native component behind the `<ActionBar>` and change its style and color.++To tap into the powers of these modules, you need to require them explicitly in your code.++<hr data-action="start" />++#### Action++* **a.** In `HelloWorld.vue` > `<script>`, require the `platform` and the `frame` module. Place these statements at the top of the block before the `export` statement.++```JavaScript+const platform = require("tns-core-modules/platform");+const frame = require("tns-core-modules/ui/frame");+```++<hr data-action="end" />++### Step 2. Improve the looks of the `<ActionBar>` on iOS++Note how the `<ActionBar>` at the top of the screen combines a dark label on a dark background for iOS. You can change this with a simple platform-specific tweak. Use the `platform.isIOS` check to run the configuration change only on iOS. Next, apply a specific iOS status bar setting.++<hr data-action="start" />++#### Action++* **a.** In the `methods` section of the `<script>` block, add a `onPageLoaded` method at the top and create a simple `platform.isIOS` check. You will use it to manage iOS-specific changes as soon as the app screen loads.++```JavaScript+onPageLoaded: function () {

Probably onPageLoaded() { just to match all the other methods.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 7. Advanced design: Styled action bar, headers, input field, and button++When you work with NativeScript and Vue.js, you can use application-wide CSS, scoped CSS, or inline CSS to style your app. Application-wide CSS is applied first and is handled in `app.css` in the root of your project. This tutorial does not explore application-wide CSS. See also: [Styling](https://docs.nativescript.org/ui/styling).++Scoped CSS is applied to the scope of the current `.vue` file only and is handled in its `<style scoped>` block. This tutorial relies almost exclusively on scoped CSS and inline CSS. See also: [Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html).++With type selectors, you can select a UI component and apply styling to it. To select a type, use the NativeScript component name as provided in the code. For example, to select the tab view, use `TabView`.++### Step 1. Style the action bar++Use NativeScript type selectors to change the color of the `<ActionBar>` component.++<hr data-action="start" />++#### Action++* **a.** In `HelloWorld.vue` > `<style scoped>`, set a new color for the `<ActionBar>`.

Maybe have a first step that has the reader delete all existing CSS.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 6. Basic functionality: View, return to active tasks, and delete tasks from the Completed tab++In this lesson, you'll revisit knowledge from earlier parts of this tutorial.++### Step 1. Handle completed tasks++Use an `action()` dialog to prompt users to select what they want to do with a completed task: re-activate it, delete it, or dismiss the dialog.++<hr data-action="start" />++#### Action++* **a.** In the `<template>` block, add event listeners for tap events for both `<Label>` components that represent your active tasks. Use the `v-on` directive. Remove the default event listener from the `<ListView>`.

You said this earlier, but I’d state here that users need to do this action in the Completed part of the template. At a glance the two tabs are pretty similar and it’s easy to accidentally start working in the wrong one.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 5. Basic functionality: View, complete, and delete tasks from the To Do tab++Out-of-the-box, the `<ListView>` component detects a tap gesture for every item and emits an event for it. The event carries information about the index of the tapped array item and the array item itself. To let the user choose the outcome of a tap gesture and expand the functionality of your app, you can tie a dialog to the event.++[`dialogs`](https://docs.nativescript.org/api-reference/modules/_ui_dialogs_) is a globally available module that provides several configurable dialog types for apps: alert, action, prompt, login, confirmation. This lesson explores the use of [`action()`](https://nativescript-vue.org/en/docs/elements/dialogs/action/) to let the user choose if they want to mark a task as completed or delete it from the list of active tasks.++### Step 1. Show completed tasks++Use another `<GridLayout>` to arrange the UI components of the tab for completed tasks.++Use a `<Label>` to create a header for the tab for completed tasks.++Use a `<ListView>` to list completed tasks on the screen.++Arrange all UI components in the grid by setting the row they inhabit.++<hr data-action="start" />++#### Action++* **a.** In the second `<TabViewItem>` section, remove the `<Label>` component. ++* **b.** Drag and drop a `<GridLayout>` component within the `<TabViewItem>` section for the second tab. Clean up its components and set it to consist of two rows.++* **c.** Drag and drop a `<Label>` component within the `<GridLayout>` section. Set it to inhabit the first row of the grid.<br/>You can use this to create and control a *Completed Tasks* header for the tab.++* **d.** Drag and drop a `<ListView>` component, clean up its contents, and set it to inhabit the second row of the grid.++* **e.** In the newly added `<ListView>` component, insert another `<GridLayout>` consisting of two columns within the `v-template` section.++```HTML+<TabViewItem title="Completed">+    <GridLayout rows="auto, *">+        <Label row="0" text="Completed Tasks" />+        <ListView row="1" class="list-group" for="country in countries" @itemTap="onItemTap">+            <v-template>+                <GridLayout columns="auto, *" >+                    +                </GridLayout>+            </v-template>+        </ListView>+    </GridLayout>+</TabViewItem>+```++* **f.** Use `<Label>` components to represent the completed task name and the icon. Add the `textWrap="true"` property to ensure that longer tasks display properly. In the next lessons, you can tie code to the labels. In Lesson 7, you can use a CSS class to style the small tappable button in front of the task name. ++```HTML+<ListView row="1" class="list-group" for="done in dones">+    <v-template>+        <GridLayout columns="auto, *">+            <Label col="0" text="✓" />+            <Label col="1" :text="done.name" textWrap="true" />+        </GridLayout>+    </v-template>+</ListView>+```++* **g.** Replace the `countries` array with a new `dones` array to hold completed tasks in the `data` section in the `<script>` block. Update the bindings in `<ListView>` in a similar manner to how `todo` array items are handled.++```JavaScript+dones: [],+```++```HTML+<ListView row="1" class="list-group" for="done in dones"+    @itemTap="onItemTap">+    <v-template>+        <GridLayout columns="auto, *">+            <Label col="0" text="✓" />+            <Label col="1" :text="done.name" textWrap="true" />+        </GridLayout>+    </v-template>+</ListView>+```++<hr data-action="end" />++### Step 2. Handle active tasks++Use an `action()` dialog to prompt users to select what they want to do with an active task: complete it, delete it, or dismiss the dialog.++<hr data-action="start" />++#### Action++* **a.** In the `<template>` block, add event listeners for tap events for both `<Label>` components that represent your active tasks. Use the `v-on` directive. Remove the default event listener from the `<ListView>`.++```HTML+<Label col="0" v-on:tap="onTodoCircleTap(todo)" text=" " />+<Label col="1" v-on:tap="onTodoItemTap(todo)" :text="todo.name" textWrap="true" />+```++* **b.** In the `<script>` block, modify the `onItemTap` method:+    * Rename the method to `onTodoItemTap` and switch it to consume `item` instead of `args`.+    * Method catches the index of the tapped item. +    * Method shows an `action()` dialog.+    * Method logs user selection in the console for debugging.+    * Based on user selection, the method moves items from the `todos` array to the `dones` array, deletes items from the `todos` array, or dismisses the dialog. Use `splice()` to avoid leaving holes in the array and `unshift()` to make sure that recently completed tasks are shown on top.+    * When the method moves a task to the `dones` array, use the `activeTabIndex` to switch the tab to the completed tab.++```JavaScript+onTodoItemTap: function(item) {+    const index = this.todos.indexOf(item);++    action("What do you want to do with this task?", "Cancel", ["Mark completed", "Delete forever"]).then(result => {+        console.log(result); // Logs the selected option for debugging.+        switch (result) {+            case "Mark completed":+                this.dones.unshift(item); // Places the tapped active task at the top of the completed tasks.+                this.todos.splice(index, 1); // Removes the tapped active task.+                this.activeTabIndex = 1; // Switches the tab to the completed tab.+                break;+            case "Delete forever":+                this.todos.splice(index, 1); // Removes the tapped active task.+                break;+            case "Cancel" || undefined: // Dismisses the dialog.+                break;+        }+    });+},+```

This is another case where it might be worth telling the user to test their code to make sure things are working as they should.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 5. Basic functionality: View, complete, and delete tasks from the To Do tab++Out-of-the-box, the `<ListView>` component detects a tap gesture for every item and emits an event for it. The event carries information about the index of the tapped array item and the array item itself. To let the user choose the outcome of a tap gesture and expand the functionality of your app, you can tie a dialog to the event.++[`dialogs`](https://docs.nativescript.org/api-reference/modules/_ui_dialogs_) is a globally available module that provides several configurable dialog types for apps: alert, action, prompt, login, confirmation. This lesson explores the use of [`action()`](https://nativescript-vue.org/en/docs/elements/dialogs/action/) to let the user choose if they want to mark a task as completed or delete it from the list of active tasks.++### Step 1. Show completed tasks++Use another `<GridLayout>` to arrange the UI components of the tab for completed tasks.++Use a `<Label>` to create a header for the tab for completed tasks.++Use a `<ListView>` to list completed tasks on the screen.++Arrange all UI components in the grid by setting the row they inhabit.++<hr data-action="start" />++#### Action++* **a.** In the second `<TabViewItem>` section, remove the `<Label>` component. ++* **b.** Drag and drop a `<GridLayout>` component within the `<TabViewItem>` section for the second tab. Clean up its components and set it to consist of two rows.++* **c.** Drag and drop a `<Label>` component within the `<GridLayout>` section. Set it to inhabit the first row of the grid.<br/>You can use this to create and control a *Completed Tasks* header for the tab.++* **d.** Drag and drop a `<ListView>` component, clean up its contents, and set it to inhabit the second row of the grid.++* **e.** In the newly added `<ListView>` component, insert another `<GridLayout>` consisting of two columns within the `v-template` section.++```HTML+<TabViewItem title="Completed">+    <GridLayout rows="auto, *">+        <Label row="0" text="Completed Tasks" />+        <ListView row="1" class="list-group" for="country in countries" @itemTap="onItemTap">+            <v-template>+                <GridLayout columns="auto, *" >+                    +                </GridLayout>+            </v-template>+        </ListView>+    </GridLayout>+</TabViewItem>+```++* **f.** Use `<Label>` components to represent the completed task name and the icon. Add the `textWrap="true"` property to ensure that longer tasks display properly. In the next lessons, you can tie code to the labels. In Lesson 7, you can use a CSS class to style the small tappable button in front of the task name. ++```HTML+<ListView row="1" class="list-group" for="done in dones">+    <v-template>+        <GridLayout columns="auto, *">+            <Label col="0" text="✓" />+            <Label col="1" :text="done.name" textWrap="true" />+        </GridLayout>+    </v-template>+</ListView>+```++* **g.** Replace the `countries` array with a new `dones` array to hold completed tasks in the `data` section in the `<script>` block. Update the bindings in `<ListView>` in a similar manner to how `todo` array items are handled.++```JavaScript+dones: [],+```++```HTML+<ListView row="1" class="list-group" for="done in dones"+    @itemTap="onItemTap">+    <v-template>+        <GridLayout columns="auto, *">+            <Label col="0" text="✓" />+            <Label col="1" :text="done.name" textWrap="true" />+        </GridLayout>+    </v-template>+</ListView>+```++<hr data-action="end" />++### Step 2. Handle active tasks++Use an `action()` dialog to prompt users to select what they want to do with an active task: complete it, delete it, or dismiss the dialog.++<hr data-action="start" />++#### Action++* **a.** In the `<template>` block, add event listeners for tap events for both `<Label>` components that represent your active tasks. Use the `v-on` directive. Remove the default event listener from the `<ListView>`.++```HTML+<Label col="0" v-on:tap="onTodoCircleTap(todo)" text=" " />

Any reason you’re using v-on here instead of @tap which you used earlier on the button?

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 5. Basic functionality: View, complete, and delete tasks from the To Do tab++Out-of-the-box, the `<ListView>` component detects a tap gesture for every item and emits an event for it. The event carries information about the index of the tapped array item and the array item itself. To let the user choose the outcome of a tap gesture and expand the functionality of your app, you can tie a dialog to the event.++[`dialogs`](https://docs.nativescript.org/api-reference/modules/_ui_dialogs_) is a globally available module that provides several configurable dialog types for apps: alert, action, prompt, login, confirmation. This lesson explores the use of [`action()`](https://nativescript-vue.org/en/docs/elements/dialogs/action/) to let the user choose if they want to mark a task as completed or delete it from the list of active tasks.++### Step 1. Show completed tasks++Use another `<GridLayout>` to arrange the UI components of the tab for completed tasks.

Not sure the best spot, but at some point during this tutorial it’d be good to have an aside that points people at https://www.nslayouts.com/. Maybe something like...

TIP: Want to learn more about the different NativeScript layouts? Check out the interactive tutorial at nslayouts.com.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 4. Basic functionality: Add tasks++The layout components let you arrange the various user interface widgets of your app. When you need to place more than one UI widget on your app screen, you are likely to use one of the available layouts. The `<GridLayout>` is a basic but versatile option, letting you position elements in a table-like manner. ++The `<GridLayout>` lets you choose the exact positions of your elements in the grid by setting the row and column they inhabit.++### Step 1. Create the layout++Replace the default layout with a combination of two `<GridLayout>` components and configure the grids to accommodate the remaining UI of your app.++<hr data-action="start" />++#### Action++* **а.** Delete the `<Label>` component from the first `<TabViewItem>` section.++> **TIP:**+> Saving at this point will cause the *Preview* app to crash. Save your changes at the end of the step.++* **b.** Drag and drop a `<GridLayout>` component within the `<TabViewItem>` section for the first tab.<br/>The default code creates a colorful table that shows how to position elements and merge grid cells.+* **c.** Delete all `<Label>` components from the newly added `<GridLayout>`.+* **d.** Drag and drop a new `<Label>` component in the `<GridLayout>` section. Change the text it shows to *My Tasks*.<br/>You can use this to create and control the header for the tab.+* **e.** Drag and drop a `<GridLayout>` component in the existing `<GridLayout>` section, right under the newly added `<Label>`.+* **f.** Delete all `<Label>` components from the newly added `<GridLayout>` section.+* **g.** Set the top-level `<GridLayout>` to consist of three rows.+* **h.** Configure the nested `<GridLayout>`.+    * Set the grid to consist of two columns and one row.+    * Remove any additional settings for the grid.++```HTML+<TabViewItem title="To Do">+    <GridLayout rows="auto, auto, *" >+        <Label text="My Tasks" />+        <GridLayout columns="auto, *" rows="auto">+            +        </GridLayout>+    </GridLayout>+</TabViewItem>+```++<hr data-action="end" />++### Step 2. Add and arrange the UI components++Arrange a `<TextField>` and a `<Button>` in the grid. They form the input functionality of the app.++Use a `<ListView>` to show newly added tasks below the input field.++Arrange all UI components in the grid by setting the row they inhabit.++<hr data-action="start" />++#### Action++* **a.** Drag and drop a `<TextField>` and a `<Button>` within the nested `<GridLayout>` section.<br/>The Playground adds JavaScript code to your code for the first time. Note the `data()` and `methods` sections added in the `<script>` block below. In next implementation steps, you will add code to these sections to create some of the app functionality.+* **b.** Drag and drop a `<ListView>` below the nested grid.<br/>The default code creates a list of countries and country flag icons.+* **c.** Configure the positioning of the components within the top-level grid.+    * Set the `<Label>` to inhabit the first row.+    * Set the nested `<GridLayout>` to inhabit the second row.+    * Set the `<ListView`> to inhabit the third row.++```HTML+<GridLayout rows="auto, auto, *">+    <Label row="0" text="My Tasks" />+    <GridLayout row="1" columns="3*, *" rows="auto">+        <TextField v-model="textFieldValue" hint="Enter text..." />+        <Button text="+" @tap="onButtonTap" />+    </GridLayout>+    <ListView row="2" class="list-group" for="country in countries"+        @itemTap="onItemTap" style="height:1250px">+        <v-template>+            <FlexboxLayout flexDirection="row" class="list-group-item">+                <Image :src="country.imageSrc" class="thumb img-circle" />+                <Label :text="country.name" class="list-group-item-heading"+                    style="width: 60%" />+            </FlexboxLayout>+        </v-template>+    </ListView>+</GridLayout>+```++* **d.** Configure the positioning of the components within the nested grid (the input area).+    * Set the `<TextField>` to inhabit the first column and the first row.+    * Set the `<Button>` to inhabit the second column and the first row.++```HTML+<TextField col="0" row="0" v-model="textFieldValue" hint="Enter text..." editable="true" />+<Button col="1" row="0" text="+" @tap="onButtonTap" />+```++* **e.** In the `<TextField>` definition, use the `editable` property to enable text input from the field. Set it to `true`.++```HTML+<TextField col="0" row="0" v-model="textFieldValue" hint="Enter text..." editable="true" />+```++* **f.** Clean up sample code from the `<ListView>`&mdash;remove the `<FlexboxLayout>` component and add a new `<Label>` in its place. Remove the height setting. Set `textWrap="true"` for the `<Label>` and retain the `:text="country.name"` binding to continue showing the list of countries.++```HTML+<ListView row="2" class="list-group" for="country in countries" @itemTap="onItemTap">+    <v-template>+        <Label :text="country.name" textWrap="true" />+    </v-template>+</ListView>+```++<hr data-action="end" />++At the end of this stage, your `<template>` block should resemble this sample:++```HTML+<template>+    <Page class="page">+        <!-- Having an ActionBar lets you change the status bar color on iOS, even if the ActionBar isn’t being used. -->+        <!-- See https://docs.nativescript.org/ui/change-status-bar-style-ios for details -->+        <ActionBar title=" " flat="true" />++        <TabView height="100%">+            <TabViewItem title="To Do">+                <!-- Positions a header, an input field, a button, and the list of tasks in a vertical stack. -->+                <GridLayout rows="auto, auto, *">+                    <Label row="0" text="My Tasks" />++                    <GridLayout row="1" columns="3*, *" rows="auto">+                        <!-- Configures the task input area. -->+                        <TextField col="0" row="0" v-model="textFieldValue"+                            hint="Enter text..." editable="true" />+                        <Button col="1" row="0" text="+" @tap="onButtonTap" />+                    </GridLayout>++                    <ListView row="2" class="list-group" for="country in countries"+                        @itemTap="onItemTap">+                        <v-template>+                            <Label :text="country.name" textWrap="true" />+                        </v-template>+                    </ListView>++                </GridLayout>+            </TabViewItem>+            <TabViewItem title="Completed">+                <Label text="This tab will list completed tasks for tracking."+                    textWrap="true" />+            </TabViewItem>+        </TabView>+    </Page>+</template>+```++### Step 3. Create the logic++Scroll down to the `<script>` block and examine the `methods` and `data` sections. Use basic JavaScript methods to create simple logic for adding tasks.++<hr data-action="start" />++#### Action++* **a.** From the `data` section in the `<script>` block, remove the `countries` array and create a new `todos` array for newly added tasks. Pre-fill the array with a few options.++```JavaScript+todos: [{+        name: "Feed dogs"+    },+    {+        name: "Ride bike"+    },+    {+        name: "Go grocery shopping"+    }+],+```++* **b.** Update the `<ListView>` to use the newly created array.++```HTML+<ListView row="2" class="list-group" for="todo in todos"+    @itemTap="onItemTap">+    <v-template>+        <Label :text="todo.name" textWrap="true" />+    </v-template>+</ListView>+```++* **c.** In the `methods` section of the `<script>` block, modify the `OnButtonTap` method.+    * Method checks if the input is an empty string. If yes, method returns focus to the input field (add a `ref="taskInput"` property to the `TextField` to handle this).+    * Method logs newly added tasks in the console.+    * Method adds newly created tasks in the array of tasks. Use `unshift` to place new items at the top.+    * Method clears the text field after input.++```JavaScript+onButtonTap() {+    if (this.textFieldValue.trim() === "") { // Trims the provided string and checks if it's empty.+        this.$refs.taskInput.nativeView.focus(); // Returns focus to the text field.+        return;+    } +    +    console.log("New task added: " + this.textFieldValue + "."); // Logs the string in the console for debugging. +    this.todos.unshift({ name: this.textFieldValue }); // Adds the item in the ToDo array. Newly added tasks are immediately shown on the screen.+    this.textFieldValue = ""; // Clears the text field so that users can start adding new tasks immediately.+}+```++* **d.** Return to the `<template>` block and modify the `<ListView>` section. Insert another `<GridLayout>` within the `v-template` section in the list view. Clean up the `<GridLayout>` and set it to consist of two columns.++```HTML+<ListView row="2" class="list-group" for="todo in todos" @itemTap="onItemTap">+    <v-template>+        <GridLayout columns="auto, *" >+            +        </GridLayout>+    </v-template>+</ListView>+```++* **e.** Use `<Label>` components to represent the full text of the task and a small tappable icon in front of it. Add the `textWrap="true"` property to ensure that longer tasks display properly. In the next lessons, you can tie code to the labels. In Lesson 7, you can use a CSS class to style the small tappable button in front of the task name. ++```HTML+<ListView row="2" class="list-group" for="todo in todos" @itemTap="onItemTap">+    <v-template>+        <GridLayout columns="auto, *">+            <Label col="0" text=" " />+            <Label col="1" :text="todo.name" textWrap="true" />+        </GridLayout>+    </v-template>+</ListView>+```++* **f.** Modify the `<TextField>` so that pressing `Return` on the keyboard is tied to its own method. Use the `@returnPress` property.++```HTML+<TextField col="0" row="0" v-model="textFieldValue" hint="Type new task..." editable="true" @returnPress="onReturnPress" />+```++* **g.** Create a new `onReturnPress` method that checks if the entered string is not empty and based on the result acts as if the **+** button was pressed.++```JavaScript+onReturnPress() {+    if (this.textFieldValue.trim() !== "") { // Trims the provided string and checks if it's not empty.+        this.onButtonTap(); // Acts as if the in-app button was pressed.+    }+}+```++<hr data-action="end" />++### Step 4. Always start the app on the To Do tab++Use the `selectedIndex` property of the `<TabView>` to ensure that the app always launches on the tab for active tasks.++<hr data-action="start" />++#### Action++* **a.** In the `data` section, create an `activeTabIndex` variable to represent the currently selected tab. Note that the tab counter starts from `0` and set the initial value of the `activeTabIndex` to `0`. This ensures that when the app loads after a restart, it will always start on the tab for the active tasks.++```JavaScript+activeTabIndex: 0,+```++* **b.** In the `<TabVIew>` definition, set the `selectedIndex` property and bind it to the `activeTabIndex` variable. Add the `selectedIndexChange` event listener to catch when the tab is being changed. ++```HTML+<TabView height="100%" :selectedIndex="activeTabIndex" @selectedIndexChange="onTabChange">+```++* **c.** In the `methods` section, handle the change in value for `activeTabIndex`. Note that the `selectedIndexChange` event emits an event object containing a `value` property with the index of the tapped tab.++```JavaScript+onTabChange(tab) {+      this.activeTabIndex = tab.value;+}+```++<hr data-action="end" />++At the end of this lesson, your `<template>` and `<script>` blocks should resemble this sample:++```HTML+<template>+    <Page class="page">+        <!-- Having an ActionBar lets you change the status bar color on iOS, even if the ActionBar isn’t being used. -->+        <!-- See https://docs.nativescript.org/ui/change-status-bar-style-ios for details -->+        <ActionBar title=" " flat="true" />++        <TabView :selectedIndex="activeTabIndex"+                @selectedIndexChange="onTabChange">+            <TabViewItem title="To Do" >+                <!-- Positions a header, an input field, a button, and the list of tasks in a vertical stack. -->+                <GridLayout rows="auto, auto, *">+                    <Label row="0" text="My Tasks" />++                    <GridLayout row="1" columns="3*, *" rows="auto">+                        <!-- Configures the text input field. -->+                        <TextField col="0" row="0" ref="taskInput" v-model="textFieldValue"+                            hint="Enter text..." editable="true" @returnPress="onReturnPress" />+                        <Button col="1" row="0" text="+" @tap="onButtonTap" />+                    </GridLayout>++                    <ListView row="2" class="list-group" for="todo in todos"+                        @itemTap="onItemTap">+                        <v-template>+                            <GridLayout columns="auto, *">+                                <Label col="0" text=" " />+                                <Label col="1" :text="todo.name" textWrap="true" />+                            </GridLayout>+                        </v-template>+                    </ListView>++                </GridLayout>+            </TabViewItem>+            <TabViewItem title="Completed">+                <Label text="This tab will list completed tasks for tracking."+                    textWrap="true" />+            </TabViewItem>+        </TabView>+    </Page>+</template>++<script>+    export default {+        methods: {+            onItemTap: function(args) {+                console.log("Item with index: " + args.index + " tapped");+            },++            onButtonTap() {+                // Trims the provided string and checks if it's empty.+                if (this.textFieldValue.trim() === "") {+                    this.$refs.taskInput.nativeView.focus(); // Returns focus to the text field.+                    return;+                }++                console.log("New task added: " + this.textFieldValue + "."); // Logs the string in the console for debugging.+                this.todos.unshift({+                    name: this.textFieldValue+                }); // Adds the item in the ToDo array. Newly added tasks are immediately shown on the screen.+                this.textFieldValue = ""; // Clears the text field so that users can start adding new tasks immediately.+            },++            onReturnPress() {+                // Trims the provided string and checks if it's not empty.+                if (this.textFieldValue.trim() !== "") {+                    this.onButtonTap(); // Acts as if the in-app button was pressed.+                }+            },++            onTabChange(tab) {+                this.activeTabIndex = tab.value;+            }+        },++        data() {+            return {+                // Pre-fill a few tasks just for testing purposes.+                todos: [{+                        name: "Feed dogs"+                    },+                    {+                        name: "Ride bike"+                    },+                    {+                        name: "Go grocery shopping"+                    }+                ],+                textFieldValue: "",+                activeTabIndex: "0"

Trivial, but this should be a number and not a string.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 5. Basic functionality: View, complete, and delete tasks from the To Do tab++Out-of-the-box, the `<ListView>` component detects a tap gesture for every item and emits an event for it. The event carries information about the index of the tapped array item and the array item itself. To let the user choose the outcome of a tap gesture and expand the functionality of your app, you can tie a dialog to the event.

Could not be more trivial, but I don’t think out of the box should be hyphenated when it’s not an adjective.

ikoevska

comment created time in 3 months

pull request commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

@tjvantoll Here's a version without the Button: https://play.nativescript.org/?template=play-vue&id=dNGLY8&v=7

Yeah I like this better. One thing—you should add returnKeyType="done" to the <TextField> to get a better looking return button.

While playing around with it, it occurred to me that we're lacking a "clear input" functionality from the text field :D However, I'm thinking it might be better to leave it to a v2 of the tutorial or a blog post or something.

Not sure I follow...

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 4. Basic functionality: Add tasks++The layout components let you arrange the various user interface widgets of your app. When you need to place more than one UI widget on your app screen, you are likely to use one of the available layouts. The `<GridLayout>` is a basic but versatile option, letting you position elements in a table-like manner. ++The `<GridLayout>` lets you choose the exact positions of your elements in the grid by setting the row and column they inhabit.++### Step 1. Create the layout++Replace the default layout with a combination of two `<GridLayout>` components and configure the grids to accommodate the remaining UI of your app.++<hr data-action="start" />++#### Action++* **а.** Delete the `<Label>` component from the first `<TabViewItem>` section.++> **TIP:**+> Saving at this point will cause the *Preview* app to crash. Save your changes at the end of the step.++* **b.** Drag and drop a `<GridLayout>` component within the `<TabViewItem>` section for the first tab.<br/>The default code creates a colorful table that shows how to position elements and merge grid cells.+* **c.** Delete all `<Label>` components from the newly added `<GridLayout>`.+* **d.** Drag and drop a new `<Label>` component in the `<GridLayout>` section. Change the text it shows to *My Tasks*.<br/>You can use this to create and control the header for the tab.+* **e.** Drag and drop a `<GridLayout>` component in the existing `<GridLayout>` section, right under the newly added `<Label>`.+* **f.** Delete all `<Label>` components from the newly added `<GridLayout>` section.+* **g.** Set the top-level `<GridLayout>` to consist of three rows.+* **h.** Configure the nested `<GridLayout>`.+    * Set the grid to consist of two columns and one row.+    * Remove any additional settings for the grid.++```HTML+<TabViewItem title="To Do">+    <GridLayout rows="auto, auto, *" >+        <Label text="My Tasks" />+        <GridLayout columns="auto, *" rows="auto">+            +        </GridLayout>+    </GridLayout>+</TabViewItem>+```++<hr data-action="end" />++### Step 2. Add and arrange the UI components++Arrange a `<TextField>` and a `<Button>` in the grid. They form the input functionality of the app.++Use a `<ListView>` to show newly added tasks below the input field.++Arrange all UI components in the grid by setting the row they inhabit.++<hr data-action="start" />++#### Action++* **a.** Drag and drop a `<TextField>` and a `<Button>` within the nested `<GridLayout>` section.<br/>The Playground adds JavaScript code to your code for the first time. Note the `data()` and `methods` sections added in the `<script>` block below. In next implementation steps, you will add code to these sections to create some of the app functionality.+* **b.** Drag and drop a `<ListView>` below the nested grid.<br/>The default code creates a list of countries and country flag icons.+* **c.** Configure the positioning of the components within the top-level grid.+    * Set the `<Label>` to inhabit the first row.+    * Set the nested `<GridLayout>` to inhabit the second row.+    * Set the `<ListView`> to inhabit the third row.++```HTML+<GridLayout rows="auto, auto, *">+    <Label row="0" text="My Tasks" />+    <GridLayout row="1" columns="3*, *" rows="auto">+        <TextField v-model="textFieldValue" hint="Enter text..." />+        <Button text="+" @tap="onButtonTap" />+    </GridLayout>+    <ListView row="2" class="list-group" for="country in countries"+        @itemTap="onItemTap" style="height:1250px">+        <v-template>+            <FlexboxLayout flexDirection="row" class="list-group-item">+                <Image :src="country.imageSrc" class="thumb img-circle" />+                <Label :text="country.name" class="list-group-item-heading"+                    style="width: 60%" />+            </FlexboxLayout>+        </v-template>+    </ListView>+</GridLayout>+```++* **d.** Configure the positioning of the components within the nested grid (the input area).+    * Set the `<TextField>` to inhabit the first column and the first row.+    * Set the `<Button>` to inhabit the second column and the first row.++```HTML+<TextField col="0" row="0" v-model="textFieldValue" hint="Enter text..." editable="true" />+<Button col="1" row="0" text="+" @tap="onButtonTap" />+```++* **e.** In the `<TextField>` definition, use the `editable` property to enable text input from the field. Set it to `true`.++```HTML+<TextField col="0" row="0" v-model="textFieldValue" hint="Enter text..." editable="true" />

editable="true" is the default, so this step is unnecessary.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 4. Basic functionality: Add tasks++The layout components let you arrange the various user interface widgets of your app. When you need to place more than one UI widget on your app screen, you are likely to use one of the available layouts. The `<GridLayout>` is a basic but versatile option, letting you position elements in a table-like manner. ++The `<GridLayout>` lets you choose the exact positions of your elements in the grid by setting the row and column they inhabit.++### Step 1. Create the layout++Replace the default layout with a combination of two `<GridLayout>` components and configure the grids to accommodate the remaining UI of your app.++<hr data-action="start" />++#### Action++* **а.** Delete the `<Label>` component from the first `<TabViewItem>` section.++> **TIP:**+> Saving at this point will cause the *Preview* app to crash. Save your changes at the end of the step.++* **b.** Drag and drop a `<GridLayout>` component within the `<TabViewItem>` section for the first tab.<br/>The default code creates a colorful table that shows how to position elements and merge grid cells.+* **c.** Delete all `<Label>` components from the newly added `<GridLayout>`.+* **d.** Drag and drop a new `<Label>` component in the `<GridLayout>` section. Change the text it shows to *My Tasks*.<br/>You can use this to create and control the header for the tab.+* **e.** Drag and drop a `<GridLayout>` component in the existing `<GridLayout>` section, right under the newly added `<Label>`.+* **f.** Delete all `<Label>` components from the newly added `<GridLayout>` section.+* **g.** Set the top-level `<GridLayout>` to consist of three rows.+* **h.** Configure the nested `<GridLayout>`.+    * Set the grid to consist of two columns and one row.+    * Remove any additional settings for the grid.++```HTML+<TabViewItem title="To Do">+    <GridLayout rows="auto, auto, *" >+        <Label text="My Tasks" />+        <GridLayout columns="auto, *" rows="auto">+            +        </GridLayout>+    </GridLayout>+</TabViewItem>+```++<hr data-action="end" />++### Step 2. Add and arrange the UI components++Arrange a `<TextField>` and a `<Button>` in the grid. They form the input functionality of the app.++Use a `<ListView>` to show newly added tasks below the input field.++Arrange all UI components in the grid by setting the row they inhabit.++<hr data-action="start" />++#### Action++* **a.** Drag and drop a `<TextField>` and a `<Button>` within the nested `<GridLayout>` section.<br/>The Playground adds JavaScript code to your code for the first time. Note the `data()` and `methods` sections added in the `<script>` block below. In next implementation steps, you will add code to these sections to create some of the app functionality.+* **b.** Drag and drop a `<ListView>` below the nested grid.<br/>The default code creates a list of countries and country flag icons.+* **c.** Configure the positioning of the components within the top-level grid.+    * Set the `<Label>` to inhabit the first row.+    * Set the nested `<GridLayout>` to inhabit the second row.+    * Set the `<ListView`> to inhabit the third row.++```HTML+<GridLayout rows="auto, auto, *">+    <Label row="0" text="My Tasks" />+    <GridLayout row="1" columns="3*, *" rows="auto">+        <TextField v-model="textFieldValue" hint="Enter text..." />+        <Button text="+" @tap="onButtonTap" />+    </GridLayout>+    <ListView row="2" class="list-group" for="country in countries"+        @itemTap="onItemTap" style="height:1250px">+        <v-template>+            <FlexboxLayout flexDirection="row" class="list-group-item">+                <Image :src="country.imageSrc" class="thumb img-circle" />+                <Label :text="country.name" class="list-group-item-heading"+                    style="width: 60%" />+            </FlexboxLayout>+        </v-template>+    </ListView>+</GridLayout>+```++* **d.** Configure the positioning of the components within the nested grid (the input area).+    * Set the `<TextField>` to inhabit the first column and the first row.+    * Set the `<Button>` to inhabit the second column and the first row.++```HTML+<TextField col="0" row="0" v-model="textFieldValue" hint="Enter text..." editable="true" />+<Button col="1" row="0" text="+" @tap="onButtonTap" />+```++* **e.** In the `<TextField>` definition, use the `editable` property to enable text input from the field. Set it to `true`.++```HTML+<TextField col="0" row="0" v-model="textFieldValue" hint="Enter text..." editable="true" />+```++* **f.** Clean up sample code from the `<ListView>`&mdash;remove the `<FlexboxLayout>` component and add a new `<Label>` in its place. Remove the height setting. Set `textWrap="true"` for the `<Label>` and retain the `:text="country.name"` binding to continue showing the list of countries.++```HTML+<ListView row="2" class="list-group" for="country in countries" @itemTap="onItemTap">+    <v-template>+        <Label :text="country.name" textWrap="true" />+    </v-template>+</ListView>+```++<hr data-action="end" />++At the end of this stage, your `<template>` block should resemble this sample:++```HTML+<template>+    <Page class="page">+        <!-- Having an ActionBar lets you change the status bar color on iOS, even if the ActionBar isn’t being used. -->+        <!-- See https://docs.nativescript.org/ui/change-status-bar-style-ios for details -->+        <ActionBar title=" " flat="true" />++        <TabView height="100%">+            <TabViewItem title="To Do">+                <!-- Positions a header, an input field, a button, and the list of tasks in a vertical stack. -->+                <GridLayout rows="auto, auto, *">+                    <Label row="0" text="My Tasks" />++                    <GridLayout row="1" columns="3*, *" rows="auto">+                        <!-- Configures the task input area. -->+                        <TextField col="0" row="0" v-model="textFieldValue"+                            hint="Enter text..." editable="true" />+                        <Button col="1" row="0" text="+" @tap="onButtonTap" />+                    </GridLayout>++                    <ListView row="2" class="list-group" for="country in countries"+                        @itemTap="onItemTap">+                        <v-template>+                            <Label :text="country.name" textWrap="true" />+                        </v-template>+                    </ListView>++                </GridLayout>+            </TabViewItem>+            <TabViewItem title="Completed">+                <Label text="This tab will list completed tasks for tracking."+                    textWrap="true" />+            </TabViewItem>+        </TabView>+    </Page>+</template>+```++### Step 3. Create the logic++Scroll down to the `<script>` block and examine the `methods` and `data` sections. Use basic JavaScript methods to create simple logic for adding tasks.++<hr data-action="start" />++#### Action++* **a.** From the `data` section in the `<script>` block, remove the `countries` array and create a new `todos` array for newly added tasks. Pre-fill the array with a few options.++```JavaScript+todos: [{+        name: "Feed dogs"+    },+    {+        name: "Ride bike"+    },+    {+        name: "Go grocery shopping"+    }+],+```++* **b.** Update the `<ListView>` to use the newly created array.++```HTML+<ListView row="2" class="list-group" for="todo in todos"+    @itemTap="onItemTap">+    <v-template>+        <Label :text="todo.name" textWrap="true" />+    </v-template>+</ListView>+```++* **c.** In the `methods` section of the `<script>` block, modify the `OnButtonTap` method.
 * **c.** In the `methods` section of the `<script>` block, modify the `onButtonTap` method.
ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 4. Basic functionality: Add tasks++The layout components let you arrange the various user interface widgets of your app. When you need to place more than one UI widget on your app screen, you are likely to use one of the available layouts. The `<GridLayout>` is a basic but versatile option, letting you position elements in a table-like manner. ++The `<GridLayout>` lets you choose the exact positions of your elements in the grid by setting the row and column they inhabit.++### Step 1. Create the layout++Replace the default layout with a combination of two `<GridLayout>` components and configure the grids to accommodate the remaining UI of your app.++<hr data-action="start" />++#### Action++* **а.** Delete the `<Label>` component from the first `<TabViewItem>` section.++> **TIP:**+> Saving at this point will cause the *Preview* app to crash. Save your changes at the end of the step.++* **b.** Drag and drop a `<GridLayout>` component within the `<TabViewItem>` section for the first tab.<br/>The default code creates a colorful table that shows how to position elements and merge grid cells.+* **c.** Delete all `<Label>` components from the newly added `<GridLayout>`.+* **d.** Drag and drop a new `<Label>` component in the `<GridLayout>` section. Change the text it shows to *My Tasks*.<br/>You can use this to create and control the header for the tab.+* **e.** Drag and drop a `<GridLayout>` component in the existing `<GridLayout>` section, right under the newly added `<Label>`.+* **f.** Delete all `<Label>` components from the newly added `<GridLayout>` section.+* **g.** Set the top-level `<GridLayout>` to consist of three rows.+* **h.** Configure the nested `<GridLayout>`.+    * Set the grid to consist of two columns and one row.+    * Remove any additional settings for the grid.++```HTML+<TabViewItem title="To Do">+    <GridLayout rows="auto, auto, *" >+        <Label text="My Tasks" />+        <GridLayout columns="auto, *" rows="auto">+            +        </GridLayout>+    </GridLayout>+</TabViewItem>+```++<hr data-action="end" />++### Step 2. Add and arrange the UI components++Arrange a `<TextField>` and a `<Button>` in the grid. They form the input functionality of the app.++Use a `<ListView>` to show newly added tasks below the input field.++Arrange all UI components in the grid by setting the row they inhabit.++<hr data-action="start" />++#### Action++* **a.** Drag and drop a `<TextField>` and a `<Button>` within the nested `<GridLayout>` section.<br/>The Playground adds JavaScript code to your code for the first time. Note the `data()` and `methods` sections added in the `<script>` block below. In next implementation steps, you will add code to these sections to create some of the app functionality.+* **b.** Drag and drop a `<ListView>` below the nested grid.<br/>The default code creates a list of countries and country flag icons.+* **c.** Configure the positioning of the components within the top-level grid.+    * Set the `<Label>` to inhabit the first row.+    * Set the nested `<GridLayout>` to inhabit the second row.+    * Set the `<ListView`> to inhabit the third row.++```HTML+<GridLayout rows="auto, auto, *">+    <Label row="0" text="My Tasks" />+    <GridLayout row="1" columns="3*, *" rows="auto">+        <TextField v-model="textFieldValue" hint="Enter text..." />+        <Button text="+" @tap="onButtonTap" />+    </GridLayout>+    <ListView row="2" class="list-group" for="country in countries"+        @itemTap="onItemTap" style="height:1250px">+        <v-template>+            <FlexboxLayout flexDirection="row" class="list-group-item">+                <Image :src="country.imageSrc" class="thumb img-circle" />+                <Label :text="country.name" class="list-group-item-heading"+                    style="width: 60%" />+            </FlexboxLayout>+        </v-template>+    </ListView>+</GridLayout>+```++* **d.** Configure the positioning of the components within the nested grid (the input area).+    * Set the `<TextField>` to inhabit the first column and the first row.+    * Set the `<Button>` to inhabit the second column and the first row.++```HTML+<TextField col="0" row="0" v-model="textFieldValue" hint="Enter text..." editable="true" />+<Button col="1" row="0" text="+" @tap="onButtonTap" />

The row="0" attributes are unnecessary for these two.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 3. Basic app design++The `components` > `HelloWorld.vue` file holds both the design and the code-behind logic. The `<template>` block nests all user interface components.++The `<Page>` component is the top-level user interface element of every NativeScript-Vue app. All other user interface components are nested within.++The `<ActionBar>` component shows an action bar for the `<Page>`. A `<Page>` cannot contain more than one `<ActionBar>`.++Typically, after the `<ActionBar>`, you will have navigation components (such as a drawer or a tab view) or layout components. These components control the layout of your app and let you determine how to place other user interface components inside.++### Step 1. Modify the action bar++Retain the `<ActionBar>` widget in your code. You will use it in another lesson to create some iOS-specific styling of the status bar.++Use the `flat` property to remove the translucency of the widget on iOS and its default border on Android.++<hr data-action="start" />++#### Action++* **a.** Change the title of the `<ActionBar>` and set the `flat` property to `true`.++```HTML+<ActionBar title=" " flat="true" />+```++<hr data-action="end" />++### Step 2. Create a two-tab app++Use the `<TabView>` component to create a two-tab app.++<hr data-action="start" />++#### Action++* **a.** Remove the default `<ScrollView>` section and all its contents that come with the template.<br/>`<ScrollView>` components are top-level layout containers for scrollable content.++> **TIP:**+> Saving at this point will cause the *Preview* app to crash. Save your changes at the end of the step.++* **b.** Drag and drop a `<TabView>` component in its place.<br/>When you drop the component, the Playground applies some code formatting, including taking care of indentation.

Just a note—when I first read this I was a bit confused about what “its place” was referring to. I eventually figured out you were referring to the ScrollView, but you might want to tweak the wording to give more explicit instructions.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 2. Developing your app++All development for this tutorial happens in `components` > `HelloWorld.vue`, containing the front end, the code-behind logic, and all of the styles.++`HelloWorld.vue` begins with a simple `<template>` block consisting of several labels and no connected code-behind logic. As you drag and drop user interface components to the `<template>` block, the Playground populates the `<script>` block.++You'll be working in the `<template>` block to design the user interface, in the `<script>` block to build the app functionality, and in the `<style scoped>` block to adjust some of the styling. ++* The `<template>` block requires NativeScript-compatible XML. 

Use “markup” instead of XML. Technically {N} markup in Vue isn’t XML, as things like @tap aren’t valid XML syntax.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 2. Developing your app++All development for this tutorial happens in `components` > `HelloWorld.vue`, containing the front end, the code-behind logic, and all of the styles.++`HelloWorld.vue` begins with a simple `<template>` block consisting of several labels and no connected code-behind logic. As you drag and drop user interface components to the `<template>` block, the Playground populates the `<script>` block.++You'll be working in the `<template>` block to design the user interface, in the `<script>` block to build the app functionality, and in the `<style scoped>` block to adjust some of the styling. ++* The `<template>` block requires NativeScript-compatible XML. +* The `<script>` block accepts both regular JavaScript, Vue.js-specific, and NativeScript-specific JavaScript.+* The `<style scoped>` block expects CSS, both regular CSS, and NativeScript-specific CSS.++Let's create a simple ToDo app with the following requirements:

I’d recommend having an image/gif of the final result of the app just to give the reader a visual of what they’re building. You might also want to put that gif at the very beginning of the tutorial so people have a sense of what they’re getting out of this content in general.

ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 1. Getting familiar with the Playground++![](images/nativescript-logo.png)++Welcome to the NativeScript-Vue getting started experience. In this lesson, you’ll learn how to use the Playground and how to get your very first NativeScript-Vue app running on your device.++> **TIP**:+> * If you run into problems with this tutorial, the [#vue channel in the NativeScript Community Slack](https://developer.telerik.com/wp-login.php?action=slack-invitation) is a great place to reach out for help.+> * Thе tutorial pane is collapsible and adjustable. Play around with its size until you find a width that works for you.++### Step 1. The lay of the land++The NativeScript Playground is a browser-based environment for developing simple NativeScript apps with any of the supported integrations. You can get straight to coding without installing the various SDKs and tools needed for native iOS or Android development. All you need to complete this tutorial is an iOS or Android device.++Before you get our hands dirty with actual NativeScript-Vue development, let’s see the NativeScript Playground in action.++<hr data-action="start" />++#### Action++* **а.** Look around the screen.++The left sidebar offers a file explorer and a **Components** panel. ++* **b.** Explore the file tree.++All work in this tutorial will happen in `components` > `HelloWorld.vue`, where you'll be creating the user interface and the business logic behind it.++* **c.** Check out the **Components** panel in the sidebar.++This panel provides quick access to already pre-configured code for all available NativeScript UI components. You can quickly add components to your app with drag-and-drop.++Through the search box (accessible through the magnifying glass), you can quickly get the components you want to use without scrolling through the list.++* **d.** Examine the top menu bar.++From the top of the page, you can push changes to the preview apps on your device (more about them later), save, and download your code.++* **e.** Get familiar with the bottom of the page.++The bottom of the page is your best friend, providing real-time error reports, device information, and device logs.++<hr data-action="end" />++### Step 2. Get all the tools++The Playground might have already prompted you to install a couple of mobile apps&mdash;the NativeScript Playground and the NativeScript Preview. Together they let you see your code changes applied in real time on device. No code building and bundling required.
 The Playground might have already prompted you to install a couple of mobile apps&mdash;NativeScript Playground and NativeScript Preview. Together they let you see your code changes applied in real time on device. No code building and bundling required.
ikoevska

comment created time in 3 months

Pull request review commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

+## Lesson 1. Getting familiar with the Playground++![](images/nativescript-logo.png)++Welcome to the NativeScript-Vue getting started experience. In this lesson, you’ll learn how to use the Playground and how to get your very first NativeScript-Vue app running on your device.++> **TIP**:+> * If you run into problems with this tutorial, the [#vue channel in the NativeScript Community Slack](https://developer.telerik.com/wp-login.php?action=slack-invitation) is a great place to reach out for help.+> * Thе tutorial pane is collapsible and adjustable. Play around with its size until you find a width that works for you.++### Step 1. The lay of the land++The NativeScript Playground is a browser-based environment for developing simple NativeScript apps with any of the supported integrations. You can get straight to coding without installing the various SDKs and tools needed for native iOS or Android development. All you need to complete this tutorial is an iOS or Android device.++Before you get our hands dirty with actual NativeScript-Vue development, let’s see the NativeScript Playground in action.++<hr data-action="start" />++#### Action++* **а.** Look around the screen.++The left sidebar offers a file explorer and a **Components** panel. ++* **b.** Explore the file tree.++All work in this tutorial will happen in `components` > `HelloWorld.vue`, where you'll be creating the user interface and the business logic behind it.++* **c.** Check out the **Components** panel in the sidebar.++This panel provides quick access to already pre-configured code for all available NativeScript UI components. You can quickly add components to your app with drag-and-drop.++Through the search box (accessible through the magnifying glass), you can quickly get the components you want to use without scrolling through the list.++* **d.** Examine the top menu bar.++From the top of the page, you can push changes to the preview apps on your device (more about them later), save, and download your code.++* **e.** Get familiar with the bottom of the page.++The bottom of the page is your best friend, providing real-time error reports, device information, and device logs.++<hr data-action="end" />++### Step 2. Get all the tools++The Playground might have already prompted you to install a couple of mobile apps&mdash;the NativeScript Playground and the NativeScript Preview. Together they let you see your code changes applied in real time on device. No code building and bundling required.++Without these apps, you'll miss out on the fun and excitement of playing around with Vue.js and NativeScript on an actual device.++Keep both apps running while you're experimenting with the code.++<hr data-action="start" />++#### Action++* **a.** Bring out your Android or iOS device. You need at least one device to complete this tutorial.++* **b.** Download and install the **NativeScript Playground** app on your device by searching the App Store or Google Play, or by using the links below.++[![](images/app-store.png)](https://itunes.apple.com/us/app/nativescript-playground/id1263543946?mt=8&ls=1)+[![](images/google-play.png)](https://play.google.com/store/apps/details?id=org.nativescript.play)++* **c.** Download and install the **NativeScript Preview** app on your device by searching the App Store or Google Play, or by using the links below.++[![](images/app-store.png)](https://itunes.apple.com/us/app/nativescript-preview/id1264484702?mt=8)+[![](images/google-play.png)](https://play.google.com/store/apps/details?id=org.nativescript.preview)++* **d.** Run the **NativeScript Playground** app on your device and tap **Scan QR code**.++![](images/scan-qr-code.png)++* **e.** In your web browser, in the top menu bar of the Playground, click **QR Code** .++![](images/generate-qr-code.png)++* **f.** Use your device and the currently running QR scanner to scan the QR code from your browser. After a few automatic switches between the apps, you should see an app that looks like the screenshots below.++![](images/ios-1.png)+![](images/android-1.png)++<hr data-action="end" />++### Step 3. Drag and drop to code++Adding UI components and the related code-behind logic is as simple as drag-and-drop.++![](images/playground-drag-and-drop.gif)++<hr data-action="start" />++#### Action++* **a.** Check your code editor. Is `components` > `HelloWorld.vue` currently selected? If you can't see its contents in the code editor, select the file from the file tree. Note that you don't need to double-click to open a file for editing.++* **b.** Just click a component from the **Components** panel and drag it to the code editor, somewhere inside the `<template>` block. Releasing the mouse button inserts some pre-written sample code for the respective component. Any methods that go with it (such as what happens on button or item tap) are automatically added below in the `<script>` block. For some components, additional styles are added in the `<style scoped>` block.
 * **b.** Next, click a component from the **Components** panel and drag it to the code editor, somewhere inside the `<template>` block. Releasing the mouse button inserts some pre-written sample code for the respective component. Any methods that go with it (such as what happens on button or item tap) are automatically added below in the `<script>` block. For some components, additional styles are added in the `<style scoped>` block.
ikoevska

comment created time in 3 months

pull request commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

For the second issue above, I can get the plus text to appear if I play with the padding of the button a bit, but it’s a bit tricky to get perfect on iOS and Android.

Playing with this made me wonder whether we need the button there at all though. I think it would clean up the design and UX a bit to drop it. Thoughts? Not sure exactly what effect it’ll have on the tutorial.

ikoevska

comment created time in 3 months

pull request commentNativeScript/playground-tutorials

[WIP] Create NativeScript-Vue tutorial

@ikoevska Awesome, this looks great! I’ll read through the tutorial in detail later today, but just to address your questions first.

I need to link to a location that hosts the icons archive for Lesson 11 (the icons used for the tabs).

How about we toss a .zip of the images into this tutorial’s existing images folder? That way the icons live with the tutorial, and we can just use GitHub to host/serve the zip.

We need to put the final code somewhere for reference (I'm OK w/ using the current location. I'll probably just need to rename it).

Yeah just rename and I think you’re good.

I probably need someone to take a look at the metadata and the success files. For success, I've used some placeholder text from other tutorials but we could probably link to something nice as week.

Yep I can help with this.

Since you said you tested on iOS I went ahead and ran this on Android.

screenshot_20190103-092744

I only see two issues.

  1. The bottom border on the TextField looks odd. You can fix that by adding border-width: 1; border-color: transparent; to the existing TextField CSS styling.
  2. The plus text on the button is randomly gone. I’ll play with this one a little because it’s... odd.
ikoevska

comment created time in 3 months

PR opened tylerablake/MCU-Angular-Demo

Fix to the pager plugin import
+1076924 -370520

0 comment

24688 changed files

pr created time in 3 months

create barnchtjvantoll/MCU-Angular-Demo

branch : pager-fix

created branch time in 3 months

fork tjvantoll/MCU-Angular-Demo

Test for NS Marketplace Demo App

fork in 3 months

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha 9ccd04467c02ea6db95d0d0c6aaf43cae0d73fef

Updates

view details

push time in 3 months

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha c49827049833e7db3881d2b80c3a05555374dd05

Playing with icon sizing and fixing the sort

view details

push time in 3 months

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha 8bcb077ee395f7553c959ea3eb8efd71dd67cceb

Updates

view details

push time in 3 months

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha 9b90c747715a1ea9c7719db72c3d99d6b91dbb31

Bumping up the select font size for iOS zooming

view details

push time in 3 months

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha da74a65c16606eb61d9f5630b74206d1b63377d2

Updates

view details

push time in 3 months

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha d20f0e79bcb673372ce81259754db85b9ba27e2d

Updating some of the styling

view details

push time in 3 months

push eventtjvantoll/ShinyDex

TJ VanToll

commit sha eeb1e30b40b014a3c9371dd31010dc59d5e028a4

Updates

view details

push time in 3 months

more