ADOBE® FLEX® 3: PROGRAMMING ACTIONSCRIPT™ 3.0

ADOBE FLEX 3

Developer Guide

488

Writing data to a socket

To write data to a socket connection, you call any of the write methods in the Socket class (such as writeBoolean(),

writeByte(), writeBytes(), or writeDouble()), and then flush the data in the output buffer using the flush()

method. In the Telnet server, data is written to the socket connection using the

writeBytes() method which takes

the byte array as a parameter and sends it to the output buffer. The

writeBytesToSocket() method is as follows:

public function writeBytesToSocket(ba:ByteArray):void

{

socket.writeBytes(ba);

socket.flush();

}

This method gets called by the sendCommand() method of the main application file.

Displaying messages from the socket server

Whenever a message is received from the socket server, or an event occurs, the custom msg() method is called. This

method appends a string to the TextArea on the Stage and calls a custom

setScroll() method, which causes the

TextArea component to scroll to the very bottom. The

msg() method is as follows:

private function msg(value:String):void

{

ta.text += value;

setScroll();

}

If you didn’t automatically scroll the contents of the TextArea component, users would need to manually drag the

scroll bars on the text area to see the latest response from the server.

Scrolling a TextArea component

The setScroll() method contains a single line of ActionScript that scrolls the TextArea component’s contents

vertically so the user can see the last line of the returned text. The following snippet shows the

setScroll() method:

public function setScroll():void

{

ta.verticalScrollPosition = ta.maxVerticalScrollPosition;

}

This method sets the verticalScrollPosition property, which is the line number of the top row of characters

that is currently displayed, and sets it to the value of the

maxVerticalScrollPosition property.

Example: Uploading and downloading files

The FileIO example demonstrates techniques for performing file downloading and uploading in Flash Player. These

techniques are:

• Downloading files to a user’s computer

• Uploading files from a user’s computer to a server

• Cancelling a download in progress

• Cancelling an upload in progress

ADOBE FLEX 3

Developer Guide

489

To get the application files for this sample, see www.adobe.com/go/learn_programmingAS3samples_flash. The

FileIO application files are found in the Samples/FileIO folder. The application consists of the following files:

FileIO application overview

The FileIO application contains the user interface that allows a user to upload or download files using Flash Player.

The application first defines a couple of custom components, FileUpload and FileDownload, which can be found in

the com.example.programmingas3.fileio package. Once each custom component dispatches its

contentComplete

event, the component’s

init() method is called and passes references to a ProgressBar and Button component

instance, which allow users to see the file’s upload or download progress or cancel the file transfer in progress.

The relevant code from the FileIO.mxml file is as follows (Note that in the Flash version, the FLA file contains

components placed on the stage, whose names match the names of the Flex components described in this step):

<example:FileUpload id="fileUpload" creationComplete="fileUpload.init(uploadProgress,

cancelUpload);" />

<example:FileDownload id="fileDownload"

creationComplete="fileDownload.init(downloadProgress, cancelDownload);" />

The following code shows the Upload File panel, which contains a progress bar and two buttons. The first button,

startUpload, calls the FileUpload.startUpload() method, which calls the FileReference.browse()

method. The following excerpt shows the code for the Upload File panel:

<mx:Panel title="Upload File" paddingTop="10" paddingBottom="10" paddingLeft="10"

paddingRight="10">

<mx:ProgressBar id="uploadProgress" label="" mode="manual" />

<mx:ControlBar horizontalAlign="right">

<mx:Button id="startUpload" label="Upload..." click="fileUpload.startUpload();" />

<mx:Button id="cancelUpload" label="Cancel" click="fileUpload.cancelUpload();"

enabled="false" />

</mx:ControlBar>

</mx:Panel>

This code places a ProgressBar component instance and two Button component button instances on the Stage. When

the user clicks the Upload button (

startUpload), an operating system dialog box is launched that allows the user

to select a file to upload to a remote server. The other button,

cancelUpload, is disabled by default, although when

a user begins a file upload, the button becomes enabled and allows the user to abort the file transfer at any time.

The code for the Download File panel is as follows:

<mx:Panel title="Download File" paddingTop="10" paddingBottom="10" paddingLeft="10"

paddingRight="10">

<mx:ProgressBar id="downloadProgress" label="" mode="manual" />

<mx:ControlBar horizontalAlign="right">

<mx:Button id="startDownload" label="Download..."

click="fileDownload.startDownload();" />

File Description

FileIO.fla

or

FileIO.mxml

The main application file in Flash (FLA) or Flex (MXML).

com/example/programmingas3/fileio/FileDownload.as A class that includes methods for downloading files from a server.

com/example/programmingas3/fileio/FileUpload.as A class that includes methods for uploading files to a server.