Tài liệu Using The FocusManager Component ppt

< Day Day Up >

Using The FocusManager Component
One of the main goals of any good application is to make the user's experience as
pleasant and straightforward as possible. A large part of accomplishing this goal involves
anticipating the user's needs and making sure that your application allows users to
accomplish tasks with minimal effort. For example, look at the process of doing a search
on Google. When you navigate to Google's homepage, your cursor is automatically
inserted in the Search box because they believe that your main purpose for visiting their
site is to do a search. It's a simple thing, but it allows you to begin typing keywords as
soon as the page loads, without having to first drag your mouse to place the cursor in the
Search box manually.
What happens when you press Enter/Return? Because you've typed keywords into the
Search box, pressing Enter/Return should submit your keywords to Google's search
engine. Fortunately, it does. Imagine how awful it would be if pressing Enter/Return took
you to their Help page. This would make using Google a real pain.
These kinds of simple anticipatory behaviors within an application are deliberately
programmed by the developer as a way of making the application easier to use. Besides
Google's homepage, you've probably experienced similar functionality in other
applications—especially those with dialog boxes where pressing the Tab key allows you
to quickly navigate from one field to the next.
Within Flash, these types of interactions are handled by the FocusManager component.
Why is this component special? Because you never see it physically, unlike Button or
CheckBox component instances. You can only see its effects—an invisible instance of
the FocusManager component is automatically added to your project whenever you add a
regular component instance. The FocusManager component takes care of managing
focus-related tasks via ActionScript.
N
OTE
Because the FocusManager component is invisible, it can't be configured using the

Component Inspector or Property Inspector, as other component instances can. It can
only be configured and worked with by using ActionScript.

The term focus is simply a computer geek term meaning the object that's currently being
manipulated. Type text into TextInput component instance, and it's said to have focus.
Click a button; it has focus. Select a check box, and it has focus. Only a single item at a
time in an application can have focus.
As you can see, what's considered as having focus in an application is constantly in flux.
N
ormally, the user controls what has focus at any particular time due to the way he or she
is interacting with the application. However, the FocusManager component gives you
some control over the focus. Why would having control over the focus aspects of your
application be helpful? Consider these scenarios.
Scenario 1
The user clicks a check box in your application, indicating that he or she wants to receive
email about special offers. The FocusManager component allows you to automatically
give focus to the TextInput instance, allowing the user to immediately begin typing an
email address after selecting the check box—without having to manually move the cursor
to the textbox. If the TextInput instance is named myTextInput_ti, it would be given
focus using the following syntax:

focusManager.setFocus(myTextInput_ti);


Scenario 2
You want users to be able to press Enter/Return at any time, depending on the task they're
trying to accomplish, and have Enter/Return simulate clicking the appropriate button.
Because our sample application allows the user to enter an email address, chances are
that there's a button on the interface that, when clicked, will submit the address. Instead
of making the user click the button, you can set the FocusManager's setDefaultButton

property like this:

focusManager.setDefaultButton = mySubmitButton_pb;


As a result, the click event for the Button component instance mySubmitButton_pb will
be triggered when the Enter/Return button on the keyboard is pressed. Any objects
registered to listen for this event will be notified that it has occurred, thus executing any
scripts set up to execute as a result of the event.
In the following exercise, we'll use the functionality the FocusManager provides to make
our application a bit more user-friendly in several ways, which we'll explain as we go
along.
1. Open Components4.fla.
This project continues from where we left off in the preceding exercise. We'll
insert several lines of code throughout the existing code on Frame 1.
2. With the Actions panel open and Frame 1 selected, insert the following line of
script as the last line of the function that begins inputURL_tiListener.focusIn =
function () {:
3.
4. focusManager.defaultPushButton = addURL_pb;
5.


Remember that this function handles what happens when the inputURL_ti instance
is given focus. As a result of placing this line of script within this function
definition, when the inputURL_ti instance is given focus the addURL_pb button
becomes the default button when the Enter/Return key is pressed. This means that
pressing the Enter/Return key triggers a click event, just as if the addURL_pb
were actually clicked. The Listener object we have set up to listen for this event is
notified that the event has occurred, and takes action accordingly.

Let's do a test.
3. Choose Control > Test Movie.
When the application appears, click inside the inputURL_ti instance. As soon as
you do, the Add button (addURL_pb) becomes highlighted, indicating that it's the
default button. Type a URL, press the Return/Enter key, and you'll see that this has
the same effect as manually clicking the Add button.
4. Close the test movie to return to the authoring environment. With the Actions
panel open and Frame 1 selected, insert the following line of script as the last line
within the conditional statement that's part of the function beginning
deleteURL_pbListener.click = function () {:
5.
6. focusManager.setFocus(inputURL_ti);
7.


When the deleteURL_pb instance is clicked for the purpose of deleting a URL
from the list, the function to which we added this line of script is executed. The
conditional part of the statement is only executed when the last URL in the list is
deleted. Because this line of script was inserted within that conditional statement,
it also is executed only when the last URL is deleted from the list. When the last
URL is deleted from the list, the inputURL_ti instance is given focus, allowing the
user to immediately begin entering new URLs without manually placing the cursor
first. This simple addition makes for a much more usable application.
5. Choose Control > Test Movie.
When the application appears, add some URLs; then begin deleting them. As soon
as you delete the last one, the inputURL_ti instance is automatically given focus,
allowing you to immediately add new URLs again.
TIP
The FocusManager component has additional functionality that can be explored by
looking up its entry in the ActionScript dictionary.

6. Close the test movie to return to the authoring environment. Save this file as
Components5.fla.
Our application needs a bit of final visual tweaking, and we'll take care of this
next.

< Day Day Up >