NativeScript Drawer for Android/IOS phone (clear Angular project)
I try to use for my Android phone application RadSideDrawer, but faced with a lot of various troubles and decide to migrate to another drawer. I found this Drawer https://github.com/nativescript-community/ui-drawer, this is cool workable program, but repository unable to used clearly and all referenced libraries are expired, but maybe most difficult to practical using is WebPack Config, looking to this, is it really?
And used libraries are expired and project used trash variables what distorts logic
Therefore I decide to prepare clear Angular project with modern libraries without trash variables and without trash Webpack config - https://github.com/Alex-1347/NativeScript-DraverDemo
1. About selecting Angular for Android NativeScript projects.
And I want notice more about this project. First notice - why I used Angular?
Because Angular is simplest way to transform HTML to dynamic Javascript (with Binding syntax), look please to this screens (first row is pages, second row is Angular supported pages, third row is Webpack starter, Angular starter, and Webhook to live replace module and debugging)
Unfortunately, in practice this simple idea became more and more complex and sophisticated, because Angular has:
- 146 main classes https://angular.io/api?type=class with dozens methods and parameters on each
- 67 complex constants https://angular.io/api?type=const
- 19 main decorators https://angular.io/api?type=decorator, each has a lot of parameters, need to correctly tune its
- 45 directives https://angular.io/api?type=directive, each of them need correctly tune and each of them has complex syntax
- 3 elements https://angular.io/api?type=element
- 4 block functions https://angular.io/api?type=block, this entity allow replace JS functions to native Angular functions
- 23 special enums https://angular.io/api?type=enum
- 157 functions https://angular.io/api?type=function, including very complex and sophisticated
- 159 strong and sophisticated interfaceshttps://angular.io/api?type=interface
- 29 packageshttps://angular.io/api?type=package, basic Angular functionality grouped to 29 packages, and this is only simplest basic functionality, you will always need additional packages
- 13 pipes https://angular.io/api?type=pipe - this special patterns you need to use in Html-templates
- 20 moduleshttps://angular.io/api?type=ngmodule, this is also a way to group Angular functionality
- 69 special aliaseshttps://angular.io/api?type=type-alias
So, as you can see - simple solution reduced to more complex problem than solution must be resolved. And additionally, mobile pages is not a SPA pages, because each activity (in Android term) has own URL.
Btw, NS Android framework has 3 way to navigation from pages to pages:
And Navigation Components looks as Windows Desktop components, navigation methods not looks as SPA pages, each navigation has methods forward and back
Therefore, maybe, just using Typescript with <template>: The Content Template element - look as more simple way to programming, if you not familiar in Angular. In this way you don't need know more than just Html-DOM manipulations by JavaScript.
However, I select Angular for my Android NativeScript projects.
2. About preparing NS programming environment
First preparing step is install last version of Native script and check correct installation by ns doctor. Usually this is complex step started from preparing computer BIOS Virtualization on my developer computer (ASUS PRIME B550-PLUS, AMD AM4 Ryzen 7 5700G). Than need to setup correct environment variables what need to NS project, than last JAVA version with setup all related variables correctly.
Unfortunately this is not all we need, before we can create first projects:
We need to make other steps. First step is update all Android programming environment.
Why this is so important? Because NS is referenced to native Android components, to native Android library and used Gradile script to build application
Than need to update Virtual device and finish setup on it.
Only all of that steps ws be completed correctly - Webpack will correctly prepared project.
3. About Debugging Android NativeScript projects.
For my opinion, speculative (without debugging and looking by eyes all variables), any programming in so complex and sophisticated environment is impossible. So, debugger is main point, point number one for programming in this environment. Fortunately, debugger working fine and allow to see and perform any function.
4. About Checking result on phone.
Of course you need to set permission to run your application on phone, Android GUI using strange place to set up this permission - Forward.
And return back to normal permission
5. About Drawer.
And finally a couple screens about relation with this Drawer screen and source TypeScript code:
And all init/bootsrap/startup code:
Pay attention - swipe gesture is supported - MobilePhone programming. Touchscreen device with finger VS browser with mousePiinter. and TAP is working !
6. About Authors of this Drawer.
This driver was written by some programmers from https://www.akylas.fr/
And this driver used gesture handled, this even more complex and sophisticated code written by Martin Guillon, founder of https://www.akylas.fr/
However, common idea is very simple - need to receive reference to native elements (different on IOS and Android) and than manipulate layers (with animations) by gesture. And finally inject all code to Angular engine. This is strong and impossible task for me now, I can only using this code in my projects, therefore I so exciting of this code and decide to publish it to more clear project with my explanation.
As I can see, Martin Guillon working for this project since 2012 year, now this is 12 years. I going in another way, opposite to him I make 15-20 projects in each years, and each my project has unique environment and even different language, for example this is my list of project from 2023 year - List of my small freelance project 2023 (and this is only small parts what I complete in 2023 year). Therefore I can just only little changing, adapt and implementation this code on my projects.
7. Useful links.
- https://nativescript-community.github.io/ NS Community UI items
- https://market.nativescript.org/
- https://market.nativescript.org/plugins/nativescript-popup/
- https://market.nativescript.org/plugins/nativescript-clipboard/
- https://developer.android.com/reference/kotlin/androidx/compose/material/icons/Icons
- https://web.archive.org/web/20171031105029/http://androiddrawables.com:80/ All Android Icon preview
- https://developer.android.com/reference/android/R.drawable#ic_menu_view All Android Icon names
- (2024) NativeScript Mosaic
- (2023) NativeScript and Android troubleshooting.
- (2024) NativeScript and Angular form
- (2024) NativeScript Drawer for Android/IOS phone (clear Angular project)
- (2023) Magic deployment Android application with NS Preview.
- (2022) Up and running Angular application on Android mobile phone with NativeScript.
- (2022) My NativeScript learning conspectus.
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |