Flex/Spark: How much logic in view? How to clear a TextField as a reaction to a user click or an event?

Question

When using Flex with Spark, I have a simple chat window with a TextInput to enter your message and a send Button.

TextInput

• Starts out as ""
• Should be set to "" last in the function that handles the message sending
• Should also be set to "" as a response for event="myOtherEvent"

Button

• Should only be enabled when the TextInput's text.length > 0

At first I thought it was pretty clean to skip binding the text being entered into the TextInput to anything in my model and let that logic for button enabling/disabling stay in the view.

I still feel that it's a pretty nice approach except for the fact that it isn't a complete solution as it does not clear the TextInput.text as a response to receiving event="myOtherEvent".

The MXML for that partial solutions is:

<s:TextInput id="chatText" width="100%" height="32" />
<s:Button
  label="Send"
  enabled="{chatText.text.length > 0}"
  click='{model.send(chatText.text); chatText.text=""}'
/>

If it wasn't for my event response requirement, how do you feel about that solution?

There is some logic in the Button, but just basic setting and checking. I know that it's a good idea to separate logic and presentation, but I thought this was a nice balance.

A complete solution I can think of would be to:

• Have a two way binding of chatText.text and a property in my model
• And in the set method for that property, I would dispatchEvent(new Event("updateButton")
• A function in the same model class would bind to that event. That function would also be read in enabled="{model.thatFunction()}" of the Button. The function would return chatTextStringPropertyInModel.length > 0 and thus (by jumping through some hoops) would see to that the send-Button is enabled when there is text available for sending.
• The model.send(chatText.text) can set chatTextStringPropertyInModel="" after sending and as that property is two-way bound with chatText.text the change would be reflected in the UI too.

My questions:

1. How much logic is all right to have in the view?
2. How should I solve this? What is most elegant and maintainable?

Answer 1

Maybe I'm confused but I don't see an issue in your solution. You just need to add an event handler for your other event

<fx:Script>
    <![CDATA[

        //clear text and disable button on other event
        private function onMyOtherEvent(event:Event):void
        {
            chatText.text = "";
        }

    ]]>
</fx:Script>

<s:TextInput id="chatText" width="100%" height="32" />
<s:Button
  label="Send"
  enabled="{chatText.text.length > 0}"
  click='{model.send(chatText.text); chatText.text=""}'/>

Also I don't think there's anything wrong with a view component handling it's own view logic...