Hi,
This post is a bit long and contains multiple questions, but all are related.
I am having difficulties creating a multi-component navigation and structuring the application in the way I need.
I want to create an application with the following views:
- Splash Screen (to be shown for a couple of seconds every time the user opens the application)
- One time only welcome page (to be shown only the first time the user. I know I can control this using a flag and storage)
- 3 tab swipe navigation and EdgeNavigator with DirectNavigation.
I want to structure the application by feature and separate the JavaScript from UX. I want to organize it by folders. I also want certain pieces of JavaScript to be available globally, while the rest is specific to each view.
This is the structure I am aiming for:
-
folder “splash”
- .ux
- .js
-
folder “welcome”
- .ux
- .js
-
folder “edge_navigation”
- .ux
- .js
-
folder “tabs”
- .js (common tabs JavaScript)
- folder “tabs 1”
- .ux
- .js
- folder “tab 2”
- .ux
- .js
-
Main.js
-
Common.js
-
MainView.ux
So I have multiple questions:
How is the best way to achieve the type of navigation that I need?
How do I separate the multiple pieces of code?
Based on the example https://www.fusetools.com/community/examples/pageslist, I have tried separating multiple pages info files and using Direct Navigation to navigate but without success.
More or less this code in the MainView.ux plus some JavaScript:
-DirectNavigation Active="{currentPageHandle}"/-
-Splash Visibility="{splashControl}" /-
-Page 1 /- (Page1.ux containing -Page Name=“page1”-…-/Page-)
-Page 2 /- (Page2.ux -Page Name=“page2”-…-/Page-)
This does not work.
As a final comment, all the examples available show how to do things in one .ux file. I don’t want to have a 10000 line .ux file.
I would really like some advanced example for structuring the application and multi-component navigation.
Thanks.