Monthly Archives: August 2016

NativeScript: CSS Selectors & Pseudo Selectors in 2.2.0

The NativeScript team released a feature under the cover of dark; not even listed in the change log; but Panayot; did a refactoring of the CSS selector system in NativeScript. With his changes he has not only sped up the selector code in most cases but he added some additional features like

[myAttrib="yes"] > .figure { color: red; }

And fixed several things that were broken in earlier versions like:

 .android.landscape  Button {  background-color: blue; }
.landscape.ios Button { background-color: green; }

If you understand why this is so important; this opens up CSS a LOT.   For example; I have two plugins; nativescript-orientation, and nativescript-platform-css.    Orientation automatically will put landscape as a class of the <Page> when you are in landscape mode; this allows you to have custom css for landscape mode.   It allows a lot of flexibility.   However, when I created the platform-css plugin it automatically adds ios or android to the Page classes.  Again this added a lot of flexibility as you could in a single css file do:

Button.ios { margin: 20; }
Button.android { margin: 15; }

To allow you to style the buttons so they look properly on each platform.   However the OLD CSS style system would not detect that "landscape ios" should use the rule:

.landscape.ios Button {}
or
.ios.landscape Button {}

So, originally  I had to add a HACK to my NS-orientation plugin to detect if you were using my platform-css plugin so that it could create a special css class rule to allow the second rule (.ios.landscape) to work as expected.   Now with the all new css selector system in 2.2.0; it all works properly; and ALL variations of the rules are valid and I don't have to do anything extra!

Major Kudos from me to Panayot!   This fixed a number of other weird CSS corner cases that have been in the issues list for a while.  So this was a imho one of the best new features of 2.2.0...

Now, there is another awesome new feature that Panayot did; he has pseudo selectors; at this moment the button now supports both a normal state and a highlighted state.  So you can do:

Button:highlighted {
background-color: cyan;
}nativescript-pseudo

And the button will change to a cyan background when clicked and on Android 5+ you will still even get the ripples!    Awesome job Panayot!

NativeScript: Debugging the Android Build Process

I've seen this error myself a couple times and it appears that several others have ran into it..   You type something like tns run android or tns build android and it gives you an error about some process failing to build -1 error and to try a --stacktrace to see more info...  Not entirely helpful.   How do you do a --stacktrace?

So let me tell you how to actually do a --stacktrace; the magic is simple, but not obvious.

You need to do the following:

cd platforms/android
./gradlew buildapk --stacktrace

Pretty simple once you know it...   This is what TNS uses to actually do the building part of the process; so when it fails; you need to manually run the process with the --stacktrace parameter.  This will NORMALLY give you why it failed; however there are cases where it doesn't.   So in those cases you try this command next:

./gradlew buildapk --stacktrace --info

And if that fails; then you try the really realllllllly reallllllllllly verbose output command:

./gradlew buildapk --stacktrace --debug &gt; somefile.txt

Then open up the text file in some editor that can handle 5 megs of text and search for the first occurrence of "failed" will typically give you why it failed....

One interesting issue that I ran into the other day helping a buddy of mine...   TNS seems to assume that anything not listed as a DevDependancy is a Dependancy; this can cause serious issues sometimes with things that actually should NOT be compiled into the app.   TNS builds a module using gyp; and gyp requires tar and tar-pack.  The authors of tar & tar-pack decided that the npm modules should have tests included in them (what????  Are you crazy?) and these tests have .tgz and .gz files in it.   Unfortunately these .tgz and .gz files will cause the android tools to fail in a lot of cases when it attempts to process them.

So there is two ways to solve this issue:

  1. Add tar & tar-pack to your dev-dependancies.
  2. Manually enter your node_modules folder; and find tar/tar-pack and then delete the test folders.

In my opinion adding those two modules to your dev-dependancies simplifies things and then you don't forget about them at some later point if you have to reinstall your modules...

NativeScript: Version 2.2.0 released

ns-2.2.0For those living in a dungeon hacking out code; guess what was released by those fine wizards at Telerik today!     Yes, you got it - v2.2.0 of NativeScript is now available!   Upgrade Instructions below.

As usual; if you run into any issues I will be putting any common issues at the bottom of this post as I and others run into them....

New or Fixed Features:

  • Android now properly supports some the of the Java classes that were broken in 2.1 (Major)
  • Nested Bindables
  • Letter Spacing is now all in EM Units (CSS: letter-spacing)
  • CSS supports new properties, more selectors and even pseudo selectors (Major)
  • Android Launch Screen Support
  • Observable's are now auto-nesting (this can cause a breaking changes -- see known issues below)

A Lot of other smaller bug fixes and enhancements went into place; unfortunately the really big feature for 2.2.0 has slipped -- threads.   It was bigger than a single point release could handle; I've seen progress on both Android and iOS on this front; so I have high hopes it will make it in 2.3.0...

Upgrading:

First of all to upgrade is done is a couple steps:
> npm install -g nativescript
> npm install tns-core-modules@latest --save

For Android:
> tns platform remove android
> tns platform add android

For iOS
> tns platform remove ios
> tns platform add ios

Then you can type tns info and verify that everything says v2.2.x

 

Common Issues

Nested Observables might throw an error

(iOS) TypeError: Cannot set property 'disableNotifications' of undefined
(Android) TypeError: undefined is not an object

If you have objects like

var x = new Observable({
y: new ObservableArray([])
});

This will probably throw the above error; eliminate the nesting; and make the structure like this:

var x = new Observable({
y: []
});

Github issue: https://github.com/NativeScript/NativeScript/issues/2457

x86_64 bit Emulator on iOS might crash on code that is fine.

Error:

Service exited due to signal: Segmentation fault: 11

Solution: Switch to a 32bit emulator like the iPhone 4s.

Github Issue: https://github.com/NativeScript/ios-runtime/issues/622

 

Angular 2 cssClasses Incompatibility

ORIGINAL EXCEPTION: TypeError: _this.cssClasses(...).set is not a function

You need to upgrade your NativeScript-Angular version to the latest version; the older version which worked with v2.1.0 of NativeScript is incompatible with v2.2.0. You should be able to do a

> npm install nativescipt-angular@latest --save

 

Introducing tns-template-plugin

If you create plugins, I've created a awesome shell that will basically build out your entire plugin folder structure after asking you a couple questions.   This is standalone, you don't need anything beyond what you should already have (npm/node).   It has ability to create plugins in a variety of ways...

It will automatically create (and embed info inside them):

  • License
  • Readme
  • Source code file(s)
  • Demo
  • tsconfig (if needed)
  • package.json
  • ignore files
  • Additional support files

The plugin generator will asks you about 10 questions initially; but it is smart enough to save the common ones (like name, email, github) so that in the future it won't need to ask you again.   In addition to being able to generate complete plugins for both JavaScript and TypeScript, it can also use your own "masters" of the files to generate the plugin if you have your own basic look/feel for all those files.

To use is very simple:

git clone https://github.com/NathanaelA/tns-template-plugin nativescript-somename
cd nativescript-somename
npm start

Answer some questions, and bam you have a full plugin all designed and ready for git and npm...

My goal is to be able to eventually do a tns plugin create somename or tns create nativescript-somename --template plugin and I have a enhancement report in the CLI repo to allow this; but until that time, you can do the three steps above...

NativeScript: Declarative UI not updating?

stop-nsThis is just a heads up so that others don't waste the time I wasted; trying to figure it out...

So, I've been working all day on a really cool NS app for a client; made LOTS of graphical changes;  Gradients, shadows, borders, opacity, custom built fonts, themes, tap effects, etc -- looks and acts really sweet...

So I start the app up again and it changes several fields frequently so all of a sudden the display appears locked up; none of the values are changing while just watching it...   I click on a button and the display updates; properly.  Weird.  So I do it again, and again it freezes about 10 seconds into doing updates; interacting with certain things in the app and bam the display starts updating again; and 5 seconds later it the ui stops and is no longer updating again...   Argh...  Inconsistent issues are hard to trace..

So I run the copy of the app that I had deployed to my actual phone from this morning; and everything works great -- not as pretty; but no display glitches.

Ok, so now I'm thinking some change I did has broken the Observables some how, maybe the Obs notification is crashing, or being eaten.  So I start debugging and basically waste about a bit of time tracing things back and even add code to verify that the Observable is sending property change notices properly...   So, after doing a bit of work, everything programmatically looks correct; everything is still bound, the binding context is still valid; the Observable is sending the updates properly; everything looks correct in memory; just the labels don't update...

I start writing up an issue in the NS repo to ask for some more pointers on how to trace down why an Observable is sending notifications, the label is bound and listening; and the label actually shows the updates for a random numbers of seconds but then just randomly stops updating (but can be "kicked" by doing things in the app)..  Yes, that weird of a problem.

Well, before I finish writing up the issue I decide to try a hail-mary as my dad would say.  I killed the emulator; started it back up and....   Everything works....    Ugh, wasted a lot of time; but the good new is it wasn't my app -- my app works great...

So the point of this story -- if you start getting any unexpected random display update glitches; try rebooting the emulator...