Multiple .gui files for multiple screens?

[thinksInCode]

I couldn't find any information in the documentation about making an app that has more than one screen. Is this something that is possible? Can you have multiple .gui files for each different view? How are you guys accomplishing this?

Thanks!

[allyann · Accepted solution]

https://community.fitbit.com/t5/SDK-Development/Wanted-example-of-multiple-UI-views-and-back-navigat...

[gaperton]

Yes, you can do it. Here's how index.gui of my app looks like.

<svg>
  <link rel="import" href="loading/index.gui" />
  <link rel="import" href="history-view.gui" />
  <link rel="import" href="radar-view.gui" />
  <link rel="import" href="fields-view.gui" />
</svg>

In each of view.gui file, you put `display="none"` to the root tag and then switch the screens manipulating with the root.style.diplay.

This, in fact, is exactly what this small library does. It implements hierarchical subviews pattern, helping you to control the mess you'll have when there will be many views in your code. https://github.com/gaperton/ionic-views#class-application

[sarashinai]

In case someone stumbles onto this thread, like I did, some clarification.

allyann's link is discussing a more complex topic but does give a good example of how to switch between multiple screens, it lacks an explanation about how to set them up in the first place.

Start with gaperton's answer first. Once the screens are set up, then you can look at allyann's link for how to go from one to the other.

An important note (you'll see this discussed in the thread that allyann linked to), there are two ways to hide/show screens; display="none"/"inline" and visibility="hidden"/"visible".

These two act in different ways and can affect how your app functions. Take a look at https://www.lifewire.com/display-none-vs-visibility-hidden-3466884 for a good discussion of the difference and how it can affect your app's behaviour.

[Sergius]

I've written a small module to manage different views and navigation between them and passing data.

Take a look at https://github.com/SergioMorchon/fitbit-views

You can see a working example here: https://github.com/SergioMorchon/fitbit-geolocator/tree/master/app

It worth it to say that Fitbit introduced a new `document.replaceSync` function to load on demand the GUI files, and that module I posted above takes advantage of that.