School App - HierarchicalNavigation?

Paul2 · January 25, 2016, 9:04am

Hello,

We’re wondering what you would recommend for an app that had a page for each individual class in a school?

Would HierarchicalNavigation be the best and would this all be placed inside of the MainView.ux or would you suggest each page had it’s own .ux file such as ClassA.ux, ClassB.ux and a menu that linked to these? I’ve made a quick sketch which hopefully shows the current idea for how this would work:

What do FUSE recommend for an app of this kind?

Thanks in advance

KS1 are the younger children in school and KS2 are the older children. The school is divided into 2 Key Stage groups so we wanted to keep them seperate. Each class page will have text that explains who the teacher is and what they are learning this year.

Kristian_Hasselknipp · January 25, 2016, 10:35am

Hey

This sounds like a good case for hierarchical navigation (where you want the ability to navigate back in a navigation history as you work your way from the main page to the specific classes.

You would typically define each page as a separate ux:Class (in their own files if that is most convenient to you), and then put them all in a hierarchical navigation. You can then for example use NavigateTo to navigate to a new page. It will then be added to the navigation history. The GoBack action will the pop that page from the history when used.

This example from the learn section might be usefull to you https://www.fusetools.com/learn/fuse#hierarchicalnavigation-example

Paul2 · January 25, 2016, 3:23pm

That’s great and thanks for the link.

After downloading the ScrollingAnimations example and using the hierarchical navigation to link to a scrollinganimation.ux file it seems to prevent the scroll from working. I was wondering if this was a bug or what controls the amount of scroll you can do on one screen? I’ve played with ScrollView but that doesn’t seem to work.

I’m basically running the scrolling animations example on one of the Hierarchical Navigation pages (for example page 1) but I can’t scroll down. Any ideas?

Thanks again.

Kristian_Hasselknipp · January 25, 2016, 3:29pm

This could happen for a number of reasons, but is not necessarily caused by a bug. Could you post some more of your UX-code showing the structure of your app?

Paul2 · January 25, 2016, 3:49pm

Hi, here is the code - I hope it displays properly. I haven’t posted code in this forum before:

<Panel ux:Class="Harbinson" Background="#FFFFFF">
    <iOS.StatusBarConfig ux:Name="statusBarConfig" Style="Dark"/>

        <!--Page Back Button-->        <Image Source="BackIcon" ux:Name="button1" Alignment="TopLeft" Margin="20,32,20,20"  Width="25" Height="25"/><Clicked><GoBack/></Clicked>
        <!--End Page Back Button-->
        <MultiLayoutPanel ux:Name="headerPanel" HitTestMode="None" Alignment="Top" Height="260" >



            <Placeholder ux:Name="overBackgroundLayout">
                <Image ux:Name="facePicture"  File="assets/harbinson.png" Alignment="BottomCenter"
                       Width="150" Height="150" Offset="0,75"/>
            </Placeholder>


            <StackPanel ux:Name="textPanel" Alignment="Center">
                <Style><Text TextColor="#FFF" TextAlignment="Center"/></Style>
                <StatusBarBackground Margin="0,0,0,15"/>
                <Text Font="GothamBold" ux:Name="topText" FontSize="18" Margin="5">MISS. HARBINSON - 1AH</Text>
                <Text Font="GothamMedium" ux:Name="bottomText" FontSize="14">Year 1 Teacher</Text>
            </StackPanel>



            <Panel ux:Name="backgroundPicture" TransformOrigin="Anchor" Alignment="Top" Anchor="50%,0%" Background="Black">
                <Image File="assets/background_blur.png" StretchMode="UniformToFill" Background="Black"/>
                </Panel>

            <Placeholder ux:Name="underBackgroundLayout" Target="facePicture"/>
        </MultiLayoutPanel>
            <ScrollView>
            <!--face animation -->

            <ScrollingAnimation From="0" To="150">
                <Scale Target="facePicture" Factor=".6" Easing="QuadraticInOut" />
                <Move Target="facePicture" RelativeTo="Size" Y="-0.8" Easing="QuadraticIn"/>
            </ScrollingAnimation>
            <ScrollingAnimation From="125" To="0">
                <Set headerPanel.LayoutElement="overBackgroundLayout"/>
            </ScrollingAnimation>
            <ScrollingAnimation From="125" To="170">
                <Set headerPanel.LayoutElement="underBackgroundLayout"/>
            </ScrollingAnimation>
            <ScrollingAnimation From="150" To="1000">
                <Move Target="facePicture" Y="-850" Easing="Linear" />
            </ScrollingAnimation>

            <ScrollingAnimation From="0" To="260">
                <Move Target="backgroundPicture" RelativeTo="Size" Y="-0.7" Easing="QuadraticOut"/>
                <Move Target="textPanel" RelativeTo="ParentSize" Y="-0.35" Easing="QuadraticOut"/>
                <Move Target="bottomText" RelativeTo="ParentSize" Y="-0.3" Easing="QuadraticOut" />
                <Change bottomText.Opacity="0" Easing="QuadraticOut"/>
            </ScrollingAnimation>
            <ScrollingAnimation From="50" To="250">
                <Change statusBarConfig.Style="Light" />
            </ScrollingAnimation>
            <ScrollingAnimation From="0" To="-1000">
                <Scale Target="backgroundPicture" Factor="4" />
                <Move Target="facePicture" Y="800"/>
            </ScrollingAnimation>

            <!--end face animation -->



            <StackPanel Padding="0,370,0,0">


                <Text TextColor="#2A4F9A" TextAlignment="Center" Font="GothamLight" FontSize="20" Margin="50,0,50,40">
                    "Welcome to 1AH, take a look at what the children will be learning this year."
                </Text>
                <!--<Rectangle Height="2" Margin="50,0" Fill="#E1E1E1"/>-->

                <Style>
                    <Text TextColor="#333333" TextWrapping="Wrap"/>
                </Style>

                <Text Font="GothamMedium" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Autumn 1 - Funnybones
                </Text>

                <Text TextColor="#333333" Font="GothamLight" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Can you label a skeleton? Can you make a human skeleton? Can you find out about bones and how to look after them? Can you find out about different types of skeletons?
                </Text>
                <Rectangle Height="2" Margin="50,20,50,20" Fill="#E1E1E1"/>

                <Text Font="GothamBold" FontSize="16" TextAlignment="Center" Margin="50,10,50,0">
                    Autumn 2 - Kings &amp; Queens
                </Text>

                <Text Font="GothamLight" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Can you identify some famous people from the past and create 3D pictures of the musing suitable materials? Can you describe the materials you have used? Can you learn about Bonfire Night and create pictures to show what you can see?
                </Text>
                <Rectangle Height="2" Margin="50,20,50,20" Fill="#E1E1E1"/>

                <Text Font="GothamBold" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Christmas - Light
                </Text>

                <Text Font="GothamLight" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Can you compare Christmas with another festival of light? Can you design and make a Christingle light after investigating Christingles? Can you find out about Advent?
                </Text>
                <Rectangle Height="2" Margin="50,20,50,20" Fill="#E1E1E1"/>

                <Text Font="GothamBold" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Spring 1 - Our City
                </Text>

                <Text Font="GothamLight" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Can you investigate the city you live in? Can you make a poster showing some of the buildings and landmarks? Can you make a model of a building in your city? Can you use a globe and atlas to explore the UK?Canyou role-play some of the jobs people have in our city? Can you compare and contrast where you live with other locations around the world?
                </Text>
                <Rectangle Height="2" Margin="50,20,50,20" Fill="#E1E1E1"/>

                <Text Font="GothamBold" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Spring 2 - Bible Stories
                </Text>

                <Text Font="GothamLight" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Can you reflect on the meanings of Bible Stories we read? Can you create a paper craft animation of a Bible story? Can you choose a suitable material for Joseph’s coat? Can you make a lion’s mask or a piece of armour for David?
                </Text>
                <Rectangle Height="2" Margin="50,20,50,20" Fill="#E1E1E1"/>

                <Text Font="GothamBold" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Easter - Sorrow &amp; Joy
                </Text>

                <Text Font="GothamLight" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Can you read the Easter story and investigate how Christians celebrate Easter? Can you design a stained glass window about the Easter story?
                </Text>
                <Rectangle Height="2" Margin="50,20,50,20" Fill="#E1E1E1"/>

                <Text Font="GothamBold" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Summer 1 - Under the Sea
                </Text>

                <Text Font="GothamLight" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Can you investigate animals that live under the sea? Can you compare and contrast underwater sea creatures? Can you create a boat that can float onwater? Can you help to navigate Pirate Pete to find treasure, using maps and compasses? Can you use musical instruments to create an underwater atmosphere?
                </Text>
                <Rectangle Height="2" Margin="50,20,50,20" Fill="#E1E1E1"/>

                <Text Font="GothamBold" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Summer 2 - People Who Help Us
                </Text>

                <Text Font="GothamLight" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Can you investigate the different buildings associated with the people that help us? Can you explore different job roles? Can you study the uniforms of the people who help us? Can you select the appropriate materials to create a police officer’s hat?
                </Text>
                <Rectangle Height="2" Margin="50,20,50,20" Fill="#E1E1E1"/>

                <Text Font="GothamBold" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Potteries People: Thomas Wedgewood
                </Text>

                <Text Font="GothamLight" FontSize="16" TextAlignment="Center" Margin="50,20,50,0">
                    Can you explore and investigate the work of Thomas Wedgewood? Can you create a photography exhibition of your own?
                </Text>
            </StackPanel>

        </ScrollView>



</Panel>

Paul2 · January 25, 2016, 3:53pm

This is the MainView.ux

<App Theme="Basic" Background="#eee">
    <DockPanel>
    <Font File="fonts/Gotham-Rounded-Bold.ttf" ux:Global="GothamBold" />
    <Font File="fonts/Gotham-Rounded-Book.ttf" ux:Global="GothamBook" />
    <Font File="fonts/Gotham-Rounded-Light.ttf" ux:Global="GothamLight" />
    <Font File="fonts/Gotham-Rounded-Medium.ttf" ux:Global="GothamMedium" />

    <FileImageSource ux:Global="BackIcon" File="assets/back_arrow.png" Density="2" />


<Panel>
    <HierarchicalNavigation ux:Name="nav" ReuseExistingNode="false" Active="mainPage" />


<Style>
        <Page>
            <EnteringAnimation>
                <Move X="1" RelativeTo="ParentSize" />
            </EnteringAnimation>
            <ExitingAnimation>
                <Move X="-1" RelativeTo="ParentSize" />
            </ExitingAnimation>
        </Page>
    </Style>


    <Page ux:Name="mainPage"> 
        <StackPanel>
            <Button Text="Mrs. Harbinson">
                <Clicked>
                    <NavigateTo Target="Harbinson" />
                </Clicked>
            </Button>


            <Button Text="Mrs. Heath">
                <Clicked>
                    <NavigateTo Target="Heath" />
                </Clicked>
            </Button>

        </StackPanel>
    </Page>



   <!-- PAGES -->


    <Page ux:Name="Harbinson" ux:AutoBind="false">
        <StackPanel>
            <Harbinson/>
        </StackPanel>
    </Page>


    <Page ux:Name="Heath" ux:AutoBind="false">
        <StackPanel>
            <Text>Welcome to page 2!</Text>
            <Button Text="Go Back">
                <Clicked>
                    <GoBack />
                </Clicked>
            </Button>
        </StackPanel>
    </Page>

    <!-- END OF PAGES -->

</Panel>





        <BottomBarBackground Dock="Bottom" />

    </DockPanel>

</App>

Paul2 · January 26, 2016, 8:36am

Hello,

In Heath.ux (another class in school) we have this code:

 <Panel ux:Class="Heath" Background="#2a4f9a">

<StackPanel>    <Button Text="Go Back">
        <Clicked>
            <GoBack />
        </Clicked>
    </Button>
</StackPanel>

</Panel>

This results in the attached image with only the button and a blue background behind it:

I have tried taking the button out and simply adding a Rectangle expecting it to fill the available space but it returns an empty preview.

Am I missing something simple? I have used the code from https://www.fusetools.com/examples/basic-ux-animations where the Panel Background fills each page but I can’t seem to get it to work.

Thanks in advance,

Paul

Kristian_Hasselknipp · January 26, 2016, 8:56am

This bit of code would be causing the issue:

<Page ux:Name="Harbinson" ux:AutoBind="false">
    <StackPanel>
      <Harbinson/>
    </StackPanel>
</Page>

The StackPanel has a special sizing policy, where it asks its children to size themselves as small as possible. Since the ScrollView size is not determined by its children, this can end up causing problems.

It seems that the StackPanel isn’t serving a purpose in this case anyway, so you should try removing it and see if that resolves your problem.

<Page ux:Name="Harbinson" ux:AutoBind="false">
    <Harbinson/>
</Page>

Hope this helps

Paul2 · January 26, 2016, 9:00am

Thanks Kristian! It works a treat.

Cheers

Kristian_Hasselknipp · January 26, 2016, 9:01am

Great No problem

Paul2 · January 26, 2016, 9:53am

Hey,

Everything was working fine with the Harbinson and Heath pages and I tried to add a third page (Aked) and follwed the same procedure as I did for the other 2.

I created an Aked.ux file with the following code:

<Panel ux:Class="Aked" Background="#2a4f9a">


    <Button Text="Go Back">
        <Clicked>
            <GoBack />
        </Clicked>
    </Button>


</Panel>

added a reference to the .unoproj file:

   {"BuildDirectory": ".build",
  "InternalsVisibleTo": [],
  "Packages": [
    "Fuse.Animations",
    "Fuse.BasicTheme",
    "Fuse.Controls",
    "Fuse.Designer",
    "Fuse.Drawing",
    "Fuse.Drawing.Planar",
    "Fuse.Drawing.Primitives",
    "Fuse.Effects",
    "Fuse.Elements",
    "Fuse.Entities",
    "Fuse.Gestures",
    "Fuse.Desktop",
    "Fuse.Android",
    "Fuse.iOS",
    "Fuse.Navigation",
    "Fuse.Shapes",
    "Fuse.Triggers",
    "FuseCore",
    "Uno.Collections",
    "Uno.Geometry"
  ],
  "Projects": [],
  "Includes": [
    "MainView.ux:UXFile",
    "Aked.ux:UXFile",
    "Harbinson.ux:UXFile",
    "Heath.ux:UXFile"
    ]
}

added a button in the same Stack Panel as the other buttons:

<Button Text="Mrs. Aked">
      <Clicked>
          <NavigateTo Target="Aked" />
      </Clicked>
</Button>

and this to the MainView.ux:

<Page ux:Name="Aked" ux:AutoBind="false">
       <Aked/>
</Page>

But I keep getting this error message - I seem to have setup everything exactly the same as I did for the Harbinson and Heath pages but not sure why it can’t find ‘Aked’

Data type not found: Aked - /Users/PaulClay/Desktop/KeyStageMenu/MainView.ux(85:1):E

Could not resolve type 'Aked' - /Users/PaulClay/Desktop/KeyStageMenu/MainView.ux(85:1):E

Any ideas?

Apologies for the questions.

Cheers,

Paul

Remi_Pedersen · January 26, 2016, 11:10am

Hi Paul, a small tip that might save you some typing: if you define a couple of new text classes you can use those instead of having to set the same properties over and over.

E.g.

 <Text ux:Class="Light" Font="GothamLight" FontSize="16" TextAlignment="Center" Margin="50,20,50,0"/>
 <Text ux:Class="Bold" Font="GothamBold" FontSize="16" TextAlignment="Center" Margin="50,10,50,0"/>

which allows you to do:

<Bold>Summer 1 - Under the Sea</Bold>
<Light>
Can you investigate animals that live under the sea? Can you compare and contrast underwater sea creatures? Can you create a boat that can float onwater? Can you help to navigate Pirate Pete to find treasure, using maps and compasses? Can you use musical instruments to create an underwater atmosphere?
</Light>

If you later want to make any changes, such as adjusting font size, you just have to do that on the class definitions instead of search&replace through all the ux.

Paul2 · January 26, 2016, 11:23am

Cheers for the tip Remi, I’ll update my code now.

Paul2 · January 26, 2016, 11:29am

Would this only apply to the text inside the .ux file that it is in or is there a way to declare it one .ux file and use it in others. For example:

MainView.ux - textclasses declared

AnotherView.ux - need to declare it again or is there a Global way of doing it?

Thanks

Remi_Pedersen · January 26, 2016, 11:47am

You can do it in a separate file, just as you have done with the Aked and Harbinson classes.

As for the issue with the Aked class I can’t see anything obviously wrong with it. If you can bundle up the project and upload it to https://dropbox.com/request/Rx1QN3QluvxAJiyGJqrh (only accessible to Fuse employees) then we can take a closer look at it.

Also, you don’t need to change the .unoproj in order to add new files to your project. You can instead set it up so that all valid files inside the project directory are included:

  "Includes": [
    "*"
  ]

Paul2 · January 26, 2016, 12:18pm

Annoyingly it seems to be working now, perhaps it was an issue with .unoproj file as I have changed that to the code above and everything seems to be fine. I’ll try and implement the text classes now and see how I get on.

Thanks for your help.

Out of interest what are the long term plans for FUSE? will it be a free tool or are there plans to introduce costs?

Remi_Pedersen · January 26, 2016, 12:44pm

Happy to help out, great that you got it working!

The core tech of Fuse (the stuff that’s in Beta now) will remain free (and large parts of it open sourced). We’re building commercial tools and services on top of that but those will be opt-in.

Paul2 · January 26, 2016, 1:17pm

Hello again,

I’m trying to sort out the Navigation of the app before I style anything and what seems to be relatively straight forward throws up FATAL ERROR.

I have uploaded the file to the dropbox link from earlier.

The Navigation needs to run deeper than what’s already there for example the Classes page needs to have 2 buttons (KS1 and KS2) that both go to seperate pages with more buttons on to select a specific class.

When I had this working (before I stripped the code back to try and debug) the GoBack command was behaving unusually and the NavigateTo was causing errors. Can NavigateTo go to files higher up in the order?

If you could direct me in the correct way to approach this I would appreciate it. This might be a useful example file for people looking at Hierarchical Navigation?

Thanks.

I tried to copy the error message from the FUSE Dashboard to share with you but I can’t select the text. Argument cannot be null keeps appearing if that helps.

Paul2 · January 26, 2016, 1:45pm

Hey,

I’ve just uploaded an updated version of the Navigation which is working but as you navigate further into the menu it makes it harder to get back to the original menu.

In Classes.ux I need to add a button that returns back to MainView.ux but I can’t seem to get it to work.

Thanks

Remi_Pedersen · January 26, 2016, 2:31pm

The problem is that you’ve put another hierarchicalnavigation (the one in Classes.ux) inside the first one (in MainView.ux).

GoBack works relative to it’s nearest parent navigator. This means that when you place a button with GoBack inside the navigation panel in Classes.ux it can’t go back any further because the top-level of that navigator is the page you’re already on (the one containing the two Key Stage buttons).

To fix this you can just remove the <HierarchicalNavigation> inside Classes.ux. Now all navigation actions (like GoBack) will be relative to the navigator inside MainView.ux.

(You can also remove the animation styling inside Classes.ux since it’s identical to what you already have in MainView.ux)

Topic		Replies	Views
Navigation On App Level and Folder Structure How-to Discussions	5	459	May 6, 2016
Hierarchical navigation and pages in different files General	10	1079	February 11, 2016
Is nested navigation even possible? How-to Discussions	1	322	February 16, 2016
Custom Hierarchical Navigation Definitive Back Buttons How-to Discussions	3	549	April 27, 2016
How to navigate outside a MultipleLayout How-to Discussions	13	491	April 19, 2016

School App - HierarchicalNavigation?

Related topics