Passing custom parameters to a component

How-to Discussions
1

Hi
I would like to know the correct way to pass custom parameters to a component. Let’s use this simple example:

<App Background="#fff">
	<Panel ux:Class="StartAnimation" ux:Name="StartAnimation" Background="#eee" >
		<float ux:Property="HH"/>
		<JavaScript>
			var Observable = require('FuseJS/Observable');
			var k = 10;
			var h = this.HH.map(function(val) {
				return val;
			});
			module.exports = {
				size1: h,
				size2: Observable(function() {return h.value * 2}),
				size3: Observable(h.value  * 2),
				size4: Observable(k * 2),
			};
		</JavaScript>
		<StackPanel>
			<Panel ux:Name="Red" Width="{size1}" Height="{size1}" Background="#f00" Alignment="Left" />
			<Panel ux:Name="Green" Width="{size2}" Height="{size1}" Background="#0f0" Alignment="Left" />
			<StackPanel Orientation="Horizontal" >
				<Text>size1=</Text><Text Value="{size1}"/>
			</StackPanel>
			<StackPanel Orientation="Horizontal" >
				<Text>size2=</Text><Text Value="{size2}"/>
			</StackPanel>
			<StackPanel Orientation="Horizontal" >
				<Text>size3=</Text><Text Value="{size3}"/>
			</StackPanel>
			<StackPanel Orientation="Horizontal" >
				<Text>size4=</Text><Text Value="{size4}"/>
			</StackPanel>
		</StackPanel>
	</Panel>
	<StackPanel>
		<StartAnimation ux:Name="Anim" Height="200" HH="50">
			<Clicked>
				<Set Anim.HH="100"/>
			</Clicked>
		</StartAnimation>
	</StackPanel>
</App>

I have a component called StartAnimation that receives a parameter called HH and based on that its internals get resized, such as “Red” having the dimension HH x HH and “Green” being HH x (2 * HH) .

My questions are:

  1. What is the optimal way to do this? (I’m pretty sure the way I did it isn’t the proper way)

  2. Is there a way to add basic operations in an element’s property?
    Such as

<Panel ux:Name="Green" Width="{Property StartAnimation.HH}" Height="{Property StartAnimation.HH * 2}" />
  1. Why is size3 NaN, since h.value is a number?
2

Hi!

  1. It would be easier to answer this question if you start by describing what you want to achieve, instead of posting a broken implementation with no explaination :slight_smile: In general, components in fuse represent visual elements, not “animations” per se, so StartAnimation is a weird name for a component. What are you trying to do here? Also, it is bad practice to use JS to compute layout properties like you do here. It shouldn’t be neccessary. The component should be rewritten to use plain UX layout rules. Again, if you describe what you want to achieve, it will be easier to suggest a solution.

  2. No, not in 0.28 - but! a full UX reactive expression system is implemented internally and currently in test/documentation phase and will be released soon. So stay tuned :slight_smile:

  3. You are getting NaN because you are initializing your observable with an undefined value. Use Observable(function() { if you depend on the value of another observable.

Hope this helps, thanks for posting!

3

Alright, ignore the example at the top and let me rephrase:
what I want to make is a component that lays out its many children elements based on a single param.
Some elements are 9 x param wide, others are 2 x param high, etc. They are all relative to param (which could even be the component’s height if it makes things easier).

There are about 6 layout values that depend on param. So in order to avoid writing something like

<StartAnimation Height="240" Param1="100" Param2="200" Param3="900" Param4="80" Param5="160" Param6="720"/>

I would rather keep as much of its [layout] logic internal, exposing as little as possible, which is why I would like to just write

<StartAnimation Height="240" Param="100"/>

and make the width/height/position of the children elements relative to Param

or maybe just write

<StartAnimation Height="100"/>

and have all the calculations inside be relative to the component’s Height.

I tried avoiding having any javascript but found no way to write in the ux things such as

<Panel ux:Name="AnimatedChild" Width="{Property StartAnimation.Height}" Height="{Property StartAnimation.Height * 2}" >

Hope that clarifies things a bit.

4

Hi!

Sorry for the late reply.

To me it sounds like what you are describing is a Grid where you databind the column and row descriptors. Take a look at the examples and docs for Grid and see if something lights up.