Advanced multi-component navigation and application structure


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, 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.


Here is an example, which show separation, and showing a Splash for 3 seconds.

! file

(Looks like the auto link didn’t work here it is:


Thanks I will look into it.

I edit my post a bit, I noticed some formating issues.