18
Chapter 1: Introducing Flex
</mx:Panel>
</mx:Application>
The previous example inserts the ActionScript code directly into the MXML code. Although this
technique works well for one or two lines of ActionScript code, for more complex logic you
typically define your ActionScript in an
<mx:Script>
block, as the following example shows:
<?xml version="1.0"?>
<!-- ?xml tag must start in line 1 column 1 -->
<mx:Script>
<![CDATA[
function duplicate(){
myText.text=myInput.text;
}
]]>
</mx:Script>
<!-- MXML root element tag -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >
<!-- Flex controls exist in a container. Define a Panel container. -->
<mx:Panel title="My Application">
<!-- TextInput control for user input. -->
<mx:TextInput id="myInput" width="150" text="" />
<!-- Button control that triggers the copy. -->
<mx:Button id="myButton" label="Copy Text"
click="duplicate();"
/>
<!-- Output TextArea control. -->
<mx:TextArea id="myText" text="" width="150" />
</mx:Panel>
</mx:Application>
In this example, you implement the event handler as an ActionScript function. Flex calls this
function in response to the user selecting the Button control. This techniques lets you separate
your MXML code from your ActionScript code. You can also choose to divide your application
into multiple files to increase its modularity. For more information, see
Chapter 3, “Using
ActionScript,” on page 43
.
Summary of Contents for FLEX-GETTING STARTED WITH FLEX
Page 1: ...Getting Started with Flex...
Page 4: ...4 Contents...
Page 22: ...22 Chapter 1 Introducing Flex...
