Set TextInput Focus.Delegate

How-to Discussions
1

Hi,

I know how to set Focus.Delegate of TextInput on same UX file component. But how can I set Focus.Delegate on other UX file component like I want to set on messageView of MessageChat. How can I access other ux file component?

MainView.ux:

<App>
    <Android.StatusBarConfig Color="Black" IsVisible="true" />
    <DockPanel Margin="12,25,12,0" >
        <BottomBarBackground Dock="Bottom" />
        <TextInput ux:Name="TextBox" Margin="8" PlaceholderText="Enter Text Here" PlaceholderColor="#8f8f8fdd" FontSize="24" TextColor="Black"  Dock="Bottom" Height="50" />
       <MessageChat/>
    </DockPanel>
</App>

MessageChat.ux:

<Panel ux:Class="MessageChat">
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var messages = [ { items: "Hii" },
                        { items: "Hello" },
                        { items: "Good Mornign!" },
                        { items: "How are you ?" },
                        { items: "What do you do ?" } ];

        module.exports = {
            messages: messages
        }
    </JavaScript>
    <ScrollView LayoutMode="PreserveScrollPosition" ux:Name="scrollView" AllowedScrollDirections="Vertical" Dock="Bottom" Height="90%" Width="100%" >
            <StackPanel ux:Name="messageView" Alignment="Bottom" ItemSpacing="8">
                <Each Items="{messages}" >
                    <Rectangle ux:Name="sendMessage" CornerRadius="25" Dock="Right" Color="#329af0" Padding="10" X="0" Y="0" >
                        <Text  Value="{items}" TextWrapping="Wrap" Alignment="CenterRight" TextColor="White" FontSize="18" />
                    </Rectangle>
                </Each>
            </StackPanel>
        </ScrollView>
</Panel>
2

I don’t think you can. If it was the other way around, you could do away with ux:Dependency, but this is not the case.

To do the focus delegation, you need to refer to elements by their ux:Name, and those are only available in the same scope. Why not just put the TextInput inside of the MessageChat component?

Could you explain the use case better? Perhaps there could be a workaround with ux:Dependency and GiveFocus still.

3

The MessageChat is a one components in MainPage. Many separate components are in that page so reducing code in one file, I am putting it outside of MainPage. Also MessageChat is using in other Page so for code reusability, I put it in other file.

4

This calls for trouble, at least in my book.

If you have two instances of MessageChat, which of those would hold the element that you want to use as the focus delegate of that TextInput? That won’t work; you need to rethink how you split up the UX code - I suggest putting the TextInput right where it belongs, inside of that component.

5

Ahh…that is also a problem. Thanks. But MainPage has lots of code so I want to put MessageChat code outside of it.

6

Dhvl Golakiya wrote:

I want to put MessageChat code outside of it.

Do it. Just move the TextInput where it belongs.

7

Thanks Uldis. Will do that

8

Can we set TextInput Focus.Delegate property in other scope? If we pass TextInput to MessageChat panel with ux:Dependency like:

<Panel ux:Class="MessageChat">
    <TextInput ux:Dependency="messageTextInput"/>
    ...
    ...
    ...
</Panel>

And in App:

<TextInput ux:Name="TextBox"/>
<MessageChat messageTextInput="TextBox"/>

Is it possible to set Focus.Delegate in MessageChat with this?