How to use global components with behaviors

How-to Discussions
1

I am creating a simple page based app with 2 components that i need to use in all pages: round menu button on the top left and a sidepanel page which slides in when the menu button is clicked. You can think my project as having the following compoonents:

when the user clicks the menuButton component a set of animations happen: menubutton is animated and the sidepanel slides in.

    <MenuButton Alignment="TopLeft" Offset="10,10">
        <Clicked>
            <Toggle Target="animateMenuButton" />
            <Toggle Target="showSidePanel" />
        </Clicked>
    </MenuButton>

My probelm is that i dont understand how to structure my code in separate modules. I want to put menubutton UI, and the animateMenuButton behavior in a single ux file (menubutton.ux) and the sidepanel Ui + showSidePanel behavior in another ux file (sidepanel.ux)

The instance call

<MenuButton />

is in the ux file for the page.

Now, no matter how i structure the ux files, i keep getting exceptions like “object reference not set to instance…” and “x cannot be accessed from y. to make this work consider ux:InnerClass” etc.

So, to sum up; I want to make a global component which can be used accross pages The ux file where i define the coponent should also have the behavior of the component

and I need to be call any behavior from any otehr place in the project. Any ideas?

My code is here;

https://github.com/rishavs/Fuse_Scroogify

2

Hello,

In my app I solved this in two ways:

  1. Using UserEvents to describe actions and animations that needed to be called from aroung the app. Place the UserEvent as “high” as you can in your structure so that it reaches all the children it needs to target. Then inside your reusable control, invoke that UserEvent with RaiseUserEvent.

  2. The second way is to use WhileTrue/WhileFalse blocks that listen to an Observable in JavaScript. So for example if you have var animateMenuButton = Observable("false"); in your JS, you can listen to it from your component with <WhileTrue Value="{animateMenuButton}" ux:Name="animationToggle"> ... and control it with <Toggle Target="animationToggle /> similar to your example above.

3

Hi,

When splitting things into classes, each class has no knowledge of the rest of your app. This is to isolate it into a reusable and testable component.

You can use ux:Dependency to inject dependencies on “global components” into ux:Class.

It’s hard to show you the exact code you need without seeing more of your projec,t but here is an approximation:

 <MenuButton ux:Class="Foo" Alignment="TopLeft" Offset="10,10">
    <WhileTrue ux:Dependency="animateMenuButton" />
    <WhileTrue ux:Dependency="showSidePanel" />
    <Clicked>
        <Toggle Target="animateMenuButton" />
        <Toggle Target="showSidePanel" />
    </Clicked>
 </MenuButton>

Then when instantiating Foo, pass in the objects:

<Foo animateMenuButton="animateMenuButton" showSidePanel="showSidePanel" />

Hope this helps!

4

Thanks to both of you. I will explore all these ideas now. :slight_smile: