(FRONT) FRONT (2024)

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.



(CSS) 2. Use CSS animation with Keyframes.



(Nativescript) 3. 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) 4. Center Splash screen with stretch="aspectFit" .



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



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



(Nativescript) 7. Confirm dialog.



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



(Nativescript) 9. Use GridLayout with column definition.



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



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



(Nativescript) 12. Align Action bar Items with column definition and Col property.



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



(Nativescript) 14. Setup global variables and open link on external browser.




(Nativescript) 15. Set Image style and source dynamically.



(Nativescript) 16. Use [src] to bind custom image loader on each rows of ListView.



(Nativescript) 17. SetTimeout to wait while device refreshing rows.



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



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



(Nativescript+Angular) 20. Detect Android WellKnownfolders.



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



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



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



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



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



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



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



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



(Angular) 29. Pass this cross services to access to class variables.



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



(Typescript) 31. Check variables is empty, blank or null.



(Android) 32. 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)



(Android+Nativescript) 33. Translate logical NS application path to native Android path.



And this is wrong way without translation.



More about androidx.documentfile module what make translation - Prepare Nativescript bundle to publishing Google Play console (debug/release troubles).

Happy programming!






Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23
Link to this page: http://www.vb-net.com/NativeScriptMosaic/Index.htm
<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>