# Advanced multi-component navigation and application structure

**URL:** https://forums.fusetools.com/t/advanced-multi-component-navigation-and-application-structure/1027
**Category:** How-to Discussions
**Created:** [November 6, 2015, 7:39am UTC](https://forums.fusetools.com/t/advanced-multi-component-navigation-and-application-structure/1027 "2015-11-06T07:39:46Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![AppMaker](https://avatars.discourse-cdn.com/v4/letter/a/59ef9b/32.png) [@AppMaker](https://forums.fusetools.com/u/AppMaker)
#### Post date: [November 6, 2015, 7:39am UTC](https://forums.fusetools.com/t/advanced-multi-component-navigation-and-application-structure/1027/1 "2015-11-06T07:39:46Z")

</div>

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”

- folder “welcome”

- folder “edge\_navigation”

- folder “tabs”

- 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](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.

---

<div class="post-metadata">

### Author: ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)
#### Post date: [November 6, 2015, 9:09am UTC](https://forums.fusetools.com/t/advanced-multi-component-navigation-and-application-structure/1027/2 "2015-11-06T09:09:18Z")

</div>

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

! [file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/1Sgauq5GLgnh-legacy-files-eWAXYnHxZ5kO2QDM-PdBDaNCwpS89Sgo4ak8U-o8t.zip)

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

[https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/1Sgauq5GLgnh-legacy-files-eWAXYnHxZ5kO2QDM-PdBDaNCwpS89Sgo4ak8U-o8t.zip](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/1Sgauq5GLgnh-legacy-files-eWAXYnHxZ5kO2QDM-PdBDaNCwpS89Sgo4ak8U-o8t.zip)

)

---

<div class="post-metadata">

### Author: ![AppMaker](https://avatars.discourse-cdn.com/v4/letter/a/59ef9b/32.png) [@AppMaker](https://forums.fusetools.com/u/AppMaker)
#### Post date: [November 6, 2015, 11:19am UTC](https://forums.fusetools.com/t/advanced-multi-component-navigation-and-application-structure/1027/3 "2015-11-06T11:19:10Z")

</div>

Thanks I will look into it.

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