(FRONT) FRONT (2024)

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:

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.





Comments ( )
Link to this page: http://www.vb-net.com/NativeScript-Drawer/Index.htm
< THANKS ME>