How to get a data from <ResourceSetter>

General
1 
<App>

	<Panel ux:Name="FullWindo" Layer="Overlay">
		<StackPanel>
		<Text Alignment="Right" ux:Name="tt" Value="happy"/>
		</StackPanel>
	</Panel>

	<ClientPanel>
 		<StackPanel>
		<ResourceObject ux:Name="H" Key="FullWindow" Value="FullWindo"/>
		<TextBox Value="{H.tt}"/>
		<OtherPage Height="10%">
			<Panel>
				<Rectangle>
					<Stroke Color="Black">
					</Stroke>
				</Rectangle>
			</Panel>
		</OtherPage>
		</StackPanel>
	</ClientPanel>

</App>

In this code I want to reference ResourceObject’s Text Value “happy” to the textbox. Referecing like this, “{H.tt}”, does not work…
How can I reach this?

2

Hi JiwonJeon,

could you please explain what are you trying to make? There might be a better way to achieve that.

3

Nice to meet you Uldis, thanks to reply.

First, I made a popup(OtherPage.ux) and mainpage(MainView.ux).
Second, I want to make data interaction possible in beetween these two page.

For example, If I select a button in OtherPage.ux than It is needed to possible to return the button’s text to MainView.

Below, I updated my code.
plz help me…

MainView.ux

<App>
<JavaScript>
var Observable = require("FuseJS/Observable");
var text = Observable("happ");
module.exports={text: text};
</JavaScript>

<Panel ux:Name="FullWindo" Layer="Overlay">
	<Text ux:Name="pp" Alignment="Right" Value="{text}"/>
</Panel>

<ClientPanel>
	<StackPanel>
	<ResourceObject Key="FullWindow" Value="FullWindo"/>
	<TextBox Value="{text}"/>
	<OtherPage Height="10%">
		<Panel>
			<Rectangle>
				<Stroke Color="Black">
				</Stroke>
			</Rectangle>
		</Panel>
	</OtherPage>
	</StackPanel>
</ClientPanel>

</App>

OtherPage.ux

<Panel ux:InnerClass="OtherPage"/>
<JavaScript>
Observable=require("FuseJS/Observable");
var Usage = Observable("");
var tempUsageList = Observable();
var usageListAddInput = Observable("");
function AddToTempUsageList() {
	tempUsageList.add(usageListAddInput.value);
	usageListAddInput.value="";
}
function removeItem(sender) {
    tempUsageList.remove(sender.data);
}

function SelectUsage(v) {
 	Resource.Usage=v.data;
}

	module.exports={
		
		tempUsageList: tempUsageList,
		usageListAddInput: usageListAddInput,
		AddToTempUsageList: AddToTempUsageList,
		removeItem: removeItem,
		SelectUsage: SelectUsage,
	};
</JavaScript>

<StackPanel>
<Button Text="Delete">
	<Clicked>
		<Set ModalConfirm.IsEnabled="true"/>
	</Clicked>
</Button>
</StackPanel>



<!-- Toggling the status of the AlternateRoot.IsEnabled will display/hide our "modal" dialog.

	You could alternately wrap this in another `While...` trigger. -->

<AlternateRoot  ux:Name="ModalConfirm" IsEnabled="false" ParentNode="{Resource FullWindow}">
	<Panel Color="1,1,1,0">
		<StackPanel Alignment="Center" Padding="10">
			<Rectangle Layer="Background"  Color="1,1,0.98,1">
				<Stroke Width="1" Color="0,0,0,1"/>
			</Rectangle>
			<ScrollView>
			<Grid ColumnCount="8">
				<TextBox LimitWidth="200" PlaceholderText="add your usage" Value="{usageListAddInput}" ColumnSpan="6"/>
				<Button Text="ADD" ColumnSpan="2" Clicked="{AddToTempUsageList}" />
			</Grid>
			</ScrollView>
			<DockPanel>

			<ScrollView Height="150" Width="200">
				<StackPanel>
					<Each Items="{tempUsageList}" Offset="{offset}" Limit="{limit}">
						<DockPanel>
							<ScrollView AllowedScrollDirections="Horizontal" ColumnSpan="6">
								<Button  ux:Name="kk" Alignment="VerticalCenter" Text="{}">
									<Clicked>
										<Set pp.Value=kk.Text/>
									</Clicked>
								</Button>
							</ScrollView>
							<Button Text="Delete" Clicked="{removeItem}" Dock="Right" Margin="7"/>
							<LayoutAnimation>
                            <Move RelativeTo="LayoutChange" Y="1" Duration="0.8" Easing="ElasticIn" />
	                        </LayoutAnimation>

	                        <AddingAnimation>
	                            <Move RelativeTo="Size" X="1" Duration="0.3" Easing="CircularIn" />
	                        </AddingAnimation>

	                        <RemovingAnimation>
	                            <Move RelativeTo="Size" X="-1" Duration="0.4" Easing="CircularOut" />
	                        </RemovingAnimation>
						</DockPanel>
					</Each>
				</StackPanel>
			</ScrollView>
			</DockPanel>

			<Button Text="Default">
				<Clicked>
					<Set ModalConfirm.IsEnabled="false"/>

				</Clicked>
			</Button>
		</StackPanel>
	</Panel>
</AlternateRoot>
</Panel>
4 
<Button  ux:Name="kk" Alignment="VerticalCenter" Text="{}">
<Clicked>
    <Set pp.Value=kk.Text/>
</Clicked>
</Button>

Which is in OtherPage but does not work at all…

5

JiwonJeon, I’m looking at all that code and can’t help but think that you’re missing out on some core concepts.

One such would be Dependencies which allow you to pass in [by reference] virtually any node to child components and directly affect the original entity from the child.

The other, which is likely to be more useful in your case, is a proper understanding of how to work with Observables.

Other than that, maybe take a look at the Creating components article.

Hope this helps!

6

Thank you for your advice, Uldis!.
I found a way to solve it.

MainView.js

var Observable = require("FuseJS/Observable");
var OtherPage = require("/OtherPage");
var selected = OtherPage.selected;
module.exports={
selected: selected
};

MainView.ux

<TextBox Value="{selected}"/>

OtherPage.js

var Observable=require("FuseJS/Observable");
var selected = Observable("");

function SelectUsage(v) {
 	var MainView = require("/MainView");
 	MainView.selected.value = v.data;
}

	module.exports={
		selected: selected
	};

OtherPage.ux

    <Button  Clicked="{SelectUsage}" Alignment="VerticalCenter" Text="{}"/>
7

JiwonJeon,

you can not do that, no. Fuse apps follow MVVM pattern, and it’s important you understand how it’s applied. Otherwise you run the risk of landing in a broken state when the instances of pages get messed up.

Your MainView.js is a viewmodel, and as such it may not be require()d in other viewmodels or models. If you want to reuse a single variable in several viewmodels, you have to put it in a model - a separate JS module that you only require() from viewmodels, but never include in a UX file with <JavaScript File="..." />.

This has been explained in other forum threads before, such as this one. Go ahead and search for “viewmodel” to find the others.

Hope this helps!

8

Thank you very much. I created a folder called Modules, created a file called UsagePopup.js and managed the ‘selected’ variable there.

Can exported 'observerable’s to access all view models? It was an easy concept, but I was really messed. Sorry and I really thanks to you.!

9

If you’re asking whether you can access variables exported from a model from all and any viewmodels, then the answer is yes. You can access them from wherever you require() the module, so it’s not only viewmodels, but other models as well.

Sorry for the techy language, the concept is actually really simple.