Apollo Alpha 1 Documentation - collected by Jimbob | Back to MY RESOURCES


Using the Flex Apollo components

Back to: Apollo Documentation home page

You use the Flex Apollo components in an Apollo application to display HTML web pages, and file information for the system on which the Apollo application executes. You can display files system information in a list, tree, or data grid format. For example, you can use the FileSystemDataGrid control to display file information in a data grid format that includes the file name, creation date, modification date, type, and size.

Contents
  1. About the Flex Apollo components
    1. Flex Apollo example
  2. Using the Flex Apollo sample components
  3. About Flex Builder and the Flex Apollo components
  4. Using the ApolloApplication component

About the Flex Apollo components

Flex provides the following Apollo components:

For more information on these components, see the Apollo ActionScript 3.0 Language Reference.

Flex Apollo example

The following example uses the ApolloApplication 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: 

    <?xml version="1.0" encoding="utf-8"?>
    <mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:HDividedBox>
   	    <mx:FileSystemTree id="tree" 
                width="200" height="100%"
                directory="{new File('C:\\')}"
                enumerationMode="directoriesOnly"
                change="dataGrid.directory = File(tree.selectedItem);"/>	
            <mx:FileSystemDataGrid id="dataGrid" 
                width="100%" height="100%"
                directory="{new File('C:\\')}"/>
        </mx:HDividedBox>
    </mx:ApolloApplication>

Using the Flex Apollo sample components

Along with the Flex Apollo components described above, Flex includes three sample MXML components created using the Flex Apollo components. These three sample components are included in the Flex Builder 2\Apollo SDK\samples directory, and include the following components:

The sample components all work as popup windows, much like the Flex Alert control. To open a component in your application, you use the component's static show() method, as the following example shows for FileOpenPanel.mxml. This example displays the name of the selected file in a TextArea control.

This example assumes that you have copied FileOpenPanel.mxml to the directory containing the application file: 

    <?xml version="1.0" encoding="utf-8"?>
    <mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Script>
            <![CDATA[
                import mx.events.FileEvent;
                import mx.containers.Panel;
  			
                // Open the FileOpenPanel component.
                private function openButton_clickHandler(event:MouseEvent):void
                {
                    var panel:Panel = FileOpenPanel.show();
                    panel.addEventListener(FileEvent.SELECT, fileOpenPanel_selectHandler);
                }
  			
                // Write the selected file name to the TextArea control.
                private function fileOpenPanel_selectHandler(event:FileEvent):void
                {
                    myTA.text=event.file.nativePath; 
                }									
           ]]>        
        </mx:Script>
  
        <mx:Button label="Select File" 
            click="openButton_clickHandler(event);"/>			        
        <mx:TextArea id="myTA"/>			
    </mx:ApolloApplication>

About Flex Builder and the Flex Apollo components

Flex Builder requires the apolloframework.swc and apolloglobal.swc files to compile an application that uses the Flex Apollo components.

To use the Flex Apollo Components in Flex Builder, you must install the Apollo Extensions for Flex Builder. After installing the extensions, you can create an Apollo project. For more information about installing the Apollo Extensions for Flex Builder and creating an Apollo project, see Set up instructions for Flex Builder users and Using the Apollo Extensions for Flex Builder.

The major difference between the Flex Builder configuration for a standard Flex application and for a Flex Apollo application are the SWC files referenced by the Flex Apollo application. When you create a Flex Apollo application, Flex Builder automatically performs the following steps:

Using the ApolloApplication component

The mx:ApolloApplication container component defines an Apollo application object that includes its own window controls. In an MXML Apollo application created by using the Flex Extensions for Apollo, an <ApolloApplication> tag replaces the <Application> tag. The ApolloApplication container replaces the ApplicationWindow control.

An ApolloApplication component provides the following controls:

The window that the ApolloApplication component 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.

By default, the ApolloApplication component creates an application window for which windowMode is set to systemChrome, and visibility is set to true. These settings are made in the application.xml file that Flex Builder generates for an Apollo application. To eliminate the system chrome and window controls that the ApolloApplication component creates by default, edit the opening and closing ApolloApplication tags in the MXML file so that they are Application tags and, in the application.xml file, set the systemChrome to none.

The following simple application shows how the ApolloApplication component works: 

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"

    <mx:Text text="Hello World" />

</mx:ApolloApplication>

For more information about the ApolloApplication container and other Flex Apollo components, see the Apollo ActionScript 3.0 Language Reference.


Back to: Apollo Documentation home page

collected by Jimbob 2007.05