How to access element from JS

How-to Discussions
1

I am trying to figure out how to access ux element from the javascript so that I can access its value or whatever that I need to just like what I am used to in the HTML/JS world. The following is my code:

<Page ux:Class="Test">
    <Router ux:Dependency="router" />

    <DockPanel Padding="0,24,0,24">

        <JavaScript>
            function testValue(obj){
                console.log("Username: ", this.Username);
            }

            module.exports = {
                testValue: testValue
            }
        </JavaScript>
        
        <DockPanel Dock="Top">
            <Rectangle Dock="Left"/>
            <Rectangle Width="48" Dock="Left"/>
            <Rectangle Dock="Left">
                <TextInput Value="123" ux:Name="Username" TextColor="White"/>
            </Rectangle>
            <Rectangle Dock="Right"/>
        </DockPanel>

        <DockPanel Dock="Top">
            <Rectangle Dock="Left" />
            <Rectangle Width="48" Dock="Left"/>
            <Rectangle Dock="Left">
                <Button Text="" Clicked="{testValue}" Color="#33cc99" Width="200" Padding="8">
                    <Text Value="TEST" Color="White" TextAlignment="Center"/>
                </Button>
            </Rectangle>
            <Rectangle Width="64" Dock="Right" />
        </DockPanel>

    </DockPanel>    
</Page>

I keep getting Username = null from the log every time I click on the button. I think the documentation says that as long as an element is within the scope of the javascript, we should be able to see it.

2

Yes, you can access UX elements from JavaScript by their ux:Name. And you can do particular things to the elements. “Reading a value of a TextInput” is not one of those things.

Let me explain with an example. If you take a look at Interface of ScrollView, you’ll see that the things on the list there are marked with either UX or JS. The JS things are what you can do to a ScrollView from JavaScript, for example:

<JavaScript>
myScrollView.goto(0,100);
</JavaScript>
<ScrollView ux:Name="myScrollView" />

Now, if you take a look at the Interface of TextInput, you’ll find that there are no methods exposed to JavaScript that would allow you to read its value.

Why is that? Because Fuse simply isn’t, and can’t be, like what you’ve used to in HTML/JS world. The UX code is compiled to C++ during build and it runs on a separate thread (so that animations are fast). The JS code runs in separate a VM thread, so it doesn’t block the UI when it’s doing heavy lifting on the business logic side.

To communicate between the threads, we use Data binding and Observables. So your use case should translate to something like this:

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var myText = Observable("");
		module.exports = {
			myText: myText
		};
	</JavaScript>
	<Panel Width="240" Height="56" Alignment="Center">
		<TextInput Value="{myText}" TextColor="#fff" Margin="8" />
		<Rectangle Color="#18f" CornerRadius="2" />
	</Panel>
</App>

You should definitely take the time and get acquainted with core concepts in Fuse, and I suggest you do so by following the Tutorial.

3

Hey Uldis. Thanks for the tip. Actually I went through the Tutorial but it was over 2 months ago.
I didn’t realize the icons of the properties and events have two sides (one for ux and the other for js). Anyway, I will try to give it another ago and see what happens. Need to change the mindset slightly now.