Google Git
Sign in
apache / flex-site / ec799639d0bc0fab0451242bf01d2720166d9a1a / . / content / doc / flex / using / flx_apollo_components_ap.html
blob: d9c0ac91a25d1fb3b1fb66af220351ab8fe5a09e [file] [log] [blame]
<?xml version="1.0" encoding="UTF-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us" xml:lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="DC.Type" content="topic"/>
<meta name="DC.Title" content="Using the Flex AIR components"/>
<meta name="DC.Format" content="XHTML"/>
<meta name="DC.Identifier" content="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-8000_verapache"/>
<link rel="stylesheet" type="text/css" href="commonltr.css"/>
<title>Using the Flex AIR components</title>
</head>
<body id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-8000_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-8000_verapache"><!-- --></a>
<h1 class="topictitle1">Using the Flex AIR components</h1>
<div>
<p>When building an Adobe® AIR® application in Flex, you can
use any of the controls and other components that are part of Flex.
In addition, Flex includes a set of components that are specifically
for AIR applications.</p>
</div>
<div class="nested1" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fff_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fff_verapache"><!-- --></a>
<h2 class="topictitle2">Flex AIR components overview</h2>
<div>
<p>The Flex AIR components can be divided into the following
groups:</p>
<div class="section"><h3 class="sectiontitle">File system controls</h3>
<p>The file system controls
are a set of user-interface controls that provide information about
and tools to interact with the file system of the local computer
on which the AIR application is running. These include controls
for displaying lists of files in tree or grid format, controls for
choosing directories or files from a list or combo box, and so on. </p>
<ul>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffe_verapache">About
file system controls</a>
</p>
</li>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffd_verapache">FileSystemComboBox
control</a>
</p>
</li>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffa_verapache">FileSystemTree
control</a>
</p>
</li>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff7_verapache">FileSystemList
control</a>
</p>
</li>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff4_verapache">FileSystemDataGrid
control</a>
</p>
</li>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff1_verapache">FileSystemHistoryButton
control</a>
</p>
</li>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fee_verapache">Example:
Displaying a directory structure with Flex AIR</a>
</p>
</li>
</ul>
</div>
<div class="section"><h3 class="sectiontitle">HTML control</h3>
<p>The HTML control is used
to display an HTML web page within a Flex application. For example,
you could use it to combine HTML and Flex content in a single application.
You cannot use the HTML control in a mobile Flex application.</p>
<ul>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fed_verapache">About
the HTML control</a>
</p>
</li>
</ul>
</div>
<div class="section"><h3 class="sectiontitle">FlexNativeMenu control</h3>
<p>The FlexNativeMenu
control provides the ability to use MXML to declaratively define
the structure of a native menu. You can use it to define an application menu
(on OS X), a window’s menu (on Windows), a context menu, and so
forth.</p>
<ul>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fea_verapache">About
the FlexNativeMenu control</a>
</p>
</li>
</ul>
</div>
<div class="section"><h3 class="sectiontitle">Window containers</h3>
<p>The window containers
are two components that can be used as containers for defining the
layout of windows in applications. There are two window containers: the
WindowedApplication, a substitute for the Application container
to use as the main or initial window of an AIR application; and
the Window, for application windows that are opened after the initial
window of the application. </p>
<ul>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd8_verapache">About
the AIR window containers</a>.</p>
</li>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd6_verapache">WindowedApplication
container</a>
</p>
</li>
<li>
<p>
<a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd3_verapache">Window
container</a>
</p>
</li>
</ul>
</div>
</div>
</div>
<div class="nested1" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffe_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffe_verapache"><!-- --></a>
<h2 class="topictitle2">About file system controls</h2>
<div>
<p>
The Flex file system components
combine the functionality of other Flex controls, such as Tree,
DataGrid, ComboBox, and so forth, with pre-built awareness of the file
system on the application user’s computer. These controls duplicate
the functionality of user interface controls that are commonly used
in desktop applications for browsing and selecting files and directories.
You can use one or two of them to directly include file-related
functionality in a screen of your application. Or you can combine
several of them together to create a full-featured file browsing
or selection dialog box.</p>
<p>Each of the Flex file system controls, except the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/FileSystemHistoryButton.html" target="_blank">FileSystemHistoryButton</a> control, displays
a view of the contents of a particular directory in the computer’s
file system. For instance, the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/FileSystemTree.html" target="_blank">FileSystemTree</a> displays
the directory’s contents in a hierarchical tree (using the Flex
Tree control) and the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/FileSystemComboBox.html" target="_blank">FileSystemComboBox</a> displays
the directory and its parent directories in the menu of a ComboBox control.</p>
<div class="p">
<div class="note"><span class="notetitle">Note:</span> The File class includes methods for accessing the file
and directory selection dialog boxes built-in to the operating system.
For example, the File.browseForOpen() method presents the user with
a dialog box for opening a file. The File class also includes the <samp class="codeph">browseForDirectory()</samp>, <samp class="codeph">browseForOpenMultiple()</samp>,
and <samp class="codeph">browseForSave()</samp> methods. It is often better
and easier to use these methods that to construct your own file
selection user interface. </div>
</div>
<p>For any of the Flex file system controls except the FileSystemHistoryButton control,
you use the control’s <samp class="codeph">directory</samp> property to change
the currently selected directory for a control. You can also use
the <samp class="codeph">directory</samp> property to retrieve the current
directory, such as if the user selects a directory in the control.</p>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffd_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffd_verapache"><!-- --></a>
<h3 class="topictitle3">FileSystemComboBox control</h3>
<div>
<p>
A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/FileSystemComboBox.html" target="_blank">FileSystemComboBox</a> defines
a combo box control for selecting a location in a file system. The
control always displays the selected directory in the combo box’s text
field. When the combo box’s drop-down list is displayed, it shows
the hierarchy of directories that contain the selected directory,
up to the computer root directory. The user can select a higher-level
directory from the list. In this sense, the FileSystemComboBox control’s
behavior is different from the FileSystemTree, FileSystemList, and
FileSystemDataGrid controls that display the directories and files
that are contained by the current directory.</p>
<p>For more information on the FileSystemComboBox control, see the <em>
<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em>. </p>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffc_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffc_verapache"><!-- --></a>
<h4 class="topictitle4">Creating a FileSystemComboBox control</h4>
<div>
<p>You use the <samp class="codeph">&lt;mx:FileSystemComboBox&gt;</samp> tag
to define a FileSystemComboBox control in MXML. Specify an <samp class="codeph">id</samp> value
if you intend to refer to a component elsewhere in your MXML, either
in another tag or in an ActionScript block.</p>
<p>You specify the currently displayed directory using the control’s <samp class="codeph">directory</samp> property.
The <samp class="codeph">directory</samp> property can be set in MXML by binding
the value to a property or variable, or by setting the property
in ActionScript. When you set the <samp class="codeph">directory</samp> property,
the data provider of the underlying combo box is automatically populated.
By default the <samp class="codeph">directory</samp> property is set to the
root “Computer” directory, which has no ancestor directories and
hence shows no selectable directories in the combo box’s drop-down
list.</p>
<p>The following example shows four variations on the basic FileSystemComboBox. Each
combo box is initially set to the user’s desktop directory, in the
application’s <samp class="codeph">creationComplete</samp> handler. The distinct
characteristics of the combo boxes are as follows:</p>
<ul>
<li>
<p>The first combo box simply displays the selected directory.</p>
</li>
<li>
<p>The second combo box’s <samp class="codeph">showIcons</samp> property
is set to <samp class="codeph">false</samp>, so no icon appears next to the
items in the combo box’s list.</p>
</li>
<li>
<p>The third combo box’s <samp class="codeph">indent</samp> property is
set to 20, which is larger than the default. As a result, the items
in the combo box’s list are more indented than normal.</p>
</li>
<li>
<div class="p">The fourth combo box has an event handler defined for the <samp class="codeph">directoryChange</samp> event.
When the selected directory in the combo box changes, it calls the <samp class="codeph">setOutput()</samp> method,
which writes the selected directory’s path to a TextArea control
named <samp class="codeph">output</samp>.<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/FSComboBoxSimple.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init();"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import flash.filesystem.File;
private function init():void {
fcb.directory = File.desktopDirectory;
fcbIndent.directory = File.desktopDirectory;
fcbNoIcons.directory = File.desktopDirectory;
fcbChange.directory = File.desktopDirectory;
}
private function setOutput():void {
output.text = fcbChange.directory.nativePath;
}
]]&gt;
&lt;/fx:Script&gt;
&lt;mx:FileSystemComboBox id="fcb"/&gt;
&lt;mx:FileSystemComboBox id="fcbNoIcons"
showIcons="false"/&gt;
&lt;mx:FileSystemComboBox id="fcbIndent"
indent="20"/&gt;
&lt;mx:FileSystemComboBox id="fcbChange"
directoryChange="setOutput();"/&gt;
&lt;s:TextArea id="output"
width="200" height="50"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</li>
</ul>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffb_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffb_verapache"><!-- --></a>
<h4 class="topictitle4">FileSystemComboBox user interaction</h4>
<div>
<p>The FileSystemComboBox supports the same user interaction
as a standard combo box control. The control displays a directory
in its selection field. The user clicks the button (or uses the
keyboard) to open a drop-down list containing the names of the hierarchy
of directories that contain the selected directory. The user can
then select one of the directories, which causes the drop-down list
to close and the selected directory to become the current directory.
When the user selects a directory, the control dispatches the <samp class="codeph">directoryChange</samp> event,
and its <samp class="codeph">directory</samp> property changes to the newly
selected directory.</p>
</div>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffa_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ffa_verapache"><!-- --></a>
<h3 class="topictitle3">FileSystemTree control</h3>
<div>
<p>
A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/FileSystemTree.html" target="_blank">FileSystemTree</a> control
displays the contents of a file system directory as a tree. The
tree can display the directory’s files, its subdirectories, or both.
For files, file names can be displayed with or without extensions.</p>
<p>For more information on the FileSystemTree control, see the <em>
<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em>. </p>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff9_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff9_verapache"><!-- --></a>
<h4 class="topictitle4">Creating a FileSystemTree control</h4>
<div>
<p>You use the <samp class="codeph">&lt;mx:FileSystemTree&gt;</samp> tag
to define a FileSystemTree control in MXML. Specify an <samp class="codeph">id</samp> value
if you intend to refer to a component elsewhere in your MXML, either
in another tag or in an ActionScript block.</p>
<p>You specify the currently displayed directory using the control’s <samp class="codeph">directory</samp> property.
You can set the directory property in MXML by binding the value
to a property or variable, or by setting the property in ActionScript.
When you set the <samp class="codeph">directory</samp> property, the data provider
of the underlying tree control is automatically populated. The specified
directory isn’t displayed in the tree—its child files or directories
are shown as the top-level nodes of the tree. By default the <samp class="codeph">directory</samp> property
is set to the root “Computer” directory. Consequently, its children
(the drive or drives attached to the computer) are displayed as
the top branches of the tree.</p>
<p>The following example demonstrates creating a FileSystemTree
control that displays all files and folders, which is the default.
In addition, hidden files are shown by setting the <samp class="codeph">showHidden</samp> property
to <samp class="codeph">true</samp>.</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/FSTreeSimple.mxml --&gt;
&lt;s:WindowedApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;mx:FileSystemTree showHidden="true"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff8_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff8_verapache"><!-- --></a>
<h4 class="topictitle4">FileSystemTree user interaction</h4>
<div>
<p>The FileSystemTree control supports the same types of user
interaction as the standard Flex Tree control. In addition, the
FileSystemTree control provides several additional events for file-related
functionality. If the user double-clicks a closed directory node
or clicks its disclosure icon, the control dispatches a <samp class="codeph">directoryOpening</samp> event.
If the user double-clicks an open directory node or clicks its disclosure
icon, the control dispatches a <samp class="codeph">directoryClosing</samp> event.
If the user double-clicks a file node, the control dispatches a <samp class="codeph">fileChoose</samp> event.</p>
</div>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff7_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff7_verapache"><!-- --></a>
<h3 class="topictitle3">FileSystemList control</h3>
<div>
<p>
A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/FileSystemList.html" target="_blank">FileSystemList</a> control
displays the contents of a file system directory as selectable items
in a scrolling list (a Flex List control). The displayed contents
can include subdirectories and files, with additional filtering
options as well. A FileSystemList control can be linked to a FileSystemHistoryButton
control, meaning that the button can be used to move to a previously
displayed directory.</p>
<p>For more information on the FileSystemList control, see the <em>
<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em>. </p>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff6_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff6_verapache"><!-- --></a>
<h4 class="topictitle4">Creating a FileSystemList control</h4>
<div>
<p>You use the <samp class="codeph">&lt;mx:FileSystemList&gt;</samp> tag
to define a FileSystemList control in MXML, as the following example
shows. Specify an <samp class="codeph">id</samp> value if you intend to refer to
a component elsewhere in your MXML, either in another tag or in
an ActionScript block.</p>
<p>You specify the currently displayed directory using the control’s <samp class="codeph">directory</samp> property.
The directory property can be set in MXML by binding the value to
a property or variable, or by setting the property in ActionScript.
When you set the <samp class="codeph">directory</samp> property, the data provider
of the underlying list control is automatically populated. The specified
directory isn’t displayed in the list—its child files or directories
are shown as the items in the list. By default the <samp class="codeph">directory</samp> property
is set to the root “Computer” directory. In that case its children,
which are the drive or drives attached to the computer, are displayed
as the items in the list.</p>
<p>The following example demonstrates creating a FileSystemList
control that displays all files and folders (the default). The sample
also includes a button for navigating up one level in the directory
hierarchy. The button is enabled if the currently displayed directory
has a parent directory because the button’s <samp class="codeph">enabled</samp> property
is bound to the FileSystemList control’s <samp class="codeph">canNavigateUp</samp> property.
The button navigates up one level by calling the FileSystemList control’s <samp class="codeph">navigateUp()</samp> method
when it is clicked.</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/FSListSimple.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:FileSystemList id="fileList"/&gt;
&lt;s:Button label="Up"
click="fileList.navigateUp();"
enabled="{fileList.canNavigateUp}"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff5_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff5_verapache"><!-- --></a>
<h4 class="topictitle4">FileSystemList user interaction</h4>
<div>
<p>The FileSystemList control provides standard scrolling
list functionality for files: a user can scroll through the list
of files and select one or multiple files or directories. When the
user double-clicks a directory, the FileSystemList control automatically
sets that directory as the control’s <samp class="codeph">directory</samp> property.
It then becomes the directory whose contents are displayed in the
list.</p>
</div>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff4_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff4_verapache"><!-- --></a>
<h3 class="topictitle3">FileSystemDataGrid control</h3>
<div>
<p>
A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/FileSystemDataGrid.html" target="_blank">FileSystemDataGrid</a> displays
file information in a data-grid format. The file information displayed
includes the file name, creation date, modification date, type,
and size. Data grid columns displaying this information are automatically created
in the underlying DataGrid control, and can be removed or customized in
the same way that you customize DataGrid columns. The displayed
contents can include subdirectories and files, with additional filtering
options as well. A FileSystemList control can be linked to a FileSystemHistoryButton
control, meaning that the button can be used to move to a previously
displayed directory.</p>
<p>For more information on the FileSystemDataGrid control, see the <em>
<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em>. </p>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff3_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff3_verapache"><!-- --></a>
<h4 class="topictitle4">Creating a FileSystemDataGrid control</h4>
<div>
<p>You use the <samp class="codeph">&lt;mx:FileSystemDataGrid&gt;</samp> tag
to define a FileSystemDataGrid control in MXML, as the following
example shows. Specify an <samp class="codeph">id</samp> value if you intend
to refer to a component elsewhere in your MXML, either in another
tag or in an ActionScript block.</p>
<p>You specify the currently displayed directory using the control’s <samp class="codeph">directory</samp> property.
You can set the directory property in MXML by binding the value
to a property or variable, or by setting the property in ActionScript.
When you set the <samp class="codeph">directory</samp> property the data provider
of the underlying data grid control is automatically populated.
The specified directory isn’t displayed in the grid—its child files
or directories are shown as the rows in the grid. By default the <samp class="codeph">directory</samp> property
is set to the root “Computer” directory. In that case its children,
the drive or drives attached to the computer, are displayed as the
items in the grid.</p>
<p>The following example demonstrates creating a FileSystemDataGrid
control that displays all files and folders (the default). The sample
also includes a button for navigating up one level in the directory
hierarchy. The button is enabled if the currently displayed directory
has a parent directory because the button’s <samp class="codeph">enabled</samp> property
is bound to the FileSystemDataGrid control’s <samp class="codeph">canNavigateUp</samp> property.
The button navigates up one level by calling the FileSystemDataGrid
control’s <samp class="codeph">navigateUp()</samp> method when it is clicked.</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/FSDataGridSimple.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:FileSystemDataGrid id="fileGrid"/&gt;
&lt;s:Button label="Up"
click="fileGrid.navigateUp();"
enabled="{fileGrid.canNavigateUp}"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff2_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff2_verapache"><!-- --></a>
<h4 class="topictitle4">FileSystemDataGrid user interaction</h4>
<div>
<p>The FileSystemDataGrid control includes standard DataGrid
functionality such as scrolling through the grid, selecting grid
rows, reordering grid columns, and sorting grid data by clicking
the grid headers. </p>
<p>In addition, the FileSystemDataGrid provides some file-specific
functionality. A FileSystemDataGrid allows a user to navigate to
other directories using the mouse or keyboard. The user can change
the directory by double-clicking a subdirectory, by pressing Enter
or Ctrl-Down when a subdirectory is selected, by pressing Ctrl-Up
when the control isn't displaying the COMPUTER directory, by pressing
Ctrl-Left when there is a “previous” directory to navigate back
to, or by pressing Ctrl-Right when there is a “next” directory to
navigate forward to. </p>
<p>If the user attempts to change the directory being displayed,
the control dispatches a cancelable <samp class="codeph">directoryChanging</samp> event.
If the event isn’t canceled, the control displays the contents of
the new directory and its <samp class="codeph">directory</samp> property changes.
Whenever the <samp class="codeph">directory</samp> property changes for any
reason, the controls dispatches a <samp class="codeph">directoryChange</samp> event.</p>
</div>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff1_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff1_verapache"><!-- --></a>
<h3 class="topictitle3">FileSystemHistoryButton control</h3>
<div>
<p>
The <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/FileSystemHistoryButton.html" target="_blank">FileSystemHistoryButton</a> control
lets the user move backwards or forwards through the navigation
history of another control. It works in conjunction with a FileSystemList
or FileSystemDataGrid control, or any similar control with a property
containing an array of File objects. The FileSystemHistoryButton
is a PopUpMenuButton. It has a button for navigating back or forward
one step in the history. It also has a list of history steps from
which one step can be chosen.</p>
<p>To link a FileSystemHistoryButton to a control, bind the button’s <samp class="codeph">dataProvider</samp> property
to one of the control’s properties. The property must contain an
array of File objects representing a sequence of directories in
a file system browsing history. For instance, you can bind the <samp class="codeph">dataProvider</samp> property
to the <samp class="codeph">forwardHistory</samp> or <samp class="codeph">backHistory</samp> property
of a FileSystemList or FileSystemDataGrid control. The button can
then be used to navigate the display history of that control if
you set the <samp class="codeph">click</samp> and <samp class="codeph">itemClick</samp> event handlers
of the button to call the <samp class="codeph">navigateForward()</samp> or <samp class="codeph">navigateBack()</samp> method
of the control.</p>
<p>For more information on the FileSystemHistoryButton control,
see the <em>
<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em>. </p>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff0_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7ff0_verapache"><!-- --></a>
<h4 class="topictitle4">Creating a FileSystemHistoryButton
control</h4>
<div>
<p>You use the <samp class="codeph">&lt;mx:FileSystemHistoryButton&gt;</samp> tag
to define a FileSystemHistoryButton control in MXML. Specify an <samp class="codeph">id</samp> value
if you intend to refer to a component elsewhere in your MXML, either
in another tag or in an ActionScript block.</p>
<p>You specify the property to which the button is bound by setting
the <samp class="codeph">dataProvider</samp> property.</p>
<p>The following example demonstrates creating two FileSystemHistoryButton controls
that are linked to the display history of a FileSystemList control.
Each button’s <samp class="codeph">enabled</samp> property is bound to the
FileSystemList control’s <samp class="codeph">canNavigateBack</samp> or <samp class="codeph">canNavigateForward</samp> property.
As a result, the button is enabled if the currently displayed directory
can navigate in the appropriate direction. When the user clicks
a button, its event listener calls the FileSystemList control’s <samp class="codeph">navigateBack()</samp> or <samp class="codeph">navigateForward()</samp> method.
This causes the FileSystemList control to navigate to the previous
or next directory.</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/FSHistoryBSimple.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:HGroup&gt;
&lt;mx:FileSystemHistoryButton label="Back"
dataProvider="{fileList.backHistory}"
enabled="{fileList.canNavigateBack}"
click="fileList.navigateBack();"
itemClick="fileList.navigateBack(event.index)"/&gt;
&lt;mx:FileSystemHistoryButton label="Forward"
dataProvider="{fileList.forwardHistory}"
enabled="{fileList.canNavigateForward}"
click="fileList.navigateForward();"
itemClick="fileList.navigateForward(event.index)"/&gt;
&lt;/s:HGroup&gt;
&lt;mx:FileSystemList id="fileList"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fef_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fef_verapache"><!-- --></a>
<h4 class="topictitle4">FileSystemHistoryButton user interaction</h4>
<div>
<p>The FileSystemHistoryButton is based on the Flex PopUpMenuButton,
so their core functionality is the same. When the user clicks the
main button the click event is dispatched (normally moving backward
or forward one step in the history). In addition, by clicking the
pull-down menu button, a list of the history steps is displayed.
This allows the user to navigate directly to a specific step in
the history.</p>
</div>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fee_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fee_verapache"><!-- --></a>
<h3 class="topictitle3">Displaying a directory structure
with Flex AIR</h3>
<div>
<p>
The
following example uses the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/WindowedApplication.html" target="_blank">WindowedApplication</a> container
and the FileSystemTree and FileSystemDataGrid controls. In this
example, the FileSystemTree control displays a directory structure.
Clicking a directory name in the FileSystemTree control causes the
FileSystemDataGrid control to display information about the files
in the selected directory: </p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/FSDirApp.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="750" height="500"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:HDividedBox&gt;
&lt;mx:FileSystemTree id="tree"
width="200" height="100%"
directory="{new File('C:\\')}"
enumerationMode="directoriesOnly"
change="dataGrid.directory = File(tree.selectedItem);"/&gt;
&lt;mx:FileSystemDataGrid id="dataGrid"
width="100%" height="100%"
directory="{new File('C:\\')}"/&gt;
&lt;/mx:HDividedBox&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
</div>
<div class="nested1" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fed_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fed_verapache"><!-- --></a>
<h2 class="topictitle2">About the HTML control</h2>
<div>
<p>
An <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/HTML.html" target="_blank">HTML</a> control displays HTML
web pages in your application. It is designed to be used to render
specific external HTML content within your AIR application. It offers
functionality like a lightweight web browser, including loading
HTML pages, navigation history, and the ability to access the raw
HTML content. </p>
<p>You cannot use the HTML control in a mobile Flex application.
To show HTML in a mobile Flex application, use the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html" target="_blank">StageWebView</a> class
instead.</p>
<p>The HTML control is not designed or intended to be used as a
replacement for the Text or TextArea controls. Those controls are
more appropriate for displaying formatted text or for use as an
item renderer for displaying short runs of text.</p>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fec_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fec_verapache"><!-- --></a>
<h3 class="topictitle3">Creating an HTML control</h3>
<div>
<p>You use the <samp class="codeph">&lt;mx:HTML&gt;</samp> tag to define
an HTML control in MXML. Specify an <samp class="codeph">id</samp> value if
you intend to refer to a component elsewhere in your MXML, either
in another tag or in an ActionScript block.</p>
<p>You specify the location of the HTML page to display by setting
the <samp class="codeph">location</samp> property.</p>
<p>The following example demonstrates the use of an HTML control
in a simple application. The HTML control’s <samp class="codeph">location</samp> property
is set to “http://labs.adobe.com/”, so that URL is opened in the
control when it loads. In addition, when the “back” and “forward”
are clicked they call the control’s <samp class="codeph">historyBack()</samp> and <samp class="codeph">historyForward()</samp> methods.
A TextInput control allows the user to enter a URL location. When
a third “go” button is clicked, the HTML control’s <samp class="codeph">location</samp> property
is set to the <samp class="codeph">text</samp> property of the input text field.</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/HTMLSimple.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ControlBar width="100%"&gt;
&lt;s:Button label="&amp;lt; Back"
click="content.historyBack();"/&gt;
&lt;s:Button label="Forward &amp;gt;"
click="content.historyForward();"/&gt;
&lt;s:TextInput id="address"
text="{content.location}" width="100%"/&gt;
&lt;s:Button label="Go!"
click="content.location = address.text"/&gt;
&lt;/mx:ControlBar&gt;
&lt;s:Group width="100%" height="100%"&gt;
&lt;mx:HTML id="content" location="http://labs.adobe.com/"/&gt;
&lt;/s:Group&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7feb_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7feb_verapache"><!-- --></a>
<h3 class="topictitle3">HTML control user interaction</h3>
<div>
<p>
For
a user interacting with an HTML control, the experience is like
using a web browser with only the content window and no menu bar
or navigation buttons. The HTML page content displays in the control.
The user can interact with the content through form fields and buttons
and by clicking hyperlinks. Some of these interactions, such as
clicking a link or submitting a form, would normally cause a browser
to load a new page. These actions cause the HTML control to display
the content of the new page and also change the value of the control’s <samp class="codeph">location</samp> property.</p>
</div>
</div>
</div>
<div class="nested1" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fea_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fea_verapache"><!-- --></a>
<h2 class="topictitle2">About the FlexNativeMenu control</h2>
<div>
<p>
A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/FlexNativeMenu.html" target="_blank">FlexNativeMenu</a> component
is a Flex wrapper for the NativeMenu class. The FlexNativeMenu allows
you to use MXML and a data provider to define the structure of a
menu. The FlexNativeMenu component does not have any visual representation
that is rendered by Flex. Instead, a FlexNativeMenu instance defines
a native operating system menu such as an application menu (OS X),
a window menu (Windows), a context menu, or any other native menu
that can be created in AIR. </p>
<p>The FlexNativeMenu component is designed to be like the Flex
Menu and MenuBar components. Developers who have worked with those
components should find the FlexNativeMenu familiar.</p>
<p>For more information on the FlexNativeMenu control, see the <em>
<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em>. </p>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe9_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe9_verapache"><!-- --></a>
<h3 class="topictitle3">Creating a FlexNativeMenu control</h3>
<div>
<p>You define a FlexNativeMenu control in MXML by using the <samp class="codeph">&lt;mx:FlexNativeMenu&gt;</samp> tag.
Specify an <samp class="codeph">id</samp> value if you intend to refer to a component
elsewhere in your MXML application, either in another tag or in
an ActionScript block. Because the FlexNativeMenu control have any
visual representation, if you want to use it as the direct child
of a container in MXML, you must insert it in an <samp class="codeph">&lt;fx:Declaration&gt;</samp> block.</p>
<p>You specify the data for the FlexNativeMenu control by using
the <samp class="codeph">dataProvider</samp> property. The FlexNativeMenu control
uses the same types of data providers as does the MenuBar control
and the Menu control. Several of the XML attributes or object property
names have meaning to the FlexNativeMenu control. For more information
on structuring FlexNativeMenu data providers, see <a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe5_verapache">Defining
FlexNativeMenu menu structure and data</a>.</p>
<p>You can assign any name to node tags in the XML data. In subsequent
examples, each node is named with the generic <samp class="codeph">&lt;menuitem&gt;</samp> tag,
but you can use <samp class="codeph">&lt;node&gt;</samp>, <samp class="codeph">&lt;subNode&gt;</samp>, <samp class="codeph">&lt;person&gt;</samp>, <samp class="codeph">&lt;address&gt;</samp>,
and so on.</p>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe8_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe8_verapache"><!-- --></a>
<h4 class="topictitle4">Creating an application or window
menu</h4>
<div>
<p>
When you create an application or window menu
using the FlexNativeMenu control, the top-level objects or nodes
in the data provider correspond to the top-level menu items. In
other words, they define the items that display in the menu bar
itself. Items nested inside one of those top-level items define
the items within the menu. Likewise, those menu items can contain
items, in which case the menu item is a submenu. When the user selects
the menu item it expands its own menu items. For example, the following
image shows a window menu with three menu items (plus an additional
separator menu item). The item with the label “SubMenuItem A-3”
in turn contains three menu items, so SubMenuItem A-3 is treated
as a submenu. (The code to create this menu is provided later.)</p>
<div class="figborder">
<img src="images/ap_FlexNativeMenu_SimpleWindowMenu.png"/>
</div>
<p>For an MXML application using the Flex WindowedApplication container
as the root MXML node, you can assign a FlexNativeMenu to the WindowedApplication instance’s <samp class="codeph">menu</samp> property.
The menu is used as the application menu on OS X and the window
menu of the initial window on Windows. Likewise, to specify a window
menu for an additional window defined using the Flex Window container,
assign a FlexNativeMenu to the Window instance’s <samp class="codeph">menu</samp> property.
In that case the menu displays on Windows only and is ignored on
OS X.</p>
<div class="note"><span class="notetitle">Note:</span> Mac OS X defines a menu containing standard
items for every application. Assigning a FlexNativeMenu object to
the <samp class="codeph">menu</samp> property of the WindowedApplication component
replaces the standard menu rather than adding additional menus to
it.</div>
<p>The following application defines a FlexNativeMenu as the <samp class="codeph">menu</samp> property
of a WindowedApplication container. Consequently, the specified
menu is used as the application menu on Mac OS and the window menu
of the initial window on Windows. This code creates the menu shown
in the previous image:</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/NativeMSimple.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;s:menu&gt;
&lt;mx:FlexNativeMenu dataProvider="{myMenuData}"
labelField="@label"
showRoot="false"/&gt;
&lt;/s:menu&gt;
&lt;fx:Declarations&gt;
&lt;fx:XML format="e4x" id="myMenuData"&gt;
&lt;root&gt;
&lt;menuitem label="MenuItem A"&gt;
&lt;menuitem label="SubMenuItem A-1" type="check" toggled="true"/&gt;
&lt;menuitem type="separator"/&gt;
&lt;menuitem label="SubMenuItem A-2"/&gt;
&lt;menuitem label="SubMenuItem A-3"&gt;
&lt;menuitem label="Sub-SubMenuItem A-3-1"/&gt;
&lt;menuitem label="Sub-SubMenuItem A-3-2" enabled="false"/&gt;
&lt;menuitem label="Sub-SubMenuItem A-3-3"/&gt;
&lt;/menuitem&gt;
&lt;/menuitem&gt;
&lt;menuitem label="MenuItemB"&gt;
&lt;menuitem label="SubMenuItem B-1"/&gt;
&lt;menuitem label="SubMenuItem B-2"/&gt;
&lt;/menuitem&gt;
&lt;/root&gt;
&lt;/fx:XML&gt;
&lt;/fx:Declarations&gt;
&lt;/s:WindowedApplication&gt;</pre>
<p>in this example, the FlexNativeMenu control is used as the value
of the <samp class="codeph">WindowedApplication.menu</samp> property, so it
does not have to be in an <samp class="codeph">&lt;fx:Declaration&gt;</samp> block.
However, if it was the direct child of the WindowedApplication container,
it must be in an <samp class="codeph">&lt;fx:Declaration&gt;</samp> block. For
an example defining the FlexNativeMenu control in an <samp class="codeph">&lt;fx:Declaration&gt;</samp> block,
see <a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd9_verapache">Handling
FlexNativeMenu control events</a>.</p>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe7_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe7_verapache"><!-- --></a>
<h4 class="topictitle4">Creating a context menu</h4>
<div>
<p>
Creating
a context menu in a Flex AIR application involves two steps. You
create the FlexNativeMenu instance that defines the menu structure.
You then assign that menu as the context menu for its associated
control. Because a context menu consists of a single menu, the top-level
menu items serve as the items in the single menu. Any menu item
that contains child menu items defines a submenu within the single
context menu.</p>
<p>The FlexNativeMenu is a replacement for the context menu that
you use with browser-based Flex applications (the flash.ui.ContextMenu
class). You can use one type of menu or the other, but you can’t
specify both types for a single component.</p>
<p>To assign a FlexNativeMenu component as the context menu for
a visual Flex control, call the FlexNativeMenu instance’s <samp class="codeph">setContextMenu()</samp> method, passing
the visual control as the <samp class="codeph">component</samp> parameter (the
only parameter):</p>
<pre class="codeblock">menu.setContextMenu(someComponent);</pre>
<p>The same FlexNativeMenu can be used as the context menu for more
than one object, by calling <samp class="codeph">setContextMenu()</samp> multiple
times using different <samp class="codeph">component</samp> parameter values.
You can also reverse the process (that is, remove an assigned context
menu) using the <samp class="codeph">unsetContextMenu()</samp> method.</p>
<p>The following example demonstrates creating a FlexNativeMenu
component and setting it as the context menu for a Label control:</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/NativeMList.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init();"&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.controls.FlexNativeMenu;
private var myMenu:FlexNativeMenu;
private function init():void
{
myMenu = new FlexNativeMenu();
myMenu.dataProvider = menuData;
myMenu.labelField = "@label";
myMenu.showRoot = false;
myMenu.setContextMenu(lbl);
}
]]&gt;
&lt;/fx:Script&gt;
&lt;fx:Declarations&gt;
&lt;!-- The XML data provider --&gt;
&lt;fx:XML format="e4x" id="menuData"&gt;
&lt;root&gt;
&lt;menuitem label="MenuItem A"/&gt;
&lt;menuitem label="MenuItem B"/&gt;
&lt;menuitem label="MenuItem C"/&gt;
&lt;/root&gt;
&lt;/fx:XML&gt;
&lt;/fx:Declarations&gt;
&lt;mx:Label id="lbl" x="100" y="10"
text="Right-click here to open menu"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
<p>In addition to context menus for visual components within an
application window, an AIR application supports two other special
context menus: dock icon menus (OS X) and system tray icon menus
(Windows). To set either of these menus, you define the menu’s structure
using the FlexNativeMenu component, then you assign the FlexNativeMenu
instance to the WindowedApplication container’s <samp class="codeph">dockIconMenu</samp> or <samp class="codeph">systemTrayIconMenu</samp> property.</p>
<p>Before setting the <samp class="codeph">dockIconMenu</samp> or <samp class="codeph">systemTrayIconMenu</samp> property
you may want to determine whether the user’s operating system supports
a dock icon or a system tray icon, using the NativeApplication class’s
static <samp class="codeph">supportsDockIcon</samp> and <samp class="codeph">supportsSystemTrayIcon</samp> properties.
Doing so isn’t necessary, but can be useful. For instance, you might
want to customize a menu depending on whether it is used as the
context menu for a dock icon or for a system tray icon.</p>
<p>Finally, while a dock icon exists automatically for an application,
you must explicitly specify a system tray icon in order for the
icon to appear. (Naturally, the icon must exist in order for the
user to be able to right-click the icon to activate the context
menu).</p>
<p>The following example defines a FlexNativeMenu that is used as
a context menu. If the user’s operating system supports a system
tray icon, the code creates an icon and displays it in the system
tray. The code then assigns the FlexNativeMenu instance as the context
menu for the system tray and dock icon menus.</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/NativeMContextM.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init();"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import flash.desktop.DockIcon;
import flash.desktop.InteractiveIcon;
import flash.desktop.NativeApplication;
import flash.desktop.SystemTrayIcon;
import flash.display.Shape;
import mx.controls.FlexNativeMenu;
private var myMenu:FlexNativeMenu;
private function init():void {
// Create the menu
myMenu = new FlexNativeMenu();
myMenu.dataProvider = menuData;
myMenu.labelField = "@label";
myMenu.showRoot = false;
var icon:InteractiveIcon;
icon = NativeApplication.nativeApplication.icon;
// If we need a system tray icon, create one and display it
if (NativeApplication.supportsSystemTrayIcon)
{
var iconData:BitmapData = createSystemTrayIcon();
SystemTrayIcon(icon).bitmaps = new Array(iconData);
}
// Use this approach if you want to assign the same menu
// to the dock icon and system tray icon
this.systemTrayIconMenu = this.dockIconMenu = myMenu;
// Use this approach if you want to assign separate menus
// if (NativeApplication.supportsDockIcon)
// {
// this.dockIconMenu = myMenu;
// }
// else if (NativeApplication.supportsSystemTrayIcon)
// {
// this.systemTrayIconMenu = myMenu;
// }
}
private function createSystemTrayIcon():BitmapData {
// Draw the icon in a Graphic
var canvas:Shape = new Shape();
canvas.graphics.beginFill(0xffff00);
canvas.graphics.drawCircle(24, 24, 24);
canvas.graphics.endFill();
canvas.graphics.beginFill(0x000000);
canvas.graphics.drawEllipse(13, 13, 9, 12);
canvas.graphics.drawEllipse(27, 13, 9, 12);
canvas.graphics.endFill();
canvas.graphics.lineStyle(3, 0x000000);
canvas.graphics.moveTo(11, 32);
canvas.graphics.curveTo(24, 46, 37, 32);
var result:BitmapData = new BitmapData(48, 48, true, 0x00000000);
result.draw(canvas);
return result;
}
]]&gt;
&lt;/fx:Script&gt;
&lt;fx:Declarations&gt;
&lt;!-- The XML data provider --&gt;
&lt;fx:XML format="e4x" id="menuData"&gt;
&lt;root&gt;
&lt;menuitem label="MenuItem A"/&gt;
&lt;menuitem label="MenuItem B"/&gt;
&lt;menuitem label="MenuItem C"/&gt;
&lt;/root&gt;
&lt;/fx:XML&gt;
&lt;/fx:Declarations&gt;
&lt;s:Label text="Right-click on the dock icon (Mac OS X) or system tray icon (Windows)"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
<div class="note"><span class="notetitle">Note:</span> Mac OS X defines a standard menu for the application
dock icon. When you assign a FlexNativeMenu as the dock icon’s menu,
the items in that menu are displayed above the standard items. You
cannot remove, access, or modify the standard menu items.</div>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe6_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe6_verapache"><!-- --></a>
<h4 class="topictitle4">Creating a pop-up menu</h4>
<div>
<p>
A pop-up menu
is like a context menu, but the pop-up menu isn’t necessarily associated
with a particular Flex component. To open a pop-up menu, create
a FlexNativeMenu instance and set its <samp class="codeph">dataProvider</samp> property
to populate the menu. To open the menu on the screen, call its <samp class="codeph">display()</samp> method:</p>
<pre class="codeblock">myMenu.display(this.stage, 10, 10);</pre>
<p>The <samp class="codeph">display()</samp> method has three required parameters:
the Stage instance that defines the coordinates within which the
menu is placed, the x coordinate where the menu is placed, and the
y coordinate for the menu. For an example of using the <samp class="codeph">display()</samp> method
to create a pop-up menu, see <a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe0_verapache">Example:
An Array FlexNativeMenu data provider</a>.</p>
<p>One important thing to keep in mind is that the <samp class="codeph">display()</samp> method
operates immediately when it’s called. Several property changes
cause the FlexNativeMenu’s data provider to invalidate (such as
changes to the data provider, changing the <samp class="codeph">labelField</samp>,
and so forth). When the <samp class="codeph">display()</samp> method is called
immediately after making such changes, those changes aren’t reflected
in the menu that appears on the screen. For example, in the following
code listing when the button is clicked no menu appears because
the menu is created and the data provider is specified in the same
block of code in which the <samp class="codeph">display()</samp> method is
called:</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/NativeMDisplay.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.controls.FlexNativeMenu;
private function createAndShow():void
{
var myMenu:FlexNativeMenu = new FlexNativeMenu();
myMenu.dataProvider = menuData;
myMenu.labelField = "@label";
myMenu.showRoot = false;
// calling display() here has no result, because the data provider
// has been set but the underlying NativeMenu hasn't been created yet.
myMenu.display(this.stage, 10, 10);
}
]]&gt;
&lt;/fx:Script&gt;
&lt;fx:Declarations&gt;
&lt;!-- The XML data provider --&gt;
&lt;fx:XML format="e4x" id="menuData"&gt;
&lt;root&gt;
&lt;menuitem label="MenuItem A"/&gt;
&lt;menuitem label="MenuItem B"/&gt;
&lt;menuitem label="MenuItem C"/&gt;
&lt;/root&gt;
&lt;/fx:XML&gt;
&lt;/fx:Declarations&gt;
&lt;!-- Button control to create and open the menu. --&gt;
&lt;s:Button x="300" y="10"
label="Open Menu"
click="createAndShow();"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe5_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe5_verapache"><!-- --></a>
<h3 class="topictitle3">Defining FlexNativeMenu menu structure
and data</h3>
<div>
<p>The techniques for defining structure and data for a FlexNativeMenu
are like the techniques for structuring all Flex menu controls.
Consequently, this section does not provide comprehensive information
on structuring Flex menus, but instead focuses on differences between
FlexNativeMenu structure versus other Flex menu components.</p>
<p>
The <samp class="codeph">dataProvider</samp> property
of a FlexNativeMenu defines the structure of the menu. To change
a menu’s structure at runtime, change the data provider and the
menu updates itself accordingly. Menus typically use a hierarchical
data provider such as nested arrays or XML. However, a simple menu
may consist of a single flat structure of menu items.</p>
<p>
A FlexNativeMenu
instance uses a data descriptor to parse and manipulate the data
provider’s contents. By default, a FlexNativeMenu control uses a
DefaultDataDescriptor instance as its descriptor. However, you can
customize menu data parsing by creating your own data descriptor
class and setting it as the FlexNativeMenu control's <samp class="codeph">dataDescriptor</samp> property.
The DefaultDataDescriptor supports a data provider that is an XML
object or XMLList object, an array of objects, an object with a <samp class="codeph">children</samp> property
containing an array of objects, or a collection that implements
the ICollectionView interface such as an ArrayCollection or XMLListCollection
instance.</p>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe4_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe4_verapache"><!-- --></a>
<h4 class="topictitle4">Specifying and using menu entry
information</h4>
<div>
<p>Information in a FlexNativeMenu control’s data provider
determines how each menu entry appears and is used. To access or
change the menu contents, you modify the contents of the data provider.</p>
<p>
The FlexNativeMenu class uses the methods
of the IMenuDataDescriptor interface to access and manipulate information
in the data provider that defines the menu behavior and contents.
Flex includes the DefaultDataDescriptor class that implements this
interface. A FlexNativeMenu control uses the DefaultDataDescriptor
class if you do not specify another class in the <samp class="codeph">dataDescriptor</samp> property.</p>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe3_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe3_verapache"><!-- --></a>
<h4 class="topictitle4">Menu entry types</h4>
<div>
<p>
Each data provider
entry can specify an item type and type-specific information about
the menu item. Menu-based classes support the following item types (<samp class="codeph">type</samp> field
values):</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e1462">
<p>Menu item type</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e1468">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1462 ">
<p>normal</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1468 ">
<p>The default type. Selecting an item with
the <samp class="codeph">normal</samp> type triggers an <samp class="codeph">itemClick</samp> event.
Alternatively, if the item has children, the menu dispatches a <samp class="codeph">menuShow</samp> event
and opens a submenu.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1462 ">
<p>check</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1468 ">
<p>Selecting an item with the <samp class="codeph">check</samp> type
toggles the menu item’s <samp class="codeph">toggled</samp> property between <samp class="codeph">true</samp> and <samp class="codeph">false</samp> values
and triggers an <samp class="codeph">itemClick</samp> event. When the menu
item is in the <samp class="codeph">true</samp> state, it displays a check
mark in the menu next to the item’s label. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1462 ">
<p>separator</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1468 ">
<p>Items with the <samp class="codeph">separator</samp> type
provide a simple horizontal line that divides the items in a menu
into different visual groups.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>Unlike other Flex menu controls, the FlexNativeMenu component
does not support radio-button menu items (type <samp class="codeph">radio</samp>).</p>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe2_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe2_verapache"><!-- --></a>
<h4 class="topictitle4">Menu attributes</h4>
<div>
<p>Menu items can specify several attributes that determine
how the item is displayed and behaves. The following table lists
the attributes you can specify, their data types, their purposes,
and how the data provider must represent them if the menu uses the
DefaultDataDescriptor class to parse the data provider:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e1595">
<p>Attribute</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e1601">
<p>Type</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e1607">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1595 ">
<p>
<samp class="codeph">altKey</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1601 ">
<p>Boolean</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1607 ">
<p>Specifies whether the Alt key is required
as part of the key equivalent for the item.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1595 ">
<p>
<samp class="codeph">commandKey</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1601 ">
<p>Boolean</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1607 ">
<p>Specifies whether the Command key is required
as part of the key equivalent for the item.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1595 ">
<p>
<samp class="codeph">controlKey</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1601 ">
<p>Boolean</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1607 ">
<p>Specifies whether the Control key is required
as part of the key equivalent for the item.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1595 ">
<p>
<samp class="codeph">enabled</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1601 ">
<p>Boolean</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1607 ">
<p>Specifies whether the user can select the
menu item (<samp class="codeph">true</samp>), or not (<samp class="codeph">false</samp>).
If not specified, Flex treats the item as if the value were <samp class="codeph">true</samp>.</p>
<p>If
you use the default data descriptor, data providers must use an <samp class="codeph">enabled</samp> XML
attribute or object field to specify this characteristic.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1595 ">
<p>
<samp class="codeph">keyEquivalent</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1601 ">
<p>String</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1607 ">
<p>Specifies a keyboard character which, when
pressed, triggers an event as though the menu item was selected.</p>
<p>The
menu’s <samp class="codeph">keyEquivalentField</samp> or <samp class="codeph">keyEquivalentFunction</samp> property
determines the name of the field in the data that specifies the
key equivalent, or a function for determining the key equivalents.
(If the data provider is in E4X XML format, you must specify one
of these properties to assign a key equivalent.)</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1595 ">
<p>
<samp class="codeph">label</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1601 ">
<p>String</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1607 ">
<p>Specifies the text that appears in the control.
This item is used for all menu item types except <samp class="codeph">separator</samp>
<samp class="codeph">.</samp>
</p>
<p>The
menu’s <samp class="codeph">labelField</samp> or <samp class="codeph">labelFunction</samp> property
determines the name of the field in the data that specifies the
label, or a function for determining the labels. (If the data provider
is in E4X XML format, you must specify one of these properties to
display a label.) If the data provider is an array of strings, Flex
uses the string value as the label.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1595 ">
<p>
<samp class="codeph">mnemonicIndex</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1601 ">
<p>Integer</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1607 ">
<p>Specifies the index position of the character
in the label that is used as the mnemonic for the menu item.</p>
<p>The
menu’s <samp class="codeph">mnemonicIndexField</samp> or <samp class="codeph">mnemonicIndexFunction</samp> property
determines the name of the field in the data that specifies the
mnemonic index, or a function for determining mnemonic index. (If
the data provider is in E4X XML format, you must specify one of
these properties to specify a mnemonic index in the data.)</p>
<p>Alternatively,
you can indicate that a character in the label is the menu item’s
mnemonic by including an underscore immediately to the left of that
character.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1595 ">
<p>
<samp class="codeph">shiftKey</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1601 ">
<p>String</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1607 ">
<p>Specifies whether the Shift key is required
as part of the key equivalent for the item.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1595 ">
<p>
<samp class="codeph">toggled</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1601 ">
<p>Boolean</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1607 ">
<p>Specifies whether a <samp class="codeph">check</samp> item
is selected. If not specified, Flex treats the item as if the value
were <samp class="codeph">false</samp> and the item is not selected.</p>
<p>If
you use the default data descriptor, data providers must use a <samp class="codeph">toggled</samp> XML
attribute or object field to specify this characteristic.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1595 ">
<p>
<samp class="codeph">type</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1601 ">
<p>String</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e1607 ">
<p>Specifies the type of menu item. Meaningful
values are <samp class="codeph">separator</samp> and <samp class="codeph">check</samp>.
Flex treats all other values, or nodes with no type entry, as normal
menu entries.</p>
<p>If you use the default data descriptor, data
providers must use a <samp class="codeph">type</samp> XML attribute or object
field to specify this characteristic.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>Unlike other Flex menu controls, the FlexNativeMenu component
does not support the <samp class="codeph">groupName</samp> or <samp class="codeph">icon</samp> attributes.
In addition, it supports the additional attribute <samp class="codeph">keyEquivalent</samp> and
the key equivalent modifier attributes <samp class="codeph">altKey</samp>, <samp class="codeph">commandKey</samp>, <samp class="codeph">controlKey</samp>,
and <samp class="codeph">shiftKey</samp>.</p>
<p>The FlexNativeMenu component ignores all other object fields
or XML attributes, so you can use them for application-specific
data.</p>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe1_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe1_verapache"><!-- --></a>
<h4 class="topictitle4">Considerations for XML-based FlexNativeMenu
data providers</h4>
<div>
<p>
In a simple case for creating
a single menu or menu bar using the FlexNativeMenu control, you
might use an <samp class="codeph">&lt;fx:XML&gt;</samp> or <samp class="codeph">&lt;fx:XMLList&gt;</samp> tag
and standard XML node syntax to define the menu data provider. When
you use an XML-based data provider, keep the following rules in
mind:</p>
<ul>
<li>
<p>With the <samp class="codeph">&lt;fx:XML&gt;</samp> tag you must
have a single root node, and you set the <samp class="codeph">showRoot</samp> property
of the FlexNativeMenu control to <samp class="codeph">false</samp>. (Otherwise, your
FlexNativeMenu would have only the root node as a menu item.) With
the <samp class="codeph">&lt;fx:XMLList&gt;</samp> tag you define a list of
XML nodes, and the top-level nodes define the top-level menu items.</p>
</li>
<li>
<p>If your data provider has <samp class="codeph">label</samp>, <samp class="codeph">keyEquivalent</samp>,
or <samp class="codeph">mnemonicIndex</samp> attributes, the default attribute
names are not recognized by the DefaultDataDescriptor class. Set
the FlexNativeMenu control's <samp class="codeph">labelField</samp> , <samp class="codeph">keyEquivalentField</samp>,
or <samp class="codeph">mnemonicIndexField</samp> property and use the E4X
@ notation to specify the attribute name, such as:</p>
<pre class="codeblock">labelField="@label"
keyEquivalentField="@keyEquivalent"
mnemonicIndexField="@mnemonicIndex"</pre>
</li>
</ul>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe0_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe0_verapache"><!-- --></a>
<h4 class="topictitle4">Example: An Array FlexNativeMenu
data provider</h4>
<div>
<p>The following example uses a FlexNativeMenu component to
display a popup menu. It demonstrates how to define the menu structure
using an Array of plain objects as a data provider. For an application
that specifies an identical menu structure in XML, see <a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdf_verapache">Example:
An XML FlexNativeMenu data provider</a>.</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/NativeMArray.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init();"&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.controls.FlexNativeMenu;
private var myMenu:FlexNativeMenu;
private function init():void {
myMenu = new FlexNativeMenu();
myMenu.dataProvider = menuData;
myMenu.showRoot = false;
}
// Method to show the menu.
private function show():void {
myMenu.display(this.stage, 10, 10);
}
// The Array data provider
[Bindable]
public var menuData:Array = [
{label: "MenuItem A"},
{label: "MenuItem B", type: "check", toggled: true},
{label: "MenuItem C", enabled: false},
{type: "separator"},
{label: "MenuItem D", children: [
{label: "SubMenuItem D-1"},
{label: "SubMenuItem D-2"},
{label: "SubMenuItem D-3"}
]}
];
]]&gt;
&lt;/fx:Script&gt;
&lt;!-- Button control to create and open the menu. --&gt;
&lt;s:Button x="300" y="10"
label="Open Menu"
click="show();"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdf_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdf_verapache"><!-- --></a>
<h4 class="topictitle4">Example: An XML FlexNativeMenu
data provider</h4>
<div>
<p>The following example displays a popup menu using a FlexNativeMenu component.
It shows how to define the menu structure using XML as a data provider.
For an application that specifies an identical menu structure using
an Array of objects as a data provider, see <a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fe0_verapache">Example:
An Array FlexNativeMenu data provider</a>.</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/NativeMxml.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init();"&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.controls.FlexNativeMenu;
private var myMenu:FlexNativeMenu;
private function init():void
{
myMenu = new FlexNativeMenu();
myMenu.dataProvider = menuData;
myMenu.labelField = "@label";
myMenu.showRoot = false;
}
// Method to show the menu.
private function show():void
{
myMenu.display(this.stage, 10, 10);
}
]]&gt;
&lt;/fx:Script&gt;
&lt;fx:Declarations&gt;
&lt;!-- The XML data provider --&gt;
&lt;fx:XML format="e4x" id="menuData"&gt;
&lt;root&gt;
&lt;menuitem label="MenuItem A"/&gt;
&lt;menuitem label="MenuItem B" type="check" toggled="true"/&gt;
&lt;menuitem label="MenuItem C" enabled="false"/&gt;
&lt;menuitem type="separator"/&gt;
&lt;menuitem label="MenuItem D"&gt;
&lt;menuitem label="SubMenuItem D-1"/&gt;
&lt;menuitem label="SubMenuItem D-2"/&gt;
&lt;menuitem label="SubMenuItem D-3"/&gt;
&lt;/menuitem&gt;
&lt;/root&gt;
&lt;/fx:XML&gt;
&lt;/fx:Declarations&gt;
&lt;!-- Button control to create and open the menu. --&gt;
&lt;s:Button x="300" y="10"
label="Open Menu"
click="show();"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fde_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fde_verapache"><!-- --></a>
<h3 class="topictitle3">Specifying menu item keyboard equivalents</h3>
<div>
<p>
You can specify a key equivalent (sometimes
called an accelerator) for a menu command. When the key or key combination
is pressed the FlexNativeMenu dispatches an <samp class="codeph">itemClick</samp> event,
as though the user had selected the menu item. The key equivalent
string is automatically displayed beside the menu item name in the
menu. The format depends on the user’s operating system and system
preferences. In order for the command to be invoked, the menu containing
the command must be part of the application menu (OS X) or the window
menu of the active window (Windows).</p>
<div class="note"><span class="notetitle">Note:</span> Key equivalents are only triggered for application
and window menus. If you add a key equivalent to a context or pop-up
menu, the key equivalent is displayed in the menu label but the
associated menu command is never invoked.</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdd_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdd_verapache"><!-- --></a>
<h4 class="topictitle4">About key equivalents</h4>
<div>
<p>A key equivalent consists of two parts:</p>
<dl>
<dt class="dlterm">Primary key</dt>
<dd>
<p>
A string containing the character
that serves as the key equivalent. If a data provider object has
a <samp class="codeph">keyEquivalent</samp> field, the DefaultDataDescriptor
automatically uses that value as the key equivalent. You can specify
an alternative data provider field by setting the FlexNativeMenu
component’s <samp class="codeph">keyEquivalentField</samp> property. You can
specify a function to use to determine the key equivalent by setting
the FlexNativeMenu component’s <samp class="codeph">keyEquivalentFunction</samp> property.</p>
</dd>
<dt class="dlterm">Modifier keys</dt>
<dd>
<p>
One or more modifier keys that
are also part of the key equivalent combination, such as the control
key, shift key, command key, and so forth. If a data provider item
includes an <samp class="codeph">altKey</samp>, <samp class="codeph">commandKey</samp>, <samp class="codeph">controlKey</samp>,
or <samp class="codeph">shiftKey</samp> object field or XML attribute set to <samp class="codeph">true</samp>,
the specified key or keys become part of the key equivalent combination,
and the entire key combination must be pressed to trigger the command.
Alternatively, you can specify a function for the FlexNativeMenu
component’s <samp class="codeph">keyEquivalentModifiersFunction</samp>, and
that function is called to determine the key equivalent modifiers
for each data provider item.</p>
<p>If you specify more than one
key equivalent modifier, all the specified modifiers must be pressed
in order to trigger the command. For instance, for the menu item
generated from the following XML the key equivalent combination
is Control-Shift-A (rather than Control-A OR Shift-A):</p>
<pre class="codeblock">&lt;menuitem label="Select All" keyEquivalent="a" controlKey="true" shiftKey="true"/&gt;</pre>
<p>Note
that this can result in impossible key combinations if the menu
item specifies multiple modifiers that are only available on one
operating system. For example, the following item results in a menu
item with the key equivalent Command-Shift-G:</p>
<pre class="codeblock">&lt;menuitem label="Ungroup" keyEquivalent="g" commandKey="true" shiftKey="true"/&gt;</pre>
<p>On
Mac OS X, this command works as expected. On Windows, the key equivalent Shift-G
is displayed in the menu. However, pressing Shift-G does not trigger
the command because the Command key is still considered a required
part of the command, even though that key doesn’t exist in Windows.</p>
<p>To
use different key combinations for the same menu item on different
platforms, you can specify a <samp class="codeph">keyEquivalentModifiersFunction</samp> function
for the FlexNativeMenu instance. This function can provide alternative
logic for processing the menu item data. For an example using the <samp class="codeph">keyEquivalentModifiersFunction</samp>,
see <a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdb_verapache">Example:
Using custom logic for multi-platform key equivalent menu commands</a>.</p>
</dd>
</dl>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdc_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdc_verapache"><!-- --></a>
<h4 class="topictitle4">Example: FlexNativeMenu key equivalent
commands</h4>
<div>
<p>The following example uses a FlexNativeMenu to define a
menu that includes keyboard equivalents for the menu commands. Note
that while this example only uses keys and modifier keys that are
available on Windows and Mac OS X, it uses the Control key as a
modifier on both platforms. However, the Command key would be more
in line with the common convention on Mac OS X. For an example that
uses the <samp class="codeph">keyEquivalentModifiersFunction</samp> property
to create menus that use the common cross-platform conventions,
see <a href="flx_apollo_components_ap.html#WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdb_verapache">Example:
Using custom logic for multi-platform key equivalent menu commands</a>.</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/NativeMKeyEquiv.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;s:menu&gt;
&lt;mx:FlexNativeMenu dataProvider="{menuData}"
labelField="@label"
keyEquivalentField="@keyEquivalent"
showRoot="false"
itemClick="trace('click:', event.label);"/&gt;
&lt;/s:menu&gt;
&lt;fx:Declarations&gt;
&lt;fx:XML format="e4x" id="menuData"&gt;
&lt;root&gt;
&lt;menuitem label="File"&gt;
&lt;menuitem label="New" keyEquivalent="n" controlKey="true"/&gt;
&lt;menuitem label="Open" keyEquivalent="o" controlKey="true"/&gt;
&lt;menuitem label="Save" keyEquivalent="s" controlKey="true"/&gt;
&lt;menuitem label="Save As..." keyEquivalent="s" controlKey="true" shiftKey="true"/&gt;
&lt;menuitem label="Close" keyEquivalent="w" controlKey="true"/&gt;
&lt;/menuitem&gt;
&lt;menuitem label="Edit"&gt;
&lt;menuitem label="Cut" keyEquivalent="x" controlKey="true"/&gt;
&lt;menuitem label="Copy" keyEquivalent="c" controlKey="true"/&gt;
&lt;menuitem label="Paste" keyEquivalent="v" controlKey="true"/&gt;
&lt;/menuitem&gt;
&lt;/root&gt;
&lt;/fx:XML&gt;
&lt;/fx:Declarations&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdb_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fdb_verapache"><!-- --></a>
<h4 class="topictitle4">Example: Using custom logic for
multi-platform key equivalent menu commands</h4>
<div>
<p>The following example creates the same menu structure as
the previous example. However, instead of using the same keyboard
combination (for example, Control-O) regardless of the user’s operating
system, in this example a <samp class="codeph">keyEquivalentModifiersFunction</samp> function
is defined for the FlexNativeMenu. The function is used to create
keyboard equivalents that follow platform conventions by using the
Control key on Windows but substituting the Command key on Mac OS
X.</p>
<p>In the data provider data, the <samp class="codeph">controlKey="true"</samp> attribute
is still used. The function that determines the key equivalent modifiers
uses the value of the <samp class="codeph">controlKey</samp> field or XML attribute
to specify the Control key on Windows and the Command key on OS
X, and if the <samp class="codeph">controlKey</samp> attribute is <samp class="codeph">false</samp> (or
not specified) then neither modifier is applied.</p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/NativeMKeyEquivMultiP.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
initialize="init();"&gt;
&lt;s:menu&gt;
&lt;mx:FlexNativeMenu dataProvider="{menuData}"
labelField="@label"
keyEquivalentField="@keyEquivalent"
keyEquivalentModifiersFunction="keyEquivalentModifiers"
showRoot="false"
itemClick="trace('click:', event.label);"/&gt;
&lt;/s:menu&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import flash.system.Capabilities;
import flash.ui.Keyboard;
private var isWin:Boolean;
private var isMac:Boolean;
private function init():void {
isWin = (Capabilities.os.indexOf("Windows") &gt;= 0);
isMac = (Capabilities.os.indexOf("Mac OS") &gt;= 0);
}
private function keyEquivalentModifiers(item:Object):Array {
var result:Array = new Array();
var keyEquivField:String = menu.keyEquivalentField;
var altKeyField:String;
var controlKeyField:String;
var shiftKeyField:String;
if (item is XML)
{
altKeyField = "@altKey";
controlKeyField = "@controlKey";
shiftKeyField = "@shiftKey";
}
else if (item is Object)
{
altKeyField = "altKey";
controlKeyField = "controlKey";
shiftKeyField = "shiftKey";
}
if (item[keyEquivField] == null || item[keyEquivField].length == 0)
{
return result;
}
if (item[altKeyField] != null &amp;&amp; item[altKeyField] == true)
{
if (isWin)
{
result.push(Keyboard.ALTERNATE);
}
}
if (item[controlKeyField] != null &amp;&amp; item[controlKeyField] == true)
{
if (isWin)
{
result.push(Keyboard.CONTROL);
}
else if (isMac)
{
result.push(Keyboard.COMMAND);
}
}
if (item[shiftKeyField] != null &amp;&amp; item[shiftKeyField] == true)
{
result.push(Keyboard.SHIFT);
}
return result;
}
]]&gt;
&lt;/fx:Script&gt;
&lt;fx:Declarations&gt;
&lt;fx:XML format="e4x" id="menuData"&gt;
&lt;root&gt;
&lt;menuitem label="File"&gt;
&lt;menuitem label="New" keyEquivalent="n" controlKey="true"/&gt;
&lt;menuitem label="Open" keyEquivalent="o" controlKey="true"/&gt;
&lt;menuitem label="Save" keyEquivalent="s" controlKey="true"/&gt;
&lt;menuitem label="Save As..."
keyEquivalent="s"
controlKey="true"
shiftKey="true"/&gt;
&lt;menuitem label="Close" keyEquivalent="w" controlKey="true"/&gt;
&lt;/menuitem&gt;
&lt;menuitem label="Edit"&gt;
&lt;menuitem label="Cut" keyEquivalent="x" controlKey="true"/&gt;
&lt;menuitem label="Copy" keyEquivalent="c" controlKey="true"/&gt;
&lt;menuitem label="Paste" keyEquivalent="v" controlKey="true"/&gt;
&lt;/menuitem&gt;
&lt;/root&gt;
&lt;/fx:XML&gt;
&lt;/fx:Declarations&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fda_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fda_verapache"><!-- --></a>
<h3 class="topictitle3">Specifying menu item mnemonics</h3>
<div>
<p>
A menu item mnemonic is a
key associated with a menu item which, when pressed while the menu
is displayed, is equivalent to selecting that menu item with the
mouse. Typically, the operating system indicates a menu item’s mnemonic
by underlining that character in the name of the menu item. Mnemonics
for menu items are supported in Windows. In Mac OS X, when a menu
is activated a user types the first letter or letters of a menu
item’s label, then presses return to select the item. </p>
<p>
The
simplest way to specify a mnemonic for a menu item in a FlexNativeMenu component
is to include an underscore character (“_”) in the menu item’s label field,
immediately to the left of the letter that serves as the mnemonic
for that menu item. For instance, if the following XML node is used
in a data provider for a FlexNativeMenu, the mnemonic for the command
is the first character of the second word (the letter “A”):</p>
<pre class="codeblock">&lt;menuitem label="Save _As"/&gt;</pre>
<p>When the native menu is created, the underscore character is
not included in the label. Instead, the character following the
underscore becomes the mnemonic for the menu item. To include a
literal underscore character in a menu item’s name, use two underscore
characters (“__”). This sequence is converted to one underscore
in the menu item label.</p>
<p>As an alternative to using underscore characters in label names,
you can provide an integer index position for the mnemonic character
in a <samp class="codeph">mnemonicIndex</samp> field in the data provider objects.
You can also use another Object property or XML attribute by setting
the FlexNativeMenu component’s <samp class="codeph">mnemonicIndexField</samp> property.
To use complex logic for assigning mnemonics, you can specify a
function for the FlexNativeMenu component’s <samp class="codeph">mnemonicIndexFunction</samp> property.
Each of these properties provides a mechanism to define an integer
(zero-based) index position for the menu items’ mnemonics.</p>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd9_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd9_verapache"><!-- --></a>
<h3 class="topictitle3">Handling FlexNativeMenu control
events</h3>
<div>
<p>User interaction with a FlexNativeMenu is event-driven.
When the user selects a menu item or opens a menu or submenu, the
menu dispatches an event. You can register event listeners to define
the actions that are carried out in response to the user’s selection.
Event handling with the FlexNativeMenu component shares similarities
with other Flex menu components, but also has key differences. For information
about Flex menu component events, see <a href="http://livedocs.adobe.com/flex/3/html/menucontrols_4.html" target="_blank">Menu-based control events</a>.</p>
<p>
The FlexNativeMenu component defines two
specific events, both of which dispatch event objects that are instances
of the FlexNativeMenuEvent class:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e2401">
<p>Event</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e2407">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2401 ">
<div class="p">
<pre class="codeblock">itemClick</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2407 ">
<p>(FlexNativeMenuEvent.ITEM_CLICK) Dispatched
when a user selects an enabled menu item of type normal or check.
This event is not dispatched when a user selects a menu item that
opens a submenu or a disabled menu item.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2401 ">
<p>
<samp class="codeph">menuShow</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2407 ">
<p>(FlexNativeMenuEvent.MENU_SHOW) Dispatched
when the entire menu or a submenu opens (including a top-level menu
of an application or window menu).</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>
The
event object passed to the event listener is of type FlexNativeMenuEvent
and contains the following menu-specific properties:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e2490">
<p>Property</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e2496">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2490 ">
<p>
<samp class="codeph">index</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2496 ">
<p>The index of the item in the menu or submenu
that contains it. Only available for the <samp class="codeph">itemClick</samp> event.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2490 ">
<p>
<samp class="codeph">item</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2496 ">
<p>The item in the data provider for the menu
item associated with the event. Only available for the <samp class="codeph">itemClick</samp> event.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2490 ">
<p>
<samp class="codeph">label</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2496 ">
<p>The label of the item. Only available for
the <samp class="codeph">itemClick</samp> event.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2490 ">
<p>
<samp class="codeph">nativeMenu</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2496 ">
<p>A reference to the underlying NativeMenu
object where the event occurred.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2490 ">
<p>
<samp class="codeph">nativeMenuItem</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e2496 ">
<p>A reference to the underlying NativeMenuItem
object that triggered the event. Only available for the <samp class="codeph">itemClick</samp> event.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>To access properties of an object-based menu item, you specify
the <samp class="codeph">item</samp> property of the event object, as follows:</p>
<pre class="codeblock">  ta1.text = event.item.extraData;</pre>
<p>To access attributes of an E4X XML-based menu item, you specify
the menu item attribute name in E4X syntax, as follows:</p>
<pre class="codeblock">ta1.text = event.item.@extraData;</pre>
<div class="note"><span class="notetitle">Note:</span> If you set an event listener on a submenu of
a FlexNativeMenu component, and the menu data provider’s structure
changes (for example, if an element is removed), the event listener
might no longer exist. To ensure that the event listener is available when
the data provider structure changes, use the events of the FlexNativeMenu control,
not a submenu.</div>
<p>The standard approach to handling FlexNativeMenu events is to
register an event listener with the FlexNativeMenu component. Any
time an individual menu item is selected or submenu is opened, the
FlexNativeMenu dispatches the appropriate event. Your listener code
can use the event object’s <samp class="codeph">item</samp> property or other
properties to determine on which menu item the interaction occurred, and
perform actions in response.</p>
<div class="p">The following example lets you experiment with FlexNativeMenu
control events. It lets you display two menus, one with an XML data
provider and one with an Array data provider. A TextArea control
displays information about each event as a user opens the menus,
opens submenus, and selects menu items. The example shows some of
the differences in how you handle XML and object-based menus. It
also indicates some of the types of information that are available
about each FlexNativeMenu event.<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/NativeMEvents.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.events.FlexNativeMenuEvent;
import mx.controls.FlexNativeMenu;
import mx.events.FlexNativeMenuEvent;
// The event listener that opens the menu with an XML data
// provider and adds event listeners for the menu.
private function createAndShow():void {
ta1.text="";
xmlBasedMenu.addEventListener(FlexNativeMenuEvent.ITEM_CLICK, menuShowInfo);
xmlBasedMenu.addEventListener(FlexNativeMenuEvent.MENU_SHOW, menuShowInfo);
xmlBasedMenu.display(stage, 225, 10);
}
// The event listener for the xml-based menu events.
// Retain information on all events for a menu instance.
private function menuShowInfo(event:FlexNativeMenuEvent):void {
ta1.text = "event.type: " + event.type;
// The label field is null for menuShow events.
ta1.text += "\nevent.label: " + event.label;
// The index value is -1 for menuShow events.
ta1.text+="\nevent.index: " + event.index;
// The item field is null for menuShow events.
if (event.item != null)
{
ta1.text += "\nItem label: " + event.item.@label
ta1.text += "\nItem toggled: " + event.item.@toggled;
ta1.text += "\nItem type: " + event.item.@type;
}
}
// The event listener that creates an object-based menu
// and adds event listeners for the menu.
private function createAndShow2():void {
ta1.text="";
objectBasedMenu.addEventListener(FlexNativeMenuEvent.ITEM_CLICK, menuShowInfo2);
objectBasedMenu.addEventListener(FlexNativeMenuEvent.MENU_SHOW, menuShowInfo2);
objectBasedMenu.display(stage, 225, 10);
}
// The event listener for the object-based Menu events.
private function menuShowInfo2(event:FlexNativeMenuEvent):void {
ta1.text = "event.type: " + event.type;
// The label field is null for menuShow events.
ta1.text += "\nevent.label: " + event.label;
// The index value is -1 for menuShow events.
ta1.text += "\nevent.index: " + event.index;
// The item field is null for menuShow events.
if (event.item)
{
ta1.text += "\nItem label: " + event.item.label
ta1.text += "\nItem toggled: " + event.item.toggled;
ta1.text += "\ntype: " + event.item.type;
}
}
// The object-based data provider, an Array of objects.
// Its contents are identical to that of the XML data provider.
[Bindable]
public var objMenuData:Array = [
{label: "MenuItem A", children: [
{label: "SubMenuItem A-1", enabled: false},
{label: "SubMenuItem A-2"}
]},
{label: "MenuItem B", type: "check", toggled: true},
{label: "MenuItem C", type: "check", toggled: false},
{type: "separator"},
{label: "MenuItem D", children: [
{label: "SubMenuItem D-1"},
{label: "SubMenuItem D-2"},
{label: "SubMenuItem D-3"}
]}
];
]]&gt;
&lt;/fx:Script&gt;
&lt;fx:Declarations&gt;
&lt;!-- The XML-based menu data provider.
The &lt;fx:XML tag requires a single root. --&gt;
&lt;fx:XML id="xmlMenuData" format="e4x"&gt;
&lt;xmlRoot&gt;
&lt;menuitem label="MenuItem A" &gt;
&lt;menuitem label="SubMenuItem A-1" enabled="false"/&gt;
&lt;menuitem label="SubMenuItem A-2"/&gt;
&lt;/menuitem&gt;
&lt;menuitem label="MenuItem B" type="check" toggled="true"/&gt;
&lt;menuitem label="MenuItem C" type="check" toggled="false"/&gt;
&lt;menuitem type="separator"/&gt;
&lt;menuitem label="MenuItem D"&gt;
&lt;menuitem label="SubMenuItem D-1"/&gt;
&lt;menuitem label="SubMenuItem D-2"/&gt;
&lt;menuitem label="SubMenuItem D-3"/&gt;
&lt;/menuitem&gt;
&lt;/xmlRoot&gt;
&lt;/fx:XML&gt;
&lt;!-- Define the FlexNativeMenu components in
the &lt;fx:Declarations&gt; block. --&gt;
&lt;mx:FlexNativeMenu id="xmlBasedMenu"
showRoot="false"
labelField="@label"
dataProvider="{xmlMenuData}"/&gt;
&lt;mx:FlexNativeMenu id="objectBasedMenu"
dataProvider="{objMenuData}"/&gt;
&lt;/fx:Declarations&gt;
&lt;!-- Button controls to open the menus. --&gt;
&lt;s:Button x="10" y="5"
label="Open XML Popup"
click="createAndShow();"/&gt;
&lt;s:Button x="10" y="35"
label="Open Object Popup"
click="createAndShow2();"/&gt;
&lt;!-- Text area to display the event information --&gt;
&lt;s:TextArea x="10" y="70"
width="200" height="250"
id="ta1"/&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
</div>
</div>
<div class="nested1" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd8_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd8_verapache"><!-- --></a>
<h2 class="topictitle2">About the AIR window containers</h2>
<div>
<p>
Flex containers define the content, sizing,
and positioning for a specific part of an application. For AIR applications,
Flex includes two specific window components that serve as containers
whose content area is an operating system window. Both the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/WindowedApplication.html" target="_blank">WindowedApplication</a> and
the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Window.html" target="_blank">Window</a> containers can be used
to define the contents of an operating system window. They also
provide the means to define and control characteristics of the window
itself, such as the window’s size, its position on the user’s screen,
and the presence of window chrome.</p>
</div>
<div class="nested2" id="WS4b4ddee4904fe7795516a1d61213046efed-8000_verapache"><a name="WS4b4ddee4904fe7795516a1d61213046efed-8000_verapache"><!-- --></a>
<h3 class="topictitle3">Spark and MX window containers</h3>
<div>
<p>Flex supplies a Spark and a MX version of the WindowedApplication
and the Window containers. The Spark components are located in the
spark.components package. The MX components are located in the mx.core
package. </p>
<p>The biggest difference between the two component sets is that
you use skins to set many of the visual characteristics of the Spark
components, and styles to set them for the MX components. </p>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd6_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd6_verapache"><!-- --></a>
<h3 class="topictitle3">WindowedApplication container</h3>
<div>
<p>The WindowedApplication container defines an application
container that you use to create Flex applications for AIR that
use the native operating system chrome. The WindowedApplication
container adds window-related functionality and desktop application-specific
functionality to the Flex Application container, which you can use
when you build AIR applications.</p>
<p>The WindowedApplication container serves two roles. First, it
provides the entry point into the main application, which in turn
executes other application logic. In that sense it serves as the
core of the entire application, just as the Application container
does for a browser-based Flex application. Second, the WindowedApplication
container represents the first native window of the application.</p>
<p>If the application only uses one native window, the WindowedApplication
is the base stage that contains all other content. If your application
opens additional native windows, each window has its own stage and
display list.</p>
<p>The native window defined by the WindowedApplication is no different
from any other application window in this respect. This is different
from a browser-based Flex application, where all of an application’s
windows are drawn by Flex within the same stage (the Application
container).</p>
<p>For example, in a Flex AIR application, registering a <samp class="codeph">keyDown</samp> event
listener on the WindowedApplication container only dispatches events
when a key is pressed while the initial window has focus. If the
application has multiple native windows and another of the windows
has focus when the key is pressed, the event is not dispatched.
This behavior differs from a non-AIR Flex application, in which
a <samp class="codeph">keyDown</samp> listener registered with the Application
container receives notification of all key presses while the application
has focus.</p>
<p>For more information on the WindowedApplication container, see
the <em>
<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em>.</p>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd5_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd5_verapache"><!-- --></a>
<h4 class="topictitle4">Creating and using a WindowedApplication
container</h4>
<div>
<p>The WindowedApplication container defines an AIR application
object that includes its own window controls. In an MXML AIR application,
a Spark <samp class="codeph">&lt;s:WindowedApplication&gt;</samp> or MX <samp class="codeph">&lt;mx:WindowedApplication&gt;</samp> tag replaces
the Application tag in a Flex application. </p>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd4_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd4_verapache"><!-- --></a>
<h4 class="topictitle4">WindowedApplication container example</h4>
<div>
<p>The following application shows a simple use of the WindowedApplication container: </p>
<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/WindowSimple.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;s:Label text="Hello World" /&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd3_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd3_verapache"><!-- --></a>
<h3 class="topictitle3">Window container</h3>
<div>
<p>The Window container is a Flex container that is used to
define the content and layout of operating system windows that are
opened after an application launches. In other words, it is used
for windows other than the initial or main window of the application,
which is a WindowedApplication container. </p>
<p>In addition to the functionality that the Window container shares
with the WindowedApplication container, a Window container allows
you to define the main characteristics of the window. The characteristics
you can specify include the type of window, the type of chrome,
whether certain actions (such as resizing and maximizing) are permitted
for the window, and more. </p>
<p>These characteristics are accessed as properties that can be
set when the container is initially created, before the actual operating
system window is displayed. However, once the actual window is opened,
the properties can no longer be set and can only be read.</p>
<p>For more information about the Window container, see the <em>
<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe
Flash Platform</a>
</em>.</p>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd2_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd2_verapache"><!-- --></a>
<h4 class="topictitle4">Creating and using a Window container</h4>
<div>
<p>The Window container defines an AIR application object
that includes its own window controls. In an MXML AIR application,
you use a <samp class="codeph">&lt;s:Window&gt;</samp> tag as the top-level
tag of an MXML component, with the window’s content defined in the body
of the MXML component document. However, unlike other MXML components,
a Window-based component cannot be used in another MXML document. Instead,
you create an instance of the MXML component in ActionScript.</p>
<p>Because several of the properties of the Window container can
only be set before the window is opened, they can be set as properties
in the <samp class="codeph">&lt;s:Window&gt;</samp> MXML tag. They can also
be set using ActionScript, either in an <samp class="codeph">&lt;fx:Script&gt;</samp> block
in the window’s MXML document or in code that creates an instance
of the window.</p>
<p>Once the window’s initial properties are set, you call the Window
container’s <samp class="codeph">open()</samp> method to cause the operating
system window to appear on the user’s display.</p>
</div>
</div>
<div class="nested3" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd1_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd1_verapache"><!-- --></a>
<h4 class="topictitle4">Window container example</h4>
<div>
<p>The following example shows a basic use of the Window container.
The example includes two MXML files. The first uses a WindowedApplication
container and is the initial window of the application. The second
uses the Window container to define a secondary window for the application.
In this example, the main window simulates a “splash screen” for
the application. After a set time (4 seconds) it closes the splash
screen and opens the second window. In order to make a splash screen
window with no window chrome, in the application.xml file the <samp class="codeph">systemChrome</samp> tag
is set to <samp class="codeph">none</samp>.</p>
<div class="p">The following code defines the main application MXML file, which
contains the initial window (the splash screen) that opens automatically
when the application is run:<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/WindowSplash.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init();"&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import myComponents.DocumentWindow;
private const LOAD_DELAY:int = 4;
private var timeElapsed:int = 0;
private var loadTimer:Timer;
private var docWindow:myComponents.DocumentWindow;
private function init():void {
// center the window on the screen
var screenBounds:Rectangle = Screen.mainScreen.bounds;
nativeWindow.x = (screenBounds.width - nativeWindow.width) / 2;
nativeWindow.y = (screenBounds.height - nativeWindow.height) / 2;
// start the timer, which simulates a loading delay
loadTimer = new Timer(1000);
loadTimer.addEventListener(TimerEvent.TIMER, incrementTime);
loadTimer.start();
updateStatus();
}
private function incrementTime(event:TimerEvent):void {
timeElapsed++;
updateStatus();
// if the loading delay has passed, stop the timer,
// close the splash screen, and open the document window
if ((LOAD_DELAY - timeElapsed) == 0)
{
loadTimer.stop();
loadTimer.removeEventListener(TimerEvent.TIMER, incrementTime);
loadTimer = null;
nativeWindow.close();
// open a new instance of the document window
docWindow = new DocumentWindow();
docWindow.open();
}
}
private function updateStatus():void {
var timeRemaining:uint = LOAD_DELAY - timeElapsed;
var timeRemainingMsg:String = timeRemaining.toString() + " second";
if (timeRemaining != 1) { timeRemainingMsg += "s"; }
timeRemainingMsg += " remaining.";
loadStatusMessage.text = "initializing... " + timeRemainingMsg;
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:VGroup horizontalCenter="0" verticalCenter="0"&gt;
&lt;s:Label text="My Splash Screen"
fontFamily="Courier New"
fontSize="36"/&gt;
&lt;s:Label id="loadStatusMessage"
text="initializing..."/&gt;
&lt;/s:VGroup&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
<p>The <samp class="codeph">incrementTime()</samp> method is called each second
and when the appropriate time is reached, a DocumentWindow instance
is created and its <samp class="codeph">open()</samp> method is called. The
DocumentWindow class is defined in a separate MXML document. Its
base MXML tag is the <samp class="codeph">&lt;s:Window&gt;</samp> tag, so it
is a subclass of the Window class (the Window container). Here is
the source code for the DocumentWindow MXML file:</p>
<pre class="codeblock">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/myComponents/DocumentWindow.mxml --&gt;
&lt;s:Window xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="550" height="450"&gt;
&lt;s:Label text="This is a document window."
horizontalCenter="0" verticalCenter="0"/&gt;
&lt;/s:Window&gt;</pre>
</div>
</div>
</div>
<div class="nested2" id="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd7_verapache"><a name="WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd7_verapache"><!-- --></a>
<h3 class="topictitle3">Controlling window chrome</h3>
<div>
<p>The window that a WindowedApplication or Window container
defines conforms to the standard behavior of the operating system.
The user can move the window by dragging the title bar and resize
the window by dragging on any side or corner of the window. The
containers also include a set of properties that allow you to control
window sizing, including <samp class="codeph">minimumHeight</samp>, <samp class="codeph">minimumWidth</samp>, <samp class="codeph">maximumHeight</samp>,
and <samp class="codeph">maximumWidth</samp>.</p>
<p>The WindowedApplication container and the Window container allow
you to control the presence and the appearance of the window <em>chrome</em>. </p>
<p>For the MX WindowedApplication or Window containers only, you
can hide the chrome by setting the <samp class="codeph">showFlexChrome</samp> style
to <samp class="codeph">false</samp>. </p>
</div>
<div class="nested3" id="WS4b4ddee4904fe77918bded731213043f413-8000_verapache"><a name="WS4b4ddee4904fe77918bded731213043f413-8000_verapache"><!-- --></a>
<h4 class="topictitle4">Setting the chrome</h4>
<div>
<div class="p">Flex provides several options for setting the chrome:<ul>
<li>
<p>Use the chrome defined by your operating system. The system
chrome consists of a border and title bar. The title bar contains
the close, minimize, maximize, and restore buttons. For an Apple
computer, the restore button is omitted.</p>
</li>
<li>
<p>Use the Flex chrome. The Flex chrome is defined by a set
of skin files. The Flex chrome contains all of the elements of the
system chrome, and adds a gripper to the lower-right corner of the
container that you can use to resize the window. The Flex chrome
also adds a status bar to the bottom of the window. </p>
</li>
<li>
<p>Use the WindowedApplicationSkin class. The WindowedApplicationSkin
skin class contains only a border and a status bar. </p>
</li>
<li>
<p>Create your own skin files to define the chrome. </p>
</li>
</ul>
</div>
<p>The title bar area of the chrome includes a title message and
an icon that can be set and modified by using the <samp class="codeph">title</samp> and <samp class="codeph">titleIcon</samp> properties
of the WindowedApplication or Window container. You can show or
hide the status bar by using the <samp class="codeph">showStatusBar</samp> property.</p>
<p>How the chrome is represented depends on the setting of the <samp class="codeph">systemChrome</samp> attribute,
which is defined in the application .xml file for a WindowedApplication container,
or in the Window container’s <samp class="codeph">systemChrome</samp> property.
If <samp class="codeph">systemChrome</samp> is set to “standard” in the application
.xml file (or <samp class="codeph">flash.display.NativeWindowSystemChrome.STANDARD</samp> in
ActionScript) the operating system renders the chrome.</p>
<p>If <samp class="codeph">systemChrome</samp> is set to “none” (<samp class="codeph">NativeWindowSystemChrome.NONE</samp>) the
Window and WindowedApplication container can either use the Flex chrome,
use the WindowedApplicationSkin class to define the chrome, or define no
chrome at all. When you do not use any chrome, the application shows
only a background color. </p>
<div class="p">The Flex chrome is defined by the SparkChromeWindowedApplicationSkin
skin class in the spark.skins.spark package. The following example
sets the <samp class="codeph">skinClass</samp> style of the WindowedApplication
to specify to use the Flex chrome. This example assumes that you
set <samp class="codeph">systemChrome</samp> to “none” in the application’s
.xml file:<pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/WindowSimpleChrome.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;fx:Style&gt;
@namespace "library://ns.adobe.com/flex/spark";
WindowedApplication
{
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
}
&lt;/fx:Style&gt;
&lt;s:Label text="Hello World" /&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
<div class="p">Flex includes a simple skin class for the WindowedApplication
and Window containers that defines just a border and status bar,
but no gripper button, title bar, or title bar buttons. The following
example assigns this skin to the WindowedApplication container.
This example assumes that you set <samp class="codeph">systemChrome</samp> to
“none” in the application’s .xml file: <pre class="noswf">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- aircomponents/src/WindowSimpleChromeWindowed.mxml --&gt;
&lt;s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"&gt;
&lt;fx:Style&gt;
@namespace "library://ns.adobe.com/flex/spark";
WindowedApplication
{
skinClass:ClassReference("spark.skins.spark.WindowedApplicationSkin");
}
&lt;/fx:Style&gt;
&lt;s:Label text="Hello World" /&gt;
&lt;/s:WindowedApplication&gt;</pre>
</div>
</div>
</div>
<div class="nested3" id="WS4b4ddee4904fe77918bded731213043f413-7fff_verapache"><a name="WS4b4ddee4904fe77918bded731213043f413-7fff_verapache"><!-- --></a>
<h4 class="topictitle4">Defining custom skin classes </h4>
<div>
<div class="p">The SparkChromeWindowedApplicationSkin class references
additional skin classes to draw the gripper, title bar, and title
bar buttons. Different operating systems can use the same skin file
for some skins, but use different skin files for other skins. The
following table describes these classes:
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e3081">
<p>Skin</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e3087">
<p>Microsoft Window skin file</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d25766e3093">
<p>Apple Macintosh skin file</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3081 ">
<p>The skin for the close button in the title
bar.</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3087 ">
<p>CloseButtonSkin.mxml</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3093 ">
<p>MacCloseButtonSkin.mxml</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3081 ">
<p>The skin for the gripper button for resizing
the window.</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3087 ">
<p>GripperSkin.mxml</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3093 ">
<p>GripperSkin.mxml</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3081 ">
<p>The skin for the maximize button in the
title bar.</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3087 ">
<p>MaximizeButtonSkin.mxml</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3093 ">
<p>MacMaximizeButtonSkin.mxml</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3081 ">
<p>The skin for the minimize button in the
title bar.</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3087 ">
<p>MinimizeButtonSkin.mxml</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3093 ">
<p>MacMinimizeButtonSkin.mxml</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3081 ">
<p>The title bar skin.</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3087 ">
<p>TitleBarSkin.mxml</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3093 ">
<p>MacTitleBarSkin.mxml</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3081 ">
<p>The skin for the restore button in the title
bar.</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3087 ">
<p>RestoreButtonSkin.mxml</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d25766e3093 ">
<p>No restore button available.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>To customize these skins, define your own skin class based on
the SparkChromeWindowedApplicationSkin class, and then reference
your custom skin classes from it. </p>
</div>
</div>
</div>
<p>Adobe, Adobe AIR and Adobe Flash Platform are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.</p>
</div>
</body>
</html>