NativeScript Mosaic

In this page I will collected some NativeScript recipes. I like similar analyses, but usually make it about Visual Basic and Asp.net, for example ASP.NET MVC Handbook, but currently I decide make similar analysis to Nativescript programming, because Nativescript programming is sophisticated mix of Angular/Typescript/Android/Html/Css and own Nativescript programming features. Therefore currently this is most interesting programming type for me.

But sorry, at this moment I have no time to details description, therefore this page will be "screenshot only".

(Android) 1. Use Android studio as Android device File Inspector, as process killer in order to restart Android VM, and use Wipe as restart device emulator.

(Nativescript) 2. Community UI Canvas

https://github.com/nativescript-community/ui-canvas/ working fine with Angular, but this is very restricted version of Canvas and commonly not exposed all Android Canvas methods.

Module working, but I don't understand how to access to native Canvas Android methods, also has Angular bug with reference to @ViewChild to native Android Canvas, therefore need special initialization and reference to Canvas is possible only as $this from template. Option to save image from Screen is absent.

This means, module workable, but can applied to very restricted kind of tasks, this is not full Html Canvas or Android Canvas.

(Nativescript) 3. Center Splash screen with stretch="aspectFit" .

(CSS) 4. Use CSS animation with Keyframes.

(Angular+Nativescript) 5. Animated navigation from page to page.

(Nativescript) 6. Use Screen to calculate device screen property

(Typescript+Nativescript) 7. Fast Popup warning for 1 second (with justifyContent="center").

(Nativescript) 8. Confirm dialog.

(Angular) 9. Two way of manipulate Html-item visibility (with [ngStyle]="{'visibility':isVisible ? ...} and [style.visibility]="isIconOpened ? ...")

(Angular) 10. Change background image with [ngStyle]="{'background-image':isUrlOpened ? ... }

(Nativescript+Angular) 11. Open field to modification with longPress gesture.

(Nativescript) 12. Make TextBox multiline and use Enter as end line with returnKeyType property.

(Angular) 13. Angular one way property binding - () from form to code and [] from code to form. For example [editable] property of Textbox.

(Angular) 14. Use JS expression with Angular [property]

(Android) 15. Directly using Android System Icon by name without implicit define image

Look links on this page NativeScript Drawer for Android/IOS phone (clear Angular project)

(Angular) 16. Use @ViewChild as reference to native Android element.

(Angular) 17. Inject service to constructor and use [] bind to array of injected items. Use ng-template as items of ListView

(Angular) 18. Use Angular let-i variable in Angular ng-template directive to calculate even/odd rows. And use {} expression with [ngClass].

(Nativescript) 19. Use GridLayout with column definition.

(Nativescript) 20. Use GridLayout with row definition rows="auto, *" and style="vertical-align: bottom;" to stick item to screen bottom.

(Nativescript) 21. Center warning screen with FlexboxLayout justifyContent="center" alignItems="center" inside GridLayou

(Nativescript) 22. Align Action bar Items with colum definition and Col property.

(Nativescript) 23. Tune TextBox with hint/required/autocorrect/secure/autocapitalizationType property

(Angular) 24. Pass array to router navigation component.

(Typescript) 25. Use JS Spread syntax to pass one array to another.

Happy programming!

<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>