How can I change the property value of one class from another class

How-to Discussions
1

Hi.
There are two classes, A and B, in my source I would like to get access and change the value of element property of class B from class A. How can I do it??
I will post my source below

MainView.ux

<App>
	<JavaScript File="TopMenu.js"/>

	<ClientPanel>
		<TopMenu Dock="Top" Height="50" Content="pc" Menu1="page1" Menu2="page2" Menu3="page3" />

		<PageControl ux:Name="pc">
			<Page ux:Name="page1" Color="#F5A5FF">
				<WhileActive>
					
				</WhileActive>
				<Text Value="Page1" Alignment="Center" FontSize="50" TextColor="White" />
			</Page>

			<Page ux:Name="page2" Color="#B88AFF">
				<WhileActive>
					
				</WhileActive>
				<Text Value="Page2" Alignment="Center" FontSize="50" TextColor="White" />
			</Page>

			<Page ux:Name="page3" Color="#FF978A">
				<WhileActive>
					
				</WhileActive>
				<Text Value="Page3" Alignment="Center" FontSize="50" TextColor="White" />
			</Page>
		</PageControl>
	</ClientPanel>
</App>

TopMenu.ux

<Page ux:Class="TopMenu">
	<PageControl ux:Dependency="Content" />
	<Page ux:Dependency="Menu1" />
	<Page ux:Dependency="Menu2" />
	<Page ux:Dependency="Menu3" />

	<Rectangle ux:Name="rect" Height="5" Width="80%" LayoutMaster="{rectLM}" Color="Gray" Alignment="BottomCenter">
		<LayoutAnimation>
			<Move RelativeTo="PositionChange" X="1" Duration="0.4"/>
		</LayoutAnimation>
	</Rectangle>

	<Grid ColumnCount="3">
		<Panel ux:Name="m1" Color="#D9D9D9">
			<Clicked>
				<Set Target="Content.Active" Value="Menu1" />
			</Clicked>
			<Text Alignment="Center" Value="Menu1" />
		</Panel>
		<Panel ux:Name="m2" Color="#BCBCBC">
			<Clicked>
				<Set Target="Content.Active" Value="Menu2" />
			</Clicked>
			<Text Value="Menu2" Alignment="Center" />
		</Panel>
		<Panel ux:Name="m3" Color="#D9D9D9">
			<Clicked>
				<Set Target="Content.Active" Value="Menu3" />
			</Clicked>
			<Text Value="Menu3" Alignment="Center" />
		</Panel>
	</Grid>
</Page>

I will elaborate my question with my source.
I would like to get access and able to change the value of property element of Rectangle named “rect” from MainView.ux without using javascript. I would like get access just purely using XML.

Can you guys help me with it? Thank you

2

Could you please explain why you are trying to do this instead? That would help us understand your use case and suggest the right approach.

3

Thank you for your reply Uldis
I would like to use TopMenu as a class so I can use it for any future projects just by including the ux file only, sort of like a library. If I make it as a library, or anything similar to that, I want to control the property inside the ux file, in this case TopMenu, from outside of the ux file, probably from other class or other ux file. I hope I delivered my idea right to you. Any suggestion on that?

Thank you for your help as always!!

4

I understand what you’re saying, but I fail to understand the use case.

In general, UX components should strive to be self-contained and not rely on any other UX code being present. That goes both ways.

Aside from that, you have Dependencies and Properties to achieve inter-component operations.