Tab bar navigation example problem

General
1

Hello,

I’ve encountered problem after problem while developing my app today (most of them I fixed), and I started looking at some navigation examples to improve the navigation in my app. I stumbled upon tab bar navigation (https://www.fusetools.com/examples/tab-bar-navigation), which looked like something I could need.

I then proceeded to copy the code provided to my project and started messing around with it. However, after struggling for about an hour or so, I still can’t, for the love of me, figure out how I’m supposed to use multiple, different pages with the code provided?

<JavaScript>
  var pages = [
      {"name":"page1", "highlight":"#34495e", "icon":"Assets/icon-hexagon.png"},
      {"name":"page2", "highlight":"#3498db", "icon":"Assets/icon-star.png"},
      {"name":"page3", "highlight":"#aa3377", "icon":"Assets/icon-square.png"},
      {"name":"page4", "highlight":"#88cc22", "icon":"Assets/icon-triangle.png"}
  ];
  module.exports = {
      pages: pages,
      pageCount: pages.length
  };
</JavaScript>

<Page ux:Class="MyPage">
   <ResourceFloat4 Key="Highlight" Value="{highlight}" />
   <FileImageSource ux:Key="Icon" File="{icon}" />
   <Image File="Assets/FuseLogo.png" StretchDirection="DownOnly" />
</Page>

...

<PageControl ux:Name="pages">
   <Each Items="{pages}">
       <MyPage />
   </Each>
</PageControl>

As the pages are iterated using a loop, I’ve no clue as to how to use different pages, any help would be appreciated, as I’m starting to get frustrated.

2

Hi Kodemikkel,

a frustrated Kodemikkel is definitely not something that we want to see, so let’s get cracking!

The only thing that appears to be a question is the how to use different pages part, but honestly I don’t really understand what the question is. The basic structure of the example is there, the pages are defined in JavaScript and you seem to be good to go… so where’s the problem exactly?

3

It might be that I’m misunderstanding or missing something basic here, but in the example every page is equal. All pages have the same content, apart from the color and icon. How would I go about creating pages with different content? Let’s say I want a page with a button and a different page with some text.

I see that all pages are created using MyPage class, but would it be possible to define the pages using one class for each page, or is the difference in content limited to what you define in the JavaScript array?

4

Oh yes, you totally can do that.

I personally would first add another property (which identifies the template to be used) to the page objects in JS, like so:

var pages = [
  {name:"page1", type:"styleOne", highlight:"#34495e", icon:"Assets/icon-hexagon.png"},
  {name:"page2", type:"styleTwo", highlight:"#3498db", icon:"Assets/icon-star.png"},
  {name:"page3", type:"styleOne", highlight:"#aa3377", icon:"Assets/icon-square.png"},
  {name:"page4", type:"styleTwo", highlight:"#88cc22", icon:"Assets/icon-triangle.png"}
];

… note the new type property with two possible values.

And then I would improve the Each to work with multiple templates and match on the new type property we just created:

<Each Items="{pages}" MatchKey="type">
   <MyPage ux:Template="styleOne" />
   <SomeOtherPage ux:Template="styleTwo" />
</Each>

and finally, I would of course create a ux:Class for the new SomeOtherPage thing I just invented.

Hope this helps!

5

Aaah, got it to work using what you said.

Thanks! :slight_smile: