Split Tabs example on to different pages

How-to Discussions
1

Hello!
Could you please help and give an example (or basic approach) how to modify this example (https://www.fusetools.com/examples/tabs-layoutmaster) to have each page in separate files (ux and js)

Thank you very much

2

Hi Petr,

here’s one way to do it:

<App Background="#eee">

    <Panel ux:Class="Tab" ClipToBounds="false" Margin="0,0,0,4" Background="#bdc3c7">
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#FFF" Alignment="Center" />
    </Panel>

    <Rectangle ux:Name="indicator" LayoutMaster="page1Tab" Alignment="Bottom" Height="4" Color="#6c7a89">
        <LayoutAnimation>
            <Move RelativeTo="WorldPositionChange" X="1" Duration="0.4" Easing="BackIn"/>
        </LayoutAnimation>
    </Rectangle>

    <Text ux:Class="WelcomeText" FontSize="30" Alignment="Center"/>

    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />

        <Grid Dock="Top" ColumnCount="3" Height="50" Background="#bdc3c7">
            <Panel ux:Name="page1Tab">
                <Tab Text="Page 1">
                    <Clicked>
                        <Set navigation.Active="page1" />
                    </Clicked>
                </Tab>
            </Panel>
            <Panel ux:Name="page2Tab">
                <Tab Text="Page 2">
                    <Clicked>
                        <Set navigation.Active="page2" />
                    </Clicked>
                </Tab>
            </Panel>
            <Panel ux:Name="page3Tab">
                <Tab Text="Page 3">
                    <Clicked>
                        <Set navigation.Active="page3" />
                    </Clicked>
                </Tab>
            </Panel>
        </Grid>

        <PageControl ux:Name="navigation">
            <PageOne ux:Name="page1" Background="#eee" theIndicator="indicator" indicatorTarget="page1Tab" />
            <PageTwo ux:Name="page2" Background="#abb7b7" theIndicator="indicator" indicatorTarget="page2Tab" />
            <PageThree ux:Name="page3" Background="#f2f1ef" theIndicator="indicator" indicatorTarget="page3Tab" />
        </PageControl>

    </DockPanel>

    <!-- put these three in three separate UX files: -->
    <Page ux:Class="PageOne">
        <Rectangle ux:Dependency="theIndicator" />
        <Panel ux:Dependency="indicatorTarget" />
        <WhileActive Threshold="0.5">
            <Set theIndicator.LayoutMaster="indicatorTarget" />
        </WhileActive>
        <WelcomeText>Welcome to Page 1</WelcomeText>
    </Page>

    <Page ux:Class="PageTwo">
        <Rectangle ux:Dependency="theIndicator" />
        <Panel ux:Dependency="indicatorTarget" />
        <WhileActive Threshold="0.5">
            <Set theIndicator.LayoutMaster="indicatorTarget" />
        </WhileActive>
        <WelcomeText>Welcome to Page 2</WelcomeText>
    </Page>

    <Page ux:Class="PageThree">
        <Rectangle ux:Dependency="theIndicator" />
        <Panel ux:Dependency="indicatorTarget" />
        <WhileActive Threshold="0.5">
            <Set theIndicator.LayoutMaster="indicatorTarget" />
        </WhileActive>
        <WelcomeText>Welcome to Page 3</WelcomeText>
    </Page>

</App>

The trick there is to use Dependencies, so that your indicator still knows where to go.

So when this is working, you can safely put any one or all of the ux:Classes in separate .ux files. Adding a JavaScript to any given page is pretty straightforward, too:

<Page ux:Class="PageOne">
    <Rectangle ux:Dependency="theIndicator" />
    <Panel ux:Dependency="indicatorTarget" />
    <!-- make sure the PageOne.js file resides right next to this UX file -->
    <JavaScript File="PageOne.js" />
    <WhileActive Threshold="0.5">
        <Set theIndicator.LayoutMaster="indicatorTarget" />
    </WhileActive>
    <WelcomeText>Welcome to Page 1</WelcomeText>
</Page>

Hope this helps!

3

Thank you very much, Uldis!
It works!