toggleSidebar

[Francesco]

Hello,
I have a problem, certainly understanding: P and inexperience with Fuse, I would like to start the toggleSidebar function of theDrawerPanel.ux file inside the Menu.ux file but it will not work. The toggleSidebar function is not started at all. Why? What is my mistake?

Many thanks in advance.

P.S: I’m learning Fuse and then starting a Community Italian

############### Menu.ux

<Material.Card ux:Class="Material.Menu" Margin="16" Padding="0,8,0,8" Alignment="TopRight">
	<StackLayout />
	<!-- https://material.google.com/components/menus.html -->
	<Material.Text ux:Class="Material.MenuItemText" FontSize="16" />

	<Container ux:Class="Material.IconMenuItem" Subtree="content" Height="48" >
		<string ux:Property="Text" />
		<Material.IconName ux:Property="Icon" />
		<Material.RippleResponseRectangle ux:Binding="Children">
			<Grid Columns="40,1*" ux:Name="content"  Margin="16">
				<Material.MaterialIcon Icon="{Property Icon}" Margin="0,-4,0,0" Color="{Resource Material.PrimaryIconColor}" />
				<Material.MenuItemText Value="{Property Text}" />
			</Grid>
		</Material.RippleResponseRectangle>
		
	</Container>

	<Material.IconMenuItem ux:Class="Material.IconMenuItemSideBar">
		<Clicked Handler="{toggleSidebar}" />
	</Material.IconMenuItem>

</Material.Card>

################ DrawerPanel.ux

<Container ux:Class="Material.DrawerPanel" Subtree="subtree" IsOpenEdgeNavigator="{IsOpenEdgeNavigator}">
	<bool ux:Property="IsOpenEdgeNavigator" />
	<JavaScript>
		var IsOpenEdgeNavigator=this.IsOpenEdgeNavigator;

		module.exports = {
			IsOpenEdgeNavigator: IsOpenEdgeNavigator,
			toggleSidebar: function() {
				console.log(IsOpenEdgeNavigator.value);
				if(!IsOpenEdgeNavigator.value){
					edgeNav.open("Left");
					IsOpenEdgeNavigator.value=true;
				}
				else{
					edgeNav.dismiss();
					IsOpenEdgeNavigator.value=false;
				}
			}
		}
	</JavaScript>
	<Material.Drawer ux:Dependency="Drawer" />
	<AlternateRoot ParentNode="Drawer">
		<ActivatingAnimation>
			<Change overlay.Opacity="0.7" />
			<Change overlay.HitTestMode="LocalBounds" />
		</ActivatingAnimation>
	</AlternateRoot>

	<EdgeNavigator ux:Name="edgeNav" ux:Binding="Children">
		<Material.Drawer ux:Ref="Drawer" ux:Binding="Children" Edge="Left" />
		<Panel Color="{Resource Material.BackgroundColor}">
			<Panel ux:Name="overlay" Color="Black" Opacity="0" HitTestMode="None" />
			<Panel ux:Name="subtree">
			</Panel>
		</Panel>
	</EdgeNavigator>
</Container>

################# MainView.ux

<App>
	<JavaScript File="Main.js" />
	<iOS.StatusBarConfig Style="Light" />
	<Android.StatusBarConfig Color="#f00" />
	<Router ux:Name="router" />

	<ClientPanel>
		<Material.DrawerPanel>
			<Material.Drawer ux:Binding="Drawer" Edge="Left">
				<Material.Menu Alignment="Default" Margin="0, 0, 0, 0">
					<Material.IconMenuItemSideBar Text="Home" Icon="AccessPoint" Clicked="{goToHomePage}" />
					<Material.IconMenuItemSideBar Text="Saloni Preferiti" Icon="AccessPoint" Clicked="{goToSaloniPreferitiPage}" />
				</Material.Menu>
			</Material.Drawer>

			<DockPanel>
				<Material.AppBar Dock="Top">
					<Material.AppBarIcon Dock="Left" Icon="Menu" Clicked="{toggleSidebar}" />
					<Material.AppBarIcon Dock="Right" Icon="DotsVertical" Clicked="{toggleMenu}" />
					<Material.AppBarIcon Dock="Right" Icon="AccountPlus" />
				</Material.AppBar>

				<Navigator DefaultPath="splash">
					<SplashPage ux:Template="splash" router="router" />
					<HomePage ux:Template="home" router="router" />					
				</Navigator>
			</DockPanel>
		</Material.DrawerPanel>
	</ClientPanel>
</App>

[poul.kg]

I think toggleSidebar is not called, because you do not have definition of such function inside this chunk of code:

<Material.IconMenuItem ux:Class="Material.IconMenuItemSideBar">
        <Clicked Handler="{toggleSidebar}" />
    </Material.IconMenuItem>

should be something like:

<Material.IconMenuItem ux:Class="Material.IconMenuItemSideBar">
    <JavaScript>
    module.exports = {
        toggleSidebar: function () {
            console.log('toggleSidebar()');    
        }
    </JavaScript>

        <Clicked Handler="{toggleSidebar}" />
</Material.IconMenuItem>

[Francesco]

Thanks a lot for the answer.

This is how the Menu.ux file does not have the function but is only present in theDrawerPanel.ux file, but if you notice the toggleSidebar function is called in the MainView.ux file and works correctly. In the Menu.ux file the function does not start … Do you ever get it?

If I have to say the toggleSidebar function inside the Menu.uxfile, how do I join the edgeNav` element?

[Francesco]

up…

[poul.kg]

What’s inside <JavaScript File="Main.js" /> file?

[Francesco]

Nothing about a set of data for configuring some colors.

[Uldis]

@Francesco: you’re calling the toggleSidebar function from MainView.ux, and the data context for it lives in Main.js. In Main.js, you don’t have the function, so there is nothing to call.

If you want to reach the function declared in the JavaScript section in DrawerPanel.ux, you should call it from within DrawerPanel.ux UX code.

[Francesco]

@uldis: Thank you for your response and pleasure to meet you… The problem is not the MainView.ux file but theMenu.ux file.

In the MainView.ux file, the toggleSidebar function works correctly, but the Menu.ux file does not start the function. And that’s why I do not understand how it works in the MainView.ux file and in Menu.ux no …

[Uldis]

What I said still stands. The function you’re calling needs to live in the data context you are calling it from (or above it). That’s it.

If you need further support, you will need to provide a complete reproduction that we can copy-paste and run, otherwise it’s impossible to help.

[Francesco]

• Attached RAR file

This is the whole project … maybe I understand how it works … that is in the MainView file, thetoggleSidebar function works because it is a node inheriting from the DrawerPanel file. Instead, the Menu file does not work because it does not inherit anything fromDrawerPanel. Correct? If so, then in a hypothetical file named Menu.js how do I join theedgeNav class?

[Uldis]

The project you’ve supplied is far too big to even find the places you’re talking about, never mind understanding what you’re asking.

Please make a complete, minimal reproduction: a single-UX-file app that can be copy-pasted and run.

Please avoid asking hypothetical questions about hypothetically existing files, and instead explain what it is that you’re trying to do.

[Francesco]

I do not think I can make the project in one file because I use the design material library …

[Uldis]

I don’t see how that is a problem, or how it keeps you away from making a complete, minimal reproduction to explain the issues you are facing. It is not the material design library that causes the problem.

Here, I wrote this for a start, feel free to adapt it to explain yourself better:

<App>
    <JavaScript>
        module.exports = {
            test: function() {
                console.log("test on mainview");
            }
        };
    </JavaScript>

    <Panel ux:Class="CustomButton" Width="128" Height="40">
        <Text Value="Click me!" Color="#fff" Alignment="Center" />
        <Rectangle Color="#18f" CornerRadius="2" />
    </Panel>

    <Panel ux:Class="AnotherBlock">
        <JavaScript>
            module.exports = {
                test: function() {
                    console.log("test on anotherblock");
                }
            };
        </JavaScript>
        <CustomButton Clicked="{test}" />
    </Panel>

    <Grid RowCount="3">
        <StackPanel Alignment="Center">
            <CustomButton Clicked="{test}" />
        </StackPanel>
        <AnotherBlock />
        <AnotherBlock Clicked="{test}" HitTestMode="LocalBoundsAndChildren" />
    </Grid>

</App>